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