ui: sticky hover style on mobile

maru-re · Oct 14, 2024 · 5bd1c12 · 5bd1c12
1 parent 8e07d35
commit 5bd1c12
Show file tree

Hide file tree

Showing 7 changed files with 12 additions and 10 deletions.
diff --git a/app/app.css b/app/app.css
@@ -104,7 +104,7 @@ html.dark {
 /* Markdown */
 
 .markdown-content a {
-  --uno: 'op75 hover:op100 hover:underline';
+  --uno: 'op75 @hover:op100 @hover:underline';
 }
 
 .markdown-content h1 {

diff --git a/app/components/SettingsFloat.vue b/app/components/SettingsFloat.vue
@@ -68,7 +68,7 @@ const settings = useSettings()
     </Tooltip>
     <Menu placement="top">
       <IconButton
-        :class="settings.fontSize.toString() === '1' ? 'op40 hover:color-base! hover:op100' : 'color-primary'"
+        :class="settings.fontSize.toString() === '1' ? 'op40 @hover:color-base! @hover:op100' : 'color-primary'"
         icon="i-uil-text-size"
         @click="settings.fontSize = 1"
       />

diff --git a/app/components/SongActions.vue b/app/components/SongActions.vue
@@ -75,7 +75,7 @@ function shareWithQifi() {
   <Dropdown v-if="source === 'local'">
     <ActionButton
       :type
-      icon="i-uil-trash-alt op40 hover:op100 hover:text-red"
+      icon="i-uil-trash-alt op40 @hover:op100 @hover:text-red"
       :title="$t('lyrics.removeLyrics')"
     />
     <template #popper="{ hide }">

diff --git a/app/components/SongEntry.vue b/app/components/SongEntry.vue
@@ -28,14 +28,14 @@ const favorited = computed({
 </script>
 
 <template>
-  <div class="song-entry relative aspect-5/2" hover:z-hover ma-5px :class="link ? 'group' : ''">
+  <div class="song-entry relative @hover:z-hover ma-5px aspect-5/2" :class="link ? 'group' : ''">
     <NuxtLink
       class="song-entry-cover aspect-5/2"
       :class="link ? '' : 'pointer-events-none'"
       :to="`/play#id=${song.youtube}`"
       border="transparent rounded-xl"
       absolute inset-0 block of-hidden transition-all duration-500 bg-base
-      group-hover="aspect-16/9 translate-y--16.25% shadow-2xl scale-115"
+      media-group-hover="aspect-16/9 translate-y--16.25% shadow-2xl scale-115"
     >
       <img
         :src="song.cover || `https://img.youtube.com/vi/${song.youtube}/mqdefault.jpg`"
@@ -54,13 +54,14 @@ const favorited = computed({
       <div
         v-if="showFavorite"
         absolute right-1 top-1 rounded-full transition-all duration-250
-        group-hover="bg-black:50 op100"
+        media-group-hover="bg-black:50 op100"
         flex="~ items-center justify-center"
         :class="(showFavorite === 'hover' || !favorited) && 'op0'"
       >
         <IconToggle
           v-model="favorited"
-          text-sm text-white transition-all duration-250 hover:bg-black:75
+          class="@hover:bg-black:75"
+          text-sm text-white transition-all duration-250
           :icon="favorited ? 'i-ph-star-fill text-yellow6 dark:text-yellow2' : 'i-ph-star op80! '"
         />
       </div>

diff --git a/app/components/atomic/IconButton.vue b/app/components/atomic/IconButton.vue
@@ -25,6 +25,6 @@ defineProps<{
 
 <style>
 .icon-button {
-  --uno: 'hover:bg-primary:15 hover:color-primary dark:hover:bg-primary:30';
+  --uno: '@hover:bg-primary:15 @hover:color-primary dark:@hover:bg-primary:30';
 }
 </style>
diff --git a/app/components/atomic/IconToggle.vue b/app/components/atomic/IconToggle.vue
@@ -21,7 +21,7 @@ const value = defineModel('modelValue', { default: true })
 
 <style>
 .icon-toggle {
-  --uno: 'op40 hover:op100 hover:color-inherit';
+  --uno: 'op40 @hover:op100 @hover:color-inherit';
 }
 .icon-toggle.active {
   --uno: 'color-primary op100';

diff --git a/uno.config.ts b/uno.config.ts
@@ -37,13 +37,14 @@ export default defineConfig({
     },
     [/^btn-simple-(.*)$/, ([,color]) => {
       return [
-        `hover:border-${color}/50 hover:color-${color} hover:opacity-100`,
+        `@hover:border-${color}/50 @hover:color-${color} @hover:opacity-100`,
         `active:bg-${color}/10`,
         'disabled:opacity-50 disabled:pointer-events-none',
         `border border-base border-rounded-lg`,
         `flex gap-1 items-center justify-center`,
       ].join(' ')
     }],
+    [/^media-group-hover[:-](\S+)$/, ([,r]) => `group-hover:media-mouse:${r} group-active:${r}`],
   ],
   theme: {
     colors: {