app/javascript/styles/components.scss

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