app/javascript/styles/mastodon/components.scss

   1 .app-body {
   2   -webkit-overflow-scrolling: touch;
   3   -ms-overflow-style: -ms-autohiding-scrollbar;
   4 }
   5
   6 .animated-number {
   7   display: inline-flex;
   8   flex-direction: column;
   9   align-items: stretch;
  10   overflow: hidden;
  11   position: relative;
  12 }
  13
  14 .link-button {
  15   display: block;
  16   font-size: 15px;
  17   line-height: 20px;
  18   color: $ui-highlight-color;
  19   border: 0;
  20   background: transparent;
  21   padding: 0;
  22   cursor: pointer;
  23
  24   &:hover,
  25   &:active {
  26     text-decoration: underline;
  27   }
  28
  29   &:disabled {
  30     color: $ui-primary-color;
  31     cursor: default;
  32   }
  33 }
  34
  35 .button {
  36   background-color: $ui-highlight-color;
  37   border: 10px none;
  38   border-radius: 4px;
  39   box-sizing: border-box;
  40   color: $primary-text-color;
  41   cursor: pointer;
  42   display: inline-block;
  43   font-family: inherit;
  44   font-size: 14px;
  45   font-weight: 500;
  46   height: 36px;
  47   letter-spacing: 0;
  48   line-height: 36px;
  49   overflow: hidden;
  50   padding: 0 16px;
  51   position: relative;
  52   text-align: center;
  53   text-transform: uppercase;
  54   text-decoration: none;
  55   text-overflow: ellipsis;
  56   transition: all 100ms ease-in;
  57   white-space: nowrap;
  58   width: auto;
  59
  60   &:active,
  61   &:focus,
  62   &:hover {
  63     background-color: lighten($ui-highlight-color, 10%);
  64     transition: all 200ms ease-out;
  65   }
  66
  67   &--destructive {
  68     transition: none;
  69
  70     &:active,
  71     &:focus,
  72     &:hover {
  73       background-color: $error-red;
  74       transition: none;
  75     }
  76   }
  77
  78   &:disabled,
  79   &.disabled {
  80     background-color: $ui-primary-color;
  81     cursor: default;
  82   }
  83
  84   &::-moz-focus-inner {
  85     border: 0;
  86   }
  87
  88   &::-moz-focus-inner,
  89   &:focus,
  90   &:active {
  91     outline: 0 !important;
  92   }
  93
  94   &.button-primary,
  95   &.button-alternative,
  96   &.button-secondary,
  97   &.button-alternative-2 {
  98     font-size: 16px;
  99     line-height: 36px;
 100     height: auto;
 101     text-transform: none;
 102     padding: 4px 16px;
 103   }
 104
 105   &.button-alternative {
 106     color: $inverted-text-color;
 107     background: $ui-primary-color;
 108
 109     &:active,
 110     &:focus,
 111     &:hover {
 112       background-color: lighten($ui-primary-color, 4%);
 113     }
 114   }
 115
 116   &.button-alternative-2 {
 117     background: $ui-base-lighter-color;
 118
 119     &:active,
 120     &:focus,
 121     &:hover {
 122       background-color: lighten($ui-base-lighter-color, 4%);
 123     }
 124   }
 125
 126   &.button-secondary {
 127     color: $darker-text-color;
 128     background: transparent;
 129     padding: 3px 15px;
 130     border: 1px solid $ui-primary-color;
 131
 132     &:active,
 133     &:focus,
 134     &:hover {
 135       border-color: lighten($ui-primary-color, 4%);
 136       color: lighten($darker-text-color, 4%);
 137     }
 138
 139     &:disabled {
 140       opacity: 0.5;
 141     }
 142   }
 143
 144   &.button--block {
 145     display: block;
 146     width: 100%;
 147   }
 148 }
 149
 150 .column__wrapper {
 151   display: flex;
 152   flex: 1 1 auto;
 153   position: relative;
 154 }
 155
 156 .icon-button {
 157   display: inline-block;
 158   padding: 0;
 159   color: $action-button-color;
 160   border: 0;
 161   border-radius: 4px;
 162   background: transparent;
 163   cursor: pointer;
 164   transition: all 100ms ease-in;
 165   transition-property: background-color, color;
 166
 167   &:hover,
 168   &:active,
 169   &:focus {
 170     color: lighten($action-button-color, 7%);
 171     background-color: rgba($action-button-color, 0.15);
 172     transition: all 200ms ease-out;
 173     transition-property: background-color, color;
 174   }
 175
 176   &:focus {
 177     background-color: rgba($action-button-color, 0.3);
 178   }
 179
 180   &.disabled {
 181     color: darken($action-button-color, 13%);
 182     background-color: transparent;
 183     cursor: default;
 184   }
 185
 186   &.active {
 187     color: $highlight-text-color;
 188   }
 189
 190   &::-moz-focus-inner {
 191     border: 0;
 192   }
 193
 194   &::-moz-focus-inner,
 195   &:focus,
 196   &:active {
 197     outline: 0 !important;
 198   }
 199
 200   &.inverted {
 201     color: $lighter-text-color;
 202
 203     &:hover,
 204     &:active,
 205     &:focus {
 206       color: darken($lighter-text-color, 7%);
 207       background-color: rgba($lighter-text-color, 0.15);
 208     }
 209
 210     &:focus {
 211       background-color: rgba($lighter-text-color, 0.3);
 212     }
 213
 214     &.disabled {
 215       color: lighten($lighter-text-color, 7%);
 216       background-color: transparent;
 217     }
 218
 219     &.active {
 220       color: $highlight-text-color;
 221
 222       &.disabled {
 223         color: lighten($highlight-text-color, 13%);
 224       }
 225     }
 226   }
 227
 228   &.overlayed {
 229     box-sizing: content-box;
 230     background: rgba($base-overlay-background, 0.6);
 231     color: rgba($primary-text-color, 0.7);
 232     border-radius: 4px;
 233     padding: 2px;
 234
 235     &:hover {
 236       background: rgba($base-overlay-background, 0.9);
 237     }
 238   }
 239 }
 240
 241 .text-icon-button {
 242   color: $lighter-text-color;
 243   border: 0;
 244   border-radius: 4px;
 245   background: transparent;
 246   cursor: pointer;
 247   font-weight: 600;
 248   font-size: 11px;
 249   padding: 0 3px;
 250   line-height: 27px;
 251   outline: 0;
 252   transition: all 100ms ease-in;
 253   transition-property: background-color, color;
 254
 255   &:hover,
 256   &:active,
 257   &:focus {
 258     color: darken($lighter-text-color, 7%);
 259     background-color: rgba($lighter-text-color, 0.15);
 260     transition: all 200ms ease-out;
 261     transition-property: background-color, color;
 262   }
 263
 264   &:focus {
 265     background-color: rgba($lighter-text-color, 0.3);
 266   }
 267
 268   &.disabled {
 269     color: lighten($lighter-text-color, 20%);
 270     background-color: transparent;
 271     cursor: default;
 272   }
 273
 274   &.active {
 275     color: $highlight-text-color;
 276   }
 277
 278   &::-moz-focus-inner {
 279     border: 0;
 280   }
 281
 282   &::-moz-focus-inner,
 283   &:focus,
 284   &:active {
 285     outline: 0 !important;
 286   }
 287 }
 288
 289 .dropdown-menu {
 290   position: absolute;
 291 }
 292
 293 .invisible {
 294   font-size: 0;
 295   line-height: 0;
 296   display: inline-block;
 297   width: 0;
 298   height: 0;
 299   position: absolute;
 300
 301   img,
 302   svg {
 303     margin: 0 !important;
 304     border: 0 !important;
 305     padding: 0 !important;
 306     width: 0 !important;
 307     height: 0 !important;
 308   }
 309 }
 310
 311 .ellipsis {
 312   &::after {
 313     content: "…";
 314   }
 315 }
 316
 317 .compose-form {
 318   padding: 10px;
 319
 320   &__sensitive-button {
 321     padding: 10px;
 322     padding-top: 0;
 323
 324     font-size: 14px;
 325     font-weight: 500;
 326
 327     &.active {
 328       color: $highlight-text-color;
 329     }
 330
 331     input[type=checkbox] {
 332       display: none;
 333     }
 334
 335     .checkbox {
 336       display: inline-block;
 337       position: relative;
 338       border: 1px solid $ui-primary-color;
 339       box-sizing: border-box;
 340       width: 18px;
 341       height: 18px;
 342       flex: 0 0 auto;
 343       margin-right: 10px;
 344       top: -1px;
 345       border-radius: 4px;
 346       vertical-align: middle;
 347
 348       &.active {
 349         border-color: $highlight-text-color;
 350         background: $highlight-text-color;
 351       }
 352     }
 353   }
 354
 355   .compose-form__warning {
 356     color: $inverted-text-color;
 357     margin-bottom: 10px;
 358     background: $ui-primary-color;
 359     box-shadow: 0 2px 6px rgba($base-shadow-color, 0.3);
 360     padding: 8px 10px;
 361     border-radius: 4px;
 362     font-size: 13px;
 363     font-weight: 400;
 364
 365     strong {
 366       color: $inverted-text-color;
 367       font-weight: 500;
 368
 369       @each $lang in $cjk-langs {
 370         &:lang(#{$lang}) {
 371           font-weight: 700;
 372         }
 373       }
 374     }
 375
 376     a {
 377       color: $lighter-text-color;
 378       font-weight: 500;
 379       text-decoration: underline;
 380
 381       &:hover,
 382       &:active,
 383       &:focus {
 384         text-decoration: none;
 385       }
 386     }
 387   }
 388
 389   .emoji-picker-dropdown {
 390     position: absolute;
 391     top: 0;
 392     right: 0;
 393   }
 394
 395   .compose-form__autosuggest-wrapper {
 396     position: relative;
 397   }
 398
 399   .autosuggest-textarea,
 400   .autosuggest-input,
 401   .spoiler-input {
 402     position: relative;
 403     width: 100%;
 404   }
 405
 406   .spoiler-input {
 407     height: 0;
 408     transform-origin: bottom;
 409     opacity: 0;
 410
 411     &.spoiler-input--visible {
 412       height: 36px;
 413       margin-bottom: 11px;
 414       opacity: 1;
 415     }
 416   }
 417
 418   .autosuggest-textarea__textarea,
 419   .spoiler-input__input {
 420     display: block;
 421     box-sizing: border-box;
 422     width: 100%;
 423     margin: 0;
 424     color: $inverted-text-color;
 425     background: $simple-background-color;
 426     padding: 10px;
 427     font-family: inherit;
 428     font-size: 14px;
 429     resize: vertical;
 430     border: 0;
 431     outline: 0;
 432
 433     &::placeholder {
 434       color: $dark-text-color;
 435     }
 436
 437     &:focus {
 438       outline: 0;
 439     }
 440
 441     @media screen and (max-width: 600px) {
 442       font-size: 16px;
 443     }
 444   }
 445
 446   .spoiler-input__input {
 447     border-radius: 4px;
 448   }
 449
 450   .autosuggest-textarea__textarea {
 451     min-height: 100px;
 452     border-radius: 4px 4px 0 0;
 453     padding-bottom: 0;
 454     padding-right: 10px + 22px;
 455     resize: none;
 456     scrollbar-color: initial;
 457
 458     &::-webkit-scrollbar {
 459       all: unset;
 460     }
 461
 462     @media screen and (max-width: 600px) {
 463       height: 100px !important; // prevent auto-resize textarea
 464       resize: vertical;
 465     }
 466   }
 467
 468   .autosuggest-textarea__suggestions-wrapper {
 469     position: relative;
 470     height: 0;
 471   }
 472
 473   .autosuggest-textarea__suggestions {
 474     box-sizing: border-box;
 475     display: none;
 476     position: absolute;
 477     top: 100%;
 478     width: 100%;
 479     z-index: 99;
 480     box-shadow: 4px 4px 6px rgba($base-shadow-color, 0.4);
 481     background: $ui-secondary-color;
 482     border-radius: 0 0 4px 4px;
 483     color: $inverted-text-color;
 484     font-size: 14px;
 485     padding: 6px;
 486
 487     &.autosuggest-textarea__suggestions--visible {
 488       display: block;
 489     }
 490   }
 491
 492   .autosuggest-textarea__suggestions__item {
 493     padding: 10px;
 494     cursor: pointer;
 495     border-radius: 4px;
 496
 497     &:hover,
 498     &:focus,
 499     &:active,
 500     &.selected {
 501       background: darken($ui-secondary-color, 10%);
 502     }
 503   }
 504
 505   .autosuggest-account,
 506   .autosuggest-emoji,
 507   .autosuggest-hashtag {
 508     display: flex;
 509     flex-direction: row;
 510     align-items: center;
 511     justify-content: flex-start;
 512     line-height: 18px;
 513     font-size: 14px;
 514   }
 515
 516   .autosuggest-hashtag {
 517     justify-content: space-between;
 518
 519     &__name {
 520       flex: 1 1 auto;
 521       overflow: hidden;
 522       text-overflow: ellipsis;
 523       white-space: nowrap;
 524     }
 525
 526     strong {
 527       font-weight: 500;
 528     }
 529
 530     &__uses {
 531       flex: 0 0 auto;
 532       text-align: right;
 533       overflow: hidden;
 534       text-overflow: ellipsis;
 535       white-space: nowrap;
 536     }
 537   }
 538
 539   .autosuggest-account-icon,
 540   .autosuggest-emoji img {
 541     display: block;
 542     margin-right: 8px;
 543     width: 16px;
 544     height: 16px;
 545   }
 546
 547   .autosuggest-account .display-name__account {
 548     color: $lighter-text-color;
 549   }
 550
 551   .compose-form__modifiers {
 552     color: $inverted-text-color;
 553     font-family: inherit;
 554     font-size: 14px;
 555     background: $simple-background-color;
 556
 557     .compose-form__upload-wrapper {
 558       overflow: hidden;
 559     }
 560
 561     .compose-form__uploads-wrapper {
 562       display: flex;
 563       flex-direction: row;
 564       padding: 5px;
 565       flex-wrap: wrap;
 566     }
 567
 568     .compose-form__upload {
 569       flex: 1 1 0;
 570       min-width: 40%;
 571       margin: 5px;
 572
 573       &__actions {
 574         background: linear-gradient(180deg, rgba($base-shadow-color, 0.8) 0, rgba($base-shadow-color, 0.35) 80%, transparent);
 575         display: flex;
 576         align-items: flex-start;
 577         justify-content: space-between;
 578         opacity: 0;
 579         transition: opacity .1s ease;
 580
 581         .icon-button {
 582           flex: 0 1 auto;
 583           color: $secondary-text-color;
 584           font-size: 14px;
 585           font-weight: 500;
 586           padding: 10px;
 587           font-family: inherit;
 588
 589           &:hover,
 590           &:focus,
 591           &:active {
 592             color: lighten($secondary-text-color, 7%);
 593           }
 594         }
 595
 596         &.active {
 597           opacity: 1;
 598         }
 599       }
 600
 601       &-description {
 602         position: absolute;
 603         z-index: 2;
 604         bottom: 0;
 605         left: 0;
 606         right: 0;
 607         box-sizing: border-box;
 608         background: linear-gradient(0deg, rgba($base-shadow-color, 0.8) 0, rgba($base-shadow-color, 0.35) 80%, transparent);
 609         padding: 10px;
 610         opacity: 0;
 611         transition: opacity .1s ease;
 612
 613         textarea {
 614           background: transparent;
 615           color: $secondary-text-color;
 616           border: 0;
 617           padding: 0;
 618           margin: 0;
 619           width: 100%;
 620           font-family: inherit;
 621           font-size: 14px;
 622           font-weight: 500;
 623
 624           &:focus {
 625             color: $white;
 626           }
 627
 628           &::placeholder {
 629             opacity: 0.75;
 630             color: $secondary-text-color;
 631           }
 632         }
 633
 634         &.active {
 635           opacity: 1;
 636         }
 637       }
 638     }
 639
 640     .compose-form__upload-thumbnail {
 641       border-radius: 4px;
 642       background-color: $base-shadow-color;
 643       background-position: center;
 644       background-size: cover;
 645       background-repeat: no-repeat;
 646       height: 140px;
 647       width: 100%;
 648       overflow: hidden;
 649     }
 650   }
 651
 652   .compose-form__buttons-wrapper {
 653     padding: 10px;
 654     background: darken($simple-background-color, 8%);
 655     border-radius: 0 0 4px 4px;
 656     display: flex;
 657     justify-content: space-between;
 658     flex: 0 0 auto;
 659
 660     .compose-form__buttons {
 661       display: flex;
 662
 663       .compose-form__upload-button-icon {
 664         line-height: 27px;
 665       }
 666
 667       .compose-form__sensitive-button {
 668         display: none;
 669
 670         &.compose-form__sensitive-button--visible {
 671           display: block;
 672         }
 673
 674         .compose-form__sensitive-button__icon {
 675           line-height: 27px;
 676         }
 677       }
 678     }
 679
 680     .icon-button,
 681     .text-icon-button {
 682       box-sizing: content-box;
 683       padding: 0 3px;
 684     }
 685
 686     .character-counter__wrapper {
 687       align-self: center;
 688       margin-right: 4px;
 689     }
 690   }
 691
 692   .compose-form__publish {
 693     display: flex;
 694     justify-content: flex-end;
 695     min-width: 0;
 696     flex: 0 0 auto;
 697
 698     .compose-form__publish-button-wrapper {
 699       overflow: hidden;
 700       padding-top: 10px;
 701     }
 702   }
 703 }
 704
 705 .character-counter {
 706   cursor: default;
 707   font-family: $font-sans-serif, sans-serif;
 708   font-size: 14px;
 709   font-weight: 600;
 710   color: $lighter-text-color;
 711
 712   &.character-counter--over {
 713     color: $warning-red;
 714   }
 715 }
 716
 717 .no-reduce-motion .spoiler-input {
 718   transition: height 0.4s ease, opacity 0.4s ease;
 719 }
 720
 721 .emojione {
 722   font-size: inherit;
 723   vertical-align: middle;
 724   object-fit: contain;
 725   margin: -.2ex .15em .2ex;
 726   width: 16px;
 727   height: 16px;
 728
 729   img {
 730     width: auto;
 731   }
 732 }
 733
 734 .reply-indicator {
 735   border-radius: 4px;
 736   margin-bottom: 10px;
 737   background: $ui-primary-color;
 738   padding: 10px;
 739   min-height: 23px;
 740   overflow-y: auto;
 741   flex: 0 2 auto;
 742 }
 743
 744 .reply-indicator__header {
 745   margin-bottom: 5px;
 746   overflow: hidden;
 747 }
 748
 749 .reply-indicator__cancel {
 750   float: right;
 751   line-height: 24px;
 752 }
 753
 754 .reply-indicator__display-name {
 755   color: $inverted-text-color;
 756   display: block;
 757   max-width: 100%;
 758   line-height: 24px;
 759   overflow: hidden;
 760   padding-right: 25px;
 761   text-decoration: none;
 762 }
 763
 764 .reply-indicator__display-avatar {
 765   float: left;
 766   margin-right: 5px;
 767 }
 768
 769 .status__content--with-action {
 770   cursor: pointer;
 771 }
 772
 773 .status__content,
 774 .reply-indicator__content {
 775   position: relative;
 776   font-size: 15px;
 777   line-height: 20px;
 778   word-wrap: break-word;
 779   font-weight: 400;
 780   overflow: hidden;
 781   text-overflow: ellipsis;
 782   padding-top: 2px;
 783   color: $primary-text-color;
 784
 785   &:focus {
 786     outline: 0;
 787   }
 788
 789   &.status__content--with-spoiler {
 790     white-space: normal;
 791
 792     .status__content__text {
 793       white-space: pre-wrap;
 794     }
 795   }
 796
 797   .emojione {
 798     width: 20px;
 799     height: 20px;
 800     margin: -3px 0 0;
 801   }
 802
 803   p {
 804     margin-bottom: 20px;
 805     white-space: pre-wrap;
 806
 807     &:last-child {
 808       margin-bottom: 0;
 809     }
 810   }
 811
 812   a {
 813     color: $secondary-text-color;
 814     text-decoration: none;
 815
 816     &:hover {
 817       text-decoration: underline;
 818
 819       .fa {
 820         color: lighten($dark-text-color, 7%);
 821       }
 822     }
 823
 824     &.mention {
 825       &:hover {
 826         text-decoration: none;
 827
 828         span {
 829           text-decoration: underline;
 830         }
 831       }
 832     }
 833
 834     .fa {
 835       color: $dark-text-color;
 836     }
 837   }
 838
 839   a.unhandled-link {
 840     color: lighten($ui-highlight-color, 8%);
 841   }
 842
 843   .status__content__spoiler-link {
 844     background: $action-button-color;
 845
 846     &:hover {
 847       background: lighten($action-button-color, 7%);
 848       text-decoration: none;
 849     }
 850
 851     &::-moz-focus-inner {
 852       border: 0;
 853     }
 854
 855     &::-moz-focus-inner,
 856     &:focus,
 857     &:active {
 858       outline: 0 !important;
 859     }
 860   }
 861
 862   .status__content__text {
 863     display: none;
 864
 865     &.status__content__text--visible {
 866       display: block;
 867     }
 868   }
 869 }
 870
 871 .announcements__item__content {
 872   word-wrap: break-word;
 873   overflow-y: auto;
 874
 875   .emojione {
 876     width: 20px;
 877     height: 20px;
 878     margin: -3px 0 0;
 879   }
 880
 881   p {
 882     margin-bottom: 10px;
 883     white-space: pre-wrap;
 884
 885     &:last-child {
 886       margin-bottom: 0;
 887     }
 888   }
 889
 890   a {
 891     color: $secondary-text-color;
 892     text-decoration: none;
 893
 894     &:hover {
 895       text-decoration: underline;
 896     }
 897
 898     &.mention {
 899       &:hover {
 900         text-decoration: none;
 901
 902         span {
 903           text-decoration: underline;
 904         }
 905       }
 906     }
 907
 908     &.unhandled-link {
 909       color: lighten($ui-highlight-color, 8%);
 910     }
 911   }
 912 }
 913
 914 .status__content.status__content--collapsed {
 915   max-height: 20px * 15; // 15 lines is roughly above 500 characters
 916 }
 917
 918 .status__content__read-more-button {
 919   display: block;
 920   font-size: 15px;
 921   line-height: 20px;
 922   color: lighten($ui-highlight-color, 8%);
 923   border: 0;
 924   background: transparent;
 925   padding: 0;
 926   padding-top: 8px;
 927   text-decoration: none;
 928
 929   &:hover,
 930   &:active {
 931     text-decoration: underline;
 932   }
 933 }
 934
 935 .status__content__spoiler-link {
 936   display: inline-block;
 937   border-radius: 2px;
 938   background: transparent;
 939   border: 0;
 940   color: $inverted-text-color;
 941   font-weight: 700;
 942   font-size: 11px;
 943   padding: 0 6px;
 944   text-transform: uppercase;
 945   line-height: 20px;
 946   cursor: pointer;
 947   vertical-align: middle;
 948 }
 949
 950 .status__wrapper--filtered {
 951   color: $dark-text-color;
 952   border: 0;
 953   font-size: inherit;
 954   text-align: center;
 955   line-height: inherit;
 956   margin: 0;
 957   padding: 15px;
 958   box-sizing: border-box;
 959   width: 100%;
 960   clear: both;
 961   border-bottom: 1px solid lighten($ui-base-color, 8%);
 962 }
 963
 964 .status__prepend-icon-wrapper {
 965   left: -26px;
 966   position: absolute;
 967 }
 968
 969 .focusable {
 970   &:focus {
 971     outline: 0;
 972     background: lighten($ui-base-color, 4%);
 973
 974     .status.status-direct {
 975       background: lighten($ui-base-color, 12%);
 976
 977       &.muted {
 978         background: transparent;
 979       }
 980     }
 981
 982     .detailed-status,
 983     .detailed-status__action-bar {
 984       background: lighten($ui-base-color, 8%);
 985     }
 986   }
 987 }
 988
 989 .status {
 990   padding: 8px 10px;
 991   padding-left: 68px;
 992   position: relative;
 993   min-height: 54px;
 994   border-bottom: 1px solid lighten($ui-base-color, 8%);
 995   cursor: default;
 996
 997   @supports (-ms-overflow-style: -ms-autohiding-scrollbar) {
 998     // Add margin to avoid Edge auto-hiding scrollbar appearing over content.
 999     // On Edge 16 this is 16px and Edge <=15 it's 12px, so aim for 16px.
1000     padding-right: 26px; // 10px + 16px
1001   }
1002
1003   @keyframes fade {
1004     0% { opacity: 0; }
1005     100% { opacity: 1; }
1006   }
1007
1008   opacity: 1;
1009   animation: fade 150ms linear;
1010
1011   .video-player,
1012   .audio-player {
1013     margin-top: 8px;
1014   }
1015
1016   &.status-direct:not(.read) {
1017     background: lighten($ui-base-color, 8%);
1018     border-bottom-color: lighten($ui-base-color, 12%);
1019   }
1020
1021   &.light {
1022     .status__relative-time {
1023       color: $light-text-color;
1024     }
1025
1026     .status__display-name {
1027       color: $inverted-text-color;
1028     }
1029
1030     .display-name {
1031       color: $light-text-color;
1032
1033       strong {
1034         color: $inverted-text-color;
1035       }
1036     }
1037
1038     .status__content {
1039       color: $inverted-text-color;
1040
1041       a {
1042         color: $highlight-text-color;
1043       }
1044
1045       a.status__content__spoiler-link {
1046         color: $primary-text-color;
1047         background: $ui-primary-color;
1048
1049         &:hover {
1050           background: lighten($ui-primary-color, 8%);
1051         }
1052       }
1053     }
1054   }
1055 }
1056
1057 .notification-favourite {
1058   .status.status-direct {
1059     background: transparent;
1060
1061     .icon-button.disabled {
1062       color: lighten($action-button-color, 13%);
1063     }
1064   }
1065 }
1066
1067 .status__relative-time,
1068 .notification__relative_time {
1069   color: $dark-text-color;
1070   float: right;
1071   font-size: 14px;
1072 }
1073
1074 .status__display-name {
1075   color: $dark-text-color;
1076 }
1077
1078 .status__info .status__display-name {
1079   display: block;
1080   max-width: 100%;
1081   padding-right: 25px;
1082 }
1083
1084 .status__info {
1085   font-size: 15px;
1086 }
1087
1088 .status-check-box {
1089   border-bottom: 1px solid $ui-secondary-color;
1090   display: flex;
1091
1092   .status-check-box__status {
1093     margin: 10px 0 10px 10px;
1094     flex: 1;
1095     overflow: hidden;
1096
1097     .media-gallery {
1098       max-width: 250px;
1099     }
1100
1101     .status__content {
1102       padding: 0;
1103       white-space: normal;
1104     }
1105
1106     .video-player,
1107     .audio-player {
1108       margin-top: 8px;
1109       max-width: 250px;
1110     }
1111
1112     .media-gallery__item-thumbnail {
1113       cursor: default;
1114     }
1115   }
1116 }
1117
1118 .status-check-box-toggle {
1119   align-items: center;
1120   display: flex;
1121   flex: 0 0 auto;
1122   justify-content: center;
1123   padding: 10px;
1124 }
1125
1126 .status__prepend {
1127   margin-left: 68px;
1128   color: $dark-text-color;
1129   padding: 8px 0;
1130   padding-bottom: 2px;
1131   font-size: 14px;
1132   position: relative;
1133
1134   .status__display-name strong {
1135     color: $dark-text-color;
1136   }
1137
1138   > span {
1139     display: block;
1140     overflow: hidden;
1141     text-overflow: ellipsis;
1142   }
1143 }
1144
1145 .status__action-bar {
1146   align-items: center;
1147   display: flex;
1148   margin-top: 8px;
1149
1150   &__counter {
1151     display: inline-flex;
1152     margin-right: 11px;
1153     align-items: center;
1154
1155     .status__action-bar-button {
1156       margin-right: 4px;
1157     }
1158
1159     &__label {
1160       display: inline-block;
1161       width: 14px;
1162       font-size: 12px;
1163       font-weight: 500;
1164       color: $action-button-color;
1165     }
1166   }
1167 }
1168
1169 .status__action-bar-button {
1170   margin-right: 18px;
1171 }
1172
1173 .status__action-bar-dropdown {
1174   height: 23.15px;
1175   width: 23.15px;
1176 }
1177
1178 .detailed-status__action-bar-dropdown {
1179   flex: 1 1 auto;
1180   display: flex;
1181   align-items: center;
1182   justify-content: center;
1183   position: relative;
1184 }
1185
1186 .detailed-status {
1187   background: lighten($ui-base-color, 4%);
1188   padding: 14px 10px;
1189
1190   &--flex {
1191     display: flex;
1192     flex-wrap: wrap;
1193     justify-content: space-between;
1194     align-items: flex-start;
1195
1196     .status__content,
1197     .detailed-status__meta {
1198       flex: 100%;
1199     }
1200   }
1201
1202   .status__content {
1203     font-size: 19px;
1204     line-height: 24px;
1205
1206     .emojione {
1207       width: 24px;
1208       height: 24px;
1209       margin: -1px 0 0;
1210     }
1211
1212     .status__content__spoiler-link {
1213       line-height: 24px;
1214       margin: -1px 0 0;
1215     }
1216   }
1217
1218   .video-player,
1219   .audio-player {
1220     margin-top: 8px;
1221   }
1222 }
1223
1224 .detailed-status__meta {
1225   margin-top: 15px;
1226   color: $dark-text-color;
1227   font-size: 14px;
1228   line-height: 18px;
1229 }
1230
1231 .detailed-status__action-bar {
1232   background: lighten($ui-base-color, 4%);
1233   border-top: 1px solid lighten($ui-base-color, 8%);
1234   border-bottom: 1px solid lighten($ui-base-color, 8%);
1235   display: flex;
1236   flex-direction: row;
1237   padding: 10px 0;
1238 }
1239
1240 .detailed-status__link {
1241   color: inherit;
1242   text-decoration: none;
1243 }
1244
1245 .detailed-status__favorites,
1246 .detailed-status__reblogs {
1247   display: inline-block;
1248   font-weight: 500;
1249   font-size: 12px;
1250   margin-left: 6px;
1251 }
1252
1253 .reply-indicator__content {
1254   color: $inverted-text-color;
1255   font-size: 14px;
1256
1257   a {
1258     color: $lighter-text-color;
1259   }
1260 }
1261
1262 .domain {
1263   padding: 10px;
1264   border-bottom: 1px solid lighten($ui-base-color, 8%);
1265
1266   .domain__domain-name {
1267     flex: 1 1 auto;
1268     display: block;
1269     color: $primary-text-color;
1270     text-decoration: none;
1271     font-size: 14px;
1272     font-weight: 500;
1273   }
1274 }
1275
1276 .domain__wrapper {
1277   display: flex;
1278 }
1279
1280 .domain_buttons {
1281   height: 18px;
1282   padding: 10px;
1283   white-space: nowrap;
1284 }
1285
1286 .account {
1287   padding: 10px;
1288   border-bottom: 1px solid lighten($ui-base-color, 8%);
1289
1290   &.compact {
1291     padding: 0;
1292     border-bottom: 0;
1293
1294     .account__avatar-wrapper {
1295       margin-left: 0;
1296     }
1297   }
1298
1299   .account__display-name {
1300     flex: 1 1 auto;
1301     display: block;
1302     color: $darker-text-color;
1303     overflow: hidden;
1304     text-decoration: none;
1305     font-size: 14px;
1306   }
1307 }
1308
1309 .account__wrapper {
1310   display: flex;
1311 }
1312
1313 .account__avatar-wrapper {
1314   float: left;
1315   margin-left: 12px;
1316   margin-right: 12px;
1317 }
1318
1319 .account__avatar {
1320   @include avatar-radius;
1321   display: block;
1322   position: relative;
1323
1324   width: 36px;
1325   height: 36px;
1326   background-size: 36px 36px;
1327
1328   &-inline {
1329     display: inline-block;
1330     vertical-align: middle;
1331     margin-right: 5px;
1332   }
1333
1334   &-composite {
1335     @include avatar-radius;
1336     border-radius: 50%;
1337     overflow: hidden;
1338     position: relative;
1339
1340     & > div {
1341       float: left;
1342       position: relative;
1343       box-sizing: border-box;
1344     }
1345
1346     &__label {
1347       display: block;
1348       position: absolute;
1349       top: 50%;
1350       left: 50%;
1351       transform: translate(-50%, -50%);
1352       color: $primary-text-color;
1353       text-shadow: 1px 1px 2px $base-shadow-color;
1354       font-weight: 700;
1355       font-size: 15px;
1356     }
1357   }
1358 }
1359
1360 a .account__avatar {
1361   cursor: pointer;
1362 }
1363
1364 .account__avatar-overlay {
1365   @include avatar-size(48px);
1366
1367   &-base {
1368     @include avatar-radius;
1369     @include avatar-size(36px);
1370
1371     img {
1372       @include avatar-radius;
1373       width: 100%;
1374       height: 100%;
1375     }
1376   }
1377
1378   &-overlay {
1379     @include avatar-radius;
1380     @include avatar-size(24px);
1381
1382     position: absolute;
1383     bottom: 0;
1384     right: 0;
1385     z-index: 1;
1386
1387     img {
1388       @include avatar-radius;
1389       width: 100%;
1390       height: 100%;
1391     }
1392   }
1393 }
1394
1395 .account__relationship {
1396   height: 18px;
1397   padding: 10px;
1398   white-space: nowrap;
1399 }
1400
1401 .account__disclaimer {
1402   padding: 10px;
1403   border-top: 1px solid lighten($ui-base-color, 8%);
1404   color: $dark-text-color;
1405
1406   strong {
1407     font-weight: 500;
1408
1409     @each $lang in $cjk-langs {
1410       &:lang(#{$lang}) {
1411         font-weight: 700;
1412       }
1413     }
1414   }
1415
1416   a {
1417     font-weight: 500;
1418     color: inherit;
1419     text-decoration: underline;
1420
1421     &:hover,
1422     &:focus,
1423     &:active {
1424       text-decoration: none;
1425     }
1426   }
1427 }
1428
1429 .account__action-bar {
1430   border-top: 1px solid lighten($ui-base-color, 8%);
1431   border-bottom: 1px solid lighten($ui-base-color, 8%);
1432   line-height: 36px;
1433   overflow: hidden;
1434   flex: 0 0 auto;
1435   display: flex;
1436 }
1437
1438 .account__action-bar-dropdown {
1439   padding: 10px;
1440
1441   .icon-button {
1442     vertical-align: middle;
1443   }
1444
1445   .dropdown--active {
1446     .dropdown__content.dropdown__right {
1447       left: 6px;
1448       right: initial;
1449     }
1450
1451     &::after {
1452       bottom: initial;
1453       margin-left: 11px;
1454       margin-top: -7px;
1455       right: initial;
1456     }
1457   }
1458 }
1459
1460 .account__action-bar-links {
1461   display: flex;
1462   flex: 1 1 auto;
1463   line-height: 18px;
1464   text-align: center;
1465 }
1466
1467 .account__action-bar__tab {
1468   text-decoration: none;
1469   overflow: hidden;
1470   flex: 0 1 100%;
1471   border-right: 1px solid lighten($ui-base-color, 8%);
1472   padding: 10px 0;
1473   border-bottom: 4px solid transparent;
1474
1475   &.active {
1476     border-bottom: 4px solid $ui-highlight-color;
1477   }
1478
1479   & > span {
1480     display: block;
1481     text-transform: uppercase;
1482     font-size: 11px;
1483     color: $darker-text-color;
1484   }
1485
1486   strong {
1487     display: block;
1488     font-size: 15px;
1489     font-weight: 500;
1490     color: $primary-text-color;
1491
1492     @each $lang in $cjk-langs {
1493       &:lang(#{$lang}) {
1494         font-weight: 700;
1495       }
1496     }
1497   }
1498 }
1499
1500 .account-authorize {
1501   padding: 14px 10px;
1502
1503   .detailed-status__display-name {
1504     display: block;
1505     margin-bottom: 15px;
1506     overflow: hidden;
1507   }
1508 }
1509
1510 .account-authorize__avatar {
1511   float: left;
1512   margin-right: 10px;
1513 }
1514
1515 .status__display-name,
1516 .status__relative-time,
1517 .detailed-status__display-name,
1518 .detailed-status__datetime,
1519 .detailed-status__application,
1520 .account__display-name {
1521   text-decoration: none;
1522 }
1523
1524 .status__display-name,
1525 .account__display-name {
1526   strong {
1527     color: $primary-text-color;
1528   }
1529 }
1530
1531 .muted {
1532   .emojione {
1533     opacity: 0.5;
1534   }
1535 }
1536
1537 .status__display-name,
1538 .reply-indicator__display-name,
1539 .detailed-status__display-name,
1540 a.account__display-name {
1541   &:hover strong {
1542     text-decoration: underline;
1543   }
1544 }
1545
1546 .account__display-name strong {
1547   display: block;
1548   overflow: hidden;
1549   text-overflow: ellipsis;
1550 }
1551
1552 .detailed-status__application,
1553 .detailed-status__datetime {
1554   color: inherit;
1555 }
1556
1557 .detailed-status .button.logo-button {
1558   margin-bottom: 15px;
1559 }
1560
1561 .detailed-status__display-name {
1562   color: $secondary-text-color;
1563   display: block;
1564   line-height: 24px;
1565   margin-bottom: 15px;
1566   overflow: hidden;
1567
1568   strong,
1569   span {
1570     display: block;
1571     text-overflow: ellipsis;
1572     overflow: hidden;
1573   }
1574
1575   strong {
1576     font-size: 16px;
1577     color: $primary-text-color;
1578   }
1579 }
1580
1581 .detailed-status__display-avatar {
1582   float: left;
1583   margin-right: 10px;
1584 }
1585
1586 .status__avatar {
1587   height: 48px;
1588   left: 10px;
1589   position: absolute;
1590   top: 10px;
1591   width: 48px;
1592 }
1593
1594 .status__expand {
1595   width: 68px;
1596   position: absolute;
1597   left: 0;
1598   top: 0;
1599   height: 100%;
1600   cursor: pointer;
1601 }
1602
1603 .muted {
1604   .status__content,
1605   .status__content p,
1606   .status__content a {
1607     color: $dark-text-color;
1608   }
1609
1610   .status__display-name strong {
1611     color: $dark-text-color;
1612   }
1613
1614   .status__avatar {
1615     opacity: 0.5;
1616   }
1617
1618   a.status__content__spoiler-link {
1619     background: $ui-base-lighter-color;
1620     color: $inverted-text-color;
1621
1622     &:hover {
1623       background: lighten($ui-base-lighter-color, 7%);
1624       text-decoration: none;
1625     }
1626   }
1627 }
1628
1629 .notification__message {
1630   margin: 0 10px 0 68px;
1631   padding: 8px 0 0;
1632   cursor: default;
1633   color: $darker-text-color;
1634   font-size: 15px;
1635   line-height: 22px;
1636   position: relative;
1637
1638   .fa {
1639     color: $highlight-text-color;
1640   }
1641
1642   > span {
1643     display: inline;
1644     overflow: hidden;
1645     text-overflow: ellipsis;
1646   }
1647 }
1648
1649 .notification__favourite-icon-wrapper {
1650   left: -26px;
1651   position: absolute;
1652
1653   .star-icon {
1654     color: $gold-star;
1655   }
1656 }
1657
1658 .star-icon.active {
1659   color: $gold-star;
1660 }
1661
1662 .bookmark-icon.active {
1663   color: $red-bookmark;
1664 }
1665
1666 .no-reduce-motion .icon-button.star-icon {
1667   &.activate {
1668     & > .fa-star {
1669       animation: spring-rotate-in 1s linear;
1670     }
1671   }
1672
1673   &.deactivate {
1674     & > .fa-star {
1675       animation: spring-rotate-out 1s linear;
1676     }
1677   }
1678 }
1679
1680 .notification__display-name {
1681   color: inherit;
1682   font-weight: 500;
1683   text-decoration: none;
1684
1685   &:hover {
1686     color: $primary-text-color;
1687     text-decoration: underline;
1688   }
1689 }
1690
1691 .notification__relative_time {
1692   float: right;
1693 }
1694
1695 .display-name {
1696   display: block;
1697   max-width: 100%;
1698   overflow: hidden;
1699   text-overflow: ellipsis;
1700   white-space: nowrap;
1701 }
1702
1703 .display-name__html {
1704   font-weight: 500;
1705 }
1706
1707 .display-name__account {
1708   font-size: 14px;
1709 }
1710
1711 .status__relative-time,
1712 .detailed-status__datetime {
1713   &:hover {
1714     text-decoration: underline;
1715   }
1716 }
1717
1718 .image-loader {
1719   position: relative;
1720   width: 100%;
1721   height: 100%;
1722   display: flex;
1723   align-items: center;
1724   justify-content: center;
1725   flex-direction: column;
1726
1727   .image-loader__preview-canvas {
1728     max-width: $media-modal-media-max-width;
1729     max-height: $media-modal-media-max-height;
1730     background: url('../images/void.png') repeat;
1731     object-fit: contain;
1732   }
1733
1734   .loading-bar {
1735     position: relative;
1736   }
1737
1738   &.image-loader--amorphous .image-loader__preview-canvas {
1739     display: none;
1740   }
1741 }
1742
1743 .zoomable-image {
1744   position: relative;
1745   width: 100%;
1746   height: 100%;
1747   display: flex;
1748   align-items: center;
1749   justify-content: center;
1750
1751   img {
1752     max-width: $media-modal-media-max-width;
1753     max-height: $media-modal-media-max-height;
1754     width: auto;
1755     height: auto;
1756     object-fit: contain;
1757   }
1758 }
1759
1760 .navigation-bar {
1761   padding: 10px;
1762   display: flex;
1763   align-items: center;
1764   flex-shrink: 0;
1765   cursor: default;
1766   color: $darker-text-color;
1767
1768   strong {
1769     color: $secondary-text-color;
1770   }
1771
1772   a {
1773     color: inherit;
1774   }
1775
1776   .permalink {
1777     text-decoration: none;
1778   }
1779
1780   .navigation-bar__actions {
1781     position: relative;
1782
1783     .icon-button.close {
1784       position: absolute;
1785       pointer-events: none;
1786       transform: scale(0, 1) translate(-100%, 0);
1787       opacity: 0;
1788     }
1789
1790     .compose__action-bar .icon-button {
1791       pointer-events: auto;
1792       transform: scale(1, 1) translate(0, 0);
1793       opacity: 1;
1794     }
1795   }
1796 }
1797
1798 .navigation-bar__profile {
1799   flex: 1 1 auto;
1800   margin-left: 8px;
1801   line-height: 20px;
1802   margin-top: -1px;
1803   overflow: hidden;
1804 }
1805
1806 .navigation-bar__profile-account {
1807   display: block;
1808   font-weight: 500;
1809   overflow: hidden;
1810   text-overflow: ellipsis;
1811 }
1812
1813 .navigation-bar__profile-edit {
1814   color: inherit;
1815   text-decoration: none;
1816 }
1817
1818 .dropdown {
1819   display: inline-block;
1820 }
1821
1822 .dropdown__content {
1823   display: none;
1824   position: absolute;
1825 }
1826
1827 .dropdown-menu__separator {
1828   border-bottom: 1px solid darken($ui-secondary-color, 8%);
1829   margin: 5px 7px 6px;
1830   height: 0;
1831 }
1832
1833 .dropdown-menu {
1834   background: $ui-secondary-color;
1835   padding: 4px 0;
1836   border-radius: 4px;
1837   box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
1838   z-index: 9999;
1839
1840   ul {
1841     list-style: none;
1842   }
1843
1844   &.left {
1845     transform-origin: 100% 50%;
1846   }
1847
1848   &.top {
1849     transform-origin: 50% 100%;
1850   }
1851
1852   &.bottom {
1853     transform-origin: 50% 0;
1854   }
1855
1856   &.right {
1857     transform-origin: 0 50%;
1858   }
1859 }
1860
1861 .dropdown-menu__arrow {
1862   position: absolute;
1863   width: 0;
1864   height: 0;
1865   border: 0 solid transparent;
1866
1867   &.left {
1868     right: -5px;
1869     margin-top: -5px;
1870     border-width: 5px 0 5px 5px;
1871     border-left-color: $ui-secondary-color;
1872   }
1873
1874   &.top {
1875     bottom: -5px;
1876     margin-left: -7px;
1877     border-width: 5px 7px 0;
1878     border-top-color: $ui-secondary-color;
1879   }
1880
1881   &.bottom {
1882     top: -5px;
1883     margin-left: -7px;
1884     border-width: 0 7px 5px;
1885     border-bottom-color: $ui-secondary-color;
1886   }
1887
1888   &.right {
1889     left: -5px;
1890     margin-top: -5px;
1891     border-width: 5px 5px 5px 0;
1892     border-right-color: $ui-secondary-color;
1893   }
1894 }
1895
1896 .dropdown-menu__item {
1897   a {
1898     font-size: 13px;
1899     line-height: 18px;
1900     display: block;
1901     padding: 4px 14px;
1902     box-sizing: border-box;
1903     text-decoration: none;
1904     background: $ui-secondary-color;
1905     color: $inverted-text-color;
1906     overflow: hidden;
1907     text-overflow: ellipsis;
1908     white-space: nowrap;
1909
1910     &:focus,
1911     &:hover,
1912     &:active {
1913       background: $ui-highlight-color;
1914       color: $secondary-text-color;
1915       outline: 0;
1916     }
1917   }
1918 }
1919
1920 .dropdown--active .dropdown__content {
1921   display: block;
1922   line-height: 18px;
1923   max-width: 311px;
1924   right: 0;
1925   text-align: left;
1926   z-index: 9999;
1927
1928   & > ul {
1929     list-style: none;
1930     background: $ui-secondary-color;
1931     padding: 4px 0;
1932     border-radius: 4px;
1933     box-shadow: 0 0 15px rgba($base-shadow-color, 0.4);
1934     min-width: 140px;
1935     position: relative;
1936   }
1937
1938   &.dropdown__right {
1939     right: 0;
1940   }
1941
1942   &.dropdown__left {
1943     & > ul {
1944       left: -98px;
1945     }
1946   }
1947
1948   & > ul > li > a {
1949     font-size: 13px;
1950     line-height: 18px;
1951     display: block;
1952     padding: 4px 14px;
1953     box-sizing: border-box;
1954     text-decoration: none;
1955     background: $ui-secondary-color;
1956     color: $inverted-text-color;
1957     overflow: hidden;
1958     text-overflow: ellipsis;
1959     white-space: nowrap;
1960
1961     &:focus {
1962       outline: 0;
1963     }
1964
1965     &:hover {
1966       background: $ui-highlight-color;
1967       color: $secondary-text-color;
1968     }
1969   }
1970 }
1971
1972 .dropdown__icon {
1973   vertical-align: middle;
1974 }
1975
1976 .columns-area {
1977   display: flex;
1978   flex: 1 1 auto;
1979   flex-direction: row;
1980   justify-content: flex-start;
1981   overflow-x: auto;
1982   position: relative;
1983
1984   &.unscrollable {
1985     overflow-x: hidden;
1986   }
1987
1988   &__panels {
1989     display: flex;
1990     justify-content: center;
1991     width: 100%;
1992     height: 100%;
1993     min-height: 100vh;
1994
1995     &__pane {
1996       height: 100%;
1997       overflow: hidden;
1998       pointer-events: none;
1999       display: flex;
2000       justify-content: flex-end;
2001       min-width: 285px;
2002
2003       &--start {
2004         justify-content: flex-start;
2005       }
2006
2007       &__inner {
2008         position: fixed;
2009         width: 285px;
2010         pointer-events: auto;
2011         height: 100%;
2012       }
2013     }
2014
2015     &__main {
2016       box-sizing: border-box;
2017       width: 100%;
2018       max-width: 600px;
2019       flex: 0 0 auto;
2020       display: flex;
2021       flex-direction: column;
2022
2023       @media screen and (min-width: $no-gap-breakpoint) {
2024         padding: 0 10px;
2025       }
2026     }
2027   }
2028 }
2029
2030 .tabs-bar__wrapper {
2031   background: darken($ui-base-color, 8%);
2032   position: sticky;
2033   top: 0;
2034   z-index: 2;
2035   padding-top: 0;
2036
2037   @media screen and (min-width: $no-gap-breakpoint) {
2038     padding-top: 10px;
2039   }
2040
2041   .tabs-bar {
2042     margin-bottom: 0;
2043
2044     @media screen and (min-width: $no-gap-breakpoint) {
2045       margin-bottom: 10px;
2046     }
2047   }
2048 }
2049
2050 .react-swipeable-view-container {
2051   &,
2052   .columns-area,
2053   .drawer,
2054   .column {
2055     height: 100%;
2056   }
2057 }
2058
2059 .react-swipeable-view-container > * {
2060   display: flex;
2061   align-items: center;
2062   justify-content: center;
2063   height: 100%;
2064 }
2065
2066 .column {
2067   width: 350px;
2068   position: relative;
2069   box-sizing: border-box;
2070   display: flex;
2071   flex-direction: column;
2072
2073   > .scrollable {
2074     background: $ui-base-color;
2075   }
2076 }
2077
2078 .ui {
2079   flex: 0 0 auto;
2080   display: flex;
2081   flex-direction: column;
2082   width: 100%;
2083   height: 100%;
2084 }
2085
2086 .drawer {
2087   width: 300px;
2088   box-sizing: border-box;
2089   display: flex;
2090   flex-direction: column;
2091   overflow-y: hidden;
2092 }
2093
2094 .drawer__tab {
2095   display: block;
2096   flex: 1 1 auto;
2097   padding: 15px 5px 13px;
2098   color: $darker-text-color;
2099   text-decoration: none;
2100   text-align: center;
2101   font-size: 16px;
2102   border-bottom: 2px solid transparent;
2103 }
2104
2105 .column,
2106 .drawer {
2107   flex: 1 1 100%;
2108   overflow: hidden;
2109 }
2110
2111 @media screen and (min-width: 631px) {
2112   .columns-area {
2113     padding: 0;
2114   }
2115
2116   .column,
2117   .drawer {
2118     flex: 0 0 auto;
2119     padding: 10px;
2120     padding-left: 5px;
2121     padding-right: 5px;
2122
2123     &:first-child {
2124       padding-left: 10px;
2125     }
2126
2127     &:last-child {
2128       padding-right: 10px;
2129     }
2130   }
2131
2132   .columns-area > div {
2133     .column,
2134     .drawer {
2135       padding-left: 5px;
2136       padding-right: 5px;
2137     }
2138   }
2139 }
2140
2141 .tabs-bar {
2142   box-sizing: border-box;
2143   display: flex;
2144   background: lighten($ui-base-color, 8%);
2145   flex: 0 0 auto;
2146   overflow-y: auto;
2147 }
2148
2149 .tabs-bar__link {
2150   display: block;
2151   flex: 1 1 auto;
2152   padding: 15px 10px;
2153   padding-bottom: 13px;
2154   color: $primary-text-color;
2155   text-decoration: none;
2156   text-align: center;
2157   font-size: 14px;
2158   font-weight: 500;
2159   border-bottom: 2px solid lighten($ui-base-color, 8%);
2160   transition: all 50ms linear;
2161   transition-property: border-bottom, background, color;
2162
2163   .fa {
2164     font-weight: 400;
2165     font-size: 16px;
2166   }
2167
2168   &:hover,
2169   &:focus,
2170   &:active {
2171     @media screen and (min-width: 631px) {
2172       background: lighten($ui-base-color, 14%);
2173       border-bottom-color: lighten($ui-base-color, 14%);
2174     }
2175   }
2176
2177   &.active {
2178     border-bottom: 2px solid $highlight-text-color;
2179     color: $highlight-text-color;
2180   }
2181
2182   span {
2183     margin-left: 5px;
2184     display: none;
2185   }
2186 }
2187
2188 @media screen and (min-width: 600px) {
2189   .tabs-bar__link {
2190     span {
2191       display: inline;
2192     }
2193   }
2194 }
2195
2196 .columns-area--mobile {
2197   flex-direction: column;
2198   width: 100%;
2199   height: 100%;
2200   margin: 0 auto;
2201
2202   .column,
2203   .drawer {
2204     width: 100%;
2205     height: 100%;
2206     padding: 0;
2207   }
2208
2209   .directory__list {
2210     display: grid;
2211     grid-gap: 10px;
2212     grid-template-columns: minmax(0, 50%) minmax(0, 50%);
2213
2214     @media screen and (max-width: $no-gap-breakpoint) {
2215       display: block;
2216     }
2217   }
2218
2219   .directory__card {
2220     margin-bottom: 0;
2221   }
2222
2223   .filter-form {
2224     display: flex;
2225   }
2226
2227   .autosuggest-textarea__textarea {
2228     font-size: 16px;
2229   }
2230
2231   .search__input {
2232     line-height: 18px;
2233     font-size: 16px;
2234     padding: 15px;
2235     padding-right: 30px;
2236   }
2237
2238   .search__icon .fa {
2239     top: 15px;
2240   }
2241
2242   .scrollable {
2243     overflow: visible;
2244
2245     @supports(display: grid) {
2246       contain: content;
2247     }
2248   }
2249
2250   @media screen and (min-width: $no-gap-breakpoint) {
2251     padding: 10px 0;
2252     padding-top: 0;
2253   }
2254
2255   @media screen and (min-width: 630px) {
2256     .detailed-status {
2257       padding: 15px;
2258
2259       .media-gallery,
2260       .video-player,
2261       .audio-player {
2262         margin-top: 15px;
2263       }
2264     }
2265
2266     .account__header__bar {
2267       padding: 5px 10px;
2268     }
2269
2270     .navigation-bar,
2271     .compose-form {
2272       padding: 15px;
2273     }
2274
2275     .compose-form .compose-form__publish .compose-form__publish-button-wrapper {
2276       padding-top: 15px;
2277     }
2278
2279     .status {
2280       padding: 15px 15px 15px (48px + 15px * 2);
2281       min-height: 48px + 2px;
2282
2283       &__avatar {
2284         left: 15px;
2285         top: 17px;
2286       }
2287
2288       &__content {
2289         padding-top: 5px;
2290       }
2291
2292       &__prepend {
2293         margin-left: 48px + 15px * 2;
2294         padding-top: 15px;
2295       }
2296
2297       &__prepend-icon-wrapper {
2298         left: -32px;
2299       }
2300
2301       .media-gallery,
2302       &__action-bar,
2303       .video-player,
2304       .audio-player {
2305         margin-top: 10px;
2306       }
2307     }
2308
2309     .account {
2310       padding: 15px 10px;
2311
2312       &__header__bio {
2313         margin: 0 -10px;
2314       }
2315     }
2316
2317     .notification {
2318       &__message {
2319         margin-left: 48px + 15px * 2;
2320         padding-top: 15px;
2321       }
2322
2323       &__favourite-icon-wrapper {
2324         left: -32px;
2325       }
2326
2327       .status {
2328         padding-top: 8px;
2329       }
2330
2331       .account {
2332         padding-top: 8px;
2333       }
2334
2335       .account__avatar-wrapper {
2336         margin-left: 17px;
2337         margin-right: 15px;
2338       }
2339     }
2340   }
2341 }
2342
2343 .floating-action-button {
2344   position: fixed;
2345   display: flex;
2346   justify-content: center;
2347   align-items: center;
2348   width: 3.9375rem;
2349   height: 3.9375rem;
2350   bottom: 1.3125rem;
2351   right: 1.3125rem;
2352   background: darken($ui-highlight-color, 3%);
2353   color: $white;
2354   border-radius: 50%;
2355   font-size: 21px;
2356   line-height: 21px;
2357   text-decoration: none;
2358   box-shadow: 2px 3px 9px rgba($base-shadow-color, 0.4);
2359
2360   &:hover,
2361   &:focus,
2362   &:active {
2363     background: lighten($ui-highlight-color, 7%);
2364   }
2365 }
2366
2367 @media screen and (min-width: $no-gap-breakpoint) {
2368   .tabs-bar {
2369     width: 100%;
2370   }
2371
2372   .react-swipeable-view-container .columns-area--mobile {
2373     height: calc(100% - 10px) !important;
2374   }
2375
2376   .getting-started__wrapper,
2377   .search {
2378     margin-bottom: 10px;
2379   }
2380 }
2381
2382 @media screen and (max-width: 600px + (285px * 1) + (10px * 1)) {
2383   .columns-area__panels__pane--compositional {
2384     display: none;
2385   }
2386 }
2387
2388 @media screen and (min-width: 600px + (285px * 1) + (10px * 1)) {
2389   .floating-action-button,
2390   .tabs-bar__link.optional {
2391     display: none;
2392   }
2393
2394   .search-page .search {
2395     display: none;
2396   }
2397 }
2398
2399 @media screen and (max-width: 600px + (285px * 2) + (10px * 2)) {
2400   .columns-area__panels__pane--navigational {
2401     display: none;
2402   }
2403 }
2404
2405 @media screen and (min-width: 600px + (285px * 2) + (10px * 2)) {
2406   .tabs-bar {
2407     display: none;
2408   }
2409 }
2410
2411 .icon-with-badge {
2412   position: relative;
2413
2414   &__badge {
2415     position: absolute;
2416     left: 9px;
2417     top: -13px;
2418     background: $ui-highlight-color;
2419     border: 2px solid lighten($ui-base-color, 8%);
2420     padding: 1px 6px;
2421     border-radius: 6px;
2422     font-size: 10px;
2423     font-weight: 500;
2424     line-height: 14px;
2425     color: $primary-text-color;
2426   }
2427 }
2428
2429 .column-link--transparent .icon-with-badge__badge {
2430   border-color: darken($ui-base-color, 8%);
2431 }
2432
2433 .compose-panel {
2434   width: 285px;
2435   margin-top: 10px;
2436   display: flex;
2437   flex-direction: column;
2438   height: calc(100% - 10px);
2439   overflow-y: hidden;
2440
2441   .navigation-bar {
2442     padding-top: 20px;
2443     padding-bottom: 20px;
2444     flex: 0 1 48px;
2445     min-height: 20px;
2446   }
2447
2448   .flex-spacer {
2449     background: transparent;
2450   }
2451
2452   .compose-form {
2453     flex: 1;
2454     overflow-y: hidden;
2455     display: flex;
2456     flex-direction: column;
2457     min-height: 310px;
2458     padding-bottom: 71px;
2459     margin-bottom: -71px;
2460   }
2461
2462   .compose-form__autosuggest-wrapper {
2463     overflow-y: auto;
2464     background-color: $white;
2465     border-radius: 4px 4px 0 0;
2466     flex: 0 1 auto;
2467   }
2468
2469   .autosuggest-textarea__textarea {
2470     overflow-y: hidden;
2471   }
2472
2473   .compose-form__upload-thumbnail {
2474     height: 80px;
2475   }
2476 }
2477
2478 .navigation-panel {
2479   margin-top: 10px;
2480   margin-bottom: 10px;
2481   height: calc(100% - 20px);
2482   overflow-y: auto;
2483   display: flex;
2484   flex-direction: column;
2485
2486   & > a {
2487     flex: 0 0 auto;
2488   }
2489
2490   hr {
2491     flex: 0 0 auto;
2492     border: 0;
2493     background: transparent;
2494     border-top: 1px solid lighten($ui-base-color, 4%);
2495     margin: 10px 0;
2496   }
2497
2498   .flex-spacer {
2499     background: transparent;
2500   }
2501 }
2502
2503 .drawer__pager {
2504   box-sizing: border-box;
2505   padding: 0;
2506   flex-grow: 1;
2507   position: relative;
2508   overflow: hidden;
2509   display: flex;
2510 }
2511
2512 .drawer__inner {
2513   position: absolute;
2514   top: 0;
2515   left: 0;
2516   background: lighten($ui-base-color, 13%);
2517   box-sizing: border-box;
2518   padding: 0;
2519   display: flex;
2520   flex-direction: column;
2521   overflow: hidden;
2522   overflow-y: auto;
2523   width: 100%;
2524   height: 100%;
2525
2526   &.darker {
2527     background: $ui-base-color;
2528   }
2529 }
2530
2531 .drawer__inner__mastodon {
2532   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;
2533   flex: 1;
2534   min-height: 47px;
2535   display: none;
2536
2537   > img {
2538     display: block;
2539     object-fit: contain;
2540     object-position: bottom left;
2541     width: 85%;
2542     height: 100%;
2543     pointer-events: none;
2544     user-drag: none;
2545     user-select: none;
2546   }
2547
2548   @media screen and (min-height: 640px) {
2549     display: block;
2550   }
2551 }
2552
2553 .pseudo-drawer {
2554   background: lighten($ui-base-color, 13%);
2555   font-size: 13px;
2556   text-align: left;
2557 }
2558
2559 .drawer__header {
2560   flex: 0 0 auto;
2561   font-size: 16px;
2562   background: lighten($ui-base-color, 8%);
2563   margin-bottom: 10px;
2564   display: flex;
2565   flex-direction: row;
2566
2567   a {
2568     transition: background 100ms ease-in;
2569
2570     &:hover {
2571       background: lighten($ui-base-color, 3%);
2572       transition: background 200ms ease-out;
2573     }
2574   }
2575 }
2576
2577 .scrollable {
2578   overflow-y: scroll;
2579   overflow-x: hidden;
2580   flex: 1 1 auto;
2581   -webkit-overflow-scrolling: touch;
2582
2583   &.optionally-scrollable {
2584     overflow-y: auto;
2585   }
2586
2587   @supports(display: grid) { // hack to fix Chrome <57
2588     contain: strict;
2589   }
2590
2591   &--flex {
2592     display: flex;
2593     flex-direction: column;
2594   }
2595
2596   &__append {
2597     flex: 1 1 auto;
2598     position: relative;
2599     min-height: 120px;
2600   }
2601 }
2602
2603 .scrollable.fullscreen {
2604   @supports(display: grid) { // hack to fix Chrome <57
2605     contain: none;
2606   }
2607 }
2608
2609 .column-back-button {
2610   box-sizing: border-box;
2611   width: 100%;
2612   background: lighten($ui-base-color, 4%);
2613   color: $highlight-text-color;
2614   cursor: pointer;
2615   flex: 0 0 auto;
2616   font-size: 16px;
2617   line-height: inherit;
2618   border: 0;
2619   text-align: unset;
2620   padding: 15px;
2621   margin: 0;
2622   z-index: 3;
2623   outline: 0;
2624
2625   &:hover {
2626     text-decoration: underline;
2627   }
2628 }
2629
2630 .column-header__back-button {
2631   background: lighten($ui-base-color, 4%);
2632   border: 0;
2633   font-family: inherit;
2634   color: $highlight-text-color;
2635   cursor: pointer;
2636   white-space: nowrap;
2637   font-size: 16px;
2638   padding: 0 5px 0 0;
2639   z-index: 3;
2640
2641   &:hover {
2642     text-decoration: underline;
2643   }
2644
2645   &:last-child {
2646     padding: 0 15px 0 0;
2647   }
2648 }
2649
2650 .column-back-button__icon {
2651   display: inline-block;
2652   margin-right: 5px;
2653 }
2654
2655 .column-back-button--slim {
2656   position: relative;
2657 }
2658
2659 .column-back-button--slim-button {
2660   cursor: pointer;
2661   flex: 0 0 auto;
2662   font-size: 16px;
2663   padding: 15px;
2664   position: absolute;
2665   right: 0;
2666   top: -48px;
2667 }
2668
2669 .react-toggle {
2670   display: inline-block;
2671   position: relative;
2672   cursor: pointer;
2673   background-color: transparent;
2674   border: 0;
2675   padding: 0;
2676   user-select: none;
2677   -webkit-tap-highlight-color: rgba($base-overlay-background, 0);
2678   -webkit-tap-highlight-color: transparent;
2679 }
2680
2681 .react-toggle-screenreader-only {
2682   border: 0;
2683   clip: rect(0 0 0 0);
2684   height: 1px;
2685   margin: -1px;
2686   overflow: hidden;
2687   padding: 0;
2688   position: absolute;
2689   width: 1px;
2690 }
2691
2692 .react-toggle--disabled {
2693   cursor: not-allowed;
2694   opacity: 0.5;
2695   transition: opacity 0.25s;
2696 }
2697
2698 .react-toggle-track {
2699   width: 50px;
2700   height: 24px;
2701   padding: 0;
2702   border-radius: 30px;
2703   background-color: $ui-base-color;
2704   transition: background-color 0.2s ease;
2705 }
2706
2707 .react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
2708   background-color: darken($ui-base-color, 10%);
2709 }
2710
2711 .react-toggle--checked .react-toggle-track {
2712   background-color: $ui-highlight-color;
2713 }
2714
2715 .react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track {
2716   background-color: lighten($ui-highlight-color, 10%);
2717 }
2718
2719 .react-toggle-track-check {
2720   position: absolute;
2721   width: 14px;
2722   height: 10px;
2723   top: 0;
2724   bottom: 0;
2725   margin-top: auto;
2726   margin-bottom: auto;
2727   line-height: 0;
2728   left: 8px;
2729   opacity: 0;
2730   transition: opacity 0.25s ease;
2731 }
2732
2733 .react-toggle--checked .react-toggle-track-check {
2734   opacity: 1;
2735   transition: opacity 0.25s ease;
2736 }
2737
2738 .react-toggle-track-x {
2739   position: absolute;
2740   width: 10px;
2741   height: 10px;
2742   top: 0;
2743   bottom: 0;
2744   margin-top: auto;
2745   margin-bottom: auto;
2746   line-height: 0;
2747   right: 10px;
2748   opacity: 1;
2749   transition: opacity 0.25s ease;
2750 }
2751
2752 .react-toggle--checked .react-toggle-track-x {
2753   opacity: 0;
2754 }
2755
2756 .react-toggle-thumb {
2757   position: absolute;
2758   top: 1px;
2759   left: 1px;
2760   width: 22px;
2761   height: 22px;
2762   border: 1px solid $ui-base-color;
2763   border-radius: 50%;
2764   background-color: darken($simple-background-color, 2%);
2765   box-sizing: border-box;
2766   transition: all 0.25s ease;
2767   transition-property: border-color, left;
2768 }
2769
2770 .react-toggle--checked .react-toggle-thumb {
2771   left: 27px;
2772   border-color: $ui-highlight-color;
2773 }
2774
2775 .column-link {
2776   background: lighten($ui-base-color, 8%);
2777   color: $primary-text-color;
2778   display: block;
2779   font-size: 16px;
2780   padding: 15px;
2781   text-decoration: none;
2782
2783   &:hover,
2784   &:focus,
2785   &:active {
2786     background: lighten($ui-base-color, 11%);
2787   }
2788
2789   &:focus {
2790     outline: 0;
2791   }
2792
2793   &--transparent {
2794     background: transparent;
2795     color: $ui-secondary-color;
2796
2797     &:hover,
2798     &:focus,
2799     &:active {
2800       background: transparent;
2801       color: $primary-text-color;
2802     }
2803
2804     &.active {
2805       color: $ui-highlight-color;
2806     }
2807   }
2808 }
2809
2810 .column-link__icon {
2811   display: inline-block;
2812   margin-right: 5px;
2813 }
2814
2815 .column-link__badge {
2816   display: inline-block;
2817   border-radius: 4px;
2818   font-size: 12px;
2819   line-height: 19px;
2820   font-weight: 500;
2821   background: $ui-base-color;
2822   padding: 4px 8px;
2823   margin: -6px 10px;
2824 }
2825
2826 .column-subheading {
2827   background: $ui-base-color;
2828   color: $dark-text-color;
2829   padding: 8px 20px;
2830   font-size: 12px;
2831   font-weight: 500;
2832   text-transform: uppercase;
2833   cursor: default;
2834 }
2835
2836 .getting-started__wrapper,
2837 .getting-started,
2838 .flex-spacer {
2839   background: $ui-base-color;
2840 }
2841
2842 .getting-started__wrapper {
2843   flex: 0 0 auto;
2844 }
2845
2846 .flex-spacer {
2847   flex: 1 1 auto;
2848 }
2849
2850 .getting-started {
2851   color: $dark-text-color;
2852   overflow: auto;
2853
2854   &__footer {
2855     flex: 0 0 auto;
2856     padding: 10px;
2857     padding-top: 20px;
2858
2859     ul {
2860       margin-bottom: 10px;
2861     }
2862
2863     ul li {
2864       display: inline;
2865     }
2866
2867     p {
2868       color: $dark-text-color;
2869       font-size: 13px;
2870       margin-bottom: 20px;
2871
2872       a {
2873         color: $dark-text-color;
2874         text-decoration: underline;
2875       }
2876     }
2877
2878     a {
2879       text-decoration: none;
2880       color: $darker-text-color;
2881
2882       &:hover,
2883       &:focus,
2884       &:active {
2885         text-decoration: underline;
2886       }
2887     }
2888   }
2889
2890   &__trends {
2891     flex: 0 1 auto;
2892     opacity: 1;
2893     animation: fade 150ms linear;
2894     margin-top: 10px;
2895
2896     h4 {
2897       font-size: 12px;
2898       text-transform: uppercase;
2899       color: $darker-text-color;
2900       padding: 10px;
2901       font-weight: 500;
2902       border-bottom: 1px solid lighten($ui-base-color, 8%);
2903     }
2904
2905     @media screen and (max-height: 810px) {
2906       .trends__item:nth-child(3) {
2907         display: none;
2908       }
2909     }
2910
2911     @media screen and (max-height: 720px) {
2912       .trends__item:nth-child(2) {
2913         display: none;
2914       }
2915     }
2916
2917     @media screen and (max-height: 670px) {
2918       display: none;
2919     }
2920
2921     .trends__item {
2922       border-bottom: 0;
2923       padding: 10px;
2924
2925       &__current {
2926         color: $darker-text-color;
2927       }
2928     }
2929   }
2930 }
2931
2932 .keyboard-shortcuts {
2933   padding: 8px 0 0;
2934   overflow: hidden;
2935
2936   thead {
2937     position: absolute;
2938     left: -9999px;
2939   }
2940
2941   td {
2942     padding: 0 10px 8px;
2943   }
2944
2945   kbd {
2946     display: inline-block;
2947     padding: 3px 5px;
2948     background-color: lighten($ui-base-color, 8%);
2949     border: 1px solid darken($ui-base-color, 4%);
2950   }
2951 }
2952
2953 .setting-text {
2954   display: block;
2955   box-sizing: border-box;
2956   width: 100%;
2957   margin: 0;
2958   color: $inverted-text-color;
2959   background: $simple-background-color;
2960   padding: 10px;
2961   font-family: inherit;
2962   font-size: 14px;
2963   resize: vertical;
2964   border: 0;
2965   outline: 0;
2966   border-radius: 4px;
2967
2968   &:focus {
2969     outline: 0;
2970   }
2971
2972   @media screen and (max-width: 600px) {
2973     font-size: 16px;
2974   }
2975 }
2976
2977 .no-reduce-motion button.icon-button i.fa-retweet {
2978   background-position: 0 0;
2979   height: 19px;
2980   transition: background-position 0.9s steps(10);
2981   transition-duration: 0s;
2982   vertical-align: middle;
2983   width: 22px;
2984
2985   &::before {
2986     display: none !important;
2987   }
2988
2989 }
2990
2991 .no-reduce-motion button.icon-button.active i.fa-retweet {
2992   transition-duration: 0.9s;
2993   background-position: 0 100%;
2994 }
2995
2996 .reduce-motion button.icon-button i.fa-retweet {
2997   color: $action-button-color;
2998   transition: color 100ms ease-in;
2999 }
3000
3001 .reduce-motion button.icon-button.active i.fa-retweet {
3002   color: $highlight-text-color;
3003 }
3004
3005 .status-card {
3006   display: flex;
3007   font-size: 14px;
3008   border: 1px solid lighten($ui-base-color, 8%);
3009   border-radius: 4px;
3010   color: $dark-text-color;
3011   margin-top: 14px;
3012   text-decoration: none;
3013   overflow: hidden;
3014
3015   &__actions {
3016     bottom: 0;
3017     left: 0;
3018     position: absolute;
3019     right: 0;
3020     top: 0;
3021     display: flex;
3022     justify-content: center;
3023     align-items: center;
3024
3025     & > div {
3026       background: rgba($base-shadow-color, 0.6);
3027       border-radius: 8px;
3028       padding: 12px 9px;
3029       flex: 0 0 auto;
3030       display: flex;
3031       justify-content: center;
3032       align-items: center;
3033     }
3034
3035     button,
3036     a {
3037       display: inline;
3038       color: $secondary-text-color;
3039       background: transparent;
3040       border: 0;
3041       padding: 0 8px;
3042       text-decoration: none;
3043       font-size: 18px;
3044       line-height: 18px;
3045
3046       &:hover,
3047       &:active,
3048       &:focus {
3049         color: $primary-text-color;
3050       }
3051     }
3052
3053     a {
3054       font-size: 19px;
3055       position: relative;
3056       bottom: -1px;
3057     }
3058   }
3059 }
3060
3061 a.status-card {
3062   cursor: pointer;
3063
3064   &:hover {
3065     background: lighten($ui-base-color, 8%);
3066   }
3067 }
3068
3069 .status-card-photo {
3070   cursor: zoom-in;
3071   display: block;
3072   text-decoration: none;
3073   width: 100%;
3074   height: auto;
3075   margin: 0;
3076 }
3077
3078 .status-card-video {
3079   iframe {
3080     width: 100%;
3081     height: 100%;
3082   }
3083 }
3084
3085 .status-card__title {
3086   display: block;
3087   font-weight: 500;
3088   margin-bottom: 5px;
3089   color: $darker-text-color;
3090   overflow: hidden;
3091   text-overflow: ellipsis;
3092   white-space: nowrap;
3093   text-decoration: none;
3094 }
3095
3096 .status-card__content {
3097   flex: 1 1 auto;
3098   overflow: hidden;
3099   padding: 14px 14px 14px 8px;
3100
3101   &--blurred {
3102     filter: blur(2px);
3103     pointer-events: none;
3104   }
3105 }
3106
3107 .status-card__description {
3108   color: $darker-text-color;
3109 }
3110
3111 .status-card__host {
3112   display: block;
3113   margin-top: 5px;
3114   font-size: 13px;
3115   overflow: hidden;
3116   text-overflow: ellipsis;
3117   white-space: nowrap;
3118 }
3119
3120 .status-card__image {
3121   flex: 0 0 100px;
3122   background: lighten($ui-base-color, 8%);
3123   position: relative;
3124
3125   & > .fa {
3126     font-size: 21px;
3127     position: absolute;
3128     transform-origin: 50% 50%;
3129     top: 50%;
3130     left: 50%;
3131     transform: translate(-50%, -50%);
3132   }
3133 }
3134
3135 .status-card.horizontal {
3136   display: block;
3137
3138   .status-card__image {
3139     width: 100%;
3140   }
3141
3142   .status-card__image-image,
3143   .status-card__image-preview {
3144     border-radius: 4px 4px 0 0;
3145   }
3146
3147   .status-card__title {
3148     white-space: inherit;
3149   }
3150 }
3151
3152 .status-card.compact {
3153   border-color: lighten($ui-base-color, 4%);
3154
3155   &.interactive {
3156     border: 0;
3157   }
3158
3159   .status-card__content {
3160     padding: 8px;
3161     padding-top: 10px;
3162   }
3163
3164   .status-card__title {
3165     white-space: nowrap;
3166   }
3167
3168   .status-card__image {
3169     flex: 0 0 60px;
3170   }
3171 }
3172
3173 a.status-card.compact:hover {
3174   background-color: lighten($ui-base-color, 4%);
3175 }
3176
3177 .status-card__image-image {
3178   border-radius: 4px 0 0 4px;
3179   display: block;
3180   margin: 0;
3181   width: 100%;
3182   height: 100%;
3183   object-fit: cover;
3184   background-size: cover;
3185   background-position: center center;
3186 }
3187
3188 .status-card__image-preview {
3189   border-radius: 4px 0 0 4px;
3190   display: block;
3191   margin: 0;
3192   width: 100%;
3193   height: 100%;
3194   object-fit: fill;
3195   position: absolute;
3196   top: 0;
3197   left: 0;
3198   z-index: 0;
3199   background: $base-overlay-background;
3200
3201   &--hidden {
3202     display: none;
3203   }
3204 }
3205
3206 .load-more {
3207   display: block;
3208   color: $dark-text-color;
3209   background-color: transparent;
3210   border: 0;
3211   font-size: inherit;
3212   text-align: center;
3213   line-height: inherit;
3214   margin: 0;
3215   padding: 15px;
3216   box-sizing: border-box;
3217   width: 100%;
3218   clear: both;
3219   text-decoration: none;
3220
3221   &:hover {
3222     background: lighten($ui-base-color, 2%);
3223   }
3224 }
3225
3226 .load-gap {
3227   border-bottom: 1px solid lighten($ui-base-color, 8%);
3228 }
3229
3230 .timeline-hint {
3231   text-align: center;
3232   color: $darker-text-color;
3233   padding: 15px;
3234   box-sizing: border-box;
3235   width: 100%;
3236   cursor: default;
3237
3238   strong {
3239     font-weight: 500;
3240   }
3241
3242   a {
3243     color: lighten($ui-highlight-color, 8%);
3244     text-decoration: none;
3245
3246     &:hover,
3247     &:focus,
3248     &:active {
3249       text-decoration: underline;
3250       color: lighten($ui-highlight-color, 12%);
3251     }
3252   }
3253 }
3254
3255 .regeneration-indicator {
3256   text-align: center;
3257   font-size: 16px;
3258   font-weight: 500;
3259   color: $dark-text-color;
3260   background: $ui-base-color;
3261   cursor: default;
3262   display: flex;
3263   flex: 1 1 auto;
3264   flex-direction: column;
3265   align-items: center;
3266   justify-content: center;
3267   padding: 20px;
3268
3269   &__figure {
3270     &,
3271     img {
3272       display: block;
3273       width: auto;
3274       height: 160px;
3275       margin: 0;
3276     }
3277   }
3278
3279   &--without-header {
3280     padding-top: 20px + 48px;
3281   }
3282
3283   &__label {
3284     margin-top: 30px;
3285
3286     strong {
3287       display: block;
3288       margin-bottom: 10px;
3289       color: $dark-text-color;
3290     }
3291
3292     span {
3293       font-size: 15px;
3294       font-weight: 400;
3295     }
3296   }
3297 }
3298
3299 .column-header__wrapper {
3300   position: relative;
3301   flex: 0 0 auto;
3302   z-index: 1;
3303
3304   &.active {
3305     box-shadow: 0 1px 0 rgba($highlight-text-color, 0.3);
3306
3307     &::before {
3308       display: block;
3309       content: "";
3310       position: absolute;
3311       bottom: -13px;
3312       left: 0;
3313       right: 0;
3314       margin: 0 auto;
3315       width: 60%;
3316       pointer-events: none;
3317       height: 28px;
3318       z-index: 1;
3319       background: radial-gradient(ellipse, rgba($ui-highlight-color, 0.23) 0%, rgba($ui-highlight-color, 0) 60%);
3320     }
3321   }
3322
3323   .announcements {
3324     z-index: 1;
3325     position: relative;
3326   }
3327 }
3328
3329 .column-header {
3330   display: flex;
3331   font-size: 16px;
3332   background: lighten($ui-base-color, 4%);
3333   flex: 0 0 auto;
3334   cursor: pointer;
3335   position: relative;
3336   z-index: 2;
3337   outline: 0;
3338   overflow: hidden;
3339
3340   & > button {
3341     margin: 0;
3342     border: 0;
3343     padding: 15px 0 15px 15px;
3344     color: inherit;
3345     background: transparent;
3346     font: inherit;
3347     text-align: left;
3348     text-overflow: ellipsis;
3349     overflow: hidden;
3350     white-space: nowrap;
3351     flex: 1;
3352   }
3353
3354   & > .column-header__back-button {
3355     color: $highlight-text-color;
3356   }
3357
3358   &.active {
3359     .column-header__icon {
3360       color: $highlight-text-color;
3361       text-shadow: 0 0 10px rgba($highlight-text-color, 0.4);
3362     }
3363   }
3364
3365   &:focus,
3366   &:active {
3367     outline: 0;
3368   }
3369 }
3370
3371 .column-header__buttons {
3372   height: 48px;
3373   display: flex;
3374 }
3375
3376 .column-header__links {
3377   margin-bottom: 14px;
3378 }
3379
3380 .column-header__links .text-btn {
3381   margin-right: 10px;
3382 }
3383
3384 .column-header__button {
3385   background: lighten($ui-base-color, 4%);
3386   border: 0;
3387   color: $darker-text-color;
3388   cursor: pointer;
3389   font-size: 16px;
3390   padding: 0 15px;
3391
3392   &:hover {
3393     color: lighten($darker-text-color, 7%);
3394   }
3395
3396   &.active {
3397     color: $primary-text-color;
3398     background: lighten($ui-base-color, 8%);
3399
3400     &:hover {
3401       color: $primary-text-color;
3402       background: lighten($ui-base-color, 8%);
3403     }
3404   }
3405 }
3406
3407 .column-header__collapsible {
3408   max-height: 70vh;
3409   overflow: hidden;
3410   overflow-y: auto;
3411   color: $darker-text-color;
3412   transition: max-height 150ms ease-in-out, opacity 300ms linear;
3413   opacity: 1;
3414   z-index: 1;
3415   position: relative;
3416
3417   &.collapsed {
3418     max-height: 0;
3419     opacity: 0.5;
3420   }
3421
3422   &.animating {
3423     overflow-y: hidden;
3424   }
3425
3426   hr {
3427     height: 0;
3428     background: transparent;
3429     border: 0;
3430     border-top: 1px solid lighten($ui-base-color, 12%);
3431     margin: 10px 0;
3432   }
3433 }
3434
3435 .column-header__collapsible-inner {
3436   background: lighten($ui-base-color, 8%);
3437   padding: 15px;
3438 }
3439
3440 .column-header__setting-btn {
3441   &:hover {
3442     color: $darker-text-color;
3443     text-decoration: underline;
3444   }
3445 }
3446
3447 .column-header__setting-arrows {
3448   float: right;
3449
3450   .column-header__setting-btn {
3451     padding: 0 10px;
3452
3453     &:last-child {
3454       padding-right: 0;
3455     }
3456   }
3457 }
3458
3459 .text-btn {
3460   display: inline-block;
3461   padding: 0;
3462   font-family: inherit;
3463   font-size: inherit;
3464   color: inherit;
3465   border: 0;
3466   background: transparent;
3467   cursor: pointer;
3468 }
3469
3470 .column-header__icon {
3471   display: inline-block;
3472   margin-right: 5px;
3473 }
3474
3475 .loading-indicator {
3476   color: $dark-text-color;
3477   font-size: 12px;
3478   font-weight: 400;
3479   text-transform: uppercase;
3480   overflow: visible;
3481   position: absolute;
3482   top: 50%;
3483   left: 50%;
3484   transform: translate(-50%, -50%);
3485
3486   span {
3487     display: block;
3488     float: left;
3489     margin-left: 50%;
3490     transform: translateX(-50%);
3491     margin: 82px 0 0 50%;
3492     white-space: nowrap;
3493   }
3494 }
3495
3496 .loading-indicator__figure {
3497   position: absolute;
3498   top: 50%;
3499   left: 50%;
3500   transform: translate(-50%, -50%);
3501   width: 42px;
3502   height: 42px;
3503   box-sizing: border-box;
3504   background-color: transparent;
3505   border: 0 solid lighten($ui-base-color, 26%);
3506   border-width: 6px;
3507   border-radius: 50%;
3508 }
3509
3510 .no-reduce-motion .loading-indicator span {
3511   animation: loader-label 1.15s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
3512 }
3513
3514 .no-reduce-motion .loading-indicator__figure {
3515   animation: loader-figure 1.15s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
3516 }
3517
3518 @keyframes spring-rotate-in {
3519   0% {
3520     transform: rotate(0deg);
3521   }
3522
3523   30% {
3524     transform: rotate(-484.8deg);
3525   }
3526
3527   60% {
3528     transform: rotate(-316.7deg);
3529   }
3530
3531   90% {
3532     transform: rotate(-375deg);
3533   }
3534
3535   100% {
3536     transform: rotate(-360deg);
3537   }
3538 }
3539
3540 @keyframes spring-rotate-out {
3541   0% {
3542     transform: rotate(-360deg);
3543   }
3544
3545   30% {
3546     transform: rotate(124.8deg);
3547   }
3548
3549   60% {
3550     transform: rotate(-43.27deg);
3551   }
3552
3553   90% {
3554     transform: rotate(15deg);
3555   }
3556
3557   100% {
3558     transform: rotate(0deg);
3559   }
3560 }
3561
3562 @keyframes loader-figure {
3563   0% {
3564     width: 0;
3565     height: 0;
3566     background-color: lighten($ui-base-color, 26%);
3567   }
3568
3569   29% {
3570     background-color: lighten($ui-base-color, 26%);
3571   }
3572
3573   30% {
3574     width: 42px;
3575     height: 42px;
3576     background-color: transparent;
3577     border-width: 21px;
3578     opacity: 1;
3579   }
3580
3581   100% {
3582     width: 42px;
3583     height: 42px;
3584     border-width: 0;
3585     opacity: 0;
3586     background-color: transparent;
3587   }
3588 }
3589
3590 @keyframes loader-label {
3591   0% { opacity: 0.25; }
3592   30% { opacity: 1; }
3593   100% { opacity: 0.25; }
3594 }
3595
3596 .video-error-cover {
3597   align-items: center;
3598   background: $base-overlay-background;
3599   color: $primary-text-color;
3600   cursor: pointer;
3601   display: flex;
3602   flex-direction: column;
3603   height: 100%;
3604   justify-content: center;
3605   margin-top: 8px;
3606   position: relative;
3607   text-align: center;
3608   z-index: 100;
3609 }
3610
3611 .media-spoiler {
3612   background: $base-overlay-background;
3613   color: $darker-text-color;
3614   border: 0;
3615   padding: 0;
3616   width: 100%;
3617   height: 100%;
3618   border-radius: 4px;
3619   appearance: none;
3620
3621   &:hover,
3622   &:active,
3623   &:focus {
3624     padding: 0;
3625     color: lighten($darker-text-color, 8%);
3626   }
3627 }
3628
3629 .media-spoiler__warning {
3630   display: block;
3631   font-size: 14px;
3632 }
3633
3634 .media-spoiler__trigger {
3635   display: block;
3636   font-size: 11px;
3637   font-weight: 700;
3638 }
3639
3640 .spoiler-button {
3641   top: 0;
3642   left: 0;
3643   width: 100%;
3644   height: 100%;
3645   position: absolute;
3646   z-index: 100;
3647
3648   &--minified {
3649     display: block;
3650     left: 4px;
3651     top: 4px;
3652     width: auto;
3653     height: auto;
3654   }
3655
3656   &--click-thru {
3657     pointer-events: none;
3658   }
3659
3660   &--hidden {
3661     display: none;
3662   }
3663
3664   &__overlay {
3665     display: block;
3666     background: transparent;
3667     width: 100%;
3668     height: 100%;
3669     border: 0;
3670
3671     &__label {
3672       display: inline-block;
3673       background: rgba($base-overlay-background, 0.5);
3674       border-radius: 8px;
3675       padding: 8px 12px;
3676       color: $primary-text-color;
3677       font-weight: 500;
3678       font-size: 14px;
3679     }
3680
3681     &:hover,
3682     &:focus,
3683     &:active {
3684       .spoiler-button__overlay__label {
3685         background: rgba($base-overlay-background, 0.8);
3686       }
3687     }
3688
3689     &:disabled {
3690       .spoiler-button__overlay__label {
3691         background: rgba($base-overlay-background, 0.5);
3692       }
3693     }
3694   }
3695 }
3696
3697 .modal-container--preloader {
3698   background: lighten($ui-base-color, 8%);
3699 }
3700
3701 .account--panel {
3702   background: lighten($ui-base-color, 4%);
3703   border-top: 1px solid lighten($ui-base-color, 8%);
3704   border-bottom: 1px solid lighten($ui-base-color, 8%);
3705   display: flex;
3706   flex-direction: row;
3707   padding: 10px 0;
3708 }
3709
3710 .account--panel__button,
3711 .detailed-status__button {
3712   flex: 1 1 auto;
3713   text-align: center;
3714 }
3715
3716 .column-settings__outer {
3717   background: lighten($ui-base-color, 8%);
3718   padding: 15px;
3719 }
3720
3721 .column-settings__section {
3722   color: $darker-text-color;
3723   cursor: default;
3724   display: block;
3725   font-weight: 500;
3726   margin-bottom: 10px;
3727 }
3728
3729 .column-settings__hashtags {
3730   .column-settings__row {
3731     margin-bottom: 15px;
3732   }
3733
3734   .column-select {
3735     &__control {
3736       @include search-input;
3737
3738       &::placeholder {
3739         color: lighten($darker-text-color, 4%);
3740       }
3741
3742       &::-moz-focus-inner {
3743         border: 0;
3744       }
3745
3746       &::-moz-focus-inner,
3747       &:focus,
3748       &:active {
3749         outline: 0 !important;
3750       }
3751
3752       &:focus {
3753         background: lighten($ui-base-color, 4%);
3754       }
3755
3756       @media screen and (max-width: 600px) {
3757         font-size: 16px;
3758       }
3759     }
3760
3761     &__placeholder {
3762       color: $dark-text-color;
3763       padding-left: 2px;
3764       font-size: 12px;
3765     }
3766
3767     &__value-container {
3768       padding-left: 6px;
3769     }
3770
3771     &__multi-value {
3772       background: lighten($ui-base-color, 8%);
3773
3774       &__remove {
3775         cursor: pointer;
3776
3777         &:hover,
3778         &:active,
3779         &:focus {
3780           background: lighten($ui-base-color, 12%);
3781           color: lighten($darker-text-color, 4%);
3782         }
3783       }
3784     }
3785
3786     &__multi-value__label,
3787     &__input {
3788       color: $darker-text-color;
3789     }
3790
3791     &__clear-indicator,
3792     &__dropdown-indicator {
3793       cursor: pointer;
3794       transition: none;
3795       color: $dark-text-color;
3796
3797       &:hover,
3798       &:active,
3799       &:focus {
3800         color: lighten($dark-text-color, 4%);
3801       }
3802     }
3803
3804     &__indicator-separator {
3805       background-color: lighten($ui-base-color, 8%);
3806     }
3807
3808     &__menu {
3809       @include search-popout;
3810       padding: 0;
3811       background: $ui-secondary-color;
3812     }
3813
3814     &__menu-list {
3815       padding: 6px;
3816     }
3817
3818     &__option {
3819       color: $inverted-text-color;
3820       border-radius: 4px;
3821       font-size: 14px;
3822
3823       &--is-focused,
3824       &--is-selected {
3825         background: darken($ui-secondary-color, 10%);
3826       }
3827     }
3828   }
3829 }
3830
3831 .column-settings__row {
3832   .text-btn {
3833     margin-bottom: 15px;
3834   }
3835 }
3836
3837 .relationship-tag {
3838   color: $primary-text-color;
3839   margin-bottom: 4px;
3840   display: block;
3841   vertical-align: top;
3842   background-color: $base-overlay-background;
3843   text-transform: uppercase;
3844   font-size: 11px;
3845   font-weight: 500;
3846   padding: 4px;
3847   border-radius: 4px;
3848   opacity: 0.7;
3849
3850   &:hover {
3851     opacity: 1;
3852   }
3853 }
3854
3855 .setting-toggle {
3856   display: block;
3857   line-height: 24px;
3858 }
3859
3860 .setting-toggle__label {
3861   color: $darker-text-color;
3862   display: inline-block;
3863   margin-bottom: 14px;
3864   margin-left: 8px;
3865   vertical-align: middle;
3866 }
3867
3868 .empty-column-indicator,
3869 .error-column,
3870 .follow_requests-unlocked_explanation {
3871   color: $dark-text-color;
3872   background: $ui-base-color;
3873   text-align: center;
3874   padding: 20px;
3875   font-size: 15px;
3876   font-weight: 400;
3877   cursor: default;
3878   display: flex;
3879   flex: 1 1 auto;
3880   align-items: center;
3881   justify-content: center;
3882
3883   @supports(display: grid) { // hack to fix Chrome <57
3884     contain: strict;
3885   }
3886
3887   & > span {
3888     max-width: 400px;
3889   }
3890
3891   a {
3892     color: $highlight-text-color;
3893     text-decoration: none;
3894
3895     &:hover {
3896       text-decoration: underline;
3897     }
3898   }
3899 }
3900
3901 .follow_requests-unlocked_explanation {
3902   background: darken($ui-base-color, 4%);
3903   contain: initial;
3904 }
3905
3906 .error-column {
3907   flex-direction: column;
3908 }
3909
3910 @keyframes heartbeat {
3911   from {
3912     transform: scale(1);
3913     animation-timing-function: ease-out;
3914   }
3915
3916   10% {
3917     transform: scale(0.91);
3918     animation-timing-function: ease-in;
3919   }
3920
3921   17% {
3922     transform: scale(0.98);
3923     animation-timing-function: ease-out;
3924   }
3925
3926   33% {
3927     transform: scale(0.87);
3928     animation-timing-function: ease-in;
3929   }
3930
3931   45% {
3932     transform: scale(1);
3933     animation-timing-function: ease-out;
3934   }
3935 }
3936
3937 .no-reduce-motion .pulse-loading {
3938   transform-origin: center center;
3939   animation: heartbeat 1.5s ease-in-out infinite both;
3940 }
3941
3942 @keyframes shake-bottom {
3943   0%,
3944   100% {
3945     transform: rotate(0deg);
3946     transform-origin: 50% 100%;
3947   }
3948
3949   10% {
3950     transform: rotate(2deg);
3951   }
3952
3953   20%,
3954   40%,
3955   60% {
3956     transform: rotate(-4deg);
3957   }
3958
3959   30%,
3960   50%,
3961   70% {
3962     transform: rotate(4deg);
3963   }
3964
3965   80% {
3966     transform: rotate(-2deg);
3967   }
3968
3969   90% {
3970     transform: rotate(2deg);
3971   }
3972 }
3973
3974 .no-reduce-motion .shake-bottom {
3975   transform-origin: 50% 100%;
3976   animation: shake-bottom 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955) 2s 2 both;
3977 }
3978
3979 .emoji-picker-dropdown__menu {
3980   background: $simple-background-color;
3981   position: absolute;
3982   box-shadow: 4px 4px 6px rgba($base-shadow-color, 0.4);
3983   border-radius: 4px;
3984   margin-top: 5px;
3985   z-index: 2;
3986
3987   .emoji-mart-scroll {
3988     transition: opacity 200ms ease;
3989   }
3990
3991   &.selecting .emoji-mart-scroll {
3992     opacity: 0.5;
3993   }
3994 }
3995
3996 .emoji-picker-dropdown__modifiers {
3997   position: absolute;
3998   top: 60px;
3999   right: 11px;
4000   cursor: pointer;
4001 }
4002
4003 .emoji-picker-dropdown__modifiers__menu {
4004   position: absolute;
4005   z-index: 4;
4006   top: -4px;
4007   left: -8px;
4008   background: $simple-background-color;
4009   border-radius: 4px;
4010   box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2);
4011   overflow: hidden;
4012
4013   button {
4014     display: block;
4015     cursor: pointer;
4016     border: 0;
4017     padding: 4px 8px;
4018     background: transparent;
4019
4020     &:hover,
4021     &:focus,
4022     &:active {
4023       background: rgba($ui-secondary-color, 0.4);
4024     }
4025   }
4026
4027   .emoji-mart-emoji {
4028     height: 22px;
4029   }
4030 }
4031
4032 .emoji-mart-emoji {
4033   span {
4034     background-repeat: no-repeat;
4035   }
4036 }
4037
4038 .upload-area {
4039   align-items: center;
4040   background: rgba($base-overlay-background, 0.8);
4041   display: flex;
4042   height: 100%;
4043   justify-content: center;
4044   left: 0;
4045   opacity: 0;
4046   position: absolute;
4047   top: 0;
4048   visibility: hidden;
4049   width: 100%;
4050   z-index: 2000;
4051
4052   * {
4053     pointer-events: none;
4054   }
4055 }
4056
4057 .upload-area__drop {
4058   width: 320px;
4059   height: 160px;
4060   display: flex;
4061   box-sizing: border-box;
4062   position: relative;
4063   padding: 8px;
4064 }
4065
4066 .upload-area__background {
4067   position: absolute;
4068   top: 0;
4069   right: 0;
4070   bottom: 0;
4071   left: 0;
4072   z-index: -1;
4073   border-radius: 4px;
4074   background: $ui-base-color;
4075   box-shadow: 0 0 5px rgba($base-shadow-color, 0.2);
4076 }
4077
4078 .upload-area__content {
4079   flex: 1;
4080   display: flex;
4081   align-items: center;
4082   justify-content: center;
4083   color: $secondary-text-color;
4084   font-size: 18px;
4085   font-weight: 500;
4086   border: 2px dashed $ui-base-lighter-color;
4087   border-radius: 4px;
4088 }
4089
4090 .upload-progress {
4091   padding: 10px;
4092   color: $lighter-text-color;
4093   overflow: hidden;
4094   display: flex;
4095
4096   .fa {
4097     font-size: 34px;
4098     margin-right: 10px;
4099   }
4100
4101   span {
4102     font-size: 12px;
4103     text-transform: uppercase;
4104     font-weight: 500;
4105     display: block;
4106   }
4107 }
4108
4109 .upload-progess__message {
4110   flex: 1 1 auto;
4111 }
4112
4113 .upload-progress__backdrop {
4114   width: 100%;
4115   height: 6px;
4116   border-radius: 6px;
4117   background: $ui-base-lighter-color;
4118   position: relative;
4119   margin-top: 5px;
4120 }
4121
4122 .upload-progress__tracker {
4123   position: absolute;
4124   left: 0;
4125   top: 0;
4126   height: 6px;
4127   background: $ui-highlight-color;
4128   border-radius: 6px;
4129 }
4130
4131 .emoji-button {
4132   display: block;
4133   padding: 5px 5px 2px 2px;
4134   outline: 0;
4135   cursor: pointer;
4136
4137   &:active,
4138   &:focus {
4139     outline: 0 !important;
4140   }
4141
4142   img {
4143     filter: grayscale(100%);
4144     opacity: 0.8;
4145     display: block;
4146     margin: 0;
4147     width: 22px;
4148     height: 22px;
4149   }
4150
4151   &:hover,
4152   &:active,
4153   &:focus {
4154     img {
4155       opacity: 1;
4156       filter: none;
4157     }
4158   }
4159 }
4160
4161 .dropdown--active .emoji-button img {
4162   opacity: 1;
4163   filter: none;
4164 }
4165
4166 .privacy-dropdown__dropdown {
4167   position: absolute;
4168   background: $simple-background-color;
4169   box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
4170   border-radius: 4px;
4171   margin-left: 40px;
4172   overflow: hidden;
4173
4174   &.top {
4175     transform-origin: 50% 100%;
4176   }
4177
4178   &.bottom {
4179     transform-origin: 50% 0;
4180   }
4181 }
4182
4183 .privacy-dropdown__option {
4184   color: $inverted-text-color;
4185   padding: 10px;
4186   cursor: pointer;
4187   display: flex;
4188
4189   &:hover,
4190   &.active {
4191     background: $ui-highlight-color;
4192     color: $primary-text-color;
4193     outline: 0;
4194
4195     .privacy-dropdown__option__content {
4196       color: $primary-text-color;
4197
4198       strong {
4199         color: $primary-text-color;
4200       }
4201     }
4202   }
4203
4204   &.active:hover {
4205     background: lighten($ui-highlight-color, 4%);
4206   }
4207 }
4208
4209 .privacy-dropdown__option__icon {
4210   display: flex;
4211   align-items: center;
4212   justify-content: center;
4213   margin-right: 10px;
4214 }
4215
4216 .privacy-dropdown__option__content {
4217   flex: 1 1 auto;
4218   color: $lighter-text-color;
4219
4220   strong {
4221     font-weight: 500;
4222     display: block;
4223     color: $inverted-text-color;
4224
4225     @each $lang in $cjk-langs {
4226       &:lang(#{$lang}) {
4227         font-weight: 700;
4228       }
4229     }
4230   }
4231 }
4232
4233 .privacy-dropdown.active {
4234   .privacy-dropdown__value {
4235     background: $simple-background-color;
4236     border-radius: 4px 4px 0 0;
4237     box-shadow: 0 -4px 4px rgba($base-shadow-color, 0.1);
4238
4239     .icon-button {
4240       transition: none;
4241     }
4242
4243     &.active {
4244       background: $ui-highlight-color;
4245
4246       .icon-button {
4247         color: $primary-text-color;
4248       }
4249     }
4250   }
4251
4252   &.top .privacy-dropdown__value {
4253     border-radius: 0 0 4px 4px;
4254   }
4255
4256   .privacy-dropdown__dropdown {
4257     display: block;
4258     box-shadow: 2px 4px 6px rgba($base-shadow-color, 0.1);
4259   }
4260 }
4261
4262 .search {
4263   position: relative;
4264 }
4265
4266 .search__input {
4267   @include search-input;
4268
4269   display: block;
4270   padding: 15px;
4271   padding-right: 30px;
4272   line-height: 18px;
4273   font-size: 16px;
4274
4275   &::placeholder {
4276     color: lighten($darker-text-color, 4%);
4277   }
4278
4279   &::-moz-focus-inner {
4280     border: 0;
4281   }
4282
4283   &::-moz-focus-inner,
4284   &:focus,
4285   &:active {
4286     outline: 0 !important;
4287   }
4288
4289   &:focus {
4290     background: lighten($ui-base-color, 4%);
4291   }
4292
4293   @media screen and (max-width: 600px) {
4294     font-size: 16px;
4295   }
4296 }
4297
4298 .search__icon {
4299   &::-moz-focus-inner {
4300     border: 0;
4301   }
4302
4303   &::-moz-focus-inner,
4304   &:focus {
4305     outline: 0 !important;
4306   }
4307
4308   .fa {
4309     position: absolute;
4310     top: 16px;
4311     right: 10px;
4312     z-index: 2;
4313     display: inline-block;
4314     opacity: 0;
4315     transition: all 100ms linear;
4316     transition-property: transform, opacity;
4317     font-size: 18px;
4318     width: 18px;
4319     height: 18px;
4320     color: $secondary-text-color;
4321     cursor: default;
4322     pointer-events: none;
4323
4324     &.active {
4325       pointer-events: auto;
4326       opacity: 0.3;
4327     }
4328   }
4329
4330   .fa-search {
4331     transform: rotate(90deg);
4332
4333     &.active {
4334       pointer-events: none;
4335       transform: rotate(0deg);
4336     }
4337   }
4338
4339   .fa-times-circle {
4340     top: 17px;
4341     transform: rotate(0deg);
4342     color: $action-button-color;
4343     cursor: pointer;
4344
4345     &.active {
4346       transform: rotate(90deg);
4347     }
4348
4349     &:hover {
4350       color: lighten($action-button-color, 7%);
4351     }
4352   }
4353 }
4354
4355 .search-results__header {
4356   color: $dark-text-color;
4357   background: lighten($ui-base-color, 2%);
4358   padding: 15px;
4359   font-weight: 500;
4360   font-size: 16px;
4361   cursor: default;
4362
4363   .fa {
4364     display: inline-block;
4365     margin-right: 5px;
4366   }
4367 }
4368
4369 .search-results__section {
4370   margin-bottom: 5px;
4371
4372   h5 {
4373     background: darken($ui-base-color, 4%);
4374     border-bottom: 1px solid lighten($ui-base-color, 8%);
4375     cursor: default;
4376     display: flex;
4377     padding: 15px;
4378     font-weight: 500;
4379     font-size: 16px;
4380     color: $dark-text-color;
4381
4382     .fa {
4383       display: inline-block;
4384       margin-right: 5px;
4385     }
4386   }
4387
4388   .account:last-child,
4389   & > div:last-child .status {
4390     border-bottom: 0;
4391   }
4392 }
4393
4394 .search-results__hashtag {
4395   display: block;
4396   padding: 10px;
4397   color: $secondary-text-color;
4398   text-decoration: none;
4399
4400   &:hover,
4401   &:active,
4402   &:focus {
4403     color: lighten($secondary-text-color, 4%);
4404     text-decoration: underline;
4405   }
4406 }
4407
4408 .search-results__info {
4409   padding: 20px;
4410   color: $darker-text-color;
4411   text-align: center;
4412 }
4413
4414 .modal-root {
4415   position: relative;
4416   transition: opacity 0.3s linear;
4417   will-change: opacity;
4418   z-index: 9999;
4419 }
4420
4421 .modal-root__overlay {
4422   position: fixed;
4423   top: 0;
4424   left: 0;
4425   right: 0;
4426   bottom: 0;
4427   background: rgba($base-overlay-background, 0.7);
4428 }
4429
4430 .modal-root__container {
4431   position: fixed;
4432   top: 0;
4433   left: 0;
4434   width: 100%;
4435   height: 100%;
4436   display: flex;
4437   flex-direction: column;
4438   align-items: center;
4439   justify-content: center;
4440   align-content: space-around;
4441   z-index: 9999;
4442   pointer-events: none;
4443   user-select: none;
4444 }
4445
4446 .modal-root__modal {
4447   pointer-events: auto;
4448   display: flex;
4449   z-index: 9999;
4450 }
4451
4452 .video-modal__container {
4453   max-width: 100vw;
4454   max-height: 100vh;
4455 }
4456
4457 .audio-modal__container {
4458   width: 50vw;
4459 }
4460
4461 .media-modal {
4462   width: 100%;
4463   height: 100%;
4464   position: relative;
4465
4466   .extended-video-player {
4467     width: 100%;
4468     height: 100%;
4469     display: flex;
4470     align-items: center;
4471     justify-content: center;
4472
4473     video {
4474       max-width: $media-modal-media-max-width;
4475       max-height: $media-modal-media-max-height;
4476     }
4477   }
4478 }
4479
4480 .media-modal__closer {
4481   position: absolute;
4482   top: 0;
4483   left: 0;
4484   right: 0;
4485   bottom: 0;
4486 }
4487
4488 .media-modal__navigation {
4489   position: absolute;
4490   top: 0;
4491   left: 0;
4492   right: 0;
4493   bottom: 0;
4494   pointer-events: none;
4495   transition: opacity 0.3s linear;
4496   will-change: opacity;
4497
4498   * {
4499     pointer-events: auto;
4500   }
4501
4502   &.media-modal__navigation--hidden {
4503     opacity: 0;
4504
4505     * {
4506       pointer-events: none;
4507     }
4508   }
4509 }
4510
4511 .media-modal__nav {
4512   background: rgba($base-overlay-background, 0.5);
4513   box-sizing: border-box;
4514   border: 0;
4515   color: $primary-text-color;
4516   cursor: pointer;
4517   display: flex;
4518   align-items: center;
4519   font-size: 24px;
4520   height: 20vmax;
4521   margin: auto 0;
4522   padding: 30px 15px;
4523   position: absolute;
4524   top: 0;
4525   bottom: 0;
4526 }
4527
4528 .media-modal__nav--left {
4529   left: 0;
4530 }
4531
4532 .media-modal__nav--right {
4533   right: 0;
4534 }
4535
4536 .media-modal__pagination {
4537   width: 100%;
4538   text-align: center;
4539   position: absolute;
4540   left: 0;
4541   bottom: 20px;
4542   pointer-events: none;
4543 }
4544
4545 .media-modal__meta {
4546   text-align: center;
4547   position: absolute;
4548   left: 0;
4549   bottom: 20px;
4550   width: 100%;
4551   pointer-events: none;
4552
4553   &--shifted {
4554     bottom: 62px;
4555   }
4556
4557   a {
4558     pointer-events: auto;
4559     text-decoration: none;
4560     font-weight: 500;
4561     color: $ui-secondary-color;
4562
4563     &:hover,
4564     &:focus,
4565     &:active {
4566       text-decoration: underline;
4567     }
4568   }
4569 }
4570
4571 .media-modal__page-dot {
4572   display: inline-block;
4573 }
4574
4575 .media-modal__button {
4576   background-color: $primary-text-color;
4577   height: 12px;
4578   width: 12px;
4579   border-radius: 6px;
4580   margin: 10px;
4581   padding: 0;
4582   border: 0;
4583   font-size: 0;
4584 }
4585
4586 .media-modal__button--active {
4587   background-color: $highlight-text-color;
4588 }
4589
4590 .media-modal__close {
4591   position: absolute;
4592   right: 8px;
4593   top: 8px;
4594   z-index: 100;
4595 }
4596
4597 .onboarding-modal,
4598 .error-modal,
4599 .embed-modal {
4600   background: $ui-secondary-color;
4601   color: $inverted-text-color;
4602   border-radius: 8px;
4603   overflow: hidden;
4604   display: flex;
4605   flex-direction: column;
4606 }
4607
4608 .error-modal__body {
4609   height: 80vh;
4610   width: 80vw;
4611   max-width: 520px;
4612   max-height: 420px;
4613   position: relative;
4614
4615   & > div {
4616     position: absolute;
4617     top: 0;
4618     left: 0;
4619     width: 100%;
4620     height: 100%;
4621     box-sizing: border-box;
4622     padding: 25px;
4623     display: none;
4624     flex-direction: column;
4625     align-items: center;
4626     justify-content: center;
4627     display: flex;
4628     opacity: 0;
4629     user-select: text;
4630   }
4631 }
4632
4633 .error-modal__body {
4634   display: flex;
4635   flex-direction: column;
4636   justify-content: center;
4637   align-items: center;
4638   text-align: center;
4639 }
4640
4641 .onboarding-modal__paginator,
4642 .error-modal__footer {
4643   flex: 0 0 auto;
4644   background: darken($ui-secondary-color, 8%);
4645   display: flex;
4646   padding: 25px;
4647
4648   & > div {
4649     min-width: 33px;
4650   }
4651
4652   .onboarding-modal__nav,
4653   .error-modal__nav {
4654     color: $lighter-text-color;
4655     border: 0;
4656     font-size: 14px;
4657     font-weight: 500;
4658     padding: 10px 25px;
4659     line-height: inherit;
4660     height: auto;
4661     margin: -10px;
4662     border-radius: 4px;
4663     background-color: transparent;
4664
4665     &:hover,
4666     &:focus,
4667     &:active {
4668       color: darken($lighter-text-color, 4%);
4669       background-color: darken($ui-secondary-color, 16%);
4670     }
4671
4672     &.onboarding-modal__done,
4673     &.onboarding-modal__next {
4674       color: $inverted-text-color;
4675
4676       &:hover,
4677       &:focus,
4678       &:active {
4679         color: lighten($inverted-text-color, 4%);
4680       }
4681     }
4682   }
4683 }
4684
4685 .error-modal__footer {
4686   justify-content: center;
4687 }
4688
4689 .display-case {
4690   text-align: center;
4691   font-size: 15px;
4692   margin-bottom: 15px;
4693
4694   &__label {
4695     font-weight: 500;
4696     color: $inverted-text-color;
4697     margin-bottom: 5px;
4698     text-transform: uppercase;
4699     font-size: 12px;
4700   }
4701
4702   &__case {
4703     background: $ui-base-color;
4704     color: $secondary-text-color;
4705     font-weight: 500;
4706     padding: 10px;
4707     border-radius: 4px;
4708   }
4709 }
4710
4711 .onboard-sliders {
4712   display: inline-block;
4713   max-width: 30px;
4714   max-height: auto;
4715   margin-left: 10px;
4716 }
4717
4718 .boost-modal,
4719 .confirmation-modal,
4720 .report-modal,
4721 .actions-modal,
4722 .mute-modal,
4723 .block-modal {
4724   background: lighten($ui-secondary-color, 8%);
4725   color: $inverted-text-color;
4726   border-radius: 8px;
4727   overflow: hidden;
4728   max-width: 90vw;
4729   width: 480px;
4730   position: relative;
4731   flex-direction: column;
4732
4733   .status__display-name {
4734     display: block;
4735     max-width: 100%;
4736     padding-right: 25px;
4737   }
4738
4739   .status__avatar {
4740     height: 28px;
4741     left: 10px;
4742     position: absolute;
4743     top: 10px;
4744     width: 48px;
4745   }
4746
4747   .status__content__spoiler-link {
4748     color: lighten($secondary-text-color, 8%);
4749   }
4750 }
4751
4752 .actions-modal {
4753   .status {
4754     background: $white;
4755     border-bottom-color: $ui-secondary-color;
4756     padding-top: 10px;
4757     padding-bottom: 10px;
4758   }
4759
4760   .dropdown-menu__separator {
4761     border-bottom-color: $ui-secondary-color;
4762   }
4763 }
4764
4765 .boost-modal__container {
4766   overflow-x: scroll;
4767   padding: 10px;
4768
4769   .status {
4770     user-select: text;
4771     border-bottom: 0;
4772   }
4773 }
4774
4775 .boost-modal__action-bar,
4776 .confirmation-modal__action-bar,
4777 .mute-modal__action-bar,
4778 .block-modal__action-bar {
4779   display: flex;
4780   justify-content: space-between;
4781   background: $ui-secondary-color;
4782   padding: 10px;
4783   line-height: 36px;
4784
4785   & > div {
4786     flex: 1 1 auto;
4787     text-align: right;
4788     color: $lighter-text-color;
4789     padding-right: 10px;
4790   }
4791
4792   .button {
4793     flex: 0 0 auto;
4794   }
4795 }
4796
4797 .boost-modal__status-header {
4798   font-size: 15px;
4799 }
4800
4801 .boost-modal__status-time {
4802   float: right;
4803   font-size: 14px;
4804 }
4805
4806 .mute-modal,
4807 .block-modal {
4808   line-height: 24px;
4809 }
4810
4811 .mute-modal .react-toggle,
4812 .block-modal .react-toggle {
4813   vertical-align: middle;
4814 }
4815
4816 .report-modal {
4817   width: 90vw;
4818   max-width: 700px;
4819 }
4820
4821 .report-modal__container {
4822   display: flex;
4823   border-top: 1px solid $ui-secondary-color;
4824
4825   @media screen and (max-width: 480px) {
4826     flex-wrap: wrap;
4827     overflow-y: auto;
4828   }
4829 }
4830
4831 .report-modal__statuses,
4832 .report-modal__comment {
4833   box-sizing: border-box;
4834   width: 50%;
4835
4836   @media screen and (max-width: 480px) {
4837     width: 100%;
4838   }
4839 }
4840
4841 .report-modal__statuses,
4842 .focal-point-modal__content {
4843   flex: 1 1 auto;
4844   min-height: 20vh;
4845   max-height: 80vh;
4846   overflow-y: auto;
4847   overflow-x: hidden;
4848
4849   .status__content a {
4850     color: $highlight-text-color;
4851   }
4852
4853   .status__content,
4854   .status__content p {
4855     color: $inverted-text-color;
4856   }
4857
4858   @media screen and (max-width: 480px) {
4859     max-height: 10vh;
4860   }
4861 }
4862
4863 .focal-point-modal__content {
4864   @media screen and (max-width: 480px) {
4865     max-height: 40vh;
4866   }
4867 }
4868
4869 .report-modal__comment {
4870   padding: 20px;
4871   border-right: 1px solid $ui-secondary-color;
4872   max-width: 320px;
4873
4874   p {
4875     font-size: 14px;
4876     line-height: 20px;
4877     margin-bottom: 20px;
4878   }
4879
4880   .setting-text {
4881     display: block;
4882     box-sizing: border-box;
4883     width: 100%;
4884     margin: 0;
4885     color: $inverted-text-color;
4886     background: $white;
4887     padding: 10px;
4888     font-family: inherit;
4889     font-size: 14px;
4890     resize: none;
4891     border: 0;
4892     outline: 0;
4893     border-radius: 4px;
4894     border: 1px solid $ui-secondary-color;
4895     min-height: 100px;
4896     max-height: 50vh;
4897     margin-bottom: 10px;
4898
4899     &:focus {
4900       border: 1px solid darken($ui-secondary-color, 8%);
4901     }
4902
4903     &__wrapper {
4904       background: $white;
4905       border: 1px solid $ui-secondary-color;
4906       margin-bottom: 10px;
4907       border-radius: 4px;
4908
4909       .setting-text {
4910         border: 0;
4911         margin-bottom: 0;
4912         border-radius: 0;
4913
4914         &:focus {
4915           border: 0;
4916         }
4917       }
4918
4919       &__modifiers {
4920         color: $inverted-text-color;
4921         font-family: inherit;
4922         font-size: 14px;
4923         background: $white;
4924       }
4925     }
4926
4927     &__toolbar {
4928       display: flex;
4929       justify-content: space-between;
4930       margin-bottom: 20px;
4931     }
4932   }
4933
4934   .setting-text-label {
4935     display: block;
4936     color: $inverted-text-color;
4937     font-size: 14px;
4938     font-weight: 500;
4939     margin-bottom: 10px;
4940   }
4941
4942   .setting-toggle {
4943     margin-top: 20px;
4944     margin-bottom: 24px;
4945
4946     &__label {
4947       color: $inverted-text-color;
4948       font-size: 14px;
4949     }
4950   }
4951
4952   @media screen and (max-width: 480px) {
4953     padding: 10px;
4954     max-width: 100%;
4955     order: 2;
4956
4957     .setting-toggle {
4958       margin-bottom: 4px;
4959     }
4960   }
4961 }
4962
4963 .actions-modal {
4964   max-height: 80vh;
4965   max-width: 80vw;
4966
4967   .status {
4968     overflow-y: auto;
4969     max-height: 300px;
4970   }
4971
4972   .actions-modal__item-label {
4973     font-weight: 500;
4974   }
4975
4976   ul {
4977     overflow-y: auto;
4978     flex-shrink: 0;
4979     max-height: 80vh;
4980
4981     &.with-status {
4982       max-height: calc(80vh - 75px);
4983     }
4984
4985     li:empty {
4986       margin: 0;
4987     }
4988
4989     li:not(:empty) {
4990       a {
4991         color: $inverted-text-color;
4992         display: flex;
4993         padding: 12px 16px;
4994         font-size: 15px;
4995         align-items: center;
4996         text-decoration: none;
4997
4998         &,
4999         button {
5000           transition: none;
5001         }
5002
5003         &.active,
5004         &:hover,
5005         &:active,
5006         &:focus {
5007           &,
5008           button {
5009             background: $ui-highlight-color;
5010             color: $primary-text-color;
5011           }
5012         }
5013
5014         button:first-child {
5015           margin-right: 10px;
5016         }
5017       }
5018     }
5019   }
5020 }
5021
5022 .confirmation-modal__action-bar,
5023 .mute-modal__action-bar,
5024 .block-modal__action-bar {
5025   .confirmation-modal__secondary-button {
5026     flex-shrink: 1;
5027   }
5028 }
5029
5030 .confirmation-modal__secondary-button,
5031 .confirmation-modal__cancel-button,
5032 .mute-modal__cancel-button,
5033 .block-modal__cancel-button {
5034   background-color: transparent;
5035   color: $lighter-text-color;
5036   font-size: 14px;
5037   font-weight: 500;
5038
5039   &:hover,
5040   &:focus,
5041   &:active {
5042     color: darken($lighter-text-color, 4%);
5043     background-color: transparent;
5044   }
5045 }
5046
5047 .confirmation-modal__container,
5048 .mute-modal__container,
5049 .block-modal__container,
5050 .report-modal__target {
5051   padding: 30px;
5052   font-size: 16px;
5053
5054   strong {
5055     font-weight: 500;
5056
5057     @each $lang in $cjk-langs {
5058       &:lang(#{$lang}) {
5059         font-weight: 700;
5060       }
5061     }
5062   }
5063 }
5064
5065 .confirmation-modal__container,
5066 .report-modal__target {
5067   text-align: center;
5068 }
5069
5070 .block-modal,
5071 .mute-modal {
5072   &__explanation {
5073     margin-top: 20px;
5074   }
5075
5076   .setting-toggle {
5077     margin-top: 20px;
5078     margin-bottom: 24px;
5079     display: flex;
5080     align-items: center;
5081
5082     &__label {
5083       color: $inverted-text-color;
5084       margin: 0;
5085       margin-left: 8px;
5086     }
5087   }
5088 }
5089
5090 .report-modal__target {
5091   padding: 15px;
5092
5093   .media-modal__close {
5094     top: 14px;
5095     right: 15px;
5096   }
5097 }
5098
5099 .loading-bar {
5100   background-color: $highlight-text-color;
5101   height: 3px;
5102   position: absolute;
5103   top: 0;
5104   left: 0;
5105   z-index: 9999;
5106 }
5107
5108 .media-gallery__gifv__label {
5109   display: block;
5110   position: absolute;
5111   color: $primary-text-color;
5112   background: rgba($base-overlay-background, 0.5);
5113   bottom: 6px;
5114   left: 6px;
5115   padding: 2px 6px;
5116   border-radius: 2px;
5117   font-size: 11px;
5118   font-weight: 600;
5119   z-index: 1;
5120   pointer-events: none;
5121   opacity: 0.9;
5122   transition: opacity 0.1s ease;
5123   line-height: 18px;
5124 }
5125
5126 .media-gallery__gifv {
5127   &:hover {
5128     .media-gallery__gifv__label {
5129       opacity: 1;
5130     }
5131   }
5132 }
5133
5134 .attachment-list {
5135   display: flex;
5136   font-size: 14px;
5137   border: 1px solid lighten($ui-base-color, 8%);
5138   border-radius: 4px;
5139   margin-top: 14px;
5140   overflow: hidden;
5141
5142   &__icon {
5143     flex: 0 0 auto;
5144     color: $dark-text-color;
5145     padding: 8px 18px;
5146     cursor: default;
5147     border-right: 1px solid lighten($ui-base-color, 8%);
5148     display: flex;
5149     flex-direction: column;
5150     align-items: center;
5151     justify-content: center;
5152     font-size: 26px;
5153
5154     .fa {
5155       display: block;
5156     }
5157   }
5158
5159   &__list {
5160     list-style: none;
5161     padding: 4px 0;
5162     padding-left: 8px;
5163     display: flex;
5164     flex-direction: column;
5165     justify-content: center;
5166
5167     li {
5168       display: block;
5169       padding: 4px 0;
5170     }
5171
5172     a {
5173       text-decoration: none;
5174       color: $dark-text-color;
5175       font-weight: 500;
5176
5177       &:hover {
5178         text-decoration: underline;
5179       }
5180     }
5181   }
5182
5183   &.compact {
5184     border: 0;
5185     margin-top: 4px;
5186
5187     .attachment-list__list {
5188       padding: 0;
5189       display: block;
5190     }
5191
5192     .fa {
5193       color: $dark-text-color;
5194     }
5195   }
5196 }
5197
5198 /* Media Gallery */
5199 .media-gallery {
5200   box-sizing: border-box;
5201   margin-top: 8px;
5202   overflow: hidden;
5203   border-radius: 4px;
5204   position: relative;
5205   width: 100%;
5206 }
5207
5208 .media-gallery__item {
5209   border: 0;
5210   box-sizing: border-box;
5211   display: block;
5212   float: left;
5213   position: relative;
5214   border-radius: 4px;
5215   overflow: hidden;
5216
5217   &.standalone {
5218     .media-gallery__item-gifv-thumbnail {
5219       transform: none;
5220       top: 0;
5221     }
5222   }
5223 }
5224
5225 .media-gallery__item-thumbnail {
5226   cursor: zoom-in;
5227   display: block;
5228   text-decoration: none;
5229   color: $secondary-text-color;
5230   position: relative;
5231   z-index: 1;
5232
5233   &,
5234   img {
5235     height: 100%;
5236     width: 100%;
5237   }
5238
5239   img {
5240     object-fit: cover;
5241   }
5242 }
5243
5244 .media-gallery__preview {
5245   width: 100%;
5246   height: 100%;
5247   object-fit: cover;
5248   position: absolute;
5249   top: 0;
5250   left: 0;
5251   z-index: 0;
5252   background: $base-overlay-background;
5253
5254   &--hidden {
5255     display: none;
5256   }
5257 }
5258
5259 .media-gallery__gifv {
5260   height: 100%;
5261   overflow: hidden;
5262   position: relative;
5263   width: 100%;
5264 }
5265
5266 .media-gallery__item-gifv-thumbnail {
5267   cursor: zoom-in;
5268   height: 100%;
5269   object-fit: cover;
5270   position: relative;
5271   top: 50%;
5272   transform: translateY(-50%);
5273   width: 100%;
5274   z-index: 1;
5275 }
5276
5277 .media-gallery__item-thumbnail-label {
5278   clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
5279   clip: rect(1px, 1px, 1px, 1px);
5280   overflow: hidden;
5281   position: absolute;
5282 }
5283 /* End Media Gallery */
5284
5285 .detailed,
5286 .fullscreen {
5287   .video-player__volume__current,
5288   .video-player__volume::before {
5289     bottom: 27px;
5290   }
5291
5292   .video-player__volume__handle {
5293     bottom: 23px;
5294   }
5295
5296 }
5297
5298 .audio-player {
5299   overflow: hidden;
5300   box-sizing: border-box;
5301   position: relative;
5302   background: darken($ui-base-color, 8%);
5303   border-radius: 4px;
5304   padding-bottom: 44px;
5305   direction: ltr;
5306
5307   &.editable {
5308     border-radius: 0;
5309     height: 100%;
5310   }
5311
5312   &.with-light-background {
5313     .video-player__seek::before {
5314       color: rgba($black, 0.35);
5315     }
5316
5317     .video-player__seek__seek {
5318       color: rgba($black, 0.2);
5319     }
5320
5321     .video-player__buttons button {
5322       color: rgba($black, 0.75);
5323
5324       &:active,
5325       &:hover,
5326       &:focus {
5327         color: $black;
5328       }
5329     }
5330
5331     .video-player__time-sep,
5332     .video-player__time-total,
5333     .video-player__time-current {
5334       color: $black;
5335     }
5336
5337     .video-player__volume::before {
5338       background: rgba($black, 0.35);
5339     }
5340   }
5341
5342   .video-player__seek::before,
5343   .video-player__seek__buffer,
5344   .video-player__seek__progress {
5345     top: 0;
5346   }
5347
5348   .video-player__seek__handle {
5349     top: -4px;
5350   }
5351
5352   .video-player__controls {
5353     padding: 0 15px;
5354     padding-top: 10px;
5355     background: transparent;
5356   }
5357 }
5358
5359 .video-player {
5360   overflow: hidden;
5361   position: relative;
5362   background: $base-shadow-color;
5363   max-width: 100%;
5364   border-radius: 4px;
5365   box-sizing: border-box;
5366   direction: ltr;
5367
5368   &.editable {
5369     border-radius: 0;
5370     height: 100% !important;
5371   }
5372
5373   &:focus {
5374     outline: 0;
5375   }
5376
5377   video {
5378     display: block;
5379     max-width: 100vw;
5380     max-height: 80vh;
5381     z-index: 1;
5382   }
5383
5384   &.fullscreen {
5385     width: 100% !important;
5386     height: 100% !important;
5387     margin: 0;
5388
5389     video {
5390       max-width: 100% !important;
5391       max-height: 100% !important;
5392       width: 100% !important;
5393       height: 100% !important;
5394       outline: 0;
5395     }
5396   }
5397
5398   &.inline {
5399     video {
5400       object-fit: contain;
5401       position: relative;
5402       top: 50%;
5403       transform: translateY(-50%);
5404     }
5405   }
5406
5407   &__controls {
5408     position: absolute;
5409     z-index: 2;
5410     bottom: 0;
5411     left: 0;
5412     right: 0;
5413     box-sizing: border-box;
5414     background: linear-gradient(0deg, rgba($base-shadow-color, 0.85) 0, rgba($base-shadow-color, 0.45) 60%, transparent);
5415     padding: 0 15px;
5416     opacity: 0;
5417     transition: opacity .1s ease;
5418
5419     &.active {
5420       opacity: 1;
5421     }
5422   }
5423
5424   &.inactive {
5425     video,
5426     .video-player__controls {
5427       visibility: hidden;
5428     }
5429   }
5430
5431   &__spoiler {
5432     display: none;
5433     position: absolute;
5434     top: 0;
5435     left: 0;
5436     width: 100%;
5437     height: 100%;
5438     z-index: 4;
5439     border: 0;
5440     background: $base-overlay-background;
5441     color: $darker-text-color;
5442     transition: none;
5443     pointer-events: none;
5444
5445     &.active {
5446       display: block;
5447       pointer-events: auto;
5448
5449       &:hover,
5450       &:active,
5451       &:focus {
5452         color: lighten($darker-text-color, 7%);
5453       }
5454     }
5455
5456     &__title {
5457       display: block;
5458       font-size: 14px;
5459     }
5460
5461     &__subtitle {
5462       display: block;
5463       font-size: 11px;
5464       font-weight: 500;
5465     }
5466   }
5467
5468   &__buttons-bar {
5469     display: flex;
5470     justify-content: space-between;
5471     padding-bottom: 10px;
5472
5473     .video-player__download__icon {
5474       color: inherit;
5475     }
5476   }
5477
5478   &__buttons {
5479     font-size: 16px;
5480     white-space: nowrap;
5481     overflow: hidden;
5482     text-overflow: ellipsis;
5483
5484     &.left {
5485       button {
5486         padding-left: 0;
5487       }
5488     }
5489
5490     &.right {
5491       button {
5492         padding-right: 0;
5493       }
5494     }
5495
5496     button {
5497       background: transparent;
5498       padding: 2px 10px;
5499       font-size: 16px;
5500       border: 0;
5501       color: rgba($white, 0.75);
5502
5503       &:active,
5504       &:hover,
5505       &:focus {
5506         color: $white;
5507       }
5508     }
5509   }
5510
5511   &__time-sep,
5512   &__time-total,
5513   &__time-current {
5514     font-size: 14px;
5515     font-weight: 500;
5516   }
5517
5518   &__time-current {
5519     color: $white;
5520     margin-left: 60px;
5521   }
5522
5523   &__time-sep {
5524     display: inline-block;
5525     margin: 0 6px;
5526   }
5527
5528   &__time-sep,
5529   &__time-total {
5530     color: $white;
5531   }
5532
5533   &__volume {
5534     cursor: pointer;
5535     height: 24px;
5536     display: inline;
5537
5538     &::before {
5539       content: "";
5540       width: 50px;
5541       background: rgba($white, 0.35);
5542       border-radius: 4px;
5543       display: block;
5544       position: absolute;
5545       height: 4px;
5546       left: 70px;
5547       bottom: 20px;
5548     }
5549
5550     &__current {
5551       display: block;
5552       position: absolute;
5553       height: 4px;
5554       border-radius: 4px;
5555       left: 70px;
5556       bottom: 20px;
5557       background: lighten($ui-highlight-color, 8%);
5558     }
5559
5560     &__handle {
5561       position: absolute;
5562       z-index: 3;
5563       border-radius: 50%;
5564       width: 12px;
5565       height: 12px;
5566       bottom: 16px;
5567       left: 70px;
5568       transition: opacity .1s ease;
5569       background: lighten($ui-highlight-color, 8%);
5570       box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2);
5571       pointer-events: none;
5572     }
5573   }
5574
5575   &__link {
5576     padding: 2px 10px;
5577
5578     a {
5579       text-decoration: none;
5580       font-size: 14px;
5581       font-weight: 500;
5582       color: $white;
5583
5584       &:hover,
5585       &:active,
5586       &:focus {
5587         text-decoration: underline;
5588       }
5589     }
5590   }
5591
5592   &__seek {
5593     cursor: pointer;
5594     height: 24px;
5595     position: relative;
5596
5597     &::before {
5598       content: "";
5599       width: 100%;
5600       background: rgba($white, 0.35);
5601       border-radius: 4px;
5602       display: block;
5603       position: absolute;
5604       height: 4px;
5605       top: 10px;
5606     }
5607
5608     &__progress,
5609     &__buffer {
5610       display: block;
5611       position: absolute;
5612       height: 4px;
5613       border-radius: 4px;
5614       top: 10px;
5615       background: lighten($ui-highlight-color, 8%);
5616     }
5617
5618     &__buffer {
5619       background: rgba($white, 0.2);
5620     }
5621
5622     &__handle {
5623       position: absolute;
5624       z-index: 3;
5625       opacity: 0;
5626       border-radius: 50%;
5627       width: 12px;
5628       height: 12px;
5629       top: 6px;
5630       margin-left: -6px;
5631       transition: opacity .1s ease;
5632       background: lighten($ui-highlight-color, 8%);
5633       box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2);
5634       pointer-events: none;
5635
5636       &.active {
5637         opacity: 1;
5638       }
5639     }
5640
5641     &:hover {
5642       .video-player__seek__handle {
5643         opacity: 1;
5644       }
5645     }
5646   }
5647
5648   &.detailed,
5649   &.fullscreen {
5650     .video-player__buttons {
5651       button {
5652         padding-top: 10px;
5653         padding-bottom: 10px;
5654       }
5655     }
5656   }
5657 }
5658
5659 .gifv {
5660   video {
5661     max-width: 100vw;
5662     max-height: 80vh;
5663   }
5664 }
5665
5666 .directory {
5667   &__list {
5668     width: 100%;
5669     margin: 10px 0;
5670     transition: opacity 100ms ease-in;
5671
5672     &.loading {
5673       opacity: 0.7;
5674     }
5675
5676     @media screen and (max-width: $no-gap-breakpoint) {
5677       margin: 0;
5678     }
5679   }
5680
5681   &__card {
5682     box-sizing: border-box;
5683     margin-bottom: 10px;
5684
5685     &__img {
5686       height: 125px;
5687       position: relative;
5688       background: darken($ui-base-color, 12%);
5689       overflow: hidden;
5690
5691       img {
5692         display: block;
5693         width: 100%;
5694         height: 100%;
5695         margin: 0;
5696         object-fit: cover;
5697       }
5698     }
5699
5700     &__bar {
5701       display: flex;
5702       align-items: center;
5703       background: lighten($ui-base-color, 4%);
5704       padding: 10px;
5705
5706       &__name {
5707         flex: 1 1 auto;
5708         display: flex;
5709         align-items: center;
5710         text-decoration: none;
5711         overflow: hidden;
5712       }
5713
5714       &__relationship {
5715         width: 23px;
5716         min-height: 1px;
5717         flex: 0 0 auto;
5718       }
5719
5720       .avatar {
5721         flex: 0 0 auto;
5722         width: 48px;
5723         height: 48px;
5724         padding-top: 2px;
5725
5726         img {
5727           width: 100%;
5728           height: 100%;
5729           display: block;
5730           margin: 0;
5731           border-radius: 4px;
5732           background: darken($ui-base-color, 8%);
5733           object-fit: cover;
5734         }
5735       }
5736
5737       .display-name {
5738         margin-left: 15px;
5739         text-align: left;
5740
5741         strong {
5742           font-size: 15px;
5743           color: $primary-text-color;
5744           font-weight: 500;
5745           overflow: hidden;
5746           text-overflow: ellipsis;
5747         }
5748
5749         span {
5750           display: block;
5751           font-size: 14px;
5752           color: $darker-text-color;
5753           font-weight: 400;
5754           overflow: hidden;
5755           text-overflow: ellipsis;
5756         }
5757       }
5758     }
5759
5760     &__extra {
5761       background: $ui-base-color;
5762       display: flex;
5763       align-items: center;
5764       justify-content: center;
5765
5766       .accounts-table__count {
5767         width: 33.33%;
5768         flex: 0 0 auto;
5769         padding: 15px 0;
5770       }
5771
5772       .account__header__content {
5773         box-sizing: border-box;
5774         padding: 15px 10px;
5775         border-bottom: 1px solid lighten($ui-base-color, 8%);
5776         width: 100%;
5777         min-height: 18px + 30px;
5778         white-space: nowrap;
5779         overflow: hidden;
5780         text-overflow: ellipsis;
5781
5782         p {
5783           display: none;
5784
5785           &:first-child {
5786             display: inline;
5787           }
5788         }
5789
5790         br {
5791           display: none;
5792         }
5793       }
5794     }
5795   }
5796 }
5797
5798 .account-gallery__container {
5799   display: flex;
5800   flex-wrap: wrap;
5801   padding: 4px 2px;
5802 }
5803
5804 .account-gallery__item {
5805   border: 0;
5806   box-sizing: border-box;
5807   display: block;
5808   position: relative;
5809   border-radius: 4px;
5810   overflow: hidden;
5811   margin: 2px;
5812
5813   &__icons {
5814     position: absolute;
5815     top: 50%;
5816     left: 50%;
5817     transform: translate(-50%, -50%);
5818     font-size: 24px;
5819   }
5820 }
5821
5822 .notification__filter-bar,
5823 .account__section-headline {
5824   background: darken($ui-base-color, 4%);
5825   border-bottom: 1px solid lighten($ui-base-color, 8%);
5826   cursor: default;
5827   display: flex;
5828   flex-shrink: 0;
5829
5830   button {
5831     background: darken($ui-base-color, 4%);
5832     border: 0;
5833     margin: 0;
5834   }
5835
5836   button,
5837   a {
5838     display: block;
5839     flex: 1 1 auto;
5840     color: $darker-text-color;
5841     padding: 15px 0;
5842     font-size: 14px;
5843     font-weight: 500;
5844     text-align: center;
5845     text-decoration: none;
5846     position: relative;
5847     width: 100%;
5848     white-space: nowrap;
5849
5850     &.active {
5851       color: $secondary-text-color;
5852
5853       &::before,
5854       &::after {
5855         display: block;
5856         content: "";
5857         position: absolute;
5858         bottom: 0;
5859         left: 50%;
5860         width: 0;
5861         height: 0;
5862         transform: translateX(-50%);
5863         border-style: solid;
5864         border-width: 0 10px 10px;
5865         border-color: transparent transparent lighten($ui-base-color, 8%);
5866       }
5867
5868       &::after {
5869         bottom: -1px;
5870         border-color: transparent transparent $ui-base-color;
5871       }
5872     }
5873   }
5874
5875   &.directory__section-headline {
5876     background: darken($ui-base-color, 2%);
5877     border-bottom-color: transparent;
5878
5879     a,
5880     button {
5881       &.active {
5882         &::before {
5883           display: none;
5884         }
5885
5886         &::after {
5887           border-color: transparent transparent darken($ui-base-color, 7%);
5888         }
5889       }
5890     }
5891   }
5892 }
5893
5894 .filter-form {
5895   background: $ui-base-color;
5896
5897   &__column {
5898     padding: 10px 15px;
5899   }
5900
5901   .radio-button {
5902     display: block;
5903   }
5904 }
5905
5906 .radio-button {
5907   font-size: 14px;
5908   position: relative;
5909   display: inline-block;
5910   padding: 6px 0;
5911   line-height: 18px;
5912   cursor: default;
5913   white-space: nowrap;
5914   overflow: hidden;
5915   text-overflow: ellipsis;
5916   cursor: pointer;
5917
5918   input[type=radio],
5919   input[type=checkbox] {
5920     display: none;
5921   }
5922
5923   &__input {
5924     display: inline-block;
5925     position: relative;
5926     border: 1px solid $ui-primary-color;
5927     box-sizing: border-box;
5928     width: 18px;
5929     height: 18px;
5930     flex: 0 0 auto;
5931     margin-right: 10px;
5932     top: -1px;
5933     border-radius: 50%;
5934     vertical-align: middle;
5935
5936     &.checked {
5937       border-color: lighten($ui-highlight-color, 8%);
5938       background: lighten($ui-highlight-color, 8%);
5939     }
5940   }
5941 }
5942
5943 ::-webkit-scrollbar-thumb {
5944   border-radius: 0;
5945 }
5946
5947 .search-popout {
5948   @include search-popout;
5949 }
5950
5951 noscript {
5952   text-align: center;
5953
5954   img {
5955     width: 200px;
5956     opacity: 0.5;
5957     animation: flicker 4s infinite;
5958   }
5959
5960   div {
5961     font-size: 14px;
5962     margin: 30px auto;
5963     color: $secondary-text-color;
5964     max-width: 400px;
5965
5966     a {
5967       color: $highlight-text-color;
5968       text-decoration: underline;
5969
5970       &:hover {
5971         text-decoration: none;
5972       }
5973     }
5974   }
5975 }
5976
5977 @keyframes flicker {
5978   0% { opacity: 1; }
5979   30% { opacity: 0.75; }
5980   100% { opacity: 1; }
5981 }
5982
5983 @media screen and (max-width: 630px) and (max-height: 400px) {
5984   $duration: 400ms;
5985   $delay: 100ms;
5986
5987   .tabs-bar,
5988   .search {
5989     will-change: margin-top;
5990     transition: margin-top $duration $delay;
5991   }
5992
5993   .navigation-bar {
5994     will-change: padding-bottom;
5995     transition: padding-bottom $duration $delay;
5996   }
5997
5998   .navigation-bar {
5999     & > a:first-child {
6000       will-change: margin-top, margin-left, margin-right, width;
6001       transition: margin-top $duration $delay, margin-left $duration ($duration + $delay), margin-right $duration ($duration + $delay);
6002     }
6003
6004     & > .navigation-bar__profile-edit {
6005       will-change: margin-top;
6006       transition: margin-top $duration $delay;
6007     }
6008
6009     .navigation-bar__actions {
6010       & > .icon-button.close {
6011         will-change: opacity transform;
6012         transition: opacity $duration * 0.5 $delay,
6013                     transform $duration $delay;
6014       }
6015
6016       & > .compose__action-bar .icon-button {
6017         will-change: opacity transform;
6018         transition: opacity $duration * 0.5 $delay + $duration * 0.5,
6019                     transform $duration $delay;
6020       }
6021     }
6022   }
6023
6024   .is-composing {
6025     .tabs-bar,
6026     .search {
6027       margin-top: -50px;
6028     }
6029
6030     .navigation-bar {
6031       padding-bottom: 0;
6032
6033       & > a:first-child {
6034         margin: -100px 10px 0 -50px;
6035       }
6036
6037       .navigation-bar__profile {
6038         padding-top: 2px;
6039       }
6040
6041       .navigation-bar__profile-edit {
6042         position: absolute;
6043         margin-top: -60px;
6044       }
6045
6046       .navigation-bar__actions {
6047         .icon-button.close {
6048           pointer-events: auto;
6049           opacity: 1;
6050           transform: scale(1, 1) translate(0, 0);
6051           bottom: 5px;
6052         }
6053
6054         .compose__action-bar .icon-button {
6055           pointer-events: none;
6056           opacity: 0;
6057           transform: scale(0, 1) translate(100%, 0);
6058         }
6059       }
6060     }
6061   }
6062 }
6063
6064 .embed-modal {
6065   width: auto;
6066   max-width: 80vw;
6067   max-height: 80vh;
6068
6069   h4 {
6070     padding: 30px;
6071     font-weight: 500;
6072     font-size: 16px;
6073     text-align: center;
6074   }
6075
6076   .embed-modal__container {
6077     padding: 10px;
6078
6079     .hint {
6080       margin-bottom: 15px;
6081     }
6082
6083     .embed-modal__html {
6084       outline: 0;
6085       box-sizing: border-box;
6086       display: block;
6087       width: 100%;
6088       border: 0;
6089       padding: 10px;
6090       font-family: $font-monospace, monospace;
6091       background: $ui-base-color;
6092       color: $primary-text-color;
6093       font-size: 14px;
6094       margin: 0;
6095       margin-bottom: 15px;
6096       border-radius: 4px;
6097
6098       &::-moz-focus-inner {
6099         border: 0;
6100       }
6101
6102       &::-moz-focus-inner,
6103       &:focus,
6104       &:active {
6105         outline: 0 !important;
6106       }
6107
6108       &:focus {
6109         background: lighten($ui-base-color, 4%);
6110       }
6111
6112       @media screen and (max-width: 600px) {
6113         font-size: 16px;
6114       }
6115     }
6116
6117     .embed-modal__iframe {
6118       width: 400px;
6119       max-width: 100%;
6120       overflow: hidden;
6121       border: 0;
6122       border-radius: 4px;
6123     }
6124   }
6125 }
6126
6127 .account__moved-note {
6128   padding: 14px 10px;
6129   padding-bottom: 16px;
6130   background: lighten($ui-base-color, 4%);
6131   border-top: 1px solid lighten($ui-base-color, 8%);
6132   border-bottom: 1px solid lighten($ui-base-color, 8%);
6133
6134   &__message {
6135     position: relative;
6136     margin-left: 58px;
6137     color: $dark-text-color;
6138     padding: 8px 0;
6139     padding-top: 0;
6140     padding-bottom: 4px;
6141     font-size: 14px;
6142
6143     > span {
6144       display: block;
6145       overflow: hidden;
6146       text-overflow: ellipsis;
6147     }
6148   }
6149
6150   &__icon-wrapper {
6151     left: -26px;
6152     position: absolute;
6153   }
6154
6155   .detailed-status__display-avatar {
6156     position: relative;
6157   }
6158
6159   .detailed-status__display-name {
6160     margin-bottom: 0;
6161   }
6162 }
6163
6164 .column-inline-form {
6165   padding: 15px;
6166   padding-right: 0;
6167   display: flex;
6168   justify-content: flex-start;
6169   align-items: center;
6170   background: lighten($ui-base-color, 4%);
6171
6172   label {
6173     flex: 1 1 auto;
6174
6175     input {
6176       width: 100%;
6177
6178       &:focus {
6179         outline: 0;
6180       }
6181     }
6182   }
6183
6184   .icon-button {
6185     flex: 0 0 auto;
6186     margin: 0 10px;
6187   }
6188 }
6189
6190 .drawer__backdrop {
6191   cursor: pointer;
6192   position: absolute;
6193   top: 0;
6194   left: 0;
6195   width: 100%;
6196   height: 100%;
6197   background: rgba($base-overlay-background, 0.5);
6198 }
6199
6200 .list-editor {
6201   background: $ui-base-color;
6202   flex-direction: column;
6203   border-radius: 8px;
6204   box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
6205   width: 380px;
6206   overflow: hidden;
6207
6208   @media screen and (max-width: 420px) {
6209     width: 90%;
6210   }
6211
6212   h4 {
6213     padding: 15px 0;
6214     background: lighten($ui-base-color, 13%);
6215     font-weight: 500;
6216     font-size: 16px;
6217     text-align: center;
6218     border-radius: 8px 8px 0 0;
6219   }
6220
6221   .drawer__pager {
6222     height: 50vh;
6223   }
6224
6225   .drawer__inner {
6226     border-radius: 0 0 8px 8px;
6227
6228     &.backdrop {
6229       width: calc(100% - 60px);
6230       box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
6231       border-radius: 0 0 0 8px;
6232     }
6233   }
6234
6235   &__accounts {
6236     overflow-y: auto;
6237   }
6238
6239   .account__display-name {
6240     &:hover strong {
6241       text-decoration: none;
6242     }
6243   }
6244
6245   .account__avatar {
6246     cursor: default;
6247   }
6248
6249   .search {
6250     margin-bottom: 0;
6251   }
6252 }
6253
6254 .list-adder {
6255   background: $ui-base-color;
6256   flex-direction: column;
6257   border-radius: 8px;
6258   box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
6259   width: 380px;
6260   overflow: hidden;
6261
6262   @media screen and (max-width: 420px) {
6263     width: 90%;
6264   }
6265
6266   &__account {
6267     background: lighten($ui-base-color, 13%);
6268   }
6269
6270   &__lists {
6271     background: lighten($ui-base-color, 13%);
6272     height: 50vh;
6273     border-radius: 0 0 8px 8px;
6274     overflow-y: auto;
6275   }
6276
6277   .list {
6278     padding: 10px;
6279     border-bottom: 1px solid lighten($ui-base-color, 8%);
6280   }
6281
6282   .list__wrapper {
6283     display: flex;
6284   }
6285
6286   .list__display-name {
6287     flex: 1 1 auto;
6288     overflow: hidden;
6289     text-decoration: none;
6290     font-size: 16px;
6291     padding: 10px;
6292   }
6293 }
6294
6295 .focal-point {
6296   position: relative;
6297   cursor: move;
6298   overflow: hidden;
6299   height: 100%;
6300   display: flex;
6301   justify-content: center;
6302   align-items: center;
6303   background: $base-shadow-color;
6304
6305   img,
6306   video,
6307   canvas {
6308     display: block;
6309     max-height: 80vh;
6310     width: 100%;
6311     height: auto;
6312     margin: 0;
6313     object-fit: contain;
6314     background: $base-shadow-color;
6315   }
6316
6317   &__reticle {
6318     position: absolute;
6319     width: 100px;
6320     height: 100px;
6321     transform: translate(-50%, -50%);
6322     background: url('../images/reticle.png') no-repeat 0 0;
6323     border-radius: 50%;
6324     box-shadow: 0 0 0 9999em rgba($base-shadow-color, 0.35);
6325   }
6326
6327   &__overlay {
6328     position: absolute;
6329     width: 100%;
6330     height: 100%;
6331     top: 0;
6332     left: 0;
6333   }
6334
6335   &__preview {
6336     position: absolute;
6337     bottom: 10px;
6338     right: 10px;
6339     z-index: 2;
6340     cursor: move;
6341     transition: opacity 0.1s ease;
6342
6343     &:hover {
6344       opacity: 0.5;
6345     }
6346
6347     strong {
6348       color: $primary-text-color;
6349       font-size: 14px;
6350       font-weight: 500;
6351       display: block;
6352       margin-bottom: 5px;
6353     }
6354
6355     div {
6356       border-radius: 4px;
6357       box-shadow: 0 0 14px rgba($base-shadow-color, 0.2);
6358     }
6359   }
6360
6361   @media screen and (max-width: 480px) {
6362     img,
6363     video {
6364       max-height: 100%;
6365     }
6366
6367     &__preview {
6368       display: none;
6369     }
6370   }
6371 }
6372
6373 .account__header__content {
6374   color: $darker-text-color;
6375   font-size: 14px;
6376   font-weight: 400;
6377   overflow: hidden;
6378   word-break: normal;
6379   word-wrap: break-word;
6380
6381   p {
6382     margin-bottom: 20px;
6383
6384     &:last-child {
6385       margin-bottom: 0;
6386     }
6387   }
6388
6389   a {
6390     color: inherit;
6391     text-decoration: underline;
6392
6393     &:hover {
6394       text-decoration: none;
6395     }
6396   }
6397 }
6398
6399 .account__header {
6400   overflow: hidden;
6401
6402   &.inactive {
6403     opacity: 0.5;
6404
6405     .account__header__image,
6406     .account__avatar {
6407       filter: grayscale(100%);
6408     }
6409   }
6410
6411   &__info {
6412     position: absolute;
6413     top: 10px;
6414     left: 10px;
6415   }
6416
6417   &__image {
6418     overflow: hidden;
6419     height: 145px;
6420     position: relative;
6421     background: darken($ui-base-color, 4%);
6422
6423     img {
6424       object-fit: cover;
6425       display: block;
6426       width: 100%;
6427       height: 100%;
6428       margin: 0;
6429     }
6430   }
6431
6432   &__bar {
6433     position: relative;
6434     background: lighten($ui-base-color, 4%);
6435     padding: 5px;
6436     border-bottom: 1px solid lighten($ui-base-color, 12%);
6437
6438     .avatar {
6439       display: block;
6440       flex: 0 0 auto;
6441       width: 94px;
6442       margin-left: -2px;
6443
6444       .account__avatar {
6445         background: darken($ui-base-color, 8%);
6446         border: 2px solid lighten($ui-base-color, 4%);
6447       }
6448     }
6449   }
6450
6451   &__tabs {
6452     display: flex;
6453     align-items: flex-start;
6454     padding: 7px 5px;
6455     margin-top: -55px;
6456
6457     &__buttons {
6458       display: flex;
6459       align-items: center;
6460       padding-top: 55px;
6461       overflow: hidden;
6462
6463       .icon-button {
6464         border: 1px solid lighten($ui-base-color, 12%);
6465         border-radius: 4px;
6466         box-sizing: content-box;
6467         padding: 2px;
6468       }
6469
6470       .button {
6471         margin: 0 8px;
6472       }
6473     }
6474
6475     &__name {
6476       padding: 5px;
6477
6478       .account-role {
6479         vertical-align: top;
6480       }
6481
6482       .emojione {
6483         width: 22px;
6484         height: 22px;
6485       }
6486
6487       h1 {
6488         font-size: 16px;
6489         line-height: 24px;
6490         color: $primary-text-color;
6491         font-weight: 500;
6492         overflow: hidden;
6493         white-space: nowrap;
6494         text-overflow: ellipsis;
6495
6496         small {
6497           display: block;
6498           font-size: 14px;
6499           color: $darker-text-color;
6500           font-weight: 400;
6501           overflow: hidden;
6502           text-overflow: ellipsis;
6503         }
6504       }
6505     }
6506
6507     .spacer {
6508       flex: 1 1 auto;
6509     }
6510   }
6511
6512   &__bio {
6513     overflow: hidden;
6514     margin: 0 -5px;
6515
6516     .account__header__content {
6517       padding: 20px 15px;
6518       padding-bottom: 5px;
6519       color: $primary-text-color;
6520     }
6521
6522     .account__header__fields {
6523       margin: 0;
6524       border-top: 1px solid lighten($ui-base-color, 12%);
6525
6526       a {
6527         color: lighten($ui-highlight-color, 8%);
6528       }
6529
6530       dl:first-child .verified {
6531         border-radius: 0 4px 0 0;
6532       }
6533
6534       .verified a {
6535         color: $valid-value-color;
6536       }
6537     }
6538   }
6539
6540   &__extra {
6541     margin-top: 4px;
6542
6543     &__links {
6544       font-size: 14px;
6545       color: $darker-text-color;
6546       padding: 10px 0;
6547
6548       a {
6549         display: inline-block;
6550         color: $darker-text-color;
6551         text-decoration: none;
6552         padding: 5px 10px;
6553         font-weight: 500;
6554
6555         strong {
6556           font-weight: 700;
6557           color: $primary-text-color;
6558         }
6559       }
6560     }
6561   }
6562 }
6563
6564 .trends {
6565   &__header {
6566     color: $dark-text-color;
6567     background: lighten($ui-base-color, 2%);
6568     border-bottom: 1px solid darken($ui-base-color, 4%);
6569     font-weight: 500;
6570     padding: 15px;
6571     font-size: 16px;
6572     cursor: default;
6573
6574     .fa {
6575       display: inline-block;
6576       margin-right: 5px;
6577     }
6578   }
6579
6580   &__item {
6581     display: flex;
6582     align-items: center;
6583     padding: 15px;
6584     border-bottom: 1px solid lighten($ui-base-color, 8%);
6585
6586     &:last-child {
6587       border-bottom: 0;
6588     }
6589
6590     &__name {
6591       flex: 1 1 auto;
6592       color: $dark-text-color;
6593       overflow: hidden;
6594       text-overflow: ellipsis;
6595       white-space: nowrap;
6596
6597       strong {
6598         font-weight: 500;
6599       }
6600
6601       a {
6602         color: $darker-text-color;
6603         text-decoration: none;
6604         font-size: 14px;
6605         font-weight: 500;
6606         display: block;
6607         overflow: hidden;
6608         text-overflow: ellipsis;
6609         white-space: nowrap;
6610
6611         &:hover,
6612         &:focus,
6613         &:active {
6614           span {
6615             text-decoration: underline;
6616           }
6617         }
6618       }
6619     }
6620
6621     &__current {
6622       flex: 0 0 auto;
6623       font-size: 24px;
6624       line-height: 36px;
6625       font-weight: 500;
6626       text-align: right;
6627       padding-right: 15px;
6628       margin-left: 5px;
6629       color: $secondary-text-color;
6630     }
6631
6632     &__sparkline {
6633       flex: 0 0 auto;
6634       width: 50px;
6635
6636       path:first-child {
6637         fill: rgba($highlight-text-color, 0.25) !important;
6638         fill-opacity: 1 !important;
6639       }
6640
6641       path:last-child {
6642         stroke: lighten($highlight-text-color, 6%) !important;
6643         fill: none !important;
6644       }
6645     }
6646   }
6647 }
6648
6649 .conversation {
6650   display: flex;
6651   border-bottom: 1px solid lighten($ui-base-color, 8%);
6652   padding: 5px;
6653   padding-bottom: 0;
6654
6655   &:focus {
6656     background: lighten($ui-base-color, 2%);
6657     outline: 0;
6658   }
6659
6660   &__avatar {
6661     flex: 0 0 auto;
6662     padding: 10px;
6663     padding-top: 12px;
6664     position: relative;
6665     cursor: pointer;
6666   }
6667
6668   &__unread {
6669     display: inline-block;
6670     background: $highlight-text-color;
6671     border-radius: 50%;
6672     width: 0.625rem;
6673     height: 0.625rem;
6674     margin: -.1ex .15em .1ex;
6675   }
6676
6677   &__content {
6678     flex: 1 1 auto;
6679     padding: 10px 5px;
6680     padding-right: 15px;
6681     overflow: hidden;
6682
6683     &__info {
6684       overflow: hidden;
6685       display: flex;
6686       flex-direction: row-reverse;
6687       justify-content: space-between;
6688     }
6689
6690     &__relative-time {
6691       font-size: 15px;
6692       color: $darker-text-color;
6693       padding-left: 15px;
6694     }
6695
6696     &__names {
6697       color: $darker-text-color;
6698       font-size: 15px;
6699       white-space: nowrap;
6700       overflow: hidden;
6701       text-overflow: ellipsis;
6702       margin-bottom: 4px;
6703       flex-basis: 90px;
6704       flex-grow: 1;
6705
6706       a {
6707         color: $primary-text-color;
6708         text-decoration: none;
6709
6710         &:hover,
6711         &:focus,
6712         &:active {
6713           text-decoration: underline;
6714         }
6715       }
6716     }
6717
6718     a {
6719       word-break: break-word;
6720     }
6721   }
6722
6723   &--unread {
6724     background: lighten($ui-base-color, 2%);
6725
6726     &:focus {
6727       background: lighten($ui-base-color, 4%);
6728     }
6729
6730     .conversation__content__info {
6731       font-weight: 700;
6732     }
6733
6734     .conversation__content__relative-time {
6735       color: $primary-text-color;
6736     }
6737   }
6738 }
6739
6740 .announcements {
6741   background: lighten($ui-base-color, 8%);
6742   font-size: 13px;
6743   display: flex;
6744   align-items: flex-end;
6745
6746   &__mastodon {
6747     width: 124px;
6748     flex: 0 0 auto;
6749
6750     @media screen and (max-width: 124px + 300px) {
6751       display: none;
6752     }
6753   }
6754
6755   &__container {
6756     width: calc(100% - 124px);
6757     flex: 0 0 auto;
6758     position: relative;
6759
6760     @media screen and (max-width: 124px + 300px) {
6761       width: 100%;
6762     }
6763   }
6764
6765   &__item {
6766     box-sizing: border-box;
6767     width: 100%;
6768     padding: 15px;
6769     position: relative;
6770     font-size: 15px;
6771     line-height: 20px;
6772     word-wrap: break-word;
6773     font-weight: 400;
6774     max-height: 50vh;
6775     overflow: hidden;
6776     display: flex;
6777     flex-direction: column;
6778
6779     &__range {
6780       display: block;
6781       font-weight: 500;
6782       margin-bottom: 10px;
6783       padding-right: 18px;
6784     }
6785
6786     &__unread {
6787       position: absolute;
6788       top: 19px;
6789       right: 19px;
6790       display: block;
6791       background: $highlight-text-color;
6792       border-radius: 50%;
6793       width: 0.625rem;
6794       height: 0.625rem;
6795     }
6796   }
6797
6798   &__pagination {
6799     padding: 15px;
6800     color: $darker-text-color;
6801     position: absolute;
6802     bottom: 3px;
6803     right: 0;
6804   }
6805 }
6806
6807 .layout-multiple-columns .announcements__mastodon {
6808   display: none;
6809 }
6810
6811 .layout-multiple-columns .announcements__container {
6812   width: 100%;
6813 }
6814
6815 .reactions-bar {
6816   display: flex;
6817   flex-wrap: wrap;
6818   align-items: center;
6819   margin-top: 15px;
6820   margin-left: -2px;
6821   width: calc(100% - (90px - 33px));
6822
6823   &__item {
6824     flex-shrink: 0;
6825     background: lighten($ui-base-color, 12%);
6826     border: 0;
6827     border-radius: 3px;
6828     margin: 2px;
6829     cursor: pointer;
6830     user-select: none;
6831     padding: 0 6px;
6832     display: flex;
6833     align-items: center;
6834     transition: all 100ms ease-in;
6835     transition-property: background-color, color;
6836
6837     &__emoji {
6838       display: block;
6839       margin: 3px 0;
6840       width: 16px;
6841       height: 16px;
6842
6843       img {
6844         display: block;
6845         margin: 0;
6846         width: 100%;
6847         height: 100%;
6848         min-width: auto;
6849         min-height: auto;
6850         vertical-align: bottom;
6851         object-fit: contain;
6852       }
6853     }
6854
6855     &__count {
6856       display: block;
6857       min-width: 9px;
6858       font-size: 13px;
6859       font-weight: 500;
6860       text-align: center;
6861       margin-left: 6px;
6862       color: $darker-text-color;
6863     }
6864
6865     &:hover,
6866     &:focus,
6867     &:active {
6868       background: lighten($ui-base-color, 16%);
6869       transition: all 200ms ease-out;
6870       transition-property: background-color, color;
6871
6872       &__count {
6873         color: lighten($darker-text-color, 4%);
6874       }
6875     }
6876
6877     &.active {
6878       transition: all 100ms ease-in;
6879       transition-property: background-color, color;
6880       background-color: mix(lighten($ui-base-color, 12%), $ui-highlight-color, 80%);
6881
6882       .reactions-bar__item__count {
6883         color: lighten($highlight-text-color, 8%);
6884       }
6885     }
6886   }
6887
6888   .emoji-picker-dropdown {
6889     margin: 2px;
6890   }
6891
6892   &:hover .emoji-button {
6893     opacity: 0.85;
6894   }
6895
6896   .emoji-button {
6897     color: $darker-text-color;
6898     margin: 0;
6899     font-size: 16px;
6900     width: auto;
6901     flex-shrink: 0;
6902     padding: 0 6px;
6903     height: 22px;
6904     display: flex;
6905     align-items: center;
6906     opacity: 0.5;
6907     transition: all 100ms ease-in;
6908     transition-property: background-color, color;
6909
6910     &:hover,
6911     &:active,
6912     &:focus {
6913       opacity: 1;
6914       color: lighten($darker-text-color, 4%);
6915       transition: all 200ms ease-out;
6916       transition-property: background-color, color;
6917     }
6918   }
6919
6920   &--empty {
6921     .emoji-button {
6922       padding: 0;
6923     }
6924   }
6925 }