app/javascript/styles/components.scss

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