pleroma-fe/src/components/shadow_control/shadow_control.scss

.settings-modal .settings-modal-panel .shadow-control {
  display: flex;
  flex-wrap: wrap;
  justify-content: stretch;
  grid-gap: 0.25em;
  margin-bottom: 1em;

  .shadow-switcher {
    order: 1;
    flex: 1 0 6em;
    min-width: 6em;
    margin-right: 0.125em;
    display: flex;
    flex-direction: column;

    .shadow-list {
      flex: 1 0 auto;
    }

    .arrange-buttons {
      flex: 0 0 auto;
      display: grid;
      grid-auto-columns: 1fr;
      grid-auto-flow: column;
      grid-gap: 0.125em;
      margin-top: 0.25em;

      .button-default {
        margin: 0;
        padding: 0;
      }
    }
  }

  .shadow-tweak {
    order: 3;
    flex: 2 0 10em;
    min-width: 10em;
    margin-left: 0.125em;
    margin-right: 0.125em;

    /* hack */
    .input-boolean {
      flex: 1;
      display: flex;

      .label {
        flex: 1;
      }
    }

    .input-string {
      flex: 1 0 5em;
    }

    .id-control {
      align-items: stretch;

      .shadow-switcher,
      .btn {
        min-width: 1px;
        margin-right: 5px;
      }

      .btn {
        padding: 0 0.4em;
        margin: 0 0.1em;
      }
    }
  }

  .shadow-preview {
    order: 2;
    flex: 3 3 15em;
    min-width: 10em;
    display: grid;
    margin-left: 0.125em;
    align-self: start;
    grid-template-columns: 3em 1fr 3em;
    grid-template-rows: 2em 1fr 2em;
    grid-template-areas:
      ".       header  y-num  "
      ".       preview y-slide"
      "x-num   x-slide .      "
      "options options options";
    grid-gap: 0.5em;

    .header {
      grid-area: header;
      justify-self: center;
      align-self: baseline;
      line-height: 2;
    }

    .input-light-grid {
      grid-area: options;
      justify-self: end;
    }

    .input-number {
      min-width: 2em;
    }

    .x-shift-number {
      grid-area: x-num;
    }

    .x-shift-slider {
      grid-area: x-slide;
      height: auto;
      align-self: start;
      min-width: 10em;
    }

    .y-shift-number {
      grid-area: y-num;
    }

    .y-shift-slider {
      grid-area: y-slide;
      writing-mode: vertical-lr;
      justify-self: left;
      min-height: 10em;
    }

    .x-shift-slider,
    .y-shift-slider {
      padding: 0;
    }

    .preview-window {
      --__grid-color1: rgb(102 102 102);
      --__grid-color2: rgb(153 153 153);
      --__grid-color1-disabled: rgba(102 102 102 / 20%);
      --__grid-color2-disabled: rgba(153 153 153 / 20%);

      &.-light-grid {
        --__grid-color1: rgb(205 205 205);
        --__grid-color2: rgb(255 255 255);
        --__grid-color1-disabled: rgba(205 205 205 / 20%);
        --__grid-color2-disabled: rgba(255 255 255 / 20%);
      }

      grid-area: preview;
      aspect-ratio: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: 10em;
      min-height: 10em;
      background-color: var(--__grid-color2);
      background-image:
        linear-gradient(45deg, var(--__grid-color1) 25%, transparent 25%),
        linear-gradient(-45deg, var(--__grid-color1) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, var(--__grid-color1) 75%),
        linear-gradient(-45deg, transparent 75%, var(--__grid-color1) 75%);
      background-size: 20px 20px;
      background-position: 0 0, 0 10px, 10px -10px, -10px 0;
      border-radius: var(--roundness);

      &.disabled {
        background-color: var(--__grid-color2-disabled);
        background-image:
          linear-gradient(45deg, var(--__grid-color1-disabled) 25%, transparent 25%),
          linear-gradient(-45deg, var(--__grid-color1-disabled) 25%, transparent 25%),
          linear-gradient(45deg, transparent 75%, var(--__grid-color1-disabled) 75%),
          linear-gradient(-45deg, transparent 75%, var(--__grid-color1-disabled) 75%);
      }

      .preview-block {
        width: 33%;
        height: 33%;
        border-radius: var(--roundness);
        background: var(--background);
      }
    }
  }
}