neat-looking variables tab (sans shadow editor)

src/components/settings_modal/tabs/style_tab/style_tab.scss

@@ -109,6 +109,7 @@
         font-weight: bold;
         grid-area: label;
         margin: 0;
+        align-self: baseline;
       }
 
       &-movement {
@@ -118,6 +119,21 @@
     }
   }
 
+  .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;
+    }
+  }
+
   .component-editor {
     display: grid;
     grid-template-columns: 6fr 3fr 4fr;

src/components/settings_modal/tabs/style_tab/style_tab.vue

@@ -259,7 +259,7 @@
       <div
         key="palette"
         :label="$t('settings.style.themes3.editor.palette_tab')"
-        class="setting-item list-editor"
+        class="setting-item list-editor palette-editor"
       >
           <label
             class="list-select-label"
@@ -297,46 +297,68 @@
       <div
         key="variables"
         :label="$t('settings.style.themes3.editor.variables_tab')"
-        class="setting-item list-editor"
+        class="setting-item list-editor variables-editor"
       >
-          <label
+        <label
-            class="list-select-label"
+          class="list-select-label"
-            for="variables-selector"
+          for="variables-selector"
+        >
+          {{ $t('settings.style.themes3.variables.label') }}
+          {{ ' ' }}
+        </label>
+        <Select
+          id="variables-selector"
+          v-model="selectedVirtualDirectiveId"
+          class="list-select"
+          size="9"
+        >
+          <option
+            v-for="(p, index) in virtualDirectives"
+            :key="p.name"
+            :value="index"
           >
-            {{ $t('settings.style.themes3.variables.label') }}
+            {{ p.name }}
-            {{ ' ' }}
+          </option>
-          </label>
+        </Select>
-          <Select
+        <SelectMotion
-            id="variables-selector"
+          class="list-select-movement"
-            v-model="selectedVirtualDirectiveId"
+          v-model="virtualDirectives"
-            class="list-select"
+          :selected-id="selectedVirtualDirectiveId"
-            size="9"
+          :get-add-value="getNewVirtualDirective"
-          >
+          @update:selectedId="e => selectedVirtualDirectiveId = e"
-            <option
+        />
-              v-for="(p, index) in virtualDirectives"
+        <div class="list-edit-area">
-              :key="p.name"
+          <div class="variable-selector">
-              :value="index"
+            <label
+              class="variable-name-label"
+              for="variables-selector"
+            >
+              {{ $t('settings.style.themes3.variables.name_label') }}
+              {{ ' ' }}
+            </label>
+            <input
+              class="input"
+              v-model="selectedVirtualDirective.name"
+            >
+            <label
+              class="variable-type-label"
+              for="variables-selector"
+            >
+              {{ $t('settings.style.themes3.variables.type_label') }}
+              {{ ' ' }}
+            </label>
+            <Select
+              v-model="selectedVirtualDirective.valType"
             >
-              {{ p.name }}
-            </option>
-          </Select>
-          <SelectMotion
-            class="list-select-movement"
-            v-model="virtualDirectives"
-            :selected-id="selectedVirtualDirectiveId"
-            :get-add-value="getNewVirtualDirective"
-            @update:selectedId="e => selectedVirtualDirectiveId = e"
-          />
-          <div class="list-edit-area">
-            <Select>
               <option value='shadow'>shadow</option>
               <option value='shadow'>color</option>
               <option value='shadow'>generic</option>
             </Select>
-            <ShadowControl
+          </div>
-              v-if="selectedVirtualDirective.valType === 'shadow'"
+          <ShadowControl
-              v-model="selectedVirtualDirectiveParsed"
+            v-if="selectedVirtualDirective.valType === 'shadow'"
-            />
+            v-model="selectedVirtualDirectiveParsed"
+          />
           </div>
       </div>
     </tab-switcher>

src/i18n/en.json

@@ -775,7 +775,9 @@
           "v2_unsupported": "Older v2 themes don't support palettes. Switch to v3 theme to make use of palettes"
         },
         "variables": {
-          "label": "Variables"
+          "label": "Variables",
+          "name_label": "Name:",
+          "type_label": "Type:"
         },
         "editor": {
           "title": "Style",