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

feat: card scale with padding+z-index trick, toned down hover glow

Browse source
This commit is contained in:
MiTHRAL 2026-05-01 03:20:40 -04:00
parent 82ce61ba16
commit 914e2133e1
1 changed files with 24 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
themepo-elegantfin.css
View file

@ -215,10 +215,20 @@ body:has(#itemDetailPage) html::after,
/* --- Glass Cards --- */ /* --- Glass Cards --- */
/* Allow cards to lift outside their container bounds */ /* Give rows padding so scaled cards have room to grow */
.itemsContainer {
padding-block: 10px !important;
}
/* Cards stack above siblings when hovered */
.card, .card,
.cardBox { .cardBox {
overflow: visible !important; overflow: visible !important;
position: relative;
z-index: 1;
}
.card-hoverable:hover {
z-index: 20 !important;
} }
/* All show/movie/episode cards */ /* All show/movie/episode cards */
@ -252,15 +262,15 @@ body:has(#itemDetailPage) html::after,
z-index: 1; z-index: 1;
} }
/* Hover: arcane glow + deepen shadow (no transform — scroll container clips it) */ /* Hover: scale the whole card + subtle glow border */
.card-hoverable:hover .cardScalable { .card-hoverable:hover .cardScalable {
border-color: rgba(56, 189, 248, 0.6) !important; transform: scale(1.06) !important;
border-color: rgba(56, 189, 248, 0.45) !important;
box-shadow: box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.1) inset, 0 0 0 1px rgba(255, 255, 255, 0.08) inset,
0 0 12px 2px rgba(56, 189, 248, 0.25), 0 0 16px rgba(56, 189, 248, 0.12),
0 0 32px 4px rgba(56, 189, 248, 0.1), 0 12px 24px rgba(0, 0, 0, 0.55),
0 8px 16px rgba(0, 0, 0, 0.5), 0 32px 64px rgba(0, 0, 0, 0.5) !important;
0 32px 64px rgba(0, 0, 0, 0.55) !important;
} }
/* Library cards (visualCardBox) */ /* Library cards (visualCardBox) */
@ -281,13 +291,13 @@ body:has(#itemDetailPage) html::after,
} }
.card-hoverable:hover .visualCardBox { .card-hoverable:hover .visualCardBox {
border-color: rgba(56, 189, 248, 0.6) !important; transform: scale(1.06) !important;
border-color: rgba(56, 189, 248, 0.45) !important;
box-shadow: box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.1) inset, 0 0 0 1px rgba(255, 255, 255, 0.08) inset,
0 0 12px 2px rgba(56, 189, 248, 0.25), 0 0 16px rgba(56, 189, 248, 0.12),
0 0 32px 4px rgba(56, 189, 248, 0.1), 0 12px 24px rgba(0, 0, 0, 0.55),
0 8px 16px rgba(0, 0, 0, 0.5), 0 32px 64px rgba(0, 0, 0, 0.5) !important;
0 32px 64px rgba(0, 0, 0, 0.55) !important;
} }
/* Frutiger Aero glassmorphism drawer */ /* Frutiger Aero glassmorphism drawer */