app/javascript/styles/mastodon/components.scss

   1 .app-body {
   2   -webkit-overflow-scrolling: touch;
   3   -ms-overflow-style: -ms-autohiding-scrollbar;
   4 }
   5
   6 .button {
   7   background-color: $ui-highlight-color;
   8   border: 10px none;
   9   border-radius: 4px;
  10   box-sizing: border-box;
  11   color: $primary-text-color;
  12   cursor: pointer;
  13   display: inline-block;
  14   font-family: inherit;
  15   font-size: 14px;
  16   font-weight: 500;
  17   height: 36px;
  18   letter-spacing: 0;
  19   line-height: 36px;
  20   overflow: hidden;
  21   padding: 0 16px;
  22   position: relative;
  23   text-align: center;
  24   text-transform: uppercase;
  25   text-decoration: none;
  26   text-overflow: ellipsis;
  27   transition: all 100ms ease-in;
  28   white-space: nowrap;
  29   width: auto;
  30
  31   &:active,
  32   &:focus,
  33   &:hover {
  34     background-color: lighten($ui-highlight-color, 10%);
  35     transition: all 200ms ease-out;
  36   }
  37
  38   &:disabled {
  39     background-color: $ui-primary-color;
  40     cursor: default;
  41   }
  42
  43   &::-moz-focus-inner {
  44     border: 0;
  45   }
  46
  47   &::-moz-focus-inner,
  48   &:focus,
  49   &:active {
  50     outline: 0 !important;
  51   }
  52
  53   &.button-primary,
  54   &.button-alternative,
  55   &.button-secondary,
  56   &.button-alternative-2 {
  57     font-size: 16px;
  58     line-height: 36px;
  59     height: auto;
  60     text-transform: none;
  61     padding: 4px 16px;
  62   }
  63
  64   &.button-alternative {
  65     color: $inverted-text-color;
  66     background: $ui-primary-color;
  67
  68     &:active,
  69     &:focus,
  70     &:hover {
  71       background-color: lighten($ui-primary-color, 4%);
  72     }
  73   }
  74
  75   &.button-alternative-2 {
  76     background: $ui-base-lighter-color;
  77
  78     &:active,
  79     &:focus,
  80     &:hover {
  81       background-color: lighten($ui-base-lighter-color, 4%);
  82     }
  83   }
  84
  85   &.button-secondary {
  86     color: $darker-text-color;
  87     background: transparent;
  88     padding: 3px 15px;
  89     border: 1px solid $ui-primary-color;
  90
  91     &:active,
  92     &:focus,
  93     &:hover {
  94       border-color: lighten($ui-primary-color, 4%);
  95       color: lighten($darker-text-color, 4%);
  96     }
  97   }
  98
  99   &.button--block {
 100     display: block;
 101     width: 100%;
 102   }
 103 }
 104
 105 .column__wrapper {
 106   display: flex;
 107   flex: 1 1 auto;
 108   position: relative;
 109 }
 110
 111 .icon-button {
 112   display: inline-block;
 113   padding: 0;
 114   color: $action-button-color;
 115   border: none;
 116   background: transparent;
 117   cursor: pointer;
 118   transition: color 100ms ease-in;
 119
 120   &:hover,
 121   &:active,
 122   &:focus {
 123     color: lighten($action-button-color, 7%);
 124     transition: color 200ms ease-out;
 125   }
 126
 127   &.disabled {
 128     color: darken($action-button-color, 13%);
 129     cursor: default;
 130   }
 131
 132   &.active {
 133     color: $highlight-text-color;
 134   }
 135
 136   &::-moz-focus-inner {
 137     border: 0;
 138   }
 139
 140   &::-moz-focus-inner,
 141   &:focus,
 142   &:active {
 143     outline: 0 !important;
 144   }
 145
 146   &.inverted {
 147     color: $lighter-text-color;
 148
 149     &:hover,
 150     &:active,
 151     &:focus {
 152       color: darken($lighter-text-color, 7%);
 153     }
 154
 155     &.disabled {
 156       color: lighten($lighter-text-color, 7%);
 157     }
 158
 159     &.active {
 160       color: $highlight-text-color;
 161
 162       &.disabled {
 163         color: lighten($highlight-text-color, 13%);
 164       }
 165     }
 166   }
 167
 168   &.overlayed {
 169     box-sizing: content-box;
 170     background: rgba($base-overlay-background, 0.6);
 171     color: rgba($primary-text-color, 0.7);
 172     border-radius: 4px;
 173     padding: 2px;
 174
 175     &:hover {
 176       background: rgba($base-overlay-background, 0.9);
 177     }
 178   }
 179 }
 180
 181 .text-icon-button {
 182   color: $lighter-text-color;
 183   border: none;
 184   background: transparent;
 185   cursor: pointer;
 186   font-weight: 600;
 187   font-size: 11px;
 188   padding: 0 3px;
 189   line-height: 27px;
 190   outline: 0;
 191   transition: color 100ms ease-in;
 192
 193   &:hover,
 194   &:active,
 195   &:focus {
 196     color: darken($lighter-text-color, 7%);
 197     transition: color 200ms ease-out;
 198   }
 199
 200   &.disabled {
 201     color: lighten($lighter-text-color, 20%);
 202     cursor: default;
 203   }
 204
 205   &.active {
 206     color: $highlight-text-color;
 207   }
 208
 209   &::-moz-focus-inner {
 210     border: 0;
 211   }
 212
 213   &::-moz-focus-inner,
 214   &:focus,
 215   &:active {
 216     outline: 0 !important;
 217   }
 218 }
 219
 220 .dropdown-menu {
 221   position: absolute;
 222   transform-origin: 50% 0;
 223 }
 224
 225 .invisible {
 226   font-size: 0;
 227   line-height: 0;
 228   display: inline-block;
 229   width: 0;
 230   height: 0;
 231   position: absolute;
 232
 233   img,
 234   svg {
 235     margin: 0 !important;
 236     border: 0 !important;
 237     padding: 0 !important;
 238     width: 0 !important;
 239     height: 0 !important;
 240   }
 241 }
 242
 243 .ellipsis {
 244   &::after {
 245     content: "…";
 246   }
 247 }
 248
 249 .compose-form {
 250   padding: 10px;
 251
 252   .compose-form__warning {
 253     color: $inverted-text-color;
 254     margin-bottom: 15px;
 255     background: $ui-primary-color;
 256     box-shadow: 0 2px 6px rgba($base-shadow-color, 0.3);
 257     padding: 8px 10px;
 258     border-radius: 4px;
 259     font-size: 13px;
 260     font-weight: 400;
 261
 262     strong {
 263       color: $inverted-text-color;
 264       font-weight: 500;
 265
 266       @each $lang in $cjk-langs {
 267         &:lang(#{$lang}) {
 268           font-weight: 700;
 269         }
 270       }
 271     }
 272
 273     a {
 274       color: $lighter-text-color;
 275       font-weight: 500;
 276       text-decoration: underline;
 277
 278       &:hover,
 279       &:active,
 280       &:focus {
 281         text-decoration: none;
 282       }
 283     }
 284   }
 285
 286   .compose-form__autosuggest-wrapper {
 287     position: relative;
 288
 289     .emoji-picker-dropdown {
 290       position: absolute;
 291       right: 5px;
 292       top: 5px;
 293     }
 294   }
 295
 296   .autosuggest-textarea,
 297   .spoiler-input {
 298     position: relative;
 299   }
 300
 301   .autosuggest-textarea__textarea,
 302   .spoiler-input__input {
 303     display: block;
 304     box-sizing: border-box;
 305     width: 100%;
 306     margin: 0;
 307     color: $inverted-text-color;
 308     background: $simple-background-color;
 309     padding: 10px;
 310     font-family: inherit;
 311     font-size: 14px;
 312     resize: vertical;
 313     border: 0;
 314     outline: 0;
 315
 316     &:focus {
 317       outline: 0;
 318     }
 319
 320     @media screen and (max-width: 600px) {
 321       font-size: 16px;
 322     }
 323   }
 324
 325   .spoiler-input__input {
 326     border-radius: 4px;
 327   }
 328
 329   .autosuggest-textarea__textarea {
 330     min-height: 100px;
 331     border-radius: 4px 4px 0 0;
 332     padding-bottom: 0;
 333     padding-right: 10px + 22px;
 334     resize: none;
 335
 336     @media screen and (max-width: 600px) {
 337       height: 100px !important; // prevent auto-resize textarea
 338       resize: vertical;
 339     }
 340   }
 341
 342   .autosuggest-textarea__suggestions {
 343     box-sizing: border-box;
 344     display: none;
 345     position: absolute;
 346     top: 100%;
 347     width: 100%;
 348     z-index: 99;
 349     box-shadow: 4px 4px 6px rgba($base-shadow-color, 0.4);
 350     background: $ui-secondary-color;
 351     border-radius: 0 0 4px 4px;
 352     color: $inverted-text-color;
 353     font-size: 14px;
 354     padding: 6px;
 355
 356     &.autosuggest-textarea__suggestions--visible {
 357       display: block;
 358     }
 359   }
 360
 361   .autosuggest-textarea__suggestions__item {
 362     padding: 10px;
 363     cursor: pointer;
 364     border-radius: 4px;
 365
 366     &:hover,
 367     &:focus,
 368     &:active,
 369     &.selected {
 370       background: darken($ui-secondary-color, 10%);
 371     }
 372   }
 373
 374   .autosuggest-account,
 375   .autosuggest-emoji {
 376     display: flex;
 377     flex-direction: row;
 378     align-items: center;
 379     justify-content: flex-start;
 380     line-height: 18px;
 381     font-size: 14px;
 382   }
 383
 384   .autosuggest-account-icon,
 385   .autosuggest-emoji img {
 386     display: block;
 387     margin-right: 8px;
 388     width: 16px;
 389     height: 16px;
 390   }
 391
 392   .autosuggest-account .display-name__account {
 393     color: $lighter-text-color;
 394   }
 395
 396   .compose-form__modifiers {
 397     color: $inverted-text-color;
 398     font-family: inherit;
 399     font-size: 14px;
 400     background: $simple-background-color;
 401
 402     .compose-form__upload-wrapper {
 403       overflow: hidden;
 404     }
 405
 406     .compose-form__uploads-wrapper {
 407       display: flex;
 408       flex-direction: row;
 409       padding: 5px;
 410       flex-wrap: wrap;
 411     }
 412
 413     .compose-form__upload {
 414       flex: 1 1 0;
 415       min-width: 40%;
 416       margin: 5px;
 417
 418       &__actions {
 419         background: linear-gradient(180deg, rgba($base-shadow-color, 0.8) 0, rgba($base-shadow-color, 0.35) 80%, transparent);
 420         display: flex;
 421         align-items: flex-start;
 422         justify-content: space-between;
 423         opacity: 0;
 424         transition: opacity .1s ease;
 425
 426         .icon-button {
 427           flex: 0 1 auto;
 428           color: $action-button-color;
 429           font-size: 14px;
 430           font-weight: 500;
 431           padding: 10px;
 432           font-family: inherit;
 433
 434           &:hover,
 435           &:focus,
 436           &:active {
 437             color: lighten($action-button-color, 7%);
 438           }
 439         }
 440
 441         &.active {
 442           opacity: 1;
 443         }
 444       }
 445
 446       &-description {
 447         position: absolute;
 448         z-index: 2;
 449         bottom: 0;
 450         left: 0;
 451         right: 0;
 452         box-sizing: border-box;
 453         background: linear-gradient(0deg, rgba($base-shadow-color, 0.8) 0, rgba($base-shadow-color, 0.35) 80%, transparent);
 454         padding: 10px;
 455         opacity: 0;
 456         transition: opacity .1s ease;
 457
 458         input {
 459           background: transparent;
 460           color: $secondary-text-color;
 461           border: 0;
 462           padding: 0;
 463           margin: 0;
 464           width: 100%;
 465           font-family: inherit;
 466           font-size: 14px;
 467           font-weight: 500;
 468
 469           &:focus {
 470             color: $white;
 471           }
 472
 473           &::placeholder {
 474             opacity: 0.75;
 475             color: $secondary-text-color;
 476           }
 477         }
 478
 479         &.active {
 480           opacity: 1;
 481         }
 482       }
 483     }
 484
 485     .compose-form__upload-thumbnail {
 486       border-radius: 4px;
 487       background-position: center;
 488       background-size: cover;
 489       background-repeat: no-repeat;
 490       height: 140px;
 491       width: 100%;
 492       overflow: hidden;
 493     }
 494   }
 495
 496   .compose-form__buttons-wrapper {
 497     padding: 10px;
 498     background: darken($simple-background-color, 8%);
 499     border-radius: 0 0 4px 4px;
 500     display: flex;
 501     justify-content: space-between;
 502
 503     .compose-form__buttons {
 504       display: flex;
 505
 506       .compose-form__upload-button-icon {
 507         line-height: 27px;
 508       }
 509
 510       .compose-form__sensitive-button {
 511         display: none;
 512
 513         &.compose-form__sensitive-button--visible {
 514           display: block;
 515         }
 516
 517         .compose-form__sensitive-button__icon {
 518           line-height: 27px;
 519         }
 520       }
 521     }
 522
 523     .icon-button {
 524       box-sizing: content-box;
 525       padding: 0 3px;
 526     }
 527
 528     .character-counter__wrapper {
 529       align-self: center;
 530       margin-right: 4px;
 531
 532       .character-counter {
 533         cursor: default;
 534         font-family: 'mastodon-font-sans-serif', sans-serif;
 535         font-size: 14px;
 536         font-weight: 600;
 537         color: $lighter-text-color;
 538
 539         &.character-counter--over {
 540           color: $warning-red;
 541         }
 542       }
 543     }
 544   }
 545
 546   .compose-form__publish {
 547     display: flex;
 548     justify-content: flex-end;
 549     min-width: 0;
 550
 551     .compose-form__publish-button-wrapper {
 552       overflow: hidden;
 553       padding-top: 10px;
 554     }
 555   }
 556 }
 557
 558 .emojione {
 559   display: inline-block;
 560   font-size: inherit;
 561   vertical-align: middle;
 562   object-fit: contain;
 563   margin: -.2ex .15em .2ex;
 564   width: 16px;
 565   height: 16px;
 566
 567   img {
 568     width: auto;
 569   }
 570 }
 571
 572 .reply-indicator {
 573   border-radius: 4px 4px 0 0;
 574   position: relative;
 575   bottom: -2px;
 576   background: $ui-primary-color;
 577   padding: 10px;
 578 }
 579
 580 .reply-indicator__header {
 581   margin-bottom: 5px;
 582   overflow: hidden;
 583 }
 584
 585 .reply-indicator__cancel {
 586   float: right;
 587   line-height: 24px;
 588 }
 589
 590 .reply-indicator__display-name {
 591   color: $inverted-text-color;
 592   display: block;
 593   max-width: 100%;
 594   line-height: 24px;
 595   overflow: hidden;
 596   padding-right: 25px;
 597   text-decoration: none;
 598 }
 599
 600 .reply-indicator__display-avatar {
 601   float: left;
 602   margin-right: 5px;
 603 }
 604
 605 .status__content--with-action {
 606   cursor: pointer;
 607 }
 608
 609 .status__content,
 610 .reply-indicator__content {
 611   font-size: 15px;
 612   line-height: 20px;
 613   word-wrap: break-word;
 614   font-weight: 400;
 615   overflow: hidden;
 616   white-space: pre-wrap;
 617   padding-top: 2px;
 618
 619   &:focus {
 620     outline: 0;
 621   }
 622
 623   &.status__content--with-spoiler {
 624     white-space: normal;
 625
 626     .status__content__text {
 627       white-space: pre-wrap;
 628     }
 629   }
 630
 631   .emojione {
 632     width: 20px;
 633     height: 20px;
 634     margin: -3px 0 0;
 635   }
 636
 637   p {
 638     margin-bottom: 20px;
 639
 640     &:last-child {
 641       margin-bottom: 0;
 642     }
 643   }
 644
 645   a {
 646     color: $secondary-text-color;
 647     text-decoration: none;
 648
 649     &:hover {
 650       text-decoration: underline;
 651
 652       .fa {
 653         color: lighten($dark-text-color, 7%);
 654       }
 655     }
 656
 657     &.mention {
 658       &:hover {
 659         text-decoration: none;
 660
 661         span {
 662           text-decoration: underline;
 663         }
 664       }
 665     }
 666
 667     .fa {
 668       color: $dark-text-color;
 669     }
 670   }
 671
 672   .status__content__spoiler-link {
 673     background: $action-button-color;
 674
 675     &:hover {
 676       background: lighten($action-button-color, 7%);
 677       text-decoration: none;
 678     }
 679
 680     &::-moz-focus-inner {
 681       border: 0;
 682     }
 683
 684     &::-moz-focus-inner,
 685     &:focus,
 686     &:active {
 687       outline: 0 !important;
 688     }
 689   }
 690
 691   .status__content__text {
 692     display: none;
 693
 694     &.status__content__text--visible {
 695       display: block;
 696     }
 697   }
 698 }
 699
 700 .status__content__spoiler-link {
 701   display: inline-block;
 702   border-radius: 2px;
 703   background: transparent;
 704   border: 0;
 705   color: $lighter-text-color;
 706   font-weight: 700;
 707   font-size: 11px;
 708   padding: 0 6px;
 709   text-transform: uppercase;
 710   line-height: 20px;
 711   cursor: pointer;
 712   vertical-align: middle;
 713 }
 714
 715 .status__prepend-icon-wrapper {
 716   left: -26px;
 717   position: absolute;
 718 }
 719
 720 .focusable {
 721   &:focus {
 722     outline: 0;
 723     background: lighten($ui-base-color, 4%);
 724
 725     .status.status-direct {
 726       background: lighten($ui-base-color, 12%);
 727
 728       &.muted {
 729         background: transparent;
 730       }
 731     }
 732
 733     .detailed-status,
 734     .detailed-status__action-bar {
 735       background: lighten($ui-base-color, 8%);
 736     }
 737   }
 738 }
 739
 740 .status {
 741   padding: 8px 10px;
 742   padding-left: 68px;
 743   position: relative;
 744   min-height: 48px;
 745   border-bottom: 1px solid lighten($ui-base-color, 8%);
 746   cursor: default;
 747
 748   @supports (-ms-overflow-style: -ms-autohiding-scrollbar) {
 749     // Add margin to avoid Edge auto-hiding scrollbar appearing over content.
 750     // On Edge 16 this is 16px and Edge <=15 it's 12px, so aim for 16px.
 751     padding-right: 26px; // 10px + 16px
 752   }
 753
 754   @keyframes fade {
 755     0% { opacity: 0; }
 756     100% { opacity: 1; }
 757   }
 758
 759   opacity: 1;
 760   animation: fade 150ms linear;
 761
 762   .video-player {
 763     margin-top: 8px;
 764   }
 765
 766   &.status-direct {
 767     background: lighten($ui-base-color, 8%);
 768   }
 769
 770   &.light {
 771     .status__relative-time {
 772       color: $light-text-color;
 773     }
 774
 775     .status__display-name {
 776       color: $inverted-text-color;
 777     }
 778
 779     .display-name {
 780       strong {
 781         color: $inverted-text-color;
 782       }
 783
 784       span {
 785         color: $light-text-color;
 786       }
 787     }
 788
 789     .status__content {
 790       color: $inverted-text-color;
 791
 792       a {
 793         color: $highlight-text-color;
 794       }
 795
 796       a.status__content__spoiler-link {
 797         color: $primary-text-color;
 798         background: $ui-primary-color;
 799
 800         &:hover {
 801           background: lighten($ui-primary-color, 8%);
 802         }
 803       }
 804     }
 805   }
 806 }
 807
 808 .notification-favourite {
 809   .status.status-direct {
 810     background: transparent;
 811
 812     .icon-button.disabled {
 813       color: lighten($action-button-color, 13%);
 814     }
 815   }
 816 }
 817
 818 .status__relative-time {
 819   color: $dark-text-color;
 820   float: right;
 821   font-size: 14px;
 822 }
 823
 824 .status__display-name {
 825   color: $dark-text-color;
 826 }
 827
 828 .status__info .status__display-name {
 829   display: block;
 830   max-width: 100%;
 831   padding-right: 25px;
 832 }
 833
 834 .status__info {
 835   font-size: 15px;
 836 }
 837
 838 .status-check-box {
 839   border-bottom: 1px solid $ui-secondary-color;
 840   display: flex;
 841
 842   .status-check-box__status {
 843     margin: 10px 0 10px 10px;
 844     flex: 1;
 845
 846     .media-gallery {
 847       max-width: 250px;
 848     }
 849
 850     .status__content {
 851       padding: 0;
 852       white-space: normal;
 853     }
 854
 855     .video-player {
 856       margin-top: 8px;
 857       max-width: 250px;
 858     }
 859
 860     .media-gallery__item-thumbnail {
 861       cursor: default;
 862     }
 863   }
 864 }
 865
 866 .status-check-box-toggle {
 867   align-items: center;
 868   display: flex;
 869   flex: 0 0 auto;
 870   justify-content: center;
 871   padding: 10px;
 872 }
 873
 874 .status__prepend {
 875   margin-left: 68px;
 876   color: $dark-text-color;
 877   padding: 8px 0;
 878   padding-bottom: 2px;
 879   font-size: 14px;
 880   position: relative;
 881
 882   .status__display-name strong {
 883     color: $dark-text-color;
 884   }
 885
 886   > span {
 887     display: block;
 888     overflow: hidden;
 889     text-overflow: ellipsis;
 890   }
 891 }
 892
 893 .status__action-bar {
 894   align-items: center;
 895   display: flex;
 896   margin-top: 8px;
 897 }
 898
 899 .status__action-bar-button {
 900   float: left;
 901   margin-right: 18px;
 902 }
 903
 904 .status__action-bar-dropdown {
 905   float: left;
 906   height: 23.15px;
 907   width: 23.15px;
 908 }
 909
 910 .detailed-status__action-bar-dropdown {
 911   flex: 1 1 auto;
 912   display: flex;
 913   align-items: center;
 914   justify-content: center;
 915   position: relative;
 916 }
 917
 918 .detailed-status {
 919   background: lighten($ui-base-color, 4%);
 920   padding: 14px 10px;
 921
 922   .status__content {
 923     font-size: 19px;
 924     line-height: 24px;
 925
 926     .emojione {
 927       width: 24px;
 928       height: 24px;
 929       margin: -1px 0 0;
 930     }
 931
 932     .status__content__spoiler-link {
 933       line-height: 24px;
 934       margin: -1px 0 0;
 935     }
 936   }
 937
 938   .video-player {
 939     margin-top: 8px;
 940   }
 941 }
 942
 943 .detailed-status__meta {
 944   margin-top: 15px;
 945   color: $dark-text-color;
 946   font-size: 14px;
 947   line-height: 18px;
 948 }
 949
 950 .detailed-status__action-bar {
 951   background: lighten($ui-base-color, 4%);
 952   border-top: 1px solid lighten($ui-base-color, 8%);
 953   border-bottom: 1px solid lighten($ui-base-color, 8%);
 954   display: flex;
 955   flex-direction: row;
 956   padding: 10px 0;
 957 }
 958
 959 .detailed-status__link {
 960   color: inherit;
 961   text-decoration: none;
 962 }
 963
 964 .detailed-status__favorites,
 965 .detailed-status__reblogs {
 966   display: inline-block;
 967   font-weight: 500;
 968   font-size: 12px;
 969   margin-left: 6px;
 970 }
 971
 972 .reply-indicator__content {
 973   color: $inverted-text-color;
 974   font-size: 14px;
 975
 976   a {
 977     color: $lighter-text-color;
 978   }
 979 }
 980
 981 .domain {
 982   padding: 10px;
 983   border-bottom: 1px solid lighten($ui-base-color, 8%);
 984
 985   .domain__domain-name {
 986     flex: 1 1 auto;
 987     display: block;
 988     color: $primary-text-color;
 989     text-decoration: none;
 990     font-size: 14px;
 991     font-weight: 500;
 992   }
 993 }
 994
 995 .domain__wrapper {
 996   display: flex;
 997 }
 998
 999 .domain_buttons {
1000   height: 18px;
1001   padding: 10px;
1002   white-space: nowrap;
1003 }
1004
1005 .account {
1006   padding: 10px;
1007   border-bottom: 1px solid lighten($ui-base-color, 8%);
1008
1009   &.compact {
1010     padding: 0;
1011     border-bottom: 0;
1012
1013     .account__avatar-wrapper {
1014       margin-left: 0;
1015     }
1016   }
1017
1018   .account__display-name {
1019     flex: 1 1 auto;
1020     display: block;
1021     color: $darker-text-color;
1022     overflow: hidden;
1023     text-decoration: none;
1024     font-size: 14px;
1025   }
1026 }
1027
1028 .account__wrapper {
1029   display: flex;
1030 }
1031
1032 .account__avatar-wrapper {
1033   float: left;
1034   margin-left: 12px;
1035   margin-right: 12px;
1036 }
1037
1038 .account__avatar {
1039   @include avatar-radius();
1040   position: relative;
1041
1042   &-inline {
1043     display: inline-block;
1044     vertical-align: middle;
1045     margin-right: 5px;
1046   }
1047 }
1048
1049 a .account__avatar {
1050   cursor: pointer;
1051 }
1052
1053 .account__avatar-overlay {
1054   @include avatar-size(48px);
1055
1056   &-base {
1057     @include avatar-radius();
1058     @include avatar-size(36px);
1059   }
1060
1061   &-overlay {
1062     @include avatar-radius();
1063     @include avatar-size(24px);
1064
1065     position: absolute;
1066     bottom: 0;
1067     right: 0;
1068     z-index: 1;
1069   }
1070 }
1071
1072 .account__relationship {
1073   height: 18px;
1074   padding: 10px;
1075   white-space: nowrap;
1076 }
1077
1078 .account__header {
1079   flex: 0 0 auto;
1080   background: lighten($ui-base-color, 4%);
1081   text-align: center;
1082   background-size: cover;
1083   background-position: center;
1084   position: relative;
1085
1086   &.inactive {
1087     opacity: 0.5;
1088
1089     .account__header__avatar {
1090       filter: grayscale(100%);
1091     }
1092
1093     .account__header__username {
1094       color: $secondary-text-color;
1095     }
1096   }
1097
1098   & > div {
1099     background: rgba(lighten($ui-base-color, 4%), 0.9);
1100     padding: 20px 10px;
1101   }
1102
1103   .account__header__content {
1104     color: $secondary-text-color;
1105   }
1106
1107   .account__header__display-name {
1108     color: $primary-text-color;
1109     display: inline-block;
1110     width: 100%;
1111     font-size: 20px;
1112     line-height: 27px;
1113     font-weight: 500;
1114     overflow: hidden;
1115     text-overflow: ellipsis;
1116   }
1117
1118   .account__header__username {
1119     color: $highlight-text-color;
1120     font-size: 14px;
1121     font-weight: 400;
1122     display: block;
1123     margin-bottom: 10px;
1124     overflow: hidden;
1125     text-overflow: ellipsis;
1126   }
1127 }
1128
1129 .account__disclaimer {
1130   padding: 10px;
1131   border-top: 1px solid lighten($ui-base-color, 8%);
1132   color: $dark-text-color;
1133
1134   strong {
1135     font-weight: 500;
1136
1137     @each $lang in $cjk-langs {
1138       &:lang(#{$lang}) {
1139         font-weight: 700;
1140       }
1141     }
1142   }
1143
1144   a {
1145     font-weight: 500;
1146     color: inherit;
1147     text-decoration: underline;
1148
1149     &:hover,
1150     &:focus,
1151     &:active {
1152       text-decoration: none;
1153     }
1154   }
1155 }
1156
1157 .account__header__content {
1158   color: $darker-text-color;
1159   font-size: 14px;
1160   font-weight: 400;
1161   overflow: hidden;
1162   word-break: normal;
1163   word-wrap: break-word;
1164
1165   p {
1166     margin-bottom: 20px;
1167
1168     &:last-child {
1169       margin-bottom: 0;
1170     }
1171   }
1172
1173   a {
1174     color: inherit;
1175     text-decoration: underline;
1176
1177     &:hover {
1178       text-decoration: none;
1179     }
1180   }
1181 }
1182
1183 .account__header__display-name {
1184   .emojione {
1185     width: 25px;
1186     height: 25px;
1187   }
1188 }
1189
1190 .account__action-bar {
1191   border-top: 1px solid lighten($ui-base-color, 8%);
1192   border-bottom: 1px solid lighten($ui-base-color, 8%);
1193   line-height: 36px;
1194   overflow: hidden;
1195   flex: 0 0 auto;
1196   display: flex;
1197 }
1198
1199 .account__action-bar-dropdown {
1200   flex: 0 1 calc(50% - 140px);
1201   padding: 10px;
1202
1203   .dropdown--active {
1204     .dropdown__content.dropdown__right {
1205       left: 6px;
1206       right: initial;
1207     }
1208
1209     &::after {
1210       bottom: initial;
1211       margin-left: 11px;
1212       margin-top: -7px;
1213       right: initial;
1214     }
1215   }
1216 }
1217
1218 .account__action-bar-links {
1219   display: flex;
1220   flex: 1 1 auto;
1221   line-height: 18px;
1222 }
1223
1224 .account__action-bar__tab {
1225   text-decoration: none;
1226   overflow: hidden;
1227   flex: 0 1 80px;
1228   border-left: 1px solid lighten($ui-base-color, 8%);
1229   padding: 10px 5px;
1230
1231   & > span {
1232     display: block;
1233     text-transform: uppercase;
1234     font-size: 11px;
1235     color: $darker-text-color;
1236   }
1237
1238   strong {
1239     display: block;
1240     font-size: 15px;
1241     font-weight: 500;
1242     color: $primary-text-color;
1243
1244     @each $lang in $cjk-langs {
1245       &:lang(#{$lang}) {
1246         font-weight: 700;
1247       }
1248     }
1249   }
1250 }
1251
1252 .account__header__avatar {
1253   background-size: 90px 90px;
1254   display: block;
1255   height: 90px;
1256   margin: 0 auto 10px;
1257   overflow: hidden;
1258   width: 90px;
1259 }
1260
1261 .account-authorize {
1262   padding: 14px 10px;
1263
1264   .detailed-status__display-name {
1265     display: block;
1266     margin-bottom: 15px;
1267     overflow: hidden;
1268   }
1269 }
1270
1271 .account-authorize__avatar {
1272   float: left;
1273   margin-right: 10px;
1274 }
1275
1276 .status__display-name,
1277 .status__relative-time,
1278 .detailed-status__display-name,
1279 .detailed-status__datetime,
1280 .detailed-status__application,
1281 .account__display-name {
1282   text-decoration: none;
1283 }
1284
1285 .status__display-name,
1286 .account__display-name {
1287   strong {
1288     color: $primary-text-color;
1289   }
1290 }
1291
1292 .muted {
1293   .emojione {
1294     opacity: 0.5;
1295   }
1296 }
1297
1298 .status__display-name,
1299 .reply-indicator__display-name,
1300 .detailed-status__display-name,
1301 a.account__display-name {
1302   &:hover strong {
1303     text-decoration: underline;
1304   }
1305 }
1306
1307 .account__display-name strong {
1308   display: block;
1309   overflow: hidden;
1310   text-overflow: ellipsis;
1311 }
1312
1313 .detailed-status__application,
1314 .detailed-status__datetime {
1315   color: inherit;
1316 }
1317
1318 .detailed-status__display-name {
1319   color: $secondary-text-color;
1320   display: block;
1321   line-height: 24px;
1322   margin-bottom: 15px;
1323   overflow: hidden;
1324
1325   strong,
1326   span {
1327     display: block;
1328     text-overflow: ellipsis;
1329     overflow: hidden;
1330   }
1331
1332   strong {
1333     font-size: 16px;
1334     color: $primary-text-color;
1335   }
1336 }
1337
1338 .detailed-status__display-avatar {
1339   float: left;
1340   margin-right: 10px;
1341 }
1342
1343 .status__avatar {
1344   height: 48px;
1345   left: 10px;
1346   position: absolute;
1347   top: 10px;
1348   width: 48px;
1349 }
1350
1351 .muted {
1352   .status__content p,
1353   .status__content a {
1354     color: $dark-text-color;
1355   }
1356
1357   .status__display-name strong {
1358     color: $dark-text-color;
1359   }
1360
1361   .status__avatar {
1362     opacity: 0.5;
1363   }
1364
1365   a.status__content__spoiler-link {
1366     background: $ui-base-lighter-color;
1367     color: $inverted-text-color;
1368
1369     &:hover {
1370       background: lighten($ui-base-lighter-color, 7%);
1371       text-decoration: none;
1372     }
1373   }
1374 }
1375
1376 .notification__message {
1377   margin-left: 68px;
1378   padding: 8px 0;
1379   padding-bottom: 0;
1380   cursor: default;
1381   color: $darker-text-color;
1382   font-size: 15px;
1383   position: relative;
1384
1385   .fa {
1386     color: $highlight-text-color;
1387   }
1388
1389   > span {
1390     display: block;
1391     overflow: hidden;
1392     text-overflow: ellipsis;
1393   }
1394 }
1395
1396 .notification__favourite-icon-wrapper {
1397   left: -26px;
1398   position: absolute;
1399
1400   .star-icon {
1401     color: $gold-star;
1402   }
1403 }
1404
1405 .star-icon.active {
1406   color: $gold-star;
1407 }
1408
1409 .notification__display-name {
1410   color: inherit;
1411   font-weight: 500;
1412   text-decoration: none;
1413
1414   &:hover {
1415     color: $primary-text-color;
1416     text-decoration: underline;
1417   }
1418 }
1419
1420 .display-name {
1421   display: block;
1422   max-width: 100%;
1423   overflow: hidden;
1424   text-overflow: ellipsis;
1425   white-space: nowrap;
1426 }
1427
1428 .display-name__html {
1429   font-weight: 500;
1430 }
1431
1432 .display-name__account {
1433   font-size: 14px;
1434 }
1435
1436 .status__relative-time,
1437 .detailed-status__datetime {
1438   &:hover {
1439     text-decoration: underline;
1440   }
1441 }
1442
1443 .image-loader {
1444   position: relative;
1445   width: 100%;
1446   height: 100%;
1447   display: flex;
1448   align-items: center;
1449   justify-content: center;
1450
1451   .image-loader__preview-canvas {
1452     max-width: $media-modal-media-max-width;
1453     max-height: $media-modal-media-max-height;
1454     background: url('../images/void.png') repeat;
1455     object-fit: contain;
1456   }
1457
1458   &.image-loader--loading .image-loader__preview-canvas {
1459     filter: blur(2px);
1460   }
1461
1462   &.image-loader--amorphous .image-loader__preview-canvas {
1463     display: none;
1464   }
1465 }
1466
1467 .zoomable-image {
1468   position: relative;
1469   width: 100%;
1470   height: 100%;
1471   display: flex;
1472   align-items: center;
1473   justify-content: center;
1474
1475   img {
1476     max-width: $media-modal-media-max-width;
1477     max-height: $media-modal-media-max-height;
1478     width: auto;
1479     height: auto;
1480     object-fit: contain;
1481   }
1482 }
1483
1484 .navigation-bar {
1485   padding: 10px;
1486   display: flex;
1487   flex-shrink: 0;
1488   cursor: default;
1489   color: $darker-text-color;
1490
1491   strong {
1492     color: $secondary-text-color;
1493   }
1494
1495   a {
1496     color: inherit;
1497   }
1498
1499   .permalink {
1500     text-decoration: none;
1501   }
1502
1503   .icon-button {
1504     pointer-events: none;
1505     opacity: 0;
1506   }
1507 }
1508
1509 .navigation-bar__profile {
1510   flex: 1 1 auto;
1511   margin-left: 8px;
1512   overflow: hidden;
1513 }
1514
1515 .navigation-bar__profile-account {
1516   display: block;
1517   font-weight: 500;
1518   overflow: hidden;
1519   text-overflow: ellipsis;
1520 }
1521
1522 .navigation-bar__profile-edit {
1523   color: inherit;
1524   text-decoration: none;
1525 }
1526
1527 .dropdown {
1528   display: inline-block;
1529 }
1530
1531 .dropdown__content {
1532   display: none;
1533   position: absolute;
1534 }
1535
1536 .dropdown-menu__separator {
1537   border-bottom: 1px solid darken($ui-secondary-color, 8%);
1538   margin: 5px 7px 6px;
1539   height: 0;
1540 }
1541
1542 .dropdown-menu {
1543   background: $ui-secondary-color;
1544   padding: 4px 0;
1545   border-radius: 4px;
1546   box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
1547
1548   ul {
1549     list-style: none;
1550   }
1551 }
1552
1553 .dropdown-menu__arrow {
1554   position: absolute;
1555   width: 0;
1556   height: 0;
1557   border: 0 solid transparent;
1558
1559   &.left {
1560     right: -5px;
1561     margin-top: -5px;
1562     border-width: 5px 0 5px 5px;
1563     border-left-color: $ui-secondary-color;
1564   }
1565
1566   &.top {
1567     bottom: -5px;
1568     margin-left: -13px;
1569     border-width: 5px 7px 0;
1570     border-top-color: $ui-secondary-color;
1571   }
1572
1573   &.bottom {
1574     top: -5px;
1575     margin-left: -13px;
1576     border-width: 0 7px 5px;
1577     border-bottom-color: $ui-secondary-color;
1578   }
1579
1580   &.right {
1581     left: -5px;
1582     margin-top: -5px;
1583     border-width: 5px 5px 5px 0;
1584     border-right-color: $ui-secondary-color;
1585   }
1586 }
1587
1588 .dropdown-menu__item {
1589   a {
1590     font-size: 13px;
1591     line-height: 18px;
1592     display: block;
1593     padding: 4px 14px;
1594     box-sizing: border-box;
1595     text-decoration: none;
1596     background: $ui-secondary-color;
1597     color: $inverted-text-color;
1598     overflow: hidden;
1599     text-overflow: ellipsis;
1600     white-space: nowrap;
1601
1602     &:focus,
1603     &:hover,
1604     &:active {
1605       background: $ui-highlight-color;
1606       color: $secondary-text-color;
1607       outline: 0;
1608     }
1609   }
1610 }
1611
1612 .dropdown--active .dropdown__content {
1613   display: block;
1614   line-height: 18px;
1615   max-width: 311px;
1616   right: 0;
1617   text-align: left;
1618   z-index: 9999;
1619
1620   & > ul {
1621     list-style: none;
1622     background: $ui-secondary-color;
1623     padding: 4px 0;
1624     border-radius: 4px;
1625     box-shadow: 0 0 15px rgba($base-shadow-color, 0.4);
1626     min-width: 140px;
1627     position: relative;
1628   }
1629
1630   &.dropdown__right {
1631     right: 0;
1632   }
1633
1634   &.dropdown__left {
1635     & > ul {
1636       left: -98px;
1637     }
1638   }
1639
1640   & > ul > li > a {
1641     font-size: 13px;
1642     line-height: 18px;
1643     display: block;
1644     padding: 4px 14px;
1645     box-sizing: border-box;
1646     text-decoration: none;
1647     background: $ui-secondary-color;
1648     color: $inverted-text-color;
1649     overflow: hidden;
1650     text-overflow: ellipsis;
1651     white-space: nowrap;
1652
1653     &:focus {
1654       outline: 0;
1655     }
1656
1657     &:hover {
1658       background: $ui-highlight-color;
1659       color: $secondary-text-color;
1660     }
1661   }
1662 }
1663
1664 .dropdown__icon {
1665   vertical-align: middle;
1666 }
1667
1668 .static-content {
1669   padding: 10px;
1670   padding-top: 20px;
1671   color: $dark-text-color;
1672
1673   h1 {
1674     font-size: 16px;
1675     font-weight: 500;
1676     margin-bottom: 40px;
1677     text-align: center;
1678   }
1679
1680   p {
1681     font-size: 13px;
1682     margin-bottom: 20px;
1683   }
1684 }
1685
1686 .columns-area {
1687   display: flex;
1688   flex: 1 1 auto;
1689   flex-direction: row;
1690   justify-content: flex-start;
1691   overflow-x: auto;
1692   position: relative;
1693
1694   &.unscrollable {
1695     overflow-x: hidden;
1696   }
1697 }
1698
1699 @media screen and (min-width: 360px) {
1700   .columns-area {
1701     padding: 10px;
1702   }
1703
1704   .react-swipeable-view-container .columns-area {
1705     height: calc(100% - 20px) !important;
1706   }
1707 }
1708
1709 .react-swipeable-view-container {
1710   &,
1711   .columns-area,
1712   .drawer,
1713   .column {
1714     height: 100%;
1715   }
1716 }
1717
1718 .react-swipeable-view-container > * {
1719   display: flex;
1720   align-items: center;
1721   justify-content: center;
1722   height: 100%;
1723 }
1724
1725 .column {
1726   width: 330px;
1727   position: relative;
1728   box-sizing: border-box;
1729   display: flex;
1730   flex-direction: column;
1731
1732   > .scrollable {
1733     background: $ui-base-color;
1734   }
1735 }
1736
1737 .ui {
1738   flex: 0 0 auto;
1739   display: flex;
1740   flex-direction: column;
1741   width: 100%;
1742   height: 100%;
1743   background: darken($ui-base-color, 7%);
1744 }
1745
1746 .drawer {
1747   width: 300px;
1748   box-sizing: border-box;
1749   display: flex;
1750   flex-direction: column;
1751   overflow-y: hidden;
1752 }
1753
1754 .drawer__tab {
1755   display: block;
1756   flex: 1 1 auto;
1757   padding: 15px 5px 13px;
1758   color: $darker-text-color;
1759   text-decoration: none;
1760   text-align: center;
1761   font-size: 16px;
1762   border-bottom: 2px solid transparent;
1763 }
1764
1765 .column,
1766 .drawer {
1767   flex: 1 1 100%;
1768   overflow: hidden;
1769 }
1770
1771 @media screen and (min-width: 360px) {
1772   .tabs-bar {
1773     margin: 10px;
1774     margin-bottom: 0;
1775   }
1776
1777   .search {
1778     margin-bottom: 10px;
1779   }
1780 }
1781
1782 @media screen and (max-width: 630px) {
1783   .column,
1784   .drawer {
1785     width: 100%;
1786     padding: 0;
1787   }
1788
1789   .columns-area {
1790     flex-direction: column;
1791   }
1792
1793   .search__input,
1794   .autosuggest-textarea__textarea {
1795     font-size: 16px;
1796   }
1797 }
1798
1799 @media screen and (min-width: 631px) {
1800   .columns-area {
1801     padding: 0;
1802   }
1803
1804   .column,
1805   .drawer {
1806     flex: 0 0 auto;
1807     padding: 10px;
1808     padding-left: 5px;
1809     padding-right: 5px;
1810
1811     &:first-child {
1812       padding-left: 10px;
1813     }
1814
1815     &:last-child {
1816       padding-right: 10px;
1817     }
1818   }
1819
1820   .columns-area > div {
1821     .column,
1822     .drawer {
1823       padding-left: 5px;
1824       padding-right: 5px;
1825     }
1826   }
1827 }
1828
1829 .drawer__pager {
1830   box-sizing: border-box;
1831   padding: 0;
1832   flex-grow: 1;
1833   position: relative;
1834   overflow: hidden;
1835   display: flex;
1836 }
1837
1838 .drawer__inner {
1839   position: absolute;
1840   top: 0;
1841   left: 0;
1842   background: lighten($ui-base-color, 13%);
1843   box-sizing: border-box;
1844   padding: 0;
1845   display: flex;
1846   flex-direction: column;
1847   overflow: hidden;
1848   overflow-y: auto;
1849   width: 100%;
1850   height: 100%;
1851
1852   &.darker {
1853     background: $ui-base-color;
1854   }
1855 }
1856
1857 .drawer__inner__mastodon {
1858   background: lighten($ui-base-color, 13%) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z" fill="#{hex-color($ui-base-color)}"/></svg>') no-repeat bottom / 100% auto;
1859   flex: 1;
1860   min-height: 47px;
1861
1862   > img {
1863     display: block;
1864     object-fit: contain;
1865     object-position: bottom left;
1866     width: 100%;
1867     height: 100%;
1868     pointer-events: none;
1869     user-drag: none;
1870     user-select: none;
1871   }
1872 }
1873
1874 .pseudo-drawer {
1875   background: lighten($ui-base-color, 13%);
1876   font-size: 13px;
1877   text-align: left;
1878 }
1879
1880 .drawer__header {
1881   flex: 0 0 auto;
1882   font-size: 16px;
1883   background: lighten($ui-base-color, 8%);
1884   margin-bottom: 10px;
1885   display: flex;
1886   flex-direction: row;
1887
1888   a {
1889     transition: background 100ms ease-in;
1890
1891     &:hover {
1892       background: lighten($ui-base-color, 3%);
1893       transition: background 200ms ease-out;
1894     }
1895   }
1896 }
1897
1898 .tabs-bar {
1899   display: flex;
1900   background: lighten($ui-base-color, 8%);
1901   flex: 0 0 auto;
1902   overflow-y: auto;
1903 }
1904
1905 .tabs-bar__link {
1906   display: block;
1907   flex: 1 1 auto;
1908   padding: 15px 10px;
1909   color: $primary-text-color;
1910   text-decoration: none;
1911   text-align: center;
1912   font-size: 14px;
1913   font-weight: 500;
1914   border-bottom: 2px solid lighten($ui-base-color, 8%);
1915   transition: all 50ms linear;
1916
1917   .fa {
1918     font-weight: 400;
1919     font-size: 16px;
1920   }
1921
1922   &.active {
1923     border-bottom: 2px solid $highlight-text-color;
1924     color: $highlight-text-color;
1925   }
1926
1927   &:hover,
1928   &:focus,
1929   &:active {
1930     @media screen and (min-width: 631px) {
1931       background: lighten($ui-base-color, 14%);
1932     }
1933   }
1934
1935   span {
1936     margin-left: 5px;
1937     display: none;
1938   }
1939 }
1940
1941 @media screen and (min-width: 600px) {
1942   .tabs-bar__link {
1943     span {
1944       display: inline;
1945     }
1946   }
1947 }
1948
1949 @media screen and (min-width: 631px) {
1950   .tabs-bar {
1951     display: none;
1952   }
1953 }
1954
1955 .scrollable {
1956   overflow-y: scroll;
1957   overflow-x: hidden;
1958   flex: 1 1 auto;
1959   -webkit-overflow-scrolling: touch;
1960   will-change: transform; // improves perf in mobile Chrome
1961
1962   &.optionally-scrollable {
1963     overflow-y: auto;
1964   }
1965
1966   @supports(display: grid) { // hack to fix Chrome <57
1967     contain: strict;
1968   }
1969 }
1970
1971 .scrollable.fullscreen {
1972   @supports(display: grid) { // hack to fix Chrome <57
1973     contain: none;
1974   }
1975 }
1976
1977 .column-back-button {
1978   background: lighten($ui-base-color, 4%);
1979   color: $highlight-text-color;
1980   cursor: pointer;
1981   flex: 0 0 auto;
1982   font-size: 16px;
1983   border: 0;
1984   text-align: unset;
1985   padding: 15px;
1986   margin: 0;
1987   z-index: 3;
1988
1989   &:hover {
1990     text-decoration: underline;
1991   }
1992 }
1993
1994 .column-header__back-button {
1995   background: lighten($ui-base-color, 4%);
1996   border: 0;
1997   font-family: inherit;
1998   color: $highlight-text-color;
1999   cursor: pointer;
2000   white-space: nowrap;
2001   font-size: 16px;
2002   padding: 0 5px 0 0;
2003   z-index: 3;
2004
2005   &:hover {
2006     text-decoration: underline;
2007   }
2008
2009   &:last-child {
2010     padding: 0 15px 0 0;
2011   }
2012 }
2013
2014 .column-back-button__icon {
2015   display: inline-block;
2016   margin-right: 5px;
2017 }
2018
2019 .column-back-button--slim {
2020   position: relative;
2021 }
2022
2023 .column-back-button--slim-button {
2024   cursor: pointer;
2025   flex: 0 0 auto;
2026   font-size: 16px;
2027   padding: 15px;
2028   position: absolute;
2029   right: 0;
2030   top: -48px;
2031 }
2032
2033 .react-toggle {
2034   display: inline-block;
2035   position: relative;
2036   cursor: pointer;
2037   background-color: transparent;
2038   border: 0;
2039   padding: 0;
2040   user-select: none;
2041   -webkit-tap-highlight-color: rgba($base-overlay-background, 0);
2042   -webkit-tap-highlight-color: transparent;
2043 }
2044
2045 .react-toggle-screenreader-only {
2046   border: 0;
2047   clip: rect(0 0 0 0);
2048   height: 1px;
2049   margin: -1px;
2050   overflow: hidden;
2051   padding: 0;
2052   position: absolute;
2053   width: 1px;
2054 }
2055
2056 .react-toggle--disabled {
2057   cursor: not-allowed;
2058   opacity: 0.5;
2059   transition: opacity 0.25s;
2060 }
2061
2062 .react-toggle-track {
2063   width: 50px;
2064   height: 24px;
2065   padding: 0;
2066   border-radius: 30px;
2067   background-color: $ui-base-color;
2068   transition: all 0.2s ease;
2069 }
2070
2071 .react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
2072   background-color: darken($ui-base-color, 10%);
2073 }
2074
2075 .react-toggle--checked .react-toggle-track {
2076   background-color: $ui-highlight-color;
2077 }
2078
2079 .react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track {
2080   background-color: lighten($ui-highlight-color, 10%);
2081 }
2082
2083 .react-toggle-track-check {
2084   position: absolute;
2085   width: 14px;
2086   height: 10px;
2087   top: 0;
2088   bottom: 0;
2089   margin-top: auto;
2090   margin-bottom: auto;
2091   line-height: 0;
2092   left: 8px;
2093   opacity: 0;
2094   transition: opacity 0.25s ease;
2095 }
2096
2097 .react-toggle--checked .react-toggle-track-check {
2098   opacity: 1;
2099   transition: opacity 0.25s ease;
2100 }
2101
2102 .react-toggle-track-x {
2103   position: absolute;
2104   width: 10px;
2105   height: 10px;
2106   top: 0;
2107   bottom: 0;
2108   margin-top: auto;
2109   margin-bottom: auto;
2110   line-height: 0;
2111   right: 10px;
2112   opacity: 1;
2113   transition: opacity 0.25s ease;
2114 }
2115
2116 .react-toggle--checked .react-toggle-track-x {
2117   opacity: 0;
2118 }
2119
2120 .react-toggle-thumb {
2121   transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0ms;
2122   position: absolute;
2123   top: 1px;
2124   left: 1px;
2125   width: 22px;
2126   height: 22px;
2127   border: 1px solid $ui-base-color;
2128   border-radius: 50%;
2129   background-color: darken($simple-background-color, 2%);
2130   box-sizing: border-box;
2131   transition: all 0.25s ease;
2132 }
2133
2134 .react-toggle--checked .react-toggle-thumb {
2135   left: 27px;
2136   border-color: $ui-highlight-color;
2137 }
2138
2139 .column-link {
2140   background: lighten($ui-base-color, 8%);
2141   color: $primary-text-color;
2142   display: block;
2143   font-size: 16px;
2144   padding: 15px;
2145   text-decoration: none;
2146
2147   &:hover {
2148     background: lighten($ui-base-color, 11%);
2149   }
2150 }
2151
2152 .column-link__icon {
2153   display: inline-block;
2154   margin-right: 5px;
2155 }
2156
2157 .column-link__badge {
2158   display: inline-block;
2159   border-radius: 4px;
2160   font-size: 12px;
2161   line-height: 19px;
2162   font-weight: 500;
2163   background: $ui-base-color;
2164   padding: 4px 8px;
2165   margin: -6px 10px;
2166 }
2167
2168 .column-subheading {
2169   background: $ui-base-color;
2170   color: $dark-text-color;
2171   padding: 8px 20px;
2172   font-size: 12px;
2173   font-weight: 500;
2174   text-transform: uppercase;
2175   cursor: default;
2176 }
2177
2178 .getting-started__wrapper,
2179 .getting_started {
2180   background: $ui-base-color;
2181 }
2182
2183 .getting-started__wrapper {
2184   position: relative;
2185   overflow-y: auto;
2186 }
2187
2188 .getting-started {
2189   background: $ui-base-color;
2190   flex: 1 0 auto;
2191
2192   p {
2193     color: $secondary-text-color;
2194   }
2195
2196   a {
2197     color: $dark-text-color;
2198   }
2199 }
2200
2201 .keyboard-shortcuts {
2202   padding: 8px 0 0;
2203   overflow: hidden;
2204
2205   thead {
2206     position: absolute;
2207     left: -9999px;
2208   }
2209
2210   td {
2211     padding: 0 10px 8px;
2212   }
2213
2214   kbd {
2215     display: inline-block;
2216     padding: 3px 5px;
2217     background-color: lighten($ui-base-color, 8%);
2218     border: 1px solid darken($ui-base-color, 4%);
2219   }
2220 }
2221
2222 .setting-text {
2223   color: $darker-text-color;
2224   background: transparent;
2225   border: none;
2226   border-bottom: 2px solid $ui-primary-color;
2227   box-sizing: border-box;
2228   display: block;
2229   font-family: inherit;
2230   margin-bottom: 10px;
2231   padding: 7px 0;
2232   width: 100%;
2233
2234   &:focus,
2235   &:active {
2236     color: $primary-text-color;
2237     border-bottom-color: $highlight-text-color;
2238   }
2239
2240   @media screen and (max-width: 600px) {
2241     font-size: 16px;
2242   }
2243 }
2244
2245 .no-reduce-motion button.icon-button i.fa-retweet {
2246   background-position: 0 0;
2247   height: 19px;
2248   transition: background-position 0.9s steps(10);
2249   transition-duration: 0s;
2250   vertical-align: middle;
2251   width: 22px;
2252
2253   &::before {
2254     display: none !important;
2255   }
2256
2257 }
2258
2259 .no-reduce-motion button.icon-button.active i.fa-retweet {
2260   transition-duration: 0.9s;
2261   background-position: 0 100%;
2262 }
2263
2264 .reduce-motion button.icon-button i.fa-retweet {
2265   color: $action-button-color;
2266   transition: color 100ms ease-in;
2267 }
2268
2269 .reduce-motion button.icon-button.active i.fa-retweet {
2270   color: $highlight-text-color;
2271 }
2272
2273 .status-card {
2274   display: flex;
2275   font-size: 14px;
2276   border: 1px solid lighten($ui-base-color, 8%);
2277   border-radius: 4px;
2278   color: $dark-text-color;
2279   margin-top: 14px;
2280   text-decoration: none;
2281   overflow: hidden;
2282
2283   &__actions {
2284     bottom: 0;
2285     left: 0;
2286     position: absolute;
2287     right: 0;
2288     top: 0;
2289     display: flex;
2290     justify-content: center;
2291     align-items: center;
2292
2293     & > div {
2294       background: rgba($base-shadow-color, 0.6);
2295       border-radius: 4px;
2296       padding: 12px 9px;
2297       flex: 0 0 auto;
2298       display: flex;
2299       justify-content: center;
2300       align-items: center;
2301     }
2302
2303     button,
2304     a {
2305       display: inline;
2306       color: $primary-text-color;
2307       background: transparent;
2308       border: 0;
2309       padding: 0 5px;
2310       text-decoration: none;
2311       opacity: 0.6;
2312       font-size: 18px;
2313       line-height: 18px;
2314
2315       &:hover,
2316       &:active,
2317       &:focus {
2318         opacity: 1;
2319       }
2320     }
2321
2322     a {
2323       font-size: 19px;
2324       position: relative;
2325       bottom: -1px;
2326     }
2327   }
2328 }
2329
2330 a.status-card {
2331   cursor: pointer;
2332
2333   &:hover {
2334     background: lighten($ui-base-color, 8%);
2335   }
2336 }
2337
2338 .status-card-photo {
2339   cursor: zoom-in;
2340   display: block;
2341   text-decoration: none;
2342   width: 100%;
2343   height: auto;
2344   margin: 0;
2345 }
2346
2347 .status-card-video {
2348   iframe {
2349     width: 100%;
2350     height: 100%;
2351   }
2352 }
2353
2354 .status-card__title {
2355   display: block;
2356   font-weight: 500;
2357   margin-bottom: 5px;
2358   color: $darker-text-color;
2359   overflow: hidden;
2360   text-overflow: ellipsis;
2361   white-space: nowrap;
2362   text-decoration: none;
2363 }
2364
2365 .status-card__content {
2366   flex: 1 1 auto;
2367   overflow: hidden;
2368   padding: 14px 14px 14px 8px;
2369 }
2370
2371 .status-card__description {
2372   color: $darker-text-color;
2373 }
2374
2375 .status-card__host {
2376   display: block;
2377   margin-top: 5px;
2378   font-size: 13px;
2379 }
2380
2381 .status-card__image {
2382   flex: 0 0 100px;
2383   background: lighten($ui-base-color, 8%);
2384   position: relative;
2385 }
2386
2387 .status-card.horizontal {
2388   display: block;
2389
2390   .status-card__image {
2391     width: 100%;
2392   }
2393
2394   .status-card__image-image {
2395     border-radius: 4px 4px 0 0;
2396   }
2397
2398   .status-card__title {
2399     white-space: inherit;
2400   }
2401 }
2402
2403 .status-card__image-image {
2404   border-radius: 4px 0 0 4px;
2405   display: block;
2406   margin: 0;
2407   width: 100%;
2408   height: 100%;
2409   object-fit: cover;
2410   background-size: cover;
2411   background-position: center center;
2412 }
2413
2414 .load-more {
2415   display: block;
2416   color: $dark-text-color;
2417   background-color: transparent;
2418   border: 0;
2419   font-size: inherit;
2420   text-align: center;
2421   line-height: inherit;
2422   margin: 0;
2423   padding: 15px;
2424   width: 100%;
2425   clear: both;
2426
2427   &:hover {
2428     background: lighten($ui-base-color, 2%);
2429   }
2430 }
2431
2432 .load-gap {
2433   border-bottom: 1px solid lighten($ui-base-color, 8%);
2434 }
2435
2436 .regeneration-indicator {
2437   text-align: center;
2438   font-size: 16px;
2439   font-weight: 500;
2440   color: $dark-text-color;
2441   background: $ui-base-color;
2442   cursor: default;
2443   display: flex;
2444   flex: 1 1 auto;
2445   align-items: center;
2446   justify-content: center;
2447   padding: 20px;
2448
2449   & > div {
2450     width: 100%;
2451     background: transparent;
2452     padding-top: 0;
2453   }
2454
2455   &__figure {
2456     background: url('../images/elephant_ui_working.svg') no-repeat center 0;
2457     width: 100%;
2458     height: 160px;
2459     background-size: contain;
2460     position: absolute;
2461     top: 50%;
2462     left: 50%;
2463     transform: translate(-50%, -50%);
2464   }
2465
2466   &.missing-indicator {
2467     padding-top: 20px + 48px;
2468
2469     .regeneration-indicator__figure {
2470       background-image: url('../images/elephant_ui_disappointed.svg');
2471     }
2472   }
2473
2474   &__label {
2475     margin-top: 200px;
2476
2477     strong {
2478       display: block;
2479       margin-bottom: 10px;
2480       color: $dark-text-color;
2481     }
2482
2483     span {
2484       font-size: 15px;
2485       font-weight: 400;
2486     }
2487   }
2488 }
2489
2490 .column-header__wrapper {
2491   position: relative;
2492   flex: 0 0 auto;
2493
2494   &.active {
2495     &::before {
2496       display: block;
2497       content: "";
2498       position: absolute;
2499       top: 35px;
2500       left: 0;
2501       right: 0;
2502       margin: 0 auto;
2503       width: 60%;
2504       pointer-events: none;
2505       height: 28px;
2506       z-index: 1;
2507       background: radial-gradient(ellipse, rgba($ui-highlight-color, 0.23) 0%, rgba($ui-highlight-color, 0) 60%);
2508     }
2509   }
2510 }
2511
2512 .column-header {
2513   display: flex;
2514   font-size: 16px;
2515   background: lighten($ui-base-color, 4%);
2516   flex: 0 0 auto;
2517   cursor: pointer;
2518   position: relative;
2519   z-index: 2;
2520   outline: 0;
2521   overflow: hidden;
2522
2523   & > button {
2524     margin: 0;
2525     border: none;
2526     padding: 15px 0 15px 15px;
2527     color: inherit;
2528     background: transparent;
2529     font: inherit;
2530     text-align: left;
2531     text-overflow: ellipsis;
2532     overflow: hidden;
2533     white-space: nowrap;
2534     flex: 1;
2535   }
2536
2537   & > .column-header__back-button {
2538     color: $highlight-text-color;
2539   }
2540
2541   &.active {
2542     box-shadow: 0 1px 0 rgba($highlight-text-color, 0.3);
2543
2544     .column-header__icon {
2545       color: $highlight-text-color;
2546       text-shadow: 0 0 10px rgba($highlight-text-color, 0.4);
2547     }
2548   }
2549
2550   &:focus,
2551   &:active {
2552     outline: 0;
2553   }
2554 }
2555
2556 .column-header__buttons {
2557   height: 48px;
2558   display: flex;
2559 }
2560
2561 .column-header__links .text-btn {
2562   margin-right: 10px;
2563 }
2564
2565 .column-header__button {
2566   background: lighten($ui-base-color, 4%);
2567   border: 0;
2568   color: $darker-text-color;
2569   cursor: pointer;
2570   font-size: 16px;
2571   padding: 0 15px;
2572
2573   &:hover {
2574     color: lighten($darker-text-color, 7%);
2575   }
2576
2577   &.active {
2578     color: $primary-text-color;
2579     background: lighten($ui-base-color, 8%);
2580
2581     &:hover {
2582       color: $primary-text-color;
2583       background: lighten($ui-base-color, 8%);
2584     }
2585   }
2586 }
2587
2588 .column-header__collapsible {
2589   max-height: 70vh;
2590   overflow: hidden;
2591   overflow-y: auto;
2592   color: $darker-text-color;
2593   transition: max-height 150ms ease-in-out, opacity 300ms linear;
2594   opacity: 1;
2595
2596   &.collapsed {
2597     max-height: 0;
2598     opacity: 0.5;
2599   }
2600
2601   &.animating {
2602     overflow-y: hidden;
2603   }
2604
2605   hr {
2606     height: 0;
2607     background: transparent;
2608     border: 0;
2609     border-top: 1px solid lighten($ui-base-color, 12%);
2610     margin: 10px 0;
2611   }
2612 }
2613
2614 .column-header__collapsible-inner {
2615   background: lighten($ui-base-color, 8%);
2616   padding: 15px;
2617 }
2618
2619 .column-header__setting-btn {
2620   &:hover {
2621     color: $darker-text-color;
2622     text-decoration: underline;
2623   }
2624 }
2625
2626 .column-header__setting-arrows {
2627   float: right;
2628
2629   .column-header__setting-btn {
2630     padding: 0 10px;
2631
2632     &:last-child {
2633       padding-right: 0;
2634     }
2635   }
2636 }
2637
2638 .text-btn {
2639   display: inline-block;
2640   padding: 0;
2641   font-family: inherit;
2642   font-size: inherit;
2643   color: inherit;
2644   border: 0;
2645   background: transparent;
2646   cursor: pointer;
2647 }
2648
2649 .column-header__icon {
2650   display: inline-block;
2651   margin-right: 5px;
2652 }
2653
2654 .loading-indicator {
2655   color: $dark-text-color;
2656   font-size: 12px;
2657   font-weight: 400;
2658   text-transform: uppercase;
2659   overflow: visible;
2660   position: absolute;
2661   top: 50%;
2662   left: 50%;
2663   transform: translate(-50%, -50%);
2664
2665   span {
2666     display: block;
2667     float: left;
2668     margin-left: 50%;
2669     transform: translateX(-50%);
2670     margin: 82px 0 0 50%;
2671     white-space: nowrap;
2672     animation: loader-label 1.15s infinite cubic-bezier(0.215, 0.610, 0.355, 1.000);
2673   }
2674 }
2675
2676 .loading-indicator__figure {
2677   position: absolute;
2678   top: 50%;
2679   left: 50%;
2680   transform: translate(-50%, -50%);
2681   width: 0;
2682   height: 0;
2683   box-sizing: border-box;
2684   border: 0 solid lighten($ui-base-color, 26%);
2685   border-radius: 50%;
2686   animation: loader-figure 1.15s infinite cubic-bezier(0.215, 0.610, 0.355, 1.000);
2687 }
2688
2689 @keyframes loader-figure {
2690   0% {
2691     width: 0;
2692     height: 0;
2693     background-color: lighten($ui-base-color, 26%);
2694   }
2695
2696   29% {
2697     background-color: lighten($ui-base-color, 26%);
2698   }
2699
2700   30% {
2701     width: 42px;
2702     height: 42px;
2703     background-color: transparent;
2704     border-width: 21px;
2705     opacity: 1;
2706   }
2707
2708   100% {
2709     width: 42px;
2710     height: 42px;
2711     border-width: 0;
2712     opacity: 0;
2713     background-color: transparent;
2714   }
2715 }
2716
2717 @keyframes loader-label {
2718   0% { opacity: 0.25; }
2719   30% { opacity: 1; }
2720   100% { opacity: 0.25; }
2721 }
2722
2723 .video-error-cover {
2724   align-items: center;
2725   background: $base-overlay-background;
2726   color: $primary-text-color;
2727   cursor: pointer;
2728   display: flex;
2729   flex-direction: column;
2730   height: 100%;
2731   justify-content: center;
2732   margin-top: 8px;
2733   position: relative;
2734   text-align: center;
2735   z-index: 100;
2736 }
2737
2738 .media-spoiler {
2739   background: $base-overlay-background;
2740   color: $darker-text-color;
2741   border: 0;
2742   padding: 0;
2743   width: 100%;
2744   height: 100%;
2745   border-radius: 4px;
2746   appearance: none;
2747
2748   &:hover,
2749   &:active,
2750   &:focus {
2751     padding: 0;
2752     color: lighten($darker-text-color, 8%);
2753   }
2754 }
2755
2756 .media-spoiler__warning {
2757   display: block;
2758   font-size: 14px;
2759 }
2760
2761 .media-spoiler__trigger {
2762   display: block;
2763   font-size: 11px;
2764   font-weight: 700;
2765 }
2766
2767 .spoiler-button {
2768   display: none;
2769   left: 4px;
2770   position: absolute;
2771   text-shadow: 0 1px 1px $base-shadow-color, 1px 0 1px $base-shadow-color;
2772   top: 4px;
2773   z-index: 100;
2774
2775   &.spoiler-button--visible {
2776     display: block;
2777   }
2778 }
2779
2780 .modal-container--preloader {
2781   background: lighten($ui-base-color, 8%);
2782 }
2783
2784 .account--panel {
2785   background: lighten($ui-base-color, 4%);
2786   border-top: 1px solid lighten($ui-base-color, 8%);
2787   border-bottom: 1px solid lighten($ui-base-color, 8%);
2788   display: flex;
2789   flex-direction: row;
2790   padding: 10px 0;
2791 }
2792
2793 .account--panel__button,
2794 .detailed-status__button {
2795   flex: 1 1 auto;
2796   text-align: center;
2797 }
2798
2799 .column-settings__outer {
2800   background: lighten($ui-base-color, 8%);
2801   padding: 15px;
2802 }
2803
2804 .column-settings__section {
2805   color: $darker-text-color;
2806   cursor: default;
2807   display: block;
2808   font-weight: 500;
2809   margin-bottom: 10px;
2810 }
2811
2812 .column-settings__row {
2813   .text-btn {
2814     margin-bottom: 15px;
2815   }
2816 }
2817
2818 .account--follows-info {
2819   color: $primary-text-color;
2820   position: absolute;
2821   top: 10px;
2822   left: 10px;
2823   opacity: 0.7;
2824   display: inline-block;
2825   vertical-align: top;
2826   background-color: rgba($base-overlay-background, 0.4);
2827   text-transform: uppercase;
2828   font-size: 11px;
2829   font-weight: 500;
2830   padding: 4px;
2831   border-radius: 4px;
2832 }
2833
2834 .account--muting-info {
2835   color: $primary-text-color;
2836   position: absolute;
2837   top: 40px;
2838   left: 10px;
2839   opacity: 0.7;
2840   display: inline-block;
2841   vertical-align: top;
2842   background-color: rgba($base-overlay-background, 0.4);
2843   text-transform: uppercase;
2844   font-size: 11px;
2845   font-weight: 500;
2846   padding: 4px;
2847   border-radius: 4px;
2848 }
2849
2850 .account--action-button {
2851   position: absolute;
2852   top: 10px;
2853   right: 20px;
2854 }
2855
2856 .setting-toggle {
2857   display: block;
2858   line-height: 24px;
2859 }
2860
2861 .setting-toggle__label,
2862 .setting-meta__label {
2863   color: $darker-text-color;
2864   display: inline-block;
2865   margin-bottom: 14px;
2866   margin-left: 8px;
2867   vertical-align: middle;
2868 }
2869
2870 .setting-meta__label {
2871   float: right;
2872 }
2873
2874 .empty-column-indicator,
2875 .error-column {
2876   color: $dark-text-color;
2877   background: $ui-base-color;
2878   text-align: center;
2879   padding: 20px;
2880   font-size: 15px;
2881   font-weight: 400;
2882   cursor: default;
2883   display: flex;
2884   flex: 1 1 auto;
2885   align-items: center;
2886   justify-content: center;
2887
2888   @supports(display: grid) { // hack to fix Chrome <57
2889     contain: strict;
2890   }
2891
2892   a {
2893     color: $highlight-text-color;
2894     text-decoration: none;
2895
2896     &:hover {
2897       text-decoration: underline;
2898     }
2899   }
2900 }
2901
2902 .error-column {
2903   flex-direction: column;
2904 }
2905
2906 @keyframes heartbeat {
2907   from {
2908     transform: scale(1);
2909     animation-timing-function: ease-out;
2910   }
2911
2912   10% {
2913     transform: scale(0.91);
2914     animation-timing-function: ease-in;
2915   }
2916
2917   17% {
2918     transform: scale(0.98);
2919     animation-timing-function: ease-out;
2920   }
2921
2922   33% {
2923     transform: scale(0.87);
2924     animation-timing-function: ease-in;
2925   }
2926
2927   45% {
2928     transform: scale(1);
2929     animation-timing-function: ease-out;
2930   }
2931 }
2932
2933 .no-reduce-motion .pulse-loading {
2934   transform-origin: center center;
2935   animation: heartbeat 1.5s ease-in-out infinite both;
2936 }
2937
2938 @keyframes shake-bottom {
2939   0%,
2940   100% {
2941     transform: rotate(0deg);
2942     transform-origin: 50% 100%;
2943   }
2944
2945   10% {
2946     transform: rotate(2deg);
2947   }
2948
2949   20%,
2950   40%,
2951   60% {
2952     transform: rotate(-4deg);
2953   }
2954
2955   30%,
2956   50%,
2957   70% {
2958     transform: rotate(4deg);
2959   }
2960
2961   80% {
2962     transform: rotate(-2deg);
2963   }
2964
2965   90% {
2966     transform: rotate(2deg);
2967   }
2968 }
2969
2970 .no-reduce-motion .shake-bottom {
2971   transform-origin: 50% 100%;
2972   animation: shake-bottom 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) 2s 2 both;
2973 }
2974
2975 .emoji-picker-dropdown__menu {
2976   background: $simple-background-color;
2977   position: absolute;
2978   box-shadow: 4px 4px 6px rgba($base-shadow-color, 0.4);
2979   border-radius: 4px;
2980   margin-top: 5px;
2981
2982   .emoji-mart-scroll {
2983     transition: opacity 200ms ease;
2984   }
2985
2986   &.selecting .emoji-mart-scroll {
2987     opacity: 0.5;
2988   }
2989 }
2990
2991 .emoji-picker-dropdown__modifiers {
2992   position: absolute;
2993   top: 60px;
2994   right: 11px;
2995   cursor: pointer;
2996 }
2997
2998 .emoji-picker-dropdown__modifiers__menu {
2999   position: absolute;
3000   z-index: 4;
3001   top: -4px;
3002   left: -8px;
3003   background: $simple-background-color;
3004   border-radius: 4px;
3005   box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2);
3006   overflow: hidden;
3007
3008   button {
3009     display: block;
3010     cursor: pointer;
3011     border: 0;
3012     padding: 4px 8px;
3013     background: transparent;
3014
3015     &:hover,
3016     &:focus,
3017     &:active {
3018       background: rgba($ui-secondary-color, 0.4);
3019     }
3020   }
3021
3022   .emoji-mart-emoji {
3023     height: 22px;
3024   }
3025 }
3026
3027 .emoji-mart-emoji {
3028   span {
3029     background-repeat: no-repeat;
3030   }
3031 }
3032
3033 .upload-area {
3034   align-items: center;
3035   background: rgba($base-overlay-background, 0.8);
3036   display: flex;
3037   height: 100%;
3038   justify-content: center;
3039   left: 0;
3040   opacity: 0;
3041   position: absolute;
3042   top: 0;
3043   visibility: hidden;
3044   width: 100%;
3045   z-index: 2000;
3046
3047   * {
3048     pointer-events: none;
3049   }
3050 }
3051
3052 .upload-area__drop {
3053   width: 320px;
3054   height: 160px;
3055   display: flex;
3056   box-sizing: border-box;
3057   position: relative;
3058   padding: 8px;
3059 }
3060
3061 .upload-area__background {
3062   position: absolute;
3063   top: 0;
3064   right: 0;
3065   bottom: 0;
3066   left: 0;
3067   z-index: -1;
3068   border-radius: 4px;
3069   background: $ui-base-color;
3070   box-shadow: 0 0 5px rgba($base-shadow-color, 0.2);
3071 }
3072
3073 .upload-area__content {
3074   flex: 1;
3075   display: flex;
3076   align-items: center;
3077   justify-content: center;
3078   color: $secondary-text-color;
3079   font-size: 18px;
3080   font-weight: 500;
3081   border: 2px dashed $ui-base-lighter-color;
3082   border-radius: 4px;
3083 }
3084
3085 .upload-progress {
3086   padding: 10px;
3087   color: $lighter-text-color;
3088   overflow: hidden;
3089   display: flex;
3090
3091   .fa {
3092     font-size: 34px;
3093     margin-right: 10px;
3094   }
3095
3096   span {
3097     font-size: 12px;
3098     text-transform: uppercase;
3099     font-weight: 500;
3100     display: block;
3101   }
3102 }
3103
3104 .upload-progess__message {
3105   flex: 1 1 auto;
3106 }
3107
3108 .upload-progress__backdrop {
3109   width: 100%;
3110   height: 6px;
3111   border-radius: 6px;
3112   background: $ui-base-lighter-color;
3113   position: relative;
3114   margin-top: 5px;
3115 }
3116
3117 .upload-progress__tracker {
3118   position: absolute;
3119   left: 0;
3120   top: 0;
3121   height: 6px;
3122   background: $ui-highlight-color;
3123   border-radius: 6px;
3124 }
3125
3126 .emoji-button {
3127   display: block;
3128   font-size: 24px;
3129   line-height: 24px;
3130   margin-left: 2px;
3131   width: 24px;
3132   outline: 0;
3133   cursor: pointer;
3134
3135   &:active,
3136   &:focus {
3137     outline: 0 !important;
3138   }
3139
3140   img {
3141     filter: grayscale(100%);
3142     opacity: 0.8;
3143     display: block;
3144     margin: 0;
3145     width: 22px;
3146     height: 22px;
3147     margin-top: 2px;
3148   }
3149
3150   &:hover,
3151   &:active,
3152   &:focus {
3153     img {
3154       opacity: 1;
3155       filter: none;
3156     }
3157   }
3158 }
3159
3160 .dropdown--active .emoji-button img {
3161   opacity: 1;
3162   filter: none;
3163 }
3164
3165 .privacy-dropdown__dropdown {
3166   position: absolute;
3167   background: $simple-background-color;
3168   box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
3169   border-radius: 4px;
3170   margin-left: 40px;
3171   overflow: hidden;
3172   transform-origin: 50% 0;
3173 }
3174
3175 .privacy-dropdown__option {
3176   color: $inverted-text-color;
3177   padding: 10px;
3178   cursor: pointer;
3179   display: flex;
3180
3181   &:hover,
3182   &.active {
3183     background: $ui-highlight-color;
3184     color: $primary-text-color;
3185
3186     .privacy-dropdown__option__content {
3187       color: $primary-text-color;
3188
3189       strong {
3190         color: $primary-text-color;
3191       }
3192     }
3193   }
3194
3195   &.active:hover {
3196     background: lighten($ui-highlight-color, 4%);
3197   }
3198 }
3199
3200 .privacy-dropdown__option__icon {
3201   display: flex;
3202   align-items: center;
3203   justify-content: center;
3204   margin-right: 10px;
3205 }
3206
3207 .privacy-dropdown__option__content {
3208   flex: 1 1 auto;
3209   color: $lighter-text-color;
3210
3211   strong {
3212     font-weight: 500;
3213     display: block;
3214     color: $inverted-text-color;
3215
3216     @each $lang in $cjk-langs {
3217       &:lang(#{$lang}) {
3218         font-weight: 700;
3219       }
3220     }
3221   }
3222 }
3223
3224 .privacy-dropdown.active {
3225   .privacy-dropdown__value {
3226     background: $simple-background-color;
3227     border-radius: 4px 4px 0 0;
3228     box-shadow: 0 -4px 4px rgba($base-shadow-color, 0.1);
3229
3230     .icon-button {
3231       transition: none;
3232     }
3233
3234     &.active {
3235       background: $ui-highlight-color;
3236
3237       .icon-button {
3238         color: $primary-text-color;
3239       }
3240     }
3241   }
3242
3243   .privacy-dropdown__dropdown {
3244     display: block;
3245     box-shadow: 2px 4px 6px rgba($base-shadow-color, 0.1);
3246   }
3247 }
3248
3249 .search {
3250   position: relative;
3251 }
3252
3253 .search__input {
3254   outline: 0;
3255   box-sizing: border-box;
3256   display: block;
3257   width: 100%;
3258   border: none;
3259   padding: 10px;
3260   padding-right: 30px;
3261   font-family: inherit;
3262   background: $ui-base-color;
3263   color: $darker-text-color;
3264   font-size: 14px;
3265   margin: 0;
3266
3267   &::-moz-focus-inner {
3268     border: 0;
3269   }
3270
3271   &::-moz-focus-inner,
3272   &:focus,
3273   &:active {
3274     outline: 0 !important;
3275   }
3276
3277   &:focus {
3278     background: lighten($ui-base-color, 4%);
3279   }
3280
3281   @media screen and (max-width: 600px) {
3282     font-size: 16px;
3283   }
3284 }
3285
3286 .search__icon {
3287   .fa {
3288     position: absolute;
3289     top: 10px;
3290     right: 10px;
3291     z-index: 2;
3292     display: inline-block;
3293     opacity: 0;
3294     transition: all 100ms linear;
3295     font-size: 18px;
3296     width: 18px;
3297     height: 18px;
3298     color: $secondary-text-color;
3299     cursor: default;
3300     pointer-events: none;
3301
3302     &.active {
3303       pointer-events: auto;
3304       opacity: 0.3;
3305     }
3306   }
3307
3308   .fa-search {
3309     transform: rotate(90deg);
3310
3311     &.active {
3312       pointer-events: none;
3313       transform: rotate(0deg);
3314     }
3315   }
3316
3317   .fa-times-circle {
3318     top: 11px;
3319     transform: rotate(0deg);
3320     color: $action-button-color;
3321     cursor: pointer;
3322
3323     &.active {
3324       transform: rotate(90deg);
3325     }
3326
3327     &:hover {
3328       color: lighten($action-button-color, 7%);
3329     }
3330   }
3331 }
3332
3333 .search-results__header {
3334   color: $dark-text-color;
3335   background: lighten($ui-base-color, 2%);
3336   border-bottom: 1px solid darken($ui-base-color, 4%);
3337   padding: 15px 10px;
3338   font-size: 14px;
3339   font-weight: 500;
3340 }
3341
3342 .search-results__section {
3343   margin-bottom: 20px;
3344
3345   h5 {
3346     position: relative;
3347
3348     &::before {
3349       content: "";
3350       display: block;
3351       position: absolute;
3352       left: 0;
3353       right: 0;
3354       top: 50%;
3355       width: 100%;
3356       height: 0;
3357       border-top: 1px solid lighten($ui-base-color, 8%);
3358     }
3359
3360     span {
3361       display: inline-block;
3362       background: $ui-base-color;
3363       color: $darker-text-color;
3364       font-size: 14px;
3365       font-weight: 500;
3366       padding: 10px;
3367       position: relative;
3368       z-index: 1;
3369       cursor: default;
3370     }
3371   }
3372
3373   .account:last-child,
3374   & > div:last-child .status {
3375     border-bottom: 0;
3376   }
3377 }
3378
3379 .search-results__hashtag {
3380   display: block;
3381   padding: 10px;
3382   color: $secondary-text-color;
3383   text-decoration: none;
3384
3385   &:hover,
3386   &:active,
3387   &:focus {
3388     color: lighten($secondary-text-color, 4%);
3389     text-decoration: underline;
3390   }
3391 }
3392
3393 .modal-root {
3394   position: relative;
3395   transition: opacity 0.3s linear;
3396   will-change: opacity;
3397   z-index: 9999;
3398 }
3399
3400 .modal-root__overlay {
3401   position: fixed;
3402   top: 0;
3403   left: 0;
3404   right: 0;
3405   bottom: 0;
3406   background: rgba($base-overlay-background, 0.7);
3407 }
3408
3409 .modal-root__container {
3410   position: fixed;
3411   top: 0;
3412   left: 0;
3413   width: 100%;
3414   height: 100%;
3415   display: flex;
3416   flex-direction: column;
3417   align-items: center;
3418   justify-content: center;
3419   align-content: space-around;
3420   z-index: 9999;
3421   pointer-events: none;
3422   user-select: none;
3423 }
3424
3425 .modal-root__modal {
3426   pointer-events: auto;
3427   display: flex;
3428   z-index: 9999;
3429 }
3430
3431 .video-modal {
3432   max-width: 100vw;
3433   max-height: 100vh;
3434   position: relative;
3435 }
3436
3437 .media-modal {
3438   width: 100%;
3439   height: 100%;
3440   position: relative;
3441
3442   .extended-video-player {
3443     width: 100%;
3444     height: 100%;
3445     display: flex;
3446     align-items: center;
3447     justify-content: center;
3448
3449     video {
3450       max-width: $media-modal-media-max-width;
3451       max-height: $media-modal-media-max-height;
3452     }
3453   }
3454 }
3455
3456 .media-modal__closer {
3457   position: absolute;
3458   top: 0;
3459   left: 0;
3460   right: 0;
3461   bottom: 0;
3462 }
3463
3464 .media-modal__navigation {
3465   position: absolute;
3466   top: 0;
3467   left: 0;
3468   right: 0;
3469   bottom: 0;
3470   pointer-events: none;
3471   transition: opacity 0.3s linear;
3472   will-change: opacity;
3473
3474   * {
3475     pointer-events: auto;
3476   }
3477
3478   &.media-modal__navigation--hidden {
3479     opacity: 0;
3480
3481     * {
3482       pointer-events: none;
3483     }
3484   }
3485 }
3486
3487 .media-modal__nav {
3488   background: rgba($base-overlay-background, 0.5);
3489   box-sizing: border-box;
3490   border: 0;
3491   color: $primary-text-color;
3492   cursor: pointer;
3493   display: flex;
3494   align-items: center;
3495   font-size: 24px;
3496   height: 20vmax;
3497   margin: auto 0;
3498   padding: 30px 15px;
3499   position: absolute;
3500   top: 0;
3501   bottom: 0;
3502 }
3503
3504 .media-modal__nav--left {
3505   left: 0;
3506 }
3507
3508 .media-modal__nav--right {
3509   right: 0;
3510 }
3511
3512 .media-modal__pagination {
3513   width: 100%;
3514   text-align: center;
3515   position: absolute;
3516   left: 0;
3517   bottom: 20px;
3518   pointer-events: none;
3519 }
3520
3521 .media-modal__page-dot {
3522   display: inline-block;
3523 }
3524
3525 .media-modal__button {
3526   background-color: $primary-text-color;
3527   height: 12px;
3528   width: 12px;
3529   border-radius: 6px;
3530   margin: 10px;
3531   padding: 0;
3532   border: 0;
3533   font-size: 0;
3534 }
3535
3536 .media-modal__button--active {
3537   background-color: $highlight-text-color;
3538 }
3539
3540 .media-modal__close {
3541   position: absolute;
3542   right: 8px;
3543   top: 8px;
3544   z-index: 100;
3545 }
3546
3547 .onboarding-modal,
3548 .error-modal,
3549 .embed-modal {
3550   background: $ui-secondary-color;
3551   color: $inverted-text-color;
3552   border-radius: 8px;
3553   overflow: hidden;
3554   display: flex;
3555   flex-direction: column;
3556 }
3557
3558 .onboarding-modal__pager {
3559   height: 80vh;
3560   width: 80vw;
3561   max-width: 520px;
3562   max-height: 470px;
3563
3564   .react-swipeable-view-container > div {
3565     width: 100%;
3566     height: 100%;
3567     box-sizing: border-box;
3568     display: none;
3569     flex-direction: column;
3570     align-items: center;
3571     justify-content: center;
3572     display: flex;
3573     user-select: text;
3574   }
3575 }
3576
3577 .error-modal__body {
3578   height: 80vh;
3579   width: 80vw;
3580   max-width: 520px;
3581   max-height: 420px;
3582   position: relative;
3583
3584   & > div {
3585     position: absolute;
3586     top: 0;
3587     left: 0;
3588     width: 100%;
3589     height: 100%;
3590     box-sizing: border-box;
3591     padding: 25px;
3592     display: none;
3593     flex-direction: column;
3594     align-items: center;
3595     justify-content: center;
3596     display: flex;
3597     opacity: 0;
3598     user-select: text;
3599   }
3600 }
3601
3602 .error-modal__body {
3603   display: flex;
3604   flex-direction: column;
3605   justify-content: center;
3606   align-items: center;
3607   text-align: center;
3608 }
3609
3610 @media screen and (max-width: 550px) {
3611   .onboarding-modal {
3612     width: 100%;
3613     height: 100%;
3614     border-radius: 0;
3615   }
3616
3617   .onboarding-modal__pager {
3618     width: 100%;
3619     height: auto;
3620     max-width: none;
3621     max-height: none;
3622     flex: 1 1 auto;
3623   }
3624 }
3625
3626 .onboarding-modal__paginator,
3627 .error-modal__footer {
3628   flex: 0 0 auto;
3629   background: darken($ui-secondary-color, 8%);
3630   display: flex;
3631   padding: 25px;
3632
3633   & > div {
3634     min-width: 33px;
3635   }
3636
3637   .onboarding-modal__nav,
3638   .error-modal__nav {
3639     color: $lighter-text-color;
3640     border: 0;
3641     font-size: 14px;
3642     font-weight: 500;
3643     padding: 10px 25px;
3644     line-height: inherit;
3645     height: auto;
3646     margin: -10px;
3647     border-radius: 4px;
3648     background-color: transparent;
3649
3650     &:hover,
3651     &:focus,
3652     &:active {
3653       color: darken($lighter-text-color, 4%);
3654       background-color: darken($ui-secondary-color, 16%);
3655     }
3656
3657     &.onboarding-modal__done,
3658     &.onboarding-modal__next {
3659       color: $inverted-text-color;
3660
3661       &:hover,
3662       &:focus,
3663       &:active {
3664         color: lighten($inverted-text-color, 4%);
3665       }
3666     }
3667   }
3668 }
3669
3670 .error-modal__footer {
3671   justify-content: center;
3672 }
3673
3674 .onboarding-modal__dots {
3675   flex: 1 1 auto;
3676   display: flex;
3677   align-items: center;
3678   justify-content: center;
3679 }
3680
3681 .onboarding-modal__dot {
3682   width: 14px;
3683   height: 14px;
3684   border-radius: 14px;
3685   background: darken($ui-secondary-color, 16%);
3686   margin: 0 3px;
3687   cursor: pointer;
3688
3689   &:hover {
3690     background: darken($ui-secondary-color, 18%);
3691   }
3692
3693   &.active {
3694     cursor: default;
3695     background: darken($ui-secondary-color, 24%);
3696   }
3697 }
3698
3699 .onboarding-modal__page__wrapper {
3700   pointer-events: none;
3701   padding: 25px;
3702   padding-bottom: 0;
3703
3704   &.onboarding-modal__page__wrapper--active {
3705     pointer-events: auto;
3706   }
3707 }
3708
3709 .onboarding-modal__page {
3710   cursor: default;
3711   line-height: 21px;
3712
3713   h1 {
3714     font-size: 18px;
3715     font-weight: 500;
3716     color: $inverted-text-color;
3717     margin-bottom: 20px;
3718   }
3719
3720   a {
3721     color: $highlight-text-color;
3722
3723     &:hover,
3724     &:focus,
3725     &:active {
3726       color: lighten($highlight-text-color, 4%);
3727     }
3728   }
3729
3730   .navigation-bar a {
3731     color: inherit;
3732   }
3733
3734   p {
3735     font-size: 16px;
3736     color: $lighter-text-color;
3737     margin-top: 10px;
3738     margin-bottom: 10px;
3739
3740     &:last-child {
3741       margin-bottom: 0;
3742     }
3743
3744     strong {
3745       font-weight: 500;
3746       background: $ui-base-color;
3747       color: $secondary-text-color;
3748       border-radius: 4px;
3749       font-size: 14px;
3750       padding: 3px 6px;
3751
3752       @each $lang in $cjk-langs {
3753         &:lang(#{$lang}) {
3754           font-weight: 700;
3755         }
3756       }
3757     }
3758   }
3759 }
3760
3761 .onboarding-modal__page__wrapper-0 {
3762   background: url('../images/elephant_ui_greeting.svg') no-repeat left bottom / auto 250px;
3763   height: 100%;
3764   padding: 0;
3765 }
3766
3767 .onboarding-modal__page-one {
3768   &__lead {
3769     padding: 65px;
3770     padding-top: 45px;
3771     padding-bottom: 0;
3772     margin-bottom: 10px;
3773
3774     h1 {
3775       font-size: 26px;
3776       line-height: 36px;
3777       margin-bottom: 8px;
3778     }
3779
3780     p {
3781       margin-bottom: 0;
3782     }
3783   }
3784
3785   &__extra {
3786     padding-right: 65px;
3787     padding-left: 185px;
3788     text-align: center;
3789   }
3790 }
3791
3792 .display-case {
3793   text-align: center;
3794   font-size: 15px;
3795   margin-bottom: 15px;
3796
3797   &__label {
3798     font-weight: 500;
3799     color: $inverted-text-color;
3800     margin-bottom: 5px;
3801     text-transform: uppercase;
3802     font-size: 12px;
3803   }
3804
3805   &__case {
3806     background: $ui-base-color;
3807     color: $secondary-text-color;
3808     font-weight: 500;
3809     padding: 10px;
3810     border-radius: 4px;
3811   }
3812 }
3813
3814 .onboarding-modal__page-two,
3815 .onboarding-modal__page-three,
3816 .onboarding-modal__page-four,
3817 .onboarding-modal__page-five {
3818   p {
3819     text-align: left;
3820   }
3821
3822   .figure {
3823     background: darken($ui-base-color, 8%);
3824     color: $secondary-text-color;
3825     margin-bottom: 20px;
3826     border-radius: 4px;
3827     padding: 10px;
3828     text-align: center;
3829     font-size: 14px;
3830     box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.3);
3831
3832     .onboarding-modal__image {
3833       border-radius: 4px;
3834       margin-bottom: 10px;
3835     }
3836
3837     &.non-interactive {
3838       pointer-events: none;
3839       text-align: left;
3840     }
3841   }
3842 }
3843
3844 .onboarding-modal__page-four__columns {
3845   .row {
3846     display: flex;
3847     margin-bottom: 20px;
3848
3849     & > div {
3850       flex: 1 1 0;
3851       margin: 0 10px;
3852
3853       &:first-child {
3854         margin-left: 0;
3855       }
3856
3857       &:last-child {
3858         margin-right: 0;
3859       }
3860
3861       p {
3862         text-align: center;
3863       }
3864     }
3865
3866     &:last-child {
3867       margin-bottom: 0;
3868     }
3869   }
3870
3871   .column-header {
3872     color: $primary-text-color;
3873   }
3874 }
3875
3876 @media screen and (max-width: 320px) and (max-height: 600px) {
3877   .onboarding-modal__page p {
3878     font-size: 14px;
3879     line-height: 20px;
3880   }
3881
3882   .onboarding-modal__page-two .figure,
3883   .onboarding-modal__page-three .figure,
3884   .onboarding-modal__page-four .figure,
3885   .onboarding-modal__page-five .figure {
3886     font-size: 12px;
3887     margin-bottom: 10px;
3888   }
3889
3890   .onboarding-modal__page-four__columns .row {
3891     margin-bottom: 10px;
3892   }
3893
3894   .onboarding-modal__page-four__columns .column-header {
3895     padding: 5px;
3896     font-size: 12px;
3897   }
3898 }
3899
3900 .onboard-sliders {
3901   display: inline-block;
3902   max-width: 30px;
3903   max-height: auto;
3904   margin-left: 10px;
3905 }
3906
3907 .boost-modal,
3908 .confirmation-modal,
3909 .report-modal,
3910 .actions-modal,
3911 .mute-modal {
3912   background: lighten($ui-secondary-color, 8%);
3913   color: $inverted-text-color;
3914   border-radius: 8px;
3915   overflow: hidden;
3916   max-width: 90vw;
3917   width: 480px;
3918   position: relative;
3919   flex-direction: column;
3920
3921   .status__display-name {
3922     display: block;
3923     max-width: 100%;
3924     padding-right: 25px;
3925   }
3926
3927   .status__avatar {
3928     height: 28px;
3929     left: 10px;
3930     position: absolute;
3931     top: 10px;
3932     width: 48px;
3933   }
3934
3935   .status__content__spoiler-link {
3936     color: lighten($secondary-text-color, 8%);
3937   }
3938 }
3939
3940 .actions-modal {
3941   .status {
3942     background: $white;
3943     border-bottom-color: $ui-secondary-color;
3944     padding-top: 10px;
3945     padding-bottom: 10px;
3946   }
3947
3948   .dropdown-menu__separator {
3949     border-bottom-color: $ui-secondary-color;
3950   }
3951 }
3952
3953 .boost-modal__container {
3954   overflow-x: scroll;
3955   padding: 10px;
3956
3957   .status {
3958     user-select: text;
3959     border-bottom: 0;
3960   }
3961 }
3962
3963 .boost-modal__action-bar,
3964 .confirmation-modal__action-bar,
3965 .mute-modal__action-bar {
3966   display: flex;
3967   justify-content: space-between;
3968   background: $ui-secondary-color;
3969   padding: 10px;
3970   line-height: 36px;
3971
3972   & > div {
3973     flex: 1 1 auto;
3974     text-align: right;
3975     color: $lighter-text-color;
3976     padding-right: 10px;
3977   }
3978
3979   .button {
3980     flex: 0 0 auto;
3981   }
3982 }
3983
3984 .boost-modal__status-header {
3985   font-size: 15px;
3986 }
3987
3988 .boost-modal__status-time {
3989   float: right;
3990   font-size: 14px;
3991 }
3992
3993 .confirmation-modal {
3994   max-width: 85vw;
3995
3996   @media screen and (min-width: 480px) {
3997     max-width: 380px;
3998   }
3999 }
4000
4001 .mute-modal {
4002   line-height: 24px;
4003 }
4004
4005 .mute-modal .react-toggle {
4006   vertical-align: middle;
4007 }
4008
4009 .report-modal {
4010   width: 90vw;
4011   max-width: 700px;
4012 }
4013
4014 .report-modal__container {
4015   display: flex;
4016   border-top: 1px solid $ui-secondary-color;
4017
4018   @media screen and (max-width: 480px) {
4019     flex-wrap: wrap;
4020     overflow-y: auto;
4021   }
4022 }
4023
4024 .report-modal__statuses,
4025 .report-modal__comment {
4026   box-sizing: border-box;
4027   width: 50%;
4028
4029   @media screen and (max-width: 480px) {
4030     width: 100%;
4031   }
4032 }
4033
4034 .report-modal__statuses {
4035   flex: 1 1 auto;
4036   min-height: 20vh;
4037   max-height: 40vh;
4038   overflow-y: auto;
4039   overflow-x: hidden;
4040
4041   @media screen and (max-width: 480px) {
4042     max-height: 10vh;
4043   }
4044 }
4045
4046 .report-modal__comment {
4047   padding: 20px;
4048   border-right: 1px solid $ui-secondary-color;
4049   max-width: 320px;
4050
4051   p {
4052     font-size: 14px;
4053     line-height: 20px;
4054     margin-bottom: 20px;
4055   }
4056
4057   .setting-text {
4058     display: block;
4059     box-sizing: border-box;
4060     width: 100%;
4061     margin: 0;
4062     color: $inverted-text-color;
4063     background: $white;
4064     padding: 10px;
4065     font-family: inherit;
4066     font-size: 14px;
4067     resize: vertical;
4068     border: 0;
4069     outline: 0;
4070     border-radius: 4px;
4071     border: 1px solid $ui-secondary-color;
4072     margin-bottom: 20px;
4073
4074     &:focus {
4075       border: 1px solid darken($ui-secondary-color, 8%);
4076     }
4077   }
4078
4079   .setting-toggle {
4080     margin-top: 20px;
4081     margin-bottom: 24px;
4082
4083     &__label {
4084       color: $inverted-text-color;
4085       font-size: 14px;
4086     }
4087   }
4088
4089   @media screen and (max-width: 480px) {
4090     padding: 10px;
4091     max-width: 100%;
4092     order: 2;
4093
4094     .setting-toggle {
4095       margin-bottom: 4px;
4096     }
4097   }
4098 }
4099
4100 .actions-modal {
4101   .status {
4102     overflow-y: auto;
4103     max-height: 300px;
4104   }
4105
4106   max-height: 80vh;
4107   max-width: 80vw;
4108
4109   .actions-modal__item-label {
4110     font-weight: 500;
4111   }
4112
4113   ul {
4114     overflow-y: auto;
4115     flex-shrink: 0;
4116
4117     li:empty {
4118       margin: 0;
4119     }
4120
4121     li:not(:empty) {
4122       a {
4123         color: $inverted-text-color;
4124         display: flex;
4125         padding: 12px 16px;
4126         font-size: 15px;
4127         align-items: center;
4128         text-decoration: none;
4129
4130         &,
4131         button {
4132           transition: none;
4133         }
4134
4135         &.active,
4136         &:hover,
4137         &:active,
4138         &:focus {
4139           &,
4140           button {
4141             background: $ui-highlight-color;
4142             color: $primary-text-color;
4143           }
4144         }
4145
4146         button:first-child {
4147           margin-right: 10px;
4148         }
4149       }
4150     }
4151   }
4152 }
4153
4154 .confirmation-modal__action-bar,
4155 .mute-modal__action-bar {
4156   .confirmation-modal__cancel-button,
4157   .mute-modal__cancel-button {
4158     background-color: transparent;
4159     color: $lighter-text-color;
4160     font-size: 14px;
4161     font-weight: 500;
4162
4163     &:hover,
4164     &:focus,
4165     &:active {
4166       color: darken($lighter-text-color, 4%);
4167     }
4168   }
4169 }
4170
4171 .confirmation-modal__container,
4172 .mute-modal__container,
4173 .report-modal__target {
4174   padding: 30px;
4175   font-size: 16px;
4176   text-align: center;
4177
4178   strong {
4179     font-weight: 500;
4180
4181     @each $lang in $cjk-langs {
4182       &:lang(#{$lang}) {
4183         font-weight: 700;
4184       }
4185     }
4186   }
4187 }
4188
4189 .report-modal__target {
4190   padding: 20px;
4191
4192   .media-modal__close {
4193     top: 19px;
4194     right: 15px;
4195   }
4196 }
4197
4198 .loading-bar {
4199   background-color: $highlight-text-color;
4200   height: 3px;
4201   position: absolute;
4202   top: 0;
4203   left: 0;
4204 }
4205
4206 .media-gallery__gifv__label {
4207   display: block;
4208   position: absolute;
4209   color: $primary-text-color;
4210   background: rgba($base-overlay-background, 0.5);
4211   bottom: 6px;
4212   left: 6px;
4213   padding: 2px 6px;
4214   border-radius: 2px;
4215   font-size: 11px;
4216   font-weight: 600;
4217   z-index: 1;
4218   pointer-events: none;
4219   opacity: 0.9;
4220   transition: opacity 0.1s ease;
4221 }
4222
4223 .media-gallery__gifv {
4224   &.autoplay {
4225     .media-gallery__gifv__label {
4226       display: none;
4227     }
4228   }
4229
4230   &:hover {
4231     .media-gallery__gifv__label {
4232       opacity: 1;
4233     }
4234   }
4235 }
4236
4237 .attachment-list {
4238   display: flex;
4239   font-size: 14px;
4240   border: 1px solid lighten($ui-base-color, 8%);
4241   border-radius: 4px;
4242   margin-top: 14px;
4243   overflow: hidden;
4244
4245   &__icon {
4246     flex: 0 0 auto;
4247     color: $dark-text-color;
4248     padding: 8px 18px;
4249     cursor: default;
4250     border-right: 1px solid lighten($ui-base-color, 8%);
4251     display: flex;
4252     flex-direction: column;
4253     align-items: center;
4254     justify-content: center;
4255     font-size: 26px;
4256
4257     .fa {
4258       display: block;
4259     }
4260   }
4261
4262   &__list {
4263     list-style: none;
4264     padding: 4px 0;
4265     padding-left: 8px;
4266     display: flex;
4267     flex-direction: column;
4268     justify-content: center;
4269
4270     li {
4271       display: block;
4272       padding: 4px 0;
4273     }
4274
4275     a {
4276       text-decoration: none;
4277       color: $dark-text-color;
4278       font-weight: 500;
4279
4280       &:hover {
4281         text-decoration: underline;
4282       }
4283     }
4284   }
4285
4286   &.compact {
4287     border: 0;
4288     margin-top: 4px;
4289
4290     .attachment-list__list {
4291       padding: 0;
4292       display: block;
4293     }
4294
4295     .fa {
4296       color: $dark-text-color;
4297     }
4298   }
4299 }
4300
4301 /* Media Gallery */
4302 .media-gallery {
4303   box-sizing: border-box;
4304   margin-top: 8px;
4305   overflow: hidden;
4306   border-radius: 4px;
4307   position: relative;
4308   width: 100%;
4309 }
4310
4311 .media-gallery__item {
4312   border: none;
4313   box-sizing: border-box;
4314   display: block;
4315   float: left;
4316   position: relative;
4317   border-radius: 4px;
4318   overflow: hidden;
4319
4320   &.standalone {
4321     .media-gallery__item-gifv-thumbnail {
4322       transform: none;
4323       top: 0;
4324     }
4325   }
4326 }
4327
4328 .media-gallery__item-thumbnail {
4329   cursor: zoom-in;
4330   display: block;
4331   text-decoration: none;
4332   color: $secondary-text-color;
4333   line-height: 0;
4334
4335   &,
4336   img {
4337     height: 100%;
4338     width: 100%;
4339   }
4340
4341   img {
4342     object-fit: cover;
4343   }
4344 }
4345
4346 .media-gallery__gifv {
4347   height: 100%;
4348   overflow: hidden;
4349   position: relative;
4350   width: 100%;
4351 }
4352
4353 .media-gallery__item-gifv-thumbnail {
4354   cursor: zoom-in;
4355   height: 100%;
4356   object-fit: cover;
4357   position: relative;
4358   top: 50%;
4359   transform: translateY(-50%);
4360   width: 100%;
4361   z-index: 1;
4362 }
4363
4364 .media-gallery__item-thumbnail-label {
4365   clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
4366   clip: rect(1px, 1px, 1px, 1px);
4367   overflow: hidden;
4368   position: absolute;
4369 }
4370 /* End Media Gallery */
4371
4372 /* Status Video Player */
4373 .status__video-player {
4374   background: $base-overlay-background;
4375   box-sizing: border-box;
4376   cursor: default; /* May not be needed */
4377   margin-top: 8px;
4378   overflow: hidden;
4379   position: relative;
4380 }
4381
4382 .status__video-player-video {
4383   height: 100%;
4384   object-fit: cover;
4385   position: relative;
4386   top: 50%;
4387   transform: translateY(-50%);
4388   width: 100%;
4389   z-index: 1;
4390 }
4391
4392 .status__video-player-expand,
4393 .status__video-player-mute {
4394   color: $primary-text-color;
4395   opacity: 0.8;
4396   position: absolute;
4397   right: 4px;
4398   text-shadow: 0 1px 1px $base-shadow-color, 1px 0 1px $base-shadow-color;
4399 }
4400
4401 .status__video-player-spoiler {
4402   display: none;
4403   color: $primary-text-color;
4404   left: 4px;
4405   position: absolute;
4406   text-shadow: 0 1px 1px $base-shadow-color, 1px 0 1px $base-shadow-color;
4407   top: 4px;
4408   z-index: 100;
4409
4410   &.status__video-player-spoiler--visible {
4411     display: block;
4412   }
4413 }
4414
4415 .status__video-player-expand {
4416   bottom: 4px;
4417   z-index: 100;
4418 }
4419
4420 .status__video-player-mute {
4421   top: 4px;
4422   z-index: 5;
4423 }
4424
4425 .video-player {
4426   overflow: hidden;
4427   position: relative;
4428   background: $base-shadow-color;
4429   max-width: 100%;
4430   border-radius: 4px;
4431
4432   video {
4433     max-width: 100vw;
4434     max-height: 80vh;
4435     z-index: 1;
4436   }
4437
4438   &.fullscreen {
4439     width: 100% !important;
4440     height: 100% !important;
4441     margin: 0;
4442
4443     video {
4444       max-width: 100% !important;
4445       max-height: 100% !important;
4446     }
4447   }
4448
4449   &.inline {
4450     video {
4451       object-fit: contain;
4452       position: relative;
4453       top: 50%;
4454       transform: translateY(-50%);
4455     }
4456   }
4457
4458   &__controls {
4459     position: absolute;
4460     z-index: 2;
4461     bottom: 0;
4462     left: 0;
4463     right: 0;
4464     box-sizing: border-box;
4465     background: linear-gradient(0deg, rgba($base-shadow-color, 0.85) 0, rgba($base-shadow-color, 0.45) 60%, transparent);
4466     padding: 0 15px;
4467     opacity: 0;
4468     transition: opacity .1s ease;
4469
4470     &.active {
4471       opacity: 1;
4472     }
4473   }
4474
4475   &.inactive {
4476     video,
4477     .video-player__controls {
4478       visibility: hidden;
4479     }
4480   }
4481
4482   &__spoiler {
4483     display: none;
4484     position: absolute;
4485     top: 0;
4486     left: 0;
4487     width: 100%;
4488     height: 100%;
4489     z-index: 4;
4490     border: 0;
4491     background: $base-shadow-color;
4492     color: $darker-text-color;
4493     transition: none;
4494     pointer-events: none;
4495
4496     &.active {
4497       display: block;
4498       pointer-events: auto;
4499
4500       &:hover,
4501       &:active,
4502       &:focus {
4503         color: lighten($darker-text-color, 7%);
4504       }
4505     }
4506
4507     &__title {
4508       display: block;
4509       font-size: 14px;
4510     }
4511
4512     &__subtitle {
4513       display: block;
4514       font-size: 11px;
4515       font-weight: 500;
4516     }
4517   }
4518
4519   &__buttons-bar {
4520     display: flex;
4521     justify-content: space-between;
4522     padding-bottom: 10px;
4523   }
4524
4525   &__buttons {
4526     font-size: 16px;
4527     white-space: nowrap;
4528     overflow: hidden;
4529     text-overflow: ellipsis;
4530
4531     &.left {
4532       button {
4533         padding-left: 0;
4534       }
4535     }
4536
4537     &.right {
4538       button {
4539         padding-right: 0;
4540       }
4541     }
4542
4543     button {
4544       background: transparent;
4545       padding: 2px 10px;
4546       font-size: 16px;
4547       border: 0;
4548       color: rgba($white, 0.75);
4549
4550       &:active,
4551       &:hover,
4552       &:focus {
4553         color: $white;
4554       }
4555     }
4556   }
4557
4558   &__time-sep,
4559   &__time-total,
4560   &__time-current {
4561     font-size: 14px;
4562     font-weight: 500;
4563   }
4564
4565   &__time-current {
4566     color: $white;
4567     margin-left: 10px;
4568   }
4569
4570   &__time-sep {
4571     display: inline-block;
4572     margin: 0 6px;
4573   }
4574
4575   &__time-sep,
4576   &__time-total {
4577     color: $white;
4578   }
4579
4580   &__seek {
4581     cursor: pointer;
4582     height: 24px;
4583     position: relative;
4584
4585     &::before {
4586       content: "";
4587       width: 100%;
4588       background: rgba($white, 0.35);
4589       border-radius: 4px;
4590       display: block;
4591       position: absolute;
4592       height: 4px;
4593       top: 10px;
4594     }
4595
4596     &__progress,
4597     &__buffer {
4598       display: block;
4599       position: absolute;
4600       height: 4px;
4601       border-radius: 4px;
4602       top: 10px;
4603       background: lighten($ui-highlight-color, 8%);
4604     }
4605
4606     &__buffer {
4607       background: rgba($white, 0.2);
4608     }
4609
4610     &__handle {
4611       position: absolute;
4612       z-index: 3;
4613       opacity: 0;
4614       border-radius: 50%;
4615       width: 12px;
4616       height: 12px;
4617       top: 6px;
4618       margin-left: -6px;
4619       transition: opacity .1s ease;
4620       background: lighten($ui-highlight-color, 8%);
4621       box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2);
4622       pointer-events: none;
4623
4624       &.active {
4625         opacity: 1;
4626       }
4627     }
4628
4629     &:hover {
4630       .video-player__seek__handle {
4631         opacity: 1;
4632       }
4633     }
4634   }
4635
4636   &.detailed,
4637   &.fullscreen {
4638     .video-player__buttons {
4639       button {
4640         padding-top: 10px;
4641         padding-bottom: 10px;
4642       }
4643     }
4644   }
4645 }
4646
4647 .media-spoiler-video {
4648   background-size: cover;
4649   background-repeat: no-repeat;
4650   background-position: center;
4651   cursor: pointer;
4652   margin-top: 8px;
4653   position: relative;
4654   border: 0;
4655   display: block;
4656 }
4657
4658 .media-spoiler-video-play-icon {
4659   border-radius: 100px;
4660   color: rgba($primary-text-color, 0.8);
4661   font-size: 36px;
4662   left: 50%;
4663   padding: 5px;
4664   position: absolute;
4665   top: 50%;
4666   transform: translate(-50%, -50%);
4667 }
4668 /* End Video Player */
4669
4670 .account-gallery__container {
4671   display: flex;
4672   justify-content: center;
4673   flex-wrap: wrap;
4674   padding: 2px;
4675 }
4676
4677 .account-gallery__item {
4678   flex-grow: 1;
4679   width: 50%;
4680   overflow: hidden;
4681   position: relative;
4682
4683   &::before {
4684     content: "";
4685     display: block;
4686     padding-top: 100%;
4687   }
4688
4689   a {
4690     display: block;
4691     width: calc(100% - 4px);
4692     height: calc(100% - 4px);
4693     margin: 2px;
4694     top: 0;
4695     left: 0;
4696     background-color: $base-overlay-background;
4697     background-size: cover;
4698     background-position: center;
4699     position: absolute;
4700     color: $darker-text-color;
4701     text-decoration: none;
4702     border-radius: 4px;
4703
4704     &:hover,
4705     &:active,
4706     &:focus {
4707       outline: 0;
4708       color: $secondary-text-color;
4709
4710       &::before {
4711         content: "";
4712         display: block;
4713         width: 100%;
4714         height: 100%;
4715         background: rgba($base-overlay-background, 0.3);
4716         border-radius: 4px;
4717       }
4718     }
4719   }
4720
4721   &__icons {
4722     position: absolute;
4723     top: 50%;
4724     left: 50%;
4725     transform: translate(-50%, -50%);
4726     font-size: 24px;
4727   }
4728 }
4729
4730 .account__section-headline {
4731   background: darken($ui-base-color, 4%);
4732   border-bottom: 1px solid lighten($ui-base-color, 8%);
4733   cursor: default;
4734   display: flex;
4735
4736   a {
4737     display: block;
4738     flex: 1 1 auto;
4739     color: $darker-text-color;
4740     padding: 15px 0;
4741     font-size: 14px;
4742     font-weight: 500;
4743     text-align: center;
4744     text-decoration: none;
4745     position: relative;
4746
4747     &.active {
4748       color: $secondary-text-color;
4749
4750       &::before,
4751       &::after {
4752         display: block;
4753         content: "";
4754         position: absolute;
4755         bottom: 0;
4756         left: 50%;
4757         width: 0;
4758         height: 0;
4759         transform: translateX(-50%);
4760         border-style: solid;
4761         border-width: 0 10px 10px;
4762         border-color: transparent transparent lighten($ui-base-color, 8%);
4763       }
4764
4765       &::after {
4766         bottom: -1px;
4767         border-color: transparent transparent $ui-base-color;
4768       }
4769     }
4770   }
4771 }
4772
4773 ::-webkit-scrollbar-thumb {
4774   border-radius: 0;
4775 }
4776
4777 .search-popout {
4778   background: $simple-background-color;
4779   border-radius: 4px;
4780   padding: 10px 14px;
4781   padding-bottom: 14px;
4782   margin-top: 10px;
4783   color: $light-text-color;
4784   box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
4785
4786   h4 {
4787     text-transform: uppercase;
4788     color: $light-text-color;
4789     font-size: 13px;
4790     font-weight: 500;
4791     margin-bottom: 10px;
4792   }
4793
4794   li {
4795     padding: 4px 0;
4796   }
4797
4798   ul {
4799     margin-bottom: 10px;
4800   }
4801
4802   em {
4803     font-weight: 500;
4804     color: $inverted-text-color;
4805   }
4806 }
4807
4808 noscript {
4809   text-align: center;
4810
4811   img {
4812     width: 200px;
4813     opacity: 0.5;
4814     animation: flicker 4s infinite;
4815   }
4816
4817   div {
4818     font-size: 14px;
4819     margin: 30px auto;
4820     color: $secondary-text-color;
4821     max-width: 400px;
4822
4823     a {
4824       color: $highlight-text-color;
4825       text-decoration: underline;
4826
4827       &:hover {
4828         text-decoration: none;
4829       }
4830     }
4831   }
4832 }
4833
4834 @keyframes flicker {
4835   0% { opacity: 1; }
4836   30% { opacity: 0.75; }
4837   100% { opacity: 1; }
4838 }
4839
4840 @media screen and (max-width: 630px) and (max-height: 400px) {
4841   $duration: 400ms;
4842   $delay: 100ms;
4843
4844   .tabs-bar,
4845   .search {
4846     will-change: margin-top;
4847     transition: margin-top $duration $delay;
4848   }
4849
4850   .navigation-bar {
4851     will-change: padding-bottom;
4852     transition: padding-bottom $duration $delay;
4853   }
4854
4855   .navigation-bar {
4856     & > a:first-child {
4857       will-change: margin-top, margin-left, width;
4858       transition: margin-top $duration $delay, margin-left $duration ($duration + $delay);
4859     }
4860
4861     & > .navigation-bar__profile-edit {
4862       will-change: margin-top;
4863       transition: margin-top $duration $delay;
4864     }
4865
4866     & > .icon-button {
4867       will-change: opacity;
4868       transition: opacity $duration $delay;
4869     }
4870   }
4871
4872   .is-composing {
4873     .tabs-bar,
4874     .search {
4875       margin-top: -50px;
4876     }
4877
4878     .navigation-bar {
4879       padding-bottom: 0;
4880
4881       & > a:first-child {
4882         margin-top: -50px;
4883         margin-left: -40px;
4884       }
4885
4886       .navigation-bar__profile {
4887         padding-top: 2px;
4888       }
4889
4890       .navigation-bar__profile-edit {
4891         position: absolute;
4892         margin-top: -50px;
4893       }
4894
4895       .icon-button {
4896         pointer-events: auto;
4897         opacity: 1;
4898       }
4899     }
4900   }
4901 }
4902
4903 .embed-modal {
4904   max-width: 80vw;
4905   max-height: 80vh;
4906
4907   h4 {
4908     padding: 30px;
4909     font-weight: 500;
4910     font-size: 16px;
4911     text-align: center;
4912   }
4913
4914   .embed-modal__container {
4915     padding: 10px;
4916
4917     .hint {
4918       margin-bottom: 15px;
4919     }
4920
4921     .embed-modal__html {
4922       outline: 0;
4923       box-sizing: border-box;
4924       display: block;
4925       width: 100%;
4926       border: none;
4927       padding: 10px;
4928       font-family: 'mastodon-font-monospace', monospace;
4929       background: $ui-base-color;
4930       color: $primary-text-color;
4931       font-size: 14px;
4932       margin: 0;
4933       margin-bottom: 15px;
4934
4935       &::-moz-focus-inner {
4936         border: 0;
4937       }
4938
4939       &::-moz-focus-inner,
4940       &:focus,
4941       &:active {
4942         outline: 0 !important;
4943       }
4944
4945       &:focus {
4946         background: lighten($ui-base-color, 4%);
4947       }
4948
4949       @media screen and (max-width: 600px) {
4950         font-size: 16px;
4951       }
4952     }
4953
4954     .embed-modal__iframe {
4955       width: 400px;
4956       max-width: 100%;
4957       overflow: hidden;
4958       border: 0;
4959     }
4960   }
4961 }
4962
4963 .account__moved-note {
4964   padding: 14px 10px;
4965   padding-bottom: 16px;
4966   background: lighten($ui-base-color, 4%);
4967   border-top: 1px solid lighten($ui-base-color, 8%);
4968   border-bottom: 1px solid lighten($ui-base-color, 8%);
4969
4970   &__message {
4971     position: relative;
4972     margin-left: 58px;
4973     color: $dark-text-color;
4974     padding: 8px 0;
4975     padding-top: 0;
4976     padding-bottom: 4px;
4977     font-size: 14px;
4978
4979     > span {
4980       display: block;
4981       overflow: hidden;
4982       text-overflow: ellipsis;
4983     }
4984   }
4985
4986   &__icon-wrapper {
4987     left: -26px;
4988     position: absolute;
4989   }
4990
4991   .detailed-status__display-avatar {
4992     position: relative;
4993   }
4994
4995   .detailed-status__display-name {
4996     margin-bottom: 0;
4997   }
4998 }
4999
5000 .column-inline-form {
5001   padding: 7px 15px;
5002   padding-right: 5px;
5003   display: flex;
5004   justify-content: flex-start;
5005   align-items: center;
5006   background: lighten($ui-base-color, 4%);
5007
5008   label {
5009     flex: 1 1 auto;
5010
5011     input {
5012       width: 100%;
5013       margin-bottom: 6px;
5014
5015       &:focus {
5016         outline: 0;
5017       }
5018     }
5019   }
5020
5021   .icon-button {
5022     flex: 0 0 auto;
5023     margin-left: 5px;
5024   }
5025 }
5026
5027 .drawer__backdrop {
5028   cursor: pointer;
5029   position: absolute;
5030   top: 0;
5031   left: 0;
5032   width: 100%;
5033   height: 100%;
5034   background: rgba($base-overlay-background, 0.5);
5035 }
5036
5037 .list-editor {
5038   background: $ui-base-color;
5039   flex-direction: column;
5040   border-radius: 8px;
5041   box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
5042   width: 380px;
5043   overflow: hidden;
5044
5045   @media screen and (max-width: 420px) {
5046     width: 90%;
5047   }
5048
5049   h4 {
5050     padding: 15px 0;
5051     background: lighten($ui-base-color, 13%);
5052     font-weight: 500;
5053     font-size: 16px;
5054     text-align: center;
5055     border-radius: 8px 8px 0 0;
5056   }
5057
5058   .drawer__pager {
5059     height: 50vh;
5060   }
5061
5062   .drawer__inner {
5063     border-radius: 0 0 8px 8px;
5064
5065     &.backdrop {
5066       width: calc(100% - 60px);
5067       box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
5068       border-radius: 0 0 0 8px;
5069     }
5070   }
5071
5072   &__accounts {
5073     overflow-y: auto;
5074   }
5075
5076   .account__display-name {
5077     &:hover strong {
5078       text-decoration: none;
5079     }
5080   }
5081
5082   .account__avatar {
5083     cursor: default;
5084   }
5085
5086   .search {
5087     margin-bottom: 0;
5088   }
5089 }
5090
5091 .focal-point-modal {
5092   max-width: 80vw;
5093   max-height: 80vh;
5094   position: relative;
5095 }
5096
5097 .focal-point {
5098   position: relative;
5099   cursor: pointer;
5100   overflow: hidden;
5101
5102   &.dragging {
5103     cursor: move;
5104   }
5105
5106   img {
5107     max-width: 80vw;
5108     max-height: 80vh;
5109     width: auto;
5110     height: auto;
5111     margin: auto;
5112   }
5113
5114   &__reticle {
5115     position: absolute;
5116     width: 100px;
5117     height: 100px;
5118     transform: translate(-50%, -50%);
5119     background: url('../images/reticle.png') no-repeat 0 0;
5120     border-radius: 50%;
5121     box-shadow: 0 0 0 9999em rgba($base-shadow-color, 0.35);
5122   }
5123
5124   &__overlay {
5125     position: absolute;
5126     width: 100%;
5127     height: 100%;
5128     top: 0;
5129     left: 0;
5130   }
5131 }
5132
5133 .floating-action-button {
5134   position: fixed;
5135   display: flex;
5136   justify-content: center;
5137   align-items: center;
5138   width: 3.9375rem;
5139   height: 3.9375rem;
5140   bottom: 1.3125rem;
5141   right: 1.3125rem;
5142   background: darken($ui-highlight-color, 3%);
5143   color: $white;
5144   border-radius: 50%;
5145   font-size: 21px;
5146   line-height: 21px;
5147   text-decoration: none;
5148   box-shadow: 2px 3px 9px rgba($base-shadow-color, 0.4);
5149
5150   &:hover,
5151   &:focus,
5152   &:active {
5153     background: lighten($ui-highlight-color, 7%);
5154   }
5155 }
5156
5157 .account__header .account__header__fields {
5158   font-size: 14px;
5159   line-height: 20px;
5160   overflow: hidden;
5161   border-collapse: collapse;
5162   margin: 20px -10px -20px;
5163   border-bottom: 0;
5164
5165   tr {
5166     border-top: 1px solid lighten($ui-base-color, 8%);
5167     text-align: center;
5168   }
5169
5170   th,
5171   td {
5172     padding: 14px 20px;
5173     vertical-align: middle;
5174     max-height: 40px;
5175     overflow: hidden;
5176     white-space: nowrap;
5177     text-overflow: ellipsis;
5178   }
5179
5180   th {
5181     color: $darker-text-color;
5182     background: darken($ui-base-color, 4%);
5183     max-width: 120px;
5184     font-weight: 500;
5185   }
5186
5187   td {
5188     flex: auto;
5189     color: $primary-text-color;
5190     background: $ui-base-color;
5191   }
5192 }