fix(ui): always show play buttons on touch screens

This commit is contained in:
Phan An 2024-06-03 15:13:34 +08:00
parent 4e1838c247
commit 6c6d428539
2 changed files with 4 additions and 4 deletions

View file

@ -12,9 +12,9 @@
class="w-full aspect-square object-cover" class="w-full aspect-square object-cover"
loading="lazy" loading="lazy"
> >
<span class="absolute top-0 left-0 w-full h-full group-hover:bg-black/40 z-10" /> <span class="absolute top-0 left-0 w-full h-full group-hover:bg-black/40 no-hover:bg-black/40 z-10" />
<span <span
class="absolute flex opacity-0 items-center justify-center w-[24px] aspect-square rounded-full top-1/2 class="absolute flex opacity-0 no-hover:opacity-100 items-center justify-center w-[24px] aspect-square rounded-full top-1/2
left-1/2 -translate-x-1/2 -translate-y-1/2 bg-k-highlight group-hover:opacity-100 duration-500 transition z-20" left-1/2 -translate-x-1/2 -translate-y-1/2 bg-k-highlight group-hover:opacity-100 duration-500 transition z-20"
> >
<Icon v-if="playable.playback_state === 'Playing'" :icon="faPause" class="text-white" /> <Icon v-if="playable.playback_state === 'Playing'" :icon="faPause" class="text-white" />

View file

@ -18,9 +18,9 @@
loading="lazy" loading="lazy"
> >
<span class="hidden">{{ buttonLabel }}</span> <span class="hidden">{{ buttonLabel }}</span>
<span class="absolute top-0 left-0 w-full h-full group-hover:bg-black/40 z-10" /> <span class="absolute top-0 left-0 w-full h-full group-hover:bg-black/40 no-hover:bg-black/40 z-10" />
<span <span
class="play-icon absolute flex opacity-0 items-center justify-center w-[32px] aspect-square rounded-full top-1/2 class="play-icon absolute flex opacity-0 no-hover:opacity-100 items-center justify-center w-[32px] aspect-square rounded-full top-1/2
left-1/2 -translate-x-1/2 -translate-y-1/2 bg-k-highlight group-hover:opacity-100 duration-500 transition z-20" left-1/2 -translate-x-1/2 -translate-y-1/2 bg-k-highlight group-hover:opacity-100 duration-500 transition z-20"
> >
<Icon :icon="faPlay" class="ml-1 text-white" size="lg" /> <Icon :icon="faPlay" class="ml-1 text-white" size="lg" />