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