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 .button.logo-button {
1490   margin-bottom: 15px;
1491 }
1492
1493 .detailed-status__display-name {
1494   color: $secondary-text-color;
1495   display: block;
1496   line-height: 24px;
1497   margin-bottom: 15px;
1498   overflow: hidden;
1499
1500   strong,
1501   span {
1502     display: block;
1503     text-overflow: ellipsis;
1504     overflow: hidden;
1505   }
1506
1507   strong {
1508     font-size: 16px;
1509     color: $primary-text-color;
1510   }
1511 }
1512
1513 .detailed-status__display-avatar {
1514   float: left;
1515   margin-right: 10px;
1516 }
1517
1518 .status__avatar {
1519   height: 48px;
1520   left: 10px;
1521   position: absolute;
1522   top: 10px;
1523   width: 48px;
1524 }
1525
1526 .status__expand {
1527   width: 68px;
1528   position: absolute;
1529   left: 0;
1530   top: 0;
1531   height: 100%;
1532   cursor: pointer;
1533 }
1534
1535 .muted {
1536   .status__content,
1537   .status__content p,
1538   .status__content a {
1539     color: $dark-text-color;
1540   }
1541
1542   .status__display-name strong {
1543     color: $dark-text-color;
1544   }
1545
1546   .status__avatar {
1547     opacity: 0.5;
1548   }
1549
1550   a.status__content__spoiler-link {
1551     background: $ui-base-lighter-color;
1552     color: $inverted-text-color;
1553
1554     &:hover {
1555       background: lighten($ui-base-lighter-color, 7%);
1556       text-decoration: none;
1557     }
1558   }
1559 }
1560
1561 .notification__message {
1562   margin: 0 10px 0 68px;
1563   padding: 8px 0 0;
1564   cursor: default;
1565   color: $darker-text-color;
1566   font-size: 15px;
1567   line-height: 22px;
1568   position: relative;
1569
1570   .fa {
1571     color: $highlight-text-color;
1572   }
1573
1574   > span {
1575     display: inline;
1576     overflow: hidden;
1577     text-overflow: ellipsis;
1578   }
1579 }
1580
1581 .notification__favourite-icon-wrapper {
1582   left: -26px;
1583   position: absolute;
1584
1585   .star-icon {
1586     color: $gold-star;
1587   }
1588 }
1589
1590 .star-icon.active {
1591   color: $gold-star;
1592 }
1593
1594 .notification__display-name {
1595   color: inherit;
1596   font-weight: 500;
1597   text-decoration: none;
1598
1599   &:hover {
1600     color: $primary-text-color;
1601     text-decoration: underline;
1602   }
1603 }
1604
1605 .notification__relative_time {
1606   float: right;
1607 }
1608
1609 .display-name {
1610   display: block;
1611   max-width: 100%;
1612   overflow: hidden;
1613   text-overflow: ellipsis;
1614   white-space: nowrap;
1615 }
1616
1617 .display-name__html {
1618   font-weight: 500;
1619 }
1620
1621 .display-name__account {
1622   font-size: 14px;
1623 }
1624
1625 .status__relative-time,
1626 .detailed-status__datetime {
1627   &:hover {
1628     text-decoration: underline;
1629   }
1630 }
1631
1632 .image-loader {
1633   position: relative;
1634   width: 100%;
1635   height: 100%;
1636   display: flex;
1637   align-items: center;
1638   justify-content: center;
1639   flex-direction: column;
1640
1641   .image-loader__preview-canvas {
1642     max-width: $media-modal-media-max-width;
1643     max-height: $media-modal-media-max-height;
1644     background: url('../images/void.png') repeat;
1645     object-fit: contain;
1646   }
1647
1648   .loading-bar {
1649     position: relative;
1650   }
1651
1652   &.image-loader--amorphous .image-loader__preview-canvas {
1653     display: none;
1654   }
1655 }
1656
1657 .zoomable-image {
1658   position: relative;
1659   width: 100%;
1660   height: 100%;
1661   display: flex;
1662   align-items: center;
1663   justify-content: center;
1664
1665   img {
1666     max-width: $media-modal-media-max-width;
1667     max-height: $media-modal-media-max-height;
1668     width: auto;
1669     height: auto;
1670     object-fit: contain;
1671   }
1672 }
1673
1674 .navigation-bar {
1675   padding: 10px;
1676   display: flex;
1677   align-items: center;
1678   flex-shrink: 0;
1679   cursor: default;
1680   color: $darker-text-color;
1681
1682   strong {
1683     color: $secondary-text-color;
1684   }
1685
1686   a {
1687     color: inherit;
1688   }
1689
1690   .permalink {
1691     text-decoration: none;
1692   }
1693
1694   .navigation-bar__actions {
1695     position: relative;
1696
1697     .icon-button.close {
1698       position: absolute;
1699       pointer-events: none;
1700       transform: scale(0, 1) translate(-100%, 0);
1701       opacity: 0;
1702     }
1703
1704     .compose__action-bar .icon-button {
1705       pointer-events: auto;
1706       transform: scale(1, 1) translate(0, 0);
1707       opacity: 1;
1708     }
1709   }
1710 }
1711
1712 .navigation-bar__profile {
1713   flex: 1 1 auto;
1714   margin-left: 8px;
1715   line-height: 20px;
1716   margin-top: -1px;
1717   overflow: hidden;
1718 }
1719
1720 .navigation-bar__profile-account {
1721   display: block;
1722   font-weight: 500;
1723   overflow: hidden;
1724   text-overflow: ellipsis;
1725 }
1726
1727 .navigation-bar__profile-edit {
1728   color: inherit;
1729   text-decoration: none;
1730 }
1731
1732 .dropdown {
1733   display: inline-block;
1734 }
1735
1736 .dropdown__content {
1737   display: none;
1738   position: absolute;
1739 }
1740
1741 .dropdown-menu__separator {
1742   border-bottom: 1px solid darken($ui-secondary-color, 8%);
1743   margin: 5px 7px 6px;
1744   height: 0;
1745 }
1746
1747 .dropdown-menu {
1748   background: $ui-secondary-color;
1749   padding: 4px 0;
1750   border-radius: 4px;
1751   box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
1752   z-index: 9999;
1753
1754   ul {
1755     list-style: none;
1756   }
1757
1758   &.left {
1759     transform-origin: 100% 50%;
1760   }
1761
1762   &.top {
1763     transform-origin: 50% 100%;
1764   }
1765
1766   &.bottom {
1767     transform-origin: 50% 0;
1768   }
1769
1770   &.right {
1771     transform-origin: 0 50%;
1772   }
1773 }
1774
1775 .dropdown-menu__arrow {
1776   position: absolute;
1777   width: 0;
1778   height: 0;
1779   border: 0 solid transparent;
1780
1781   &.left {
1782     right: -5px;
1783     margin-top: -5px;
1784     border-width: 5px 0 5px 5px;
1785     border-left-color: $ui-secondary-color;
1786   }
1787
1788   &.top {
1789     bottom: -5px;
1790     margin-left: -7px;
1791     border-width: 5px 7px 0;
1792     border-top-color: $ui-secondary-color;
1793   }
1794
1795   &.bottom {
1796     top: -5px;
1797     margin-left: -7px;
1798     border-width: 0 7px 5px;
1799     border-bottom-color: $ui-secondary-color;
1800   }
1801
1802   &.right {
1803     left: -5px;
1804     margin-top: -5px;
1805     border-width: 5px 5px 5px 0;
1806     border-right-color: $ui-secondary-color;
1807   }
1808 }
1809
1810 .dropdown-menu__item {
1811   a {
1812     font-size: 13px;
1813     line-height: 18px;
1814     display: block;
1815     padding: 4px 14px;
1816     box-sizing: border-box;
1817     text-decoration: none;
1818     background: $ui-secondary-color;
1819     color: $inverted-text-color;
1820     overflow: hidden;
1821     text-overflow: ellipsis;
1822     white-space: nowrap;
1823
1824     &:focus,
1825     &:hover,
1826     &:active {
1827       background: $ui-highlight-color;
1828       color: $secondary-text-color;
1829       outline: 0;
1830     }
1831   }
1832 }
1833
1834 .dropdown--active .dropdown__content {
1835   display: block;
1836   line-height: 18px;
1837   max-width: 311px;
1838   right: 0;
1839   text-align: left;
1840   z-index: 9999;
1841
1842   & > ul {
1843     list-style: none;
1844     background: $ui-secondary-color;
1845     padding: 4px 0;
1846     border-radius: 4px;
1847     box-shadow: 0 0 15px rgba($base-shadow-color, 0.4);
1848     min-width: 140px;
1849     position: relative;
1850   }
1851
1852   &.dropdown__right {
1853     right: 0;
1854   }
1855
1856   &.dropdown__left {
1857     & > ul {
1858       left: -98px;
1859     }
1860   }
1861
1862   & > ul > li > a {
1863     font-size: 13px;
1864     line-height: 18px;
1865     display: block;
1866     padding: 4px 14px;
1867     box-sizing: border-box;
1868     text-decoration: none;
1869     background: $ui-secondary-color;
1870     color: $inverted-text-color;
1871     overflow: hidden;
1872     text-overflow: ellipsis;
1873     white-space: nowrap;
1874
1875     &:focus {
1876       outline: 0;
1877     }
1878
1879     &:hover {
1880       background: $ui-highlight-color;
1881       color: $secondary-text-color;
1882     }
1883   }
1884 }
1885
1886 .dropdown__icon {
1887   vertical-align: middle;
1888 }
1889
1890 .columns-area {
1891   display: flex;
1892   flex: 1 1 auto;
1893   flex-direction: row;
1894   justify-content: flex-start;
1895   overflow-x: auto;
1896   position: relative;
1897
1898   &.unscrollable {
1899     overflow-x: hidden;
1900   }
1901
1902   &__panels {
1903     display: flex;
1904     justify-content: center;
1905     width: 100%;
1906     height: 100%;
1907     min-height: 100vh;
1908
1909     &__pane {
1910       height: 100%;
1911       overflow: hidden;
1912       pointer-events: none;
1913       display: flex;
1914       justify-content: flex-end;
1915       min-width: 285px;
1916
1917       &--start {
1918         justify-content: flex-start;
1919       }
1920
1921       &__inner {
1922         position: fixed;
1923         width: 285px;
1924         pointer-events: auto;
1925         height: 100%;
1926       }
1927     }
1928
1929     &__main {
1930       box-sizing: border-box;
1931       width: 100%;
1932       max-width: 600px;
1933       flex: 0 0 auto;
1934       display: flex;
1935       flex-direction: column;
1936
1937       @media screen and (min-width: $no-gap-breakpoint) {
1938         padding: 0 10px;
1939       }
1940     }
1941   }
1942 }
1943
1944 .tabs-bar__wrapper {
1945   background: darken($ui-base-color, 8%);
1946   position: sticky;
1947   top: 0;
1948   z-index: 2;
1949   padding-top: 0;
1950
1951   @media screen and (min-width: $no-gap-breakpoint) {
1952     padding-top: 10px;
1953   }
1954
1955   .tabs-bar {
1956     margin-bottom: 0;
1957
1958     @media screen and (min-width: $no-gap-breakpoint) {
1959       margin-bottom: 10px;
1960     }
1961   }
1962 }
1963
1964 .react-swipeable-view-container {
1965   &,
1966   .columns-area,
1967   .drawer,
1968   .column {
1969     height: 100%;
1970   }
1971 }
1972
1973 .react-swipeable-view-container > * {
1974   display: flex;
1975   align-items: center;
1976   justify-content: center;
1977   height: 100%;
1978 }
1979
1980 .column {
1981   width: 350px;
1982   position: relative;
1983   box-sizing: border-box;
1984   display: flex;
1985   flex-direction: column;
1986
1987   > .scrollable {
1988     background: $ui-base-color;
1989   }
1990 }
1991
1992 .ui {
1993   flex: 0 0 auto;
1994   display: flex;
1995   flex-direction: column;
1996   width: 100%;
1997   height: 100%;
1998 }
1999
2000 .drawer {
2001   width: 300px;
2002   box-sizing: border-box;
2003   display: flex;
2004   flex-direction: column;
2005   overflow-y: hidden;
2006 }
2007
2008 .drawer__tab {
2009   display: block;
2010   flex: 1 1 auto;
2011   padding: 15px 5px 13px;
2012   color: $darker-text-color;
2013   text-decoration: none;
2014   text-align: center;
2015   font-size: 16px;
2016   border-bottom: 2px solid transparent;
2017 }
2018
2019 .column,
2020 .drawer {
2021   flex: 1 1 100%;
2022   overflow: hidden;
2023 }
2024
2025 @media screen and (min-width: 631px) {
2026   .columns-area {
2027     padding: 0;
2028   }
2029
2030   .column,
2031   .drawer {
2032     flex: 0 0 auto;
2033     padding: 10px;
2034     padding-left: 5px;
2035     padding-right: 5px;
2036
2037     &:first-child {
2038       padding-left: 10px;
2039     }
2040
2041     &:last-child {
2042       padding-right: 10px;
2043     }
2044   }
2045
2046   .columns-area > div {
2047     .column,
2048     .drawer {
2049       padding-left: 5px;
2050       padding-right: 5px;
2051     }
2052   }
2053 }
2054
2055 .tabs-bar {
2056   box-sizing: border-box;
2057   display: flex;
2058   background: lighten($ui-base-color, 8%);
2059   flex: 0 0 auto;
2060   overflow-y: auto;
2061 }
2062
2063 .tabs-bar__link {
2064   display: block;
2065   flex: 1 1 auto;
2066   padding: 15px 10px;
2067   padding-bottom: 13px;
2068   color: $primary-text-color;
2069   text-decoration: none;
2070   text-align: center;
2071   font-size: 14px;
2072   font-weight: 500;
2073   border-bottom: 2px solid lighten($ui-base-color, 8%);
2074   transition: all 50ms linear;
2075   transition-property: border-bottom, background, color;
2076
2077   .fa {
2078     font-weight: 400;
2079     font-size: 16px;
2080   }
2081
2082   &:hover,
2083   &:focus,
2084   &:active {
2085     @media screen and (min-width: 631px) {
2086       background: lighten($ui-base-color, 14%);
2087       border-bottom-color: lighten($ui-base-color, 14%);
2088     }
2089   }
2090
2091   &.active {
2092     border-bottom: 2px solid $highlight-text-color;
2093     color: $highlight-text-color;
2094   }
2095
2096   span {
2097     margin-left: 5px;
2098     display: none;
2099   }
2100 }
2101
2102 @media screen and (min-width: 600px) {
2103   .tabs-bar__link {
2104     span {
2105       display: inline;
2106     }
2107   }
2108 }
2109
2110 .columns-area--mobile {
2111   flex-direction: column;
2112   width: 100%;
2113   height: 100%;
2114   margin: 0 auto;
2115
2116   .column,
2117   .drawer {
2118     width: 100%;
2119     height: 100%;
2120     padding: 0;
2121   }
2122
2123   .directory__list {
2124     display: grid;
2125     grid-gap: 10px;
2126     grid-template-columns: minmax(0, 50%) minmax(0, 50%);
2127
2128     @media screen and (max-width: $no-gap-breakpoint) {
2129       display: block;
2130     }
2131   }
2132
2133   .directory__card {
2134     margin-bottom: 0;
2135   }
2136
2137   .filter-form {
2138     display: flex;
2139   }
2140
2141   .autosuggest-textarea__textarea {
2142     font-size: 16px;
2143   }
2144
2145   .search__input {
2146     line-height: 18px;
2147     font-size: 16px;
2148     padding: 15px;
2149     padding-right: 30px;
2150   }
2151
2152   .search__icon .fa {
2153     top: 15px;
2154   }
2155
2156   .scrollable {
2157     overflow: visible;
2158
2159     @supports(display: grid) {
2160       contain: content;
2161     }
2162   }
2163
2164   @media screen and (min-width: $no-gap-breakpoint) {
2165     padding: 10px 0;
2166     padding-top: 0;
2167   }
2168
2169   @media screen and (min-width: 630px) {
2170     .detailed-status {
2171       padding: 15px;
2172
2173       .media-gallery,
2174       .video-player,
2175       .audio-player {
2176         margin-top: 15px;
2177       }
2178     }
2179
2180     .account__header__bar {
2181       padding: 5px 10px;
2182     }
2183
2184     .navigation-bar,
2185     .compose-form {
2186       padding: 15px;
2187     }
2188
2189     .compose-form .compose-form__publish .compose-form__publish-button-wrapper {
2190       padding-top: 15px;
2191     }
2192
2193     .status {
2194       padding: 15px 15px 15px (48px + 15px * 2);
2195       min-height: 48px + 2px;
2196
2197       &__avatar {
2198         left: 15px;
2199         top: 17px;
2200       }
2201
2202       &__content {
2203         padding-top: 5px;
2204       }
2205
2206       &__prepend {
2207         margin-left: 48px + 15px * 2;
2208         padding-top: 15px;
2209       }
2210
2211       &__prepend-icon-wrapper {
2212         left: -32px;
2213       }
2214
2215       .media-gallery,
2216       &__action-bar,
2217       .video-player,
2218       .audio-player {
2219         margin-top: 10px;
2220       }
2221     }
2222
2223     .account {
2224       padding: 15px 10px;
2225
2226       &__header__bio {
2227         margin: 0 -10px;
2228       }
2229     }
2230
2231     .notification {
2232       &__message {
2233         margin-left: 48px + 15px * 2;
2234         padding-top: 15px;
2235       }
2236
2237       &__favourite-icon-wrapper {
2238         left: -32px;
2239       }
2240
2241       .status {
2242         padding-top: 8px;
2243       }
2244
2245       .account {
2246         padding-top: 8px;
2247       }
2248
2249       .account__avatar-wrapper {
2250         margin-left: 17px;
2251         margin-right: 15px;
2252       }
2253     }
2254   }
2255 }
2256
2257 .floating-action-button {
2258   position: fixed;
2259   display: flex;
2260   justify-content: center;
2261   align-items: center;
2262   width: 3.9375rem;
2263   height: 3.9375rem;
2264   bottom: 1.3125rem;
2265   right: 1.3125rem;
2266   background: darken($ui-highlight-color, 3%);
2267   color: $white;
2268   border-radius: 50%;
2269   font-size: 21px;
2270   line-height: 21px;
2271   text-decoration: none;
2272   box-shadow: 2px 3px 9px rgba($base-shadow-color, 0.4);
2273
2274   &:hover,
2275   &:focus,
2276   &:active {
2277     background: lighten($ui-highlight-color, 7%);
2278   }
2279 }
2280
2281 @media screen and (min-width: $no-gap-breakpoint) {
2282   .tabs-bar {
2283     width: 100%;
2284   }
2285
2286   .react-swipeable-view-container .columns-area--mobile {
2287     height: calc(100% - 10px) !important;
2288   }
2289
2290   .getting-started__wrapper,
2291   .search {
2292     margin-bottom: 10px;
2293   }
2294 }
2295
2296 @media screen and (max-width: 600px + (285px * 1) + (10px * 1)) {
2297   .columns-area__panels__pane--compositional {
2298     display: none;
2299   }
2300 }
2301
2302 @media screen and (min-width: 600px + (285px * 1) + (10px * 1)) {
2303   .floating-action-button,
2304   .tabs-bar__link.optional {
2305     display: none;
2306   }
2307
2308   .search-page .search {
2309     display: none;
2310   }
2311 }
2312
2313 @media screen and (max-width: 600px + (285px * 2) + (10px * 2)) {
2314   .columns-area__panels__pane--navigational {
2315     display: none;
2316   }
2317 }
2318
2319 @media screen and (min-width: 600px + (285px * 2) + (10px * 2)) {
2320   .tabs-bar {
2321     display: none;
2322   }
2323 }
2324
2325 .icon-with-badge {
2326   position: relative;
2327
2328   &__badge {
2329     position: absolute;
2330     left: 9px;
2331     top: -13px;
2332     background: $ui-highlight-color;
2333     border: 2px solid lighten($ui-base-color, 8%);
2334     padding: 1px 6px;
2335     border-radius: 6px;
2336     font-size: 10px;
2337     font-weight: 500;
2338     line-height: 14px;
2339     color: $primary-text-color;
2340   }
2341 }
2342
2343 .column-link--transparent .icon-with-badge__badge {
2344   border-color: darken($ui-base-color, 8%);
2345 }
2346
2347 .compose-panel {
2348   width: 285px;
2349   margin-top: 10px;
2350   display: flex;
2351   flex-direction: column;
2352   height: calc(100% - 10px);
2353   overflow-y: hidden;
2354
2355   .navigation-bar {
2356     padding-top: 20px;
2357     padding-bottom: 20px;
2358     flex: 0 1 48px;
2359     min-height: 20px;
2360   }
2361
2362   .flex-spacer {
2363     background: transparent;
2364   }
2365
2366   .compose-form {
2367     flex: 1;
2368     overflow-y: hidden;
2369     display: flex;
2370     flex-direction: column;
2371     min-height: 310px;
2372     padding-bottom: 71px;
2373     margin-bottom: -71px;
2374   }
2375
2376   .compose-form__autosuggest-wrapper {
2377     overflow-y: auto;
2378     background-color: $white;
2379     border-radius: 4px 4px 0 0;
2380     flex: 0 1 auto;
2381   }
2382
2383   .autosuggest-textarea__textarea {
2384     overflow-y: hidden;
2385   }
2386
2387   .compose-form__upload-thumbnail {
2388     height: 80px;
2389   }
2390 }
2391
2392 .navigation-panel {
2393   margin-top: 10px;
2394   margin-bottom: 10px;
2395   height: calc(100% - 20px);
2396   overflow-y: auto;
2397   display: flex;
2398   flex-direction: column;
2399
2400   & > a {
2401     flex: 0 0 auto;
2402   }
2403
2404   hr {
2405     flex: 0 0 auto;
2406     border: 0;
2407     background: transparent;
2408     border-top: 1px solid lighten($ui-base-color, 4%);
2409     margin: 10px 0;
2410   }
2411
2412   .flex-spacer {
2413     background: transparent;
2414   }
2415 }
2416
2417 .drawer__pager {
2418   box-sizing: border-box;
2419   padding: 0;
2420   flex-grow: 1;
2421   position: relative;
2422   overflow: hidden;
2423   display: flex;
2424 }
2425
2426 .drawer__inner {
2427   position: absolute;
2428   top: 0;
2429   left: 0;
2430   background: lighten($ui-base-color, 13%);
2431   box-sizing: border-box;
2432   padding: 0;
2433   display: flex;
2434   flex-direction: column;
2435   overflow: hidden;
2436   overflow-y: auto;
2437   width: 100%;
2438   height: 100%;
2439
2440   &.darker {
2441     background: $ui-base-color;
2442   }
2443 }
2444
2445 .drawer__inner__mastodon {
2446   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;
2447   flex: 1;
2448   min-height: 47px;
2449   display: none;
2450
2451   > img {
2452     display: block;
2453     object-fit: contain;
2454     object-position: bottom left;
2455     width: 100%;
2456     height: 100%;
2457     pointer-events: none;
2458     user-drag: none;
2459     user-select: none;
2460   }
2461
2462   @media screen and (min-height: 640px) {
2463     display: block;
2464   }
2465 }
2466
2467 .pseudo-drawer {
2468   background: lighten($ui-base-color, 13%);
2469   font-size: 13px;
2470   text-align: left;
2471 }
2472
2473 .drawer__header {
2474   flex: 0 0 auto;
2475   font-size: 16px;
2476   background: lighten($ui-base-color, 8%);
2477   margin-bottom: 10px;
2478   display: flex;
2479   flex-direction: row;
2480
2481   a {
2482     transition: background 100ms ease-in;
2483
2484     &:hover {
2485       background: lighten($ui-base-color, 3%);
2486       transition: background 200ms ease-out;
2487     }
2488   }
2489 }
2490
2491 .scrollable {
2492   overflow-y: scroll;
2493   overflow-x: hidden;
2494   flex: 1 1 auto;
2495   -webkit-overflow-scrolling: touch;
2496   will-change: transform; // improves perf in mobile Chrome
2497
2498   &.optionally-scrollable {
2499     overflow-y: auto;
2500   }
2501
2502   @supports(display: grid) { // hack to fix Chrome <57
2503     contain: strict;
2504   }
2505
2506   &--flex {
2507     display: flex;
2508     flex-direction: column;
2509   }
2510
2511   &__append {
2512     flex: 1 1 auto;
2513     position: relative;
2514     min-height: 120px;
2515   }
2516 }
2517
2518 .scrollable.fullscreen {
2519   @supports(display: grid) { // hack to fix Chrome <57
2520     contain: none;
2521   }
2522 }
2523
2524 .column-back-button {
2525   box-sizing: border-box;
2526   width: 100%;
2527   background: lighten($ui-base-color, 4%);
2528   color: $highlight-text-color;
2529   cursor: pointer;
2530   flex: 0 0 auto;
2531   font-size: 16px;
2532   line-height: inherit;
2533   border: 0;
2534   text-align: unset;
2535   padding: 15px;
2536   margin: 0;
2537   z-index: 3;
2538   outline: 0;
2539
2540   &:hover {
2541     text-decoration: underline;
2542   }
2543 }
2544
2545 .column-header__back-button {
2546   background: lighten($ui-base-color, 4%);
2547   border: 0;
2548   font-family: inherit;
2549   color: $highlight-text-color;
2550   cursor: pointer;
2551   white-space: nowrap;
2552   font-size: 16px;
2553   padding: 0 5px 0 0;
2554   z-index: 3;
2555
2556   &:hover {
2557     text-decoration: underline;
2558   }
2559
2560   &:last-child {
2561     padding: 0 15px 0 0;
2562   }
2563 }
2564
2565 .column-back-button__icon {
2566   display: inline-block;
2567   margin-right: 5px;
2568 }
2569
2570 .column-back-button--slim {
2571   position: relative;
2572 }
2573
2574 .column-back-button--slim-button {
2575   cursor: pointer;
2576   flex: 0 0 auto;
2577   font-size: 16px;
2578   padding: 15px;
2579   position: absolute;
2580   right: 0;
2581   top: -48px;
2582 }
2583
2584 .react-toggle {
2585   display: inline-block;
2586   position: relative;
2587   cursor: pointer;
2588   background-color: transparent;
2589   border: 0;
2590   padding: 0;
2591   user-select: none;
2592   -webkit-tap-highlight-color: rgba($base-overlay-background, 0);
2593   -webkit-tap-highlight-color: transparent;
2594 }
2595
2596 .react-toggle-screenreader-only {
2597   border: 0;
2598   clip: rect(0 0 0 0);
2599   height: 1px;
2600   margin: -1px;
2601   overflow: hidden;
2602   padding: 0;
2603   position: absolute;
2604   width: 1px;
2605 }
2606
2607 .react-toggle--disabled {
2608   cursor: not-allowed;
2609   opacity: 0.5;
2610   transition: opacity 0.25s;
2611 }
2612
2613 .react-toggle-track {
2614   width: 50px;
2615   height: 24px;
2616   padding: 0;
2617   border-radius: 30px;
2618   background-color: $ui-base-color;
2619   transition: background-color 0.2s ease;
2620 }
2621
2622 .react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
2623   background-color: darken($ui-base-color, 10%);
2624 }
2625
2626 .react-toggle--checked .react-toggle-track {
2627   background-color: $ui-highlight-color;
2628 }
2629
2630 .react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track {
2631   background-color: lighten($ui-highlight-color, 10%);
2632 }
2633
2634 .react-toggle-track-check {
2635   position: absolute;
2636   width: 14px;
2637   height: 10px;
2638   top: 0;
2639   bottom: 0;
2640   margin-top: auto;
2641   margin-bottom: auto;
2642   line-height: 0;
2643   left: 8px;
2644   opacity: 0;
2645   transition: opacity 0.25s ease;
2646 }
2647
2648 .react-toggle--checked .react-toggle-track-check {
2649   opacity: 1;
2650   transition: opacity 0.25s ease;
2651 }
2652
2653 .react-toggle-track-x {
2654   position: absolute;
2655   width: 10px;
2656   height: 10px;
2657   top: 0;
2658   bottom: 0;
2659   margin-top: auto;
2660   margin-bottom: auto;
2661   line-height: 0;
2662   right: 10px;
2663   opacity: 1;
2664   transition: opacity 0.25s ease;
2665 }
2666
2667 .react-toggle--checked .react-toggle-track-x {
2668   opacity: 0;
2669 }
2670
2671 .react-toggle-thumb {
2672   position: absolute;
2673   top: 1px;
2674   left: 1px;
2675   width: 22px;
2676   height: 22px;
2677   border: 1px solid $ui-base-color;
2678   border-radius: 50%;
2679   background-color: darken($simple-background-color, 2%);
2680   box-sizing: border-box;
2681   transition: all 0.25s ease;
2682   transition-property: border-color, left;
2683 }
2684
2685 .react-toggle--checked .react-toggle-thumb {
2686   left: 27px;
2687   border-color: $ui-highlight-color;
2688 }
2689
2690 .column-link {
2691   background: lighten($ui-base-color, 8%);
2692   color: $primary-text-color;
2693   display: block;
2694   font-size: 16px;
2695   padding: 15px;
2696   text-decoration: none;
2697
2698   &:hover,
2699   &:focus,
2700   &:active {
2701     background: lighten($ui-base-color, 11%);
2702   }
2703
2704   &:focus {
2705     outline: 0;
2706   }
2707
2708   &--transparent {
2709     background: transparent;
2710     color: $ui-secondary-color;
2711
2712     &:hover,
2713     &:focus,
2714     &:active {
2715       background: transparent;
2716       color: $primary-text-color;
2717     }
2718
2719     &.active {
2720       color: $ui-highlight-color;
2721     }
2722   }
2723 }
2724
2725 .column-link__icon {
2726   display: inline-block;
2727   margin-right: 5px;
2728 }
2729
2730 .column-link__badge {
2731   display: inline-block;
2732   border-radius: 4px;
2733   font-size: 12px;
2734   line-height: 19px;
2735   font-weight: 500;
2736   background: $ui-base-color;
2737   padding: 4px 8px;
2738   margin: -6px 10px;
2739 }
2740
2741 .column-subheading {
2742   background: $ui-base-color;
2743   color: $dark-text-color;
2744   padding: 8px 20px;
2745   font-size: 12px;
2746   font-weight: 500;
2747   text-transform: uppercase;
2748   cursor: default;
2749 }
2750
2751 .getting-started__wrapper,
2752 .getting-started,
2753 .flex-spacer {
2754   background: $ui-base-color;
2755 }
2756
2757 .getting-started__wrapper {
2758   flex: 0 0 auto;
2759 }
2760
2761 .flex-spacer {
2762   flex: 1 1 auto;
2763 }
2764
2765 .getting-started {
2766   color: $dark-text-color;
2767   overflow: auto;
2768
2769   &__footer {
2770     flex: 0 0 auto;
2771     padding: 10px;
2772     padding-top: 20px;
2773
2774     ul {
2775       margin-bottom: 10px;
2776     }
2777
2778     ul li {
2779       display: inline;
2780     }
2781
2782     p {
2783       color: $dark-text-color;
2784       font-size: 13px;
2785       margin-bottom: 20px;
2786
2787       a {
2788         color: $dark-text-color;
2789         text-decoration: underline;
2790       }
2791     }
2792
2793     a {
2794       text-decoration: none;
2795       color: $darker-text-color;
2796
2797       &:hover,
2798       &:focus,
2799       &:active {
2800         text-decoration: underline;
2801       }
2802     }
2803   }
2804
2805   &__trends {
2806     flex: 0 1 auto;
2807     opacity: 1;
2808     animation: fade 150ms linear;
2809     margin-top: 10px;
2810
2811     h4 {
2812       font-size: 12px;
2813       text-transform: uppercase;
2814       color: $darker-text-color;
2815       padding: 10px;
2816       font-weight: 500;
2817       border-bottom: 1px solid lighten($ui-base-color, 8%);
2818     }
2819
2820     @media screen and (max-height: 810px) {
2821       .trends__item:nth-child(3) {
2822         display: none;
2823       }
2824     }
2825
2826     @media screen and (max-height: 720px) {
2827       .trends__item:nth-child(2) {
2828         display: none;
2829       }
2830     }
2831
2832     @media screen and (max-height: 670px) {
2833       display: none;
2834     }
2835
2836     .trends__item {
2837       border-bottom: 0;
2838       padding: 10px;
2839
2840       &__current {
2841         color: $darker-text-color;
2842       }
2843     }
2844   }
2845 }
2846
2847 .keyboard-shortcuts {
2848   padding: 8px 0 0;
2849   overflow: hidden;
2850
2851   thead {
2852     position: absolute;
2853     left: -9999px;
2854   }
2855
2856   td {
2857     padding: 0 10px 8px;
2858   }
2859
2860   kbd {
2861     display: inline-block;
2862     padding: 3px 5px;
2863     background-color: lighten($ui-base-color, 8%);
2864     border: 1px solid darken($ui-base-color, 4%);
2865   }
2866 }
2867
2868 .setting-text {
2869   display: block;
2870   box-sizing: border-box;
2871   width: 100%;
2872   margin: 0;
2873   color: $inverted-text-color;
2874   background: $simple-background-color;
2875   padding: 10px;
2876   font-family: inherit;
2877   font-size: 14px;
2878   resize: vertical;
2879   border: 0;
2880   outline: 0;
2881   border-radius: 4px;
2882
2883   &:focus {
2884     outline: 0;
2885   }
2886
2887   @media screen and (max-width: 600px) {
2888     font-size: 16px;
2889   }
2890 }
2891
2892 .no-reduce-motion button.icon-button i.fa-retweet {
2893   background-position: 0 0;
2894   height: 19px;
2895   transition: background-position 0.9s steps(10);
2896   transition-duration: 0s;
2897   vertical-align: middle;
2898   width: 22px;
2899
2900   &::before {
2901     display: none !important;
2902   }
2903
2904 }
2905
2906 .no-reduce-motion button.icon-button.active i.fa-retweet {
2907   transition-duration: 0.9s;
2908   background-position: 0 100%;
2909 }
2910
2911 .reduce-motion button.icon-button i.fa-retweet {
2912   color: $action-button-color;
2913   transition: color 100ms ease-in;
2914 }
2915
2916 .reduce-motion button.icon-button.active i.fa-retweet {
2917   color: $highlight-text-color;
2918 }
2919
2920 .status-card {
2921   display: flex;
2922   font-size: 14px;
2923   border: 1px solid lighten($ui-base-color, 8%);
2924   border-radius: 4px;
2925   color: $dark-text-color;
2926   margin-top: 14px;
2927   text-decoration: none;
2928   overflow: hidden;
2929
2930   &__actions {
2931     bottom: 0;
2932     left: 0;
2933     position: absolute;
2934     right: 0;
2935     top: 0;
2936     display: flex;
2937     justify-content: center;
2938     align-items: center;
2939
2940     & > div {
2941       background: rgba($base-shadow-color, 0.6);
2942       border-radius: 8px;
2943       padding: 12px 9px;
2944       flex: 0 0 auto;
2945       display: flex;
2946       justify-content: center;
2947       align-items: center;
2948     }
2949
2950     button,
2951     a {
2952       display: inline;
2953       color: $secondary-text-color;
2954       background: transparent;
2955       border: 0;
2956       padding: 0 8px;
2957       text-decoration: none;
2958       font-size: 18px;
2959       line-height: 18px;
2960
2961       &:hover,
2962       &:active,
2963       &:focus {
2964         color: $primary-text-color;
2965       }
2966     }
2967
2968     a {
2969       font-size: 19px;
2970       position: relative;
2971       bottom: -1px;
2972     }
2973   }
2974 }
2975
2976 a.status-card {
2977   cursor: pointer;
2978
2979   &:hover {
2980     background: lighten($ui-base-color, 8%);
2981   }
2982 }
2983
2984 .status-card-photo {
2985   cursor: zoom-in;
2986   display: block;
2987   text-decoration: none;
2988   width: 100%;
2989   height: auto;
2990   margin: 0;
2991 }
2992
2993 .status-card-video {
2994   iframe {
2995     width: 100%;
2996     height: 100%;
2997   }
2998 }
2999
3000 .status-card__title {
3001   display: block;
3002   font-weight: 500;
3003   margin-bottom: 5px;
3004   color: $darker-text-color;
3005   overflow: hidden;
3006   text-overflow: ellipsis;
3007   white-space: nowrap;
3008   text-decoration: none;
3009 }
3010
3011 .status-card__content {
3012   flex: 1 1 auto;
3013   overflow: hidden;
3014   padding: 14px 14px 14px 8px;
3015 }
3016
3017 .status-card__description {
3018   color: $darker-text-color;
3019 }
3020
3021 .status-card__host {
3022   display: block;
3023   margin-top: 5px;
3024   font-size: 13px;
3025   overflow: hidden;
3026   text-overflow: ellipsis;
3027   white-space: nowrap;
3028 }
3029
3030 .status-card__image {
3031   flex: 0 0 100px;
3032   background: lighten($ui-base-color, 8%);
3033   position: relative;
3034
3035   & > .fa {
3036     font-size: 21px;
3037     position: absolute;
3038     transform-origin: 50% 50%;
3039     top: 50%;
3040     left: 50%;
3041     transform: translate(-50%, -50%);
3042   }
3043 }
3044
3045 .status-card.horizontal {
3046   display: block;
3047
3048   .status-card__image {
3049     width: 100%;
3050   }
3051
3052   .status-card__image-image {
3053     border-radius: 4px 4px 0 0;
3054   }
3055
3056   .status-card__title {
3057     white-space: inherit;
3058   }
3059 }
3060
3061 .status-card.compact {
3062   border-color: lighten($ui-base-color, 4%);
3063
3064   &.interactive {
3065     border: 0;
3066   }
3067
3068   .status-card__content {
3069     padding: 8px;
3070     padding-top: 10px;
3071   }
3072
3073   .status-card__title {
3074     white-space: nowrap;
3075   }
3076
3077   .status-card__image {
3078     flex: 0 0 60px;
3079   }
3080 }
3081
3082 a.status-card.compact:hover {
3083   background-color: lighten($ui-base-color, 4%);
3084 }
3085
3086 .status-card__image-image {
3087   border-radius: 4px 0 0 4px;
3088   display: block;
3089   margin: 0;
3090   width: 100%;
3091   height: 100%;
3092   object-fit: cover;
3093   background-size: cover;
3094   background-position: center center;
3095 }
3096
3097 .load-more {
3098   display: block;
3099   color: $dark-text-color;
3100   background-color: transparent;
3101   border: 0;
3102   font-size: inherit;
3103   text-align: center;
3104   line-height: inherit;
3105   margin: 0;
3106   padding: 15px;
3107   box-sizing: border-box;
3108   width: 100%;
3109   clear: both;
3110   text-decoration: none;
3111
3112   &:hover {
3113     background: lighten($ui-base-color, 2%);
3114   }
3115 }
3116
3117 .load-gap {
3118   border-bottom: 1px solid lighten($ui-base-color, 8%);
3119 }
3120
3121 .regeneration-indicator {
3122   text-align: center;
3123   font-size: 16px;
3124   font-weight: 500;
3125   color: $dark-text-color;
3126   background: $ui-base-color;
3127   cursor: default;
3128   display: flex;
3129   flex: 1 1 auto;
3130   align-items: center;
3131   justify-content: center;
3132   padding: 20px;
3133
3134   & > div {
3135     width: 100%;
3136     background: transparent;
3137     padding-top: 0;
3138   }
3139
3140   &__figure {
3141     background: url('../images/elephant_ui_working.svg') no-repeat center 0;
3142     width: 100%;
3143     height: 160px;
3144     background-size: contain;
3145     position: absolute;
3146     top: 50%;
3147     left: 50%;
3148     transform: translate(-50%, -50%);
3149   }
3150
3151   &.missing-indicator {
3152     padding-top: 20px + 48px;
3153
3154     .regeneration-indicator__figure {
3155       background-image: url('../images/elephant_ui_disappointed.svg');
3156     }
3157   }
3158
3159   &__label {
3160     margin-top: 200px;
3161
3162     strong {
3163       display: block;
3164       margin-bottom: 10px;
3165       color: $dark-text-color;
3166     }
3167
3168     span {
3169       font-size: 15px;
3170       font-weight: 400;
3171     }
3172   }
3173 }
3174
3175 .column-header__wrapper {
3176   position: relative;
3177   flex: 0 0 auto;
3178
3179   &.active {
3180     &::before {
3181       display: block;
3182       content: "";
3183       position: absolute;
3184       top: 35px;
3185       left: 0;
3186       right: 0;
3187       margin: 0 auto;
3188       width: 60%;
3189       pointer-events: none;
3190       height: 28px;
3191       z-index: 1;
3192       background: radial-gradient(ellipse, rgba($ui-highlight-color, 0.23) 0%, rgba($ui-highlight-color, 0) 60%);
3193     }
3194   }
3195 }
3196
3197 .column-header {
3198   display: flex;
3199   font-size: 16px;
3200   background: lighten($ui-base-color, 4%);
3201   flex: 0 0 auto;
3202   cursor: pointer;
3203   position: relative;
3204   z-index: 2;
3205   outline: 0;
3206   overflow: hidden;
3207
3208   & > button {
3209     margin: 0;
3210     border: 0;
3211     padding: 15px 0 15px 15px;
3212     color: inherit;
3213     background: transparent;
3214     font: inherit;
3215     text-align: left;
3216     text-overflow: ellipsis;
3217     overflow: hidden;
3218     white-space: nowrap;
3219     flex: 1;
3220   }
3221
3222   & > .column-header__back-button {
3223     color: $highlight-text-color;
3224   }
3225
3226   &.active {
3227     box-shadow: 0 1px 0 rgba($highlight-text-color, 0.3);
3228
3229     .column-header__icon {
3230       color: $highlight-text-color;
3231       text-shadow: 0 0 10px rgba($highlight-text-color, 0.4);
3232     }
3233   }
3234
3235   &:focus,
3236   &:active {
3237     outline: 0;
3238   }
3239 }
3240
3241 .column-header__buttons {
3242   height: 48px;
3243   display: flex;
3244 }
3245
3246 .column-header__links {
3247   margin-bottom: 14px;
3248 }
3249
3250 .column-header__links .text-btn {
3251   margin-right: 10px;
3252 }
3253
3254 .column-header__button {
3255   background: lighten($ui-base-color, 4%);
3256   border: 0;
3257   color: $darker-text-color;
3258   cursor: pointer;
3259   font-size: 16px;
3260   padding: 0 15px;
3261
3262   &:hover {
3263     color: lighten($darker-text-color, 7%);
3264   }
3265
3266   &.active {
3267     color: $primary-text-color;
3268     background: lighten($ui-base-color, 8%);
3269
3270     &:hover {
3271       color: $primary-text-color;
3272       background: lighten($ui-base-color, 8%);
3273     }
3274   }
3275 }
3276
3277 .column-header__collapsible {
3278   max-height: 70vh;
3279   overflow: hidden;
3280   overflow-y: auto;
3281   color: $darker-text-color;
3282   transition: max-height 150ms ease-in-out, opacity 300ms linear;
3283   opacity: 1;
3284
3285   &.collapsed {
3286     max-height: 0;
3287     opacity: 0.5;
3288   }
3289
3290   &.animating {
3291     overflow-y: hidden;
3292   }
3293
3294   hr {
3295     height: 0;
3296     background: transparent;
3297     border: 0;
3298     border-top: 1px solid lighten($ui-base-color, 12%);
3299     margin: 10px 0;
3300   }
3301 }
3302
3303 .column-header__collapsible-inner {
3304   background: lighten($ui-base-color, 8%);
3305   padding: 15px;
3306 }
3307
3308 .column-header__setting-btn {
3309   &:hover {
3310     color: $darker-text-color;
3311     text-decoration: underline;
3312   }
3313 }
3314
3315 .column-header__setting-arrows {
3316   float: right;
3317
3318   .column-header__setting-btn {
3319     padding: 0 10px;
3320
3321     &:last-child {
3322       padding-right: 0;
3323     }
3324   }
3325 }
3326
3327 .text-btn {
3328   display: inline-block;
3329   padding: 0;
3330   font-family: inherit;
3331   font-size: inherit;
3332   color: inherit;
3333   border: 0;
3334   background: transparent;
3335   cursor: pointer;
3336 }
3337
3338 .column-header__icon {
3339   display: inline-block;
3340   margin-right: 5px;
3341 }
3342
3343 .loading-indicator {
3344   color: $dark-text-color;
3345   font-size: 12px;
3346   font-weight: 400;
3347   text-transform: uppercase;
3348   overflow: visible;
3349   position: absolute;
3350   top: 50%;
3351   left: 50%;
3352   transform: translate(-50%, -50%);
3353
3354   span {
3355     display: block;
3356     float: left;
3357     margin-left: 50%;
3358     transform: translateX(-50%);
3359     margin: 82px 0 0 50%;
3360     white-space: nowrap;
3361   }
3362 }
3363
3364 .loading-indicator__figure {
3365   position: absolute;
3366   top: 50%;
3367   left: 50%;
3368   transform: translate(-50%, -50%);
3369   width: 42px;
3370   height: 42px;
3371   box-sizing: border-box;
3372   background-color: transparent;
3373   border: 0 solid lighten($ui-base-color, 26%);
3374   border-width: 6px;
3375   border-radius: 50%;
3376 }
3377
3378 .no-reduce-motion .loading-indicator span {
3379   animation: loader-label 1.15s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
3380 }
3381
3382 .no-reduce-motion .loading-indicator__figure {
3383   animation: loader-figure 1.15s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
3384 }
3385
3386 @keyframes loader-figure {
3387   0% {
3388     width: 0;
3389     height: 0;
3390     background-color: lighten($ui-base-color, 26%);
3391   }
3392
3393   29% {
3394     background-color: lighten($ui-base-color, 26%);
3395   }
3396
3397   30% {
3398     width: 42px;
3399     height: 42px;
3400     background-color: transparent;
3401     border-width: 21px;
3402     opacity: 1;
3403   }
3404
3405   100% {
3406     width: 42px;
3407     height: 42px;
3408     border-width: 0;
3409     opacity: 0;
3410     background-color: transparent;
3411   }
3412 }
3413
3414 @keyframes loader-label {
3415   0% { opacity: 0.25; }
3416   30% { opacity: 1; }
3417   100% { opacity: 0.25; }
3418 }
3419
3420 .video-error-cover {
3421   align-items: center;
3422   background: $base-overlay-background;
3423   color: $primary-text-color;
3424   cursor: pointer;
3425   display: flex;
3426   flex-direction: column;
3427   height: 100%;
3428   justify-content: center;
3429   margin-top: 8px;
3430   position: relative;
3431   text-align: center;
3432   z-index: 100;
3433 }
3434
3435 .media-spoiler {
3436   background: $base-overlay-background;
3437   color: $darker-text-color;
3438   border: 0;
3439   padding: 0;
3440   width: 100%;
3441   height: 100%;
3442   border-radius: 4px;
3443   appearance: none;
3444
3445   &:hover,
3446   &:active,
3447   &:focus {
3448     padding: 0;
3449     color: lighten($darker-text-color, 8%);
3450   }
3451 }
3452
3453 .media-spoiler__warning {
3454   display: block;
3455   font-size: 14px;
3456 }
3457
3458 .media-spoiler__trigger {
3459   display: block;
3460   font-size: 11px;
3461   font-weight: 700;
3462 }
3463
3464 .spoiler-button {
3465   top: 0;
3466   left: 0;
3467   width: 100%;
3468   height: 100%;
3469   position: absolute;
3470   z-index: 100;
3471
3472   &--minified {
3473     display: block;
3474     left: 4px;
3475     top: 4px;
3476     width: auto;
3477     height: auto;
3478   }
3479
3480   &--click-thru {
3481     pointer-events: none;
3482   }
3483
3484   &--hidden {
3485     display: none;
3486   }
3487
3488   &__overlay {
3489     display: block;
3490     background: transparent;
3491     width: 100%;
3492     height: 100%;
3493     border: 0;
3494
3495     &__label {
3496       display: inline-block;
3497       background: rgba($base-overlay-background, 0.5);
3498       border-radius: 8px;
3499       padding: 8px 12px;
3500       color: $primary-text-color;
3501       font-weight: 500;
3502       font-size: 14px;
3503     }
3504
3505     &:hover,
3506     &:focus,
3507     &:active {
3508       .spoiler-button__overlay__label {
3509         background: rgba($base-overlay-background, 0.8);
3510       }
3511     }
3512
3513     &:disabled {
3514       .spoiler-button__overlay__label {
3515         background: rgba($base-overlay-background, 0.5);
3516       }
3517     }
3518   }
3519 }
3520
3521 .modal-container--preloader {
3522   background: lighten($ui-base-color, 8%);
3523 }
3524
3525 .account--panel {
3526   background: lighten($ui-base-color, 4%);
3527   border-top: 1px solid lighten($ui-base-color, 8%);
3528   border-bottom: 1px solid lighten($ui-base-color, 8%);
3529   display: flex;
3530   flex-direction: row;
3531   padding: 10px 0;
3532 }
3533
3534 .account--panel__button,
3535 .detailed-status__button {
3536   flex: 1 1 auto;
3537   text-align: center;
3538 }
3539
3540 .column-settings__outer {
3541   background: lighten($ui-base-color, 8%);
3542   padding: 15px;
3543 }
3544
3545 .column-settings__section {
3546   color: $darker-text-color;
3547   cursor: default;
3548   display: block;
3549   font-weight: 500;
3550   margin-bottom: 10px;
3551 }
3552
3553 .column-settings__hashtags {
3554   .column-settings__row {
3555     margin-bottom: 15px;
3556   }
3557
3558   .column-select {
3559     &__control {
3560       @include search-input;
3561
3562       &::placeholder {
3563         color: lighten($darker-text-color, 4%);
3564       }
3565
3566       &::-moz-focus-inner {
3567         border: 0;
3568       }
3569
3570       &::-moz-focus-inner,
3571       &:focus,
3572       &:active {
3573         outline: 0 !important;
3574       }
3575
3576       &:focus {
3577         background: lighten($ui-base-color, 4%);
3578       }
3579
3580       @media screen and (max-width: 600px) {
3581         font-size: 16px;
3582       }
3583     }
3584
3585     &__placeholder {
3586       color: $dark-text-color;
3587       padding-left: 2px;
3588       font-size: 12px;
3589     }
3590
3591     &__value-container {
3592       padding-left: 6px;
3593     }
3594
3595     &__multi-value {
3596       background: lighten($ui-base-color, 8%);
3597
3598       &__remove {
3599         cursor: pointer;
3600
3601         &:hover,
3602         &:active,
3603         &:focus {
3604           background: lighten($ui-base-color, 12%);
3605           color: lighten($darker-text-color, 4%);
3606         }
3607       }
3608     }
3609
3610     &__multi-value__label,
3611     &__input {
3612       color: $darker-text-color;
3613     }
3614
3615     &__clear-indicator,
3616     &__dropdown-indicator {
3617       cursor: pointer;
3618       transition: none;
3619       color: $dark-text-color;
3620
3621       &:hover,
3622       &:active,
3623       &:focus {
3624         color: lighten($dark-text-color, 4%);
3625       }
3626     }
3627
3628     &__indicator-separator {
3629       background-color: lighten($ui-base-color, 8%);
3630     }
3631
3632     &__menu {
3633       @include search-popout;
3634       padding: 0;
3635       background: $ui-secondary-color;
3636     }
3637
3638     &__menu-list {
3639       padding: 6px;
3640     }
3641
3642     &__option {
3643       color: $inverted-text-color;
3644       border-radius: 4px;
3645       font-size: 14px;
3646
3647       &--is-focused,
3648       &--is-selected {
3649         background: darken($ui-secondary-color, 10%);
3650       }
3651     }
3652   }
3653 }
3654
3655 .column-settings__row {
3656   .text-btn {
3657     margin-bottom: 15px;
3658   }
3659 }
3660
3661 .relationship-tag {
3662   color: $primary-text-color;
3663   margin-bottom: 4px;
3664   display: block;
3665   vertical-align: top;
3666   background-color: $base-overlay-background;
3667   text-transform: uppercase;
3668   font-size: 11px;
3669   font-weight: 500;
3670   padding: 4px;
3671   border-radius: 4px;
3672   opacity: 0.7;
3673
3674   &:hover {
3675     opacity: 1;
3676   }
3677 }
3678
3679 .setting-toggle {
3680   display: block;
3681   line-height: 24px;
3682 }
3683
3684 .setting-toggle__label {
3685   color: $darker-text-color;
3686   display: inline-block;
3687   margin-bottom: 14px;
3688   margin-left: 8px;
3689   vertical-align: middle;
3690 }
3691
3692 .empty-column-indicator,
3693 .error-column {
3694   color: $dark-text-color;
3695   background: $ui-base-color;
3696   text-align: center;
3697   padding: 20px;
3698   font-size: 15px;
3699   font-weight: 400;
3700   cursor: default;
3701   display: flex;
3702   flex: 1 1 auto;
3703   align-items: center;
3704   justify-content: center;
3705
3706   @supports(display: grid) { // hack to fix Chrome <57
3707     contain: strict;
3708   }
3709
3710   & > span {
3711     max-width: 400px;
3712   }
3713
3714   a {
3715     color: $highlight-text-color;
3716     text-decoration: none;
3717
3718     &:hover {
3719       text-decoration: underline;
3720     }
3721   }
3722 }
3723
3724 .error-column {
3725   flex-direction: column;
3726 }
3727
3728 @keyframes heartbeat {
3729   from {
3730     transform: scale(1);
3731     animation-timing-function: ease-out;
3732   }
3733
3734   10% {
3735     transform: scale(0.91);
3736     animation-timing-function: ease-in;
3737   }
3738
3739   17% {
3740     transform: scale(0.98);
3741     animation-timing-function: ease-out;
3742   }
3743
3744   33% {
3745     transform: scale(0.87);
3746     animation-timing-function: ease-in;
3747   }
3748
3749   45% {
3750     transform: scale(1);
3751     animation-timing-function: ease-out;
3752   }
3753 }
3754
3755 .no-reduce-motion .pulse-loading {
3756   transform-origin: center center;
3757   animation: heartbeat 1.5s ease-in-out infinite both;
3758 }
3759
3760 @keyframes shake-bottom {
3761   0%,
3762   100% {
3763     transform: rotate(0deg);
3764     transform-origin: 50% 100%;
3765   }
3766
3767   10% {
3768     transform: rotate(2deg);
3769   }
3770
3771   20%,
3772   40%,
3773   60% {
3774     transform: rotate(-4deg);
3775   }
3776
3777   30%,
3778   50%,
3779   70% {
3780     transform: rotate(4deg);
3781   }
3782
3783   80% {
3784     transform: rotate(-2deg);
3785   }
3786
3787   90% {
3788     transform: rotate(2deg);
3789   }
3790 }
3791
3792 .no-reduce-motion .shake-bottom {
3793   transform-origin: 50% 100%;
3794   animation: shake-bottom 0.8s cubic-bezier(0.455, 0.03, 0.515, 0.955) 2s 2 both;
3795 }
3796
3797 .emoji-picker-dropdown__menu {
3798   background: $simple-background-color;
3799   position: absolute;
3800   box-shadow: 4px 4px 6px rgba($base-shadow-color, 0.4);
3801   border-radius: 4px;
3802   margin-top: 5px;
3803   z-index: 2;
3804
3805   .emoji-mart-scroll {
3806     transition: opacity 200ms ease;
3807   }
3808
3809   &.selecting .emoji-mart-scroll {
3810     opacity: 0.5;
3811   }
3812 }
3813
3814 .emoji-picker-dropdown__modifiers {
3815   position: absolute;
3816   top: 60px;
3817   right: 11px;
3818   cursor: pointer;
3819 }
3820
3821 .emoji-picker-dropdown__modifiers__menu {
3822   position: absolute;
3823   z-index: 4;
3824   top: -4px;
3825   left: -8px;
3826   background: $simple-background-color;
3827   border-radius: 4px;
3828   box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2);
3829   overflow: hidden;
3830
3831   button {
3832     display: block;
3833     cursor: pointer;
3834     border: 0;
3835     padding: 4px 8px;
3836     background: transparent;
3837
3838     &:hover,
3839     &:focus,
3840     &:active {
3841       background: rgba($ui-secondary-color, 0.4);
3842     }
3843   }
3844
3845   .emoji-mart-emoji {
3846     height: 22px;
3847   }
3848 }
3849
3850 .emoji-mart-emoji {
3851   span {
3852     background-repeat: no-repeat;
3853   }
3854 }
3855
3856 .upload-area {
3857   align-items: center;
3858   background: rgba($base-overlay-background, 0.8);
3859   display: flex;
3860   height: 100%;
3861   justify-content: center;
3862   left: 0;
3863   opacity: 0;
3864   position: absolute;
3865   top: 0;
3866   visibility: hidden;
3867   width: 100%;
3868   z-index: 2000;
3869
3870   * {
3871     pointer-events: none;
3872   }
3873 }
3874
3875 .upload-area__drop {
3876   width: 320px;
3877   height: 160px;
3878   display: flex;
3879   box-sizing: border-box;
3880   position: relative;
3881   padding: 8px;
3882 }
3883
3884 .upload-area__background {
3885   position: absolute;
3886   top: 0;
3887   right: 0;
3888   bottom: 0;
3889   left: 0;
3890   z-index: -1;
3891   border-radius: 4px;
3892   background: $ui-base-color;
3893   box-shadow: 0 0 5px rgba($base-shadow-color, 0.2);
3894 }
3895
3896 .upload-area__content {
3897   flex: 1;
3898   display: flex;
3899   align-items: center;
3900   justify-content: center;
3901   color: $secondary-text-color;
3902   font-size: 18px;
3903   font-weight: 500;
3904   border: 2px dashed $ui-base-lighter-color;
3905   border-radius: 4px;
3906 }
3907
3908 .upload-progress {
3909   padding: 10px;
3910   color: $lighter-text-color;
3911   overflow: hidden;
3912   display: flex;
3913
3914   .fa {
3915     font-size: 34px;
3916     margin-right: 10px;
3917   }
3918
3919   span {
3920     font-size: 12px;
3921     text-transform: uppercase;
3922     font-weight: 500;
3923     display: block;
3924   }
3925 }
3926
3927 .upload-progess__message {
3928   flex: 1 1 auto;
3929 }
3930
3931 .upload-progress__backdrop {
3932   width: 100%;
3933   height: 6px;
3934   border-radius: 6px;
3935   background: $ui-base-lighter-color;
3936   position: relative;
3937   margin-top: 5px;
3938 }
3939
3940 .upload-progress__tracker {
3941   position: absolute;
3942   left: 0;
3943   top: 0;
3944   height: 6px;
3945   background: $ui-highlight-color;
3946   border-radius: 6px;
3947 }
3948
3949 .emoji-button {
3950   display: block;
3951   font-size: 24px;
3952   line-height: 24px;
3953   margin-left: 2px;
3954   width: 24px;
3955   outline: 0;
3956   cursor: pointer;
3957
3958   &:active,
3959   &:focus {
3960     outline: 0 !important;
3961   }
3962
3963   img {
3964     filter: grayscale(100%);
3965     opacity: 0.8;
3966     display: block;
3967     margin: 0;
3968     width: 22px;
3969     height: 22px;
3970     margin-top: 2px;
3971   }
3972
3973   &:hover,
3974   &:active,
3975   &:focus {
3976     img {
3977       opacity: 1;
3978       filter: none;
3979     }
3980   }
3981 }
3982
3983 .dropdown--active .emoji-button img {
3984   opacity: 1;
3985   filter: none;
3986 }
3987
3988 .privacy-dropdown__dropdown {
3989   position: absolute;
3990   background: $simple-background-color;
3991   box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
3992   border-radius: 4px;
3993   margin-left: 40px;
3994   overflow: hidden;
3995
3996   &.top {
3997     transform-origin: 50% 100%;
3998   }
3999
4000   &.bottom {
4001     transform-origin: 50% 0;
4002   }
4003 }
4004
4005 .privacy-dropdown__option {
4006   color: $inverted-text-color;
4007   padding: 10px;
4008   cursor: pointer;
4009   display: flex;
4010
4011   &:hover,
4012   &.active {
4013     background: $ui-highlight-color;
4014     color: $primary-text-color;
4015     outline: 0;
4016
4017     .privacy-dropdown__option__content {
4018       color: $primary-text-color;
4019
4020       strong {
4021         color: $primary-text-color;
4022       }
4023     }
4024   }
4025
4026   &.active:hover {
4027     background: lighten($ui-highlight-color, 4%);
4028   }
4029 }
4030
4031 .privacy-dropdown__option__icon {
4032   display: flex;
4033   align-items: center;
4034   justify-content: center;
4035   margin-right: 10px;
4036 }
4037
4038 .privacy-dropdown__option__content {
4039   flex: 1 1 auto;
4040   color: $lighter-text-color;
4041
4042   strong {
4043     font-weight: 500;
4044     display: block;
4045     color: $inverted-text-color;
4046
4047     @each $lang in $cjk-langs {
4048       &:lang(#{$lang}) {
4049         font-weight: 700;
4050       }
4051     }
4052   }
4053 }
4054
4055 .privacy-dropdown.active {
4056   .privacy-dropdown__value {
4057     background: $simple-background-color;
4058     border-radius: 4px 4px 0 0;
4059     box-shadow: 0 -4px 4px rgba($base-shadow-color, 0.1);
4060
4061     .icon-button {
4062       transition: none;
4063     }
4064
4065     &.active {
4066       background: $ui-highlight-color;
4067
4068       .icon-button {
4069         color: $primary-text-color;
4070       }
4071     }
4072   }
4073
4074   &.top .privacy-dropdown__value {
4075     border-radius: 0 0 4px 4px;
4076   }
4077
4078   .privacy-dropdown__dropdown {
4079     display: block;
4080     box-shadow: 2px 4px 6px rgba($base-shadow-color, 0.1);
4081   }
4082 }
4083
4084 .search {
4085   position: relative;
4086 }
4087
4088 .search__input {
4089   @include search-input;
4090
4091   display: block;
4092   padding: 15px;
4093   padding-right: 30px;
4094   line-height: 18px;
4095   font-size: 16px;
4096
4097   &::placeholder {
4098     color: lighten($darker-text-color, 4%);
4099   }
4100
4101   &::-moz-focus-inner {
4102     border: 0;
4103   }
4104
4105   &::-moz-focus-inner,
4106   &:focus,
4107   &:active {
4108     outline: 0 !important;
4109   }
4110
4111   &:focus {
4112     background: lighten($ui-base-color, 4%);
4113   }
4114
4115   @media screen and (max-width: 600px) {
4116     font-size: 16px;
4117   }
4118 }
4119
4120 .search__icon {
4121   &::-moz-focus-inner {
4122     border: 0;
4123   }
4124
4125   &::-moz-focus-inner,
4126   &:focus {
4127     outline: 0 !important;
4128   }
4129
4130   .fa {
4131     position: absolute;
4132     top: 16px;
4133     right: 10px;
4134     z-index: 2;
4135     display: inline-block;
4136     opacity: 0;
4137     transition: all 100ms linear;
4138     transition-property: transform, opacity;
4139     font-size: 18px;
4140     width: 18px;
4141     height: 18px;
4142     color: $secondary-text-color;
4143     cursor: default;
4144     pointer-events: none;
4145
4146     &.active {
4147       pointer-events: auto;
4148       opacity: 0.3;
4149     }
4150   }
4151
4152   .fa-search {
4153     transform: rotate(90deg);
4154
4155     &.active {
4156       pointer-events: none;
4157       transform: rotate(0deg);
4158     }
4159   }
4160
4161   .fa-times-circle {
4162     top: 17px;
4163     transform: rotate(0deg);
4164     color: $action-button-color;
4165     cursor: pointer;
4166
4167     &.active {
4168       transform: rotate(90deg);
4169     }
4170
4171     &:hover {
4172       color: lighten($action-button-color, 7%);
4173     }
4174   }
4175 }
4176
4177 .search-results__header {
4178   color: $dark-text-color;
4179   background: lighten($ui-base-color, 2%);
4180   padding: 15px;
4181   font-weight: 500;
4182   font-size: 16px;
4183   cursor: default;
4184
4185   .fa {
4186     display: inline-block;
4187     margin-right: 5px;
4188   }
4189 }
4190
4191 .search-results__section {
4192   margin-bottom: 5px;
4193
4194   h5 {
4195     background: darken($ui-base-color, 4%);
4196     border-bottom: 1px solid lighten($ui-base-color, 8%);
4197     cursor: default;
4198     display: flex;
4199     padding: 15px;
4200     font-weight: 500;
4201     font-size: 16px;
4202     color: $dark-text-color;
4203
4204     .fa {
4205       display: inline-block;
4206       margin-right: 5px;
4207     }
4208   }
4209
4210   .account:last-child,
4211   & > div:last-child .status {
4212     border-bottom: 0;
4213   }
4214 }
4215
4216 .search-results__hashtag {
4217   display: block;
4218   padding: 10px;
4219   color: $secondary-text-color;
4220   text-decoration: none;
4221
4222   &:hover,
4223   &:active,
4224   &:focus {
4225     color: lighten($secondary-text-color, 4%);
4226     text-decoration: underline;
4227   }
4228 }
4229
4230 .search-results__info {
4231   padding: 20px;
4232   color: $darker-text-color;
4233   text-align: center;
4234 }
4235
4236 .modal-root {
4237   position: relative;
4238   transition: opacity 0.3s linear;
4239   will-change: opacity;
4240   z-index: 9999;
4241 }
4242
4243 .modal-root__overlay {
4244   position: fixed;
4245   top: 0;
4246   left: 0;
4247   right: 0;
4248   bottom: 0;
4249   background: rgba($base-overlay-background, 0.7);
4250 }
4251
4252 .modal-root__container {
4253   position: fixed;
4254   top: 0;
4255   left: 0;
4256   width: 100%;
4257   height: 100%;
4258   display: flex;
4259   flex-direction: column;
4260   align-items: center;
4261   justify-content: center;
4262   align-content: space-around;
4263   z-index: 9999;
4264   pointer-events: none;
4265   user-select: none;
4266 }
4267
4268 .modal-root__modal {
4269   pointer-events: auto;
4270   display: flex;
4271   z-index: 9999;
4272 }
4273
4274 .video-modal__container {
4275   max-width: 100vw;
4276   max-height: 100vh;
4277 }
4278
4279 .audio-modal__container {
4280   width: 50vw;
4281 }
4282
4283 .media-modal {
4284   width: 100%;
4285   height: 100%;
4286   position: relative;
4287
4288   .extended-video-player {
4289     width: 100%;
4290     height: 100%;
4291     display: flex;
4292     align-items: center;
4293     justify-content: center;
4294
4295     video {
4296       max-width: $media-modal-media-max-width;
4297       max-height: $media-modal-media-max-height;
4298     }
4299   }
4300 }
4301
4302 .media-modal__closer {
4303   position: absolute;
4304   top: 0;
4305   left: 0;
4306   right: 0;
4307   bottom: 0;
4308 }
4309
4310 .media-modal__navigation {
4311   position: absolute;
4312   top: 0;
4313   left: 0;
4314   right: 0;
4315   bottom: 0;
4316   pointer-events: none;
4317   transition: opacity 0.3s linear;
4318   will-change: opacity;
4319
4320   * {
4321     pointer-events: auto;
4322   }
4323
4324   &.media-modal__navigation--hidden {
4325     opacity: 0;
4326
4327     * {
4328       pointer-events: none;
4329     }
4330   }
4331 }
4332
4333 .media-modal__nav {
4334   background: rgba($base-overlay-background, 0.5);
4335   box-sizing: border-box;
4336   border: 0;
4337   color: $primary-text-color;
4338   cursor: pointer;
4339   display: flex;
4340   align-items: center;
4341   font-size: 24px;
4342   height: 20vmax;
4343   margin: auto 0;
4344   padding: 30px 15px;
4345   position: absolute;
4346   top: 0;
4347   bottom: 0;
4348 }
4349
4350 .media-modal__nav--left {
4351   left: 0;
4352 }
4353
4354 .media-modal__nav--right {
4355   right: 0;
4356 }
4357
4358 .media-modal__pagination {
4359   width: 100%;
4360   text-align: center;
4361   position: absolute;
4362   left: 0;
4363   bottom: 20px;
4364   pointer-events: none;
4365 }
4366
4367 .media-modal__meta {
4368   text-align: center;
4369   position: absolute;
4370   left: 0;
4371   bottom: 20px;
4372   width: 100%;
4373   pointer-events: none;
4374
4375   &--shifted {
4376     bottom: 62px;
4377   }
4378
4379   a {
4380     pointer-events: auto;
4381     text-decoration: none;
4382     font-weight: 500;
4383     color: $ui-secondary-color;
4384
4385     &:hover,
4386     &:focus,
4387     &:active {
4388       text-decoration: underline;
4389     }
4390   }
4391 }
4392
4393 .media-modal__page-dot {
4394   display: inline-block;
4395 }
4396
4397 .media-modal__button {
4398   background-color: $primary-text-color;
4399   height: 12px;
4400   width: 12px;
4401   border-radius: 6px;
4402   margin: 10px;
4403   padding: 0;
4404   border: 0;
4405   font-size: 0;
4406 }
4407
4408 .media-modal__button--active {
4409   background-color: $highlight-text-color;
4410 }
4411
4412 .media-modal__close {
4413   position: absolute;
4414   right: 8px;
4415   top: 8px;
4416   z-index: 100;
4417 }
4418
4419 .onboarding-modal,
4420 .error-modal,
4421 .embed-modal {
4422   background: $ui-secondary-color;
4423   color: $inverted-text-color;
4424   border-radius: 8px;
4425   overflow: hidden;
4426   display: flex;
4427   flex-direction: column;
4428 }
4429
4430 .error-modal__body {
4431   height: 80vh;
4432   width: 80vw;
4433   max-width: 520px;
4434   max-height: 420px;
4435   position: relative;
4436
4437   & > div {
4438     position: absolute;
4439     top: 0;
4440     left: 0;
4441     width: 100%;
4442     height: 100%;
4443     box-sizing: border-box;
4444     padding: 25px;
4445     display: none;
4446     flex-direction: column;
4447     align-items: center;
4448     justify-content: center;
4449     display: flex;
4450     opacity: 0;
4451     user-select: text;
4452   }
4453 }
4454
4455 .error-modal__body {
4456   display: flex;
4457   flex-direction: column;
4458   justify-content: center;
4459   align-items: center;
4460   text-align: center;
4461 }
4462
4463 .onboarding-modal__paginator,
4464 .error-modal__footer {
4465   flex: 0 0 auto;
4466   background: darken($ui-secondary-color, 8%);
4467   display: flex;
4468   padding: 25px;
4469
4470   & > div {
4471     min-width: 33px;
4472   }
4473
4474   .onboarding-modal__nav,
4475   .error-modal__nav {
4476     color: $lighter-text-color;
4477     border: 0;
4478     font-size: 14px;
4479     font-weight: 500;
4480     padding: 10px 25px;
4481     line-height: inherit;
4482     height: auto;
4483     margin: -10px;
4484     border-radius: 4px;
4485     background-color: transparent;
4486
4487     &:hover,
4488     &:focus,
4489     &:active {
4490       color: darken($lighter-text-color, 4%);
4491       background-color: darken($ui-secondary-color, 16%);
4492     }
4493
4494     &.onboarding-modal__done,
4495     &.onboarding-modal__next {
4496       color: $inverted-text-color;
4497
4498       &:hover,
4499       &:focus,
4500       &:active {
4501         color: lighten($inverted-text-color, 4%);
4502       }
4503     }
4504   }
4505 }
4506
4507 .error-modal__footer {
4508   justify-content: center;
4509 }
4510
4511 .display-case {
4512   text-align: center;
4513   font-size: 15px;
4514   margin-bottom: 15px;
4515
4516   &__label {
4517     font-weight: 500;
4518     color: $inverted-text-color;
4519     margin-bottom: 5px;
4520     text-transform: uppercase;
4521     font-size: 12px;
4522   }
4523
4524   &__case {
4525     background: $ui-base-color;
4526     color: $secondary-text-color;
4527     font-weight: 500;
4528     padding: 10px;
4529     border-radius: 4px;
4530   }
4531 }
4532
4533 .onboard-sliders {
4534   display: inline-block;
4535   max-width: 30px;
4536   max-height: auto;
4537   margin-left: 10px;
4538 }
4539
4540 .boost-modal,
4541 .confirmation-modal,
4542 .report-modal,
4543 .actions-modal,
4544 .mute-modal,
4545 .block-modal {
4546   background: lighten($ui-secondary-color, 8%);
4547   color: $inverted-text-color;
4548   border-radius: 8px;
4549   overflow: hidden;
4550   max-width: 90vw;
4551   width: 480px;
4552   position: relative;
4553   flex-direction: column;
4554
4555   .status__display-name {
4556     display: block;
4557     max-width: 100%;
4558     padding-right: 25px;
4559   }
4560
4561   .status__avatar {
4562     height: 28px;
4563     left: 10px;
4564     position: absolute;
4565     top: 10px;
4566     width: 48px;
4567   }
4568
4569   .status__content__spoiler-link {
4570     color: lighten($secondary-text-color, 8%);
4571   }
4572 }
4573
4574 .actions-modal {
4575   .status {
4576     background: $white;
4577     border-bottom-color: $ui-secondary-color;
4578     padding-top: 10px;
4579     padding-bottom: 10px;
4580   }
4581
4582   .dropdown-menu__separator {
4583     border-bottom-color: $ui-secondary-color;
4584   }
4585 }
4586
4587 .boost-modal__container {
4588   overflow-x: scroll;
4589   padding: 10px;
4590
4591   .status {
4592     user-select: text;
4593     border-bottom: 0;
4594   }
4595 }
4596
4597 .boost-modal__action-bar,
4598 .confirmation-modal__action-bar,
4599 .mute-modal__action-bar,
4600 .block-modal__action-bar {
4601   display: flex;
4602   justify-content: space-between;
4603   background: $ui-secondary-color;
4604   padding: 10px;
4605   line-height: 36px;
4606
4607   & > div {
4608     flex: 1 1 auto;
4609     text-align: right;
4610     color: $lighter-text-color;
4611     padding-right: 10px;
4612   }
4613
4614   .button {
4615     flex: 0 0 auto;
4616   }
4617 }
4618
4619 .boost-modal__status-header {
4620   font-size: 15px;
4621 }
4622
4623 .boost-modal__status-time {
4624   float: right;
4625   font-size: 14px;
4626 }
4627
4628 .mute-modal,
4629 .block-modal {
4630   line-height: 24px;
4631 }
4632
4633 .mute-modal .react-toggle,
4634 .block-modal .react-toggle {
4635   vertical-align: middle;
4636 }
4637
4638 .report-modal {
4639   width: 90vw;
4640   max-width: 700px;
4641 }
4642
4643 .report-modal__container {
4644   display: flex;
4645   border-top: 1px solid $ui-secondary-color;
4646
4647   @media screen and (max-width: 480px) {
4648     flex-wrap: wrap;
4649     overflow-y: auto;
4650   }
4651 }
4652
4653 .report-modal__statuses,
4654 .report-modal__comment {
4655   box-sizing: border-box;
4656   width: 50%;
4657
4658   @media screen and (max-width: 480px) {
4659     width: 100%;
4660   }
4661 }
4662
4663 .report-modal__statuses,
4664 .focal-point-modal__content {
4665   flex: 1 1 auto;
4666   min-height: 20vh;
4667   max-height: 80vh;
4668   overflow-y: auto;
4669   overflow-x: hidden;
4670
4671   .status__content a {
4672     color: $highlight-text-color;
4673   }
4674
4675   .status__content,
4676   .status__content p {
4677     color: $inverted-text-color;
4678   }
4679
4680   @media screen and (max-width: 480px) {
4681     max-height: 10vh;
4682   }
4683 }
4684
4685 .focal-point-modal__content {
4686   @media screen and (max-width: 480px) {
4687     max-height: 40vh;
4688   }
4689 }
4690
4691 .report-modal__comment {
4692   padding: 20px;
4693   border-right: 1px solid $ui-secondary-color;
4694   max-width: 320px;
4695
4696   p {
4697     font-size: 14px;
4698     line-height: 20px;
4699     margin-bottom: 20px;
4700   }
4701
4702   .setting-text {
4703     display: block;
4704     box-sizing: border-box;
4705     width: 100%;
4706     margin: 0;
4707     color: $inverted-text-color;
4708     background: $white;
4709     padding: 10px;
4710     font-family: inherit;
4711     font-size: 14px;
4712     resize: none;
4713     border: 0;
4714     outline: 0;
4715     border-radius: 4px;
4716     border: 1px solid $ui-secondary-color;
4717     min-height: 100px;
4718     max-height: 50vh;
4719     margin-bottom: 10px;
4720
4721     &:focus {
4722       border: 1px solid darken($ui-secondary-color, 8%);
4723     }
4724
4725     &__wrapper {
4726       background: $white;
4727       border: 1px solid $ui-secondary-color;
4728       margin-bottom: 10px;
4729       border-radius: 4px;
4730
4731       .setting-text {
4732         border: 0;
4733         margin-bottom: 0;
4734         border-radius: 0;
4735
4736         &:focus {
4737           border: 0;
4738         }
4739       }
4740
4741       &__modifiers {
4742         color: $inverted-text-color;
4743         font-family: inherit;
4744         font-size: 14px;
4745         background: $white;
4746       }
4747     }
4748
4749     &__toolbar {
4750       display: flex;
4751       justify-content: space-between;
4752       margin-bottom: 20px;
4753     }
4754   }
4755
4756   .setting-text-label {
4757     display: block;
4758     color: $inverted-text-color;
4759     font-size: 14px;
4760     font-weight: 500;
4761     margin-bottom: 10px;
4762   }
4763
4764   .setting-toggle {
4765     margin-top: 20px;
4766     margin-bottom: 24px;
4767
4768     &__label {
4769       color: $inverted-text-color;
4770       font-size: 14px;
4771     }
4772   }
4773
4774   @media screen and (max-width: 480px) {
4775     padding: 10px;
4776     max-width: 100%;
4777     order: 2;
4778
4779     .setting-toggle {
4780       margin-bottom: 4px;
4781     }
4782   }
4783 }
4784
4785 .actions-modal {
4786   max-height: 80vh;
4787   max-width: 80vw;
4788
4789   .status {
4790     overflow-y: auto;
4791     max-height: 300px;
4792   }
4793
4794   .actions-modal__item-label {
4795     font-weight: 500;
4796   }
4797
4798   ul {
4799     overflow-y: auto;
4800     flex-shrink: 0;
4801     max-height: 80vh;
4802
4803     &.with-status {
4804       max-height: calc(80vh - 75px);
4805     }
4806
4807     li:empty {
4808       margin: 0;
4809     }
4810
4811     li:not(:empty) {
4812       a {
4813         color: $inverted-text-color;
4814         display: flex;
4815         padding: 12px 16px;
4816         font-size: 15px;
4817         align-items: center;
4818         text-decoration: none;
4819
4820         &,
4821         button {
4822           transition: none;
4823         }
4824
4825         &.active,
4826         &:hover,
4827         &:active,
4828         &:focus {
4829           &,
4830           button {
4831             background: $ui-highlight-color;
4832             color: $primary-text-color;
4833           }
4834         }
4835
4836         button:first-child {
4837           margin-right: 10px;
4838         }
4839       }
4840     }
4841   }
4842 }
4843
4844 .confirmation-modal__action-bar,
4845 .mute-modal__action-bar,
4846 .block-modal__action-bar {
4847   .confirmation-modal__secondary-button {
4848     flex-shrink: 1;
4849   }
4850 }
4851
4852 .confirmation-modal__secondary-button,
4853 .confirmation-modal__cancel-button,
4854 .mute-modal__cancel-button,
4855 .block-modal__cancel-button {
4856   background-color: transparent;
4857   color: $lighter-text-color;
4858   font-size: 14px;
4859   font-weight: 500;
4860
4861   &:hover,
4862   &:focus,
4863   &:active {
4864     color: darken($lighter-text-color, 4%);
4865     background-color: transparent;
4866   }
4867 }
4868
4869 .confirmation-modal__container,
4870 .mute-modal__container,
4871 .block-modal__container,
4872 .report-modal__target {
4873   padding: 30px;
4874   font-size: 16px;
4875
4876   strong {
4877     font-weight: 500;
4878
4879     @each $lang in $cjk-langs {
4880       &:lang(#{$lang}) {
4881         font-weight: 700;
4882       }
4883     }
4884   }
4885 }
4886
4887 .confirmation-modal__container,
4888 .report-modal__target {
4889   text-align: center;
4890 }
4891
4892 .block-modal,
4893 .mute-modal {
4894   &__explanation {
4895     margin-top: 20px;
4896   }
4897
4898   .setting-toggle {
4899     margin-top: 20px;
4900     margin-bottom: 24px;
4901     display: flex;
4902     align-items: center;
4903
4904     &__label {
4905       color: $inverted-text-color;
4906       margin: 0;
4907       margin-left: 8px;
4908     }
4909   }
4910 }
4911
4912 .report-modal__target {
4913   padding: 15px;
4914
4915   .media-modal__close {
4916     top: 14px;
4917     right: 15px;
4918   }
4919 }
4920
4921 .loading-bar {
4922   background-color: $highlight-text-color;
4923   height: 3px;
4924   position: absolute;
4925   top: 0;
4926   left: 0;
4927   z-index: 9999;
4928 }
4929
4930 .media-gallery__gifv__label {
4931   display: block;
4932   position: absolute;
4933   color: $primary-text-color;
4934   background: rgba($base-overlay-background, 0.5);
4935   bottom: 6px;
4936   left: 6px;
4937   padding: 2px 6px;
4938   border-radius: 2px;
4939   font-size: 11px;
4940   font-weight: 600;
4941   z-index: 1;
4942   pointer-events: none;
4943   opacity: 0.9;
4944   transition: opacity 0.1s ease;
4945   line-height: 18px;
4946 }
4947
4948 .media-gallery__gifv {
4949   &.autoplay {
4950     .media-gallery__gifv__label {
4951       display: none;
4952     }
4953   }
4954
4955   &:hover {
4956     .media-gallery__gifv__label {
4957       opacity: 1;
4958     }
4959   }
4960 }
4961
4962 .attachment-list {
4963   display: flex;
4964   font-size: 14px;
4965   border: 1px solid lighten($ui-base-color, 8%);
4966   border-radius: 4px;
4967   margin-top: 14px;
4968   overflow: hidden;
4969
4970   &__icon {
4971     flex: 0 0 auto;
4972     color: $dark-text-color;
4973     padding: 8px 18px;
4974     cursor: default;
4975     border-right: 1px solid lighten($ui-base-color, 8%);
4976     display: flex;
4977     flex-direction: column;
4978     align-items: center;
4979     justify-content: center;
4980     font-size: 26px;
4981
4982     .fa {
4983       display: block;
4984     }
4985   }
4986
4987   &__list {
4988     list-style: none;
4989     padding: 4px 0;
4990     padding-left: 8px;
4991     display: flex;
4992     flex-direction: column;
4993     justify-content: center;
4994
4995     li {
4996       display: block;
4997       padding: 4px 0;
4998     }
4999
5000     a {
5001       text-decoration: none;
5002       color: $dark-text-color;
5003       font-weight: 500;
5004
5005       &:hover {
5006         text-decoration: underline;
5007       }
5008     }
5009   }
5010
5011   &.compact {
5012     border: 0;
5013     margin-top: 4px;
5014
5015     .attachment-list__list {
5016       padding: 0;
5017       display: block;
5018     }
5019
5020     .fa {
5021       color: $dark-text-color;
5022     }
5023   }
5024 }
5025
5026 /* Media Gallery */
5027 .media-gallery {
5028   box-sizing: border-box;
5029   margin-top: 8px;
5030   overflow: hidden;
5031   border-radius: 4px;
5032   position: relative;
5033   width: 100%;
5034 }
5035
5036 .media-gallery__item {
5037   border: 0;
5038   box-sizing: border-box;
5039   display: block;
5040   float: left;
5041   position: relative;
5042   border-radius: 4px;
5043   overflow: hidden;
5044
5045   &.standalone {
5046     .media-gallery__item-gifv-thumbnail {
5047       transform: none;
5048       top: 0;
5049     }
5050   }
5051 }
5052
5053 .media-gallery__item-thumbnail {
5054   cursor: zoom-in;
5055   display: block;
5056   text-decoration: none;
5057   color: $secondary-text-color;
5058   position: relative;
5059   z-index: 1;
5060
5061   &,
5062   img {
5063     height: 100%;
5064     width: 100%;
5065   }
5066
5067   img {
5068     object-fit: cover;
5069   }
5070 }
5071
5072 .media-gallery__preview {
5073   width: 100%;
5074   height: 100%;
5075   object-fit: cover;
5076   position: absolute;
5077   top: 0;
5078   left: 0;
5079   z-index: 0;
5080   background: $base-overlay-background;
5081
5082   &--hidden {
5083     display: none;
5084   }
5085 }
5086
5087 .media-gallery__gifv {
5088   height: 100%;
5089   overflow: hidden;
5090   position: relative;
5091   width: 100%;
5092 }
5093
5094 .media-gallery__item-gifv-thumbnail {
5095   cursor: zoom-in;
5096   height: 100%;
5097   object-fit: cover;
5098   position: relative;
5099   top: 50%;
5100   transform: translateY(-50%);
5101   width: 100%;
5102   z-index: 1;
5103 }
5104
5105 .media-gallery__item-thumbnail-label {
5106   clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
5107   clip: rect(1px, 1px, 1px, 1px);
5108   overflow: hidden;
5109   position: absolute;
5110 }
5111 /* End Media Gallery */
5112
5113 .detailed,
5114 .fullscreen {
5115   .video-player__volume__current,
5116   .video-player__volume::before {
5117     bottom: 27px;
5118   }
5119
5120   .video-player__volume__handle {
5121     bottom: 23px;
5122   }
5123
5124 }
5125
5126 .audio-player {
5127   box-sizing: border-box;
5128   position: relative;
5129   background: darken($ui-base-color, 8%);
5130   border-radius: 4px;
5131   padding-bottom: 44px;
5132   direction: ltr;
5133
5134   &.editable {
5135     border-radius: 0;
5136     height: 100%;
5137   }
5138
5139   &__waveform {
5140     padding: 15px 0;
5141     position: relative;
5142     overflow: hidden;
5143
5144     &::before {
5145       content: "";
5146       display: block;
5147       position: absolute;
5148       border-top: 1px solid lighten($ui-base-color, 4%);
5149       width: 100%;
5150       height: 0;
5151       left: 0;
5152       top: calc(50% + 1px);
5153     }
5154   }
5155
5156   &__progress-placeholder {
5157     background-color: rgba(lighten($ui-highlight-color, 8%), 0.5);
5158   }
5159
5160   &__wave-placeholder {
5161     background-color: lighten($ui-base-color, 16%);
5162   }
5163
5164   .video-player__controls {
5165     padding: 0 15px;
5166     padding-top: 10px;
5167     background: darken($ui-base-color, 8%);
5168     border-top: 1px solid lighten($ui-base-color, 4%);
5169     border-radius: 0 0 4px 4px;
5170   }
5171 }
5172
5173 .video-player {
5174   overflow: hidden;
5175   position: relative;
5176   background: $base-shadow-color;
5177   max-width: 100%;
5178   border-radius: 4px;
5179   box-sizing: border-box;
5180   direction: ltr;
5181
5182   &.editable {
5183     border-radius: 0;
5184     height: 100% !important;
5185   }
5186
5187   &:focus {
5188     outline: 0;
5189   }
5190
5191   video {
5192     max-width: 100vw;
5193     max-height: 80vh;
5194     z-index: 1;
5195   }
5196
5197   &.fullscreen {
5198     width: 100% !important;
5199     height: 100% !important;
5200     margin: 0;
5201
5202     video {
5203       max-width: 100% !important;
5204       max-height: 100% !important;
5205       width: 100% !important;
5206       height: 100% !important;
5207     }
5208   }
5209
5210   &.inline {
5211     video {
5212       object-fit: contain;
5213       position: relative;
5214       top: 50%;
5215       transform: translateY(-50%);
5216     }
5217   }
5218
5219   &__controls {
5220     position: absolute;
5221     z-index: 2;
5222     bottom: 0;
5223     left: 0;
5224     right: 0;
5225     box-sizing: border-box;
5226     background: linear-gradient(0deg, rgba($base-shadow-color, 0.85) 0, rgba($base-shadow-color, 0.45) 60%, transparent);
5227     padding: 0 15px;
5228     opacity: 0;
5229     transition: opacity .1s ease;
5230
5231     &.active {
5232       opacity: 1;
5233     }
5234   }
5235
5236   &.inactive {
5237     video,
5238     .video-player__controls {
5239       visibility: hidden;
5240     }
5241   }
5242
5243   &__spoiler {
5244     display: none;
5245     position: absolute;
5246     top: 0;
5247     left: 0;
5248     width: 100%;
5249     height: 100%;
5250     z-index: 4;
5251     border: 0;
5252     background: $base-overlay-background;
5253     color: $darker-text-color;
5254     transition: none;
5255     pointer-events: none;
5256
5257     &.active {
5258       display: block;
5259       pointer-events: auto;
5260
5261       &:hover,
5262       &:active,
5263       &:focus {
5264         color: lighten($darker-text-color, 7%);
5265       }
5266     }
5267
5268     &__title {
5269       display: block;
5270       font-size: 14px;
5271     }
5272
5273     &__subtitle {
5274       display: block;
5275       font-size: 11px;
5276       font-weight: 500;
5277     }
5278   }
5279
5280   &__buttons-bar {
5281     display: flex;
5282     justify-content: space-between;
5283     padding-bottom: 10px;
5284   }
5285
5286   &__buttons {
5287     font-size: 16px;
5288     white-space: nowrap;
5289     overflow: hidden;
5290     text-overflow: ellipsis;
5291
5292     &.left {
5293       button {
5294         padding-left: 0;
5295       }
5296     }
5297
5298     &.right {
5299       button {
5300         padding-right: 0;
5301       }
5302     }
5303
5304     button {
5305       background: transparent;
5306       padding: 2px 10px;
5307       font-size: 16px;
5308       border: 0;
5309       color: rgba($white, 0.75);
5310
5311       &:active,
5312       &:hover,
5313       &:focus {
5314         color: $white;
5315       }
5316     }
5317   }
5318
5319   &__time-sep,
5320   &__time-total,
5321   &__time-current {
5322     font-size: 14px;
5323     font-weight: 500;
5324   }
5325
5326   &__time-current {
5327     color: $white;
5328     margin-left: 60px;
5329   }
5330
5331   &__time-sep {
5332     display: inline-block;
5333     margin: 0 6px;
5334   }
5335
5336   &__time-sep,
5337   &__time-total {
5338     color: $white;
5339   }
5340
5341   &__volume {
5342     cursor: pointer;
5343     height: 24px;
5344     display: inline;
5345
5346     &::before {
5347       content: "";
5348       width: 50px;
5349       background: rgba($white, 0.35);
5350       border-radius: 4px;
5351       display: block;
5352       position: absolute;
5353       height: 4px;
5354       left: 70px;
5355       bottom: 20px;
5356     }
5357
5358     &__current {
5359       display: block;
5360       position: absolute;
5361       height: 4px;
5362       border-radius: 4px;
5363       left: 70px;
5364       bottom: 20px;
5365       background: lighten($ui-highlight-color, 8%);
5366     }
5367
5368     &__handle {
5369       position: absolute;
5370       z-index: 3;
5371       border-radius: 50%;
5372       width: 12px;
5373       height: 12px;
5374       bottom: 16px;
5375       left: 70px;
5376       transition: opacity .1s ease;
5377       background: lighten($ui-highlight-color, 8%);
5378       box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2);
5379       pointer-events: none;
5380     }
5381   }
5382
5383   &__link {
5384     padding: 2px 10px;
5385
5386     a {
5387       text-decoration: none;
5388       font-size: 14px;
5389       font-weight: 500;
5390       color: $white;
5391
5392       &:hover,
5393       &:active,
5394       &:focus {
5395         text-decoration: underline;
5396       }
5397     }
5398   }
5399
5400   &__seek {
5401     cursor: pointer;
5402     height: 24px;
5403     position: relative;
5404
5405     &::before {
5406       content: "";
5407       width: 100%;
5408       background: rgba($white, 0.35);
5409       border-radius: 4px;
5410       display: block;
5411       position: absolute;
5412       height: 4px;
5413       top: 10px;
5414     }
5415
5416     &__progress,
5417     &__buffer {
5418       display: block;
5419       position: absolute;
5420       height: 4px;
5421       border-radius: 4px;
5422       top: 10px;
5423       background: lighten($ui-highlight-color, 8%);
5424     }
5425
5426     &__buffer {
5427       background: rgba($white, 0.2);
5428     }
5429
5430     &__handle {
5431       position: absolute;
5432       z-index: 3;
5433       opacity: 0;
5434       border-radius: 50%;
5435       width: 12px;
5436       height: 12px;
5437       top: 6px;
5438       margin-left: -6px;
5439       transition: opacity .1s ease;
5440       background: lighten($ui-highlight-color, 8%);
5441       box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2);
5442       pointer-events: none;
5443
5444       &.active {
5445         opacity: 1;
5446       }
5447     }
5448
5449     &:hover {
5450       .video-player__seek__handle {
5451         opacity: 1;
5452       }
5453     }
5454   }
5455
5456   &.detailed,
5457   &.fullscreen {
5458     .video-player__buttons {
5459       button {
5460         padding-top: 10px;
5461         padding-bottom: 10px;
5462       }
5463     }
5464   }
5465 }
5466
5467 .directory {
5468   &__list {
5469     width: 100%;
5470     margin: 10px 0;
5471     transition: opacity 100ms ease-in;
5472
5473     &.loading {
5474       opacity: 0.7;
5475     }
5476
5477     @media screen and (max-width: $no-gap-breakpoint) {
5478       margin: 0;
5479     }
5480   }
5481
5482   &__card {
5483     box-sizing: border-box;
5484     margin-bottom: 10px;
5485
5486     &__img {
5487       height: 125px;
5488       position: relative;
5489       background: darken($ui-base-color, 12%);
5490       overflow: hidden;
5491
5492       img {
5493         display: block;
5494         width: 100%;
5495         height: 100%;
5496         margin: 0;
5497         object-fit: cover;
5498       }
5499     }
5500
5501     &__bar {
5502       display: flex;
5503       align-items: center;
5504       background: lighten($ui-base-color, 4%);
5505       padding: 10px;
5506
5507       &__name {
5508         flex: 1 1 auto;
5509         display: flex;
5510         align-items: center;
5511         text-decoration: none;
5512         overflow: hidden;
5513       }
5514
5515       &__relationship {
5516         width: 23px;
5517         min-height: 1px;
5518         flex: 0 0 auto;
5519       }
5520
5521       .avatar {
5522         flex: 0 0 auto;
5523         width: 48px;
5524         height: 48px;
5525         padding-top: 2px;
5526
5527         img {
5528           width: 100%;
5529           height: 100%;
5530           display: block;
5531           margin: 0;
5532           border-radius: 4px;
5533           background: darken($ui-base-color, 8%);
5534           object-fit: cover;
5535         }
5536       }
5537
5538       .display-name {
5539         margin-left: 15px;
5540         text-align: left;
5541
5542         strong {
5543           font-size: 15px;
5544           color: $primary-text-color;
5545           font-weight: 500;
5546           overflow: hidden;
5547           text-overflow: ellipsis;
5548         }
5549
5550         span {
5551           display: block;
5552           font-size: 14px;
5553           color: $darker-text-color;
5554           font-weight: 400;
5555           overflow: hidden;
5556           text-overflow: ellipsis;
5557         }
5558       }
5559     }
5560
5561     &__extra {
5562       background: $ui-base-color;
5563       display: flex;
5564       align-items: center;
5565       justify-content: center;
5566
5567       .accounts-table__count {
5568         width: 33.33%;
5569         flex: 0 0 auto;
5570         padding: 15px 0;
5571       }
5572
5573       .account__header__content {
5574         box-sizing: border-box;
5575         padding: 15px 10px;
5576         border-bottom: 1px solid lighten($ui-base-color, 8%);
5577         width: 100%;
5578         min-height: 18px + 30px;
5579         white-space: nowrap;
5580         overflow: hidden;
5581         text-overflow: ellipsis;
5582
5583         p {
5584           display: none;
5585
5586           &:first-child {
5587             display: inline;
5588           }
5589         }
5590
5591         br {
5592           display: none;
5593         }
5594       }
5595     }
5596   }
5597 }
5598
5599 .account-gallery__container {
5600   display: flex;
5601   flex-wrap: wrap;
5602   padding: 4px 2px;
5603 }
5604
5605 .account-gallery__item {
5606   border: 0;
5607   box-sizing: border-box;
5608   display: block;
5609   position: relative;
5610   border-radius: 4px;
5611   overflow: hidden;
5612   margin: 2px;
5613
5614   &__icons {
5615     position: absolute;
5616     top: 50%;
5617     left: 50%;
5618     transform: translate(-50%, -50%);
5619     font-size: 24px;
5620   }
5621 }
5622
5623 .notification__filter-bar,
5624 .account__section-headline {
5625   background: darken($ui-base-color, 4%);
5626   border-bottom: 1px solid lighten($ui-base-color, 8%);
5627   cursor: default;
5628   display: flex;
5629   flex-shrink: 0;
5630
5631   button {
5632     background: darken($ui-base-color, 4%);
5633     border: 0;
5634     margin: 0;
5635   }
5636
5637   button,
5638   a {
5639     display: block;
5640     flex: 1 1 auto;
5641     color: $darker-text-color;
5642     padding: 15px 0;
5643     font-size: 14px;
5644     font-weight: 500;
5645     text-align: center;
5646     text-decoration: none;
5647     position: relative;
5648
5649     &.active {
5650       color: $secondary-text-color;
5651
5652       &::before,
5653       &::after {
5654         display: block;
5655         content: "";
5656         position: absolute;
5657         bottom: 0;
5658         left: 50%;
5659         width: 0;
5660         height: 0;
5661         transform: translateX(-50%);
5662         border-style: solid;
5663         border-width: 0 10px 10px;
5664         border-color: transparent transparent lighten($ui-base-color, 8%);
5665       }
5666
5667       &::after {
5668         bottom: -1px;
5669         border-color: transparent transparent $ui-base-color;
5670       }
5671     }
5672   }
5673
5674   &.directory__section-headline {
5675     background: darken($ui-base-color, 2%);
5676     border-bottom-color: transparent;
5677
5678     a,
5679     button {
5680       &.active {
5681         &::before {
5682           display: none;
5683         }
5684
5685         &::after {
5686           border-color: transparent transparent darken($ui-base-color, 7%);
5687         }
5688       }
5689     }
5690   }
5691 }
5692
5693 .filter-form {
5694   background: $ui-base-color;
5695
5696   &__column {
5697     padding: 10px 15px;
5698   }
5699
5700   .radio-button {
5701     display: block;
5702   }
5703 }
5704
5705 .radio-button {
5706   font-size: 14px;
5707   position: relative;
5708   display: inline-block;
5709   padding: 6px 0;
5710   line-height: 18px;
5711   cursor: default;
5712   white-space: nowrap;
5713   overflow: hidden;
5714   text-overflow: ellipsis;
5715   cursor: pointer;
5716
5717   input[type=radio],
5718   input[type=checkbox] {
5719     display: none;
5720   }
5721
5722   &__input {
5723     display: inline-block;
5724     position: relative;
5725     border: 1px solid $ui-primary-color;
5726     box-sizing: border-box;
5727     width: 18px;
5728     height: 18px;
5729     flex: 0 0 auto;
5730     margin-right: 10px;
5731     top: -1px;
5732     border-radius: 50%;
5733     vertical-align: middle;
5734
5735     &.checked {
5736       border-color: lighten($ui-highlight-color, 8%);
5737       background: lighten($ui-highlight-color, 8%);
5738     }
5739   }
5740 }
5741
5742 ::-webkit-scrollbar-thumb {
5743   border-radius: 0;
5744 }
5745
5746 .search-popout {
5747   @include search-popout;
5748 }
5749
5750 noscript {
5751   text-align: center;
5752
5753   img {
5754     width: 200px;
5755     opacity: 0.5;
5756     animation: flicker 4s infinite;
5757   }
5758
5759   div {
5760     font-size: 14px;
5761     margin: 30px auto;
5762     color: $secondary-text-color;
5763     max-width: 400px;
5764
5765     a {
5766       color: $highlight-text-color;
5767       text-decoration: underline;
5768
5769       &:hover {
5770         text-decoration: none;
5771       }
5772     }
5773   }
5774 }
5775
5776 @keyframes flicker {
5777   0% { opacity: 1; }
5778   30% { opacity: 0.75; }
5779   100% { opacity: 1; }
5780 }
5781
5782 @media screen and (max-width: 630px) and (max-height: 400px) {
5783   $duration: 400ms;
5784   $delay: 100ms;
5785
5786   .tabs-bar,
5787   .search {
5788     will-change: margin-top;
5789     transition: margin-top $duration $delay;
5790   }
5791
5792   .navigation-bar {
5793     will-change: padding-bottom;
5794     transition: padding-bottom $duration $delay;
5795   }
5796
5797   .navigation-bar {
5798     & > a:first-child {
5799       will-change: margin-top, margin-left, margin-right, width;
5800       transition: margin-top $duration $delay, margin-left $duration ($duration + $delay), margin-right $duration ($duration + $delay);
5801     }
5802
5803     & > .navigation-bar__profile-edit {
5804       will-change: margin-top;
5805       transition: margin-top $duration $delay;
5806     }
5807
5808     .navigation-bar__actions {
5809       & > .icon-button.close {
5810         will-change: opacity transform;
5811         transition: opacity $duration * 0.5 $delay,
5812                     transform $duration $delay;
5813       }
5814
5815       & > .compose__action-bar .icon-button {
5816         will-change: opacity transform;
5817         transition: opacity $duration * 0.5 $delay + $duration * 0.5,
5818                     transform $duration $delay;
5819       }
5820     }
5821   }
5822
5823   .is-composing {
5824     .tabs-bar,
5825     .search {
5826       margin-top: -50px;
5827     }
5828
5829     .navigation-bar {
5830       padding-bottom: 0;
5831
5832       & > a:first-child {
5833         margin: -100px 10px 0 -50px;
5834       }
5835
5836       .navigation-bar__profile {
5837         padding-top: 2px;
5838       }
5839
5840       .navigation-bar__profile-edit {
5841         position: absolute;
5842         margin-top: -60px;
5843       }
5844
5845       .navigation-bar__actions {
5846         .icon-button.close {
5847           pointer-events: auto;
5848           opacity: 1;
5849           transform: scale(1, 1) translate(0, 0);
5850           bottom: 5px;
5851         }
5852
5853         .compose__action-bar .icon-button {
5854           pointer-events: none;
5855           opacity: 0;
5856           transform: scale(0, 1) translate(100%, 0);
5857         }
5858       }
5859     }
5860   }
5861 }
5862
5863 .embed-modal {
5864   width: auto;
5865   max-width: 80vw;
5866   max-height: 80vh;
5867
5868   h4 {
5869     padding: 30px;
5870     font-weight: 500;
5871     font-size: 16px;
5872     text-align: center;
5873   }
5874
5875   .embed-modal__container {
5876     padding: 10px;
5877
5878     .hint {
5879       margin-bottom: 15px;
5880     }
5881
5882     .embed-modal__html {
5883       outline: 0;
5884       box-sizing: border-box;
5885       display: block;
5886       width: 100%;
5887       border: 0;
5888       padding: 10px;
5889       font-family: $font-monospace, monospace;
5890       background: $ui-base-color;
5891       color: $primary-text-color;
5892       font-size: 14px;
5893       margin: 0;
5894       margin-bottom: 15px;
5895       border-radius: 4px;
5896
5897       &::-moz-focus-inner {
5898         border: 0;
5899       }
5900
5901       &::-moz-focus-inner,
5902       &:focus,
5903       &:active {
5904         outline: 0 !important;
5905       }
5906
5907       &:focus {
5908         background: lighten($ui-base-color, 4%);
5909       }
5910
5911       @media screen and (max-width: 600px) {
5912         font-size: 16px;
5913       }
5914     }
5915
5916     .embed-modal__iframe {
5917       width: 400px;
5918       max-width: 100%;
5919       overflow: hidden;
5920       border: 0;
5921       border-radius: 4px;
5922     }
5923   }
5924 }
5925
5926 .account__moved-note {
5927   padding: 14px 10px;
5928   padding-bottom: 16px;
5929   background: lighten($ui-base-color, 4%);
5930   border-top: 1px solid lighten($ui-base-color, 8%);
5931   border-bottom: 1px solid lighten($ui-base-color, 8%);
5932
5933   &__message {
5934     position: relative;
5935     margin-left: 58px;
5936     color: $dark-text-color;
5937     padding: 8px 0;
5938     padding-top: 0;
5939     padding-bottom: 4px;
5940     font-size: 14px;
5941
5942     > span {
5943       display: block;
5944       overflow: hidden;
5945       text-overflow: ellipsis;
5946     }
5947   }
5948
5949   &__icon-wrapper {
5950     left: -26px;
5951     position: absolute;
5952   }
5953
5954   .detailed-status__display-avatar {
5955     position: relative;
5956   }
5957
5958   .detailed-status__display-name {
5959     margin-bottom: 0;
5960   }
5961 }
5962
5963 .column-inline-form {
5964   padding: 15px;
5965   padding-right: 0;
5966   display: flex;
5967   justify-content: flex-start;
5968   align-items: center;
5969   background: lighten($ui-base-color, 4%);
5970
5971   label {
5972     flex: 1 1 auto;
5973
5974     input {
5975       width: 100%;
5976
5977       &:focus {
5978         outline: 0;
5979       }
5980     }
5981   }
5982
5983   .icon-button {
5984     flex: 0 0 auto;
5985     margin: 0 10px;
5986   }
5987 }
5988
5989 .drawer__backdrop {
5990   cursor: pointer;
5991   position: absolute;
5992   top: 0;
5993   left: 0;
5994   width: 100%;
5995   height: 100%;
5996   background: rgba($base-overlay-background, 0.5);
5997 }
5998
5999 .list-editor {
6000   background: $ui-base-color;
6001   flex-direction: column;
6002   border-radius: 8px;
6003   box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
6004   width: 380px;
6005   overflow: hidden;
6006
6007   @media screen and (max-width: 420px) {
6008     width: 90%;
6009   }
6010
6011   h4 {
6012     padding: 15px 0;
6013     background: lighten($ui-base-color, 13%);
6014     font-weight: 500;
6015     font-size: 16px;
6016     text-align: center;
6017     border-radius: 8px 8px 0 0;
6018   }
6019
6020   .drawer__pager {
6021     height: 50vh;
6022   }
6023
6024   .drawer__inner {
6025     border-radius: 0 0 8px 8px;
6026
6027     &.backdrop {
6028       width: calc(100% - 60px);
6029       box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
6030       border-radius: 0 0 0 8px;
6031     }
6032   }
6033
6034   &__accounts {
6035     overflow-y: auto;
6036   }
6037
6038   .account__display-name {
6039     &:hover strong {
6040       text-decoration: none;
6041     }
6042   }
6043
6044   .account__avatar {
6045     cursor: default;
6046   }
6047
6048   .search {
6049     margin-bottom: 0;
6050   }
6051 }
6052
6053 .list-adder {
6054   background: $ui-base-color;
6055   flex-direction: column;
6056   border-radius: 8px;
6057   box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
6058   width: 380px;
6059   overflow: hidden;
6060
6061   @media screen and (max-width: 420px) {
6062     width: 90%;
6063   }
6064
6065   &__account {
6066     background: lighten($ui-base-color, 13%);
6067   }
6068
6069   &__lists {
6070     background: lighten($ui-base-color, 13%);
6071     height: 50vh;
6072     border-radius: 0 0 8px 8px;
6073     overflow-y: auto;
6074   }
6075
6076   .list {
6077     padding: 10px;
6078     border-bottom: 1px solid lighten($ui-base-color, 8%);
6079   }
6080
6081   .list__wrapper {
6082     display: flex;
6083   }
6084
6085   .list__display-name {
6086     flex: 1 1 auto;
6087     overflow: hidden;
6088     text-decoration: none;
6089     font-size: 16px;
6090     padding: 10px;
6091   }
6092 }
6093
6094 .focal-point {
6095   position: relative;
6096   cursor: move;
6097   overflow: hidden;
6098   height: 100%;
6099   display: flex;
6100   justify-content: center;
6101   align-items: center;
6102   background: $base-shadow-color;
6103
6104   img,
6105   video {
6106     display: block;
6107     max-height: 80vh;
6108     width: 100%;
6109     height: auto;
6110     margin: 0;
6111     object-fit: contain;
6112     background: $base-shadow-color;
6113   }
6114
6115   &__reticle {
6116     position: absolute;
6117     width: 100px;
6118     height: 100px;
6119     transform: translate(-50%, -50%);
6120     background: url('../images/reticle.png') no-repeat 0 0;
6121     border-radius: 50%;
6122     box-shadow: 0 0 0 9999em rgba($base-shadow-color, 0.35);
6123   }
6124
6125   &__overlay {
6126     position: absolute;
6127     width: 100%;
6128     height: 100%;
6129     top: 0;
6130     left: 0;
6131   }
6132
6133   &__preview {
6134     position: absolute;
6135     bottom: 10px;
6136     right: 10px;
6137     z-index: 2;
6138     cursor: move;
6139     transition: opacity 0.1s ease;
6140
6141     &:hover {
6142       opacity: 0.5;
6143     }
6144
6145     strong {
6146       color: $primary-text-color;
6147       font-size: 14px;
6148       font-weight: 500;
6149       display: block;
6150       margin-bottom: 5px;
6151     }
6152
6153     div {
6154       border-radius: 4px;
6155       box-shadow: 0 0 14px rgba($base-shadow-color, 0.2);
6156     }
6157   }
6158
6159   @media screen and (max-width: 480px) {
6160     img,
6161     video {
6162       max-height: 100%;
6163     }
6164
6165     &__preview {
6166       display: none;
6167     }
6168   }
6169 }
6170
6171 .account__header__content {
6172   color: $darker-text-color;
6173   font-size: 14px;
6174   font-weight: 400;
6175   overflow: hidden;
6176   word-break: normal;
6177   word-wrap: break-word;
6178
6179   p {
6180     margin-bottom: 20px;
6181
6182     &:last-child {
6183       margin-bottom: 0;
6184     }
6185   }
6186
6187   a {
6188     color: inherit;
6189     text-decoration: underline;
6190
6191     &:hover {
6192       text-decoration: none;
6193     }
6194   }
6195 }
6196
6197 .account__header {
6198   overflow: hidden;
6199
6200   &.inactive {
6201     opacity: 0.5;
6202
6203     .account__header__image,
6204     .account__avatar {
6205       filter: grayscale(100%);
6206     }
6207   }
6208
6209   &__info {
6210     position: absolute;
6211     top: 10px;
6212     left: 10px;
6213   }
6214
6215   &__image {
6216     overflow: hidden;
6217     height: 145px;
6218     position: relative;
6219     background: darken($ui-base-color, 4%);
6220
6221     img {
6222       object-fit: cover;
6223       display: block;
6224       width: 100%;
6225       height: 100%;
6226       margin: 0;
6227     }
6228   }
6229
6230   &__bar {
6231     position: relative;
6232     background: lighten($ui-base-color, 4%);
6233     padding: 5px;
6234     border-bottom: 1px solid lighten($ui-base-color, 12%);
6235
6236     .avatar {
6237       display: block;
6238       flex: 0 0 auto;
6239       width: 94px;
6240       margin-left: -2px;
6241
6242       .account__avatar {
6243         background: darken($ui-base-color, 8%);
6244         border: 2px solid lighten($ui-base-color, 4%);
6245       }
6246     }
6247   }
6248
6249   &__tabs {
6250     display: flex;
6251     align-items: flex-start;
6252     padding: 7px 5px;
6253     margin-top: -55px;
6254
6255     &__buttons {
6256       display: flex;
6257       align-items: center;
6258       padding-top: 55px;
6259       overflow: hidden;
6260
6261       .icon-button {
6262         border: 1px solid lighten($ui-base-color, 12%);
6263         border-radius: 4px;
6264         box-sizing: content-box;
6265         padding: 2px;
6266       }
6267
6268       .button {
6269         margin: 0 8px;
6270       }
6271     }
6272
6273     &__name {
6274       padding: 5px;
6275
6276       .account-role {
6277         vertical-align: top;
6278       }
6279
6280       .emojione {
6281         width: 22px;
6282         height: 22px;
6283       }
6284
6285       h1 {
6286         font-size: 16px;
6287         line-height: 24px;
6288         color: $primary-text-color;
6289         font-weight: 500;
6290         overflow: hidden;
6291         white-space: nowrap;
6292         text-overflow: ellipsis;
6293
6294         small {
6295           display: block;
6296           font-size: 14px;
6297           color: $darker-text-color;
6298           font-weight: 400;
6299           overflow: hidden;
6300           text-overflow: ellipsis;
6301         }
6302       }
6303     }
6304
6305     .spacer {
6306       flex: 1 1 auto;
6307     }
6308   }
6309
6310   &__bio {
6311     overflow: hidden;
6312     margin: 0 -5px;
6313
6314     .account__header__content {
6315       padding: 20px 15px;
6316       padding-bottom: 5px;
6317       color: $primary-text-color;
6318     }
6319
6320     .account__header__fields {
6321       margin: 0;
6322       border-top: 1px solid lighten($ui-base-color, 12%);
6323
6324       a {
6325         color: lighten($ui-highlight-color, 8%);
6326       }
6327
6328       dl:first-child .verified {
6329         border-radius: 0 4px 0 0;
6330       }
6331
6332       .verified a {
6333         color: $valid-value-color;
6334       }
6335     }
6336   }
6337
6338   &__extra {
6339     margin-top: 4px;
6340
6341     &__links {
6342       font-size: 14px;
6343       color: $darker-text-color;
6344
6345       a {
6346         display: inline-block;
6347         color: $darker-text-color;
6348         text-decoration: none;
6349         padding: 10px;
6350         padding-top: 20px;
6351         font-weight: 500;
6352
6353         strong {
6354           font-weight: 700;
6355           color: $primary-text-color;
6356         }
6357       }
6358     }
6359   }
6360 }
6361
6362 .trends {
6363   &__header {
6364     color: $dark-text-color;
6365     background: lighten($ui-base-color, 2%);
6366     border-bottom: 1px solid darken($ui-base-color, 4%);
6367     font-weight: 500;
6368     padding: 15px;
6369     font-size: 16px;
6370     cursor: default;
6371
6372     .fa {
6373       display: inline-block;
6374       margin-right: 5px;
6375     }
6376   }
6377
6378   &__item {
6379     display: flex;
6380     align-items: center;
6381     padding: 15px;
6382     border-bottom: 1px solid lighten($ui-base-color, 8%);
6383
6384     &:last-child {
6385       border-bottom: 0;
6386     }
6387
6388     &__name {
6389       flex: 1 1 auto;
6390       color: $dark-text-color;
6391       overflow: hidden;
6392       text-overflow: ellipsis;
6393       white-space: nowrap;
6394
6395       strong {
6396         font-weight: 500;
6397       }
6398
6399       a {
6400         color: $darker-text-color;
6401         text-decoration: none;
6402         font-size: 14px;
6403         font-weight: 500;
6404         display: block;
6405         overflow: hidden;
6406         text-overflow: ellipsis;
6407         white-space: nowrap;
6408
6409         &:hover,
6410         &:focus,
6411         &:active {
6412           span {
6413             text-decoration: underline;
6414           }
6415         }
6416       }
6417     }
6418
6419     &__current {
6420       flex: 0 0 auto;
6421       font-size: 24px;
6422       line-height: 36px;
6423       font-weight: 500;
6424       text-align: right;
6425       padding-right: 15px;
6426       margin-left: 5px;
6427       color: $secondary-text-color;
6428     }
6429
6430     &__sparkline {
6431       flex: 0 0 auto;
6432       width: 50px;
6433
6434       path:first-child {
6435         fill: rgba($highlight-text-color, 0.25) !important;
6436         fill-opacity: 1 !important;
6437       }
6438
6439       path:last-child {
6440         stroke: lighten($highlight-text-color, 6%) !important;
6441       }
6442     }
6443   }
6444 }
6445
6446 .conversation {
6447   display: flex;
6448   border-bottom: 1px solid lighten($ui-base-color, 8%);
6449   padding: 5px;
6450   padding-bottom: 0;
6451
6452   &:focus {
6453     background: lighten($ui-base-color, 2%);
6454     outline: 0;
6455   }
6456
6457   &__avatar {
6458     flex: 0 0 auto;
6459     padding: 10px;
6460     padding-top: 12px;
6461   }
6462
6463   &__content {
6464     flex: 1 1 auto;
6465     padding: 10px 5px;
6466     padding-right: 15px;
6467     overflow: hidden;
6468
6469     &__info {
6470       overflow: hidden;
6471       display: flex;
6472       flex-direction: row-reverse;
6473       justify-content: space-between;
6474     }
6475
6476     &__relative-time {
6477       font-size: 15px;
6478       color: $darker-text-color;
6479       padding-left: 15px;
6480     }
6481
6482     &__names {
6483       color: $darker-text-color;
6484       font-size: 15px;
6485       white-space: nowrap;
6486       overflow: hidden;
6487       text-overflow: ellipsis;
6488       margin-bottom: 4px;
6489       flex-basis: 90px;
6490       flex-grow: 1;
6491
6492       a {
6493         color: $primary-text-color;
6494         text-decoration: none;
6495
6496         &:hover,
6497         &:focus,
6498         &:active {
6499           text-decoration: underline;
6500         }
6501       }
6502     }
6503
6504     a {
6505       word-break: break-word;
6506     }
6507   }
6508 }