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>
This commit is contained in:
@@ -825,7 +825,20 @@ body.dark-mode .countdown-large.now {
|
||||
text-shadow: 0 0 8px #4ecdc4, 0 0 12px #4ecdc4, 0 0 16px rgba(78, 205, 196, 0.9);
|
||||
}
|
||||
|
||||
/* Time range */
|
||||
/* Soon tier (3-5 min) - orange */
|
||||
.countdown-large.soon {
|
||||
color: var(--color-soon);
|
||||
animation: pulse-glow 3s ease-in-out infinite;
|
||||
text-shadow: 0 0 6px #e67e22, 0 0 10px rgba(230, 126, 34, 0.7);
|
||||
}
|
||||
|
||||
body.dark-mode .countdown-large.soon,
|
||||
body.landscape .countdown-large.soon {
|
||||
color: var(--color-soon-dark);
|
||||
text-shadow: 0 0 8px #f39c12, 0 0 12px #f39c12, 0 0 16px rgba(243, 156, 18, 0.8);
|
||||
}
|
||||
|
||||
/* Time range (legacy) */
|
||||
.time-range {
|
||||
font-size: 0.85em;
|
||||
color: var(--color-text-muted);
|
||||
@@ -837,6 +850,18 @@ body.dark-mode .time-range {
|
||||
color: var(--color-text-muted-dark);
|
||||
}
|
||||
|
||||
/* Next departures (replaces time-range) */
|
||||
.next-departures {
|
||||
font-size: 0.8em;
|
||||
color: var(--color-text-muted);
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
body.dark-mode .next-departures {
|
||||
color: var(--color-text-muted-dark);
|
||||
}
|
||||
|
||||
/* Weather widget styles */
|
||||
.weather-container {
|
||||
margin: 20px 0;
|
||||
@@ -1091,6 +1116,86 @@ body.vertical-reverse #custom-weather {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Landscape: Prominent site headers */
|
||||
body.landscape .site-container {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
body.landscape .site-header {
|
||||
grid-column: 1 / -1;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
body.landscape .site-name {
|
||||
display: block;
|
||||
background: linear-gradient(135deg, #0061a1 0%, #003d66 100%);
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
padding: 6px 16px;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 8px rgba(0, 97, 161, 0.4);
|
||||
font-size: 0.85em;
|
||||
}
|
||||
|
||||
/* Compact weather bar - hidden by default, shown in landscape */
|
||||
#compact-weather-bar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body.landscape #compact-weather-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 16px;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
color: #ddd;
|
||||
padding: 6px 20px;
|
||||
border-radius: 4px;
|
||||
font-size: 0.95em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#compact-weather-bar .weather-bar-icon {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
#compact-weather-bar .weather-bar-sep {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
/* News ticker - hidden by default, shown in landscape */
|
||||
#news-ticker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body.landscape #news-ticker {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
background: var(--ticker-bg);
|
||||
height: var(--ticker-height);
|
||||
line-height: var(--ticker-height);
|
||||
border-radius: 4px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#news-ticker .ticker-content {
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
animation: ticker-scroll var(--ticker-speed) linear infinite;
|
||||
color: #ddd;
|
||||
font-size: 0.9em;
|
||||
padding-left: 100%;
|
||||
}
|
||||
|
||||
@keyframes ticker-scroll {
|
||||
0% { transform: translateX(0); }
|
||||
100% { transform: translateX(-50%); }
|
||||
}
|
||||
|
||||
.error {
|
||||
color: red;
|
||||
text-align: center;
|
||||
@@ -1138,6 +1243,12 @@ body.vertical-reverse #custom-weather {
|
||||
text-shadow: 0 0 8px rgba(255, 215, 0, 0.6);
|
||||
}
|
||||
|
||||
/* Landscape: daylight bar sits in grid instead of fixed overlay */
|
||||
body.landscape #daylight-hours-bar {
|
||||
position: relative;
|
||||
z-index: auto;
|
||||
}
|
||||
|
||||
/* Dark mode adjustments for daylight bar */
|
||||
body.dark-mode #daylight-hours-bar .daylight-bar-background {
|
||||
background-color: #0a0a2e;
|
||||
@@ -1560,7 +1671,12 @@ body.dark-mode .time-range {
|
||||
/* Reduced motion preference */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.countdown-large.urgent,
|
||||
.countdown-large.now {
|
||||
.countdown-large.now,
|
||||
.countdown-large.soon {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
#news-ticker .ticker-content {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
|
||||
@@ -14,6 +14,8 @@
|
||||
--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;
|
||||
@@ -27,6 +29,11 @@
|
||||
--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);
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
@@ -138,17 +145,24 @@ body.normal .departure-container {
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
Orientation: Landscape
|
||||
Orientation: Landscape (Kiosk Mode)
|
||||
======================================== */
|
||||
body.landscape {
|
||||
max-width: 100%;
|
||||
padding: 20px 40px;
|
||||
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 1fr;
|
||||
gap: 20px;
|
||||
grid-template-rows: auto auto 1fr auto auto;
|
||||
gap: var(--kiosk-gap);
|
||||
height: 100vh;
|
||||
max-height: 100vh;
|
||||
overflow: hidden;
|
||||
@@ -159,23 +173,32 @@ body.landscape .clock-container {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
body.landscape .main-content-grid {
|
||||
/* Compact weather bar sits in row 2 */
|
||||
body.landscape #compact-weather-bar {
|
||||
grid-row: 2;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 380px;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
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(450px, 1fr));
|
||||
gap: 15px;
|
||||
grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
|
||||
gap: var(--kiosk-gap);
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
padding-right: 10px;
|
||||
padding-right: 4px;
|
||||
min-height: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body.landscape .weather-container {
|
||||
@@ -188,12 +211,14 @@ body.landscape .weather-container {
|
||||
}
|
||||
|
||||
body.landscape .departure-card {
|
||||
min-height: 120px;
|
||||
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: 120px;
|
||||
width: 120px;
|
||||
min-width: 90px;
|
||||
width: 90px;
|
||||
}
|
||||
|
||||
body.landscape .line-number-large {
|
||||
@@ -201,12 +226,65 @@ body.landscape .line-number-large {
|
||||
}
|
||||
|
||||
body.landscape .site-container {
|
||||
margin-bottom: 15px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
body.landscape .site-header {
|
||||
font-size: 1em;
|
||||
padding: 8px 12px;
|
||||
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;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
|
||||
Reference in New Issue
Block a user