alexei.dolgolyov/wled-screen-controller-mixed
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Enhance app title with Orbitron font, gradient shimmer, and text stroke

Browse Source 
Load Orbitron from Google Fonts for the h1 title and version badge.
Add animated gradient shimmer sweep and accent-colored text outline.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Admin
2026-03-12 11:51:09 +03:00
parent e97ef3afa6
commit b62f8b8eaa
2 changed files with 31 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
server/src/wled_controller/static/css/layout.css
View File

@@ -17,8 +17,31 @@ header {
}
h1 {
font-size: 1.25rem;
color: var(--primary-text-color);
font-family: 'Orbitron', sans-serif;
font-size: 1.15rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
-webkit-text-stroke: 0.5px var(--primary-color);
paint-order: stroke fill;
background: linear-gradient(
120deg,
var(--primary-color) 0%,
var(--primary-text-color) 35%,
var(--primary-color) 50%,
var(--primary-text-color) 65%,
var(--primary-color) 100%
);
background-size: 250% 100%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: titleShimmer 6s ease-in-out infinite;
}
@keyframes titleShimmer {
0%, 100% { background-position: 100% 50%; }
50% { background-position: 0% 50%; }
}
h2 {
@@ -78,8 +101,9 @@ h2 {
}
#server-version {
font-size: 0.75rem;
font-weight: 400;
font-family: 'Orbitron', sans-serif;
font-size: 0.65rem;
font-weight: 700;
color: var(--text-secondary);
background: var(--border-color);
padding: 2px 8px;