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

feat: cards float — layered shadows, lift + scale on hover

Browse source
This commit is contained in:
MiTHRAL 2026-05-01 03:14:50 -04:00
parent 8782e26d29
commit 71dbb66798
1 changed files with 19 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
themepo-elegantfin.css
View file

@ -223,11 +223,12 @@ body:has(#itemDetailPage) html::after,
border: 1px solid rgba(56, 189, 248, 0.18) !important; border: 1px solid rgba(56, 189, 248, 0.18) !important;
box-shadow: box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.06) inset, 0 0 0 1px rgba(255, 255, 255, 0.06) inset,
0 4px 6px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.4),
0 16px 40px rgba(0, 0, 0, 0.5) !important; 0 8px 16px rgba(0, 0, 0, 0.45),
0 24px 48px rgba(0, 0, 0, 0.4) !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; transition: border-color 250ms, box-shadow 250ms, transform 250ms ease-out !important;
} }
/* Subtle sheen on the image itself */ /* Subtle sheen on the image itself */
@ -245,14 +246,16 @@ body:has(#itemDetailPage) html::after,
z-index: 1; z-index: 1;
} }
/* Hover: lift + arcane glow */ /* Hover: lift off surface + arcane glow */
.card-hoverable:hover .cardScalable { .card-hoverable:hover .cardScalable {
transform: translateY(-6px) scale(1.02) !important;
border-color: rgba(56, 189, 248, 0.5) !important; border-color: rgba(56, 189, 248, 0.5) !important;
box-shadow: box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.09) inset, 0 0 0 1px rgba(255, 255, 255, 0.09) inset,
0 0 18px rgba(56, 189, 248, 0.18), 0 0 20px rgba(56, 189, 248, 0.2),
0 20px 50px rgba(0, 0, 0, 0.55), 0 8px 16px rgba(0, 0, 0, 0.5),
0 4px 6px rgba(0, 0, 0, 0.3) !important; 0 32px 64px rgba(0, 0, 0, 0.55),
0 48px 80px rgba(0, 0, 0, 0.3) !important;
} }
/* Library cards (visualCardBox) */ /* Library cards (visualCardBox) */
@ -266,17 +269,21 @@ body:has(#itemDetailPage) html::after,
border: 1px solid rgba(56, 189, 248, 0.18) !important; border: 1px solid rgba(56, 189, 248, 0.18) !important;
box-shadow: box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.06) inset, 0 0 0 1px rgba(255, 255, 255, 0.06) inset,
0 4px 6px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.4),
0 16px 40px rgba(0, 0, 0, 0.5) !important; 0 8px 16px rgba(0, 0, 0, 0.45),
transition: border-color 200ms, box-shadow 200ms !important; 0 24px 48px rgba(0, 0, 0, 0.4) !important;
transition: border-color 250ms, box-shadow 250ms, transform 250ms ease-out !important;
} }
.card-hoverable:hover .visualCardBox { .card-hoverable:hover .visualCardBox {
transform: translateY(-6px) scale(1.02) !important;
border-color: rgba(56, 189, 248, 0.5) !important; border-color: rgba(56, 189, 248, 0.5) !important;
box-shadow: box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.09) inset, 0 0 0 1px rgba(255, 255, 255, 0.09) inset,
0 0 18px rgba(56, 189, 248, 0.18), 0 0 20px rgba(56, 189, 248, 0.2),
0 20px 50px rgba(0, 0, 0, 0.55) !important; 0 8px 16px rgba(0, 0, 0, 0.5),
0 32px 64px rgba(0, 0, 0, 0.55),
0 48px 80px rgba(0, 0, 0, 0.3) !important;
} }
/* Frutiger Aero glassmorphism drawer */ /* Frutiger Aero glassmorphism drawer */