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