diff --git a/gameyfin/src/main/frontend/components/general/covers/GameCover.tsx b/gameyfin/src/main/frontend/components/general/covers/GameCover.tsx index cbbb3c1..8dc2fcd 100644 --- a/gameyfin/src/main/frontend/components/general/covers/GameCover.tsx +++ b/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) ? ( - {game.title}} - /> +
+ {game.title}} + /> +
) : ); } \ No newline at end of file diff --git a/gameyfin/src/main/frontend/main.css b/gameyfin/src/main/frontend/main.css index 4ca0f63..602071e 100644 --- a/gameyfin/src/main/frontend/main.css +++ b/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%; + } } \ No newline at end of file