kyle/SignageHTML
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
f2e5f23b1896ee7a18d906b565a5fca68420d045
SignageHTML/public/css/main.css
kyle 60e41c2cc4 Kiosk UI/UX overhaul: dark landscape mode with hero countdowns and full-width layout 
Redesign the landscape orientation for kiosk readability at 3-10m distance:

- Add dark kiosk background (#1a1a2e) with high-contrast light text
- Replace 2-column grid with 5-row full-width stacking layout
- Add compact weather bar (temp + sunrise/sunset) replacing full widget
- Enlarge countdown to 2em hero size in landscape
- Replace time ranges with next 2-3 absolute departure times
- Add 3-tier urgency colors: Nu (green), 1-2min (red), 3-5min (orange)
- Make site headers full-width blue gradient bars in landscape
- Tighten card spacing (65px min-height, 8px gap) for 4-stop visibility
- Add scrolling news ticker with /api/ticker fallback messages
- Fix daylight bar from position:fixed to relative in landscape grid
- Hide background overlay in landscape for maximum contrast
- Fix weather-section HTML missing closing div tags

All changes scoped behind body.landscape CSS selectors; other orientations unaffected.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-15 19:12:08 +01:00

433 lines
9.2 KiB
CSS
Raw Blame History

/* ========================================
CSS Custom Properties
======================================== */
:root {
--color-primary: #0061a1;
--color-primary-dark: #004d80;
--color-primary-light: #0077cc;
--color-accent: #4fc3f7;
--color-bg: #f5f5f5;
--color-bg-dark: #222;
--color-text: #333;
--color-text-light: #f5f5f5;
--color-text-muted: #666;
--color-text-muted-dark: #aaa;
--color-urgent: #c41e3a;
--color-urgent-dark: #ff6b6b;
--color-soon: #e67e22;
--color-soon-dark: #f39c12;
--color-now: #00a651;
--color-now-dark: #4ecdc4;
--color-border: #ddd;
--color-border-dark: #555;
--color-surface: white;
--color-surface-dark: #333;
--color-surface-darker: #444;
--radius-sm: 4px;
--radius-md: 6px;
--radius-lg: 8px;
--shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
--shadow-md: 0 4px 8px rgba(0, 0, 0, 0.2);
--gradient-blue: linear-gradient(135deg, #0061a1 0%, #004d80 100%);
--kiosk-gap: 8px;
--kiosk-countdown-size: 2em;
--ticker-height: 36px;
--ticker-speed: 30s;
--ticker-bg: rgba(0, 0, 0, 0.85);
}
/* ========================================
Base Styles
======================================== */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: var(--color-bg);
color: var(--color-text);
transition: background-color 0.5s ease, color 0.5s ease;
height: 100vh;
overflow: hidden;
}
/* For normal orientation on narrow screens, add padding */
@media (max-width: 1199px) {
body.normal {
padding: 20px;
}
}
/* Auto-apply wide layout for normal orientation on large screens */
@media (min-width: 1200px) {
body.normal {
max-width: 100%;
padding: 8px 12px 0 12px;
}
body.normal #content-wrapper {
display: grid;
grid-template-rows: auto 1fr auto;
gap: 8px;
height: 100vh;
max-height: 100vh;
overflow: hidden;
}
body.normal .clock-container {
grid-row: 1;
margin-bottom: 0;
padding: 6px 16px;
}
body.normal .main-content-grid {
grid-row: 2;
display: block;
overflow-y: auto;
overflow-x: hidden;
min-height: 0;
width: 100%;
}
body.normal .departure-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 6px;
margin-bottom: 0;
width: 100%;
box-sizing: border-box;
padding: 0;
}
body.normal .departure-container > * {
min-width: 0;
max-width: 100%;
}
body.normal .weather-section {
grid-row: 3;
position: sticky;
bottom: 35px;
background-color: inherit;
padding: 8px 0 0 0;
margin-top: 0;
}
body.normal .weather-container {
margin: 0;
max-width: 100%;
}
}
/* ========================================
Dark Mode - Layout-level overrides only
======================================== */
body.dark-mode {
background-color: var(--color-bg-dark);
color: var(--color-text-light);
}
body.dark-mode .departure-card {
background-color: var(--color-surface-dark);
border-left-color: var(--color-primary-light);
}
/* ========================================
Orientation: Normal
======================================== */
body.normal {
max-width: 800px;
}
body.normal .departure-container {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
/* ========================================
Orientation: Landscape (Kiosk Mode)
======================================== */
body.landscape {
max-width: 100%;
padding: 10px 20px 0 20px;
background-color: #1a1a2e;
color: var(--color-text-light);
}
/* Hide background overlay in landscape for maximum contrast */
body.landscape #background-overlay {
display: none !important;
}
body.landscape #content-wrapper {
display: grid;
grid-template-rows: auto auto 1fr auto auto;
gap: var(--kiosk-gap);
height: 100vh;
max-height: 100vh;
overflow: hidden;
}
body.landscape .clock-container {
grid-row: 1;
margin-bottom: 0;
}
/* Compact weather bar sits in row 2 */
body.landscape #compact-weather-bar {
grid-row: 2;
}
body.landscape .main-content-grid {
grid-row: 3;
display: block;
overflow: hidden;
min-height: 0;
}
/* Hide the full weather widget in landscape */
body.landscape .weather-section {
display: none;
}
body.landscape .departure-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
gap: var(--kiosk-gap);
overflow-y: auto;
overflow-x: hidden;
padding-right: 4px;
min-height: 0;
height: 100%;
}
body.landscape .weather-container {
overflow-y: auto;
overflow-x: hidden;
max-height: 100%;
position: sticky;
top: 0;
align-self: start;
}
body.landscape .departure-card {
min-height: 65px;
background-color: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.06);
}
body.landscape .line-number-box {
min-width: 90px;
width: 90px;
}
body.landscape .line-number-large {
font-size: 3.5em;
}
body.landscape .site-container {
margin-bottom: 6px;
}
body.landscape .site-header {
font-size: 1em;
padding: 0;
margin-bottom: 6px;
}
/* News ticker sits in row 4 */
body.landscape #news-ticker {
grid-row: 4;
}
/* Daylight bar sits in row 5 */
body.landscape #daylight-hours-bar {
grid-row: 5;
}
/* Dark card surfaces for landscape */
body.landscape .direction-destination {
color: var(--color-text-light);
}
body.landscape .countdown-large {
color: var(--color-text-light);
}
body.landscape .time-range,
body.landscape .next-departures {
color: #bbb;
}
/* Tighter card spacing in landscape */
body.landscape .directions-wrapper {
padding: 4px 8px;
gap: 2px;
}
body.landscape .direction-row {
min-height: 28px;
gap: 6px;
}
/* Hero countdown in landscape */
body.landscape .countdown-large {
font-size: var(--kiosk-countdown-size);
}
body.landscape .times-container {
min-width: 130px;
max-width: 160px;
}
body.landscape .next-departures {
font-size: 0.7em;
color: #bbb;
white-space: nowrap;
letter-spacing: 0.5px;
}
/* ========================================
Orientation: Vertical (90deg)
======================================== */
body.vertical {
max-width: 100%;
height: 100vh;
padding: 0;
margin: 0;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
body.vertical #content-wrapper {
transform: rotate(90deg);
transform-origin: center center;
position: absolute;
width: 100vh;
height: 100vw;
max-width: 800px;
padding: 20px;
box-sizing: border-box;
overflow-y: auto;
background-color: transparent;
left: 50%;
top: 50%;
margin-left: -50vh;
margin-top: -50vw;
}
body.vertical .config-button {
transform: rotate(-90deg);
position: fixed;
right: 10px;
bottom: 10px;
z-index: 1000;
}
body.vertical .departure-container {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
/* ========================================
Orientation: Upside Down (180deg)
======================================== */
body.upsidedown {
max-width: 100%;
height: 100vh;
padding: 0;
margin: 0;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
body.upsidedown #content-wrapper {
transform: rotate(180deg);
transform-origin: center center;
position: absolute;
width: 100%;
max-width: 800px;
padding: 20px;
box-sizing: border-box;
overflow-y: auto;
background-color: transparent;
left: 50%;
top: 50%;
transform: rotate(180deg) translate(50%, 50%);
}
body.upsidedown .config-button {
transform: rotate(-180deg);
position: fixed;
right: 10px;
bottom: 10px;
z-index: 1000;
}
body.upsidedown .departure-container {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
/* ========================================
Orientation: Vertical Reverse (270deg)
======================================== */
body.vertical-reverse {
max-width: 100%;
height: 100vh;
padding: 0;
margin: 0;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
body.vertical-reverse #content-wrapper {
transform: rotate(270deg);
transform-origin: center center;
position: absolute;
width: 100vh;
height: 100vw;
max-width: none;
padding: 20px;
box-sizing: border-box;
overflow: visible;
background-color: transparent;
left: 50%;
top: 50%;
margin-left: -50vh;
margin-top: -50vw;
}
body.vertical-reverse .config-button {
transform: rotate(-270deg);
position: fixed;
right: 10px;
bottom: 10px;
z-index: 1000;
}
body.vertical-reverse .departure-container {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
width: 100%;
}
/* ========================================
Mode Indicator
======================================== */
.mode-indicator {
font-size: 0.7em;
color: var(--color-text-muted);
font-weight: normal;
display: inline;
}
Reference in New Issue View Git Blame Copy Permalink