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   border-bottom: 4px solid transparent;
1301
1302   &.active {
1303     border-bottom: 4px solid $ui-highlight-color;
1304   }
1305
1306   & > span {
1307     display: block;
1308     text-transform: uppercase;
1309     font-size: 11px;
1310     color: $darker-text-color;
1311   }
1312
1313   strong {
1314     display: block;
1315     font-size: 15px;
1316     font-weight: 500;
1317     color: $primary-text-color;
1318
1319     @each $lang in $cjk-langs {
1320       &:lang(#{$lang}) {
1321         font-weight: 700;
1322       }
1323     }
1324   }
1325 }
1326
1327 .account__header__avatar {
1328   background-size: 90px 90px;
1329   display: block;
1330   height: 90px;
1331   margin: 0 auto 10px;
1332   overflow: hidden;
1333   width: 90px;
1334 }
1335
1336 .account-authorize {
1337   padding: 14px 10px;
1338
1339   .detailed-status__display-name {
1340     display: block;
1341     margin-bottom: 15px;
1342     overflow: hidden;
1343   }
1344 }
1345
1346 .account-authorize__avatar {
1347   float: left;
1348   margin-right: 10px;
1349 }
1350
1351 .status__display-name,
1352 .status__relative-time,
1353 .detailed-status__display-name,
1354 .detailed-status__datetime,
1355 .detailed-status__application,
1356 .account__display-name {
1357   text-decoration: none;
1358 }
1359
1360 .status__display-name,
1361 .account__display-name {
1362   strong {
1363     color: $primary-text-color;
1364   }
1365 }
1366
1367 .muted {
1368   .emojione {
1369     opacity: 0.5;
1370   }
1371 }
1372
1373 .status__display-name,
1374 .reply-indicator__display-name,
1375 .detailed-status__display-name,
1376 a.account__display-name {
1377   &:hover strong {
1378     text-decoration: underline;
1379   }
1380 }
1381
1382 .account__display-name strong {
1383   display: block;
1384   overflow: hidden;
1385   text-overflow: ellipsis;
1386 }
1387
1388 .detailed-status__application,
1389 .detailed-status__datetime {
1390   color: inherit;
1391 }
1392
1393 .detailed-status__display-name {
1394   color: $secondary-text-color;
1395   display: block;
1396   line-height: 24px;
1397   margin-bottom: 15px;
1398   overflow: hidden;
1399
1400   strong,
1401   span {
1402     display: block;
1403     text-overflow: ellipsis;
1404     overflow: hidden;
1405   }
1406
1407   strong {
1408     font-size: 16px;
1409     color: $primary-text-color;
1410   }
1411 }
1412
1413 .detailed-status__display-avatar {
1414   float: left;
1415   margin-right: 10px;
1416 }
1417
1418 .status__avatar {
1419   height: 48px;
1420   left: 10px;
1421   position: absolute;
1422   top: 10px;
1423   width: 48px;
1424 }
1425
1426 .muted {
1427   .status__content p,
1428   .status__content a {
1429     color: $dark-text-color;
1430   }
1431
1432   .status__display-name strong {
1433     color: $dark-text-color;
1434   }
1435
1436   .status__avatar {
1437     opacity: 0.5;
1438   }
1439
1440   a.status__content__spoiler-link {
1441     background: $ui-base-lighter-color;
1442     color: $inverted-text-color;
1443
1444     &:hover {
1445       background: lighten($ui-base-lighter-color, 7%);
1446       text-decoration: none;
1447     }
1448   }
1449 }
1450
1451 .notification__message {
1452   margin: 0 10px 0 68px;
1453   padding: 8px 0 0;
1454   cursor: default;
1455   color: $darker-text-color;
1456   font-size: 15px;
1457   position: relative;
1458
1459   .fa {
1460     color: $highlight-text-color;
1461   }
1462
1463   > span {
1464     display: block;
1465     overflow: hidden;
1466     text-overflow: ellipsis;
1467   }
1468 }
1469
1470 .notification__favourite-icon-wrapper {
1471   left: -26px;
1472   position: absolute;
1473
1474   .star-icon {
1475     color: $gold-star;
1476   }
1477 }
1478
1479 .star-icon.active {
1480   color: $gold-star;
1481 }
1482
1483 .notification__display-name {
1484   color: inherit;
1485   font-weight: 500;
1486   text-decoration: none;
1487
1488   &:hover {
1489     color: $primary-text-color;
1490     text-decoration: underline;
1491   }
1492 }
1493
1494 .display-name {
1495   display: block;
1496   max-width: 100%;
1497   overflow: hidden;
1498   text-overflow: ellipsis;
1499   white-space: nowrap;
1500 }
1501
1502 .display-name__html {
1503   font-weight: 500;
1504 }
1505
1506 .display-name__account {
1507   font-size: 14px;
1508 }
1509
1510 .status__relative-time,
1511 .detailed-status__datetime {
1512   &:hover {
1513     text-decoration: underline;
1514   }
1515 }
1516
1517 .image-loader {
1518   position: relative;
1519   width: 100%;
1520   height: 100%;
1521   display: flex;
1522   align-items: center;
1523   justify-content: center;
1524   flex-direction: column;
1525
1526   .image-loader__preview-canvas {
1527     max-width: $media-modal-media-max-width;
1528     max-height: $media-modal-media-max-height;
1529     background: url('../images/void.png') repeat;
1530     object-fit: contain;
1531   }
1532
1533   .loading-bar {
1534     position: relative;
1535   }
1536
1537   &.image-loader--amorphous .image-loader__preview-canvas {
1538     display: none;
1539   }
1540 }
1541
1542 .zoomable-image {
1543   position: relative;
1544   width: 100%;
1545   height: 100%;
1546   display: flex;
1547   align-items: center;
1548   justify-content: center;
1549
1550   img {
1551     max-width: $media-modal-media-max-width;
1552     max-height: $media-modal-media-max-height;
1553     width: auto;
1554     height: auto;
1555     object-fit: contain;
1556   }
1557 }
1558
1559 .navigation-bar {
1560   padding: 10px;
1561   display: flex;
1562   align-items: center;
1563   flex-shrink: 0;
1564   cursor: default;
1565   color: $darker-text-color;
1566
1567   strong {
1568     color: $secondary-text-color;
1569   }
1570
1571   a {
1572     color: inherit;
1573   }
1574
1575   .permalink {
1576     text-decoration: none;
1577   }
1578
1579   .navigation-bar__actions {
1580     position: relative;
1581
1582     .icon-button.close {
1583       position: absolute;
1584       pointer-events: none;
1585       transform: scale(0.0, 1.0) translate(-100%, 0);
1586       opacity: 0;
1587     }
1588
1589     .compose__action-bar .icon-button {
1590       pointer-events: auto;
1591       transform: scale(1.0, 1.0) translate(0, 0);
1592       opacity: 1;
1593     }
1594   }
1595 }
1596
1597 .navigation-bar__profile {
1598   flex: 1 1 auto;
1599   margin-left: 8px;
1600   line-height: 20px;
1601   margin-top: -1px;
1602   overflow: hidden;
1603 }
1604
1605 .navigation-bar__profile-account {
1606   display: block;
1607   font-weight: 500;
1608   overflow: hidden;
1609   text-overflow: ellipsis;
1610 }
1611
1612 .navigation-bar__profile-edit {
1613   color: inherit;
1614   text-decoration: none;
1615 }
1616
1617 .dropdown {
1618   display: inline-block;
1619 }
1620
1621 .dropdown__content {
1622   display: none;
1623   position: absolute;
1624 }
1625
1626 .dropdown-menu__separator {
1627   border-bottom: 1px solid darken($ui-secondary-color, 8%);
1628   margin: 5px 7px 6px;
1629   height: 0;
1630 }
1631
1632 .dropdown-menu {
1633   background: $ui-secondary-color;
1634   padding: 4px 0;
1635   border-radius: 4px;
1636   box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
1637
1638   ul {
1639     list-style: none;
1640   }
1641
1642   &.left {
1643     transform-origin: 100% 50%;
1644   }
1645
1646   &.top {
1647     transform-origin: 50% 100%;
1648   }
1649
1650   &.bottom {
1651     transform-origin: 50% 0;
1652   }
1653
1654   &.right {
1655     transform-origin: 0 50%;
1656   }
1657 }
1658
1659 .dropdown-menu__arrow {
1660   position: absolute;
1661   width: 0;
1662   height: 0;
1663   border: 0 solid transparent;
1664
1665   &.left {
1666     right: -5px;
1667     margin-top: -5px;
1668     border-width: 5px 0 5px 5px;
1669     border-left-color: $ui-secondary-color;
1670   }
1671
1672   &.top {
1673     bottom: -5px;
1674     margin-left: -7px;
1675     border-width: 5px 7px 0;
1676     border-top-color: $ui-secondary-color;
1677   }
1678
1679   &.bottom {
1680     top: -5px;
1681     margin-left: -7px;
1682     border-width: 0 7px 5px;
1683     border-bottom-color: $ui-secondary-color;
1684   }
1685
1686   &.right {
1687     left: -5px;
1688     margin-top: -5px;
1689     border-width: 5px 5px 5px 0;
1690     border-right-color: $ui-secondary-color;
1691   }
1692 }
1693
1694 .dropdown-menu__item {
1695   a {
1696     font-size: 13px;
1697     line-height: 18px;
1698     display: block;
1699     padding: 4px 14px;
1700     box-sizing: border-box;
1701     text-decoration: none;
1702     background: $ui-secondary-color;
1703     color: $inverted-text-color;
1704     overflow: hidden;
1705     text-overflow: ellipsis;
1706     white-space: nowrap;
1707
1708     &:focus,
1709     &:hover,
1710     &:active {
1711       background: $ui-highlight-color;
1712       color: $secondary-text-color;
1713       outline: 0;
1714     }
1715   }
1716 }
1717
1718 .dropdown--active .dropdown__content {
1719   display: block;
1720   line-height: 18px;
1721   max-width: 311px;
1722   right: 0;
1723   text-align: left;
1724   z-index: 9999;
1725
1726   & > ul {
1727     list-style: none;
1728     background: $ui-secondary-color;
1729     padding: 4px 0;
1730     border-radius: 4px;
1731     box-shadow: 0 0 15px rgba($base-shadow-color, 0.4);
1732     min-width: 140px;
1733     position: relative;
1734   }
1735
1736   &.dropdown__right {
1737     right: 0;
1738   }
1739
1740   &.dropdown__left {
1741     & > ul {
1742       left: -98px;
1743     }
1744   }
1745
1746   & > ul > li > a {
1747     font-size: 13px;
1748     line-height: 18px;
1749     display: block;
1750     padding: 4px 14px;
1751     box-sizing: border-box;
1752     text-decoration: none;
1753     background: $ui-secondary-color;
1754     color: $inverted-text-color;
1755     overflow: hidden;
1756     text-overflow: ellipsis;
1757     white-space: nowrap;
1758
1759     &:focus {
1760       outline: 0;
1761     }
1762
1763     &:hover {
1764       background: $ui-highlight-color;
1765       color: $secondary-text-color;
1766     }
1767   }
1768 }
1769
1770 .dropdown__icon {
1771   vertical-align: middle;
1772 }
1773
1774 .columns-area {
1775   display: flex;
1776   flex: 1 1 auto;
1777   flex-direction: row;
1778   justify-content: flex-start;
1779   overflow-x: auto;
1780   position: relative;
1781
1782   &.unscrollable {
1783     overflow-x: hidden;
1784   }
1785 }
1786
1787 @media screen and (min-width: 360px) {
1788   .columns-area {
1789     padding: 10px;
1790   }
1791
1792   .react-swipeable-view-container .columns-area {
1793     height: calc(100% - 20px) !important;
1794   }
1795 }
1796
1797 .react-swipeable-view-container {
1798   &,
1799   .columns-area,
1800   .drawer,
1801   .column {
1802     height: 100%;
1803   }
1804 }
1805
1806 .react-swipeable-view-container > * {
1807   display: flex;
1808   align-items: center;
1809   justify-content: center;
1810   height: 100%;
1811 }
1812
1813 .column {
1814   width: 330px;
1815   position: relative;
1816   box-sizing: border-box;
1817   display: flex;
1818   flex-direction: column;
1819
1820   > .scrollable {
1821     background: $ui-base-color;
1822   }
1823 }
1824
1825 .ui {
1826   flex: 0 0 auto;
1827   display: flex;
1828   flex-direction: column;
1829   width: 100%;
1830   height: 100%;
1831   background: darken($ui-base-color, 7%);
1832 }
1833
1834 .drawer {
1835   width: 300px;
1836   box-sizing: border-box;
1837   display: flex;
1838   flex-direction: column;
1839   overflow-y: hidden;
1840 }
1841
1842 .drawer__tab {
1843   display: block;
1844   flex: 1 1 auto;
1845   padding: 15px 5px 13px;
1846   color: $darker-text-color;
1847   text-decoration: none;
1848   text-align: center;
1849   font-size: 16px;
1850   border-bottom: 2px solid transparent;
1851 }
1852
1853 .column,
1854 .drawer {
1855   flex: 1 1 100%;
1856   overflow: hidden;
1857 }
1858
1859 @media screen and (min-width: 360px) {
1860   .tabs-bar {
1861     margin: 10px;
1862     margin-bottom: 0;
1863   }
1864
1865   .getting-started__wrapper,
1866   .getting-started__trends,
1867   .search {
1868     margin-bottom: 10px;
1869   }
1870 }
1871
1872 @media screen and (max-width: 630px) {
1873   .column,
1874   .drawer {
1875     width: 100%;
1876     padding: 0;
1877   }
1878
1879   .columns-area {
1880     flex-direction: column;
1881   }
1882
1883   .search__input,
1884   .autosuggest-textarea__textarea {
1885     font-size: 16px;
1886   }
1887 }
1888
1889 @media screen and (min-width: 631px) {
1890   .columns-area {
1891     padding: 0;
1892   }
1893
1894   .column,
1895   .drawer {
1896     flex: 0 0 auto;
1897     padding: 10px;
1898     padding-left: 5px;
1899     padding-right: 5px;
1900
1901     &:first-child {
1902       padding-left: 10px;
1903     }
1904
1905     &:last-child {
1906       padding-right: 10px;
1907     }
1908   }
1909
1910   .columns-area > div {
1911     .column,
1912     .drawer {
1913       padding-left: 5px;
1914       padding-right: 5px;
1915     }
1916   }
1917 }
1918
1919 .drawer__pager {
1920   box-sizing: border-box;
1921   padding: 0;
1922   flex-grow: 1;
1923   position: relative;
1924   overflow: hidden;
1925   display: flex;
1926 }
1927
1928 .drawer__inner {
1929   position: absolute;
1930   top: 0;
1931   left: 0;
1932   background: lighten($ui-base-color, 13%);
1933   box-sizing: border-box;
1934   padding: 0;
1935   display: flex;
1936   flex-direction: column;
1937   overflow: hidden;
1938   overflow-y: auto;
1939   width: 100%;
1940   height: 100%;
1941
1942   &.darker {
1943     background: $ui-base-color;
1944   }
1945 }
1946
1947 .drawer__inner__mastodon {
1948   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;
1949   flex: 1;
1950   min-height: 47px;
1951
1952   > img {
1953     display: block;
1954     object-fit: contain;
1955     object-position: bottom left;
1956     width: 100%;
1957     height: 100%;
1958     pointer-events: none;
1959     user-drag: none;
1960     user-select: none;
1961   }
1962 }
1963
1964 .pseudo-drawer {
1965   background: lighten($ui-base-color, 13%);
1966   font-size: 13px;
1967   text-align: left;
1968 }
1969
1970 .drawer__header {
1971   flex: 0 0 auto;
1972   font-size: 16px;
1973   background: lighten($ui-base-color, 8%);
1974   margin-bottom: 10px;
1975   display: flex;
1976   flex-direction: row;
1977
1978   a {
1979     transition: background 100ms ease-in;
1980
1981     &:hover {
1982       background: lighten($ui-base-color, 3%);
1983       transition: background 200ms ease-out;
1984     }
1985   }
1986 }
1987
1988 .tabs-bar {
1989   display: flex;
1990   background: lighten($ui-base-color, 8%);
1991   flex: 0 0 auto;
1992   overflow-y: auto;
1993 }
1994
1995 .tabs-bar__link {
1996   display: block;
1997   flex: 1 1 auto;
1998   padding: 15px 10px;
1999   color: $primary-text-color;
2000   text-decoration: none;
2001   text-align: center;
2002   font-size: 14px;
2003   font-weight: 500;
2004   border-bottom: 2px solid lighten($ui-base-color, 8%);
2005   transition: all 50ms linear;
2006
2007   .fa {
2008     font-weight: 400;
2009     font-size: 16px;
2010   }
2011
2012   &.active {
2013     border-bottom: 2px solid $highlight-text-color;
2014     color: $highlight-text-color;
2015   }
2016
2017   &:hover,
2018   &:focus,
2019   &:active {
2020     @media screen and (min-width: 631px) {
2021       background: lighten($ui-base-color, 14%);
2022     }
2023   }
2024
2025   span {
2026     margin-left: 5px;
2027     display: none;
2028   }
2029 }
2030
2031 @media screen and (min-width: 600px) {
2032   .tabs-bar__link {
2033     span {
2034       display: inline;
2035     }
2036   }
2037 }
2038
2039 @media screen and (min-width: 631px) {
2040   .tabs-bar {
2041     display: none;
2042   }
2043 }
2044
2045 .scrollable {
2046   overflow-y: scroll;
2047   overflow-x: hidden;
2048   flex: 1 1 auto;
2049   -webkit-overflow-scrolling: touch;
2050   will-change: transform; // improves perf in mobile Chrome
2051
2052   &.optionally-scrollable {
2053     overflow-y: auto;
2054   }
2055
2056   @supports(display: grid) { // hack to fix Chrome <57
2057     contain: strict;
2058   }
2059 }
2060
2061 .scrollable.fullscreen {
2062   @supports(display: grid) { // hack to fix Chrome <57
2063     contain: none;
2064   }
2065 }
2066
2067 .column-back-button {
2068   background: lighten($ui-base-color, 4%);
2069   color: $highlight-text-color;
2070   cursor: pointer;
2071   flex: 0 0 auto;
2072   font-size: 16px;
2073   line-height: inherit;
2074   border: 0;
2075   text-align: unset;
2076   padding: 15px;
2077   margin: 0;
2078   z-index: 3;
2079   outline: 0;
2080
2081   &:hover {
2082     text-decoration: underline;
2083   }
2084 }
2085
2086 .column-header__back-button {
2087   background: lighten($ui-base-color, 4%);
2088   border: 0;
2089   font-family: inherit;
2090   color: $highlight-text-color;
2091   cursor: pointer;
2092   white-space: nowrap;
2093   font-size: 16px;
2094   padding: 0 5px 0 0;
2095   z-index: 3;
2096
2097   &:hover {
2098     text-decoration: underline;
2099   }
2100
2101   &:last-child {
2102     padding: 0 15px 0 0;
2103   }
2104 }
2105
2106 .column-back-button__icon {
2107   display: inline-block;
2108   margin-right: 5px;
2109 }
2110
2111 .column-back-button--slim {
2112   position: relative;
2113 }
2114
2115 .column-back-button--slim-button {
2116   cursor: pointer;
2117   flex: 0 0 auto;
2118   font-size: 16px;
2119   padding: 15px;
2120   position: absolute;
2121   right: 0;
2122   top: -48px;
2123 }
2124
2125 .react-toggle {
2126   display: inline-block;
2127   position: relative;
2128   cursor: pointer;
2129   background-color: transparent;
2130   border: 0;
2131   padding: 0;
2132   user-select: none;
2133   -webkit-tap-highlight-color: rgba($base-overlay-background, 0);
2134   -webkit-tap-highlight-color: transparent;
2135 }
2136
2137 .react-toggle-screenreader-only {
2138   border: 0;
2139   clip: rect(0 0 0 0);
2140   height: 1px;
2141   margin: -1px;
2142   overflow: hidden;
2143   padding: 0;
2144   position: absolute;
2145   width: 1px;
2146 }
2147
2148 .react-toggle--disabled {
2149   cursor: not-allowed;
2150   opacity: 0.5;
2151   transition: opacity 0.25s;
2152 }
2153
2154 .react-toggle-track {
2155   width: 50px;
2156   height: 24px;
2157   padding: 0;
2158   border-radius: 30px;
2159   background-color: $ui-base-color;
2160   transition: all 0.2s ease;
2161 }
2162
2163 .react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
2164   background-color: darken($ui-base-color, 10%);
2165 }
2166
2167 .react-toggle--checked .react-toggle-track {
2168   background-color: $ui-highlight-color;
2169 }
2170
2171 .react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track {
2172   background-color: lighten($ui-highlight-color, 10%);
2173 }
2174
2175 .react-toggle-track-check {
2176   position: absolute;
2177   width: 14px;
2178   height: 10px;
2179   top: 0;
2180   bottom: 0;
2181   margin-top: auto;
2182   margin-bottom: auto;
2183   line-height: 0;
2184   left: 8px;
2185   opacity: 0;
2186   transition: opacity 0.25s ease;
2187 }
2188
2189 .react-toggle--checked .react-toggle-track-check {
2190   opacity: 1;
2191   transition: opacity 0.25s ease;
2192 }
2193
2194 .react-toggle-track-x {
2195   position: absolute;
2196   width: 10px;
2197   height: 10px;
2198   top: 0;
2199   bottom: 0;
2200   margin-top: auto;
2201   margin-bottom: auto;
2202   line-height: 0;
2203   right: 10px;
2204   opacity: 1;
2205   transition: opacity 0.25s ease;
2206 }
2207
2208 .react-toggle--checked .react-toggle-track-x {
2209   opacity: 0;
2210 }
2211
2212 .react-toggle-thumb {
2213   transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0ms;
2214   position: absolute;
2215   top: 1px;
2216   left: 1px;
2217   width: 22px;
2218   height: 22px;
2219   border: 1px solid $ui-base-color;
2220   border-radius: 50%;
2221   background-color: darken($simple-background-color, 2%);
2222   box-sizing: border-box;
2223   transition: all 0.25s ease;
2224 }
2225
2226 .react-toggle--checked .react-toggle-thumb {
2227   left: 27px;
2228   border-color: $ui-highlight-color;
2229 }
2230
2231 .column-link {
2232   background: lighten($ui-base-color, 8%);
2233   color: $primary-text-color;
2234   display: block;
2235   font-size: 16px;
2236   padding: 15px;
2237   text-decoration: none;
2238
2239   &:hover {
2240     background: lighten($ui-base-color, 11%);
2241   }
2242 }
2243
2244 .column-link__icon {
2245   display: inline-block;
2246   margin-right: 5px;
2247 }
2248
2249 .column-link__badge {
2250   display: inline-block;
2251   border-radius: 4px;
2252   font-size: 12px;
2253   line-height: 19px;
2254   font-weight: 500;
2255   background: $ui-base-color;
2256   padding: 4px 8px;
2257   margin: -6px 10px;
2258 }
2259
2260 .column-subheading {
2261   background: $ui-base-color;
2262   color: $dark-text-color;
2263   padding: 8px 20px;
2264   font-size: 12px;
2265   font-weight: 500;
2266   text-transform: uppercase;
2267   cursor: default;
2268 }
2269
2270 .getting-started__wrapper,
2271 .getting-started,
2272 .flex-spacer {
2273   background: $ui-base-color;
2274 }
2275
2276 .getting-started__wrapper {
2277   flex: 0 0 auto;
2278 }
2279
2280 .flex-spacer {
2281   flex: 1 1 auto;
2282 }
2283
2284 .getting-started {
2285   color: $dark-text-color;
2286
2287   &__footer {
2288     flex: 0 0 auto;
2289     padding: 10px;
2290     padding-top: 20px;
2291
2292     ul {
2293       margin-bottom: 10px;
2294     }
2295
2296     ul li {
2297       display: inline;
2298     }
2299
2300     p {
2301       color: $dark-text-color;
2302       font-size: 13px;
2303       margin-bottom: 20px;
2304
2305       a {
2306         color: $dark-text-color;
2307         text-decoration: underline;
2308       }
2309     }
2310
2311     a {
2312       text-decoration: none;
2313       color: $darker-text-color;
2314
2315       &:hover,
2316       &:focus,
2317       &:active {
2318         text-decoration: underline;
2319       }
2320     }
2321   }
2322
2323   &__trends {
2324     background: $ui-base-color;
2325     flex: 0 1 auto;
2326
2327     @media screen and (max-height: 810px) {
2328       .trends__item:nth-child(3) {
2329         display: none;
2330       }
2331     }
2332
2333     @media screen and (max-height: 720px) {
2334       .trends__item:nth-child(2) {
2335         display: none;
2336       }
2337     }
2338
2339     @media screen and (max-height: 670px) {
2340       display: none;
2341     }
2342   }
2343
2344   &__scrollable {
2345     max-height: 100%;
2346     overflow-y: auto;
2347   }
2348 }
2349
2350 .keyboard-shortcuts {
2351   padding: 8px 0 0;
2352   overflow: hidden;
2353
2354   thead {
2355     position: absolute;
2356     left: -9999px;
2357   }
2358
2359   td {
2360     padding: 0 10px 8px;
2361   }
2362
2363   kbd {
2364     display: inline-block;
2365     padding: 3px 5px;
2366     background-color: lighten($ui-base-color, 8%);
2367     border: 1px solid darken($ui-base-color, 4%);
2368   }
2369 }
2370
2371 .setting-text {
2372   color: $darker-text-color;
2373   background: transparent;
2374   border: none;
2375   border-bottom: 2px solid $ui-primary-color;
2376   box-sizing: border-box;
2377   display: block;
2378   font-family: inherit;
2379   margin-bottom: 10px;
2380   padding: 7px 0;
2381   width: 100%;
2382
2383   &:focus,
2384   &:active {
2385     color: $primary-text-color;
2386     border-bottom-color: $highlight-text-color;
2387   }
2388
2389   @media screen and (max-width: 600px) {
2390     font-size: 16px;
2391   }
2392 }
2393
2394 .no-reduce-motion button.icon-button i.fa-retweet {
2395   background-position: 0 0;
2396   height: 19px;
2397   transition: background-position 0.9s steps(10);
2398   transition-duration: 0s;
2399   vertical-align: middle;
2400   width: 22px;
2401
2402   &::before {
2403     display: none !important;
2404   }
2405
2406 }
2407
2408 .no-reduce-motion button.icon-button.active i.fa-retweet {
2409   transition-duration: 0.9s;
2410   background-position: 0 100%;
2411 }
2412
2413 .reduce-motion button.icon-button i.fa-retweet {
2414   color: $action-button-color;
2415   transition: color 100ms ease-in;
2416 }
2417
2418 .reduce-motion button.icon-button.active i.fa-retweet {
2419   color: $highlight-text-color;
2420 }
2421
2422 .status-card {
2423   display: flex;
2424   font-size: 14px;
2425   border: 1px solid lighten($ui-base-color, 8%);
2426   border-radius: 4px;
2427   color: $dark-text-color;
2428   margin-top: 14px;
2429   text-decoration: none;
2430   overflow: hidden;
2431
2432   &__actions {
2433     bottom: 0;
2434     left: 0;
2435     position: absolute;
2436     right: 0;
2437     top: 0;
2438     display: flex;
2439     justify-content: center;
2440     align-items: center;
2441
2442     & > div {
2443       background: rgba($base-shadow-color, 0.6);
2444       border-radius: 4px;
2445       padding: 12px 9px;
2446       flex: 0 0 auto;
2447       display: flex;
2448       justify-content: center;
2449       align-items: center;
2450     }
2451
2452     button,
2453     a {
2454       display: inline;
2455       color: $primary-text-color;
2456       background: transparent;
2457       border: 0;
2458       padding: 0 5px;
2459       text-decoration: none;
2460       opacity: 0.6;
2461       font-size: 18px;
2462       line-height: 18px;
2463
2464       &:hover,
2465       &:active,
2466       &:focus {
2467         opacity: 1;
2468       }
2469     }
2470
2471     a {
2472       font-size: 19px;
2473       position: relative;
2474       bottom: -1px;
2475     }
2476   }
2477 }
2478
2479 a.status-card {
2480   cursor: pointer;
2481
2482   &:hover {
2483     background: lighten($ui-base-color, 8%);
2484   }
2485 }
2486
2487 .status-card-photo {
2488   cursor: zoom-in;
2489   display: block;
2490   text-decoration: none;
2491   width: 100%;
2492   height: auto;
2493   margin: 0;
2494 }
2495
2496 .status-card-video {
2497   iframe {
2498     width: 100%;
2499     height: 100%;
2500   }
2501 }
2502
2503 .status-card__title {
2504   display: block;
2505   font-weight: 500;
2506   margin-bottom: 5px;
2507   color: $darker-text-color;
2508   overflow: hidden;
2509   text-overflow: ellipsis;
2510   white-space: nowrap;
2511   text-decoration: none;
2512 }
2513
2514 .status-card__content {
2515   flex: 1 1 auto;
2516   overflow: hidden;
2517   padding: 14px 14px 14px 8px;
2518 }
2519
2520 .status-card__description {
2521   color: $darker-text-color;
2522 }
2523
2524 .status-card__host {
2525   display: block;
2526   margin-top: 5px;
2527   font-size: 13px;
2528 }
2529
2530 .status-card__image {
2531   flex: 0 0 100px;
2532   background: lighten($ui-base-color, 8%);
2533   position: relative;
2534 }
2535
2536 .status-card.horizontal {
2537   display: block;
2538
2539   .status-card__image {
2540     width: 100%;
2541   }
2542
2543   .status-card__image-image {
2544     border-radius: 4px 4px 0 0;
2545   }
2546
2547   .status-card__title {
2548     white-space: inherit;
2549   }
2550 }
2551
2552 .status-card__image-image {
2553   border-radius: 4px 0 0 4px;
2554   display: block;
2555   margin: 0;
2556   width: 100%;
2557   height: 100%;
2558   object-fit: cover;
2559   background-size: cover;
2560   background-position: center center;
2561 }
2562
2563 .load-more {
2564   display: block;
2565   color: $dark-text-color;
2566   background-color: transparent;
2567   border: 0;
2568   font-size: inherit;
2569   text-align: center;
2570   line-height: inherit;
2571   margin: 0;
2572   padding: 15px;
2573   box-sizing: border-box;
2574   width: 100%;
2575   clear: both;
2576   text-decoration: none;
2577
2578   &:hover {
2579     background: lighten($ui-base-color, 2%);
2580   }
2581 }
2582
2583 .load-gap {
2584   border-bottom: 1px solid lighten($ui-base-color, 8%);
2585 }
2586
2587 .regeneration-indicator {
2588   text-align: center;
2589   font-size: 16px;
2590   font-weight: 500;
2591   color: $dark-text-color;
2592   background: $ui-base-color;
2593   cursor: default;
2594   display: flex;
2595   flex: 1 1 auto;
2596   align-items: center;
2597   justify-content: center;
2598   padding: 20px;
2599
2600   & > div {
2601     width: 100%;
2602     background: transparent;
2603     padding-top: 0;
2604   }
2605
2606   &__figure {
2607     background: url('../images/elephant_ui_working.svg') no-repeat center 0;
2608     width: 100%;
2609     height: 160px;
2610     background-size: contain;
2611     position: absolute;
2612     top: 50%;
2613     left: 50%;
2614     transform: translate(-50%, -50%);
2615   }
2616
2617   &.missing-indicator {
2618     padding-top: 20px + 48px;
2619
2620     .regeneration-indicator__figure {
2621       background-image: url('../images/elephant_ui_disappointed.svg');
2622     }
2623   }
2624
2625   &__label {
2626     margin-top: 200px;
2627
2628     strong {
2629       display: block;
2630       margin-bottom: 10px;
2631       color: $dark-text-color;
2632     }
2633
2634     span {
2635       font-size: 15px;
2636       font-weight: 400;
2637     }
2638   }
2639 }
2640
2641 .column-header__wrapper {
2642   position: relative;
2643   flex: 0 0 auto;
2644
2645   &.active {
2646     &::before {
2647       display: block;
2648       content: "";
2649       position: absolute;
2650       top: 35px;
2651       left: 0;
2652       right: 0;
2653       margin: 0 auto;
2654       width: 60%;
2655       pointer-events: none;
2656       height: 28px;
2657       z-index: 1;
2658       background: radial-gradient(ellipse, rgba($ui-highlight-color, 0.23) 0%, rgba($ui-highlight-color, 0) 60%);
2659     }
2660   }
2661 }
2662
2663 .column-header {
2664   display: flex;
2665   font-size: 16px;
2666   background: lighten($ui-base-color, 4%);
2667   flex: 0 0 auto;
2668   cursor: pointer;
2669   position: relative;
2670   z-index: 2;
2671   outline: 0;
2672   overflow: hidden;
2673
2674   & > button {
2675     margin: 0;
2676     border: none;
2677     padding: 15px 0 15px 15px;
2678     color: inherit;
2679     background: transparent;
2680     font: inherit;
2681     text-align: left;
2682     text-overflow: ellipsis;
2683     overflow: hidden;
2684     white-space: nowrap;
2685     flex: 1;
2686   }
2687
2688   & > .column-header__back-button {
2689     color: $highlight-text-color;
2690   }
2691
2692   &.active {
2693     box-shadow: 0 1px 0 rgba($highlight-text-color, 0.3);
2694
2695     .column-header__icon {
2696       color: $highlight-text-color;
2697       text-shadow: 0 0 10px rgba($highlight-text-color, 0.4);
2698     }
2699   }
2700
2701   &:focus,
2702   &:active {
2703     outline: 0;
2704   }
2705 }
2706
2707 .column-header__buttons {
2708   height: 48px;
2709   display: flex;
2710 }
2711
2712 .column-header__links .text-btn {
2713   margin-right: 10px;
2714 }
2715
2716 .column-header__button {
2717   background: lighten($ui-base-color, 4%);
2718   border: 0;
2719   color: $darker-text-color;
2720   cursor: pointer;
2721   font-size: 16px;
2722   padding: 0 15px;
2723
2724   &:hover {
2725     color: lighten($darker-text-color, 7%);
2726   }
2727
2728   &.active {
2729     color: $primary-text-color;
2730     background: lighten($ui-base-color, 8%);
2731
2732     &:hover {
2733       color: $primary-text-color;
2734       background: lighten($ui-base-color, 8%);
2735     }
2736   }
2737 }
2738
2739 .column-header__collapsible {
2740   max-height: 70vh;
2741   overflow: hidden;
2742   overflow-y: auto;
2743   color: $darker-text-color;
2744   transition: max-height 150ms ease-in-out, opacity 300ms linear;
2745   opacity: 1;
2746
2747   &.collapsed {
2748     max-height: 0;
2749     opacity: 0.5;
2750   }
2751
2752   &.animating {
2753     overflow-y: hidden;
2754   }
2755
2756   hr {
2757     height: 0;
2758     background: transparent;
2759     border: 0;
2760     border-top: 1px solid lighten($ui-base-color, 12%);
2761     margin: 10px 0;
2762   }
2763 }
2764
2765 .column-header__collapsible-inner {
2766   background: lighten($ui-base-color, 8%);
2767   padding: 15px;
2768 }
2769
2770 .column-header__setting-btn {
2771   &:hover {
2772     color: $darker-text-color;
2773     text-decoration: underline;
2774   }
2775 }
2776
2777 .column-header__setting-arrows {
2778   float: right;
2779
2780   .column-header__setting-btn {
2781     padding: 0 10px;
2782
2783     &:last-child {
2784       padding-right: 0;
2785     }
2786   }
2787 }
2788
2789 .text-btn {
2790   display: inline-block;
2791   padding: 0;
2792   font-family: inherit;
2793   font-size: inherit;
2794   color: inherit;
2795   border: 0;
2796   background: transparent;
2797   cursor: pointer;
2798 }
2799
2800 .column-header__icon {
2801   display: inline-block;
2802   margin-right: 5px;
2803 }
2804
2805 .loading-indicator {
2806   color: $dark-text-color;
2807   font-size: 12px;
2808   font-weight: 400;
2809   text-transform: uppercase;
2810   overflow: visible;
2811   position: absolute;
2812   top: 50%;
2813   left: 50%;
2814   transform: translate(-50%, -50%);
2815
2816   span {
2817     display: block;
2818     float: left;
2819     margin-left: 50%;
2820     transform: translateX(-50%);
2821     margin: 82px 0 0 50%;
2822     white-space: nowrap;
2823     animation: loader-label 1.15s infinite cubic-bezier(0.215, 0.610, 0.355, 1.000);
2824   }
2825 }
2826
2827 .loading-indicator__figure {
2828   position: absolute;
2829   top: 50%;
2830   left: 50%;
2831   transform: translate(-50%, -50%);
2832   width: 0;
2833   height: 0;
2834   box-sizing: border-box;
2835   border: 0 solid lighten($ui-base-color, 26%);
2836   border-radius: 50%;
2837   animation: loader-figure 1.15s infinite cubic-bezier(0.215, 0.610, 0.355, 1.000);
2838 }
2839
2840 @keyframes loader-figure {
2841   0% {
2842     width: 0;
2843     height: 0;
2844     background-color: lighten($ui-base-color, 26%);
2845   }
2846
2847   29% {
2848     background-color: lighten($ui-base-color, 26%);
2849   }
2850
2851   30% {
2852     width: 42px;
2853     height: 42px;
2854     background-color: transparent;
2855     border-width: 21px;
2856     opacity: 1;
2857   }
2858
2859   100% {
2860     width: 42px;
2861     height: 42px;
2862     border-width: 0;
2863     opacity: 0;
2864     background-color: transparent;
2865   }
2866 }
2867
2868 @keyframes loader-label {
2869   0% { opacity: 0.25; }
2870   30% { opacity: 1; }
2871   100% { opacity: 0.25; }
2872 }
2873
2874 .video-error-cover {
2875   align-items: center;
2876   background: $base-overlay-background;
2877   color: $primary-text-color;
2878   cursor: pointer;
2879   display: flex;
2880   flex-direction: column;
2881   height: 100%;
2882   justify-content: center;
2883   margin-top: 8px;
2884   position: relative;
2885   text-align: center;
2886   z-index: 100;
2887 }
2888
2889 .media-spoiler {
2890   background: $base-overlay-background;
2891   color: $darker-text-color;
2892   border: 0;
2893   padding: 0;
2894   width: 100%;
2895   height: 100%;
2896   border-radius: 4px;
2897   appearance: none;
2898
2899   &:hover,
2900   &:active,
2901   &:focus {
2902     padding: 0;
2903     color: lighten($darker-text-color, 8%);
2904   }
2905 }
2906
2907 .media-spoiler__warning {
2908   display: block;
2909   font-size: 14px;
2910 }
2911
2912 .media-spoiler__trigger {
2913   display: block;
2914   font-size: 11px;
2915   font-weight: 700;
2916 }
2917
2918 .spoiler-button {
2919   display: none;
2920   left: 4px;
2921   position: absolute;
2922   text-shadow: 0 1px 1px $base-shadow-color, 1px 0 1px $base-shadow-color;
2923   top: 4px;
2924   z-index: 100;
2925
2926   &.spoiler-button--visible {
2927     display: block;
2928   }
2929 }
2930
2931 .modal-container--preloader {
2932   background: lighten($ui-base-color, 8%);
2933 }
2934
2935 .account--panel {
2936   background: lighten($ui-base-color, 4%);
2937   border-top: 1px solid lighten($ui-base-color, 8%);
2938   border-bottom: 1px solid lighten($ui-base-color, 8%);
2939   display: flex;
2940   flex-direction: row;
2941   padding: 10px 0;
2942 }
2943
2944 .account--panel__button,
2945 .detailed-status__button {
2946   flex: 1 1 auto;
2947   text-align: center;
2948 }
2949
2950 .column-settings__outer {
2951   background: lighten($ui-base-color, 8%);
2952   padding: 15px;
2953 }
2954
2955 .column-settings__section {
2956   color: $darker-text-color;
2957   cursor: default;
2958   display: block;
2959   font-weight: 500;
2960   margin-bottom: 10px;
2961 }
2962
2963 .column-settings__row {
2964   .text-btn {
2965     margin-bottom: 15px;
2966   }
2967 }
2968
2969 .account--follows-info {
2970   color: $primary-text-color;
2971   position: absolute;
2972   top: 10px;
2973   left: 10px;
2974   opacity: 0.7;
2975   display: inline-block;
2976   vertical-align: top;
2977   background-color: rgba($base-overlay-background, 0.4);
2978   text-transform: uppercase;
2979   font-size: 11px;
2980   font-weight: 500;
2981   padding: 4px;
2982   border-radius: 4px;
2983 }
2984
2985 .account--muting-info {
2986   color: $primary-text-color;
2987   position: absolute;
2988   top: 40px;
2989   left: 10px;
2990   opacity: 0.7;
2991   display: inline-block;
2992   vertical-align: top;
2993   background-color: rgba($base-overlay-background, 0.4);
2994   text-transform: uppercase;
2995   font-size: 11px;
2996   font-weight: 500;
2997   padding: 4px;
2998   border-radius: 4px;
2999 }
3000
3001 .account--action-button {
3002   position: absolute;
3003   top: 10px;
3004   right: 20px;
3005 }
3006
3007 .setting-toggle {
3008   display: block;
3009   line-height: 24px;
3010 }
3011
3012 .setting-toggle__label,
3013 .setting-meta__label {
3014   color: $darker-text-color;
3015   display: inline-block;
3016   margin-bottom: 14px;
3017   margin-left: 8px;
3018   vertical-align: middle;
3019 }
3020
3021 .setting-meta__label {
3022   float: right;
3023 }
3024
3025 .empty-column-indicator,
3026 .error-column {
3027   color: $dark-text-color;
3028   background: $ui-base-color;
3029   text-align: center;
3030   padding: 20px;
3031   font-size: 15px;
3032   font-weight: 400;
3033   cursor: default;
3034   display: flex;
3035   flex: 1 1 auto;
3036   align-items: center;
3037   justify-content: center;
3038
3039   @supports(display: grid) { // hack to fix Chrome <57
3040     contain: strict;
3041   }
3042
3043   a {
3044     color: $highlight-text-color;
3045     text-decoration: none;
3046
3047     &:hover {
3048       text-decoration: underline;
3049     }
3050   }
3051 }
3052
3053 .error-column {
3054   flex-direction: column;
3055 }
3056
3057 @keyframes heartbeat {
3058   from {
3059     transform: scale(1);
3060     animation-timing-function: ease-out;
3061   }
3062
3063   10% {
3064     transform: scale(0.91);
3065     animation-timing-function: ease-in;
3066   }
3067
3068   17% {
3069     transform: scale(0.98);
3070     animation-timing-function: ease-out;
3071   }
3072
3073   33% {
3074     transform: scale(0.87);
3075     animation-timing-function: ease-in;
3076   }
3077
3078   45% {
3079     transform: scale(1);
3080     animation-timing-function: ease-out;
3081   }
3082 }
3083
3084 .no-reduce-motion .pulse-loading {
3085   transform-origin: center center;
3086   animation: heartbeat 1.5s ease-in-out infinite both;
3087 }
3088
3089 @keyframes shake-bottom {
3090   0%,
3091   100% {
3092     transform: rotate(0deg);
3093     transform-origin: 50% 100%;
3094   }
3095
3096   10% {
3097     transform: rotate(2deg);
3098   }
3099
3100   20%,
3101   40%,
3102   60% {
3103     transform: rotate(-4deg);
3104   }
3105
3106   30%,
3107   50%,
3108   70% {
3109     transform: rotate(4deg);
3110   }
3111
3112   80% {
3113     transform: rotate(-2deg);
3114   }
3115
3116   90% {
3117     transform: rotate(2deg);
3118   }
3119 }
3120
3121 .no-reduce-motion .shake-bottom {
3122   transform-origin: 50% 100%;
3123   animation: shake-bottom 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) 2s 2 both;
3124 }
3125
3126 .emoji-picker-dropdown__menu {
3127   background: $simple-background-color;
3128   position: absolute;
3129   box-shadow: 4px 4px 6px rgba($base-shadow-color, 0.4);
3130   border-radius: 4px;
3131   margin-top: 5px;
3132
3133   .emoji-mart-scroll {
3134     transition: opacity 200ms ease;
3135   }
3136
3137   &.selecting .emoji-mart-scroll {
3138     opacity: 0.5;
3139   }
3140 }
3141
3142 .emoji-picker-dropdown__modifiers {
3143   position: absolute;
3144   top: 60px;
3145   right: 11px;
3146   cursor: pointer;
3147 }
3148
3149 .emoji-picker-dropdown__modifiers__menu {
3150   position: absolute;
3151   z-index: 4;
3152   top: -4px;
3153   left: -8px;
3154   background: $simple-background-color;
3155   border-radius: 4px;
3156   box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2);
3157   overflow: hidden;
3158
3159   button {
3160     display: block;
3161     cursor: pointer;
3162     border: 0;
3163     padding: 4px 8px;
3164     background: transparent;
3165
3166     &:hover,
3167     &:focus,
3168     &:active {
3169       background: rgba($ui-secondary-color, 0.4);
3170     }
3171   }
3172
3173   .emoji-mart-emoji {
3174     height: 22px;
3175   }
3176 }
3177
3178 .emoji-mart-emoji {
3179   span {
3180     background-repeat: no-repeat;
3181   }
3182 }
3183
3184 .upload-area {
3185   align-items: center;
3186   background: rgba($base-overlay-background, 0.8);
3187   display: flex;
3188   height: 100%;
3189   justify-content: center;
3190   left: 0;
3191   opacity: 0;
3192   position: absolute;
3193   top: 0;
3194   visibility: hidden;
3195   width: 100%;
3196   z-index: 2000;
3197
3198   * {
3199     pointer-events: none;
3200   }
3201 }
3202
3203 .upload-area__drop {
3204   width: 320px;
3205   height: 160px;
3206   display: flex;
3207   box-sizing: border-box;
3208   position: relative;
3209   padding: 8px;
3210 }
3211
3212 .upload-area__background {
3213   position: absolute;
3214   top: 0;
3215   right: 0;
3216   bottom: 0;
3217   left: 0;
3218   z-index: -1;
3219   border-radius: 4px;
3220   background: $ui-base-color;
3221   box-shadow: 0 0 5px rgba($base-shadow-color, 0.2);
3222 }
3223
3224 .upload-area__content {
3225   flex: 1;
3226   display: flex;
3227   align-items: center;
3228   justify-content: center;
3229   color: $secondary-text-color;
3230   font-size: 18px;
3231   font-weight: 500;
3232   border: 2px dashed $ui-base-lighter-color;
3233   border-radius: 4px;
3234 }
3235
3236 .upload-progress {
3237   padding: 10px;
3238   color: $lighter-text-color;
3239   overflow: hidden;
3240   display: flex;
3241
3242   .fa {
3243     font-size: 34px;
3244     margin-right: 10px;
3245   }
3246
3247   span {
3248     font-size: 12px;
3249     text-transform: uppercase;
3250     font-weight: 500;
3251     display: block;
3252   }
3253 }
3254
3255 .upload-progess__message {
3256   flex: 1 1 auto;
3257 }
3258
3259 .upload-progress__backdrop {
3260   width: 100%;
3261   height: 6px;
3262   border-radius: 6px;
3263   background: $ui-base-lighter-color;
3264   position: relative;
3265   margin-top: 5px;
3266 }
3267
3268 .upload-progress__tracker {
3269   position: absolute;
3270   left: 0;
3271   top: 0;
3272   height: 6px;
3273   background: $ui-highlight-color;
3274   border-radius: 6px;
3275 }
3276
3277 .emoji-button {
3278   display: block;
3279   font-size: 24px;
3280   line-height: 24px;
3281   margin-left: 2px;
3282   width: 24px;
3283   outline: 0;
3284   cursor: pointer;
3285
3286   &:active,
3287   &:focus {
3288     outline: 0 !important;
3289   }
3290
3291   img {
3292     filter: grayscale(100%);
3293     opacity: 0.8;
3294     display: block;
3295     margin: 0;
3296     width: 22px;
3297     height: 22px;
3298     margin-top: 2px;
3299   }
3300
3301   &:hover,
3302   &:active,
3303   &:focus {
3304     img {
3305       opacity: 1;
3306       filter: none;
3307     }
3308   }
3309 }
3310
3311 .dropdown--active .emoji-button img {
3312   opacity: 1;
3313   filter: none;
3314 }
3315
3316 .privacy-dropdown__dropdown {
3317   position: absolute;
3318   background: $simple-background-color;
3319   box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
3320   border-radius: 4px;
3321   margin-left: 40px;
3322   overflow: hidden;
3323
3324   &.top {
3325     transform-origin: 50% 100%;
3326   }
3327
3328   &.bottom {
3329     transform-origin: 50% 0;
3330   }
3331 }
3332
3333 .privacy-dropdown__option {
3334   color: $inverted-text-color;
3335   padding: 10px;
3336   cursor: pointer;
3337   display: flex;
3338
3339   &:hover,
3340   &.active {
3341     background: $ui-highlight-color;
3342     color: $primary-text-color;
3343     outline: 0;
3344
3345     .privacy-dropdown__option__content {
3346       color: $primary-text-color;
3347
3348       strong {
3349         color: $primary-text-color;
3350       }
3351     }
3352   }
3353
3354   &.active:hover {
3355     background: lighten($ui-highlight-color, 4%);
3356   }
3357 }
3358
3359 .privacy-dropdown__option__icon {
3360   display: flex;
3361   align-items: center;
3362   justify-content: center;
3363   margin-right: 10px;
3364 }
3365
3366 .privacy-dropdown__option__content {
3367   flex: 1 1 auto;
3368   color: $lighter-text-color;
3369
3370   strong {
3371     font-weight: 500;
3372     display: block;
3373     color: $inverted-text-color;
3374
3375     @each $lang in $cjk-langs {
3376       &:lang(#{$lang}) {
3377         font-weight: 700;
3378       }
3379     }
3380   }
3381 }
3382
3383 .privacy-dropdown.active {
3384   .privacy-dropdown__value {
3385     background: $simple-background-color;
3386     border-radius: 4px 4px 0 0;
3387     box-shadow: 0 -4px 4px rgba($base-shadow-color, 0.1);
3388
3389     .icon-button {
3390       transition: none;
3391     }
3392
3393     &.active {
3394       background: $ui-highlight-color;
3395
3396       .icon-button {
3397         color: $primary-text-color;
3398       }
3399     }
3400   }
3401
3402   &.top .privacy-dropdown__value {
3403     border-radius: 0 0 4px 4px;
3404   }
3405
3406   .privacy-dropdown__dropdown {
3407     display: block;
3408     box-shadow: 2px 4px 6px rgba($base-shadow-color, 0.1);
3409   }
3410 }
3411
3412 .search {
3413   position: relative;
3414 }
3415
3416 .search__input {
3417   outline: 0;
3418   box-sizing: border-box;
3419   display: block;
3420   width: 100%;
3421   border: none;
3422   padding: 10px;
3423   padding-right: 30px;
3424   font-family: inherit;
3425   background: $ui-base-color;
3426   color: $darker-text-color;
3427   font-size: 14px;
3428   margin: 0;
3429
3430   &::-moz-focus-inner {
3431     border: 0;
3432   }
3433
3434   &::-moz-focus-inner,
3435   &:focus,
3436   &:active {
3437     outline: 0 !important;
3438   }
3439
3440   &:focus {
3441     background: lighten($ui-base-color, 4%);
3442   }
3443
3444   @media screen and (max-width: 600px) {
3445     font-size: 16px;
3446   }
3447 }
3448
3449 .search__icon {
3450   &::-moz-focus-inner {
3451     border: 0;
3452   }
3453
3454   &::-moz-focus-inner,
3455   &:focus {
3456     outline: 0 !important;
3457   }
3458
3459   .fa {
3460     position: absolute;
3461     top: 10px;
3462     right: 10px;
3463     z-index: 2;
3464     display: inline-block;
3465     opacity: 0;
3466     transition: all 100ms linear;
3467     font-size: 18px;
3468     width: 18px;
3469     height: 18px;
3470     color: $secondary-text-color;
3471     cursor: default;
3472     pointer-events: none;
3473
3474     &.active {
3475       pointer-events: auto;
3476       opacity: 0.3;
3477     }
3478   }
3479
3480   .fa-search {
3481     transform: rotate(90deg);
3482
3483     &.active {
3484       pointer-events: none;
3485       transform: rotate(0deg);
3486     }
3487   }
3488
3489   .fa-times-circle {
3490     top: 11px;
3491     transform: rotate(0deg);
3492     color: $action-button-color;
3493     cursor: pointer;
3494
3495     &.active {
3496       transform: rotate(90deg);
3497     }
3498
3499     &:hover {
3500       color: lighten($action-button-color, 7%);
3501     }
3502   }
3503 }
3504
3505 .search-results__header {
3506   color: $dark-text-color;
3507   background: lighten($ui-base-color, 2%);
3508   padding: 15px;
3509   font-weight: 500;
3510   font-size: 16px;
3511   cursor: default;
3512
3513   .fa {
3514     display: inline-block;
3515     margin-right: 5px;
3516   }
3517 }
3518
3519 .search-results__section {
3520   margin-bottom: 5px;
3521
3522   h5 {
3523     background: darken($ui-base-color, 4%);
3524     border-bottom: 1px solid lighten($ui-base-color, 8%);
3525     cursor: default;
3526     display: flex;
3527     padding: 15px;
3528     font-weight: 500;
3529     font-size: 16px;
3530     color: $dark-text-color;
3531
3532     .fa {
3533       display: inline-block;
3534       margin-right: 5px;
3535     }
3536   }
3537
3538   .account:last-child,
3539   & > div:last-child .status {
3540     border-bottom: 0;
3541   }
3542 }
3543
3544 .search-results__hashtag {
3545   display: block;
3546   padding: 10px;
3547   color: $secondary-text-color;
3548   text-decoration: none;
3549
3550   &:hover,
3551   &:active,
3552   &:focus {
3553     color: lighten($secondary-text-color, 4%);
3554     text-decoration: underline;
3555   }
3556 }
3557
3558 .modal-root {
3559   position: relative;
3560   transition: opacity 0.3s linear;
3561   will-change: opacity;
3562   z-index: 9999;
3563 }
3564
3565 .modal-root__overlay {
3566   position: fixed;
3567   top: 0;
3568   left: 0;
3569   right: 0;
3570   bottom: 0;
3571   background: rgba($base-overlay-background, 0.7);
3572 }
3573
3574 .modal-root__container {
3575   position: fixed;
3576   top: 0;
3577   left: 0;
3578   width: 100%;
3579   height: 100%;
3580   display: flex;
3581   flex-direction: column;
3582   align-items: center;
3583   justify-content: center;
3584   align-content: space-around;
3585   z-index: 9999;
3586   pointer-events: none;
3587   user-select: none;
3588 }
3589
3590 .modal-root__modal {
3591   pointer-events: auto;
3592   display: flex;
3593   z-index: 9999;
3594 }
3595
3596 .video-modal {
3597   max-width: 100vw;
3598   max-height: 100vh;
3599   position: relative;
3600 }
3601
3602 .media-modal {
3603   width: 100%;
3604   height: 100%;
3605   position: relative;
3606
3607   .extended-video-player {
3608     width: 100%;
3609     height: 100%;
3610     display: flex;
3611     align-items: center;
3612     justify-content: center;
3613
3614     video {
3615       max-width: $media-modal-media-max-width;
3616       max-height: $media-modal-media-max-height;
3617     }
3618   }
3619 }
3620
3621 .media-modal__closer {
3622   position: absolute;
3623   top: 0;
3624   left: 0;
3625   right: 0;
3626   bottom: 0;
3627 }
3628
3629 .media-modal__navigation {
3630   position: absolute;
3631   top: 0;
3632   left: 0;
3633   right: 0;
3634   bottom: 0;
3635   pointer-events: none;
3636   transition: opacity 0.3s linear;
3637   will-change: opacity;
3638
3639   * {
3640     pointer-events: auto;
3641   }
3642
3643   &.media-modal__navigation--hidden {
3644     opacity: 0;
3645
3646     * {
3647       pointer-events: none;
3648     }
3649   }
3650 }
3651
3652 .media-modal__nav {
3653   background: rgba($base-overlay-background, 0.5);
3654   box-sizing: border-box;
3655   border: 0;
3656   color: $primary-text-color;
3657   cursor: pointer;
3658   display: flex;
3659   align-items: center;
3660   font-size: 24px;
3661   height: 20vmax;
3662   margin: auto 0;
3663   padding: 30px 15px;
3664   position: absolute;
3665   top: 0;
3666   bottom: 0;
3667 }
3668
3669 .media-modal__nav--left {
3670   left: 0;
3671 }
3672
3673 .media-modal__nav--right {
3674   right: 0;
3675 }
3676
3677 .media-modal__pagination {
3678   width: 100%;
3679   text-align: center;
3680   position: absolute;
3681   left: 0;
3682   bottom: 20px;
3683   pointer-events: none;
3684 }
3685
3686 .media-modal__page-dot {
3687   display: inline-block;
3688 }
3689
3690 .media-modal__button {
3691   background-color: $primary-text-color;
3692   height: 12px;
3693   width: 12px;
3694   border-radius: 6px;
3695   margin: 10px;
3696   padding: 0;
3697   border: 0;
3698   font-size: 0;
3699 }
3700
3701 .media-modal__button--active {
3702   background-color: $highlight-text-color;
3703 }
3704
3705 .media-modal__close {
3706   position: absolute;
3707   right: 8px;
3708   top: 8px;
3709   z-index: 100;
3710 }
3711
3712 .onboarding-modal,
3713 .error-modal,
3714 .embed-modal {
3715   background: $ui-secondary-color;
3716   color: $inverted-text-color;
3717   border-radius: 8px;
3718   overflow: hidden;
3719   display: flex;
3720   flex-direction: column;
3721 }
3722
3723 .onboarding-modal__pager {
3724   height: 80vh;
3725   width: 80vw;
3726   max-width: 520px;
3727   max-height: 470px;
3728
3729   .react-swipeable-view-container > div {
3730     width: 100%;
3731     height: 100%;
3732     box-sizing: border-box;
3733     display: none;
3734     flex-direction: column;
3735     align-items: center;
3736     justify-content: center;
3737     display: flex;
3738     user-select: text;
3739   }
3740 }
3741
3742 .error-modal__body {
3743   height: 80vh;
3744   width: 80vw;
3745   max-width: 520px;
3746   max-height: 420px;
3747   position: relative;
3748
3749   & > div {
3750     position: absolute;
3751     top: 0;
3752     left: 0;
3753     width: 100%;
3754     height: 100%;
3755     box-sizing: border-box;
3756     padding: 25px;
3757     display: none;
3758     flex-direction: column;
3759     align-items: center;
3760     justify-content: center;
3761     display: flex;
3762     opacity: 0;
3763     user-select: text;
3764   }
3765 }
3766
3767 .error-modal__body {
3768   display: flex;
3769   flex-direction: column;
3770   justify-content: center;
3771   align-items: center;
3772   text-align: center;
3773 }
3774
3775 @media screen and (max-width: 550px) {
3776   .onboarding-modal {
3777     width: 100%;
3778     height: 100%;
3779     border-radius: 0;
3780   }
3781
3782   .onboarding-modal__pager {
3783     width: 100%;
3784     height: auto;
3785     max-width: none;
3786     max-height: none;
3787     flex: 1 1 auto;
3788   }
3789 }
3790
3791 .onboarding-modal__paginator,
3792 .error-modal__footer {
3793   flex: 0 0 auto;
3794   background: darken($ui-secondary-color, 8%);
3795   display: flex;
3796   padding: 25px;
3797
3798   & > div {
3799     min-width: 33px;
3800   }
3801
3802   .onboarding-modal__nav,
3803   .error-modal__nav {
3804     color: $lighter-text-color;
3805     border: 0;
3806     font-size: 14px;
3807     font-weight: 500;
3808     padding: 10px 25px;
3809     line-height: inherit;
3810     height: auto;
3811     margin: -10px;
3812     border-radius: 4px;
3813     background-color: transparent;
3814
3815     &:hover,
3816     &:focus,
3817     &:active {
3818       color: darken($lighter-text-color, 4%);
3819       background-color: darken($ui-secondary-color, 16%);
3820     }
3821
3822     &.onboarding-modal__done,
3823     &.onboarding-modal__next {
3824       color: $inverted-text-color;
3825
3826       &:hover,
3827       &:focus,
3828       &:active {
3829         color: lighten($inverted-text-color, 4%);
3830       }
3831     }
3832   }
3833 }
3834
3835 .error-modal__footer {
3836   justify-content: center;
3837 }
3838
3839 .onboarding-modal__dots {
3840   flex: 1 1 auto;
3841   display: flex;
3842   align-items: center;
3843   justify-content: center;
3844 }
3845
3846 .onboarding-modal__dot {
3847   width: 14px;
3848   height: 14px;
3849   border-radius: 14px;
3850   background: darken($ui-secondary-color, 16%);
3851   margin: 0 3px;
3852   cursor: pointer;
3853
3854   &:hover {
3855     background: darken($ui-secondary-color, 18%);
3856   }
3857
3858   &.active {
3859     cursor: default;
3860     background: darken($ui-secondary-color, 24%);
3861   }
3862 }
3863
3864 .onboarding-modal__page__wrapper {
3865   pointer-events: none;
3866   padding: 25px;
3867   padding-bottom: 0;
3868
3869   &.onboarding-modal__page__wrapper--active {
3870     pointer-events: auto;
3871   }
3872 }
3873
3874 .onboarding-modal__page {
3875   cursor: default;
3876   line-height: 21px;
3877
3878   h1 {
3879     font-size: 18px;
3880     font-weight: 500;
3881     color: $inverted-text-color;
3882     margin-bottom: 20px;
3883   }
3884
3885   a {
3886     color: $highlight-text-color;
3887
3888     &:hover,
3889     &:focus,
3890     &:active {
3891       color: lighten($highlight-text-color, 4%);
3892     }
3893   }
3894
3895   .navigation-bar a {
3896     color: inherit;
3897   }
3898
3899   p {
3900     font-size: 16px;
3901     color: $lighter-text-color;
3902     margin-top: 10px;
3903     margin-bottom: 10px;
3904
3905     &:last-child {
3906       margin-bottom: 0;
3907     }
3908
3909     strong {
3910       font-weight: 500;
3911       background: $ui-base-color;
3912       color: $secondary-text-color;
3913       border-radius: 4px;
3914       font-size: 14px;
3915       padding: 3px 6px;
3916
3917       @each $lang in $cjk-langs {
3918         &:lang(#{$lang}) {
3919           font-weight: 700;
3920         }
3921       }
3922     }
3923   }
3924 }
3925
3926 .onboarding-modal__page__wrapper-0 {
3927   background: url('../images/elephant_ui_greeting.svg') no-repeat left bottom / auto 250px;
3928   height: 100%;
3929   padding: 0;
3930 }
3931
3932 .onboarding-modal__page-one {
3933   &__lead {
3934     padding: 65px;
3935     padding-top: 45px;
3936     padding-bottom: 0;
3937     margin-bottom: 10px;
3938
3939     h1 {
3940       font-size: 26px;
3941       line-height: 36px;
3942       margin-bottom: 8px;
3943     }
3944
3945     p {
3946       margin-bottom: 0;
3947     }
3948   }
3949
3950   &__extra {
3951     padding-right: 65px;
3952     padding-left: 185px;
3953     text-align: center;
3954   }
3955 }
3956
3957 .display-case {
3958   text-align: center;
3959   font-size: 15px;
3960   margin-bottom: 15px;
3961
3962   &__label {
3963     font-weight: 500;
3964     color: $inverted-text-color;
3965     margin-bottom: 5px;
3966     text-transform: uppercase;
3967     font-size: 12px;
3968   }
3969
3970   &__case {
3971     background: $ui-base-color;
3972     color: $secondary-text-color;
3973     font-weight: 500;
3974     padding: 10px;
3975     border-radius: 4px;
3976   }
3977 }
3978
3979 .onboarding-modal__page-two,
3980 .onboarding-modal__page-three,
3981 .onboarding-modal__page-four,
3982 .onboarding-modal__page-five {
3983   p {
3984     text-align: left;
3985   }
3986
3987   .figure {
3988     background: darken($ui-base-color, 8%);
3989     color: $secondary-text-color;
3990     margin-bottom: 20px;
3991     border-radius: 4px;
3992     padding: 10px;
3993     text-align: center;
3994     font-size: 14px;
3995     box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.3);
3996
3997     .onboarding-modal__image {
3998       border-radius: 4px;
3999       margin-bottom: 10px;
4000     }
4001
4002     &.non-interactive {
4003       pointer-events: none;
4004       text-align: left;
4005     }
4006   }
4007 }
4008
4009 .onboarding-modal__page-four__columns {
4010   .row {
4011     display: flex;
4012     margin-bottom: 20px;
4013
4014     & > div {
4015       flex: 1 1 0;
4016       margin: 0 10px;
4017
4018       &:first-child {
4019         margin-left: 0;
4020       }
4021
4022       &:last-child {
4023         margin-right: 0;
4024       }
4025
4026       p {
4027         text-align: center;
4028       }
4029     }
4030
4031     &:last-child {
4032       margin-bottom: 0;
4033     }
4034   }
4035
4036   .column-header {
4037     color: $primary-text-color;
4038   }
4039 }
4040
4041 @media screen and (max-width: 320px) and (max-height: 600px) {
4042   .onboarding-modal__page p {
4043     font-size: 14px;
4044     line-height: 20px;
4045   }
4046
4047   .onboarding-modal__page-two .figure,
4048   .onboarding-modal__page-three .figure,
4049   .onboarding-modal__page-four .figure,
4050   .onboarding-modal__page-five .figure {
4051     font-size: 12px;
4052     margin-bottom: 10px;
4053   }
4054
4055   .onboarding-modal__page-four__columns .row {
4056     margin-bottom: 10px;
4057   }
4058
4059   .onboarding-modal__page-four__columns .column-header {
4060     padding: 5px;
4061     font-size: 12px;
4062   }
4063 }
4064
4065 .onboard-sliders {
4066   display: inline-block;
4067   max-width: 30px;
4068   max-height: auto;
4069   margin-left: 10px;
4070 }
4071
4072 .boost-modal,
4073 .confirmation-modal,
4074 .report-modal,
4075 .actions-modal,
4076 .mute-modal {
4077   background: lighten($ui-secondary-color, 8%);
4078   color: $inverted-text-color;
4079   border-radius: 8px;
4080   overflow: hidden;
4081   max-width: 90vw;
4082   width: 480px;
4083   position: relative;
4084   flex-direction: column;
4085
4086   .status__display-name {
4087     display: block;
4088     max-width: 100%;
4089     padding-right: 25px;
4090   }
4091
4092   .status__avatar {
4093     height: 28px;
4094     left: 10px;
4095     position: absolute;
4096     top: 10px;
4097     width: 48px;
4098   }
4099
4100   .status__content__spoiler-link {
4101     color: lighten($secondary-text-color, 8%);
4102   }
4103 }
4104
4105 .actions-modal {
4106   .status {
4107     background: $white;
4108     border-bottom-color: $ui-secondary-color;
4109     padding-top: 10px;
4110     padding-bottom: 10px;
4111   }
4112
4113   .dropdown-menu__separator {
4114     border-bottom-color: $ui-secondary-color;
4115   }
4116 }
4117
4118 .boost-modal__container {
4119   overflow-x: scroll;
4120   padding: 10px;
4121
4122   .status {
4123     user-select: text;
4124     border-bottom: 0;
4125   }
4126 }
4127
4128 .boost-modal__action-bar,
4129 .confirmation-modal__action-bar,
4130 .mute-modal__action-bar {
4131   display: flex;
4132   justify-content: space-between;
4133   background: $ui-secondary-color;
4134   padding: 10px;
4135   line-height: 36px;
4136
4137   & > div {
4138     flex: 1 1 auto;
4139     text-align: right;
4140     color: $lighter-text-color;
4141     padding-right: 10px;
4142   }
4143
4144   .button {
4145     flex: 0 0 auto;
4146   }
4147 }
4148
4149 .boost-modal__status-header {
4150   font-size: 15px;
4151 }
4152
4153 .boost-modal__status-time {
4154   float: right;
4155   font-size: 14px;
4156 }
4157
4158 .confirmation-modal {
4159   max-width: 85vw;
4160
4161   @media screen and (min-width: 480px) {
4162     max-width: 380px;
4163   }
4164 }
4165
4166 .mute-modal {
4167   line-height: 24px;
4168 }
4169
4170 .mute-modal .react-toggle {
4171   vertical-align: middle;
4172 }
4173
4174 .report-modal {
4175   width: 90vw;
4176   max-width: 700px;
4177 }
4178
4179 .report-modal__container {
4180   display: flex;
4181   border-top: 1px solid $ui-secondary-color;
4182
4183   @media screen and (max-width: 480px) {
4184     flex-wrap: wrap;
4185     overflow-y: auto;
4186   }
4187 }
4188
4189 .report-modal__statuses,
4190 .report-modal__comment {
4191   box-sizing: border-box;
4192   width: 50%;
4193
4194   @media screen and (max-width: 480px) {
4195     width: 100%;
4196   }
4197 }
4198
4199 .report-modal__statuses {
4200   flex: 1 1 auto;
4201   min-height: 20vh;
4202   max-height: 80vh;
4203   overflow-y: auto;
4204   overflow-x: hidden;
4205
4206   .status__content a {
4207     color: $highlight-text-color;
4208   }
4209
4210   .status__content p {
4211     color: $inverted-text-color;
4212   }
4213
4214   @media screen and (max-width: 480px) {
4215     max-height: 10vh;
4216   }
4217 }
4218
4219 .report-modal__comment {
4220   padding: 20px;
4221   border-right: 1px solid $ui-secondary-color;
4222   max-width: 320px;
4223
4224   p {
4225     font-size: 14px;
4226     line-height: 20px;
4227     margin-bottom: 20px;
4228   }
4229
4230   .setting-text {
4231     display: block;
4232     box-sizing: border-box;
4233     width: 100%;
4234     margin: 0;
4235     color: $inverted-text-color;
4236     background: $white;
4237     padding: 10px;
4238     font-family: inherit;
4239     font-size: 14px;
4240     resize: vertical;
4241     border: 0;
4242     outline: 0;
4243     border-radius: 4px;
4244     border: 1px solid $ui-secondary-color;
4245     margin-bottom: 20px;
4246
4247     &:focus {
4248       border: 1px solid darken($ui-secondary-color, 8%);
4249     }
4250   }
4251
4252   .setting-toggle {
4253     margin-top: 20px;
4254     margin-bottom: 24px;
4255
4256     &__label {
4257       color: $inverted-text-color;
4258       font-size: 14px;
4259     }
4260   }
4261
4262   @media screen and (max-width: 480px) {
4263     padding: 10px;
4264     max-width: 100%;
4265     order: 2;
4266
4267     .setting-toggle {
4268       margin-bottom: 4px;
4269     }
4270   }
4271 }
4272
4273 .actions-modal {
4274   .status {
4275     overflow-y: auto;
4276     max-height: 300px;
4277   }
4278
4279   max-height: 80vh;
4280   max-width: 80vw;
4281
4282   .actions-modal__item-label {
4283     font-weight: 500;
4284   }
4285
4286   ul {
4287     overflow-y: auto;
4288     flex-shrink: 0;
4289
4290     li:empty {
4291       margin: 0;
4292     }
4293
4294     li:not(:empty) {
4295       a {
4296         color: $inverted-text-color;
4297         display: flex;
4298         padding: 12px 16px;
4299         font-size: 15px;
4300         align-items: center;
4301         text-decoration: none;
4302
4303         &,
4304         button {
4305           transition: none;
4306         }
4307
4308         &.active,
4309         &:hover,
4310         &:active,
4311         &:focus {
4312           &,
4313           button {
4314             background: $ui-highlight-color;
4315             color: $primary-text-color;
4316           }
4317         }
4318
4319         button:first-child {
4320           margin-right: 10px;
4321         }
4322       }
4323     }
4324   }
4325 }
4326
4327 .confirmation-modal__action-bar,
4328 .mute-modal__action-bar {
4329   .confirmation-modal__cancel-button,
4330   .mute-modal__cancel-button {
4331     background-color: transparent;
4332     color: $lighter-text-color;
4333     font-size: 14px;
4334     font-weight: 500;
4335
4336     &:hover,
4337     &:focus,
4338     &:active {
4339       color: darken($lighter-text-color, 4%);
4340     }
4341   }
4342 }
4343
4344 .confirmation-modal__container,
4345 .mute-modal__container,
4346 .report-modal__target {
4347   padding: 30px;
4348   font-size: 16px;
4349   text-align: center;
4350
4351   strong {
4352     font-weight: 500;
4353
4354     @each $lang in $cjk-langs {
4355       &:lang(#{$lang}) {
4356         font-weight: 700;
4357       }
4358     }
4359   }
4360 }
4361
4362 .report-modal__target {
4363   padding: 20px;
4364
4365   .media-modal__close {
4366     top: 19px;
4367     right: 15px;
4368   }
4369 }
4370
4371 .loading-bar {
4372   background-color: $highlight-text-color;
4373   height: 3px;
4374   position: absolute;
4375   top: 0;
4376   left: 0;
4377 }
4378
4379 .media-gallery__gifv__label {
4380   display: block;
4381   position: absolute;
4382   color: $primary-text-color;
4383   background: rgba($base-overlay-background, 0.5);
4384   bottom: 6px;
4385   left: 6px;
4386   padding: 2px 6px;
4387   border-radius: 2px;
4388   font-size: 11px;
4389   font-weight: 600;
4390   z-index: 1;
4391   pointer-events: none;
4392   opacity: 0.9;
4393   transition: opacity 0.1s ease;
4394 }
4395
4396 .media-gallery__gifv {
4397   &.autoplay {
4398     .media-gallery__gifv__label {
4399       display: none;
4400     }
4401   }
4402
4403   &:hover {
4404     .media-gallery__gifv__label {
4405       opacity: 1;
4406     }
4407   }
4408 }
4409
4410 .attachment-list {
4411   display: flex;
4412   font-size: 14px;
4413   border: 1px solid lighten($ui-base-color, 8%);
4414   border-radius: 4px;
4415   margin-top: 14px;
4416   overflow: hidden;
4417
4418   &__icon {
4419     flex: 0 0 auto;
4420     color: $dark-text-color;
4421     padding: 8px 18px;
4422     cursor: default;
4423     border-right: 1px solid lighten($ui-base-color, 8%);
4424     display: flex;
4425     flex-direction: column;
4426     align-items: center;
4427     justify-content: center;
4428     font-size: 26px;
4429
4430     .fa {
4431       display: block;
4432     }
4433   }
4434
4435   &__list {
4436     list-style: none;
4437     padding: 4px 0;
4438     padding-left: 8px;
4439     display: flex;
4440     flex-direction: column;
4441     justify-content: center;
4442
4443     li {
4444       display: block;
4445       padding: 4px 0;
4446     }
4447
4448     a {
4449       text-decoration: none;
4450       color: $dark-text-color;
4451       font-weight: 500;
4452
4453       &:hover {
4454         text-decoration: underline;
4455       }
4456     }
4457   }
4458
4459   &.compact {
4460     border: 0;
4461     margin-top: 4px;
4462
4463     .attachment-list__list {
4464       padding: 0;
4465       display: block;
4466     }
4467
4468     .fa {
4469       color: $dark-text-color;
4470     }
4471   }
4472 }
4473
4474 /* Media Gallery */
4475 .media-gallery {
4476   box-sizing: border-box;
4477   margin-top: 8px;
4478   overflow: hidden;
4479   border-radius: 4px;
4480   position: relative;
4481   width: 100%;
4482 }
4483
4484 .media-gallery__item {
4485   border: none;
4486   box-sizing: border-box;
4487   display: block;
4488   float: left;
4489   position: relative;
4490   border-radius: 4px;
4491   overflow: hidden;
4492
4493   &.standalone {
4494     .media-gallery__item-gifv-thumbnail {
4495       transform: none;
4496       top: 0;
4497     }
4498   }
4499 }
4500
4501 .media-gallery__item-thumbnail {
4502   cursor: zoom-in;
4503   display: block;
4504   text-decoration: none;
4505   color: $secondary-text-color;
4506   line-height: 0;
4507
4508   &,
4509   img {
4510     height: 100%;
4511     width: 100%;
4512   }
4513
4514   img {
4515     object-fit: cover;
4516   }
4517 }
4518
4519 .media-gallery__gifv {
4520   height: 100%;
4521   overflow: hidden;
4522   position: relative;
4523   width: 100%;
4524 }
4525
4526 .media-gallery__item-gifv-thumbnail {
4527   cursor: zoom-in;
4528   height: 100%;
4529   object-fit: cover;
4530   position: relative;
4531   top: 50%;
4532   transform: translateY(-50%);
4533   width: 100%;
4534   z-index: 1;
4535 }
4536
4537 .media-gallery__item-thumbnail-label {
4538   clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
4539   clip: rect(1px, 1px, 1px, 1px);
4540   overflow: hidden;
4541   position: absolute;
4542 }
4543 /* End Media Gallery */
4544
4545 /* Status Video Player */
4546 .status__video-player {
4547   background: $base-overlay-background;
4548   box-sizing: border-box;
4549   cursor: default; /* May not be needed */
4550   margin-top: 8px;
4551   overflow: hidden;
4552   position: relative;
4553 }
4554
4555 .status__video-player-video {
4556   height: 100%;
4557   object-fit: cover;
4558   position: relative;
4559   top: 50%;
4560   transform: translateY(-50%);
4561   width: 100%;
4562   z-index: 1;
4563 }
4564
4565 .status__video-player-expand,
4566 .status__video-player-mute {
4567   color: $primary-text-color;
4568   opacity: 0.8;
4569   position: absolute;
4570   right: 4px;
4571   text-shadow: 0 1px 1px $base-shadow-color, 1px 0 1px $base-shadow-color;
4572 }
4573
4574 .status__video-player-spoiler {
4575   display: none;
4576   color: $primary-text-color;
4577   left: 4px;
4578   position: absolute;
4579   text-shadow: 0 1px 1px $base-shadow-color, 1px 0 1px $base-shadow-color;
4580   top: 4px;
4581   z-index: 100;
4582
4583   &.status__video-player-spoiler--visible {
4584     display: block;
4585   }
4586 }
4587
4588 .status__video-player-expand {
4589   bottom: 4px;
4590   z-index: 100;
4591 }
4592
4593 .status__video-player-mute {
4594   top: 4px;
4595   z-index: 5;
4596 }
4597
4598 .video-player {
4599   overflow: hidden;
4600   position: relative;
4601   background: $base-shadow-color;
4602   max-width: 100%;
4603   border-radius: 4px;
4604
4605   &:focus {
4606     outline: 0;
4607   }
4608
4609   video {
4610     max-width: 100vw;
4611     max-height: 80vh;
4612     z-index: 1;
4613   }
4614
4615   &.fullscreen {
4616     width: 100% !important;
4617     height: 100% !important;
4618     margin: 0;
4619
4620     video {
4621       max-width: 100% !important;
4622       max-height: 100% !important;
4623       width: 100% !important;
4624       height: 100% !important;
4625     }
4626   }
4627
4628   &.inline {
4629     video {
4630       object-fit: contain;
4631       position: relative;
4632       top: 50%;
4633       transform: translateY(-50%);
4634     }
4635   }
4636
4637   &__controls {
4638     position: absolute;
4639     z-index: 2;
4640     bottom: 0;
4641     left: 0;
4642     right: 0;
4643     box-sizing: border-box;
4644     background: linear-gradient(0deg, rgba($base-shadow-color, 0.85) 0, rgba($base-shadow-color, 0.45) 60%, transparent);
4645     padding: 0 15px;
4646     opacity: 0;
4647     transition: opacity .1s ease;
4648
4649     &.active {
4650       opacity: 1;
4651     }
4652   }
4653
4654   &.inactive {
4655     video,
4656     .video-player__controls {
4657       visibility: hidden;
4658     }
4659   }
4660
4661   &__spoiler {
4662     display: none;
4663     position: absolute;
4664     top: 0;
4665     left: 0;
4666     width: 100%;
4667     height: 100%;
4668     z-index: 4;
4669     border: 0;
4670     background: $base-overlay-background;
4671     color: $darker-text-color;
4672     transition: none;
4673     pointer-events: none;
4674
4675     &.active {
4676       display: block;
4677       pointer-events: auto;
4678
4679       &:hover,
4680       &:active,
4681       &:focus {
4682         color: lighten($darker-text-color, 7%);
4683       }
4684     }
4685
4686     &__title {
4687       display: block;
4688       font-size: 14px;
4689     }
4690
4691     &__subtitle {
4692       display: block;
4693       font-size: 11px;
4694       font-weight: 500;
4695     }
4696   }
4697
4698   &__buttons-bar {
4699     display: flex;
4700     justify-content: space-between;
4701     padding-bottom: 10px;
4702   }
4703
4704   &__buttons {
4705     font-size: 16px;
4706     white-space: nowrap;
4707     overflow: hidden;
4708     text-overflow: ellipsis;
4709
4710     &.left {
4711       button {
4712         padding-left: 0;
4713       }
4714     }
4715
4716     &.right {
4717       button {
4718         padding-right: 0;
4719       }
4720     }
4721
4722     button {
4723       background: transparent;
4724       padding: 2px 10px;
4725       font-size: 16px;
4726       border: 0;
4727       color: rgba($white, 0.75);
4728
4729       &:active,
4730       &:hover,
4731       &:focus {
4732         color: $white;
4733       }
4734     }
4735   }
4736
4737   &__time-sep,
4738   &__time-total,
4739   &__time-current {
4740     font-size: 14px;
4741     font-weight: 500;
4742   }
4743
4744   &__time-current {
4745     color: $white;
4746     margin-left: 10px;
4747   }
4748
4749   &__time-sep {
4750     display: inline-block;
4751     margin: 0 6px;
4752   }
4753
4754   &__time-sep,
4755   &__time-total {
4756     color: $white;
4757   }
4758
4759   &__seek {
4760     cursor: pointer;
4761     height: 24px;
4762     position: relative;
4763
4764     &::before {
4765       content: "";
4766       width: 100%;
4767       background: rgba($white, 0.35);
4768       border-radius: 4px;
4769       display: block;
4770       position: absolute;
4771       height: 4px;
4772       top: 10px;
4773     }
4774
4775     &__progress,
4776     &__buffer {
4777       display: block;
4778       position: absolute;
4779       height: 4px;
4780       border-radius: 4px;
4781       top: 10px;
4782       background: lighten($ui-highlight-color, 8%);
4783     }
4784
4785     &__buffer {
4786       background: rgba($white, 0.2);
4787     }
4788
4789     &__handle {
4790       position: absolute;
4791       z-index: 3;
4792       opacity: 0;
4793       border-radius: 50%;
4794       width: 12px;
4795       height: 12px;
4796       top: 6px;
4797       margin-left: -6px;
4798       transition: opacity .1s ease;
4799       background: lighten($ui-highlight-color, 8%);
4800       box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2);
4801       pointer-events: none;
4802
4803       &.active {
4804         opacity: 1;
4805       }
4806     }
4807
4808     &:hover {
4809       .video-player__seek__handle {
4810         opacity: 1;
4811       }
4812     }
4813   }
4814
4815   &.detailed,
4816   &.fullscreen {
4817     .video-player__buttons {
4818       button {
4819         padding-top: 10px;
4820         padding-bottom: 10px;
4821       }
4822     }
4823   }
4824 }
4825
4826 .media-spoiler-video {
4827   background-size: cover;
4828   background-repeat: no-repeat;
4829   background-position: center;
4830   cursor: pointer;
4831   margin-top: 8px;
4832   position: relative;
4833   border: 0;
4834   display: block;
4835 }
4836
4837 .media-spoiler-video-play-icon {
4838   border-radius: 100px;
4839   color: rgba($primary-text-color, 0.8);
4840   font-size: 36px;
4841   left: 50%;
4842   padding: 5px;
4843   position: absolute;
4844   top: 50%;
4845   transform: translate(-50%, -50%);
4846 }
4847 /* End Video Player */
4848
4849 .account-gallery__container {
4850   display: flex;
4851   justify-content: center;
4852   flex-wrap: wrap;
4853   padding: 2px;
4854 }
4855
4856 .account-gallery__item {
4857   flex-grow: 1;
4858   width: 50%;
4859   overflow: hidden;
4860   position: relative;
4861
4862   &::before {
4863     content: "";
4864     display: block;
4865     padding-top: 100%;
4866   }
4867
4868   a {
4869     display: block;
4870     width: calc(100% - 4px);
4871     height: calc(100% - 4px);
4872     margin: 2px;
4873     top: 0;
4874     left: 0;
4875     background-color: $base-overlay-background;
4876     background-size: cover;
4877     background-position: center;
4878     position: absolute;
4879     color: $darker-text-color;
4880     text-decoration: none;
4881     border-radius: 4px;
4882
4883     &:hover,
4884     &:active,
4885     &:focus {
4886       outline: 0;
4887       color: $secondary-text-color;
4888
4889       &::before {
4890         content: "";
4891         display: block;
4892         width: 100%;
4893         height: 100%;
4894         background: rgba($base-overlay-background, 0.3);
4895         border-radius: 4px;
4896       }
4897     }
4898   }
4899
4900   &__icons {
4901     position: absolute;
4902     top: 50%;
4903     left: 50%;
4904     transform: translate(-50%, -50%);
4905     font-size: 24px;
4906   }
4907 }
4908
4909 .account__section-headline {
4910   background: darken($ui-base-color, 4%);
4911   border-bottom: 1px solid lighten($ui-base-color, 8%);
4912   cursor: default;
4913   display: flex;
4914
4915   a {
4916     display: block;
4917     flex: 1 1 auto;
4918     color: $darker-text-color;
4919     padding: 15px 0;
4920     font-size: 14px;
4921     font-weight: 500;
4922     text-align: center;
4923     text-decoration: none;
4924     position: relative;
4925
4926     &.active {
4927       color: $secondary-text-color;
4928
4929       &::before,
4930       &::after {
4931         display: block;
4932         content: "";
4933         position: absolute;
4934         bottom: 0;
4935         left: 50%;
4936         width: 0;
4937         height: 0;
4938         transform: translateX(-50%);
4939         border-style: solid;
4940         border-width: 0 10px 10px;
4941         border-color: transparent transparent lighten($ui-base-color, 8%);
4942       }
4943
4944       &::after {
4945         bottom: -1px;
4946         border-color: transparent transparent $ui-base-color;
4947       }
4948     }
4949   }
4950 }
4951
4952 ::-webkit-scrollbar-thumb {
4953   border-radius: 0;
4954 }
4955
4956 .search-popout {
4957   background: $simple-background-color;
4958   border-radius: 4px;
4959   padding: 10px 14px;
4960   padding-bottom: 14px;
4961   margin-top: 10px;
4962   color: $light-text-color;
4963   box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
4964
4965   h4 {
4966     text-transform: uppercase;
4967     color: $light-text-color;
4968     font-size: 13px;
4969     font-weight: 500;
4970     margin-bottom: 10px;
4971   }
4972
4973   li {
4974     padding: 4px 0;
4975   }
4976
4977   ul {
4978     margin-bottom: 10px;
4979   }
4980
4981   em {
4982     font-weight: 500;
4983     color: $inverted-text-color;
4984   }
4985 }
4986
4987 noscript {
4988   text-align: center;
4989
4990   img {
4991     width: 200px;
4992     opacity: 0.5;
4993     animation: flicker 4s infinite;
4994   }
4995
4996   div {
4997     font-size: 14px;
4998     margin: 30px auto;
4999     color: $secondary-text-color;
5000     max-width: 400px;
5001
5002     a {
5003       color: $highlight-text-color;
5004       text-decoration: underline;
5005
5006       &:hover {
5007         text-decoration: none;
5008       }
5009     }
5010   }
5011 }
5012
5013 @keyframes flicker {
5014   0% { opacity: 1; }
5015   30% { opacity: 0.75; }
5016   100% { opacity: 1; }
5017 }
5018
5019 @media screen and (max-width: 630px) and (max-height: 400px) {
5020   $duration: 400ms;
5021   $delay: 100ms;
5022
5023   .tabs-bar,
5024   .search {
5025     will-change: margin-top;
5026     transition: margin-top $duration $delay;
5027   }
5028
5029   .navigation-bar {
5030     will-change: padding-bottom;
5031     transition: padding-bottom $duration $delay;
5032   }
5033
5034   .navigation-bar {
5035     & > a:first-child {
5036       will-change: margin-top, margin-left, margin-right, width;
5037       transition: margin-top $duration $delay, margin-left $duration ($duration + $delay), margin-right $duration ($duration + $delay);
5038     }
5039
5040     & > .navigation-bar__profile-edit {
5041       will-change: margin-top;
5042       transition: margin-top $duration $delay;
5043     }
5044
5045     .navigation-bar__actions {
5046       & > .icon-button.close {
5047         will-change: opacity transform;
5048         transition: opacity $duration * 0.5 $delay,
5049                     transform $duration $delay;
5050       }
5051
5052       & > .compose__action-bar .icon-button {
5053         will-change: opacity transform;
5054         transition: opacity $duration * 0.5 $delay + $duration * 0.5,
5055                     transform $duration $delay;
5056       }
5057     }
5058   }
5059
5060   .is-composing {
5061     .tabs-bar,
5062     .search {
5063       margin-top: -50px;
5064     }
5065
5066     .navigation-bar {
5067       padding-bottom: 0;
5068
5069       & > a:first-child {
5070         margin: -100px 10px 0 -50px;
5071       }
5072
5073       .navigation-bar__profile {
5074         padding-top: 2px;
5075       }
5076
5077       .navigation-bar__profile-edit {
5078         position: absolute;
5079         margin-top: -60px;
5080       }
5081
5082       .navigation-bar__actions {
5083         .icon-button.close {
5084           pointer-events: auto;
5085           opacity: 1;
5086           transform: scale(1.0, 1.0) translate(0, 0);
5087           bottom: 5px;
5088         }
5089
5090         .compose__action-bar .icon-button {
5091           pointer-events: none;
5092           opacity: 0;
5093           transform: scale(0.0, 1.0) translate(100%, 0);
5094         }
5095       }
5096     }
5097   }
5098 }
5099
5100 .embed-modal {
5101   max-width: 80vw;
5102   max-height: 80vh;
5103
5104   h4 {
5105     padding: 30px;
5106     font-weight: 500;
5107     font-size: 16px;
5108     text-align: center;
5109   }
5110
5111   .embed-modal__container {
5112     padding: 10px;
5113
5114     .hint {
5115       margin-bottom: 15px;
5116     }
5117
5118     .embed-modal__html {
5119       outline: 0;
5120       box-sizing: border-box;
5121       display: block;
5122       width: 100%;
5123       border: none;
5124       padding: 10px;
5125       font-family: 'mastodon-font-monospace', monospace;
5126       background: $ui-base-color;
5127       color: $primary-text-color;
5128       font-size: 14px;
5129       margin: 0;
5130       margin-bottom: 15px;
5131
5132       &::-moz-focus-inner {
5133         border: 0;
5134       }
5135
5136       &::-moz-focus-inner,
5137       &:focus,
5138       &:active {
5139         outline: 0 !important;
5140       }
5141
5142       &:focus {
5143         background: lighten($ui-base-color, 4%);
5144       }
5145
5146       @media screen and (max-width: 600px) {
5147         font-size: 16px;
5148       }
5149     }
5150
5151     .embed-modal__iframe {
5152       width: 400px;
5153       max-width: 100%;
5154       overflow: hidden;
5155       border: 0;
5156     }
5157   }
5158 }
5159
5160 .account__moved-note {
5161   padding: 14px 10px;
5162   padding-bottom: 16px;
5163   background: lighten($ui-base-color, 4%);
5164   border-top: 1px solid lighten($ui-base-color, 8%);
5165   border-bottom: 1px solid lighten($ui-base-color, 8%);
5166
5167   &__message {
5168     position: relative;
5169     margin-left: 58px;
5170     color: $dark-text-color;
5171     padding: 8px 0;
5172     padding-top: 0;
5173     padding-bottom: 4px;
5174     font-size: 14px;
5175
5176     > span {
5177       display: block;
5178       overflow: hidden;
5179       text-overflow: ellipsis;
5180     }
5181   }
5182
5183   &__icon-wrapper {
5184     left: -26px;
5185     position: absolute;
5186   }
5187
5188   .detailed-status__display-avatar {
5189     position: relative;
5190   }
5191
5192   .detailed-status__display-name {
5193     margin-bottom: 0;
5194   }
5195 }
5196
5197 .column-inline-form {
5198   padding: 7px 15px;
5199   padding-right: 5px;
5200   display: flex;
5201   justify-content: flex-start;
5202   align-items: center;
5203   background: lighten($ui-base-color, 4%);
5204
5205   label {
5206     flex: 1 1 auto;
5207
5208     input {
5209       width: 100%;
5210       margin-bottom: 6px;
5211
5212       &:focus {
5213         outline: 0;
5214       }
5215     }
5216   }
5217
5218   .icon-button {
5219     flex: 0 0 auto;
5220     margin-left: 5px;
5221   }
5222 }
5223
5224 .drawer__backdrop {
5225   cursor: pointer;
5226   position: absolute;
5227   top: 0;
5228   left: 0;
5229   width: 100%;
5230   height: 100%;
5231   background: rgba($base-overlay-background, 0.5);
5232 }
5233
5234 .list-editor {
5235   background: $ui-base-color;
5236   flex-direction: column;
5237   border-radius: 8px;
5238   box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
5239   width: 380px;
5240   overflow: hidden;
5241
5242   @media screen and (max-width: 420px) {
5243     width: 90%;
5244   }
5245
5246   h4 {
5247     padding: 15px 0;
5248     background: lighten($ui-base-color, 13%);
5249     font-weight: 500;
5250     font-size: 16px;
5251     text-align: center;
5252     border-radius: 8px 8px 0 0;
5253   }
5254
5255   .drawer__pager {
5256     height: 50vh;
5257   }
5258
5259   .drawer__inner {
5260     border-radius: 0 0 8px 8px;
5261
5262     &.backdrop {
5263       width: calc(100% - 60px);
5264       box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
5265       border-radius: 0 0 0 8px;
5266     }
5267   }
5268
5269   &__accounts {
5270     overflow-y: auto;
5271   }
5272
5273   .account__display-name {
5274     &:hover strong {
5275       text-decoration: none;
5276     }
5277   }
5278
5279   .account__avatar {
5280     cursor: default;
5281   }
5282
5283   .search {
5284     margin-bottom: 0;
5285   }
5286 }
5287
5288 .focal-point-modal {
5289   max-width: 80vw;
5290   max-height: 80vh;
5291   position: relative;
5292 }
5293
5294 .focal-point {
5295   position: relative;
5296   cursor: pointer;
5297   overflow: hidden;
5298
5299   &.dragging {
5300     cursor: move;
5301   }
5302
5303   img {
5304     max-width: 80vw;
5305     max-height: 80vh;
5306     width: auto;
5307     height: auto;
5308     margin: auto;
5309   }
5310
5311   &__reticle {
5312     position: absolute;
5313     width: 100px;
5314     height: 100px;
5315     transform: translate(-50%, -50%);
5316     background: url('../images/reticle.png') no-repeat 0 0;
5317     border-radius: 50%;
5318     box-shadow: 0 0 0 9999em rgba($base-shadow-color, 0.35);
5319   }
5320
5321   &__overlay {
5322     position: absolute;
5323     width: 100%;
5324     height: 100%;
5325     top: 0;
5326     left: 0;
5327   }
5328 }
5329
5330 .floating-action-button {
5331   position: fixed;
5332   display: flex;
5333   justify-content: center;
5334   align-items: center;
5335   width: 3.9375rem;
5336   height: 3.9375rem;
5337   bottom: 1.3125rem;
5338   right: 1.3125rem;
5339   background: darken($ui-highlight-color, 3%);
5340   color: $white;
5341   border-radius: 50%;
5342   font-size: 21px;
5343   line-height: 21px;
5344   text-decoration: none;
5345   box-shadow: 2px 3px 9px rgba($base-shadow-color, 0.4);
5346
5347   &:hover,
5348   &:focus,
5349   &:active {
5350     background: lighten($ui-highlight-color, 7%);
5351   }
5352 }
5353
5354 .account__header .roles {
5355   margin-top: 20px;
5356   margin-bottom: 20px;
5357   padding: 0 15px;
5358 }
5359
5360 .account__header .account__header__fields {
5361   font-size: 14px;
5362   line-height: 20px;
5363   overflow: hidden;
5364   margin: 20px -10px -20px;
5365   border-bottom: 0;
5366   border-top: 0;
5367
5368   dl {
5369     border-top: 1px solid lighten($ui-base-color, 4%);
5370     border-bottom: 0;
5371     display: flex;
5372   }
5373
5374   dt,
5375   dd {
5376     box-sizing: border-box;
5377     padding: 14px 5px;
5378     text-align: center;
5379     max-height: 48px;
5380     overflow: hidden;
5381     white-space: nowrap;
5382     text-overflow: ellipsis;
5383   }
5384
5385   dt {
5386     color: $darker-text-color;
5387     background: darken($ui-base-color, 4%);
5388     width: 120px;
5389     flex: 0 0 auto;
5390     font-weight: 500;
5391   }
5392
5393   dd {
5394     flex: 1 1 auto;
5395     color: $primary-text-color;
5396     background: $ui-base-color;
5397
5398     &.verified {
5399       border: 1px solid rgba($valid-value-color, 0.5);
5400       background: rgba($valid-value-color, 0.25);
5401     }
5402   }
5403 }
5404
5405 .trends {
5406   &__header {
5407     color: $dark-text-color;
5408     background: lighten($ui-base-color, 2%);
5409     border-bottom: 1px solid darken($ui-base-color, 4%);
5410     font-weight: 500;
5411     padding: 15px;
5412     font-size: 16px;
5413     cursor: default;
5414
5415     .fa {
5416       display: inline-block;
5417       margin-right: 5px;
5418     }
5419   }
5420
5421   &__item {
5422     display: flex;
5423     align-items: center;
5424     padding: 15px;
5425     border-bottom: 1px solid lighten($ui-base-color, 8%);
5426
5427     &:last-child {
5428       border-bottom: 0;
5429     }
5430
5431     &__name {
5432       flex: 1 1 auto;
5433       color: $dark-text-color;
5434       overflow: hidden;
5435       text-overflow: ellipsis;
5436       white-space: nowrap;
5437
5438       strong {
5439         font-weight: 500;
5440       }
5441
5442       a {
5443         color: $darker-text-color;
5444         text-decoration: none;
5445         font-size: 14px;
5446         font-weight: 500;
5447         display: block;
5448         overflow: hidden;
5449         text-overflow: ellipsis;
5450         white-space: nowrap;
5451
5452         &:hover,
5453         &:focus,
5454         &:active {
5455           span {
5456             text-decoration: underline;
5457           }
5458         }
5459       }
5460     }
5461
5462     &__current {
5463       flex: 0 0 auto;
5464       width: 100px;
5465       font-size: 24px;
5466       line-height: 36px;
5467       font-weight: 500;
5468       text-align: center;
5469       color: $secondary-text-color;
5470     }
5471
5472     &__sparkline {
5473       flex: 0 0 auto;
5474       width: 50px;
5475
5476       path {
5477         stroke: lighten($highlight-text-color, 6%) !important;
5478       }
5479     }
5480   }
5481 }