app/javascript/styles/mastodon/admin.scss

   1 $no-columns-breakpoint: 600px;
   2 $sidebar-width: 240px;
   3 $content-width: 840px;
   4
   5 .admin-wrapper {
   6   display: flex;
   7   justify-content: center;
   8   width: 100%;
   9   min-height: 100vh;
  10
  11   .sidebar-wrapper {
  12     min-height: 100vh;
  13     overflow: hidden;
  14     pointer-events: none;
  15     flex: 1 1 auto;
  16
  17     &__inner {
  18       display: flex;
  19       justify-content: flex-end;
  20       background: $ui-base-color;
  21       height: 100%;
  22     }
  23   }
  24
  25   .sidebar {
  26     width: $sidebar-width;
  27     padding: 0;
  28     pointer-events: auto;
  29
  30     &__toggle {
  31       display: none;
  32       background: lighten($ui-base-color, 8%);
  33       height: 48px;
  34
  35       &__logo {
  36         flex: 1 1 auto;
  37
  38         a {
  39           display: inline-block;
  40           padding: 15px;
  41         }
  42
  43         svg {
  44           fill: $primary-text-color;
  45           height: 20px;
  46           position: relative;
  47           bottom: -2px;
  48         }
  49       }
  50
  51       &__icon {
  52         display: block;
  53         color: $darker-text-color;
  54         text-decoration: none;
  55         flex: 0 0 auto;
  56         font-size: 20px;
  57         padding: 15px;
  58       }
  59
  60       a {
  61         &:hover,
  62         &:focus,
  63         &:active {
  64           background: lighten($ui-base-color, 12%);
  65         }
  66       }
  67     }
  68
  69     .logo {
  70       display: block;
  71       margin: 40px auto;
  72       width: 100px;
  73       height: 100px;
  74     }
  75
  76     @media screen and (max-width: $no-columns-breakpoint) {
  77       & > a:first-child {
  78         display: none;
  79       }
  80     }
  81
  82     ul {
  83       list-style: none;
  84       border-radius: 4px 0 0 4px;
  85       overflow: hidden;
  86       margin-bottom: 20px;
  87
  88       @media screen and (max-width: $no-columns-breakpoint) {
  89         margin-bottom: 0;
  90       }
  91
  92       a {
  93         display: block;
  94         padding: 15px;
  95         color: $darker-text-color;
  96         text-decoration: none;
  97         transition: all 200ms linear;
  98         transition-property: color, background-color;
  99         border-radius: 4px 0 0 4px;
 100         white-space: nowrap;
 101         overflow: hidden;
 102         text-overflow: ellipsis;
 103
 104         i.fa {
 105           margin-right: 5px;
 106         }
 107
 108         &:hover {
 109           color: $primary-text-color;
 110           background-color: darken($ui-base-color, 5%);
 111           transition: all 100ms linear;
 112           transition-property: color, background-color;
 113         }
 114
 115         &.selected {
 116           background: darken($ui-base-color, 2%);
 117           border-radius: 4px 0 0;
 118         }
 119       }
 120
 121       ul {
 122         background: darken($ui-base-color, 4%);
 123         border-radius: 0 0 0 4px;
 124         margin: 0;
 125
 126         a {
 127           border: 0;
 128           padding: 15px 35px;
 129         }
 130       }
 131
 132       .simple-navigation-active-leaf a {
 133         color: $primary-text-color;
 134         background-color: $ui-highlight-color;
 135         border-bottom: 0;
 136         border-radius: 0;
 137
 138         &:hover {
 139           background-color: lighten($ui-highlight-color, 5%);
 140         }
 141       }
 142     }
 143
 144     & > ul > .simple-navigation-active-leaf a {
 145       border-radius: 4px 0 0 4px;
 146     }
 147   }
 148
 149   .content-wrapper {
 150     box-sizing: border-box;
 151     width: 100%;
 152     max-width: $content-width;
 153     flex: 1 1 auto;
 154   }
 155
 156   @media screen and (max-width: $content-width + $sidebar-width) {
 157     .sidebar-wrapper--empty {
 158       display: none;
 159     }
 160
 161     .sidebar-wrapper {
 162       width: $sidebar-width;
 163       flex: 0 0 auto;
 164     }
 165   }
 166
 167   @media screen and (max-width: $no-columns-breakpoint) {
 168     .sidebar-wrapper {
 169       width: 100%;
 170     }
 171   }
 172
 173   .content {
 174     padding: 20px 15px;
 175     padding-top: 60px;
 176     padding-left: 25px;
 177
 178     @media screen and (max-width: $no-columns-breakpoint) {
 179       max-width: none;
 180       padding: 15px;
 181       padding-top: 30px;
 182     }
 183
 184     h2 {
 185       color: $secondary-text-color;
 186       font-size: 24px;
 187       line-height: 28px;
 188       font-weight: 400;
 189       padding-bottom: 40px;
 190       border-bottom: 1px solid lighten($ui-base-color, 8%);
 191       margin-bottom: 40px;
 192
 193       @media screen and (max-width: $no-columns-breakpoint) {
 194         border-bottom: 0;
 195         padding-bottom: 0;
 196         font-weight: 700;
 197       }
 198     }
 199
 200     h3 {
 201       color: $secondary-text-color;
 202       font-size: 20px;
 203       line-height: 28px;
 204       font-weight: 400;
 205       margin-bottom: 30px;
 206     }
 207
 208     h4 {
 209       text-transform: uppercase;
 210       font-size: 13px;
 211       font-weight: 700;
 212       color: $darker-text-color;
 213       padding-bottom: 8px;
 214       margin-bottom: 8px;
 215       border-bottom: 1px solid lighten($ui-base-color, 8%);
 216     }
 217
 218     h6 {
 219       font-size: 16px;
 220       color: $secondary-text-color;
 221       line-height: 28px;
 222       font-weight: 500;
 223     }
 224
 225     .fields-group h6 {
 226       color: $primary-text-color;
 227       font-weight: 500;
 228     }
 229
 230     .directory__tag > a,
 231     .directory__tag > div {
 232       box-shadow: none;
 233     }
 234
 235     .directory__tag .table-action-link .fa {
 236       color: inherit;
 237     }
 238
 239     .directory__tag h4 {
 240       font-size: 18px;
 241       font-weight: 700;
 242       color: $primary-text-color;
 243       text-transform: none;
 244       padding-bottom: 0;
 245       margin-bottom: 0;
 246       border-bottom: 0;
 247     }
 248
 249     & > p {
 250       font-size: 14px;
 251       line-height: 21px;
 252       color: $secondary-text-color;
 253       margin-bottom: 20px;
 254
 255       strong {
 256         color: $primary-text-color;
 257         font-weight: 500;
 258
 259         @each $lang in $cjk-langs {
 260           &:lang(#{$lang}) {
 261             font-weight: 700;
 262           }
 263         }
 264       }
 265     }
 266
 267     hr {
 268       width: 100%;
 269       height: 0;
 270       border: 0;
 271       border-bottom: 1px solid rgba($ui-base-lighter-color, .6);
 272       margin: 20px 0;
 273
 274       &.spacer {
 275         height: 1px;
 276         border: 0;
 277       }
 278     }
 279   }
 280
 281   @media screen and (max-width: $no-columns-breakpoint) {
 282     display: block;
 283
 284     .sidebar-wrapper {
 285       min-height: 0;
 286     }
 287
 288     .sidebar {
 289       width: 100%;
 290       padding: 0;
 291       height: auto;
 292
 293       &__toggle {
 294         display: flex;
 295       }
 296
 297       & > ul {
 298         display: none;
 299       }
 300
 301       ul a,
 302       ul ul a {
 303         border-radius: 0;
 304         border-bottom: 1px solid lighten($ui-base-color, 4%);
 305         transition: none;
 306
 307         &:hover {
 308           transition: none;
 309         }
 310       }
 311
 312       ul ul {
 313         border-radius: 0;
 314       }
 315
 316       ul .simple-navigation-active-leaf a {
 317         border-bottom-color: $ui-highlight-color;
 318       }
 319     }
 320   }
 321 }
 322
 323 hr.spacer {
 324   width: 100%;
 325   border: 0;
 326   margin: 20px 0;
 327   height: 1px;
 328 }
 329
 330 body,
 331 .admin-wrapper .content {
 332   .muted-hint {
 333     color: $darker-text-color;
 334
 335     a {
 336       color: $highlight-text-color;
 337     }
 338   }
 339
 340   .positive-hint {
 341     color: $valid-value-color;
 342     font-weight: 500;
 343   }
 344
 345   .negative-hint {
 346     color: $error-value-color;
 347     font-weight: 500;
 348   }
 349
 350   .neutral-hint {
 351     color: $dark-text-color;
 352     font-weight: 500;
 353   }
 354
 355   .warning-hint {
 356     color: $gold-star;
 357     font-weight: 500;
 358   }
 359 }
 360
 361 .filters {
 362   display: flex;
 363   flex-wrap: wrap;
 364
 365   .filter-subset {
 366     flex: 0 0 auto;
 367     margin: 0 40px 20px 0;
 368
 369     &:last-child {
 370       margin-bottom: 30px;
 371     }
 372
 373     ul {
 374       margin-top: 5px;
 375       list-style: none;
 376
 377       li {
 378         display: inline-block;
 379         margin-right: 5px;
 380       }
 381     }
 382
 383     strong {
 384       font-weight: 500;
 385       text-transform: uppercase;
 386       font-size: 12px;
 387
 388       @each $lang in $cjk-langs {
 389         &:lang(#{$lang}) {
 390           font-weight: 700;
 391         }
 392       }
 393     }
 394
 395     a {
 396       display: inline-block;
 397       color: $darker-text-color;
 398       text-decoration: none;
 399       text-transform: uppercase;
 400       font-size: 12px;
 401       font-weight: 500;
 402       border-bottom: 2px solid $ui-base-color;
 403
 404       &:hover {
 405         color: $primary-text-color;
 406         border-bottom: 2px solid lighten($ui-base-color, 5%);
 407       }
 408
 409       &.selected {
 410         color: $highlight-text-color;
 411         border-bottom: 2px solid $ui-highlight-color;
 412       }
 413     }
 414   }
 415 }
 416
 417 .report-accounts {
 418   display: flex;
 419   flex-wrap: wrap;
 420   margin-bottom: 20px;
 421 }
 422
 423 .report-accounts__item {
 424   display: flex;
 425   flex: 250px;
 426   flex-direction: column;
 427   margin: 0 5px;
 428
 429   & > strong {
 430     display: block;
 431     margin: 0 0 10px -5px;
 432     font-weight: 500;
 433     font-size: 14px;
 434     line-height: 18px;
 435     color: $secondary-text-color;
 436
 437     @each $lang in $cjk-langs {
 438       &:lang(#{$lang}) {
 439         font-weight: 700;
 440       }
 441     }
 442   }
 443
 444   .account-card {
 445     flex: 1 1 auto;
 446   }
 447 }
 448
 449 .report-status,
 450 .account-status {
 451   display: flex;
 452   margin-bottom: 10px;
 453
 454   .activity-stream {
 455     flex: 2 0 0;
 456     margin-right: 20px;
 457     max-width: calc(100% - 60px);
 458
 459     .entry {
 460       border-radius: 4px;
 461     }
 462   }
 463 }
 464
 465 .report-status__actions,
 466 .account-status__actions {
 467   flex: 0 0 auto;
 468   display: flex;
 469   flex-direction: column;
 470
 471   .icon-button {
 472     font-size: 24px;
 473     width: 24px;
 474     text-align: center;
 475     margin-bottom: 10px;
 476   }
 477 }
 478
 479 .simple_form.new_report_note,
 480 .simple_form.new_account_moderation_note {
 481   max-width: 100%;
 482 }
 483
 484 .batch-form-box {
 485   display: flex;
 486   flex-wrap: wrap;
 487   margin-bottom: 5px;
 488
 489   #form_status_batch_action {
 490     margin: 0 5px 5px 0;
 491     font-size: 14px;
 492   }
 493
 494   input.button {
 495     margin: 0 5px 5px 0;
 496   }
 497
 498   .media-spoiler-toggle-buttons {
 499     margin-left: auto;
 500
 501     .button {
 502       overflow: visible;
 503       margin: 0 0 5px 5px;
 504       float: right;
 505     }
 506   }
 507 }
 508
 509 .back-link {
 510   margin-bottom: 10px;
 511   font-size: 14px;
 512
 513   a {
 514     color: $highlight-text-color;
 515     text-decoration: none;
 516
 517     &:hover {
 518       text-decoration: underline;
 519     }
 520   }
 521 }
 522
 523 .spacer {
 524   flex: 1 1 auto;
 525 }
 526
 527 .log-entry {
 528   margin-bottom: 20px;
 529   line-height: 20px;
 530
 531   &__header {
 532     display: flex;
 533     justify-content: flex-start;
 534     align-items: center;
 535     padding: 10px;
 536     background: $ui-base-color;
 537     color: $darker-text-color;
 538     border-radius: 4px 4px 0 0;
 539     font-size: 14px;
 540     position: relative;
 541   }
 542
 543   &__avatar {
 544     margin-right: 10px;
 545
 546     .avatar {
 547       display: block;
 548       margin: 0;
 549       border-radius: 50%;
 550       width: 40px;
 551       height: 40px;
 552     }
 553   }
 554
 555   &__content {
 556     max-width: calc(100% - 90px);
 557   }
 558
 559   &__title {
 560     word-wrap: break-word;
 561   }
 562
 563   &__timestamp {
 564     color: $dark-text-color;
 565   }
 566
 567   &__extras {
 568     background: lighten($ui-base-color, 6%);
 569     border-radius: 0 0 4px 4px;
 570     padding: 10px;
 571     color: $darker-text-color;
 572     font-family: $font-monospace, monospace;
 573     font-size: 12px;
 574     word-wrap: break-word;
 575     min-height: 20px;
 576   }
 577
 578   &__icon {
 579     font-size: 28px;
 580     margin-right: 10px;
 581     color: $dark-text-color;
 582   }
 583
 584   &__icon__overlay {
 585     position: absolute;
 586     top: 10px;
 587     right: 10px;
 588     width: 10px;
 589     height: 10px;
 590     border-radius: 50%;
 591
 592     &.positive {
 593       background: $success-green;
 594     }
 595
 596     &.negative {
 597       background: lighten($error-red, 12%);
 598     }
 599
 600     &.neutral {
 601       background: $ui-highlight-color;
 602     }
 603   }
 604
 605   a,
 606   .username,
 607   .target {
 608     color: $secondary-text-color;
 609     text-decoration: none;
 610     font-weight: 500;
 611   }
 612
 613   .diff-old {
 614     color: lighten($error-red, 12%);
 615   }
 616
 617   .diff-neutral {
 618     color: $secondary-text-color;
 619   }
 620
 621   .diff-new {
 622     color: $success-green;
 623   }
 624 }
 625
 626 a.name-tag,
 627 .name-tag,
 628 a.inline-name-tag,
 629 .inline-name-tag {
 630   text-decoration: none;
 631   color: $secondary-text-color;
 632
 633   .username {
 634     font-weight: 500;
 635   }
 636
 637   &.suspended {
 638     .username {
 639       text-decoration: line-through;
 640       color: lighten($error-red, 12%);
 641     }
 642
 643     .avatar {
 644       filter: grayscale(100%);
 645       opacity: 0.8;
 646     }
 647   }
 648 }
 649
 650 a.name-tag,
 651 .name-tag {
 652   display: flex;
 653   align-items: center;
 654
 655   .avatar {
 656     display: block;
 657     margin: 0;
 658     margin-right: 5px;
 659     border-radius: 50%;
 660   }
 661
 662   &.suspended {
 663     .avatar {
 664       filter: grayscale(100%);
 665       opacity: 0.8;
 666     }
 667   }
 668 }
 669
 670 .speech-bubble {
 671   margin-bottom: 20px;
 672   border-left: 4px solid $ui-highlight-color;
 673
 674   &.positive {
 675     border-left-color: $success-green;
 676   }
 677
 678   &.negative {
 679     border-left-color: lighten($error-red, 12%);
 680   }
 681
 682   &.warning {
 683     border-left-color: $gold-star;
 684   }
 685
 686   &__bubble {
 687     padding: 16px;
 688     padding-left: 14px;
 689     font-size: 15px;
 690     line-height: 20px;
 691     border-radius: 4px 4px 4px 0;
 692     position: relative;
 693     font-weight: 500;
 694
 695     a {
 696       color: $darker-text-color;
 697     }
 698   }
 699
 700   &__owner {
 701     padding: 8px;
 702     padding-left: 12px;
 703   }
 704
 705   time {
 706     color: $dark-text-color;
 707   }
 708 }
 709
 710 .report-card {
 711   background: $ui-base-color;
 712   border-radius: 4px;
 713   margin-bottom: 20px;
 714
 715   &__profile {
 716     display: flex;
 717     justify-content: space-between;
 718     align-items: center;
 719     padding: 15px;
 720
 721     .account {
 722       padding: 0;
 723       border: 0;
 724
 725       &__avatar-wrapper {
 726         margin-left: 0;
 727       }
 728     }
 729
 730     &__stats {
 731       flex: 0 0 auto;
 732       font-weight: 500;
 733       color: $darker-text-color;
 734       text-transform: uppercase;
 735       text-align: right;
 736
 737       a {
 738         color: inherit;
 739         text-decoration: none;
 740
 741         &:focus,
 742         &:hover,
 743         &:active {
 744           color: lighten($darker-text-color, 8%);
 745         }
 746       }
 747
 748       .red {
 749         color: $error-value-color;
 750       }
 751     }
 752   }
 753
 754   &__summary {
 755     &__item {
 756       display: flex;
 757       justify-content: flex-start;
 758       border-top: 1px solid darken($ui-base-color, 4%);
 759
 760       &:hover {
 761         background: lighten($ui-base-color, 2%);
 762       }
 763
 764       &__reported-by,
 765       &__assigned {
 766         padding: 15px;
 767         flex: 0 0 auto;
 768         box-sizing: border-box;
 769         width: 150px;
 770         color: $darker-text-color;
 771
 772         &,
 773         .username {
 774           white-space: nowrap;
 775           overflow: hidden;
 776           text-overflow: ellipsis;
 777         }
 778       }
 779
 780       &__content {
 781         flex: 1 1 auto;
 782         max-width: calc(100% - 300px);
 783
 784         &__icon {
 785           color: $dark-text-color;
 786           margin-right: 4px;
 787           font-weight: 500;
 788         }
 789       }
 790
 791       &__content a {
 792         display: block;
 793         box-sizing: border-box;
 794         width: 100%;
 795         padding: 15px;
 796         text-decoration: none;
 797         color: $darker-text-color;
 798       }
 799     }
 800   }
 801 }
 802
 803 .one-line {
 804   white-space: nowrap;
 805   overflow: hidden;
 806   text-overflow: ellipsis;
 807 }
 808
 809 .ellipsized-ip {
 810   display: inline-block;
 811   max-width: 120px;
 812   overflow: hidden;
 813   text-overflow: ellipsis;
 814   vertical-align: middle;
 815 }
 816
 817 .admin-account-bio {
 818   display: flex;
 819   flex-wrap: wrap;
 820   margin: 0 -5px;
 821   margin-top: 20px;
 822
 823   > div {
 824     box-sizing: border-box;
 825     padding: 0 5px;
 826     margin-bottom: 10px;
 827     flex: 1 0 50%;
 828   }
 829
 830   .account__header__fields,
 831   .account__header__content {
 832     background: lighten($ui-base-color, 8%);
 833     border-radius: 4px;
 834     height: 100%;
 835   }
 836
 837   .account__header__fields {
 838     margin: 0;
 839     border: 0;
 840
 841     a {
 842       color: lighten($ui-highlight-color, 8%);
 843     }
 844
 845     dl:first-child .verified {
 846       border-radius: 0 4px 0 0;
 847     }
 848
 849     .verified a {
 850       color: $valid-value-color;
 851     }
 852   }
 853
 854   .account__header__content {
 855     box-sizing: border-box;
 856     padding: 20px;
 857     color: $primary-text-color;
 858   }
 859 }