/* =================================================================== * Farbgebung — eine Quelle für Desktop, Android und iOS. * * Bis Fassung 4.2 standen Farben an vier Stellen: in style.css, in * lage-android.css, als Sonderfälle hinter `data-app="1"` und noch einmal * als Zeichenketten im JavaScript. Wer eine Statusfarbe änderte, änderte * sie an einer davon. * * ZWEI SCHEMATA, KEINE MISCHUNG * * hell — Rechner in der Einsatzleitung, Tageslicht, große Fläche * nacht — alles am Fahrzeug und in der Hand: Ein heller Bildschirm im * dunklen Fahrzeug blendet, und die Nachtsicht ist danach für * Minuten hin. Deshalb ist Nacht bei Android und iOS die * Vorgabe und nicht eine Einstellung, die man erst sucht. * * DIE STATUSFARBEN SIND DIE WICHTIGSTEN FARBEN DER ANLAGE. Sie müssen * sich auch dann unterscheiden, wenn jemand rot-grün-blind ist — deshalb * trägt jeder Status zusätzlich ein eigenes Symbol und eine Beschriftung, * und die Helligkeiten liegen weit genug auseinander, um in Graustufen * unterscheidbar zu bleiben. * * Die Farben der Einheitenarten stehen NICHT hier, sondern im Katalog * (Tabelle unit_kind). Sie kommen über --unit-color an das einzelne * Element; wer eine Art ergänzt, ergänzt eine Zeile in der Datenbank und * fasst kein Stylesheet an. * =================================================================== */ :root { /* --- Status ---------------------------------------------------- */ --status-active: #2d7a53; --status-active-soft: #d8f0e2; --status-stale: #b5750a; --status-stale-soft: #fdeccd; /* Warnungen im Verlauf: „zu lange kein Kontakt", „ohne GPS-Fix". Ein eigener Ton, weil ein Zustandsbernstein und eine Warnung im Text nicht dasselbe sind — und weil Orange auf hellem Grund dunkler sein muss als auf dunklem, um lesbar zu bleiben. */ --status-warn: #c2410c; --status-gps-missing: #6d28d9; --status-gps-missing-soft: #ede4ff; --status-battery-low: #c2410c; --status-battery-low-soft: #ffe2d1; --status-offline: #64748b; --status-offline-soft: #e6e9ee; --status-alarm: #b42318; --status-alarm-soft: #ffdcd8; /* --- Flächen und Text (hell) ----------------------------------- */ --bg: #f4efe6; --bg-deep: #ece3d6; --surface: #fffaf4; --surface-raised: #ffffff; --surface-sunken: #f6f0e7; --line: rgba(108, 73, 34, 0.16); --line-strong: rgba(108, 73, 34, 0.3); /* Rand um die Kartenplättchen. Auf der hellen Karte dunkel, auf der dunklen hell — sonst verschwindet ein weißes Plättchen im Schnee und ein blaues nachts im Wald. */ --marker-edge: #1f2937; --text: #26160a; --text-muted: #7d6144; --text-inverted: #fffaf4; /* --- Marke ------------------------------------------------------ */ --accent: #cc4b1d; --accent-strong: #a83a12; --accent-soft: #ffe0d2; --focus: #1d4ed8; /* --- Maße ------------------------------------------------------- */ --radius-sm: 10px; --radius-md: 16px; --radius-lg: 22px; --radius-xl: 28px; --shadow: 0 20px 45px rgba(79, 45, 12, 0.12); --shadow-sharp: 0 2px 8px rgba(30, 20, 10, 0.18); /* Kleinste Fläche, die ein Finger im Einsatz sicher trifft — mit Handschuh. Die 44 px aus den üblichen Gestaltungsrichtlinien gelten für einen nackten Zeigefinger im Sitzen. */ --touch-min: 56px; /* Höhe der Alarmleiste. Wird gemessen gesetzt, nicht geraten: Am Handy bricht sie um und ist dann 110 statt 74 px hoch. Ein geratener Wert hat drei unabhängig gemeldete Fehler erzeugt — „Ton einschalten ohne Funktion", „Alarm quittieren geht nicht" und „Seitenleiste nicht erreichbar" hatten dieselbe Ursache. */ --alarm-height: 0px; /* Systemleisten des Geräts. Ohne diese Polster liegt der unterste Knopf unter der Navigationsleiste von Android. */ --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); --safe-right: env(safe-area-inset-right, 0px); } /* --- Nachtschema --------------------------------------------------- * * Gesetzt über [data-scheme="night"] am . Kein * prefers-color-scheme: Ob das Fahrzeug nachts ausrückt, weiß das * Betriebssystem nicht — die Anlage entscheidet das nach Plattform und * Einheitenart, und die Mannschaft kann es umschalten. * ------------------------------------------------------------------- */ [data-scheme="night"] { --status-active: #3ddc97; --status-active-soft: rgba(61, 220, 151, 0.18); --status-stale: #f5b942; --status-stale-soft: rgba(245, 185, 66, 0.18); --status-warn: #ff9f45; --status-gps-missing: #b18cff; --status-gps-missing-soft: rgba(177, 140, 255, 0.18); --status-battery-low: #ff9f5a; --status-battery-low-soft: rgba(255, 159, 90, 0.18); --status-offline: #94a3b8; --status-offline-soft: rgba(148, 163, 184, 0.18); --status-alarm: #ff5449; --status-alarm-soft: rgba(255, 84, 73, 0.22); --bg: #0b0f17; --bg-deep: #05070c; --surface: #131a26; --surface-raised: #1b2430; --surface-sunken: #0e141d; --line: rgba(148, 163, 184, 0.22); --line-strong: rgba(148, 163, 184, 0.42); --marker-edge: #f8fafc; --text: #f1f5f9; --text-muted: #93a3b8; --text-inverted: #0b0f17; --accent: #ff7a45; --accent-strong: #ff5a1f; --accent-soft: rgba(255, 122, 69, 0.18); --focus: #60a5fa; --shadow: 0 18px 40px rgba(0, 0, 0, 0.55); --shadow-sharp: 0 2px 10px rgba(0, 0, 0, 0.6); } /* Statusfarbe als eine Variable, damit ein Element nur `--status` setzen muss und nicht sechs Regeln braucht. */ [data-status="active"] { --status: var(--status-active); --status-soft: var(--status-active-soft); } [data-status="stale"] { --status: var(--status-stale); --status-soft: var(--status-stale-soft); } [data-status="gps-missing"] { --status: var(--status-gps-missing); --status-soft: var(--status-gps-missing-soft); } [data-status="battery-low"] { --status: var(--status-battery-low); --status-soft: var(--status-battery-low-soft); } [data-status="offline"] { --status: var(--status-offline); --status-soft: var(--status-offline-soft); } [data-status="alarm"] { --status: var(--status-alarm); --status-soft: var(--status-alarm-soft); }