alee/stegasoo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Form labels: shine sweeps across top edge only

Browse Source
This commit is contained in:
Aaron D. Lee
2026-01-07 19:36:08 -05:00
parent 241cdadd25
commit 62bd31d0aa
1 changed files with 24 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
frontends/web/static/style.css
View File

@@ -117,27 +117,34 @@
} }
/* ---------------------------------------------------------------------------- /* ----------------------------------------------------------------------------
Form Labels - Gold with Moving Shine Form Labels - Gold with Top Shine
---------------------------------------------------------------------------- */ ---------------------------------------------------------------------------- */
.card .form-label { .card .form-label {
color: transparent; color: #ffe699;
background: linear-gradient( position: relative;
90deg, display: inline-block;
#ffe699 0%,
#ffe699 40%,
#fffef0 50%,
#ffe699 60%,
#ffe699 100%
);
background-size: 200% 100%;
background-clip: text;
-webkit-background-clip: text;
animation: label-shine 4s linear infinite;
} }
@keyframes label-shine { .card .form-label::before {
0% { background-position: 100% 0; } content: '';
100% { background-position: -100% 0; } position: absolute;
top: 0;
left: -100%;
width: 60%;
height: 40%;
background: linear-gradient(
90deg,
transparent 0%,
rgba(255, 255, 240, 0.7) 50%,
transparent 100%
);
animation: top-shine 4s ease-in-out infinite;
pointer-events: none;
}
@keyframes top-shine {
0%, 100% { left: -100%; }
50% { left: 140%; }
} }
/* ---------------------------------------------------------------------------- /* ----------------------------------------------------------------------------