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

Refine video modal ambient glow

Browse Source
This commit is contained in:
thePR0M3TH3AN committed 2025-10-22 13:39:08 -04:00
1 parent 98336ccd4c
commit 65b97ef6ad
3 files changed
+48 -32
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

css/tailwind.source.css
+39 -26
View File
@@ -1410,31 +1410,6 @@
box-shadow: none;
}
.video-modal__panel > :not(.video-modal__ambient) {
position: relative;
z-index: 1;
}
.video-modal__ambient {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
overflow: hidden;
border-radius: inherit;
background: var(--color-overlay-strong);
}
.video-modal__ambient-canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
transform: scale(1.08);
transform-origin: center;
filter: blur(40px) saturate(1.25) brightness(0.8);
}
#playerModal .watch-container {
width: 100%;
max-width: var(--player-modal-inline-max, var(--layout-player-max-width));
@@ -1652,10 +1627,45 @@
.video-modal__video {
position: relative;
background-color: var(--color-black);
isolation: isolate;
--video-modal-ambient-bleed: clamp(var(--space-sm), 6vw, var(--space-xl));
--video-modal-ambient-opacity: 0.52;
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);
background: color-mix(
in srgb,
var(--color-overlay-strong) 72%,
transparent
);
opacity: var(--video-modal-ambient-opacity);
}
.video-modal__ambient-canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
transform: scale(1.15);
transform-origin: center;
filter: blur(88px) saturate(1.1) brightness(0.55);
}
@media (min-width: theme('screens.lg')) {
.video-modal__video {
position: sticky;
@@ -1664,6 +1674,9 @@
}
#playerModal .video-modal__video video {
position: relative;
z-index: 1;
background-color: var(--color-black);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-video-modal);
max-height: min(80vh, calc(100vw * 9 / 16));