app/javascript/styles/components.scss

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