app/javascript/styles/mastodon/admin.scss

   1 .admin-wrapper {
   2   display: flex;
   3   justify-content: center;
   4   height: 100%;
   5
   6   .sidebar-wrapper {
   7     flex: 1;
   8     height: 100%;
   9     background: $ui-base-color;
  10     display: flex;
  11     justify-content: flex-end;
  12   }
  13
  14   .sidebar {
  15     width: 240px;
  16     height: 100%;
  17     padding: 0;
  18     overflow-y: auto;
  19
  20     .logo {
  21       display: block;
  22       margin: 40px auto;
  23       width: 100px;
  24       height: 100px;
  25     }
  26
  27     ul {
  28       list-style: none;
  29       border-radius: 4px 0 0 4px;
  30       overflow: hidden;
  31       margin-bottom: 20px;
  32
  33       a {
  34         display: block;
  35         padding: 15px;
  36         color: $darker-text-color;
  37         text-decoration: none;
  38         transition: all 200ms linear;
  39         border-radius: 4px 0 0 4px;
  40
  41         i.fa {
  42           margin-right: 5px;
  43         }
  44
  45         &:hover {
  46           color: $primary-text-color;
  47           background-color: darken($ui-base-color, 5%);
  48           transition: all 100ms linear;
  49         }
  50
  51         &.selected {
  52           background: darken($ui-base-color, 2%);
  53           border-radius: 4px 0 0;
  54         }
  55       }
  56
  57       ul {
  58         background: darken($ui-base-color, 4%);
  59         border-radius: 0 0 0 4px;
  60         margin: 0;
  61
  62         a {
  63           border: 0;
  64           padding: 15px 35px;
  65
  66           &.selected {
  67             color: $primary-text-color;
  68             background-color: $ui-highlight-color;
  69             border-bottom: 0;
  70             border-radius: 0;
  71
  72             &:hover {
  73               background-color: lighten($ui-highlight-color, 5%);
  74             }
  75           }
  76         }
  77       }
  78     }
  79   }
  80
  81   .content-wrapper {
  82     flex: 2;
  83     overflow: auto;
  84   }
  85
  86   .content {
  87     max-width: 700px;
  88     padding: 20px 15px;
  89     padding-top: 60px;
  90     padding-left: 25px;
  91
  92     h2 {
  93       color: $primary-text-color;
  94       font-size: 24px;
  95       line-height: 28px;
  96       font-weight: 400;
  97       margin-bottom: 40px;
  98     }
  99
 100     h3 {
 101       color: $primary-text-color;
 102       font-size: 20px;
 103       line-height: 28px;
 104       font-weight: 400;
 105       margin-bottom: 30px;
 106     }
 107
 108     h4 {
 109       text-transform: uppercase;
 110       font-size: 13px;
 111       font-weight: 500;
 112       color: $primary-text-color;
 113       padding-bottom: 8px;
 114       margin-bottom: 8px;
 115       border-bottom: 1px solid lighten($ui-base-color, 8%);
 116     }
 117
 118     h6 {
 119       font-size: 16px;
 120       color: $primary-text-color;
 121       line-height: 28px;
 122       font-weight: 400;
 123     }
 124
 125     & > p {
 126       font-size: 14px;
 127       line-height: 18px;
 128       color: $darker-text-color;
 129       margin-bottom: 20px;
 130
 131       strong {
 132         color: $primary-text-color;
 133         font-weight: 500;
 134
 135         @each $lang in $cjk-langs {
 136           &:lang(#{$lang}) {
 137             font-weight: 700;
 138           }
 139         }
 140       }
 141     }
 142
 143     hr {
 144       width: 100%;
 145       height: 0;
 146       border: 0;
 147       border-bottom: 1px solid rgba($ui-base-lighter-color, .6);
 148       margin: 20px 0;
 149
 150       &.spacer {
 151         height: 1px;
 152         border: 0;
 153       }
 154     }
 155
 156     .muted-hint {
 157       color: $darker-text-color;
 158
 159       a {
 160         color: $highlight-text-color;
 161       }
 162     }
 163
 164     .positive-hint {
 165       color: $valid-value-color;
 166       font-weight: 500;
 167     }
 168   }
 169
 170   .simple_form {
 171     max-width: 400px;
 172
 173     &.edit_user,
 174     &.new_form_admin_settings,
 175     &.new_form_two_factor_confirmation,
 176     &.new_form_delete_confirmation,
 177     &.new_import,
 178     &.new_domain_block,
 179     &.edit_domain_block {
 180       max-width: none;
 181     }
 182
 183     .form_two_factor_confirmation_code,
 184     .form_delete_confirmation_password {
 185       max-width: 400px;
 186     }
 187
 188     .actions {
 189       max-width: 400px;
 190     }
 191   }
 192
 193   @media screen and (max-width: 600px) {
 194     display: block;
 195     overflow-y: auto;
 196     -webkit-overflow-scrolling: touch;
 197
 198     .sidebar-wrapper,
 199     .content-wrapper {
 200       flex: 0 0 auto;
 201       height: auto;
 202       overflow: initial;
 203     }
 204
 205     .sidebar {
 206       width: 100%;
 207       padding: 10px 0;
 208       height: auto;
 209
 210       .logo {
 211         margin: 20px auto;
 212       }
 213     }
 214
 215     .content {
 216       padding-top: 20px;
 217     }
 218   }
 219 }
 220
 221 .filters {
 222   display: flex;
 223   flex-wrap: wrap;
 224
 225   .filter-subset {
 226     flex: 0 0 auto;
 227     margin: 0 40px 10px 0;
 228
 229     &:last-child {
 230       margin-bottom: 20px;
 231     }
 232
 233     ul {
 234       margin-top: 5px;
 235       list-style: none;
 236
 237       li {
 238         display: inline-block;
 239         margin-right: 5px;
 240       }
 241     }
 242
 243     strong {
 244       font-weight: 500;
 245       text-transform: uppercase;
 246       font-size: 12px;
 247
 248       @each $lang in $cjk-langs {
 249         &:lang(#{$lang}) {
 250           font-weight: 700;
 251         }
 252       }
 253     }
 254
 255     a {
 256       display: inline-block;
 257       color: $darker-text-color;
 258       text-decoration: none;
 259       text-transform: uppercase;
 260       font-size: 12px;
 261       font-weight: 500;
 262       border-bottom: 2px solid $ui-base-color;
 263
 264       &:hover {
 265         color: $primary-text-color;
 266         border-bottom: 2px solid lighten($ui-base-color, 5%);
 267       }
 268
 269       &.selected {
 270         color: $highlight-text-color;
 271         border-bottom: 2px solid $ui-highlight-color;
 272       }
 273     }
 274   }
 275 }
 276
 277 .report-accounts {
 278   display: flex;
 279   flex-wrap: wrap;
 280   margin-bottom: 20px;
 281 }
 282
 283 .report-accounts__item {
 284   display: flex;
 285   flex: 250px;
 286   flex-direction: column;
 287   margin: 0 5px;
 288
 289   & > strong {
 290     display: block;
 291     margin: 0 0 10px -5px;
 292     font-weight: 500;
 293     font-size: 14px;
 294     line-height: 18px;
 295     color: $primary-text-color;
 296
 297     @each $lang in $cjk-langs {
 298       &:lang(#{$lang}) {
 299         font-weight: 700;
 300       }
 301     }
 302   }
 303
 304   .account-card {
 305     flex: 1 1 auto;
 306   }
 307 }
 308
 309 .report-status,
 310 .account-status {
 311   display: flex;
 312   margin-bottom: 10px;
 313
 314   .activity-stream {
 315     flex: 2 0 0;
 316     margin-right: 20px;
 317     max-width: calc(100% - 60px);
 318
 319     .entry {
 320       border-radius: 4px;
 321     }
 322   }
 323 }
 324
 325 .report-status__actions,
 326 .account-status__actions {
 327   flex: 0 0 auto;
 328   display: flex;
 329   flex-direction: column;
 330
 331   .icon-button {
 332     font-size: 24px;
 333     width: 24px;
 334     text-align: center;
 335     margin-bottom: 10px;
 336   }
 337 }
 338
 339 .simple_form.new_report_note {
 340   max-width: 100%;
 341 }
 342
 343 .batch-form-box {
 344   display: flex;
 345   flex-wrap: wrap;
 346   margin-bottom: 5px;
 347
 348   #form_status_batch_action {
 349     margin: 0 5px 5px 0;
 350     font-size: 14px;
 351   }
 352
 353   input.button {
 354     margin: 0 5px 5px 0;
 355   }
 356
 357   .media-spoiler-toggle-buttons {
 358     margin-left: auto;
 359
 360     .button {
 361       overflow: visible;
 362       margin: 0 0 5px 5px;
 363       float: right;
 364     }
 365   }
 366 }
 367
 368 .back-link {
 369   margin-bottom: 10px;
 370   font-size: 14px;
 371
 372   a {
 373     color: $highlight-text-color;
 374     text-decoration: none;
 375
 376     &:hover {
 377       text-decoration: underline;
 378     }
 379   }
 380 }
 381
 382 .spacer {
 383   flex: 1 1 auto;
 384 }
 385
 386 .log-entry {
 387   margin-bottom: 20px;
 388   line-height: 20px;
 389
 390   &__header {
 391     display: flex;
 392     justify-content: flex-start;
 393     align-items: center;
 394     padding: 10px;
 395     background: $ui-base-color;
 396     color: $darker-text-color;
 397     border-radius: 4px 4px 0 0;
 398     font-size: 14px;
 399     position: relative;
 400   }
 401
 402   &__avatar {
 403     margin-right: 10px;
 404
 405     .avatar {
 406       display: block;
 407       margin: 0;
 408       border-radius: 50%;
 409       width: 40px;
 410       height: 40px;
 411     }
 412   }
 413
 414   &__content {
 415     max-width: calc(100% - 90px);
 416   }
 417
 418   &__title {
 419     word-wrap: break-word;
 420   }
 421
 422   &__timestamp {
 423     color: $darker-text-color;
 424   }
 425
 426   &__extras {
 427     background: lighten($ui-base-color, 6%);
 428     border-radius: 0 0 4px 4px;
 429     padding: 10px;
 430     color: $darker-text-color;
 431     font-family: 'mastodon-font-monospace', monospace;
 432     font-size: 12px;
 433     word-wrap: break-word;
 434     min-height: 20px;
 435   }
 436
 437   &__icon {
 438     font-size: 28px;
 439     margin-right: 10px;
 440     color: $darker-text-color;
 441   }
 442
 443   &__icon__overlay {
 444     position: absolute;
 445     top: 10px;
 446     right: 10px;
 447     width: 10px;
 448     height: 10px;
 449     border-radius: 50%;
 450
 451     &.positive {
 452       background: $success-green;
 453     }
 454
 455     &.negative {
 456       background: lighten($error-red, 12%);
 457     }
 458
 459     &.neutral {
 460       background: $ui-highlight-color;
 461     }
 462   }
 463
 464   a,
 465   .username,
 466   .target {
 467     color: $primary-text-color;
 468     text-decoration: none;
 469     font-weight: 500;
 470   }
 471
 472   .diff-old {
 473     color: lighten($error-red, 12%);
 474   }
 475
 476   .diff-neutral {
 477     color: $darker-text-color;
 478   }
 479
 480   .diff-new {
 481     color: $success-green;
 482   }
 483 }
 484
 485 a.name-tag,
 486 .name-tag {
 487   display: flex;
 488   align-items: center;
 489   text-decoration: none;
 490   color: $ui-secondary-color;
 491
 492   .avatar {
 493     display: block;
 494     margin: 0;
 495     margin-right: 5px;
 496     border-radius: 50%;
 497   }
 498
 499   .username {
 500     font-weight: 500;
 501   }
 502
 503   &.suspended {
 504     .username {
 505       text-decoration: line-through;
 506       color: lighten($error-red, 12%);
 507     }
 508
 509     .avatar {
 510       filter: grayscale(100%);
 511       opacity: 0.8;
 512     }
 513   }
 514 }
 515
 516 .speech-bubble {
 517   margin-bottom: 20px;
 518   border-left: 4px solid $ui-highlight-color;
 519
 520   &.positive {
 521     border-left-color: $success-green;
 522   }
 523
 524   &.negative {
 525     border-left-color: lighten($error-red, 12%);
 526   }
 527
 528   &__bubble {
 529     padding: 16px;
 530     padding-left: 14px;
 531     font-size: 15px;
 532     line-height: 20px;
 533     border-radius: 4px 4px 4px 0;
 534     position: relative;
 535     font-weight: 500;
 536
 537     a {
 538       color: $ui-primary-color;
 539     }
 540   }
 541
 542   &__owner {
 543     padding: 8px;
 544     padding-left: 12px;
 545   }
 546
 547   time {
 548     color: $darker-text-color;
 549   }
 550 }