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