From 14162f8bcb1a45b84b71c2b2e937563ea3d32344 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joaqu=C3=ADn=20S=C3=A1nchez?= <userquin@gmail.com>
Date: Fri, 12 Apr 2024 19:19:37 +0200
Subject: [PATCH] feat(ui): add font size outline when focused (#2798)

---
 components/settings/SettingsFontSize.vue | 12 ++++++++++++
 pages/settings/interface/index.vue       |  8 +++++---
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/components/settings/SettingsFontSize.vue b/components/settings/SettingsFontSize.vue
index f887db78..26492930 100644
--- 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
index bdee1667..4ad9bb8e 100644
--- 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') }}