feat: glass media bar slides with soft backdrop bleed
This commit is contained in:
parent
c1196c7f7c
commit
84766cad5a
1 changed files with 44 additions and 0 deletions
|
|
@ -169,6 +169,50 @@ body:has(#itemDetailPage) html::after,
|
|||
0 12px 40px rgba(0, 0, 0, 0.5) !important;
|
||||
}
|
||||
|
||||
/* --- Media Bar Plugin --- */
|
||||
|
||||
/* Slide card: glass surface instead of solid */
|
||||
.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;
|
||||
box-shadow:
|
||||
0 0 0 1px rgba(255, 255, 255, 0.04) inset,
|
||||
0 8px 32px rgba(0, 0, 0, 0.4) !important;
|
||||
}
|
||||
|
||||
/* Soften the dark bottom overlay — let the backdrop bleed through */
|
||||
.backdrop-overlay {
|
||||
background: linear-gradient(
|
||||
0deg,
|
||||
rgba(8, 9, 12, 0.82) 0%,
|
||||
rgba(8, 9, 12, 0.3) 45%,
|
||||
transparent 100%
|
||||
) !important;
|
||||
}
|
||||
|
||||
/* Fade the backdrop edges into the page */
|
||||
.backdrop,
|
||||
.backdrop-container {
|
||||
mask-image: linear-gradient(
|
||||
180deg,
|
||||
transparent 0%,
|
||||
rgba(0,0,0,0.6) 10%,
|
||||
rgba(0,0,0,1) 40%,
|
||||
rgba(0,0,0,0.8) 80%,
|
||||
transparent 100%
|
||||
) !important;
|
||||
-webkit-mask-image: linear-gradient(
|
||||
180deg,
|
||||
transparent 0%,
|
||||
rgba(0,0,0,0.6) 10%,
|
||||
rgba(0,0,0,1) 40%,
|
||||
rgba(0,0,0,0.8) 80%,
|
||||
transparent 100%
|
||||
) !important;
|
||||
}
|
||||
|
||||
/* Frutiger Aero glassmorphism drawer */
|
||||
.mainDrawer {
|
||||
background:
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue