gsadmin/sencho
1
0
Fork 0
mirror of https://github.com/Studio-Saelix/sencho.git synced 2026-08-31 20:58:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: improve masthead rail glow visibility

Browse Source 
Replaced the invisible inset box-shadow glow (10px blur inside a 3px
element) with a white overlay that pulses opacity 0.15-0.55 over 4s.
Sped up glow animation from 5.5s to 4s for a more noticeable breath.
This commit is contained in:
SaelixCode
2026-07-02 12:19:07 -04:00
parent d42a30967d
commit ea02762f0a
2 changed files with 4 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/ui/MastheadRail.tsx
+1 -1
View File
@@ -16,7 +16,7 @@ export function MastheadRail({ variant, className }: MastheadRailProps) {
{variant === 'shimmer' ? ( {variant === 'shimmer' ? (
<div className="masthead-rail-shimmer absolute inset-x-0 h-1/3 bg-gradient-to-b from-transparent via-white/50 to-transparent" /> <div className="masthead-rail-shimmer absolute inset-x-0 h-1/3 bg-gradient-to-b from-transparent via-white/50 to-transparent" />
) : ( ) : (
<div className="masthead-rail-glow absolute inset-0" /> <div className="masthead-rail-glow absolute inset-0 bg-white/20" />
)} )}
</div> </div>
); );
frontend/src/index.css
+3 -3
View File
@@ -717,8 +717,8 @@ body {
100% { transform: translateY(200%); } 100% { transform: translateY(200%); }
} }
@keyframes masthead-rail-glow { @keyframes masthead-rail-glow {
0%, 100% { opacity: 0.55; box-shadow: inset 0 0 0 0 transparent; } 0%, 100% { opacity: 0.15; }
50% { opacity: 1; box-shadow: inset 0 0 10px 0 oklch(1 0 0 / 0.12); } 50% { opacity: 0.55; }
} }
/* ───────────────────────────────────────────────────────────── /* ─────────────────────────────────────────────────────────────
@@ -746,7 +746,7 @@ body {
animation: shimmer 5s ease-in-out infinite alternate; animation: shimmer 5s ease-in-out infinite alternate;
} }
.masthead-rail-glow { .masthead-rail-glow {
animation: masthead-rail-glow 5.5s ease-in-out infinite alternate; animation: masthead-rail-glow 4s ease-in-out infinite alternate;
} }
/* Stagger delay helpers */ /* Stagger delay helpers */