pleroma-fe

style_tab.scss (4858B)

.StyleTab {
  .style-control {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    margin-bottom: 0.5em;
    .label {
      margin-right: 0.5em;
      flex: 1 1 0;
      line-height: 2;
      min-height: 2em;
    }
    &.suboption {
      margin-left: 1em;
    }
    .color-input {
      flex: 0 0 0;
    }
    input,
    select {
      min-width: 3em;
      margin: 0;
      flex: 0;
      &[type="number"] {
        min-width: 9em;
        &.-small {
          min-width: 5em;
        }
      }
      &[type="range"] {
        flex: 1;
        min-width: 9em;
        align-self: center;
        margin: 0 0.25em;
      }
      &[type="checkbox"] + i {
        height: 1.1em;
        align-self: center;
      }
    }
  }
  .meta-preview {
    display: grid;
    grid-template:
      "meta meta preview preview"
      "meta meta preview preview"
      "meta meta preview preview"
      "meta meta preview preview";
    grid-gap: 0.5em;
    grid-template-columns: min-content min-content 6fr max-content;
    ul.setting-list {
      padding: 0;
      margin: 0;
      display: grid;
      grid-template-rows: subgrid;
      grid-area: meta;
      > li {
        margin: 0;
      }
      .meta-field {
        margin: 0;
        .setting-label {
          display: inline-block;
          margin-bottom: 0.5em;
        }
      }
    }
    #edited-style-preview {
      grid-area: preview;
    }
  }
  .setting-item {
    padding-bottom: 0;
    .btn {
      padding: 0 0.5em;
    }
    &:not(:first-child) {
      margin-top: 0.5em;
    }
    &:not(:last-child) {
      margin-bottom: 0.5em;
    }
  }
  .list-editor {
    display: grid;
    grid-template-areas:
      "label    editor"
      "selector editor"
      "movement editor";
    grid-template-columns: 10em 1fr;
    grid-template-rows: auto 1fr auto;
    grid-gap: 0.5em;
    .list-edit-area {
      grid-area: editor;
    }
    .list-select {
      grid-area: selector;
      margin: 0;
      &-label {
        font-weight: bold;
        grid-area: label;
        margin: 0;
        align-self: baseline;
      }
      &-movement {
        grid-area: movement;
        margin: 0;
      }
    }
  }
  .palette-editor {
    width: min-content;
    .list-edit-area {
      display: grid;
      align-self: baseline;
      grid-template-rows: subgrid;
      grid-template-columns: 1fr;
    }
    .palette-editor-single {
      grid-row: 2 / span 2;
    }
  }
  .variables-editor {
    .variable-selector {
      display: grid;
      grid-template-columns: auto 1fr auto 10em;
      grid-template-rows: subgrid;
      align-items: baseline;
      grid-gap: 0 0.5em;
    }
    .list-edit-area {
      display: grid;
      grid-template-rows: subgrid;
    }
    .shadow-control {
      grid-row: 2 / span 2;
    }
  }
  .component-editor {
    display: grid;
    grid-template-columns: 6fr 3fr 4fr;
    grid-template-rows: auto auto 1fr;
    grid-gap: 0.5em;
    grid-template-areas:
      "component component variant"
      "state     state     state"
      "preview   settings  settings";
    .component-selector {
      grid-area: component;
      align-self: center;
    }
    .component-selector,
    .state-selector,
    .variant-selector {
      display: grid;
      grid-template-columns: 1fr minmax(1fr, 10em);
      grid-template-rows: auto;
      grid-auto-flow: column;
      grid-gap: 0.5em;
      align-items: baseline;
      > label:not(.Select) {
        font-weight: bold;
        justify-self: right;
      }
    }
    .state-selector {
      grid-area: state;
      grid-template-columns: minmax(min-content, 7em) 1fr;
    }
    .variant-selector {
      grid-area: variant;
    }
    .state-selector-list {
      display: grid;
      list-style: none;
      grid-auto-flow: dense;
      grid-template-columns: repeat(5, minmax(min-content, 1fr));
      grid-auto-rows: 1fr;
      grid-gap: 0.5em;
      padding: 0;
      margin: 0;
    }
    .preview-container {
      --border: none;
      --shadow: none;
      --roundness: none;
      grid-area: preview;
    }
    .component-settings {
      grid-area: settings;
    }
    .editor-tab {
      display: grid;
      grid-template-columns: 1fr 2em;
      grid-column-gap: 0.5em;
      align-items: center;
      grid-auto-rows: min-content;
      grid-auto-flow: dense;
      border-left: 1px solid var(--border);
      border-right: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
      padding: 0.5em;
    }
    .shadow-tab {
      grid-template-columns: 1fr;
      justify-items: center;
    }
  }
}
.extra-content {
  .style-actions-container {
    width: 100%;
    display: flex;
    justify-content: end;
    .style-actions {
      display: grid;
      grid-template-columns: repeat(4, minmax(7em, 1fr));
      grid-gap: 0.25em;
    }
  }
}