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 @@ -