thePR0M3TH3AN/bitvid
1
0 Fork 0
mirror of https://github.com/PR0M3TH3AN/bitvid.git synced 2026-10-27 16:02:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Amplify video modal ambient glow

Browse Source
This commit is contained in:
thePR0M3TH3AN committed 2025-10-22 13:53:49 -04:00
1 parent 65b97ef6ad
commit bbfb764f8f
3 files changed
+46 -25
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

css/tailwind.source.css
+38 -17
View File
@@ -1625,45 +1625,66 @@
@apply flex flex-col gap-4;
}
.video-modal__video {
.video-modal__stage {
position: relative;
isolation: isolate;
--video-modal-ambient-bleed: clamp(var(--space-sm), 6vw, var(--space-xl));
--video-modal-ambient-opacity: 0.52;
--video-modal-ambient-bleed: clamp(var(--space-lg), 8vw, var(--space-3xl));
--video-modal-ambient-scale: 1.18;
--video-modal-ambient-blur: clamp(88px, 14vw, 192px);
--video-modal-ambient-opacity: 0.86;
--video-modal-ambient-overlay-opacity: 0.32;
--video-modal-ambient-translate-y: clamp(-0.5rem, -1.6vw, -1.1rem);
}
.video-modal__video {
position: relative;
z-index: 1;
background-color: var(--color-surface);
border-radius: var(--radius-xl);
padding-block: clamp(var(--space-xs), 2.5vw, var(--space-md-plus));
}
.video-modal__video > :not(.video-modal__ambient) {
position: relative;
z-index: 1;
}
.video-modal__ambient {
position: absolute;
inset: calc(var(--video-modal-ambient-bleed) * -1);
z-index: 0;
pointer-events: none;
overflow: hidden;
border-radius: calc(var(--radius-xl) + var(--video-modal-ambient-bleed));
background: var(--color-overlay);
display: grid;
place-items: center;
}
.video-modal__ambient::before {
content: "";
position: absolute;
inset: calc(var(--video-modal-ambient-bleed) * -0.35);
border-radius: calc(var(--radius-2xl) + var(--video-modal-ambient-bleed));
background: color-mix(
in srgb,
var(--color-overlay-strong) 72%,
var(--color-overlay-strong) 64%,
transparent
);
opacity: var(--video-modal-ambient-opacity);
opacity: var(--video-modal-ambient-overlay-opacity);
filter: blur(calc(var(--video-modal-ambient-blur) * 0.45));
transform: translate3d(0, var(--video-modal-ambient-translate-y), 0)
scale(1.04);
}
.video-modal__ambient-canvas {
position: absolute;
inset: 0;
position: relative;
width: 100%;
height: 100%;
transform: scale(1.15);
transform-origin: center;
filter: blur(88px) saturate(1.1) brightness(0.55);
transform: translate3d(0, var(--video-modal-ambient-translate-y), 0)
scale(var(--video-modal-ambient-scale));
filter: blur(var(--video-modal-ambient-blur)) saturate(1.28)
brightness(0.75);
opacity: var(--video-modal-ambient-opacity);
mask-image: radial-gradient(
circle,
color-mix(in srgb, var(--color-black) 88%, transparent) 0%,
color-mix(in srgb, var(--color-black) 70%, transparent) 58%,
transparent 100%
);
}
@media (min-width: theme('screens.lg')) {