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