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
 259     .fields-group:last-child,
 260     .fields-row__column.fields-group {
 261       margin-bottom: 0;
 262     }
 263
 264     @media screen and (max-width: $no-columns-breakpoint) {
 265       display: block;
 266       margin-bottom: 0;
 267
 268       &__column {
 269         max-width: none;
 270       }
 271
 272       .fields-group:last-child,
 273       .fields-row__column.fields-group,
 274       .fields-row__column {
 275         margin-bottom: 25px;
 276       }
 277     }
 278   }
 279
 280   .input.radio_buttons .radio label {
 281     margin-bottom: 5px;
 282     font-family: inherit;
 283     font-size: 14px;
 284     color: $primary-text-color;
 285     display: block;
 286     width: auto;
 287   }
 288
 289   .check_boxes {
 290     .checkbox {
 291       label {
 292         font-family: inherit;
 293         font-size: 14px;
 294         color: $primary-text-color;
 295         display: inline-block;
 296         width: auto;
 297         position: relative;
 298         padding-top: 5px;
 299         padding-left: 25px;
 300         flex: 1 1 auto;
 301       }
 302
 303       input[type=checkbox] {
 304         position: absolute;
 305         left: 0;
 306         top: 5px;
 307         margin: 0;
 308       }
 309     }
 310   }
 311
 312   .input.static .label_input__wrapper {
 313     font-size: 16px;
 314     padding: 10px;
 315     border: 1px solid $dark-text-color;
 316     border-radius: 4px;
 317   }
 318
 319   input[type=text],
 320   input[type=number],
 321   input[type=email],
 322   input[type=password],
 323   textarea {
 324     box-sizing: border-box;
 325     font-size: 16px;
 326     color: $primary-text-color;
 327     display: block;
 328     width: 100%;
 329     outline: 0;
 330     font-family: inherit;
 331     resize: vertical;
 332     background: darken($ui-base-color, 10%);
 333     border: 1px solid darken($ui-base-color, 14%);
 334     border-radius: 4px;
 335     padding: 10px;
 336
 337     &:invalid {
 338       box-shadow: none;
 339     }
 340
 341     &:focus:invalid:not(:placeholder-shown) {
 342       border-color: lighten($error-red, 12%);
 343     }
 344
 345     &:required:valid {
 346       border-color: $valid-value-color;
 347     }
 348
 349     &:hover {
 350       border-color: darken($ui-base-color, 20%);
 351     }
 352
 353     &:active,
 354     &:focus {
 355       border-color: $highlight-text-color;
 356       background: darken($ui-base-color, 8%);
 357     }
 358   }
 359
 360   .input.field_with_errors {
 361     label {
 362       color: lighten($error-red, 12%);
 363     }
 364
 365     input[type=text],
 366     input[type=number],
 367     input[type=email],
 368     input[type=password],
 369     textarea,
 370     select {
 371       border-color: lighten($error-red, 12%);
 372     }
 373
 374     .error {
 375       display: block;
 376       font-weight: 500;
 377       color: lighten($error-red, 12%);
 378       margin-top: 4px;
 379     }
 380   }
 381
 382   .input.disabled {
 383     opacity: 0.5;
 384   }
 385
 386   .actions {
 387     margin-top: 30px;
 388     display: flex;
 389
 390     &.actions--top {
 391       margin-top: 0;
 392       margin-bottom: 30px;
 393     }
 394   }
 395
 396   button,
 397   .button,
 398   .block-button {
 399     display: block;
 400     width: 100%;
 401     border: 0;
 402     border-radius: 4px;
 403     background: $ui-highlight-color;
 404     color: $primary-text-color;
 405     font-size: 18px;
 406     line-height: inherit;
 407     height: auto;
 408     padding: 10px;
 409     text-transform: uppercase;
 410     text-decoration: none;
 411     text-align: center;
 412     box-sizing: border-box;
 413     cursor: pointer;
 414     font-weight: 500;
 415     outline: 0;
 416     margin-bottom: 10px;
 417     margin-right: 10px;
 418
 419     &:last-child {
 420       margin-right: 0;
 421     }
 422
 423     &:hover {
 424       background-color: lighten($ui-highlight-color, 5%);
 425     }
 426
 427     &:active,
 428     &:focus {
 429       background-color: darken($ui-highlight-color, 5%);
 430     }
 431
 432     &:disabled:hover {
 433       background-color: $ui-primary-color;
 434     }
 435
 436     &.negative {
 437       background: $error-value-color;
 438
 439       &:hover {
 440         background-color: lighten($error-value-color, 5%);
 441       }
 442
 443       &:active,
 444       &:focus {
 445         background-color: darken($error-value-color, 5%);
 446       }
 447     }
 448   }
 449
 450   select {
 451     appearance: none;
 452     box-sizing: border-box;
 453     font-size: 16px;
 454     color: $primary-text-color;
 455     display: block;
 456     width: 100%;
 457     outline: 0;
 458     font-family: inherit;
 459     resize: vertical;
 460     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;
 461     border: 1px solid darken($ui-base-color, 14%);
 462     border-radius: 4px;
 463     padding-left: 10px;
 464     padding-right: 30px;
 465     height: 41px;
 466   }
 467
 468   h4 {
 469     margin-bottom: 15px !important;
 470   }
 471
 472   .label_input {
 473     &__wrapper {
 474       position: relative;
 475     }
 476
 477     &__append {
 478       position: absolute;
 479       right: 3px;
 480       top: 1px;
 481       padding: 10px;
 482       padding-bottom: 9px;
 483       font-size: 16px;
 484       color: $dark-text-color;
 485       font-family: inherit;
 486       pointer-events: none;
 487       cursor: default;
 488       max-width: 140px;
 489       white-space: nowrap;
 490       overflow: hidden;
 491
 492       &::after {
 493         content: '';
 494         display: block;
 495         position: absolute;
 496         top: 0;
 497         right: 0;
 498         bottom: 1px;
 499         width: 5px;
 500         background-image: linear-gradient(to right, rgba(darken($ui-base-color, 10%), 0), darken($ui-base-color, 10%));
 501       }
 502     }
 503   }
 504
 505   &__overlay-area {
 506     position: relative;
 507
 508     &__overlay {
 509       position: absolute;
 510       top: 0;
 511       left: 0;
 512       width: 100%;
 513       height: 100%;
 514       display: flex;
 515       justify-content: center;
 516       align-items: center;
 517       background: rgba($ui-base-color, 0.65);
 518       backdrop-filter: blur(2px);
 519       border-radius: 4px;
 520
 521       &__content {
 522         text-align: center;
 523
 524         &.rich-formatting {
 525           &,
 526           p {
 527             color: $primary-text-color;
 528           }
 529         }
 530       }
 531     }
 532   }
 533 }
 534
 535 .block-icon {
 536   display: block;
 537   margin: 0 auto;
 538   margin-bottom: 10px;
 539   font-size: 24px;
 540 }
 541
 542 .flash-message {
 543   background: lighten($ui-base-color, 8%);
 544   color: $darker-text-color;
 545   border-radius: 4px;
 546   padding: 15px 10px;
 547   margin-bottom: 30px;
 548   text-align: center;
 549
 550   &.notice {
 551     border: 1px solid rgba($valid-value-color, 0.5);
 552     background: rgba($valid-value-color, 0.25);
 553     color: $valid-value-color;
 554   }
 555
 556   &.alert {
 557     border: 1px solid rgba($error-value-color, 0.5);
 558     background: rgba($error-value-color, 0.25);
 559     color: $error-value-color;
 560   }
 561
 562   a {
 563     display: inline-block;
 564     color: $darker-text-color;
 565     text-decoration: none;
 566
 567     &:hover {
 568       color: $primary-text-color;
 569       text-decoration: underline;
 570     }
 571   }
 572
 573   p {
 574     margin-bottom: 15px;
 575   }
 576
 577   .oauth-code {
 578     outline: 0;
 579     box-sizing: border-box;
 580     display: block;
 581     width: 100%;
 582     border: 0;
 583     padding: 10px;
 584     font-family: $font-monospace, monospace;
 585     background: $ui-base-color;
 586     color: $primary-text-color;
 587     font-size: 14px;
 588     margin: 0;
 589
 590     &::-moz-focus-inner {
 591       border: 0;
 592     }
 593
 594     &::-moz-focus-inner,
 595     &:focus,
 596     &:active {
 597       outline: 0 !important;
 598     }
 599
 600     &:focus {
 601       background: lighten($ui-base-color, 4%);
 602     }
 603   }
 604
 605   strong {
 606     font-weight: 500;
 607
 608     @each $lang in $cjk-langs {
 609       &:lang(#{$lang}) {
 610         font-weight: 700;
 611       }
 612     }
 613   }
 614
 615   @media screen and (max-width: 740px) and (min-width: 441px) {
 616     margin-top: 40px;
 617   }
 618 }
 619
 620 .form-footer {
 621   margin-top: 30px;
 622   text-align: center;
 623
 624   a {
 625     color: $darker-text-color;
 626     text-decoration: none;
 627
 628     &:hover {
 629       text-decoration: underline;
 630     }
 631   }
 632 }
 633
 634 .quick-nav {
 635   list-style: none;
 636   margin-bottom: 25px;
 637   font-size: 14px;
 638
 639   li {
 640     display: inline-block;
 641     margin-right: 10px;
 642   }
 643
 644   a {
 645     color: $highlight-text-color;
 646     text-transform: uppercase;
 647     text-decoration: none;
 648     font-weight: 700;
 649
 650     &:hover,
 651     &:focus,
 652     &:active {
 653       color: lighten($highlight-text-color, 8%);
 654     }
 655   }
 656 }
 657
 658 .oauth-prompt,
 659 .follow-prompt {
 660   margin-bottom: 30px;
 661   color: $darker-text-color;
 662
 663   h2 {
 664     font-size: 16px;
 665     margin-bottom: 30px;
 666     text-align: center;
 667   }
 668
 669   strong {
 670     color: $secondary-text-color;
 671     font-weight: 500;
 672
 673     @each $lang in $cjk-langs {
 674       &:lang(#{$lang}) {
 675         font-weight: 700;
 676       }
 677     }
 678   }
 679
 680   @media screen and (max-width: 740px) and (min-width: 441px) {
 681     margin-top: 40px;
 682   }
 683 }
 684
 685 .qr-wrapper {
 686   display: flex;
 687   flex-wrap: wrap;
 688   align-items: flex-start;
 689 }
 690
 691 .qr-code {
 692   flex: 0 0 auto;
 693   background: $simple-background-color;
 694   padding: 4px;
 695   margin: 0 10px 20px 0;
 696   box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
 697   display: inline-block;
 698
 699   svg {
 700     display: block;
 701     margin: 0;
 702   }
 703 }
 704
 705 .qr-alternative {
 706   margin-bottom: 20px;
 707   color: $secondary-text-color;
 708   flex: 150px;
 709
 710   samp {
 711     display: block;
 712     font-size: 14px;
 713   }
 714 }
 715
 716 .table-form {
 717   p {
 718     margin-bottom: 15px;
 719
 720     strong {
 721       font-weight: 500;
 722
 723       @each $lang in $cjk-langs {
 724         &:lang(#{$lang}) {
 725           font-weight: 700;
 726         }
 727       }
 728     }
 729   }
 730 }
 731
 732 .simple_form,
 733 .table-form {
 734   .warning {
 735     box-sizing: border-box;
 736     background: rgba($error-value-color, 0.5);
 737     color: $primary-text-color;
 738     text-shadow: 1px 1px 0 rgba($base-shadow-color, 0.3);
 739     box-shadow: 0 2px 6px rgba($base-shadow-color, 0.4);
 740     border-radius: 4px;
 741     padding: 10px;
 742     margin-bottom: 15px;
 743
 744     a {
 745       color: $primary-text-color;
 746       text-decoration: underline;
 747
 748       &:hover,
 749       &:focus,
 750       &:active {
 751         text-decoration: none;
 752       }
 753     }
 754
 755     strong {
 756       font-weight: 600;
 757       display: block;
 758       margin-bottom: 5px;
 759
 760       @each $lang in $cjk-langs {
 761         &:lang(#{$lang}) {
 762           font-weight: 700;
 763         }
 764       }
 765
 766       .fa {
 767         font-weight: 400;
 768       }
 769     }
 770   }
 771 }
 772
 773 .action-pagination {
 774   display: flex;
 775   flex-wrap: wrap;
 776   align-items: center;
 777
 778   .actions,
 779   .pagination {
 780     flex: 1 1 auto;
 781   }
 782
 783   .actions {
 784     padding: 30px 0;
 785     padding-right: 20px;
 786     flex: 0 0 auto;
 787   }
 788 }
 789
 790 .post-follow-actions {
 791   text-align: center;
 792   color: $darker-text-color;
 793
 794   div {
 795     margin-bottom: 4px;
 796   }
 797 }
 798
 799 .alternative-login {
 800   margin-top: 20px;
 801   margin-bottom: 20px;
 802
 803   h4 {
 804     font-size: 16px;
 805     color: $primary-text-color;
 806     text-align: center;
 807     margin-bottom: 20px;
 808     border: 0;
 809     padding: 0;
 810   }
 811
 812   .button {
 813     display: block;
 814   }
 815 }
 816
 817 .scope-danger {
 818   color: $warning-red;
 819 }
 820
 821 .form_admin_settings_site_short_description,
 822 .form_admin_settings_site_description,
 823 .form_admin_settings_site_extended_description,
 824 .form_admin_settings_site_terms,
 825 .form_admin_settings_custom_css,
 826 .form_admin_settings_closed_registrations_message {
 827   textarea {
 828     font-family: $font-monospace, monospace;
 829   }
 830 }
 831
 832 .input-copy {
 833   background: darken($ui-base-color, 10%);
 834   border: 1px solid darken($ui-base-color, 14%);
 835   border-radius: 4px;
 836   display: flex;
 837   align-items: center;
 838   padding-right: 4px;
 839   position: relative;
 840   top: 1px;
 841   transition: border-color 300ms linear;
 842
 843   &__wrapper {
 844     flex: 1 1 auto;
 845   }
 846
 847   input[type=text] {
 848     background: transparent;
 849     border: 0;
 850     padding: 10px;
 851     font-size: 14px;
 852     font-family: $font-monospace, monospace;
 853   }
 854
 855   button {
 856     flex: 0 0 auto;
 857     margin: 4px;
 858     text-transform: none;
 859     font-weight: 400;
 860     font-size: 14px;
 861     padding: 7px 18px;
 862     padding-bottom: 6px;
 863     width: auto;
 864     transition: background 300ms linear;
 865   }
 866
 867   &.copied {
 868     border-color: $valid-value-color;
 869     transition: none;
 870
 871     button {
 872       background: $valid-value-color;
 873       transition: none;
 874     }
 875   }
 876 }
 877
 878 .connection-prompt {
 879   margin-bottom: 25px;
 880
 881   .fa-link {
 882     background-color: darken($ui-base-color, 4%);
 883     border-radius: 100%;
 884     font-size: 24px;
 885     padding: 10px;
 886   }
 887
 888   &__column {
 889     align-items: center;
 890     display: flex;
 891     flex: 1;
 892     flex-direction: column;
 893     flex-shrink: 1;
 894     max-width: 50%;
 895
 896     &-sep {
 897       align-self: center;
 898       flex-grow: 0;
 899       overflow: visible;
 900       position: relative;
 901       z-index: 1;
 902     }
 903
 904     p {
 905       word-break: break-word;
 906     }
 907   }
 908
 909   .account__avatar {
 910     margin-bottom: 20px;
 911   }
 912
 913   &__connection {
 914     background-color: lighten($ui-base-color, 8%);
 915     box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
 916     border-radius: 4px;
 917     padding: 25px 10px;
 918     position: relative;
 919     text-align: center;
 920
 921     &::after {
 922       background-color: darken($ui-base-color, 4%);
 923       content: '';
 924       display: block;
 925       height: 100%;
 926       left: 50%;
 927       position: absolute;
 928       top: 0;
 929       width: 1px;
 930     }
 931   }
 932
 933   &__row {
 934     align-items: flex-start;
 935     display: flex;
 936     flex-direction: row;
 937   }
 938 }