chore(FontSwitcher): 🎨 styling

project-trans · Feb 18, 2025 · 8c0d280 · 8c0d280
1 parent 212ff48
commit 8c0d280
Showing 1 changed file with 7 additions and 1 deletion.
diff --git a/src/components/FontSwitcher/FontSwitcherItem.vue b/src/components/FontSwitcher/FontSwitcherItem.vue
@@ -7,12 +7,16 @@ const activeFont = useStorage('activeFont', '')
 
 <template>
   <div class="VPMenuLink" @click="activeFont = fontName">
-    <span class="link" :class="[activeFont === fontName && 'active']">{{ fontName }}</span>
+    <button class="link" :class="[activeFont === fontName && 'active']">
+      {{ fontName }}
+    </button>
   </div>
 </template>
 
 <style lang="css" scoped>
 .link {
+  width: 100%;
+  text-align: left;
   display: block;
   border-radius: 6px;
   padding: 0 12px;
@@ -33,5 +37,7 @@ const activeFont = useStorage('activeFont', '')
 
 .link.active {
   color: var(--vp-c-brand-1);
+  background-color: unset;
+  cursor: default;
 }
 </style>