From 1a5f771d361918aa6a2fa05e8326af98449ff97b Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Tue, 15 Aug 2023 00:34:15 +0800
Subject: [PATCH] style: add hover effect to `VideoCard`

---
 src/components/VideoCard.vue | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/VideoCard.vue b/src/components/VideoCard.vue
index 6af9d78a..32512c0b 100644
--- a/src/components/VideoCard.vue
+++ b/src/components/VideoCard.vue
@@ -155,7 +155,13 @@ function toggleWatchLater() {
     </div>
 
     <div>
-      <div w="full" relative bg="$bew-fill-4" rounded="$bew-radius" cursor-pointer @click.stop="openLinkToNewTab(videoUrl)">
+      <div
+        w="full" relative bg="$bew-fill-4" rounded="$bew-radius" cursor-pointer group-hover:shadow
+        group-hover:transform="translate--4px"
+        style="--un-shadow: 6px 6px 0 0 var(--bew-theme-color-60), 12px 12px 0 0 var(--bew-theme-color-40)"
+        transition="all ease-in-out 300" group-hover:z-2
+        @click.stop="openLinkToNewTab(videoUrl)"
+      >
         <!-- Video duration -->
         <div
           v-if="duration"