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: rgba($primary-text-color, 0.7);
  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: $ui-secondary-color;
  94       font-size: 24px;
  95       line-height: 28px;
  96       font-weight: 400;
  97       margin-bottom: 40px;
  98     }
  99
 100     h3 {
 101       color: $ui-secondary-color;
 102       font-size: 20px;
 103       line-height: 28px;
 104       font-weight: 400;
 105       margin-bottom: 30px;
 106     }
 107
 108     h6 {
 109       font-size: 16px;
 110       color: $ui-secondary-color;
 111       line-height: 28px;
 112       font-weight: 400;
 113     }
 114
 115     & > p {
 116       font-size: 14px;
 117       line-height: 18px;
 118       color: $ui-secondary-color;
 119       margin-bottom: 20px;
 120
 121       strong {
 122         color: $primary-text-color;
 123         font-weight: 500;
 124       }
 125     }
 126
 127     hr {
 128       margin: 20px 0;
 129       border: 0;
 130       background: transparent;
 131       border-bottom: 1px solid $ui-base-color;
 132     }
 133
 134     .muted-hint {
 135       color: $ui-primary-color;
 136
 137       a {
 138         color: $ui-highlight-color;
 139       }
 140     }
 141
 142     .positive-hint {
 143       color: $valid-value-color;
 144       font-weight: 500;
 145     }
 146   }
 147
 148   .simple_form {
 149     max-width: 400px;
 150
 151     &.edit_user,
 152     &.new_form_admin_settings,
 153     &.new_form_two_factor_confirmation,
 154     &.new_form_delete_confirmation,
 155     &.new_import,
 156     &.new_domain_block,
 157     &.edit_domain_block {
 158       max-width: none;
 159     }
 160
 161     .form_two_factor_confirmation_code,
 162     .form_delete_confirmation_password {
 163       max-width: 400px;
 164     }
 165
 166     .actions {
 167       max-width: 400px;
 168     }
 169   }
 170
 171   @media screen and (max-width: 600px) {
 172     display: block;
 173     overflow-y: auto;
 174     -webkit-overflow-scrolling: touch;
 175
 176     .sidebar-wrapper,
 177     .content-wrapper {
 178       flex: 0 0 auto;
 179       height: auto;
 180       overflow: initial;
 181     }
 182
 183     .sidebar {
 184       width: 100%;
 185       padding: 10px 0;
 186       height: auto;
 187
 188       .logo {
 189         margin: 20px auto;
 190       }
 191     }
 192
 193     .content {
 194       padding-top: 20px;
 195     }
 196   }
 197 }
 198
 199 .filters {
 200   display: flex;
 201   flex-wrap: wrap;
 202
 203   .filter-subset {
 204     flex: 0 0 auto;
 205     margin: 0 40px 10px 0;
 206
 207     &:last-child {
 208       margin-bottom: 20px;
 209     }
 210
 211     ul {
 212       margin-top: 5px;
 213       list-style: none;
 214
 215       li {
 216         display: inline-block;
 217         margin-right: 5px;
 218       }
 219     }
 220
 221     strong {
 222       font-weight: 500;
 223       text-transform: uppercase;
 224       font-size: 12px;
 225     }
 226
 227     a {
 228       display: inline-block;
 229       color: rgba($primary-text-color, 0.7);
 230       text-decoration: none;
 231       text-transform: uppercase;
 232       font-size: 12px;
 233       font-weight: 500;
 234       border-bottom: 2px solid $ui-base-color;
 235
 236       &:hover {
 237         color: $primary-text-color;
 238         border-bottom: 2px solid lighten($ui-base-color, 5%);
 239       }
 240
 241       &.selected {
 242         color: $ui-highlight-color;
 243         border-bottom: 2px solid $ui-highlight-color;
 244       }
 245     }
 246   }
 247 }
 248
 249 .report-accounts {
 250   display: flex;
 251   flex-wrap: wrap;
 252   margin-bottom: 20px;
 253 }
 254
 255 .report-accounts__item {
 256   display: flex;
 257   flex: 250px;
 258   flex-direction: column;
 259   margin: 0 5px;
 260
 261   & > strong {
 262     display: block;
 263     margin: 0 0 10px -5px;
 264     font-weight: 500;
 265     font-size: 14px;
 266     line-height: 18px;
 267     color: $ui-secondary-color;
 268   }
 269
 270   .account-card {
 271     flex: 1 1 auto;
 272   }
 273 }
 274
 275 .report-status,
 276 .account-status {
 277   display: flex;
 278   margin-bottom: 10px;
 279
 280   .activity-stream {
 281     flex: 2 0 0;
 282     margin-right: 20px;
 283     max-width: calc(100% - 60px);
 284
 285     .entry {
 286       border-radius: 4px;
 287     }
 288   }
 289 }
 290
 291 .report-status__actions,
 292 .account-status__actions {
 293   flex: 0 0 auto;
 294   display: flex;
 295   flex-direction: column;
 296
 297   .icon-button {
 298     font-size: 24px;
 299     width: 24px;
 300     text-align: center;
 301     margin-bottom: 10px;
 302   }
 303 }
 304
 305 .batch-form-box {
 306   display: flex;
 307   flex-wrap: wrap;
 308   margin-bottom: 5px;
 309
 310   #form_status_batch_action {
 311     margin: 0 5px 5px 0;
 312     font-size: 14px;
 313   }
 314
 315   input.button {
 316     margin: 0 5px 5px 0;
 317   }
 318
 319   .media-spoiler-toggle-buttons {
 320     margin-left: auto;
 321
 322     .button {
 323       overflow: visible;
 324       margin: 0 0 5px 5px;
 325       float: right;
 326     }
 327   }
 328 }
 329
 330 .batch-checkbox,
 331 .batch-checkbox-all {
 332   display: flex;
 333   align-items: center;
 334   margin-right: 5px;
 335 }
 336
 337 .back-link {
 338   margin-bottom: 10px;
 339   font-size: 14px;
 340
 341   a {
 342     color: $classic-highlight-color;
 343     text-decoration: none;
 344
 345     &:hover {
 346       text-decoration: underline;
 347     }
 348   }
 349 }
 350
 351 .spacer {
 352   flex: 1 1 auto;
 353 }
 354
 355 .log-entry {
 356   margin-bottom: 8px;
 357   line-height: 20px;
 358
 359   &__header {
 360     display: flex;
 361     justify-content: flex-start;
 362     align-items: center;
 363     padding: 10px;
 364     background: $ui-base-color;
 365     color: $ui-primary-color;
 366     border-radius: 4px 4px 0 0;
 367     font-size: 14px;
 368     position: relative;
 369   }
 370
 371   &__avatar {
 372     margin-right: 10px;
 373
 374     .avatar {
 375       display: block;
 376       margin: 0;
 377       border-radius: 50%;
 378       width: 40px;
 379       height: 40px;
 380     }
 381   }
 382
 383   &__title {
 384     overflow: hidden;
 385     text-overflow: ellipsis;
 386     white-space: nowrap;
 387   }
 388
 389   &__timestamp {
 390     color: lighten($ui-base-color, 34%);
 391   }
 392
 393   &__extras {
 394     background: lighten($ui-base-color, 6%);
 395     border-radius: 0 0 4px 4px;
 396     padding: 10px;
 397     color: $ui-primary-color;
 398     font-family: 'mastodon-font-monospace', monospace;
 399     font-size: 12px;
 400     white-space: nowrap;
 401     min-height: 20px;
 402   }
 403
 404   &__icon {
 405     font-size: 28px;
 406     margin-right: 10px;
 407     color: lighten($ui-base-color, 34%);
 408   }
 409
 410   &__icon__overlay {
 411     position: absolute;
 412     top: 10px;
 413     right: 10px;
 414     width: 10px;
 415     height: 10px;
 416     border-radius: 50%;
 417
 418     &.positive {
 419       background: $success-green;
 420     }
 421
 422     &.negative {
 423       background: $error-red;
 424     }
 425
 426     &.neutral {
 427       background: $ui-highlight-color;
 428     }
 429   }
 430
 431   a,
 432   .username,
 433   .target {
 434     color: $ui-secondary-color;
 435     text-decoration: none;
 436     font-weight: 500;
 437   }
 438
 439   .diff-old {
 440     color: $error-red;
 441   }
 442
 443   .diff-neutral {
 444     color: $ui-secondary-color;
 445   }
 446
 447   .diff-new {
 448     color: $success-green;
 449   }
 450 }