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

.ComponentPreview {
  display: grid;
  grid-template-columns: 1em 1fr 1fr 1em;
  grid-template-rows: 2em 1fr 1fr 1fr 1em 2em max-content;
  grid-template-areas:
    "header     header     header     header "
    "preview    preview    preview    y-slide"
    "preview    preview    preview    y-slide"
    "preview    preview    preview    y-slide"
    "x-slide    x-slide    x-slide    .      "
    "x-num      x-num      y-num      y-num  "
    "assists    assists    assists    assists";
  grid-gap: 0.5em;

  &:not(.-shadow-controls) {
    grid-template-areas:
      "header     header     header     header "
      "preview    preview    preview    y-slide"
      "preview    preview    preview    y-slide"
      "preview    preview    preview    y-slide"
      "assists    assists    assists    assists";
    grid-template-rows: 2em 1fr 1fr 1fr max-content;
  }

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

  .invalid-container {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center center;
    background-color: rgb(100 0 0 / 50%);

    .alert {
      padding: 0.5em 1em;
    }
  }

  .assists {
    grid-area: assists;
    display: grid;
    grid-auto-flow: row;
    grid-auto-rows: 2em;
    grid-gap: 0.5em;
  }

  .input-light-grid {
    justify-self: center;
  }

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

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

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

  .x-shift-number,
  .y-shift-number {
    input {
      max-width: 4em;
    }
  }

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

  .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: rgb(102 102 102 / 20%);
    --__grid-color2-disabled: rgb(153 153 153 / 20%);

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

    position: relative;
    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 {
      background: var(--background, var(--bg));
      display: flex;
      justify-content: center;
      align-items: center;
      min-width: 33%;
      min-height: 33%;
      max-width: 80%;
      max-height: 80%;
      border-width: 0;
      border-style: solid;
      border-color: var(--border);
      border-radius: var(--roundness);
      box-shadow: var(--shadow);
    }
  }
}