app/javascript/styles/mastodon/components.scss

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