kyle/SignageHTML
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: consolidate hardcoded colors into CSS custom properties

Browse Source 
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
kyle
2026-02-15 19:48:19 +01:00
parent 1e776c1c9a
commit 2b7fc6b016
2 changed files with 17 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
public/css/components.css
View File

@@ -350,7 +350,7 @@ body.dark-mode .site-search-result div:first-child {
} }
body.dark-mode .site-search-result div:last-child { body.dark-mode .site-search-result div:last-child {
color: var(--color-text-muted-dark); color: var(--color-text-secondary);
} }
#search-site-button { #search-site-button {
@@ -858,7 +858,7 @@ body.landscape .countdown-large.soon {
} }
body.dark-mode .time-range { body.dark-mode .time-range {
color: var(--color-text-muted-dark); color: var(--color-text-secondary);
} }
/* Next departures (replaces time-range) */ /* Next departures (replaces time-range) */
@@ -1160,7 +1160,7 @@ body.landscape #compact-weather-bar {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 16px; gap: 16px;
background: rgba(0, 0, 0, 0.5); background: var(--color-bar-bg);
color: #ddd; color: #ddd;
padding: 6px 20px; padding: 6px 20px;
border-radius: 4px; border-radius: 4px;
@@ -1233,7 +1233,7 @@ body.landscape #news-ticker {
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: #191970; background-color: var(--color-daylight-night);
background-image: var(--daylight-gradient, none); background-image: var(--daylight-gradient, none);
} }
@@ -1470,18 +1470,6 @@ body.dark-mode .config-search-input:focus-visible {
color: #ccc; color: #ccc;
} }
.site-search-result div:last-child {
color: #777;
}
body.dark-mode .site-search-result div:last-child {
color: #bbb;
}
body.dark-mode .time-range {
color: #bbb;
}
/* ======================================== /* ========================================
Responsive Design - Departure cards Responsive Design - Departure cards
======================================== */ ======================================== */

17
public/css/main.css
View File

@@ -36,6 +36,15 @@
--ticker-bg: rgba(0, 0, 0, 0.85); --ticker-bg: rgba(0, 0, 0, 0.85);
--font-primary: 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif; --font-primary: 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
--font-numbers: 'Segoe UI', 'Roboto Mono', 'SF Mono', 'Consolas', monospace; --font-numbers: 'Segoe UI', 'Roboto Mono', 'SF Mono', 'Consolas', monospace;
--color-bg-kiosk: #1a1a2e;
--color-surface-kiosk: rgba(255, 255, 255, 0.08);
--color-surface-kiosk-hover: rgba(255, 255, 255, 0.12);
--color-text-secondary: #bbb;
--color-text-tertiary: #888;
--color-bar-bg: rgba(0, 0, 0, 0.5);
--color-daylight-night: #191970;
--color-daylight-dawn: #FF6B35;
--color-daylight-day: #FFEB3B;
} }
/* ======================================== /* ========================================
@@ -152,7 +161,7 @@ body.normal .departure-container {
body.landscape { body.landscape {
max-width: 100%; max-width: 100%;
padding: 10px 20px 0 20px; padding: 10px 20px 0 20px;
background-color: #1a1a2e; background-color: var(--color-bg-kiosk);
color: var(--color-text-light); color: var(--color-text-light);
} }
@@ -214,7 +223,7 @@ body.landscape .weather-container {
body.landscape .departure-card { body.landscape .departure-card {
min-height: 65px; min-height: 65px;
background-color: rgba(255, 255, 255, 0.08); background-color: var(--color-surface-kiosk);
border: 1px solid rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.06);
} }
@@ -258,7 +267,7 @@ body.landscape .countdown-large {
body.landscape .time-range, body.landscape .time-range,
body.landscape .next-departures { body.landscape .next-departures {
color: #bbb; color: var(--color-text-secondary);
} }
/* Tighter card spacing in landscape */ /* Tighter card spacing in landscape */
@@ -284,7 +293,7 @@ body.landscape .times-container {
body.landscape .next-departures { body.landscape .next-departures {
font-size: 0.7em; font-size: 0.7em;
color: #bbb; color: var(--color-text-secondary);
white-space: nowrap; white-space: nowrap;
letter-spacing: 0.5px; letter-spacing: 0.5px;
} }