Brendon/gameyfin
1
0
Fork 0
mirror of https://github.com/BrenBroZAYT/gameyfin.git synced 2026-06-17 00:30:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add shine effect to GameCover

Browse Source
This commit is contained in:
grimsi
2025-05-16 13:18:28 +02:00
parent f2fa014571
commit 350f75344b
2 changed files with 45 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
gameyfin/src/main/frontend/components/general/covers/GameCover.tsx
+10 -8
View File
@@ -12,14 +12,16 @@ interface GameCoverProps {
export function GameCover({game, size = 300, radius = "sm", hover = false}: GameCoverProps) { export function GameCover({game, size = 300, radius = "sm", hover = false}: GameCoverProps) {
return ( return (
Number.isInteger(game.coverId) ? ( Number.isInteger(game.coverId) ? (
<Image <div className={`rounded-md ${hover ? "scale-95 hover:scale-100 shine transition-all" : ""}`}>
alt={game.title} <Image
className={`z-0 w-full h-full object-cover aspect-[12/17] ${hover ? "scale-95 hover:scale-100" : ""}`} alt={game.title}
src={`images/cover/${game.coverId}`} className="z-0 w-full h-full object-cover aspect-[12/17]"
radius={radius} src={`images/cover/${game.coverId}`}
height={size} radius={radius}
fallbackSrc={<GameCoverFallback title={game.title} size={size} radius={radius}/>} height={size}
/> fallbackSrc={<GameCoverFallback title={game.title} size={size} radius={radius}/>}
/>
</div>
) : <GameCoverFallback title={game.title} size={size} radius={radius} hover={hover}/> ) : <GameCoverFallback title={game.title} size={size} radius={radius} hover={hover}/>
); );
} }
gameyfin/src/main/frontend/main.css
+35
View File
@@ -25,6 +25,7 @@
.swiper-pagination-bullet { .swiper-pagination-bullet {
background-color: theme(colors.primary); background-color: theme(colors.primary);
} }
} }
/* List box drag & drop */ /* List box drag & drop */
@@ -37,3 +38,37 @@
.react-aria-DropIndicator[data-drop-target] { .react-aria-DropIndicator[data-drop-target] {
outline: 1px solid theme(colors.primary); 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%;
}
}