app/javascript/styles/mastodon/forms.scss

   1 $no-columns-breakpoint: 600px;
   2
   3 code {
   4   font-family: $font-monospace, monospace;
   5   font-weight: 400;
   6 }
   7
   8 .form-container {
   9   max-width: 400px;
  10   padding: 20px;
  11   margin: 0 auto;
  12 }
  13
  14 .simple_form {
  15   .input {
  16     margin-bottom: 15px;
  17     overflow: hidden;
  18
  19     &.hidden {
  20       margin: 0;
  21     }
  22
  23     &.radio_buttons {
  24       .radio {
  25         margin-bottom: 15px;
  26
  27         &:last-child {
  28           margin-bottom: 0;
  29         }
  30       }
  31
  32       .radio > label {
  33         position: relative;
  34         padding-left: 28px;
  35
  36         input {
  37           position: absolute;
  38           top: -2px;
  39           left: 0;
  40         }
  41       }
  42     }
  43
  44     &.boolean {
  45       position: relative;
  46       margin-bottom: 0;
  47
  48       .label_input > label {
  49         font-family: inherit;
  50         font-size: 14px;
  51         padding-top: 5px;
  52         color: $primary-text-color;
  53         display: block;
  54         width: auto;
  55       }
  56
  57       .label_input,
  58       .hint {
  59         padding-left: 28px;
  60       }
  61
  62       .label_input__wrapper {
  63         position: static;
  64       }
  65
  66       label.checkbox {
  67         position: absolute;
  68         top: 2px;
  69         left: 0;
  70       }
  71
  72       label a {
  73         color: $highlight-text-color;
  74         text-decoration: underline;
  75
  76         &:hover,
  77         &:active,
  78         &:focus {
  79           text-decoration: none;
  80         }
  81       }
  82
  83       .recommended {
  84         position: absolute;
  85         margin: 0 4px;
  86         margin-top: -2px;
  87       }
  88     }
  89   }
  90
  91   .row {
  92     display: flex;
  93     margin: 0 -5px;
  94
  95     .input {
  96       box-sizing: border-box;
  97       flex: 1 1 auto;
  98       width: 50%;
  99       padding: 0 5px;
 100     }
 101   }
 102
 103   .hint {
 104     color: $darker-text-color;
 105
 106     a {
 107       color: $highlight-text-color;
 108     }
 109
 110     code {
 111       border-radius: 3px;
 112       padding: 0.2em 0.4em;
 113       background: darken($ui-base-color, 12%);
 114     }
 115
 116     li {
 117       list-style: disc;
 118       margin-left: 18px;
 119     }
 120   }
 121
 122   ul.hint {
 123     margin-bottom: 15px;
 124   }
 125
 126   span.hint {
 127     display: block;
 128     font-size: 12px;
 129     margin-top: 4px;
 130   }
 131
 132   p.hint {
 133     margin-bottom: 15px;
 134     color: $darker-text-color;
 135
 136     &.subtle-hint {
 137       text-align: center;
 138       font-size: 12px;
 139       line-height: 18px;
 140       margin-top: 15px;
 141       margin-bottom: 0;
 142     }
 143   }
 144
 145   .card {
 146     margin-bottom: 15px;
 147   }
 148
 149   strong {
 150     font-weight: 500;
 151
 152     @each $lang in $cjk-langs {
 153       &:lang(#{$lang}) {
 154         font-weight: 700;
 155       }
 156     }
 157   }
 158
 159   .input.with_floating_label {
 160     .label_input {
 161       display: flex;
 162
 163       & > label {
 164         font-family: inherit;
 165         font-size: 14px;
 166         color: $primary-text-color;
 167         font-weight: 500;
 168         min-width: 150px;
 169         flex: 0 0 auto;
 170       }
 171
 172       input,
 173       select {
 174         flex: 1 1 auto;
 175       }
 176     }
 177
 178     &.select .hint {
 179       margin-top: 6px;
 180       margin-left: 150px;
 181     }
 182   }
 183
 184   .input.with_label {
 185     .label_input > label {
 186       font-family: inherit;
 187       font-size: 14px;
 188       color: $primary-text-color;
 189       display: block;
 190       margin-bottom: 8px;
 191       word-wrap: break-word;
 192       font-weight: 500;
 193     }
 194
 195     .hint {
 196       margin-top: 6px;
 197     }
 198
 199     ul {
 200       flex: 390px;
 201     }
 202   }
 203
 204   .input.with_block_label {
 205     max-width: none;
 206
 207     & > label {
 208       font-family: inherit;
 209       font-size: 16px;
 210       color: $primary-text-color;
 211       display: block;
 212       font-weight: 500;
 213       padding-top: 5px;
 214     }
 215
 216     .hint {
 217       margin-bottom: 15px;
 218     }
 219
 220     ul {
 221       columns: 2;
 222     }
 223   }
 224
 225   .required abbr {
 226     text-decoration: none;
 227     color: lighten($error-value-color, 12%);
 228   }
 229
 230   .fields-group {
 231     margin-bottom: 25px;
 232
 233     .input:last-child {
 234       margin-bottom: 0;
 235     }
 236   }
 237
 238   .fields-row {
 239     display: flex;
 240     margin: 0 -10px;
 241     padding-top: 5px;
 242     margin-bottom: 25px;
 243
 244     .input {
 245       max-width: none;
 246     }
 247
 248     &__column {
 249       box-sizing: border-box;
 250       padding: 0 10px;
 251       flex: 1 1 auto;
 252       min-height: 1px;
 253
 254       &-6 {
 255         max-width: 50%;
 256       }
 257
 258       .actions {
 259         margin-top: 27px;
 260       }
 261     }
 262
 263     .fields-group:last-child,
 264     .fields-row__column.fields-group {
 265       margin-bottom: 0;
 266     }
 267
 268     @media screen and (max-width: $no-columns-breakpoint) {
 269       display: block;
 270       margin-bottom: 0;
 271
 272       &__column {
 273         max-width: none;
 274       }
 275
 276       .fields-group:last-child,
 277       .fields-row__column.fields-group,
 278       .fields-row__column {
 279         margin-bottom: 25px;
 280       }
 281     }
 282   }
 283
 284   .input.radio_buttons .radio label {
 285     margin-bottom: 5px;
 286     font-family: inherit;
 287     font-size: 14px;
 288     color: $primary-text-color;
 289     display: block;
 290     width: auto;
 291   }
 292
 293   .check_boxes {
 294     .checkbox {
 295       label {
 296         font-family: inherit;
 297         font-size: 14px;
 298         color: $primary-text-color;
 299         display: inline-block;
 300         width: auto;
 301         position: relative;
 302         padding-top: 5px;
 303         padding-left: 25px;
 304         flex: 1 1 auto;
 305       }
 306
 307       input[type=checkbox] {
 308         position: absolute;
 309         left: 0;
 310         top: 5px;
 311         margin: 0;
 312       }
 313     }
 314   }
 315
 316   .input.static .label_input__wrapper {
 317     font-size: 16px;
 318     padding: 10px;
 319     border: 1px solid $dark-text-color;
 320     border-radius: 4px;
 321   }
 322
 323   input[type=text],
 324   input[type=number],
 325   input[type=email],
 326   input[type=password],
 327   textarea {
 328     box-sizing: border-box;
 329     font-size: 16px;
 330     color: $primary-text-color;
 331     display: block;
 332     width: 100%;
 333     outline: 0;
 334     font-family: inherit;
 335     resize: vertical;
 336     background: darken($ui-base-color, 10%);
 337     border: 1px solid darken($ui-base-color, 14%);
 338     border-radius: 4px;
 339     padding: 10px;
 340
 341     &::placeholder {
 342       color: lighten($darker-text-color, 4%);
 343     }
 344
 345     &:invalid {
 346       box-shadow: none;
 347     }
 348
 349     &:focus:invalid:not(:placeholder-shown) {
 350       border-color: lighten($error-red, 12%);
 351     }
 352
 353     &:required:valid {
 354       border-color: $valid-value-color;
 355     }
 356
 357     &:hover {
 358       border-color: darken($ui-base-color, 20%);
 359     }
 360
 361     &:active,
 362     &:focus {
 363       border-color: $highlight-text-color;
 364       background: darken($ui-base-color, 8%);
 365     }
 366   }
 367
 368   .input.field_with_errors {
 369     label {
 370       color: lighten($error-red, 12%);
 371     }
 372
 373     input[type=text],
 374     input[type=number],
 375     input[type=email],
 376     input[type=password],
 377     textarea,
 378     select {
 379       border-color: lighten($error-red, 12%);
 380     }
 381
 382     .error {
 383       display: block;
 384       font-weight: 500;
 385       color: lighten($error-red, 12%);
 386       margin-top: 4px;
 387     }
 388   }
 389
 390   .input.disabled {
 391     opacity: 0.5;
 392   }
 393
 394   .actions {
 395     margin-top: 30px;
 396     display: flex;
 397
 398     &.actions--top {
 399       margin-top: 0;
 400       margin-bottom: 30px;
 401     }
 402   }
 403
 404   button,
 405   .button,
 406   .block-button {
 407     display: block;
 408     width: 100%;
 409     border: 0;
 410     border-radius: 4px;
 411     background: $ui-highlight-color;
 412     color: $primary-text-color;
 413     font-size: 18px;
 414     line-height: inherit;
 415     height: auto;
 416     padding: 10px;
 417     text-transform: uppercase;
 418     text-decoration: none;
 419     text-align: center;
 420     box-sizing: border-box;
 421     cursor: pointer;
 422     font-weight: 500;
 423     outline: 0;
 424     margin-bottom: 10px;
 425     margin-right: 10px;
 426
 427     &:last-child {
 428       margin-right: 0;
 429     }
 430
 431     &:hover {
 432       background-color: lighten($ui-highlight-color, 5%);
 433     }
 434
 435     &:active,
 436     &:focus {
 437       background-color: darken($ui-highlight-color, 5%);
 438     }
 439
 440     &:disabled:hover {
 441       background-color: $ui-primary-color;
 442     }
 443
 444     &.negative {
 445       background: $error-value-color;
 446
 447       &:hover {
 448         background-color: lighten($error-value-color, 5%);
 449       }
 450
 451       &:active,
 452       &:focus {
 453         background-color: darken($error-value-color, 5%);
 454       }
 455     }
 456   }
 457
 458   select {
 459     appearance: none;
 460     box-sizing: border-box;
 461     font-size: 16px;
 462     color: $primary-text-color;
 463     display: block;
 464     width: 100%;
 465     outline: 0;
 466     font-family: inherit;
 467     resize: vertical;
 468     background: darken($ui-base-color, 10%) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(lighten($ui-base-color, 12%))}'/></svg>") no-repeat right 8px center / auto 16px;
 469     border: 1px solid darken($ui-base-color, 14%);
 470     border-radius: 4px;
 471     padding-left: 10px;
 472     padding-right: 30px;
 473     height: 41px;
 474   }
 475
 476   h4 {
 477     margin-bottom: 15px !important;
 478   }
 479
 480   .label_input {
 481     &__wrapper {
 482       position: relative;
 483     }
 484
 485     &__append {
 486       position: absolute;
 487       right: 3px;
 488       top: 1px;
 489       padding: 10px;
 490       padding-bottom: 9px;
 491       font-size: 16px;
 492       color: $dark-text-color;
 493       font-family: inherit;
 494       pointer-events: none;
 495       cursor: default;
 496       max-width: 140px;
 497       white-space: nowrap;
 498       overflow: hidden;
 499
 500       &::after {
 501         content: '';
 502         display: block;
 503         position: absolute;
 504         top: 0;
 505         right: 0;
 506         bottom: 1px;
 507         width: 5px;
 508         background-image: linear-gradient(to right, rgba(darken($ui-base-color, 10%), 0), darken($ui-base-color, 10%));
 509       }
 510     }
 511   }
 512
 513   &__overlay-area {
 514     position: relative;
 515
 516     &__overlay {
 517       position: absolute;
 518       top: 0;
 519       left: 0;
 520       width: 100%;
 521       height: 100%;
 522       display: flex;
 523       justify-content: center;
 524       align-items: center;
 525       background: rgba($ui-base-color, 0.65);
 526       backdrop-filter: blur(2px);
 527       border-radius: 4px;
 528
 529       &__content {
 530         text-align: center;
 531
 532         &.rich-formatting {
 533           &,
 534           p {
 535             color: $primary-text-color;
 536           }
 537         }
 538       }
 539     }
 540   }
 541 }
 542
 543 .block-icon {
 544   display: block;
 545   margin: 0 auto;
 546   margin-bottom: 10px;
 547   font-size: 24px;
 548 }
 549
 550 .flash-message {
 551   background: lighten($ui-base-color, 8%);
 552   color: $darker-text-color;
 553   border-radius: 4px;
 554   padding: 15px 10px;
 555   margin-bottom: 30px;
 556   text-align: center;
 557
 558   &.notice {
 559     border: 1px solid rgba($valid-value-color, 0.5);
 560     background: rgba($valid-value-color, 0.25);
 561     color: $valid-value-color;
 562   }
 563
 564   &.alert {
 565     border: 1px solid rgba($error-value-color, 0.5);
 566     background: rgba($error-value-color, 0.25);
 567     color: $error-value-color;
 568   }
 569
 570   a {
 571     display: inline-block;
 572     color: $darker-text-color;
 573     text-decoration: none;
 574
 575     &:hover {
 576       color: $primary-text-color;
 577       text-decoration: underline;
 578     }
 579   }
 580
 581   p {
 582     margin-bottom: 15px;
 583   }
 584
 585   .oauth-code {
 586     outline: 0;
 587     box-sizing: border-box;
 588     display: block;
 589     width: 100%;
 590     border: 0;
 591     padding: 10px;
 592     font-family: $font-monospace, monospace;
 593     background: $ui-base-color;
 594     color: $primary-text-color;
 595     font-size: 14px;
 596     margin: 0;
 597
 598     &::-moz-focus-inner {
 599       border: 0;
 600     }
 601
 602     &::-moz-focus-inner,
 603     &:focus,
 604     &:active {
 605       outline: 0 !important;
 606     }
 607
 608     &:focus {
 609       background: lighten($ui-base-color, 4%);
 610     }
 611   }
 612
 613   strong {
 614     font-weight: 500;
 615
 616     @each $lang in $cjk-langs {
 617       &:lang(#{$lang}) {
 618         font-weight: 700;
 619       }
 620     }
 621   }
 622
 623   @media screen and (max-width: 740px) and (min-width: 441px) {
 624     margin-top: 40px;
 625   }
 626 }
 627
 628 .form-footer {
 629   margin-top: 30px;
 630   text-align: center;
 631
 632   a {
 633     color: $darker-text-color;
 634     text-decoration: none;
 635
 636     &:hover {
 637       text-decoration: underline;
 638     }
 639   }
 640 }
 641
 642 .quick-nav {
 643   list-style: none;
 644   margin-bottom: 25px;
 645   font-size: 14px;
 646
 647   li {
 648     display: inline-block;
 649     margin-right: 10px;
 650   }
 651
 652   a {
 653     color: $highlight-text-color;
 654     text-transform: uppercase;
 655     text-decoration: none;
 656     font-weight: 700;
 657
 658     &:hover,
 659     &:focus,
 660     &:active {
 661       color: lighten($highlight-text-color, 8%);
 662     }
 663   }
 664 }
 665
 666 .oauth-prompt,
 667 .follow-prompt {
 668   margin-bottom: 30px;
 669   color: $darker-text-color;
 670
 671   h2 {
 672     font-size: 16px;
 673     margin-bottom: 30px;
 674     text-align: center;
 675   }
 676
 677   strong {
 678     color: $secondary-text-color;
 679     font-weight: 500;
 680
 681     @each $lang in $cjk-langs {
 682       &:lang(#{$lang}) {
 683         font-weight: 700;
 684       }
 685     }
 686   }
 687
 688   @media screen and (max-width: 740px) and (min-width: 441px) {
 689     margin-top: 40px;
 690   }
 691 }
 692
 693 .qr-wrapper {
 694   display: flex;
 695   flex-wrap: wrap;
 696   align-items: flex-start;
 697 }
 698
 699 .qr-code {
 700   flex: 0 0 auto;
 701   background: $simple-background-color;
 702   padding: 4px;
 703   margin: 0 10px 20px 0;
 704   box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
 705   display: inline-block;
 706
 707   svg {
 708     display: block;
 709     margin: 0;
 710   }
 711 }
 712
 713 .qr-alternative {
 714   margin-bottom: 20px;
 715   color: $secondary-text-color;
 716   flex: 150px;
 717
 718   samp {
 719     display: block;
 720     font-size: 14px;
 721   }
 722 }
 723
 724 .table-form {
 725   p {
 726     margin-bottom: 15px;
 727
 728     strong {
 729       font-weight: 500;
 730
 731       @each $lang in $cjk-langs {
 732         &:lang(#{$lang}) {
 733           font-weight: 700;
 734         }
 735       }
 736     }
 737   }
 738 }
 739
 740 .simple_form,
 741 .table-form {
 742   .warning {
 743     box-sizing: border-box;
 744     background: rgba($error-value-color, 0.5);
 745     color: $primary-text-color;
 746     text-shadow: 1px 1px 0 rgba($base-shadow-color, 0.3);
 747     box-shadow: 0 2px 6px rgba($base-shadow-color, 0.4);
 748     border-radius: 4px;
 749     padding: 10px;
 750     margin-bottom: 15px;
 751
 752     a {
 753       color: $primary-text-color;
 754       text-decoration: underline;
 755
 756       &:hover,
 757       &:focus,
 758       &:active {
 759         text-decoration: none;
 760       }
 761     }
 762
 763     strong {
 764       font-weight: 600;
 765       display: block;
 766       margin-bottom: 5px;
 767
 768       @each $lang in $cjk-langs {
 769         &:lang(#{$lang}) {
 770           font-weight: 700;
 771         }
 772       }
 773
 774       .fa {
 775         font-weight: 400;
 776       }
 777     }
 778   }
 779 }
 780
 781 .action-pagination {
 782   display: flex;
 783   flex-wrap: wrap;
 784   align-items: center;
 785
 786   .actions,
 787   .pagination {
 788     flex: 1 1 auto;
 789   }
 790
 791   .actions {
 792     padding: 30px 0;
 793     padding-right: 20px;
 794     flex: 0 0 auto;
 795   }
 796 }
 797
 798 .post-follow-actions {
 799   text-align: center;
 800   color: $darker-text-color;
 801
 802   div {
 803     margin-bottom: 4px;
 804   }
 805 }
 806
 807 .alternative-login {
 808   margin-top: 20px;
 809   margin-bottom: 20px;
 810
 811   h4 {
 812     font-size: 16px;
 813     color: $primary-text-color;
 814     text-align: center;
 815     margin-bottom: 20px;
 816     border: 0;
 817     padding: 0;
 818   }
 819
 820   .button {
 821     display: block;
 822   }
 823 }
 824
 825 .scope-danger {
 826   color: $warning-red;
 827 }
 828
 829 .form_admin_settings_site_short_description,
 830 .form_admin_settings_site_description,
 831 .form_admin_settings_site_extended_description,
 832 .form_admin_settings_site_terms,
 833 .form_admin_settings_custom_css,
 834 .form_admin_settings_closed_registrations_message {
 835   textarea {
 836     font-family: $font-monospace, monospace;
 837   }
 838 }
 839
 840 .input-copy {
 841   background: darken($ui-base-color, 10%);
 842   border: 1px solid darken($ui-base-color, 14%);
 843   border-radius: 4px;
 844   display: flex;
 845   align-items: center;
 846   padding-right: 4px;
 847   position: relative;
 848   top: 1px;
 849   transition: border-color 300ms linear;
 850
 851   &__wrapper {
 852     flex: 1 1 auto;
 853   }
 854
 855   input[type=text] {
 856     background: transparent;
 857     border: 0;
 858     padding: 10px;
 859     font-size: 14px;
 860     font-family: $font-monospace, monospace;
 861   }
 862
 863   button {
 864     flex: 0 0 auto;
 865     margin: 4px;
 866     text-transform: none;
 867     font-weight: 400;
 868     font-size: 14px;
 869     padding: 7px 18px;
 870     padding-bottom: 6px;
 871     width: auto;
 872     transition: background 300ms linear;
 873   }
 874
 875   &.copied {
 876     border-color: $valid-value-color;
 877     transition: none;
 878
 879     button {
 880       background: $valid-value-color;
 881       transition: none;
 882     }
 883   }
 884 }
 885
 886 .connection-prompt {
 887   margin-bottom: 25px;
 888
 889   .fa-link {
 890     background-color: darken($ui-base-color, 4%);
 891     border-radius: 100%;
 892     font-size: 24px;
 893     padding: 10px;
 894   }
 895
 896   &__column {
 897     align-items: center;
 898     display: flex;
 899     flex: 1;
 900     flex-direction: column;
 901     flex-shrink: 1;
 902     max-width: 50%;
 903
 904     &-sep {
 905       align-self: center;
 906       flex-grow: 0;
 907       overflow: visible;
 908       position: relative;
 909       z-index: 1;
 910     }
 911
 912     p {
 913       word-break: break-word;
 914     }
 915   }
 916
 917   .account__avatar {
 918     margin-bottom: 20px;
 919   }
 920
 921   &__connection {
 922     background-color: lighten($ui-base-color, 8%);
 923     box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
 924     border-radius: 4px;
 925     padding: 25px 10px;
 926     position: relative;
 927     text-align: center;
 928
 929     &::after {
 930       background-color: darken($ui-base-color, 4%);
 931       content: '';
 932       display: block;
 933       height: 100%;
 934       left: 50%;
 935       position: absolute;
 936       top: 0;
 937       width: 1px;
 938     }
 939   }
 940
 941   &__row {
 942     align-items: flex-start;
 943     display: flex;
 944     flex-direction: row;
 945   }
 946 }