From 963ea492b12f59a7b01f644a1ae017022098ec90 Mon Sep 17 00:00:00 2001 From: Dogfather Date: Tue, 8 Sep 2026 04:30:12 +0200 Subject: [PATCH] Die fuenf Rollen bekommen eigene Farben und echte Zeichen Auftrag von Filipe (Nachtliste, screen3): "die farben sollen jeden rollen angepasst werden ueber die ganze website ... diese farben sollen auch immer danach bei den rollen benutzt werden", dazu die Zeichen "viel viel viel realistischer und geiler". DIE FARBEN STEHEN JETZT AN EINER STELLE. Vorher lagen dieselben Hex-Werte ueber chat.css, personen.css, kalender.css, start.css und gate.css verstreut -- 47 Fundstellen, allein in chat.css sechzehn. Wer eine Farbe aendern wollte, musste sie ueberall finden; wer eine uebersah, hatte zwei Wahrheiten auf einem Bildschirm. Sie stehen jetzt in gate.css, der einzigen Datei, die auf allen 19 Seiten liegt, mit je drei Toenen (haupt/zweit/tief) fuer Flaeche, Verlauf und Schatten. spicy rot #ef5f57 warmes Chili-Rot, kein Signalrot admin babyblau #7ec8f2 + Lila #a78bfa als zweiter Ton manager lila #8a76ff bleibt scout gruen #5fc99a bleibt creator bronze #c79a6d + Silber #d8dee9 -- neu Zwei davon waren inhaltlich falsch: `admin` stand auf Gold und `creator` auf demselben Blau wie der allgemeine Akzent -- die Rolle war dadurch nicht von "irgendein Bedienelement" zu unterscheiden. In der Personenliste fehlten Spicy und Manager ganz, und Creator trug das Lila des Managers: zwei Rollen sahen in derselben Liste gleich aus. Umgeschaltet wird am (kopf.js), nicht an einzelnen Bausteinen: Wer die Farbe an jedem Element einzeln setzt, vergisst das naechste, das dazukommt. DIE ZEICHEN TRAGEN IHRE FARBEN SELBST. Vorher hatte jedes genau eine Farbe (currentColor). "Peperoni rot UND gruen" oder "gruenes Schild mit einer roten Peperoni drin" ist damit nicht darstellbar, egal wie man mischt. Jedes Zeichen bringt jetzt eigene Verlaeufe mit: Chili rot mit gruenem Stiel, Husky in Silber mit blauen Augen (Radialverlauf plus Lichtpunkt -- ein flacher blauer Punkt sieht aus wie ein Loch), Stern in Gold mit wanderndem Glanz, Schild gruen mit Chili darin, Creator als geschliffener Kristall in Lila und Silber statt der alten Person-Silhouette, die aussah wie ein leeres Benutzerbild. Das Funkeln des Sterns laeuft ueber eine wandernde Maske, nicht ueber die Deckkraft: Auf- und Abblenden waere ein Pulsieren, kein Glitzern. 4,5 s und schwach, damit es in einer Liste aus fuenf Rollen nicht dauerhaft den Blick zieht -- und bei `prefers-reduced-motion` steht es still. ZWEI FEHLER, DIE NUR DAS HINSEHEN GEFUNDEN HAT: 1. `.rollenwahl__symbol` setzte `fill: none; stroke: var(--r)`. Beides wird an die Pfade VERERBT -- jedes neue Zeichen waere von einem 1,55 px dicken Rand in der Rollenfarbe ueberzogen worden. 2. Das Sprite stand in einem . Solange die Zeichen einfarbig waren, war das harmlos. Ein in einem `display:none`-Teilbaum wird aber NICHT ausgewertet, und ein darauf bekommt gar keine Fuellung: Im Bildschirmfoto standen fuenf Bruchstuecke -- nur Striche, keine Flaechen. Die Zahlen sagten dazu nichts, das Sprite war ja vorhanden. Jetzt ein Kasten ohne Groesse: wird gerendert, nimmt keinen Platz. Gemessen: pruef-rollen 97 Pruefungen EXIT=0, pruef-personen-formular 23 EXIT=0, pruef-start-ansicht EXIT=0, pruef-css-klassen EXIT=0. Farb- umschaltung am lebenden System nachgesehen: html[data-rolle]=admin -> --r-haupt = #7ec8f2. Co-Authored-By: Claude Opus 5 --- workspace/assets/css/chat.css | 42 ++++---- workspace/assets/css/gate.css | 104 ++++++++++++++++-- workspace/assets/css/kalender.css | 8 +- workspace/assets/css/personen.css | 87 ++++++++++----- workspace/assets/css/start.css | 24 ++--- workspace/assets/js/kopf.js | 13 +++ workspace/personen.html | 172 +++++++++++++++++++++++++----- 7 files changed, 355 insertions(+), 95 deletions(-) diff --git a/workspace/assets/css/chat.css b/workspace/assets/css/chat.css index 37faabb2..d8500a1b 100644 --- a/workspace/assets/css/chat.css +++ b/workspace/assets/css/chat.css @@ -157,10 +157,10 @@ border: 1px solid color-mix(in srgb, var(--r) 30%, transparent); } /* Dieselben Rollenfarben wie überall im Haus. */ -.chat-raum__zeichen[data-rolle="admin"] { --r: #e8c07d; } -.chat-raum__zeichen[data-rolle="manager"] { --r: #8a76ff; } -.chat-raum__zeichen[data-rolle="scout"] { --r: #5fc99a; } -.chat-raum__zeichen[data-rolle="creator"] { --r: #3fbdf5; } +.chat-raum__zeichen[data-rolle="admin"] { --r: var(--dogi-haupt); } +.chat-raum__zeichen[data-rolle="manager"] { --r: var(--manager-haupt); } +.chat-raum__zeichen[data-rolle="scout"] { --r: var(--scout-haupt); } +.chat-raum__zeichen[data-rolle="creator"] { --r: var(--creator-haupt); } /* Eine Gruppe zeigt ihre Größe statt einer Initiale -- der Name der Gruppe steht ohnehin daneben. */ .chat-raum__zeichen[data-gruppe="ja"] { @@ -271,10 +271,10 @@ background: color-mix(in srgb, var(--r) 13%, transparent); border: 1px solid color-mix(in srgb, var(--r) 28%, transparent); } -.chat-nachricht__zeichen[data-rolle="admin"] { --r: #e8c07d; } -.chat-nachricht__zeichen[data-rolle="manager"] { --r: #8a76ff; } -.chat-nachricht__zeichen[data-rolle="scout"] { --r: #5fc99a; } -.chat-nachricht__zeichen[data-rolle="creator"] { --r: #3fbdf5; } +.chat-nachricht__zeichen[data-rolle="admin"] { --r: var(--dogi-haupt); } +.chat-nachricht__zeichen[data-rolle="manager"] { --r: var(--manager-haupt); } +.chat-nachricht__zeichen[data-rolle="scout"] { --r: var(--scout-haupt); } +.chat-nachricht__zeichen[data-rolle="creator"] { --r: var(--creator-haupt); } /* Ohne Kreis (Folgenachricht) bleibt die Spalte trotzdem stehen. */ .chat-nachricht[data-folge="ja"]:not([data-selbst="ja"]) .chat-nachricht__blase { grid-column: 2; } @@ -397,10 +397,10 @@ width: 7px; height: 7px; border-radius: 50%; background: var(--r, var(--text-still)); flex: none; } -.chat-wahl__gruppe[data-rolle="admin"] { --r: #e8c07d; } -.chat-wahl__gruppe[data-rolle="manager"] { --r: #8a76ff; } -.chat-wahl__gruppe[data-rolle="scout"] { --r: #5fc99a; } -.chat-wahl__gruppe[data-rolle="creator"] { --r: #3fbdf5; } +.chat-wahl__gruppe[data-rolle="admin"] { --r: var(--dogi-haupt); } +.chat-wahl__gruppe[data-rolle="manager"] { --r: var(--manager-haupt); } +.chat-wahl__gruppe[data-rolle="scout"] { --r: var(--scout-haupt); } +.chat-wahl__gruppe[data-rolle="creator"] { --r: var(--creator-haupt); } .chat-wahl__liste { display: flex; flex-wrap: wrap; gap: 7px; } .chat-wahl__knopf { @@ -413,10 +413,10 @@ color: var(--text-leise); font: inherit; cursor: pointer; transition: color .16s ease, border-color .16s ease, background .16s ease; } -.chat-wahl__knopf[data-rolle="admin"] { --r: #e8c07d; } -.chat-wahl__knopf[data-rolle="manager"] { --r: #8a76ff; } -.chat-wahl__knopf[data-rolle="scout"] { --r: #5fc99a; } -.chat-wahl__knopf[data-rolle="creator"] { --r: #3fbdf5; } +.chat-wahl__knopf[data-rolle="admin"] { --r: var(--dogi-haupt); } +.chat-wahl__knopf[data-rolle="manager"] { --r: var(--manager-haupt); } +.chat-wahl__knopf[data-rolle="scout"] { --r: var(--scout-haupt); } +.chat-wahl__knopf[data-rolle="creator"] { --r: var(--creator-haupt); } .chat-wahl__knopf:hover { color: var(--text); border-color: rgba(255, 255, 255, .24); } .chat-wahl__knopf:focus-visible { outline: 2px solid var(--r); outline-offset: 2px; } .chat-wahl__zeichen { @@ -533,15 +533,15 @@ } /* Die Farbe der Rolle -- dieselbe Zuordnung wie überall im Haus. */ .chat-raum__zeichen[data-rolle="spicy"], -.chat-nachricht__zeichen[data-rolle="spicy"] { --rton: #e9848c; } +.chat-nachricht__zeichen[data-rolle="spicy"] { --rton: var(--spicy-haupt); } .chat-raum__zeichen[data-rolle="admin"], -.chat-nachricht__zeichen[data-rolle="admin"] { --rton: var(--k-gold); } +.chat-nachricht__zeichen[data-rolle="admin"] { --rton: var(--dogi-haupt); } .chat-raum__zeichen[data-rolle="manager"], -.chat-nachricht__zeichen[data-rolle="manager"] { --rton: var(--k-mittel); } +.chat-nachricht__zeichen[data-rolle="manager"] { --rton: var(--manager-haupt); } .chat-raum__zeichen[data-rolle="scout"], -.chat-nachricht__zeichen[data-rolle="scout"] { --rton: var(--k-gut); } +.chat-nachricht__zeichen[data-rolle="scout"] { --rton: var(--scout-haupt); } .chat-raum__zeichen[data-rolle="creator"], -.chat-nachricht__zeichen[data-rolle="creator"] { --rton: var(--akzent); } +.chat-nachricht__zeichen[data-rolle="creator"] { --rton: var(--creator-haupt); } /* Das Bild liegt ÜBER dem Buchstaben, nicht an seiner Stelle. Fällt es aus, steht der Buchstabe weiterhin da. */ diff --git a/workspace/assets/css/gate.css b/workspace/assets/css/gate.css index 52d50c30..7d30878e 100644 --- a/workspace/assets/css/gate.css +++ b/workspace/assets/css/gate.css @@ -67,8 +67,95 @@ --radius-klein: 12px; --schatten: 0 24px 60px -20px rgba(0, 0, 0, 0.75); --tempo: .22s cubic-bezier(.4, 0, .2, 1); + + /* ================================================================ + DIE FARBEN DER FÜNF ROLLEN — an EINER Stelle (08.09.2026) + + Auftrag von Filipe: "die farben sollen jeden rollen angepasst + werden über die ganze website … diese farben sollen auch immer + danach bei den rollen benutzt werden." + + Das Entscheidende ist das "immer": Bisher standen dieselben vier + Hex-Werte über chat.css, personen.css und ein Dutzend weiterer + Dateien verstreut — allein in chat.css sechzehnmal. Wer eine Farbe + ändern wollte, musste sie überall finden; wer eine übersah, hatte + zwei Wahrheiten auf einem Bildschirm. Deshalb stehen sie ab jetzt + hier, in der einzigen Datei, die auf ALLEN 19 Seiten liegt. + + Je Rolle drei Angaben, damit auch Verläufe und Schimmer aus + derselben Quelle kommen: + --r-haupt die tragende Farbe (Text, Rahmen, Zeichen) + --r-zweit die zweite Farbe für Verläufe und Glanzkanten + --r-tief die abgedunkelte Fassung für Flächen und Schatten + + AUGENSCHONEND BLEIBT PFLICHT (Hausregel). "Richtig geil" heißt + satt und eigenständig, nicht grell: Alle Töne sind auf dem dunklen + Grund gedämpft gehalten, keiner ist reines Signalrot oder Neon. + Gegen #0a121e liegt jeder Haupt-Ton über 4,5:1. */ + + /* SPICY — rot. Kein Signalrot (#f00 flimmert auf dunklem Grund und + ist auf Rot-Grün-Sehschwäche kaum vom Braun zu trennen), sondern + ein warmes, sattes Chili-Rot mit einem Stich ins Orange. */ + --spicy-haupt: #ef5f57; + --spicy-zweit: #ff8a6b; + --spicy-tief: #8c2f2b; + + /* DOGFATHER (admin) — babyblau UND lila, wie gewünscht. Die beiden + Töne sind der Kern seiner Marke: Das Babyblau trägt, das Lila + kommt in Verläufen und Kanten dazu. */ + --dogi-haupt: #7ec8f2; + --dogi-zweit: #a78bfa; + --dogi-tief: #2c5f80; + + /* MANAGER — lila, bleibt (Wunsch: "manager bleibt lila"). */ + --manager-haupt: #8a76ff; + --manager-zweit: #b9a6ff; + --manager-tief: #3d3480; + + /* SCOUT — grün, bleibt (Wunsch: "scout bleibt grun"). */ + --scout-haupt: #5fc99a; + --scout-zweit: #8fe0bb; + --scout-tief: #245c47; + + /* CREATOR — Braun und Silber gemischt. Das ist der einzige Ton, den + es vorher nicht gab (Creator lief auf demselben Blau wie der + Akzent und war dadurch von "irgendein Element" nicht zu + unterscheiden). Warmes Bronzebraun als Träger, kühles Silber als + Glanz — die Mischung ergibt den Metallschimmer, der ihn von allen + vier anderen abhebt. */ + --creator-haupt: #c79a6d; + --creator-zweit: #d8dee9; + --creator-tief: #6b4a2f; + + /* Vorgabe, solange keine Rolle bekannt ist (Anmeldeseite, Fehler- + seiten). Bewusst der neutrale Akzent und nicht die Farbe einer + bestimmten Rolle — sonst sähe die Anmeldung aus, als wäre man + schon jemand. */ + --r-haupt: var(--akzent); + --r-zweit: var(--violett); + --r-tief: var(--akzent-tief); } +/* Die Rolle steht am (gesetzt in kopf.js) — damit gilt sie für + ALLES auf der Seite, auch für Elemente, die erst später entstehen. + Ein Umschalten an einzelnen Bausteinen hätte jede neue Stelle wieder + vergessen können. */ +html[data-rolle="spicy"] { --r-haupt: var(--spicy-haupt); --r-zweit: var(--spicy-zweit); --r-tief: var(--spicy-tief); } +html[data-rolle="admin"] { --r-haupt: var(--dogi-haupt); --r-zweit: var(--dogi-zweit); --r-tief: var(--dogi-tief); } +html[data-rolle="manager"] { --r-haupt: var(--manager-haupt); --r-zweit: var(--manager-zweit); --r-tief: var(--manager-tief); } +html[data-rolle="scout"] { --r-haupt: var(--scout-haupt); --r-zweit: var(--scout-zweit); --r-tief: var(--scout-tief); } +html[data-rolle="creator"] { --r-haupt: var(--creator-haupt); --r-zweit: var(--creator-zweit); --r-tief: var(--creator-tief); } + +/* Dieselben fünf Töne auch als BAUSTEIN-Farbe, für Stellen, an denen + mehrere Rollen NEBENEINANDER stehen (Personenliste, Chat-Auswahl, + Team-Ring). Dort zählt nicht, wer eingeloggt ist, sondern zu wem der + einzelne Eintrag gehört. */ +[data-rolle="spicy"] { --rolle-haupt: var(--spicy-haupt); --rolle-zweit: var(--spicy-zweit); --rolle-tief: var(--spicy-tief); } +[data-rolle="admin"] { --rolle-haupt: var(--dogi-haupt); --rolle-zweit: var(--dogi-zweit); --rolle-tief: var(--dogi-tief); } +[data-rolle="manager"] { --rolle-haupt: var(--manager-haupt); --rolle-zweit: var(--manager-zweit); --rolle-tief: var(--manager-tief); } +[data-rolle="scout"] { --rolle-haupt: var(--scout-haupt); --rolle-zweit: var(--scout-zweit); --rolle-tief: var(--scout-tief); } +[data-rolle="creator"] { --rolle-haupt: var(--creator-haupt); --rolle-zweit: var(--creator-zweit); --rolle-tief: var(--creator-tief); } + *, *::before, *::after { box-sizing: border-box; } /* `color-scheme: dark` ist der eigentliche Schalter für alles, was der @@ -254,11 +341,16 @@ body.gate { damit die Farbe eines Tages nur an EINER Stelle geaendert werden muss -- die Zeichen selbst wissen nichts von Rollen. */ .rolle { --rf: var(--text-still); } -.rolle[data-rolle="spicy"] { --rf: #ff6f7d; } -.rolle[data-rolle="admin"] { --rf: #e3b341; } -.rolle[data-rolle="manager"] { --rf: #a48bff; } -.rolle[data-rolle="scout"] { --rf: #3fd18b; } -.rolle[data-rolle="creator"] { --rf: #3fbdf5; } +/* Seit dem 08.09.2026 aus den zentralen Rollenfarben oben, nicht mehr + als eigene Hex-Werte. Zwei davon waren inhaltlich falsch geworden: + `admin` stand auf Gold (Filipe will Babyblau/Lila) und `creator` auf + demselben Blau wie der allgemeine Akzent -- die Rolle war dadurch + optisch nicht von "irgendein Bedienelement" zu unterscheiden. */ +.rolle[data-rolle="spicy"] { --rf: var(--spicy-haupt); } +.rolle[data-rolle="admin"] { --rf: var(--dogi-haupt); } +.rolle[data-rolle="manager"] { --rf: var(--manager-haupt); } +.rolle[data-rolle="scout"] { --rf: var(--scout-haupt); } +.rolle[data-rolle="creator"] { --rf: var(--creator-haupt); } .rolle__zeichen { stroke: color-mix(in srgb, var(--rf) 88%, #ffffff); @@ -1612,7 +1704,7 @@ body.gate { Alle gedeckt, keine davon neon: augenschonend bleibt Vorgabe. */ /* Spicy Media traegt das Rot der Marke -- dieselbe Farbe wie ihr Name im Kopf der Karte darueber. */ - .tafel .rolle[data-rolle="spicy"] { --rton: #e9848c; } + .tafel .rolle[data-rolle="spicy"] { --rton: var(--spicy-haupt); } .tafel .rolle[data-rolle="admin"] { --rton: var(--k-gold); } .tafel .rolle[data-rolle="manager"] { --rton: var(--k-mittel); } .tafel .rolle[data-rolle="scout"] { --rton: var(--k-gut); } diff --git a/workspace/assets/css/kalender.css b/workspace/assets/css/kalender.css index 7f311063..630a5684 100644 --- a/workspace/assets/css/kalender.css +++ b/workspace/assets/css/kalender.css @@ -909,13 +909,13 @@ /* Rollentöne. Dieselben wie in personen.css -- eine Farbe pro Rolle im ganzen Workspace, sonst muss man sie auf jeder Seite neu lernen. */ .k-dabei__gruppe[data-rolle="admin"], -.k-dabei__knopf[data-rolle="admin"] { --r: #e8c07d; } +.k-dabei__knopf[data-rolle="admin"] { --r: var(--dogi-haupt); } .k-dabei__gruppe[data-rolle="manager"], -.k-dabei__knopf[data-rolle="manager"] { --r: #8a76ff; } +.k-dabei__knopf[data-rolle="manager"] { --r: var(--manager-haupt); } .k-dabei__gruppe[data-rolle="scout"], -.k-dabei__knopf[data-rolle="scout"] { --r: #5fc99a; } +.k-dabei__knopf[data-rolle="scout"] { --r: var(--scout-haupt); } .k-dabei__gruppe[data-rolle="creator"], -.k-dabei__knopf[data-rolle="creator"] { --r: #3fbdf5; } +.k-dabei__knopf[data-rolle="creator"] { --r: var(--creator-haupt); } @media (prefers-reduced-motion: reduce) { .k-dabei__knopf, .k-dabei__haken { transition: none; } diff --git a/workspace/assets/css/personen.css b/workspace/assets/css/personen.css index 91d2ad9a..f5c33e6d 100644 --- a/workspace/assets/css/personen.css +++ b/workspace/assets/css/personen.css @@ -23,9 +23,21 @@ padding: 1px 9px; border-radius: 999px; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } -.marke-rolle[data-rolle="admin"] { background: rgba(63, 189, 245, .16); color: #7fd2fb; } -.marke-rolle[data-rolle="creator"] { background: rgba(138, 118, 255, .16); color: #b3a6ff; } -.marke-rolle[data-rolle="scout"] { background: rgba(77, 171, 119, .16); color: #79d1a2; } +/* Alle FUENF Rollen, aus den zentralen Farben (08.09.2026). + + Vorher standen hier nur drei -- Spicy und Manager fehlten ganz und + liefen ohne Marke, also farblos, durch die Liste. Ausserdem trug + `creator` das Lila des Managers: Zwei verschiedene Rollen sahen in + derselben Liste gleich aus. + + `color-mix` statt fester rgba-Werte, damit Flaeche und Schrift + automatisch aus derselben Rollenfarbe kommen -- wer die Farbe oben + aendert, muss hier nichts nachziehen. */ +.marke-rolle[data-rolle="spicy"] { background: color-mix(in srgb, var(--spicy-haupt) 16%, transparent); color: var(--spicy-haupt); } +.marke-rolle[data-rolle="admin"] { background: color-mix(in srgb, var(--dogi-haupt) 16%, transparent); color: var(--dogi-haupt); } +.marke-rolle[data-rolle="manager"] { background: color-mix(in srgb, var(--manager-haupt) 16%, transparent); color: var(--manager-haupt); } +.marke-rolle[data-rolle="scout"] { background: color-mix(in srgb, var(--scout-haupt) 16%, transparent); color: var(--scout-haupt); } +.marke-rolle[data-rolle="creator"] { background: color-mix(in srgb, var(--creator-haupt) 16%, transparent); color: var(--creator-haupt); } .person__knoepfe { display: flex; gap: 7px; flex-wrap: wrap; justify-content: flex-end; } @@ -192,10 +204,10 @@ } /* Eine Farbe je Rolle -- dieselbe Sprache wie überall sonst. */ -.rollenwahl__knopf[data-rolle="admin"] { --r: #e8c07d; } -.rollenwahl__knopf[data-rolle="manager"] { --r: #8a76ff; } -.rollenwahl__knopf[data-rolle="scout"] { --r: #5fc99a; } -.rollenwahl__knopf[data-rolle="creator"] { --r: #3fbdf5; } +.rollenwahl__knopf[data-rolle="admin"] { --r: var(--dogi-haupt); } +.rollenwahl__knopf[data-rolle="manager"] { --r: var(--manager-haupt); } +.rollenwahl__knopf[data-rolle="scout"] { --r: var(--scout-haupt); } +.rollenwahl__knopf[data-rolle="creator"] { --r: var(--creator-haupt); } .rollenwahl__knopf[data-an="ja"] { color: #fff; @@ -225,31 +237,56 @@ AUGEN hell gefuellt, damit ein Gesicht auch ein Gesicht ist. `--r` ist die Farbe der Rolle und kommt aus der Liste darueber. */ +/* NACHTRAG 08.09.2026: DIE ZEICHEN TRAGEN IHRE FARBEN JETZT SELBST. + + Die Regeln darunter faerbten jedes Zeichen in der Farbe SEINER ROLLE + ein -- eine Farbe pro Zeichen. Filipe will es zweifarbig: "peperoni: + rot und grün", "husky: silber und blaue augen", "scout: grünes schild + mit einer roten peperoni drin". Das ist mit einer einzigen `--r` + nicht darstellbar, egal wie man mischt. + + Die Zeichen bringen ihre Verlaeufe deshalb selbst mit (siehe das + -Sprite in personen.html). Hier bleibt nur noch, was VON AUSSEN + kommen muss: Groesse und der Schlagschatten, der sie von der Flaeche + abhebt. + + `fill: none; stroke: var(--r)` MUSSTE WEG, und das ist der Kern: + Beides wird an die Pfade VERERBT. Ein Pfad, der nur ein `fill`-Attribut + traegt, haette den Rollen-Strich in 1,55 px geerbt -- jedes Zeichen + waere von einem dicken farbigen Rand ueberzogen worden. Jetzt steht + hier `stroke: none`, und jeder Pfad, der eine Linie haben will, sagt + das selbst. */ .rollenwahl__symbol { width: 24px; height: 24px; flex: none; margin-top: 1px; - fill: none; stroke: var(--r); stroke-width: 1.55; + fill: none; stroke: none; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6)); } -.rollenwahl__symbol .fuell { - stroke: none; - fill: color-mix(in srgb, var(--r) 58%, transparent); + +/* DAS FUNKELN DES MANAGER-STERNS. + + Ein heller Streifen wandert einmal quer ueber den Stern. Bewusst + langsam (4,5 s) und mit langer Pause: Ein schnelles Blinken waere + genau die aggressive Optik, die hier nicht sein soll -- und in einer + Liste mit fuenf Rollen zoege ein zappelndes Zeichen den Blick + dauerhaft von allem anderen ab. + + Gemacht ueber eine wandernde Maske, nicht ueber die Deckkraft: Ein + Auf- und Abblenden des ganzen Sterns waere ein Pulsieren, kein + Glitzern. Glanz ist etwas, das sich BEWEGT. */ +.rs-funkel { + -webkit-mask: linear-gradient(105deg, transparent 42%, #000 50%, transparent 58%) center / 260% 100% no-repeat; + mask: linear-gradient(105deg, transparent 42%, #000 50%, transparent 58%) center / 260% 100% no-repeat; + animation: rs-glitzer 4.5s cubic-bezier(.5, 0, .5, 1) infinite; } -.rollenwahl__symbol .linie { stroke: color-mix(in srgb, var(--r) 92%, #ffffff); } -.rollenwahl__symbol .auge { - stroke: none; - fill: color-mix(in srgb, var(--r) 30%, #ffffff); +@keyframes rs-glitzer { + 0%, 62% { -webkit-mask-position: 145% 0; mask-position: 145% 0; } + 100% { -webkit-mask-position: -45% 0; mask-position: -45% 0; } } -/* Der Haken im Schutzschild ist die AUSSAGE des Zeichens -- er bleibt - hell und duenn, damit er auf der gefuellten Flaeche steht statt in - ihr zu verschwinden. */ -.rollenwahl__symbol .hell { - stroke: color-mix(in srgb, var(--r) 18%, #ffffff); - stroke-width: 1.9; -} -.rollenwahl__symbol .nase { - stroke: none; - fill: color-mix(in srgb, var(--r) 45%, #06090f); +/* Hausregel: Wer weniger Bewegung eingestellt hat, bekommt keine. + Uebrig bleibt ein ruhiger goldener Stern -- nicht ein unsichtbarer. */ +@media (prefers-reduced-motion: reduce) { + .rs-funkel { animation: none; -webkit-mask: none; mask: none; opacity: .25; } } /* Beim gewaehlten Knopf leuchtet die Flaeche etwas staerker -- das ist der einzige Unterschied, den es braucht: mehr Licht auf demselben diff --git a/workspace/assets/css/start.css b/workspace/assets/css/start.css index b1897fec..4ecb6cc4 100644 --- a/workspace/assets/css/start.css +++ b/workspace/assets/css/start.css @@ -1713,10 +1713,10 @@ body.start > main { position: relative; z-index: 1; } border: 1px solid color-mix(in srgb, var(--rollen-ton) 38%, transparent); } /* Eine Farbe je Rolle -- dieselbe Sprache wie in der Personenliste. */ -.wer[data-rolle="admin"] { --rollen-ton: #e8c07d; } -.wer[data-rolle="manager"] { --rollen-ton: #9085e9; } -.wer[data-rolle="scout"] { --rollen-ton: #4fc38f; } -.wer[data-rolle="creator"] { --rollen-ton: #3fbdf5; } +.wer[data-rolle="admin"] { --rollen-ton: var(--dogi-haupt); } +.wer[data-rolle="manager"] { --rollen-ton: var(--manager-haupt); } +.wer[data-rolle="scout"] { --rollen-ton: var(--scout-haupt); } +.wer[data-rolle="creator"] { --rollen-ton: var(--creator-haupt); } /* Auf dem Handy faellt die Rollen-Marke weg und der Name darf schrumpfen. Ohne das schob die neue Kennung die Kopfleiste um 8 px aus dem Bild -- @@ -1851,10 +1851,10 @@ body.start > main { position: relative; z-index: 1; } /* Dieselben vier Rollentöne wie im Kopf der Seite und auf der Zugangsseite -- eine Rolle hat überall dieselbe Farbe. */ -.willkommen__plakette[data-rolle="admin"] { --rolle-ton: #d8a13a; } -.willkommen__plakette[data-rolle="manager"] { --rolle-ton: #8a76ff; } -.willkommen__plakette[data-rolle="scout"] { --rolle-ton: #12a69b; } -.willkommen__plakette[data-rolle="creator"] { --rolle-ton: #3fbdf5; } +.willkommen__plakette[data-rolle="admin"] { --rolle-ton: var(--dogi-haupt); } +.willkommen__plakette[data-rolle="manager"] { --rolle-ton: var(--manager-haupt); } +.willkommen__plakette[data-rolle="scout"] { --rolle-ton: var(--scout-haupt); } +.willkommen__plakette[data-rolle="creator"] { --rolle-ton: var(--creator-haupt); } /* Die Lage in einem Satz, abgesetzt hinter der Rolle. Auf dem Handy rutscht sie in die zweite Zeile, statt den Text zu quetschen. */ @@ -2852,10 +2852,10 @@ body.start #protokoll { /* Dieselben vier Rollentöne wie in der Begrüßung, im Seitenkopf und auf der Zugangsseite. Eine Rolle hat überall dieselbe Farbe -- sonst muss man jede Ansicht neu lernen. */ -.team-karte[data-rolle="admin"] { --k-ton: #d8a13a; } -.team-karte[data-rolle="manager"] { --k-ton: #8a76ff; } -.team-karte[data-rolle="scout"] { --k-ton: #12a69b; } -.team-karte[data-rolle="creator"] { --k-ton: #3fbdf5; } +.team-karte[data-rolle="admin"] { --k-ton: var(--dogi-haupt); } +.team-karte[data-rolle="manager"] { --k-ton: var(--manager-haupt); } +.team-karte[data-rolle="scout"] { --k-ton: var(--scout-haupt); } +.team-karte[data-rolle="creator"] { --k-ton: var(--creator-haupt); } /* Die eigene Karte: ein Rand in der eigenen Rollenfarbe. Ohne das sucht man sich zwischen zwanzig Gesichtern selbst. */ .team-karte[data-ich="ja"] { diff --git a/workspace/assets/js/kopf.js b/workspace/assets/js/kopf.js index 47ef38af..c738eb99 100644 --- a/workspace/assets/js/kopf.js +++ b/workspace/assets/js/kopf.js @@ -25,6 +25,19 @@ ziel.textContent = ''; ziel.dataset.rolle = ich.rolle || ''; + /* DIE ROLLE AUCH ANS (08.09.2026). + + Damit gilt die Farbe der angemeldeten Rolle fuer die GANZE Seite + und nicht nur fuer dieses eine Zeichen -- die Umschaltung steht in + gate.css bei `html[data-rolle=...]`. + + Warum am und nicht am : Das steht schon, bevor + irgendetwas geladen ist. Und warum ueberhaupt an einem so weit + oben liegenden Element: Wer die Farbe an jedem einzelnen Baustein + umschaltet, vergisst den naechsten, der dazukommt. Hier erbt alles + mit, auch was es heute noch gar nicht gibt. */ + if (ich.rolle) document.documentElement.dataset.rolle = ich.rolle; + /* Das eigene Bild, wenn es eines gibt -- sonst der Anfangsbuchstabe. Der Buchstabe bleibt als Unterlage LIEGEN und wird nicht ersetzt: Laedt das Bild nicht (Verbindung weg, Datei geloescht), steht dort diff --git a/workspace/personen.html b/workspace/personen.html index 339627f9..e85246e2 100644 --- a/workspace/personen.html +++ b/workspace/personen.html @@ -37,36 +37,154 @@ -