app/javascript/styles/mastodon/components.scss

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