app/javascript/styles/mastodon/components.scss

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