averyfelts/Stop_smoking_website_ver2
1
2
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI: Refactor header layers for instant video visibility and fix layering issues

Browse Source
This commit is contained in:
Avery Felts 2026-01-31 19:30:07 -07:00
parent 27854f8a10
commit 60ca78b9d8
1 changed files with 18 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/components/UserHeader.tsx
View File

@ -229,28 +229,35 @@ export function UserHeader({ user, preferences, onModalStateChange }: UserHeader
return (
<>
<header className="sticky top-0 z-50 transition-colors duration-300 relative overflow-hidden" style={{
background: theme === 'light'
? 'rgba(255, 255, 255, 0.5)'
: 'rgba(10, 10, 20, 0.4)',
backdropFilter: 'blur(12px)',
WebkitBackdropFilter: 'blur(12px)',
<header className="sticky top-0 z-50 relative overflow-hidden h-16 sm:h-20" style={{
borderBottom: theme === 'light' ? '1px solid rgba(0,0,0,0.08)' : '1px solid rgba(255,255,255,0.08)'
}}>
{/* Smoke Video Background */}
<div className="absolute inset-0 z-[-1] overflow-hidden pointer-events-none">
{/* Background Layers */}
<div className="absolute inset-0 z-[-1] pointer-events-none overflow-hidden">
{/* Base Color & Blur Layer */}
<div
className="absolute inset-0 transition-colors duration-500"
style={{
background: theme === 'light' ? 'rgba(255, 255, 255, 0.4)' : 'rgba(10, 10, 20, 0.35)',
backdropFilter: 'blur(20px)',
WebkitBackdropFilter: 'blur(20px)',
}}
/>
{/* Smoke Video background */}
<video
ref={videoRef}
autoPlay
loop
muted
playsInline
className="absolute min-w-full min-h-full object-cover scale-110 opacity-70 dark:opacity-50 brightness-[1.0] dark:brightness-[0.8]"
className="absolute inset-0 w-full h-full object-cover scale-110 opacity-70 dark:opacity-50 brightness-[1.1] dark:brightness-[0.85] transition-opacity duration-1000"
>
<source src="/videos/smoke.mp4" type="video/mp4" />
</video>
{/* Subtle Dark Overlay for Text Readability */}
<div className="absolute inset-0 bg-gradient-to-b from-black/20 via-transparent to-black/20 dark:from-black/40 dark:via-transparent dark:to-black/40" />
{/* Vignette/Readability Overlay */}
<div className="absolute inset-0 bg-gradient-to-b from-black/10 via-transparent to-black/30 dark:from-black/40 dark:via-transparent dark:to-black/50" />
</div>
<div className="container mx-auto px-4 h-16 sm:h-20 flex items-center justify-between relative z-50">