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