Massively upgraded shadow control, added sorting by specificity in themes3, added/fixed disabled inputs

src/components/checkbox/checkbox.vue

@@ -3,6 +3,13 @@
     class="checkbox"
     :class="{ disabled, indeterminate, 'indeterminate-fix': indeterminateTransitionFix }"
   >
+    <span
+      v-if="!!$slots.before"
+      class="label -before"
+      :class="{ faint: disabled }"
+    >
+      <slot name="before"/>
+    </span>
     <input
       type="checkbox"
       class="visible-for-screenreader-only"
@@ -14,11 +21,13 @@
     <i
       class="input -checkbox checkbox-indicator"
       :aria-hidden="true"
+      :class="{ disabled }"
       @transitionend.capture="onTransitionEnd"
     />
     <span
       v-if="!!$slots.default"
-      class="label"
+      class="label -after"
+      :class="{ faint: disabled }"
     >
       <slot />
     </span>
@@ -93,14 +102,9 @@ export default {
     box-sizing: border-box;
   }
 
-  &.disabled {
+  .disabled {
-    .checkbox-indicator::before,
+    .checkbox-indicator::before {
-    .label {
+      background-color: var(--background);
-      opacity: 0.5;
-    }
-
-    .label {
-      color: var(--text);
     }
   }
 
@@ -121,8 +125,14 @@ export default {
     }
   }
 
-  & > span {
+  & > .label {
-    margin-left: 0.5em;
+    &.-after {
+      margin-left: 0.5em;
+    }
+
+    &.-before {
+      margin-right: 0.5em;
+    }
   }
 }
 </style>

src/components/color_input/color_input.scss

@@ -1,12 +1,15 @@
 .color-input {
   display: inline-flex;
 
+  .label {
+    flex: 1 1 auto;
+  }
+
   &-field.input {
     display: inline-flex;
     flex: 0 0 0;
     max-width: 9em;
     align-items: stretch;
-    padding: 0.2em 8px;
 
     input {
       color: var(--text);
@@ -25,6 +28,7 @@
     .nativeColor {
       cursor: pointer;
       flex: 0 0 auto;
+      padding: 0;
 
       input {
         appearance: none;
@@ -41,10 +45,10 @@
     .invalidIndicator,
     .transparentIndicator {
       flex: 0 0 2em;
-      margin: 0 0.5em;
+      margin: 0.2em 0.5em;
       min-width: 2em;
       align-self: stretch;
-      min-height: 1.5em;
+      min-height: 1.1em;
       border-radius: var(--roundness);
     }
 
@@ -81,9 +85,17 @@
         border-bottom-right-radius: var(--roundness);
       }
     }
-  }
 
-  .label {
+    &.disabled,
-    flex: 1 1 auto;
+    &:disabled {
+      .nativeColor input,
+      .computedIndicator,
+      .validIndicator,
+      .invalidIndicator,
+      .transparentIndicator {
+        /* stylelint-disable-next-line declaration-no-important */
+        opacity: 0.25 !important;
+      }
+    }
   }
 }

src/components/color_input/color_input.vue

@@ -6,6 +6,7 @@
     <label
       :for="name"
       class="label"
+      :class="{ faint: !present || disabled }"
     >
       {{ label }}
     </label>
@@ -16,10 +17,14 @@
       class="opt"
       @update:modelValue="$emit('update:modelValue', typeof modelValue === 'undefined' ? fallback : undefined)"
     />
-    <div class="input color-input-field">
+    <div
+      class="input color-input-field"
+      :class="{ disabled: !present || disabled }"
+      >
       <input
         :id="name + '-t'"
         class="textColor unstyled"
+        :class="{ disabled: !present || disabled }"
         type="text"
         :value="modelValue || fallback"
         :disabled="!present || disabled"
@@ -51,6 +56,7 @@
           type="color"
           :value="modelValue || fallback"
           :disabled="!present || disabled"
+          :class="{ disabled: !present || disabled }"
           @input="$emit('update:modelValue', $event.target.value)"
         >
       </label>

src/components/input.style.js

@@ -60,7 +60,7 @@ export default {
     {
       state: ['disabled'],
       directives: {
-        background: '$blend(--inheritedBackground, 0.25, --parent)'
+        background: '--parent'
       }
     },
     {

src/components/opacity_input/opacity_input.vue

@@ -6,6 +6,7 @@
     <label
       :for="name"
       class="label"
+      :class="{ faint: !present || disabled }"
     >
       {{ $t('settings.style.common.opacity') }}
     </label>
@@ -22,6 +23,7 @@
       type="number"
       :value="modelValue || fallback"
       :disabled="!present || disabled"
+      :class="{ disabled: !present || disabled }"
       max="1"
       min="0"
       step=".05"

src/components/select/select.vue

@@ -6,13 +6,14 @@
     <select
       :disabled="disabled"
       :value="modelValue"
-      v-bind="attrs"
+      v-bind="$attrs"
       @change="$emit('update:modelValue', $event.target.value)"
     >
       <slot />
     </select>
     {{ ' ' }}
     <FAIcon
+      v-if="!$attrs.size && !$attrs.multiple"
       class="select-down-icon"
       icon="chevron-down"
     />
@@ -26,6 +27,11 @@
 label.Select {
   padding: 0;
 
+  &.disabled,
+  &:disabled {
+    background-color: var(--background);
+  }
+
   select {
     appearance: none;
     background: transparent;
@@ -39,6 +45,21 @@ label.Select {
     z-index: 1;
     height: 2em;
     line-height: 16px;
+
+    &[multiple],
+    &[size] {
+      height: 100%;
+      padding: 0.2em;
+
+      option {
+        background: transparent;
+
+        &.-active {
+          color: var(--selectionText);
+          background-color: var(--selectionBackground);
+        }
+      }
+    }
   }
 
   .select-down-icon {

src/components/settings_modal/tabs/theme_tab/theme_tab.scss

@@ -25,7 +25,9 @@
     margin-bottom: 5px;
 
     .label {
+      margin-right: 1em;
       flex: 1;
+      line-height: 2;
     }
 
     .opt {
@@ -48,15 +50,14 @@
 
       &[type="range"] {
         flex: 1;
-        min-width: 3em;
+        min-width: 2em;
-        align-self: flex-start;
+        align-self: center;
+        margin: 0 0.5em;
       }
-    }
 
-    &.disabled {
+      &[type="checkbox"] + i {
-      input,
+        height: 1.1em;
-      select {
+        align-self: center;
-        opacity: 0.5;
       }
     }
   }

src/components/shadow_control/shadow_control.js

@@ -1,6 +1,7 @@
 import ColorInput from '../color_input/color_input.vue'
 import OpacityInput from '../opacity_input/opacity_input.vue'
 import Select from '../select/select.vue'
+import Checkbox from '../checkbox/checkbox.vue'
 import { getCssShadow } from '../../services/theme_data/theme_data.service.js'
 import { hex2rgb } from '../../services/color_convert/color_convert.js'
 import { library } from '@fortawesome/fontawesome-svg-core'
@@ -40,6 +41,7 @@ export default {
   emits: ['update:modelValue'],
   data () {
     return {
+      lightGrid: false,
       selectedId: 0,
       // TODO there are some bugs regarding display of array (it's not getting updated when deleting for some reason)
       cValue: (this.modelValue || this.fallback || []).map(toModel)
@@ -48,7 +50,8 @@ export default {
   components: {
     ColorInput,
     OpacityInput,
-    Select
+    Select,
+    Checkbox
   },
   methods: {
     add () {

src/components/shadow_control/shadow_control.scss

@@ -0,0 +1,178 @@
+.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);
+      }
+    }
+  }
+}

src/components/shadow_control/shadow_control.vue

@@ -1,81 +1,92 @@
 <template>
   <div
-    class="shadow-control"
+    class="label shadow-control"
     :class="{ disabled: !present }"
   >
-    <div class="shadow-preview-container">
+    <div class="shadow-preview">
-      <div
+      <label
-        :disabled="!present"
+        class="header"
-        class="y-shift-control"
+        :class="{ faint: !present }"
+      >
+        {{ $t('settings.style.shadows.offset') }}
+      </label>
+      <input
+        v-model="selected.y"
+        :disabled="!present"
+        :class="{ disabled: !present }"
+        class="input input-number y-shift-number"
+        type="number"
+      >
+      <input
+        v-model="selected.y"
+        :disabled="!present"
+        :class="{ disabled: !present }"
+        class="input input-range y-shift-slider"
+        type="range"
+        max="20"
+        min="-20"
+      >
+      <div
+        class="preview-window"
+        :class="{ disabled: !present, '-light-grid': lightGrid }"
       >
-        <input
-          v-model="selected.y"
-          :disabled="!present"
-          class="input input-number"
-          type="number"
-        >
-        <div class="wrap">
-          <input
-            v-model="selected.y"
-            :disabled="!present"
-            class="input input-range"
-            type="range"
-            max="20"
-            min="-20"
-          >
-        </div>
-      </div>
-      <div class="preview-window">
         <div
           class="preview-block"
           :style="style"
         />
       </div>
-      <div
+      <input
+        v-model="selected.x"
         :disabled="!present"
-        class="x-shift-control"
+        :class="{ disabled: !present }"
+        class="input input-number x-shift-number"
+        type="number"
       >
-        <input
+      <input
-          v-model="selected.x"
+        v-model="selected.x"
-          :disabled="!present"
+        :disabled="!present"
-          class="input input-number"
+        :class="{ disabled: !present }"
-          type="number"
+        class="input input-range x-shift-slider"
-        >
+        type="range"
-        <div class="wrap">
+        max="20"
-          <input
+        min="-20"
-            v-model="selected.x"
+      >
-            :disabled="!present"
+      <Checkbox
-            class="input input-range"
+        id="inset"
-            type="range"
+        v-model="lightGrid"
-            max="20"
+        :disabled="!present"
-            min="-20"
+        name="lightGrid"
-          >
+        class="input-light-grid"
-        </div>
+      >
-      </div>
+        {{ $t('settings.style.shadows.light_grid') }}
-    </div>
+      </Checkbox>
 
-    <div class="shadow-tweak">
+    </div>
+    <div class="shadow-switcher">
+      <Select
+        class="shadow-list"
+        id="shadow-list"
+        v-model="selectedId"
+        size="10"
+        :disabled="!ready || usingFallback"
+      >
+        <option
+          v-for="(shadow, index) in cValue"
+          :value="index"
+          :class="{ '-active': index === Number(selectedId) }"
+          :key="index"
+        >
+          {{ shadow.name ?? $t('settings.style.shadows.shadow_id', { value: index }) }}
+        </option>
+      </Select>
       <div
         :disabled="usingFallback"
-        class="id-control style-control"
+        class="id-control arrange-buttons"
       >
-        <Select
-          id="shadow-switcher"
-          v-model="selectedId"
-          class="shadow-switcher"
-          :disabled="!ready || usingFallback"
-        >
-          <option
-            v-for="(shadow, index) in cValue"
-            :key="index"
-            :value="index"
-          >
-            {{ $t('settings.style.shadows.shadow_id', { value: index }) }}
-          </option>
-        </Select>
         <button
           class="btn button-default"
           :disabled="!ready || !present"
+          :class="{ disabled: !present }"
           @click="del"
         >
           <FAIcon
@@ -86,6 +97,7 @@
         <button
           class="btn button-default"
           :disabled="!moveUpValid"
+          :class="{ disabled: !present }"
           @click="moveUp"
         >
           <FAIcon
@@ -105,7 +117,7 @@
         </button>
         <button
           class="btn button-default"
-          :disabled="usingFallback"
+          :disabled="usingFallback || !present"
           @click="add"
         >
           <FAIcon
@@ -114,37 +126,54 @@
           />
         </button>
       </div>
+    </div>
+    <div class="shadow-tweak">
+      <div
+        :disabled="!present"
+        :class="{ disabled: !present }"
+        class="name-control style-control"
+      >
+        <label
+          for="spread"
+          class="label"
+          :class="{ faint: !present }"
+        >
+          {{ $t('settings.style.shadows.name') }}
+        </label>
+        <input
+          id="name"
+          v-model="selected.name"
+          :disabled="!present"
+          :class="{ disabled: !present }"
+          name="name"
+          class="input input-string"
+        >
+      </div>
       <div
         :disabled="!present"
         class="inset-control style-control"
       >
-        <label
+        <Checkbox
-          for="inset"
-          class="label"
-        >
-          {{ $t('settings.style.shadows.inset') }}
-        </label>
-        <input
           id="inset"
           v-model="selected.inset"
           :disabled="!present"
           name="inset"
-          class="input -checkbox input-inset visible-for-screenreader-only"
+          class="input-inset input-boolean"
-          type="checkbox"
         >
-        <label
+          <template #before>
-          class="checkbox-label"
+            {{ $t('settings.style.shadows.inset') }}
-          for="inset"
+          </template>
-          :aria-hidden="true"
+        </Checkbox>
-        />
       </div>
       <div
         :disabled="!present"
+        :class="{ disabled: !present }"
         class="blur-control style-control"
       >
         <label
           for="spread"
           class="label"
+          :class="{ faint: !present }"
         >
           {{ $t('settings.style.shadows.blur') }}
         </label>
@@ -152,6 +181,7 @@
           id="blur"
           v-model="selected.blur"
           :disabled="!present"
+          :class="{ disabled: !present }"
           name="blur"
           class="input input-range"
           type="range"
@@ -161,6 +191,7 @@
         <input
           v-model="selected.blur"
           :disabled="!present"
+          :class="{ disabled: !present }"
           class="input input-number"
           type="number"
           min="0"
@@ -169,10 +200,12 @@
       <div
         :disabled="!present"
         class="spread-control style-control"
+        :class="{ disabled: !present }"
       >
         <label
           for="spread"
           class="label"
+          :class="{ faint: !present }"
         >
           {{ $t('settings.style.shadows.spread') }}
         </label>
@@ -180,6 +213,7 @@
           id="spread"
           v-model="selected.spread"
           :disabled="!present"
+          :class="{ disabled: !present }"
           name="spread"
           class="input input-range"
           type="range"
@@ -189,6 +223,7 @@
         <input
           v-model="selected.spread"
           :disabled="!present"
+          :class="{ disabled: !present }"
           class="input input-number"
           type="number"
         >
@@ -208,6 +243,7 @@
       <i18n-t
         scope="global"
         keypath="settings.style.shadows.hintV3"
+        :class="{ faint: !present }"
         tag="p"
       >
         <code>--variable,mod</code>
@@ -218,109 +254,4 @@
 
 <script src="./shadow_control.js"></script>
 
-<style lang="scss">
+<style src="./shadow_control.scss" lang="scss"></style>
-.shadow-control {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  margin-bottom: 1em;
-
-  .shadow-preview-container,
-  .shadow-tweak {
-    margin: 5px 6px 0 0;
-  }
-
-  .shadow-preview-container {
-    flex: 0;
-    display: flex;
-    flex-wrap: wrap;
-
-    input[type="number"] {
-      width: 5em;
-      min-width: 2em;
-    }
-
-    .x-shift-control,
-    .y-shift-control {
-      display: flex;
-      flex: 0;
-
-      &[disabled="disabled"] * {
-        opacity: 0.5;
-      }
-    }
-
-    .x-shift-control {
-      align-items: flex-start;
-    }
-
-    .x-shift-control .wrap,
-    input[type="range"] {
-      margin: 0;
-      width: 15em;
-      height: 2em;
-    }
-
-    .y-shift-control {
-      flex-direction: column;
-      align-items: flex-end;
-
-      .wrap {
-        width: 2em;
-        height: 15em;
-      }
-
-      input[type="range"] {
-        transform-origin: 1em 1em;
-        transform: rotate(90deg);
-      }
-    }
-
-    .preview-window {
-      flex: 1;
-      background-color: #999;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      background-image:
-        linear-gradient(45deg, #666 25%, transparent 25%),
-        linear-gradient(-45deg, #666 25%, transparent 25%),
-        linear-gradient(45deg, transparent 75%, #666 75%),
-        linear-gradient(-45deg, transparent 75%, #666 75%);
-      background-size: 20px 20px;
-      background-position: 0 0, 0 10px, 10px -10px, -10px 0;
-      border-radius: var(--roundness);
-
-      .preview-block {
-        width: 33%;
-        height: 33%;
-        border-radius: var(--roundness);
-      }
-    }
-  }
-
-  .shadow-tweak {
-    flex: 1;
-    min-width: 280px;
-
-    .id-control {
-      align-items: stretch;
-
-      .shadow-switcher {
-        flex: 1;
-      }
-
-      .shadow-switcher,
-      .btn {
-        min-width: 1px;
-        margin-right: 5px;
-      }
-
-      .btn {
-        padding: 0 0.4em;
-        margin: 0 0.1em;
-      }
-    }
-  }
-}
-</style>

src/i18n/en.json

@@ -870,6 +870,9 @@
         "component": "Component",
         "override": "Override",
         "shadow_id": "Shadow #{value}",
+        "offset": "Shadow offset",
+        "light_grid": "Use light checkerboard",
+        "name": "Name",
         "blur": "Blur",
         "spread": "Spread",
         "inset": "Inset",