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