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%;

  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.     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.     }

  117. 

  118.     h6 {

  119.       font-size: 16px;

  120.       color: $ui-secondary-color;

  121.       line-height: 28px;

  122.       font-weight: 400;

  123.     }

  124. 

  125.     & > p {

  126.       font-size: 14px;

  127.       line-height: 18px;

  128.       color: $ui-secondary-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.       margin: 20px 0;

  145.       border: 0;

  146.       background: transparent;

  147.       border-bottom: 1px solid $ui-base-color;

  148. 

  149.       &.section-break {

  150.         margin: 30px 0;

  151.         border-bottom: 2px solid $ui-base-lighter-color;

  152.       }

  153.     }

  154. 

  155.     .muted-hint {

  156.       color: $ui-primary-color;

  157. 

  158.       a {

  159.         color: $ui-highlight-color;

  160.       }

  161.     }

  162. 

  163.     .positive-hint {

  164.       color: $valid-value-color;

  165.       font-weight: 500;

  166.     }

  167.   }

  168. 

  169.   .simple_form {

  170.     max-width: 400px;

  171. 

  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.     }

  181. 

  182.     .form_two_factor_confirmation_code,

  183.     .form_delete_confirmation_password {

  184.       max-width: 400px;

  185.     }

  186. 

  187.     .actions {

  188.       max-width: 400px;

  189.     }

  190.   }

  191. 

  192.   @media screen and (max-width: 600px) {

  193.     display: block;

  194.     overflow-y: auto;

  195.     -webkit-overflow-scrolling: touch;

  196. 

  197.     .sidebar-wrapper,

  198.     .content-wrapper {

  199.       flex: 0 0 auto;

  200.       height: auto;

  201.       overflow: initial;

  202.     }

  203. 

  204.     .sidebar {

  205.       width: 100%;

  206.       padding: 10px 0;

  207.       height: auto;

  208. 

  209.       .logo {

  210.         margin: 20px auto;

  211.       }

  212.     }

  213. 

  214.     .content {

  215.       padding-top: 20px;

  216.     }

  217.   }

  218. }

  219. 

  220. .filters {

  221.   display: flex;

  222.   flex-wrap: wrap;

  223. 

  224.   .filter-subset {

  225.     flex: 0 0 auto;

  226.     margin: 0 40px 10px 0;

  227. 

  228.     &:last-child {

  229.       margin-bottom: 20px;

  230.     }

  231. 

  232.     ul {

  233.       margin-top: 5px;

  234.       list-style: none;

  235. 

  236.       li {

  237.         display: inline-block;

  238.         margin-right: 5px;

  239.       }

  240.     }

  241. 

  242.     strong {

  243.       font-weight: 500;

  244.       text-transform: uppercase;

  245.       font-size: 12px;

  246. 

  247.       @each $lang in $cjk-langs {

  248.         &:lang(#{$lang}) {

  249.           font-weight: 700;

  250.         }

  251.       }

  252.     }

  253. 

  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;

  262. 

  263.       &:hover {

  264.         color: $primary-text-color;

  265.         border-bottom: 2px solid lighten($ui-base-color, 5%);

  266.       }

  267. 

  268.       &.selected {

  269.         color: $ui-highlight-color;

  270.         border-bottom: 2px solid $ui-highlight-color;

  271.       }

  272.     }

  273.   }

  274. }

  275. 

  276. .report-accounts {

  277.   display: flex;

  278.   flex-wrap: wrap;

  279.   margin-bottom: 20px;

  280. }

  281. 

  282. .report-accounts__item {

  283.   display: flex;

  284.   flex: 250px;

  285.   flex-direction: column;

  286.   margin: 0 5px;

  287. 

  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;

  295. 

  296.     @each $lang in $cjk-langs {

  297.       &:lang(#{$lang}) {

  298.         font-weight: 700;

  299.       }

  300.     }

  301.   }

  302. 

  303.   .account-card {

  304.     flex: 1 1 auto;

  305.   }

  306. }

  307. 

  308. .report-status,

  309. .account-status {

  310.   display: flex;

  311.   margin-bottom: 10px;

  312. 

  313.   .activity-stream {

  314.     flex: 2 0 0;

  315.     margin-right: 20px;

  316.     max-width: calc(100% - 60px);

  317. 

  318.     .entry {

  319.       border-radius: 4px;

  320.     }

  321.   }

  322. }

  323. 

  324. .report-status__actions,

  325. .account-status__actions {

  326.   flex: 0 0 auto;

  327.   display: flex;

  328.   flex-direction: column;

  329. 

  330.   .icon-button {

  331.     font-size: 24px;

  332.     width: 24px;

  333.     text-align: center;

  334.     margin-bottom: 10px;

  335.   }

  336. }

  337. 

  338. .report-note__comment {

  339.   margin-bottom: 20px;

  340. }

  341. 

  342. .report-note__form {

  343.   margin-bottom: 20px;

  344. 

  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.   }

  358. 

  359.   .report-note__buttons {

  360.     text-align: right;

  361.   }

  362. 

  363.   .report-note__button {

  364.     margin: 0 0 5px 5px;

  365.   }

  366. }

  367. 

  368. .batch-form-box {

  369.   display: flex;

  370.   flex-wrap: wrap;

  371.   margin-bottom: 5px;

  372. 

  373.   #form_status_batch_action {

  374.     margin: 0 5px 5px 0;

  375.     font-size: 14px;

  376.   }

  377. 

  378.   input.button {

  379.     margin: 0 5px 5px 0;

  380.   }

  381. 

  382.   .media-spoiler-toggle-buttons {

  383.     margin-left: auto;

  384. 

  385.     .button {

  386.       overflow: visible;

  387.       margin: 0 0 5px 5px;

  388.       float: right;

  389.     }

  390.   }

  391. }

  392. 

  393. .batch-checkbox,

  394. .batch-checkbox-all {

  395.   display: flex;

  396.   align-items: center;

  397.   margin-right: 5px;

  398. }

  399. 

  400. .back-link {

  401.   margin-bottom: 10px;

  402.   font-size: 14px;

  403. 

  404.   a {

  405.     color: $classic-highlight-color;

  406.     text-decoration: none;

  407. 

  408.     &:hover {

  409.       text-decoration: underline;

  410.     }

  411.   }

  412. }

  413. 

  414. .spacer {

  415.   flex: 1 1 auto;

  416. }

  417. 

  418. .log-entry {

  419.   margin-bottom: 8px;

  420.   line-height: 20px;

  421. 

  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.   }

  433. 

  434.   &__avatar {

  435.     margin-right: 10px;

  436. 

  437.     .avatar {

  438.       display: block;

  439.       margin: 0;

  440.       border-radius: 50%;

  441.       width: 40px;

  442.       height: 40px;

  443.     }

  444.   }

  445. 

  446.   &__content {

  447.     max-width: calc(100% - 90px);

  448.   }

  449. 

  450.   &__title {

  451.     word-wrap: break-word;

  452.   }

  453. 

  454.   &__timestamp {

  455.     color: lighten($ui-base-color, 34%);

  456.   }

  457. 

  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.   }

  468. 

  469.   &__icon {

  470.     font-size: 28px;

  471.     margin-right: 10px;

  472.     color: lighten($ui-base-color, 34%);

  473.   }

  474. 

  475.   &__icon__overlay {

  476.     position: absolute;

  477.     top: 10px;

  478.     right: 10px;

  479.     width: 10px;

  480.     height: 10px;

  481.     border-radius: 50%;

  482. 

  483.     &.positive {

  484.       background: $success-green;

  485.     }

  486. 

  487.     &.negative {

  488.       background: $error-red;

  489.     }

  490. 

  491.     &.neutral {

  492.       background: $ui-highlight-color;

  493.     }

  494.   }

  495. 

  496.   a,

  497.   .username,

  498.   .target {

  499.     color: $ui-secondary-color;

  500.     text-decoration: none;

  501.     font-weight: 500;

  502.   }

  503. 

  504.   .diff-old {

  505.     color: $error-red;

  506.   }

  507. 

  508.   .diff-neutral {

  509.     color: $ui-secondary-color;

  510.   }

  511. 

  512.   .diff-new {

  513.     color: $success-green;

  514.   }

  515. }

  516. 

  517. .name-tag {

  518.   display: flex;

  519.   align-items: center;

  520. 

  521.   .avatar {

  522.     display: block;

  523.     margin: 0;

  524.     margin-right: 5px;

  525.     border-radius: 50%;

  526.   }

  527. 

  528.   .username {

  529.     font-weight: 500;

  530.   }

  531. }