logo

pleroma-fe

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

appearance_tab.scss (2517B)

    

  1. .appearance-tab {
  2.   .palette,
  3.   .theme-notice {
  4.     padding: 0.5em;
  5.     margin: 1em;
  6.   }
  8.   .setting-item {
  9.     padding-bottom: 0;
  11.     &.heading {
  12.       display: grid;
  13.       align-items: baseline;
  14.       grid-template-columns: 1fr auto auto auto;
  15.       grid-gap: 0.5em;
  17.       h2 {
  18.         flex: 1 0 auto;
  19.       }
  20.     }
  21.   }
  23.   h4 {
  24.     margin: 0.5em 0;
  25.   }
  27.   .palettes-container {
  28.     height: 15em;
  29.     overflow-y: auto;
  30.     overflow-x: hidden;
  31.     scrollbar-gutter: stable;
  32.     border-radius: var(--roundness);
  33.     border: 1px solid var(--border);
  34.     margin: -0.5em;
  35.   }
  37.   .palettes {
  38.     display: grid;
  39.     grid-template-columns: 1fr 1fr;
  40.     grid-gap: 0.5em;
  41.     padding: 0.5em;
  42.     width: 100%;
  44.     h4 {
  45.       margin: 0;
  46.       grid-column: 1 / span 2;
  47.     }
  48.   }
  50.   .palette-entry {
  51.     display: grid;
  52.     grid-template-columns: 1fr auto;
  53.     align-items: center;
  54.     justify-content: space-between;
  55.     padding: 0 0.5em;
  56.     height: max-content;
  58.     .palette-label {
  59.       height: auto;
  61.       label {
  62.         text-align: center;
  63.       }
  64.     }
  66.     .palette-square {
  67.       flex: 0 0 auto;
  68.       display: inline-block;
  69.       min-width: 1em;
  70.       min-height: 1em;
  71.     }
  72.   }
  74.   .column-settings {
  75.     display: flex;
  76.     justify-content: space-evenly;
  77.     flex-wrap: wrap;
  78.   }
  80.   .column-settings .size-label {
  81.     display: block;
  82.     margin-bottom: 0.5em;
  83.     margin-top: 0.5em;
  84.   }
  86.   .modal-view.-mobile & {
  87.     .palettes {
  88.       grid-template-columns: 1fr;
  89.     }
  91.     .palette-entry {
  92.       grid-column: 1;
  93.       justify-content: center;
  94.     }
  96.     .palette-label {
  97.       line-height: 1.5em;
  98.       margin-top: 0.5em;
  99.     }
  100.   }
  102.   .palette-preview {
  103.     display: grid;
  104.     grid-template-columns: 1fr 1fr 1fr 1fr;
  105.     grid-template-rows: 1em 1em;
  106.     margin: 0.5em 0;
  107.   }
  109.   .theme-list {
  110.     list-style: none;
  111.     display: flex;
  112.     flex-wrap: wrap;
  113.     margin: -0.5em 0;
  114.     height: 25em;
  115.     overflow-x: hidden;
  116.     overflow-y: auto;
  117.     scrollbar-gutter: stable;
  118.     border-radius: var(--roundness);
  119.     border: 1px solid var(--border);
  120.     padding: 0;
  121.     margin-bottom: 1em;
  123.     .theme-preview {
  124.       font-size: 1rem; // fix for firefox
  125.       width: 19rem;
  126.       display: flex;
  127.       flex-direction: column;
  128.       align-items: center;
  129.       margin: 0.5em;
  131.       &.placeholder {
  132.         opacity: 0.2;
  133.       }
  135.       .theme-preview-container {
  136.         pointer-events: none;
  137.         zoom: 0.5;
  138.         border: none;
  139.         border-radius: var(--roundness);
  140.         text-align: left;
  141.       }
  142.     }
  143.   }
  144. }