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

Fix header border contrast in light and dark modes

Browse Source
This commit is contained in:
Avery Felts 2026-01-28 09:17:04 -07:00
parent 38fc84e57c
commit c4a6225edf
1 changed files with 3 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/UserHeader.tsx
View File

@ -217,14 +217,14 @@ export function UserHeader({ user, preferences }: UserHeaderProps) {
? 'rgba(255, 255, 255, 0.98)'
: 'rgba(10, 10, 20, 0.99)',
backdropFilter: 'blur(16px)',
borderBottom: theme === 'light' ? '1px solid rgba(0,0,0,0.05)' : '1px solid rgba(255,255,255,0.08)'
borderBottom: theme === 'light' ? '1px solid rgba(0,0,0,0.12)' : '1px solid rgba(255,255,255,0.04)'
}}>
{/* Cloudy/Foggy effect overlay with tight edge feathering */}
<div
className="absolute inset-0 pointer-events-none select-none overflow-hidden invert dark:invert-0 transition-opacity duration-500"
style={{
maskImage: 'linear-gradient(to bottom, transparent 0%, black 2%, black 98%, transparent 100%)',
WebkitMaskImage: 'linear-gradient(to bottom, transparent 0%, black 2%, black 98%, transparent 100%)'
maskImage: 'linear-gradient(to bottom, transparent 0%, black 4%, black 96%, transparent 100%)',
WebkitMaskImage: 'linear-gradient(to bottom, transparent 0%, black 4%, black 96%, transparent 100%)'
}}
>
<div className="absolute inset-0 fog-layer-1 opacity-[0.25] dark:opacity-[0.2]" />