Add shine effect to GameCover

gameyfin/src/main/frontend/components/general/covers/GameCover.tsx

@@ -12,14 +12,16 @@ interface GameCoverProps {
 export function GameCover({game, size = 300, radius = "sm", hover = false}: GameCoverProps) {
     return (
         Number.isInteger(game.coverId) ? (
-            <Image
-                alt={game.title}
-                className={`z-0 w-full h-full object-cover aspect-[12/17] ${hover ? "scale-95 hover:scale-100" : ""}`}
-                src={`images/cover/${game.coverId}`}
-                radius={radius}
-                height={size}
-                fallbackSrc={<GameCoverFallback title={game.title} size={size} radius={radius}/>}
-            />
+            <div className={`rounded-md ${hover ? "scale-95 hover:scale-100 shine transition-all" : ""}`}>
+                <Image
+                    alt={game.title}
+                    className="z-0 w-full h-full object-cover aspect-[12/17]"
+                    src={`images/cover/${game.coverId}`}
+                    radius={radius}
+                    height={size}
+                    fallbackSrc={<GameCoverFallback title={game.title} size={size} radius={radius}/>}
+                />
+            </div>
         ) : <GameCoverFallback title={game.title} size={size} radius={radius} hover={hover}/>
     );
 }

gameyfin/src/main/frontend/main.css

@@ -25,6 +25,7 @@
     .swiper-pagination-bullet {
         background-color: theme(colors.primary);
     }
+
 }
 
 /* List box drag & drop */
@@ -36,4 +37,38 @@
 
 .react-aria-DropIndicator[data-drop-target] {
     outline: 1px solid theme(colors.primary);
+}
+
+.shine {
+    position: relative;
+    overflow: hidden;
+}
+
+.shine::before {
+    background: linear-gradient(
+            to right,
+            rgba(255, 255, 255, 0) 0%,
+            rgba(255, 255, 255, 0.7) 100%
+    );
+    content: "";
+    display: block;
+    height: 100%;
+    left: -100%;
+    position: absolute;
+    top: 0;
+    transform: skewX(-25deg);
+    width: 50%;
+    z-index: 2;
+    pointer-events: none;
+}
+
+.shine:hover::before,
+.shine:focus::before {
+    animation: shine 0.85s;
+}
+
+@keyframes shine {
+    100% {
+        left: 125%;
+    }
 }