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 --- */
/* 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,
.cardBox {
overflow: visible !important;
position: relative;
z-index: 1;
}
.card-hoverable:hover {
z-index: 20 !important;
}
/* All show/movie/episode cards */
@ -252,15 +262,15 @@ body:has(#itemDetailPage) html::after,
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 {
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:
0 0 0 1px rgba(255, 255, 255, 0.1) inset,
0 0 12px 2px rgba(56, 189, 248, 0.25),
0 0 32px 4px rgba(56, 189, 248, 0.1),
0 8px 16px rgba(0, 0, 0, 0.5),
0 32px 64px rgba(0, 0, 0, 0.55) !important;
0 0 0 1px rgba(255, 255, 255, 0.08) inset,
0 0 16px rgba(56, 189, 248, 0.12),
0 12px 24px rgba(0, 0, 0, 0.55),
0 32px 64px rgba(0, 0, 0, 0.5) !important;
}
/* Library cards (visualCardBox) */
@ -281,13 +291,13 @@ body:has(#itemDetailPage) html::after,
}
.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:
0 0 0 1px rgba(255, 255, 255, 0.1) inset,
0 0 12px 2px rgba(56, 189, 248, 0.25),
0 0 32px 4px rgba(56, 189, 248, 0.1),
0 8px 16px rgba(0, 0, 0, 0.5),
0 32px 64px rgba(0, 0, 0, 0.55) !important;
0 0 0 1px rgba(255, 255, 255, 0.08) inset,
0 0 16px rgba(56, 189, 248, 0.12),
0 12px 24px rgba(0, 0, 0, 0.55),
0 32px 64px rgba(0, 0, 0, 0.5) !important;
}
/* Frutiger Aero glassmorphism drawer */