Verspätungsfarbe als Verlauf: bis +2′ grün, gelb 10′, orange 20′, rot 30′, lila 40′, ab 50′ blinkend; Legende als Skala

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01X48pE4bzjHej8w9HyZXCjb
This commit is contained in:
Claude
2026-10-22 20:42:13 +02:00
parent be0de5d619
commit 650f8dca8c
3 changed files with 31 additions and 14 deletions
+6
View File
@@ -24,6 +24,12 @@ h1::before { content: ""; display: inline-block; width: 10px; height: 10px; bord
.seg button[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
.legend { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; color: var(--muted); }
/* Skala 0–50 Minuten, gleiche Stützpunkte wie DELAY_STOPS in app.js */
.legend .scale { flex: 1 1 160px; }
.legend .bar { display: block; height: 7px; border-radius: 4px;
background: linear-gradient(90deg, #16a34a 5%, #eab308 20%, #f97316 40%, #dc2626 60%, #9333ea 80%, #9333ea); }
.legend .ticks { display: flex; justify-content: space-between; font-size: 11px; }
.legend .ticks b { font-weight: normal; }
.legend i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--c); margin-right: 4px; }
#search { margin-top: 8px; }
#q { width: 100%; box-sizing: border-box; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px;