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