logo

mastofe

My custom branche(s) on git.pleroma.social/pleroma/mastofe git clone https://hacktivis.me/git/mastofe.git

admin.scss (8904B)

    

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