logo

pleroma-fe

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

shadow_control.scss (2002B)

    

  1. .ShadowControl {
  2.   display: grid;
  3.   grid-template-columns: 10em 1fr 1fr;
  4.   grid-template-rows: 1fr;
  5.   grid-template-areas: "selector preview tweak";
  6.   grid-gap: 0.5em;
  7.   justify-content: stretch;
  9.   &.-compact {
  10.     grid-template-columns: 10em 1fr;
  11.     grid-template-rows: auto auto;
  12.     grid-template-areas:
  13.       "selector preview"
  14.       "tweak tweak";
  16.     &.-no-preview {
  17.       grid-template-columns: 1fr;
  18.       grid-template-rows: 10em 1fr;
  19.       grid-template-areas:
  20.         "selector"
  21.         "tweak";
  22.     }
  23.   }
  25.   .shadow-switcher {
  26.     grid-area: selector;
  27.     order: 1;
  28.     flex: 1 0 6em;
  29.     min-width: 6em;
  30.     margin-right: 0.125em;
  31.     display: flex;
  32.     flex-direction: column;
  34.     .shadow-list {
  35.       flex: 1 0 auto;
  36.     }
  37.   }
  39.   .shadow-tweak {
  40.     grid-area: tweak;
  41.     order: 3;
  42.     flex: 2 0 10em;
  43.     min-width: 10em;
  44.     margin-left: 0.125em;
  45.     margin-right: 0.125em;
  46.     display: grid;
  47.     grid-template-rows: auto 1fr;
  48.     grid-gap: 0.25em;
  50.     /* hack */
  51.     .input-boolean {
  52.       flex: 1;
  53.       display: flex;
  55.       .label {
  56.         flex: 1;
  57.       }
  58.     }
  60.     .input-string {
  61.       flex: 1 0 5em;
  62.     }
  64.     .shadow-expression {
  65.       width: 100%;
  66.       height: 100%;
  67.     }
  69.     .id-control {
  70.       align-items: stretch;
  72.       .shadow-switcher,
  73.       .btn {
  74.         min-width: 1px;
  75.         margin-right: 5px;
  76.       }
  78.       .btn {
  79.         padding: 0 0.4em;
  80.         margin: 0 0.1em;
  81.       }
  82.     }
  83.   }
  85.   &.-no-preview {
  86.     grid-template-columns: 10em 1fr;
  87.     grid-template-rows: 1fr;
  88.     grid-template-areas: "selector tweak";
  90.     .shadow-tweak {
  91.       order: 0;
  92.       flex: 2 0 8em;
  93.       max-width: 100%;
  94.     }
  96.     .input-range {
  97.       min-width: 5em;
  98.     }
  99.   }
  101.   .inset-alert {
  102.     padding: 0.25em 0.5em;
  103.   }
  105.   &.disabled {
  106.     .inset-alert {
  107.       opacity: 0.2;
  108.     }
  109.   }
  111.   .shadow-preview {
  112.     grid-area: preview;
  113.     min-width: 25em;
  114.     margin-left: 0.125em;
  115.     align-self: start;
  116.     justify-self: center;
  117.   }
  118. }
  120. .inset-tooltip {
  121.   max-width: 30em;
  122. }