ad3laid3/Themepo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: richer cards — diagonal sheen, arcane glow on hover, deeper shadows

Browse source
This commit is contained in:
MiTHRAL 2026-05-01 03:13:07 -04:00
parent 5dcb9edcf0
commit 8782e26d29
1 changed files with 46 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

61
themepo-elegantfin.css
View file

@ -217,35 +217,66 @@ body:has(#itemDetailPage) html::after,
/* All show/movie/episode cards */ /* All show/movie/episode cards */
.cardScalable { .cardScalable {
background: rgba(8, 9, 12, 0.15) !important; background:
border: 1px solid rgba(56, 189, 248, 0.12) !important; linear-gradient(160deg, rgba(255, 255, 255, 0.05) 0%, transparent 60%),
rgba(8, 9, 12, 0.2) !important;
border: 1px solid rgba(56, 189, 248, 0.18) !important;
box-shadow: box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.04) inset, 0 0 0 1px rgba(255, 255, 255, 0.06) inset,
0 8px 24px rgba(0, 0, 0, 0.35) !important; 0 4px 6px rgba(0, 0, 0, 0.3),
0 16px 40px rgba(0, 0, 0, 0.5) !important;
backdrop-filter: blur(8px) !important; backdrop-filter: blur(8px) !important;
-webkit-backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important;
transition: border-color 200ms, box-shadow 200ms, transform 125ms !important;
} }
/* Subtle sheen on the image itself */
.cardImageContainer::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
160deg,
rgba(255, 255, 255, 0.06) 0%,
transparent 50%,
rgba(0, 0, 0, 0.2) 100%
);
pointer-events: none;
z-index: 1;
}
/* Hover: lift + arcane glow */
.card-hoverable:hover .cardScalable { .card-hoverable:hover .cardScalable {
border-color: rgba(56, 189, 248, 0.3) !important; border-color: rgba(56, 189, 248, 0.5) !important;
box-shadow: box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.07) inset, 0 0 0 1px rgba(255, 255, 255, 0.09) inset,
0 12px 32px rgba(56, 189, 248, 0.1), 0 0 18px rgba(56, 189, 248, 0.18),
0 8px 24px rgba(0, 0, 0, 0.4) !important; 0 20px 50px rgba(0, 0, 0, 0.55),
0 4px 6px rgba(0, 0, 0, 0.3) !important;
} }
/* Library cards (visualCardBox) */ /* Library cards (visualCardBox) */
.visualCardBox, .visualCardBox,
.paperList { .paperList {
background: background:
linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, transparent 40%), linear-gradient(160deg, rgba(255, 255, 255, 0.07) 0%, transparent 50%),
rgba(8, 9, 12, 0.25) !important; linear-gradient(180deg, rgba(56, 189, 248, 0.07) 0%, rgba(8, 9, 12, 0.35) 100%) !important;
backdrop-filter: blur(16px) saturate(1.6) !important; backdrop-filter: blur(20px) saturate(1.8) !important;
-webkit-backdrop-filter: blur(16px) saturate(1.6) !important; -webkit-backdrop-filter: blur(20px) saturate(1.8) !important;
border: 1px solid rgba(56, 189, 248, 0.14) !important; border: 1px solid rgba(56, 189, 248, 0.18) !important;
box-shadow: box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.05) inset, 0 0 0 1px rgba(255, 255, 255, 0.06) inset,
0 8px 32px rgba(0, 0, 0, 0.4) !important; 0 4px 6px rgba(0, 0, 0, 0.3),
0 16px 40px rgba(0, 0, 0, 0.5) !important;
transition: border-color 200ms, box-shadow 200ms !important;
}
.card-hoverable:hover .visualCardBox {
border-color: rgba(56, 189, 248, 0.5) !important;
box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.09) inset,
0 0 18px rgba(56, 189, 248, 0.18),
0 20px 50px rgba(0, 0, 0, 0.55) !important;
} }
/* Frutiger Aero glassmorphism drawer */ /* Frutiger Aero glassmorphism drawer */