app/javascript/styles/mastodon/containers.scss

   1 .container-alt {
   2   width: 700px;
   3   margin: 0 auto;
   4   margin-top: 40px;
   5
   6   @media screen and (max-width: 740px) {
   7     width: 100%;
   8     margin: 0;
   9   }
  10 }
  11
  12 .logo-container {
  13   margin: 100px auto;
  14   margin-bottom: 50px;
  15
  16   @media screen and (max-width: 400px) {
  17     margin: 30px auto;
  18     margin-bottom: 20px;
  19   }
  20
  21   h1 {
  22     display: flex;
  23     justify-content: center;
  24     align-items: center;
  25
  26     img {
  27       height: 42px;
  28       margin-right: 10px;
  29     }
  30
  31     a {
  32       display: flex;
  33       justify-content: center;
  34       align-items: center;
  35       color: $primary-text-color;
  36       text-decoration: none;
  37       outline: 0;
  38       padding: 12px 16px;
  39       line-height: 32px;
  40       font-family: $font-display, sans-serif;
  41       font-weight: 500;
  42       font-size: 14px;
  43     }
  44   }
  45 }
  46
  47 .compose-standalone {
  48   .compose-form {
  49     width: 400px;
  50     margin: 0 auto;
  51     padding: 20px 0;
  52     margin-top: 40px;
  53     box-sizing: border-box;
  54
  55     @media screen and (max-width: 400px) {
  56       width: 100%;
  57       margin-top: 0;
  58       padding: 20px;
  59     }
  60   }
  61 }
  62
  63 .account-header {
  64   width: 400px;
  65   margin: 0 auto;
  66   display: flex;
  67   font-size: 13px;
  68   line-height: 18px;
  69   box-sizing: border-box;
  70   padding: 20px 0;
  71   padding-bottom: 0;
  72   margin-bottom: -30px;
  73   margin-top: 40px;
  74
  75   @media screen and (max-width: 440px) {
  76     width: 100%;
  77     margin: 0;
  78     margin-bottom: 10px;
  79     padding: 20px;
  80     padding-bottom: 0;
  81   }
  82
  83   .avatar {
  84     width: 40px;
  85     height: 40px;
  86     margin-right: 8px;
  87
  88     img {
  89       width: 100%;
  90       height: 100%;
  91       display: block;
  92       margin: 0;
  93       border-radius: 4px;
  94     }
  95   }
  96
  97   .name {
  98     flex: 1 1 auto;
  99     color: $secondary-text-color;
 100     width: calc(100% - 88px);
 101
 102     .username {
 103       display: block;
 104       font-weight: 500;
 105       text-overflow: ellipsis;
 106       overflow: hidden;
 107     }
 108   }
 109
 110   .logout-link {
 111     display: block;
 112     font-size: 32px;
 113     line-height: 40px;
 114     margin-left: 8px;
 115   }
 116 }
 117
 118 .grid-3 {
 119   display: grid;
 120   grid-gap: 10px;
 121   grid-template-columns: 3fr 1fr;
 122   grid-auto-columns: 25%;
 123   grid-auto-rows: max-content;
 124
 125   .column-0 {
 126     grid-column: 1/3;
 127     grid-row: 1;
 128   }
 129
 130   .column-1 {
 131     grid-column: 1;
 132     grid-row: 2;
 133   }
 134
 135   .column-2 {
 136     grid-column: 2;
 137     grid-row: 2;
 138   }
 139
 140   .column-3 {
 141     grid-column: 1/3;
 142     grid-row: 3;
 143   }
 144
 145   .landing-page__call-to-action {
 146     min-height: 100%;
 147   }
 148
 149   @media screen and (max-width: 738px) {
 150     grid-template-columns: minmax(0, 50%) minmax(0, 50%);
 151
 152     .landing-page__call-to-action {
 153       padding: 20px;
 154       display: flex;
 155       align-items: center;
 156       justify-content: center;
 157     }
 158
 159     .row__information-board {
 160       width: 100%;
 161       justify-content: center;
 162       align-items: center;
 163     }
 164
 165     .row__mascot {
 166       display: none;
 167     }
 168   }
 169
 170   @media screen and (max-width: $no-gap-breakpoint) {
 171     grid-gap: 0;
 172     grid-template-columns: minmax(0, 100%);
 173
 174     .column-0 {
 175       grid-column: 1;
 176     }
 177
 178     .column-1 {
 179       grid-column: 1;
 180       grid-row: 3;
 181     }
 182
 183     .column-2 {
 184       grid-column: 1;
 185       grid-row: 2;
 186     }
 187
 188     .column-3 {
 189       grid-column: 1;
 190       grid-row: 4;
 191     }
 192   }
 193 }
 194
 195 .public-layout {
 196   @media screen and (max-width: $no-gap-breakpoint) {
 197     padding-top: 48px;
 198   }
 199
 200   .container {
 201     max-width: 960px;
 202
 203     @media screen and (max-width: $no-gap-breakpoint) {
 204       padding: 0;
 205     }
 206   }
 207
 208   .header {
 209     background: lighten($ui-base-color, 8%);
 210     box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
 211     border-radius: 4px;
 212     height: 48px;
 213     margin: 10px 0;
 214     display: flex;
 215     align-items: stretch;
 216     justify-content: center;
 217     flex-wrap: nowrap;
 218     overflow: hidden;
 219
 220     @media screen and (max-width: $no-gap-breakpoint) {
 221       position: fixed;
 222       width: 100%;
 223       top: 0;
 224       left: 0;
 225       margin: 0;
 226       border-radius: 0;
 227       box-shadow: none;
 228       z-index: 110;
 229     }
 230
 231     & > div {
 232       flex: 1 1 33.3%;
 233       min-height: 1px;
 234     }
 235
 236     .nav-left {
 237       display: flex;
 238       align-items: stretch;
 239       justify-content: flex-start;
 240       flex-wrap: nowrap;
 241     }
 242
 243     .nav-center {
 244       display: flex;
 245       align-items: stretch;
 246       justify-content: center;
 247       flex-wrap: nowrap;
 248     }
 249
 250     .nav-right {
 251       display: flex;
 252       align-items: stretch;
 253       justify-content: flex-end;
 254       flex-wrap: nowrap;
 255     }
 256
 257     .brand {
 258       display: block;
 259       padding: 15px;
 260
 261       img {
 262         display: block;
 263         height: 18px;
 264         width: auto;
 265         position: relative;
 266         bottom: -2px;
 267
 268         @media screen and (max-width: $no-gap-breakpoint) {
 269           height: 20px;
 270         }
 271       }
 272
 273       &:hover,
 274       &:focus,
 275       &:active {
 276         background: lighten($ui-base-color, 12%);
 277       }
 278     }
 279
 280     .nav-link {
 281       display: flex;
 282       align-items: center;
 283       padding: 0 1rem;
 284       font-size: 12px;
 285       font-weight: 500;
 286       text-decoration: none;
 287       color: $darker-text-color;
 288       white-space: nowrap;
 289       text-align: center;
 290
 291       &:hover,
 292       &:focus,
 293       &:active {
 294         text-decoration: underline;
 295         color: $primary-text-color;
 296       }
 297
 298       @media screen and (max-width: $no-gap-breakpoint) {
 299         &.optional {
 300           display: none;
 301         }
 302       }
 303     }
 304
 305     .nav-button {
 306       background: lighten($ui-base-color, 16%);
 307       margin: 8px;
 308       margin-left: 0;
 309       border-radius: 4px;
 310
 311       &:hover,
 312       &:focus,
 313       &:active {
 314         text-decoration: none;
 315         background: lighten($ui-base-color, 20%);
 316       }
 317     }
 318   }
 319
 320   $no-columns-breakpoint: 600px;
 321
 322   .grid {
 323     display: grid;
 324     grid-gap: 10px;
 325     grid-template-columns: minmax(300px, 3fr) minmax(298px, 1fr);
 326     grid-auto-columns: 25%;
 327     grid-auto-rows: max-content;
 328
 329     .column-0 {
 330       grid-row: 1;
 331       grid-column: 1;
 332     }
 333
 334     .column-1 {
 335       grid-row: 1;
 336       grid-column: 2;
 337     }
 338
 339     @media screen and (max-width: $no-columns-breakpoint) {
 340       grid-template-columns: 100%;
 341       grid-gap: 0;
 342
 343       .column-1 {
 344         display: none;
 345       }
 346     }
 347   }
 348
 349   .public-account-header {
 350     overflow: hidden;
 351     margin-bottom: 10px;
 352     box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
 353
 354     &.inactive {
 355       opacity: 0.5;
 356
 357       .public-account-header__image,
 358       .avatar {
 359         filter: grayscale(100%);
 360       }
 361
 362       .logo-button {
 363         background-color: $secondary-text-color;
 364
 365         svg path:last-child {
 366           fill: $secondary-text-color;
 367         }
 368       }
 369     }
 370
 371     &__image {
 372       border-radius: 4px 4px 0 0;
 373       overflow: hidden;
 374       height: 300px;
 375       position: relative;
 376       background: darken($ui-base-color, 12%);
 377
 378       &::after {
 379         content: "";
 380         display: block;
 381         position: absolute;
 382         width: 100%;
 383         height: 100%;
 384         box-shadow: inset 0 -1px 1px 1px rgba($base-shadow-color, 0.15);
 385         top: 0;
 386         left: 0;
 387       }
 388
 389       img {
 390         object-fit: cover;
 391         display: block;
 392         width: 100%;
 393         height: 100%;
 394         margin: 0;
 395         border-radius: 4px 4px 0 0;
 396       }
 397
 398       @media screen and (max-width: 600px) {
 399         height: 200px;
 400       }
 401     }
 402
 403     &--no-bar {
 404       margin-bottom: 0;
 405
 406       .public-account-header__image,
 407       .public-account-header__image img {
 408         border-radius: 4px;
 409
 410         @media screen and (max-width: $no-gap-breakpoint) {
 411           border-radius: 0;
 412         }
 413       }
 414     }
 415
 416     @media screen and (max-width: $no-gap-breakpoint) {
 417       margin-bottom: 0;
 418       box-shadow: none;
 419
 420       &__image::after {
 421         display: none;
 422       }
 423
 424       &__image,
 425       &__image img {
 426         border-radius: 0;
 427       }
 428     }
 429
 430     &__bar {
 431       position: relative;
 432       margin-top: -80px;
 433       display: flex;
 434       justify-content: flex-start;
 435
 436       &::before {
 437         content: "";
 438         display: block;
 439         background: lighten($ui-base-color, 4%);
 440         position: absolute;
 441         bottom: 0;
 442         left: 0;
 443         right: 0;
 444         height: 60px;
 445         border-radius: 0 0 4px 4px;
 446         z-index: -1;
 447       }
 448
 449       .avatar {
 450         display: block;
 451         width: 120px;
 452         height: 120px;
 453         padding-left: 20px - 4px;
 454         flex: 0 0 auto;
 455
 456         img {
 457           display: block;
 458           width: 100%;
 459           height: 100%;
 460           margin: 0;
 461           border-radius: 50%;
 462           border: 4px solid lighten($ui-base-color, 4%);
 463           background: darken($ui-base-color, 8%);
 464         }
 465       }
 466
 467       @media screen and (max-width: 600px) {
 468         margin-top: 0;
 469         background: lighten($ui-base-color, 4%);
 470         border-radius: 0 0 4px 4px;
 471         padding: 5px;
 472
 473         &::before {
 474           display: none;
 475         }
 476
 477         .avatar {
 478           width: 48px;
 479           height: 48px;
 480           padding: 7px 0;
 481           padding-left: 10px;
 482
 483           img {
 484             border: 0;
 485             border-radius: 4px;
 486           }
 487
 488           @media screen and (max-width: 360px) {
 489             display: none;
 490           }
 491         }
 492       }
 493
 494       @media screen and (max-width: $no-gap-breakpoint) {
 495         border-radius: 0;
 496       }
 497
 498       @media screen and (max-width: $no-columns-breakpoint) {
 499         flex-wrap: wrap;
 500       }
 501     }
 502
 503     &__tabs {
 504       flex: 1 1 auto;
 505       margin-left: 20px;
 506
 507       &__name {
 508         padding-top: 20px;
 509         padding-bottom: 8px;
 510
 511         h1 {
 512           font-size: 20px;
 513           line-height: 18px * 1.5;
 514           color: $primary-text-color;
 515           font-weight: 500;
 516           overflow: hidden;
 517           white-space: nowrap;
 518           text-overflow: ellipsis;
 519           text-shadow: 1px 1px 1px $base-shadow-color;
 520
 521           small {
 522             display: block;
 523             font-size: 14px;
 524             color: $primary-text-color;
 525             font-weight: 400;
 526             overflow: hidden;
 527             text-overflow: ellipsis;
 528           }
 529         }
 530       }
 531
 532       @media screen and (max-width: 600px) {
 533         margin-left: 15px;
 534         display: flex;
 535         justify-content: space-between;
 536         align-items: center;
 537
 538         &__name {
 539           padding-top: 0;
 540           padding-bottom: 0;
 541
 542           h1 {
 543             font-size: 16px;
 544             line-height: 24px;
 545             text-shadow: none;
 546
 547             small {
 548               color: $darker-text-color;
 549             }
 550           }
 551         }
 552       }
 553
 554       &__tabs {
 555         display: flex;
 556         justify-content: flex-start;
 557         align-items: stretch;
 558         height: 58px;
 559
 560         .details-counters {
 561           display: flex;
 562           flex-direction: row;
 563           min-width: 300px;
 564         }
 565
 566         @media screen and (max-width: $no-columns-breakpoint) {
 567           .details-counters {
 568             display: none;
 569           }
 570         }
 571
 572         .counter {
 573           width: 33.3%;
 574           box-sizing: border-box;
 575           flex: 0 0 auto;
 576           color: $darker-text-color;
 577           padding: 10px;
 578           border-right: 1px solid lighten($ui-base-color, 4%);
 579           cursor: default;
 580           text-align: center;
 581           position: relative;
 582
 583           a {
 584             display: block;
 585           }
 586
 587           &:last-child {
 588             border-right: 0;
 589           }
 590
 591           &::after {
 592             display: block;
 593             content: "";
 594             position: absolute;
 595             bottom: 0;
 596             left: 0;
 597             width: 100%;
 598             border-bottom: 4px solid $ui-primary-color;
 599             opacity: 0.5;
 600             transition: all 400ms ease;
 601           }
 602
 603           &.active {
 604             &::after {
 605               border-bottom: 4px solid $highlight-text-color;
 606               opacity: 1;
 607             }
 608
 609             &.inactive::after {
 610               border-bottom-color: $secondary-text-color;
 611             }
 612           }
 613
 614           &:hover {
 615             &::after {
 616               opacity: 1;
 617               transition-duration: 100ms;
 618             }
 619           }
 620
 621           a {
 622             text-decoration: none;
 623             color: inherit;
 624           }
 625
 626           .counter-label {
 627             font-size: 12px;
 628             display: block;
 629           }
 630
 631           .counter-number {
 632             font-weight: 500;
 633             font-size: 18px;
 634             margin-bottom: 5px;
 635             color: $primary-text-color;
 636             font-family: $font-display, sans-serif;
 637           }
 638         }
 639
 640         .spacer {
 641           flex: 1 1 auto;
 642           height: 1px;
 643         }
 644
 645         &__buttons {
 646           padding: 7px 8px;
 647         }
 648       }
 649     }
 650
 651     &__extra {
 652       display: none;
 653       margin-top: 4px;
 654
 655       .public-account-bio {
 656         border-radius: 0;
 657         box-shadow: none;
 658         background: transparent;
 659         margin: 0 -5px;
 660
 661         .account__header__fields {
 662           border-top: 1px solid lighten($ui-base-color, 12%);
 663         }
 664
 665         .roles {
 666           display: none;
 667         }
 668       }
 669
 670       &__links {
 671         margin-top: -15px;
 672         font-size: 14px;
 673         color: $darker-text-color;
 674
 675         a {
 676           display: inline-block;
 677           color: $darker-text-color;
 678           text-decoration: none;
 679           padding: 15px;
 680
 681           strong {
 682             font-weight: 700;
 683             color: $primary-text-color;
 684           }
 685         }
 686       }
 687
 688       @media screen and (max-width: $no-columns-breakpoint) {
 689         display: block;
 690         flex: 100%;
 691       }
 692     }
 693   }
 694
 695   .account__section-headline {
 696     border-radius: 4px 4px 0 0;
 697
 698     @media screen and (max-width: $no-gap-breakpoint) {
 699       border-radius: 0;
 700     }
 701   }
 702
 703   .detailed-status__meta {
 704     margin-top: 25px;
 705   }
 706
 707   .public-account-bio {
 708     background: lighten($ui-base-color, 8%);
 709     box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
 710     border-radius: 4px;
 711     overflow: hidden;
 712     margin-bottom: 10px;
 713
 714     @media screen and (max-width: $no-gap-breakpoint) {
 715       box-shadow: none;
 716       margin-bottom: 0;
 717       border-radius: 0;
 718     }
 719
 720     .account__header__fields {
 721       margin: 0;
 722       border-top: 0;
 723
 724       a {
 725         color: lighten($ui-highlight-color, 8%);
 726       }
 727
 728       dl:first-child .verified {
 729         border-radius: 0 4px 0 0;
 730       }
 731
 732       .verified a {
 733         color: $valid-value-color;
 734       }
 735     }
 736
 737     .account__header__content {
 738       padding: 20px;
 739       padding-bottom: 0;
 740       color: $primary-text-color;
 741     }
 742
 743     &__extra,
 744     .roles {
 745       padding: 20px;
 746       font-size: 14px;
 747       color: $darker-text-color;
 748     }
 749
 750     .roles {
 751       padding-bottom: 0;
 752     }
 753   }
 754
 755   .static-icon-button {
 756     color: $action-button-color;
 757     font-size: 18px;
 758
 759     & > span {
 760       font-size: 14px;
 761       font-weight: 500;
 762     }
 763   }
 764
 765   .card-grid {
 766     display: flex;
 767     flex-wrap: wrap;
 768     min-width: 100%;
 769     margin: 0 -5px;
 770
 771     & > div {
 772       box-sizing: border-box;
 773       flex: 1 0 auto;
 774       width: 300px;
 775       padding: 0 5px;
 776       margin-bottom: 10px;
 777       max-width: 33.333%;
 778
 779       @media screen and (max-width: 900px) {
 780         max-width: 50%;
 781       }
 782
 783       @media screen and (max-width: 600px) {
 784         max-width: 100%;
 785       }
 786     }
 787
 788     @media screen and (max-width: $no-gap-breakpoint) {
 789       margin: 0;
 790       border-top: 1px solid lighten($ui-base-color, 8%);
 791
 792       & > div {
 793         width: 100%;
 794         padding: 0;
 795         margin-bottom: 0;
 796         border-bottom: 1px solid lighten($ui-base-color, 8%);
 797
 798         &:last-child {
 799           border-bottom: 0;
 800         }
 801
 802         .card__bar {
 803           background: $ui-base-color;
 804
 805           &:hover,
 806           &:active,
 807           &:focus {
 808             background: lighten($ui-base-color, 4%);
 809           }
 810         }
 811       }
 812     }
 813   }
 814 }