/* Alle Farben und Masse an einem Ort - fuer die Seiten wie fuer den Simulator. Diese Datei ist die Quelle. Der Bau traegt sie in den Stilblock von viewer.tpl.html ein (zwischen den Marken TOKENS) und legt sie als web/assets/tokens.css ab. Nicht in den Zieldateien von Hand aendern. ZWEI SCHICHTEN 1. Palette --p-* Die Farben selbst, ohne Aufgabe. Nach Familie geordnet, Ziffer 1 ist die dunkelste Stufe. 2. Rollen alles Wofuer eine Farbe da ist. Eine Rolle zeigt immer uebrige auf einen Paletteneintrag, nie auf einen Hexwert. UMFAERBEN - Eine ganze Familie verschieben: den Wert in der Palette aendern. Alles, was ihn benutzt, wandert mit. - Eine einzelne Stelle umhaengen: die Rolle auf einen anderen Paletteneintrag zeigen lassen. Die Palette bleibt unberuehrt. - Ein zweites Farbkleid: den Rollenblock kopieren und unter einem eigenen [data-thema="..."] neu belegen. Die Palette wird dabei nicht angefasst. Die Rollen des Gelaendes (--fl-*, --tee-*, --schlaeger-*) gelten in beiden Lichtern gleich - sie liegen auf dem Platz, nicht auf einer Oberflaeche, und muessen sich nicht mit dem Thema drehen. Namensregel: Rolle, nicht Farbe. Bindestrich trennt die Abstufung (--ink, --ink-2, --ink-3), nie den Wortstamm. */ :root{ /* ================================================================== 1. PALETTE ================================================================== */ /* --- Tinte: dunkle Toene, gruenstichig statt neutralgrau --------- */ --p-tinte-1:#0e1511; --p-tinte-2:#101a10; --p-tinte-3:#10190c; --p-tinte-4:#12200a; --p-tinte-5:#131a15; --p-tinte-6:#161c14; --p-tinte-7:#171a15; --p-tinte-8:#1f231c; --p-tinte-9:#20241c; --p-tinte-10:#22301c; --p-tinte-11:#2a1411; --p-tinte-12:#33402e; --p-tinte-13:#3d4a41; --p-tinte-14:#5a6354; --p-tinte-15:#6b7a70; --p-tinte-16:#7c8e80; --p-tinte-17:#8a9184; --p-tinte-18:#a9baab; /* --- Papier: helle Toene, Flaechen und Linien ------------------- */ --p-papier-1:#c9c8bb; --p-papier-2:#dbe6d9; --p-papier-3:#e6e5da; --p-papier-4:#e6ede4; --p-papier-5:#eceade; --p-papier-6:#e6e2d2; --p-papier-7:#e8e3d2; --p-papier-8:#efece0; --p-papier-9:#f2efe4; --p-papier-10:#f2f0e6; --p-papier-11:#f2f2ea; --p-papier-12:#f2f7ec; --p-papier-13:#f3f1ea; --p-papier-14:#f4f2e6; --p-papier-15:#f4f3ec; --p-papier-16:#f6f5ee; --p-papier-17:#fbfaf6; --p-papier-18:#ffffff; /* --- Gruen: Rasen in allen Schnitthoehen ------------------------ */ --p-gruen-1:#19380e; --p-gruen-2:#1f3a15; --p-gruen-3:#24610f; --p-gruen-4:#3d5a24; --p-gruen-5:#41691a; --p-gruen-6:#42691a; --p-gruen-7:#4f7d1e; --p-gruen-8:#8dc93f; --p-gruen-9:#9ec95a; --p-gruen-10:#b0d96f; --p-gruen-11:#5fce33; --p-gruen-12:#63d635; /* --- Oliv: Rough und Wiese ------------------------------------- */ --p-oliv-1:#424a1e; --p-oliv-2:#67702f; /* --- Sand: Bunker, Wege, Bauten --------------------------------- */ --p-sand-1:#8a8069; --p-sand-2:#8a8272; --p-sand-3:#ab9256; --p-sand-4:#b08a3e; --p-sand-5:#b9b1a0; --p-sand-6:#cfc3a6; --p-sand-7:#d9be7d; --p-sand-8:#f2e2b4; /* --- Gelb: Vorgabe, Marken, Warnung ---------------------------- */ --p-gelb-1:#8a6210; --p-gelb-2:#8f731a; --p-gelb-3:#d8a94a; --p-gelb-4:#ecc53c; --p-gelb-5:#ffd94a; /* --- Rot: Gefahr, Strafe, Fahne -------------------------------- */ --p-rot-1:#7c231f; --p-rot-2:#7d211d; --p-rot-3:#8b2f28; --p-rot-4:#b23b2e; --p-rot-5:#c0392b; --p-rot-6:#d1453f; --p-rot-7:#d6483f; --p-rot-8:#e2705f; /* --- Blau: Wasser und Himmel ----------------------------------- */ --p-blau-1:#1e4c78; --p-blau-2:#1f5478; --p-blau-3:#2a4d68; --p-blau-4:#3f8dc0; --p-blau-5:#3f9bd6; --p-blau-6:#4a8fd0; --p-blau-7:#b9d3e6; /* --- Tuerkis: Abschlag, gefundener Ball ------------------------ */ --p-tuerkis-1:#1f5d52; --p-tuerkis-2:#1f6353; --p-tuerkis-3:#3f9e8c; --p-tuerkis-4:#4fc7a6; /* --- Violett: verlorener Ball ---------------------------------- */ --p-violett-1:#5a2350; --p-violett-2:#8e3b7a; /* --- Grau: neutral, ohne Stich --------------------------------- */ --p-grau-1:#6c7a70; --p-grau-2:#8b8b82; --p-grau-3:#9aa08e; /* ================================================================== 2. ROLLEN - heller Satz ================================================================== */ /* --- Flaechen ---------------------------------------------------- */ --grund:var(--p-papier-13); /* Seitenhintergrund */ --karte:var(--p-papier-17); /* Karte, Formular, Tabelle */ --plate:rgba(250,250,245,.87); /* Platte ueber dem Platz */ --plate-2:rgba(255,255,255,.60); /* Knopf auf einer Platte */ --plate-voll:rgb(248,248,243); /* Platte ohne Durchsicht */ --schleier:rgba(9,14,10,.55); /* hinter einem Fenster */ --schleier-voll:rgba(12,16,10,.82); /* hinter der Schlusskarte */ /* --- Schrift ----------------------------------------------------- */ --ink:var(--p-tinte-5); --ink-2:var(--p-tinte-13); --ink-3:var(--p-tinte-15); /* --- Linien ------------------------------------------------------ */ --line:rgba(19,26,21,.16); --line-2:rgba(19,26,21,.09); /* --- Bedeutung --------------------------------------------------- */ --turf:var(--p-gruen-7); /* Hauptfarbe, Bestaetigung */ --turf-2:var(--p-gruen-6); /* dieselbe, angefasst */ --flag:var(--p-rot-4); /* Gefahr, Loeschen, Fehler */ --sand:var(--p-sand-4); /* Bunker, Hinweis */ --warn:var(--p-gelb-1); /* Warnung */ /* Schriftfarbe AUF diesen Flaechen. Im hellen Satz sind Turf und Flag dunkel, im dunklen hell - eine feste Farbe waere in einem der beiden Faelle unlesbar (weiss auf Hellgruen ergibt Kontrast 1,9). */ --auf-turf:var(--p-papier-18); --auf-flag:var(--p-papier-18); /* --- Himmel ------------------------------------------------------ */ --sky-top:var(--p-blau-7); --sky-bot:var(--p-papier-7); /* --- Ergebnis je Loch (Stableford) ------------------------------- */ --erg-gut:var(--p-gruen-11); /* Birdie oder besser */ --erg-par:var(--ink); --erg-bogey:var(--p-gelb-4); --erg-schlecht:var(--flag); /* --- Verteilungsbalken im Reiter Score --------------------------- Fuenf Stufen, von Eagle bis Doppelbogey. Feste Reihenfolge - wer umfaerbt, muss die Abstufung erhalten. */ --vt-eagle:var(--p-blau-5); --vt-birdie:var(--p-gruen-12); --vt-par:var(--p-papier-6); --vt-bogey:var(--p-gelb-4); --vt-doppel:var(--p-rot-7); /* ================================================================== 3. ROLLEN - Gelaende. Gilt in beiden Lichtern gleich. ================================================================== Jede Flaechenart hat eine Fuellung und einen Rand. Der Simulator liest sie beim Aufbau aus (siehe farbe() im Viewer), sie duerfen deshalb nur auf Palettenwerte zeigen, nicht auf rgba(). */ --fl-rough:var(--p-oliv-2); --fl-rough-rand:var(--p-oliv-1); --fl-fairway:var(--p-gruen-8); --fl-fairway-rand:var(--p-gruen-5); --fl-green:var(--p-gruen-11); --fl-green-rand:var(--p-gruen-3); --fl-tee:var(--p-tuerkis-4); --fl-tee-rand:var(--p-tuerkis-2); --fl-weg:var(--p-sand-6); --fl-weg-rand:var(--p-sand-1); --fl-bunker:var(--p-sand-8); --fl-bunker-rand:var(--p-sand-3); --fl-wasser:var(--p-blau-4); --fl-wasser-rand:var(--p-blau-2); --fl-strafe:var(--p-rot-6); --fl-strafe-rand:var(--p-rot-2); --fl-aus:var(--p-papier-8); --fl-aus-rand:var(--p-papier-14); --fl-bau:var(--p-sand-5); --fl-bau-rand:var(--p-sand-2); --fl-verloren:var(--p-violett-2); --fl-verloren-rand:var(--p-violett-1); --fl-findbar:var(--p-tuerkis-3); --fl-findbar-rand:var(--p-tuerkis-1); --fl-pflock-weiss:var(--p-papier-9); --fl-pflock-rot:var(--p-rot-5); --fl-linie:var(--p-gelb-5); /* Spiellinie */ --fl-wald:var(--p-gruen-2); /* geschlossener Bestand */ --fl-baum:var(--p-gruen-4); /* Einzelbaum */ --fl-ballweg:var(--p-rot-3); /* Ball verloren, Auswertung */ /* --- Abschlaege --------------------------------------------------- */ --tee-weiss:var(--p-papier-15); --tee-weiss-rand:var(--p-grau-2); --tee-gelb:var(--p-gelb-4); --tee-gelb-rand:var(--p-gelb-2); --tee-blau:var(--p-blau-6); --tee-blau-rand:var(--p-blau-1); --tee-rot:var(--p-rot-7); --tee-rot-rand:var(--p-rot-1); /* --- Schlaegerfarben --------------------------------------------- Ein durchgehender Bogen von Rot (Driver) nach Blau (Wedge), damit sich zwei benachbarte Schlaeger im Bild noch unterscheiden. Wer umfaerbt, sollte den Bogen erhalten - sonst sieht eine Runde aus wie Konfetti. */ --schlaeger-dr:#e4553e; --schlaeger-w3:#ec7239; --schlaeger-w5:#f08f36; --schlaeger-h5:#eda93c; --schlaeger-h6:#e5c142; --schlaeger-i4:#d2cf45; --schlaeger-i5:#b6cd45; --schlaeger-i6:#97c748; --schlaeger-i7:#78c052; --schlaeger-i8:#56b968; --schlaeger-i9:#43b287; --schlaeger-p46:#3ea9a6; --schlaeger-p50:#3f9bc0; --schlaeger-p54:#4f8ad2; --schlaeger-p58:#6f7ed8; --schlaeger-pt:var(--p-papier-10); /* --- Marken auf dem Platz ---------------------------------------- Lochnummer an der Fahne, Schlagnummer am Scheitel der Bahn. Die Schlagnummer sitzt auf der Schlaegerfarbe, deshalb dunkle Schrift. */ --sprite-schrift:var(--p-tinte-4); --sprite-grund:var(--p-papier-12); --sprite-schlag:var(--p-tinte-3); --glanz:var(--p-papier-18); /* Aufhellung auf einer Flaeche */ /* --- Ball --------------------------------------------------------- */ --ball-licht:var(--p-papier-18); --ball-mitte:var(--p-papier-11); --ball-schatten:var(--p-grau-3); /* --- Zeichnen im Flaecheneditor ---------------------------------- */ --marke:var(--p-gelb-5); /* Stuetzpunkt, Zielkreis */ --marke-aktiv:var(--p-papier-18); /* der gezogene Stuetzpunkt */ --marke-rand:var(--p-tinte-10); --marke-weg:var(--p-rot-8); /* Radierer */ --umriss:var(--p-tinte-9); /* Kante einer Flaeche */ --schlagschatten:var(--p-tinte-2); /* Schatten der Flugbahn */ /* --- Caddie-Blatt ------------------------------------------------ Das Blatt wird gedruckt. Es bleibt deshalb hell, auch wenn der Rest dunkel steht - schwarzes Papier kostet nur Toner. */ --cd-grund:var(--p-papier-16); --cd-ink:var(--p-tinte-6); --cd-ink-2:var(--p-tinte-14); --cd-ink-3:var(--p-tinte-17); --cd-line:var(--p-papier-3); --cd-line-2:var(--p-papier-5); --cd-rahmen:var(--p-papier-1); --cd-knopf:var(--p-tinte-12); /* --- Textausgabe (GeoJSON, CSV) ---------------------------------- Immer dunkel, egal welches Licht - hier steht Code, kein Text. */ --tx-grund:var(--p-tinte-1); --tx-schrift:var(--p-papier-2); --tx-titel:var(--p-papier-4); --tx-schleier:rgba(8,12,9,.72); /* ================================================================== 4. MASSE. Zwei Stufen, mehr nicht: gross fuer Seiten und schwebende Knoepfe, klein fuer alles in einer Platte oder Leiste. ================================================================== */ /* Rand des Geraets: Kerbe, abgerundete Ecken, Home-Anzeige. Mit viewport-fit=cover fuellt die Seite den ganzen Schirm - dann muss alles, was am Rand klebt, um diese Betraege einruecken. Auf einem Geraet ohne solche Bereiche sind alle vier 0. */ --sa-oben:env(safe-area-inset-top,0px); --sa-unten:env(safe-area-inset-bottom,0px); --sa-links:env(safe-area-inset-left,0px); --sa-rechts:env(safe-area-inset-right,0px); --r:6px; /* Bedienelement */ --r-gross:10px; /* Karte, Fenster */ --kn-schrift:13.5px; --kn-polster:7px 14px; --kn-schrift-k:11.5px; --kn-polster-k:5px 10px; --shadow:0 2px 6px rgba(19,26,21,.10),0 12px 32px rgba(19,26,21,.14); } /* ================================================================== 5. ROLLEN - dunkler Satz. Nur was sich dreht; die Palette und die Gelaenderollen bleiben unberuehrt. ================================================================== */ @media (prefers-color-scheme:dark){:root:not([data-theme="light"]){ --grund:var(--p-tinte-7); --karte:var(--p-tinte-8); --plate:rgba(14,21,17,.86); --plate-2:rgba(30,40,33,.55); --plate-voll:rgb(17,25,20); --ink:var(--p-papier-4); --ink-2:var(--p-tinte-18); --ink-3:var(--p-tinte-16); --line:rgba(230,237,228,.18); --line-2:rgba(230,237,228,.08); --turf:var(--p-gruen-9); --turf-2:var(--p-gruen-10); --flag:var(--p-rot-8); --sand:var(--p-sand-7); --warn:var(--p-gelb-3); --auf-turf:var(--p-tinte-4); --auf-flag:var(--p-tinte-11); --sky-top:var(--p-blau-3); --sky-bot:var(--p-grau-1); --erg-par:var(--ink); --erg-schlecht:var(--flag); --shadow:0 2px 6px rgba(0,0,0,.35),0 14px 40px rgba(0,0,0,.45); }} :root[data-theme="dark"]{ --grund:var(--p-tinte-7); --karte:var(--p-tinte-8); --plate:rgba(14,21,17,.86); --plate-2:rgba(30,40,33,.55); --plate-voll:rgb(17,25,20); --ink:var(--p-papier-4); --ink-2:var(--p-tinte-18); --ink-3:var(--p-tinte-16); --line:rgba(230,237,228,.18); --line-2:rgba(230,237,228,.08); --turf:var(--p-gruen-9); --turf-2:var(--p-gruen-10); --flag:var(--p-rot-8); --sand:var(--p-sand-7); --warn:var(--p-gelb-3); --auf-turf:var(--p-tinte-4); --auf-flag:var(--p-tinte-11); --sky-top:var(--p-blau-3); --sky-bot:var(--p-grau-1); --erg-par:var(--ink); --erg-schlecht:var(--flag); --shadow:0 2px 6px rgba(0,0,0,.35),0 14px 40px rgba(0,0,0,.45); }