feat(ui): add font size outline when focused (#2798)

elk-zone · Apr 12, 2024 · 14162f8 · 14162f8
1 parent 9fa8149
commit 14162f8
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 3 deletions.
diff --git a/components/settings/SettingsFontSize.vue b/components/settings/SettingsFontSize.vue
@@ -31,6 +31,7 @@ function setFontSize(e: Event) {
       <div flex items-center justify-between absolute w-full pointer-events-none>
         <div
           v-for="i in sizes.length" :key="i"
+          class="container-marker"
           h-3 w-3
           rounded-full bg-secondary-light
           relative
@@ -48,6 +49,17 @@ function setFontSize(e: Event) {
 </template>
 
 <style>
+  input:focus + div .container-marker:has(> div)::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 2rem;
+    height: 2rem;
+    border: 2px solid var(--c-primary);
+    border-radius: 50%;
+  }
   input[type=range]::-webkit-slider-runnable-track {
     --at-apply: bg-secondary-light rounded-full h1 op60;
   }

diff --git a/pages/settings/interface/index.vue b/pages/settings/interface/index.vue
@@ -14,10 +14,12 @@ useHydratedHead({
       </div>
     </template>
     <div p6 flex="~ col gap6">
-      <label space-y-2>
-        <p font-medium>{{ $t('settings.interface.font_size') }}</p>
+      <div space-y-2>
+        <p font-medium>
+          {{ $t('settings.interface.font_size') }}
+        </p>
         <SettingsFontSize select-settings />
-      </label>
+      </div>
       <div space-y-2>
         <p font-medium>
           {{ $t('settings.interface.color_mode') }}