app/javascript/styles/components.scss

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