OTSSigns/OTSSigns-Website
1
0
Fork 0
Code Issues Pull Requests 6 Actions Packages Projects Releases Wiki Activity

Refactor splash and promotional elements to use CSS variables for primary color

Browse Source
This commit is contained in:
Matt Batchelder
2026-02-21 13:46:21 -05:00
parent 75588a5151
commit 82a2dacbef
1 changed files with 15 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
theme/assets/css/main.css
View File

@@ -5139,9 +5139,9 @@ p:last-child { margin-bottom: 0; }
.bd-splash__logo { .bd-splash__logo {
width: 28px; width: 28px;
height: 28px; height: 28px;
background: #4CAF50; background: var(--color-primary);
border-radius: 6px; border-radius: 6px;
box-shadow: 0 0 20px rgba(76,175,80,.5), 0 0 50px rgba(76,175,80,.15); box-shadow: 0 0 20px rgba(var(--color-primary-rgb),.5), 0 0 50px rgba(var(--color-primary-rgb),.15);
animation: bd-logo-pulse 8s ease-in-out infinite; animation: bd-logo-pulse 8s ease-in-out infinite;
} }
.bd-device--wall .bd-splash__logo { .bd-device--wall .bd-splash__logo {
@@ -5173,21 +5173,21 @@ p:last-child { margin-bottom: 0; }
align-items: center; align-items: center;
gap: 4px; gap: 4px;
padding: 4px 5px; padding: 4px 5px;
background: rgba(76,175,80,.15); background: rgba(var(--color-primary-rgb),.15);
border-bottom: 1px solid rgba(76,175,80,.25); border-bottom: 1px solid rgba(var(--color-primary-rgb),.25);
flex-shrink: 0; flex-shrink: 0;
} }
.bd-ui__logo { .bd-ui__logo {
width: 10px; width: 10px;
height: 10px; height: 10px;
background: #4CAF50; background: var(--color-primary);
border-radius: 3px; border-radius: 3px;
flex-shrink: 0; flex-shrink: 0;
} }
.bd-ui__brand-bar { .bd-ui__brand-bar {
flex: 1; flex: 1;
height: 4px; height: 4px;
background: rgba(76,175,80,.4); background: rgba(var(--color-primary-rgb),.4);
border-radius: 2px; border-radius: 2px;
max-width: 50px; max-width: 50px;
animation: bd-bar-grow 8s ease-in-out infinite; animation: bd-bar-grow 8s ease-in-out infinite;
@@ -5222,10 +5222,10 @@ p:last-child { margin-bottom: 0; }
min-height: 16px; min-height: 16px;
background: linear-gradient( background: linear-gradient(
135deg, 135deg,
rgba(76,175,80,.10) 0%, rgba(var(--color-primary-rgb),.10) 0%,
rgba(76,175,80,.05) 100% rgba(var(--color-primary-rgb),.05) 100%
); );
border: 1px solid rgba(76,175,80,.12); border: 1px solid rgba(var(--color-primary-rgb),.12);
} }
/* ── Promotional content layouts ─────────────────────── */ /* ── Promotional content layouts ─────────────────────── */
@@ -5246,7 +5246,7 @@ p:last-child { margin-bottom: 0; }
width: 100%; width: 100%;
flex: 1; flex: 1;
min-height: 28px; min-height: 28px;
background: linear-gradient(135deg, rgba(76,175,80,.18) 0%, rgba(76,175,80,.06) 100%); background: linear-gradient(135deg, rgba(var(--color-primary-rgb),.18) 0%, rgba(var(--color-primary-rgb),.06) 100%);
border-radius: 2px; border-radius: 2px;
} }
.bd-promo__heading { .bd-promo__heading {
@@ -5264,7 +5264,7 @@ p:last-child { margin-bottom: 0; }
.bd-promo__btn { .bd-promo__btn {
width: 45%; width: 45%;
height: 8px; height: 8px;
background: #4CAF50; background: var(--color-primary);
border-radius: 3px; border-radius: 3px;
margin-top: 2px; margin-top: 2px;
} }
@@ -5280,7 +5280,7 @@ p:last-child { margin-bottom: 0; }
} }
.bd-promo__visual { .bd-promo__visual {
flex: 1; flex: 1;
background: linear-gradient(160deg, rgba(76,175,80,.20) 0%, rgba(76,175,80,.06) 100%); background: linear-gradient(160deg, rgba(var(--color-primary-rgb),.20) 0%, rgba(var(--color-primary-rgb),.06) 100%);
border-radius: 2px; border-radius: 2px;
min-height: 24px; min-height: 24px;
} }
@@ -5339,7 +5339,7 @@ p:last-child { margin-bottom: 0; }
} }
.bd-promo__tile-img { .bd-promo__tile-img {
flex: 1; flex: 1;
background: linear-gradient(135deg, rgba(76,175,80,.14) 0%, rgba(76,175,80,.04) 100%); background: linear-gradient(135deg, rgba(var(--color-primary-rgb),.14) 0%, rgba(var(--color-primary-rgb),.04) 100%);
} }
.bd-promo__tile-lbl { .bd-promo__tile-lbl {
height: 4px; height: 4px;
@@ -5363,8 +5363,8 @@ p:last-child { margin-bottom: 0; }
/* Logo pulse glow during splash */ /* Logo pulse glow during splash */
@keyframes bd-logo-pulse { @keyframes bd-logo-pulse {
0%, 25% { transform: scale(1); box-shadow: 0 0 20px rgba(76,175,80,.5), 0 0 50px rgba(76,175,80,.15); } 0%, 25% { transform: scale(1); box-shadow: 0 0 20px rgba(var(--color-primary-rgb),.5), 0 0 50px rgba(var(--color-primary-rgb),.15); }
12% { transform: scale(1.08); box-shadow: 0 0 28px rgba(76,175,80,.7), 0 0 60px rgba(76,175,80,.25); } 12% { transform: scale(1.08); box-shadow: 0 0 28px rgba(var(--color-primary-rgb),.7), 0 0 60px rgba(var(--color-primary-rgb),.25); }
35%, 100% { transform: scale(0.6); opacity: 0; } 35%, 100% { transform: scale(0.6); opacity: 0; }
} }