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

Boost modal ambient glow reach

Browse Source
This commit is contained in:
thePR0M3TH3AN committed 2025-10-22 14:09:22 -04:00
1 parent bbfb764f8f
commit 312e80bac6
2 files changed
+30 -22
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

css/tailwind.source.css
+28 -20
View File
@@ -1418,6 +1418,7 @@
--player-modal-inline-padding,
clamp(var(--space-md-plus), 4vw, var(--space-2xl))
);
overflow: visible;
}
#playerModal .video-modal__primary > .watch-container:first-child {
@@ -1628,25 +1629,31 @@
.video-modal__stage {
position: relative;
isolation: isolate;
--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);
overflow: visible;
--video-modal-ambient-bleed: clamp(var(--space-xl), 10vw, var(--space-4xl));
--video-modal-ambient-scale: 1.26;
--video-modal-ambient-blur: clamp(128px, 18vw, 256px);
--video-modal-ambient-opacity: 0.96;
--video-modal-ambient-overlay-opacity: 0.45;
--video-modal-ambient-translate-y: clamp(-0.75rem, -2vw, -1.5rem);
}
.video-modal__video {
position: relative;
z-index: 1;
background-color: var(--color-surface);
background-color: color-mix(
in srgb,
var(--color-surface) 78%,
transparent
);
border-radius: var(--radius-xl);
padding-block: clamp(var(--space-xs), 2.5vw, var(--space-md-plus));
overflow: visible;
}
.video-modal__ambient {
position: absolute;
inset: calc(var(--video-modal-ambient-bleed) * -1);
inset: calc(var(--video-modal-ambient-bleed) * -1.35);
z-index: 0;
pointer-events: none;
display: grid;
@@ -1656,17 +1663,18 @@
.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) 64%,
transparent
inset: calc(var(--video-modal-ambient-bleed) * -0.5);
border-radius: calc(var(--radius-3xl) + var(--video-modal-ambient-bleed));
background: radial-gradient(
circle at 50% 48%,
color-mix(in srgb, var(--color-overlay-strong) 38%, transparent) 0%,
color-mix(in srgb, var(--color-overlay) 24%, transparent) 65%,
transparent 100%
);
opacity: var(--video-modal-ambient-overlay-opacity);
filter: blur(calc(var(--video-modal-ambient-blur) * 0.45));
filter: blur(calc(var(--video-modal-ambient-blur) * 0.32));
transform: translate3d(0, var(--video-modal-ambient-translate-y), 0)
scale(1.04);
scale(1.12);
}
.video-modal__ambient-canvas {
@@ -1676,13 +1684,13 @@
transform-origin: center;
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);
filter: blur(var(--video-modal-ambient-blur)) saturate(1.42)
brightness(0.82);
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%,
color-mix(in srgb, var(--color-black) 94%, transparent) 0%,
color-mix(in srgb, var(--color-black) 78%, transparent) 68%,
transparent 100%
);
}