DogFatherGit/dogfather-universe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Die fuenf Rollen bekommen eigene Farben und echte Zeichen

Browse Source 
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:
DogFatherGit
2026-09-08 04:30:12 +02:00
co-authored by Claude Opus 5
parent 863471c3df
commit 963ea492b1
7 changed files with 355 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files
workspace/assets/css/gate.css
+98 -6
View File
@@ -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 <html> (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); }