feat: glass cards for all media + library items, more transparent slides

This commit is contained in:
MiTHRAL 2026-05-01 03:10:43 -04:00
parent 84766cad5a
commit 5dcb9edcf0

View file

@ -171,15 +171,15 @@ body:has(#itemDetailPage) html::after,
/* --- Media Bar Plugin --- */
/* Slide card: glass surface instead of solid */
/* Slide card: more transparent glass */
.slide {
background: rgba(8, 9, 12, 0.3) !important;
backdrop-filter: blur(8px) !important;
-webkit-backdrop-filter: blur(8px) !important;
border: 1px solid rgba(56, 189, 248, 0.12) !important;
background: rgba(8, 9, 12, 0.12) !important;
backdrop-filter: blur(12px) !important;
-webkit-backdrop-filter: blur(12px) !important;
border: 1px solid rgba(56, 189, 248, 0.1) !important;
box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.04) inset,
0 8px 32px rgba(0, 0, 0, 0.4) !important;
0 0 0 1px rgba(255, 255, 255, 0.03) inset,
0 8px 32px rgba(0, 0, 0, 0.25) !important;
}
/* Soften the dark bottom overlay — let the backdrop bleed through */
@ -213,6 +213,41 @@ body:has(#itemDetailPage) html::after,
) !important;
}
/* --- Glass Cards --- */
/* All show/movie/episode cards */
.cardScalable {
background: rgba(8, 9, 12, 0.15) !important;
border: 1px solid rgba(56, 189, 248, 0.12) !important;
box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.04) inset,
0 8px 24px rgba(0, 0, 0, 0.35) !important;
backdrop-filter: blur(8px) !important;
-webkit-backdrop-filter: blur(8px) !important;
}
.card-hoverable:hover .cardScalable {
border-color: rgba(56, 189, 248, 0.3) !important;
box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.07) inset,
0 12px 32px rgba(56, 189, 248, 0.1),
0 8px 24px rgba(0, 0, 0, 0.4) !important;
}
/* Library cards (visualCardBox) */
.visualCardBox,
.paperList {
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, transparent 40%),
rgba(8, 9, 12, 0.25) !important;
backdrop-filter: blur(16px) saturate(1.6) !important;
-webkit-backdrop-filter: blur(16px) saturate(1.6) !important;
border: 1px solid rgba(56, 189, 248, 0.14) !important;
box-shadow:
0 0 0 1px rgba(255, 255, 255, 0.05) inset,
0 8px 32px rgba(0, 0, 0, 0.4) !important;
}
/* Frutiger Aero glassmorphism drawer */
.mainDrawer {
background: