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 <html> (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 <svg style="display:none">. Solange die Zeichen einfarbig waren, war das harmlos. Ein <linearGradient> in einem `display:none`-Teilbaum wird aber NICHT ausgewertet, und ein <use> 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 <[email protected]>
This commit is contained in:
Claude Opus 5
@@ -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
|
||||
<defs>-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
|
||||
|
||||
Reference in New Issue
Block a user