fix: sticky hover style on mobile (#1513)

Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>

components/account/AccountFollowButton.vue

@@ -98,23 +98,23 @@ const buttonStyle = $computed(() => {
     @click="relationship?.blocking ? unblock() : relationship?.muting ? unmute() : toggleFollow()"
   >
     <template v-if="relationship?.blocking">
-      <span group-hover="hidden">{{ $t('account.blocking') }}</span>
+      <span elk-group-hover="hidden">{{ $t('account.blocking') }}</span>
-      <span hidden group-hover="inline">{{ $t('account.unblock') }}</span>
+      <span hidden elk-group-hover="inline">{{ $t('account.unblock') }}</span>
     </template>
     <template v-if="relationship?.muting">
-      <span group-hover="hidden">{{ $t('account.muting') }}</span>
+      <span elk-group-hover="hidden">{{ $t('account.muting') }}</span>
-      <span hidden group-hover="inline">{{ $t('account.unmute') }}</span>
+      <span hidden elk-group-hover="inline">{{ $t('account.unmute') }}</span>
     </template>
     <template v-else-if="relationship ? relationship.following : context === 'following'">
-      <span group-hover="hidden">{{ relationship?.followedBy ? $t('account.mutuals') : $t('account.following') }}</span>
+      <span elk-group-hover="hidden">{{ relationship?.followedBy ? $t('account.mutuals') : $t('account.following') }}</span>
-      <span hidden group-hover="inline">{{ $t('account.unfollow') }}</span>
+      <span hidden elk-group-hover="inline">{{ $t('account.unfollow') }}</span>
     </template>
     <template v-else-if="relationship?.requested">
       <span>{{ $t('account.follow_requested') }}</span>
     </template>
     <template v-else-if="relationship ? relationship.followedBy : context === 'followedBy'">
-      <span group-hover="hidden">{{ $t('account.follows_you') }}</span>
+      <span elk-group-hover="hidden">{{ $t('account.follows_you') }}</span>
-      <span hidden group-hover="inline">{{ $t('account.follow_back') }}</span>
+      <span hidden elk-group-hover="inline">{{ $t('account.follow_back') }}</span>
     </template>
     <template v-else>
       <span>{{ account.locked ? $t('account.request_follow') : $t('account.follow') }}</span>

components/account/AccountMoreButton.vue

@@ -68,7 +68,7 @@ const toggleReblogs = async () => {
 <template>
   <CommonDropdown :eager-mount="command">
     <button flex gap-1 items-center w-full rounded op75 hover="op100 text-purple" group aria-label="More actions">
-      <div rounded-5 p2 group-hover="bg-purple/10">
+      <div rounded-5 p2 elk-group-hover="bg-purple/10">
         <div i-ri:more-2-fill />
       </div>
     </button>

components/nav/NavSideItem.vue

@@ -60,7 +60,7 @@ const noUserVisual = computed(() => isHydrated.value && props.userOnly && !curre
         px2 py2 mx3 sm:mxa
         xl="ml0 mr5 px5 w-auto"
         transition-100
-        group-hover="bg-active" group-focus-visible:ring="2 current"
+        elk-group-hover="bg-active" group-focus-visible:ring="2 current"
       >
         <slot name="icon">
           <div :class="icon" text-xl />

components/status/StatusActionButton.vue

@@ -6,7 +6,7 @@ const { as = 'button', command, disabled, content, icon } = defineProps<{
   icon: string
   activeIcon?: string
   hover: string
-  groupHover: string
+  elkGroupHover: string
   active?: boolean
   disabled?: boolean
   as?: string
@@ -62,8 +62,8 @@ useCommand({
       <div
         rounded-full p2
         v-bind="disabled ? {} : {
-          'group-hover': groupHover,
+          'elk-group-hover': elkGroupHover,
-          'group-focus-visible': groupHover,
+          'group-focus-visible': elkGroupHover,
           'group-focus-visible:ring': '2 current',
         }"
       >

components/status/StatusActions.vue

@@ -38,7 +38,7 @@ const reply = () => {
       <StatusActionButton
         :content="$t('action.reply')"
         :text="!getPreferences(userSettings, 'hideReplyCount') && status.repliesCount || ''"
-        color="text-blue" hover="text-blue" group-hover="bg-blue/10"
+        color="text-blue" hover="text-blue" elk-group-hover="bg-blue/10"
         icon="i-ri:chat-1-line"
         :command="command"
         @click="reply"
@@ -56,7 +56,7 @@ const reply = () => {
       <StatusActionButton
         :content="$t('action.boost')"
         :text="!getPreferences(userSettings, 'hideBoostCount') && status.reblogsCount ? status.reblogsCount : ''"
-        color="text-green" hover="text-green" group-hover="bg-green/10"
+        color="text-green" hover="text-green" elk-group-hover="bg-green/10"
         icon="i-ri:repeat-line"
         active-icon="i-ri:repeat-fill"
         :active="!!status.reblogged"
@@ -77,7 +77,7 @@ const reply = () => {
       <StatusActionButton
         :content="$t('action.favourite')"
         :text="!getPreferences(userSettings, 'hideFavoriteCount') && status.favouritesCount ? status.favouritesCount : ''"
-        color="text-rose" hover="text-rose" group-hover="bg-rose/10"
+        color="text-rose" hover="text-rose" elk-group-hover="bg-rose/10"
         icon="i-ri:heart-3-line"
         active-icon="i-ri:heart-3-fill"
         :active="!!status.favourited"
@@ -97,7 +97,7 @@ const reply = () => {
     <div flex-none>
       <StatusActionButton
         :content="$t('action.bookmark')"
-        color="text-yellow" hover="text-yellow" group-hover="bg-yellow/10"
+        color="text-yellow" hover="text-yellow" elk-group-hover="bg-yellow/10"
         icon="i-ri:bookmark-line"
         active-icon="i-ri:bookmark-fill"
         :active="!!status.bookmarked"

components/status/StatusActionsMore.vue

@@ -118,7 +118,7 @@ const showFavoritedAndBoostedBy = () => {
       :content="$t('action.more')"
       color="text-primary"
       hover="text-primary"
-      group-hover="bg-primary-light"
+      elk-group-hover="bg-primary-light"
       icon="i-ri:more-line"
       my--2
     />

components/tag/TagActionButton.vue

@@ -41,7 +41,7 @@ const toggleFollowTag = async () => {
     @click="toggleFollowTag()"
   >
     <CommonTooltip placement="bottom" :content="tag.following ? $t('tag.unfollow') : $t('tag.follow')">
-      <div rounded-full p2 group-hover="bg-orange/10" group-focus-visible="bg-orange/10" group-focus-visible:ring="2 current">
+      <div rounded-full p2 elk-group-hover="bg-orange/10" group-focus-visible="bg-orange/10" group-focus-visible:ring="2 current">
         <div :class="[tag.following ? 'i-ri:star-fill' : 'i-ri:star-line']" />
       </div>
     </CommonTooltip>

unocss.config.ts

@@ -66,6 +66,7 @@ export default defineConfig({
 
       'timeline-title-style': 'text-primary text-lg font-bold',
     },
+    [/^elk-group-hover[:-](\S+)$/, ([,r]) => `media-mouse-group-hover-${r} group-active-${r}`],
   ],
   presets: [
     presetUno({