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