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:
@@ -157,10 +157,10 @@
|
|||||||
border: 1px solid color-mix(in srgb, var(--r) 30%, transparent);
|
border: 1px solid color-mix(in srgb, var(--r) 30%, transparent);
|
||||||
}
|
}
|
||||||
/* Dieselben Rollenfarben wie überall im Haus. */
|
/* Dieselben Rollenfarben wie überall im Haus. */
|
||||||
.chat-raum__zeichen[data-rolle="admin"] { --r: #e8c07d; }
|
.chat-raum__zeichen[data-rolle="admin"] { --r: var(--dogi-haupt); }
|
||||||
.chat-raum__zeichen[data-rolle="manager"] { --r: #8a76ff; }
|
.chat-raum__zeichen[data-rolle="manager"] { --r: var(--manager-haupt); }
|
||||||
.chat-raum__zeichen[data-rolle="scout"] { --r: #5fc99a; }
|
.chat-raum__zeichen[data-rolle="scout"] { --r: var(--scout-haupt); }
|
||||||
.chat-raum__zeichen[data-rolle="creator"] { --r: #3fbdf5; }
|
.chat-raum__zeichen[data-rolle="creator"] { --r: var(--creator-haupt); }
|
||||||
/* Eine Gruppe zeigt ihre Größe statt einer Initiale -- der Name der
|
/* Eine Gruppe zeigt ihre Größe statt einer Initiale -- der Name der
|
||||||
Gruppe steht ohnehin daneben. */
|
Gruppe steht ohnehin daneben. */
|
||||||
.chat-raum__zeichen[data-gruppe="ja"] {
|
.chat-raum__zeichen[data-gruppe="ja"] {
|
||||||
@@ -271,10 +271,10 @@
|
|||||||
background: color-mix(in srgb, var(--r) 13%, transparent);
|
background: color-mix(in srgb, var(--r) 13%, transparent);
|
||||||
border: 1px solid color-mix(in srgb, var(--r) 28%, 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="admin"] { --r: var(--dogi-haupt); }
|
||||||
.chat-nachricht__zeichen[data-rolle="manager"] { --r: #8a76ff; }
|
.chat-nachricht__zeichen[data-rolle="manager"] { --r: var(--manager-haupt); }
|
||||||
.chat-nachricht__zeichen[data-rolle="scout"] { --r: #5fc99a; }
|
.chat-nachricht__zeichen[data-rolle="scout"] { --r: var(--scout-haupt); }
|
||||||
.chat-nachricht__zeichen[data-rolle="creator"] { --r: #3fbdf5; }
|
.chat-nachricht__zeichen[data-rolle="creator"] { --r: var(--creator-haupt); }
|
||||||
/* Ohne Kreis (Folgenachricht) bleibt die Spalte trotzdem stehen. */
|
/* Ohne Kreis (Folgenachricht) bleibt die Spalte trotzdem stehen. */
|
||||||
.chat-nachricht[data-folge="ja"]:not([data-selbst="ja"]) .chat-nachricht__blase { grid-column: 2; }
|
.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%;
|
width: 7px; height: 7px; border-radius: 50%;
|
||||||
background: var(--r, var(--text-still)); flex: none;
|
background: var(--r, var(--text-still)); flex: none;
|
||||||
}
|
}
|
||||||
.chat-wahl__gruppe[data-rolle="admin"] { --r: #e8c07d; }
|
.chat-wahl__gruppe[data-rolle="admin"] { --r: var(--dogi-haupt); }
|
||||||
.chat-wahl__gruppe[data-rolle="manager"] { --r: #8a76ff; }
|
.chat-wahl__gruppe[data-rolle="manager"] { --r: var(--manager-haupt); }
|
||||||
.chat-wahl__gruppe[data-rolle="scout"] { --r: #5fc99a; }
|
.chat-wahl__gruppe[data-rolle="scout"] { --r: var(--scout-haupt); }
|
||||||
.chat-wahl__gruppe[data-rolle="creator"] { --r: #3fbdf5; }
|
.chat-wahl__gruppe[data-rolle="creator"] { --r: var(--creator-haupt); }
|
||||||
|
|
||||||
.chat-wahl__liste { display: flex; flex-wrap: wrap; gap: 7px; }
|
.chat-wahl__liste { display: flex; flex-wrap: wrap; gap: 7px; }
|
||||||
.chat-wahl__knopf {
|
.chat-wahl__knopf {
|
||||||
@@ -413,10 +413,10 @@
|
|||||||
color: var(--text-leise); font: inherit; cursor: pointer;
|
color: var(--text-leise); font: inherit; cursor: pointer;
|
||||||
transition: color .16s ease, border-color .16s ease, background .16s ease;
|
transition: color .16s ease, border-color .16s ease, background .16s ease;
|
||||||
}
|
}
|
||||||
.chat-wahl__knopf[data-rolle="admin"] { --r: #e8c07d; }
|
.chat-wahl__knopf[data-rolle="admin"] { --r: var(--dogi-haupt); }
|
||||||
.chat-wahl__knopf[data-rolle="manager"] { --r: #8a76ff; }
|
.chat-wahl__knopf[data-rolle="manager"] { --r: var(--manager-haupt); }
|
||||||
.chat-wahl__knopf[data-rolle="scout"] { --r: #5fc99a; }
|
.chat-wahl__knopf[data-rolle="scout"] { --r: var(--scout-haupt); }
|
||||||
.chat-wahl__knopf[data-rolle="creator"] { --r: #3fbdf5; }
|
.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: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__knopf:focus-visible { outline: 2px solid var(--r); outline-offset: 2px; }
|
||||||
.chat-wahl__zeichen {
|
.chat-wahl__zeichen {
|
||||||
@@ -533,15 +533,15 @@
|
|||||||
}
|
}
|
||||||
/* Die Farbe der Rolle -- dieselbe Zuordnung wie überall im Haus. */
|
/* Die Farbe der Rolle -- dieselbe Zuordnung wie überall im Haus. */
|
||||||
.chat-raum__zeichen[data-rolle="spicy"],
|
.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-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-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-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-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
|
/* Das Bild liegt ÜBER dem Buchstaben, nicht an seiner Stelle. Fällt es
|
||||||
aus, steht der Buchstabe weiterhin da. */
|
aus, steht der Buchstabe weiterhin da. */
|
||||||
|
|||||||
@@ -67,8 +67,95 @@
|
|||||||
--radius-klein: 12px;
|
--radius-klein: 12px;
|
||||||
--schatten: 0 24px 60px -20px rgba(0, 0, 0, 0.75);
|
--schatten: 0 24px 60px -20px rgba(0, 0, 0, 0.75);
|
||||||
--tempo: .22s cubic-bezier(.4, 0, .2, 1);
|
--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; }
|
*, *::before, *::after { box-sizing: border-box; }
|
||||||
|
|
||||||
/* `color-scheme: dark` ist der eigentliche Schalter für alles, was der
|
/* `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
|
damit die Farbe eines Tages nur an EINER Stelle geaendert werden
|
||||||
muss -- die Zeichen selbst wissen nichts von Rollen. */
|
muss -- die Zeichen selbst wissen nichts von Rollen. */
|
||||||
.rolle { --rf: var(--text-still); }
|
.rolle { --rf: var(--text-still); }
|
||||||
.rolle[data-rolle="spicy"] { --rf: #ff6f7d; }
|
/* Seit dem 08.09.2026 aus den zentralen Rollenfarben oben, nicht mehr
|
||||||
.rolle[data-rolle="admin"] { --rf: #e3b341; }
|
als eigene Hex-Werte. Zwei davon waren inhaltlich falsch geworden:
|
||||||
.rolle[data-rolle="manager"] { --rf: #a48bff; }
|
`admin` stand auf Gold (Filipe will Babyblau/Lila) und `creator` auf
|
||||||
.rolle[data-rolle="scout"] { --rf: #3fd18b; }
|
demselben Blau wie der allgemeine Akzent -- die Rolle war dadurch
|
||||||
.rolle[data-rolle="creator"] { --rf: #3fbdf5; }
|
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 {
|
.rolle__zeichen {
|
||||||
stroke: color-mix(in srgb, var(--rf) 88%, #ffffff);
|
stroke: color-mix(in srgb, var(--rf) 88%, #ffffff);
|
||||||
@@ -1612,7 +1704,7 @@ body.gate {
|
|||||||
Alle gedeckt, keine davon neon: augenschonend bleibt Vorgabe. */
|
Alle gedeckt, keine davon neon: augenschonend bleibt Vorgabe. */
|
||||||
/* Spicy Media traegt das Rot der Marke -- dieselbe Farbe wie ihr Name
|
/* Spicy Media traegt das Rot der Marke -- dieselbe Farbe wie ihr Name
|
||||||
im Kopf der Karte darueber. */
|
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="admin"] { --rton: var(--k-gold); }
|
||||||
.tafel .rolle[data-rolle="manager"] { --rton: var(--k-mittel); }
|
.tafel .rolle[data-rolle="manager"] { --rton: var(--k-mittel); }
|
||||||
.tafel .rolle[data-rolle="scout"] { --rton: var(--k-gut); }
|
.tafel .rolle[data-rolle="scout"] { --rton: var(--k-gut); }
|
||||||
|
|||||||
@@ -909,13 +909,13 @@
|
|||||||
/* Rollentöne. Dieselben wie in personen.css -- eine Farbe pro Rolle im
|
/* Rollentöne. Dieselben wie in personen.css -- eine Farbe pro Rolle im
|
||||||
ganzen Workspace, sonst muss man sie auf jeder Seite neu lernen. */
|
ganzen Workspace, sonst muss man sie auf jeder Seite neu lernen. */
|
||||||
.k-dabei__gruppe[data-rolle="admin"],
|
.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__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__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__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) {
|
@media (prefers-reduced-motion: reduce) {
|
||||||
.k-dabei__knopf, .k-dabei__haken { transition: none; }
|
.k-dabei__knopf, .k-dabei__haken { transition: none; }
|
||||||
|
|||||||
@@ -23,9 +23,21 @@
|
|||||||
padding: 1px 9px; border-radius: 999px;
|
padding: 1px 9px; border-radius: 999px;
|
||||||
font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
|
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; }
|
/* Alle FUENF Rollen, aus den zentralen Farben (08.09.2026).
|
||||||
.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; }
|
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; }
|
.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. */
|
/* Eine Farbe je Rolle -- dieselbe Sprache wie überall sonst. */
|
||||||
.rollenwahl__knopf[data-rolle="admin"] { --r: #e8c07d; }
|
.rollenwahl__knopf[data-rolle="admin"] { --r: var(--dogi-haupt); }
|
||||||
.rollenwahl__knopf[data-rolle="manager"] { --r: #8a76ff; }
|
.rollenwahl__knopf[data-rolle="manager"] { --r: var(--manager-haupt); }
|
||||||
.rollenwahl__knopf[data-rolle="scout"] { --r: #5fc99a; }
|
.rollenwahl__knopf[data-rolle="scout"] { --r: var(--scout-haupt); }
|
||||||
.rollenwahl__knopf[data-rolle="creator"] { --r: #3fbdf5; }
|
.rollenwahl__knopf[data-rolle="creator"] { --r: var(--creator-haupt); }
|
||||||
|
|
||||||
.rollenwahl__knopf[data-an="ja"] {
|
.rollenwahl__knopf[data-an="ja"] {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
@@ -225,31 +237,56 @@
|
|||||||
AUGEN hell gefuellt, damit ein Gesicht auch ein Gesicht ist.
|
AUGEN hell gefuellt, damit ein Gesicht auch ein Gesicht ist.
|
||||||
|
|
||||||
`--r` ist die Farbe der Rolle und kommt aus der Liste darueber. */
|
`--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 {
|
.rollenwahl__symbol {
|
||||||
width: 24px; height: 24px; flex: none; margin-top: 1px;
|
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;
|
stroke-linecap: round; stroke-linejoin: round;
|
||||||
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6));
|
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6));
|
||||||
}
|
}
|
||||||
.rollenwahl__symbol .fuell {
|
|
||||||
stroke: none;
|
/* DAS FUNKELN DES MANAGER-STERNS.
|
||||||
fill: color-mix(in srgb, var(--r) 58%, transparent);
|
|
||||||
|
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); }
|
@keyframes rs-glitzer {
|
||||||
.rollenwahl__symbol .auge {
|
0%, 62% { -webkit-mask-position: 145% 0; mask-position: 145% 0; }
|
||||||
stroke: none;
|
100% { -webkit-mask-position: -45% 0; mask-position: -45% 0; }
|
||||||
fill: color-mix(in srgb, var(--r) 30%, #ffffff);
|
|
||||||
}
|
}
|
||||||
/* Der Haken im Schutzschild ist die AUSSAGE des Zeichens -- er bleibt
|
/* Hausregel: Wer weniger Bewegung eingestellt hat, bekommt keine.
|
||||||
hell und duenn, damit er auf der gefuellten Flaeche steht statt in
|
Uebrig bleibt ein ruhiger goldener Stern -- nicht ein unsichtbarer. */
|
||||||
ihr zu verschwinden. */
|
@media (prefers-reduced-motion: reduce) {
|
||||||
.rollenwahl__symbol .hell {
|
.rs-funkel { animation: none; -webkit-mask: none; mask: none; opacity: .25; }
|
||||||
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);
|
|
||||||
}
|
}
|
||||||
/* Beim gewaehlten Knopf leuchtet die Flaeche etwas staerker -- das ist
|
/* Beim gewaehlten Knopf leuchtet die Flaeche etwas staerker -- das ist
|
||||||
der einzige Unterschied, den es braucht: mehr Licht auf demselben
|
der einzige Unterschied, den es braucht: mehr Licht auf demselben
|
||||||
|
|||||||
@@ -1713,10 +1713,10 @@ body.start > main { position: relative; z-index: 1; }
|
|||||||
border: 1px solid color-mix(in srgb, var(--rollen-ton) 38%, transparent);
|
border: 1px solid color-mix(in srgb, var(--rollen-ton) 38%, transparent);
|
||||||
}
|
}
|
||||||
/* Eine Farbe je Rolle -- dieselbe Sprache wie in der Personenliste. */
|
/* Eine Farbe je Rolle -- dieselbe Sprache wie in der Personenliste. */
|
||||||
.wer[data-rolle="admin"] { --rollen-ton: #e8c07d; }
|
.wer[data-rolle="admin"] { --rollen-ton: var(--dogi-haupt); }
|
||||||
.wer[data-rolle="manager"] { --rollen-ton: #9085e9; }
|
.wer[data-rolle="manager"] { --rollen-ton: var(--manager-haupt); }
|
||||||
.wer[data-rolle="scout"] { --rollen-ton: #4fc38f; }
|
.wer[data-rolle="scout"] { --rollen-ton: var(--scout-haupt); }
|
||||||
.wer[data-rolle="creator"] { --rollen-ton: #3fbdf5; }
|
.wer[data-rolle="creator"] { --rollen-ton: var(--creator-haupt); }
|
||||||
|
|
||||||
/* Auf dem Handy faellt die Rollen-Marke weg und der Name darf schrumpfen.
|
/* 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 --
|
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
|
/* Dieselben vier Rollentöne wie im Kopf der Seite und auf der
|
||||||
Zugangsseite -- eine Rolle hat überall dieselbe Farbe. */
|
Zugangsseite -- eine Rolle hat überall dieselbe Farbe. */
|
||||||
.willkommen__plakette[data-rolle="admin"] { --rolle-ton: #d8a13a; }
|
.willkommen__plakette[data-rolle="admin"] { --rolle-ton: var(--dogi-haupt); }
|
||||||
.willkommen__plakette[data-rolle="manager"] { --rolle-ton: #8a76ff; }
|
.willkommen__plakette[data-rolle="manager"] { --rolle-ton: var(--manager-haupt); }
|
||||||
.willkommen__plakette[data-rolle="scout"] { --rolle-ton: #12a69b; }
|
.willkommen__plakette[data-rolle="scout"] { --rolle-ton: var(--scout-haupt); }
|
||||||
.willkommen__plakette[data-rolle="creator"] { --rolle-ton: #3fbdf5; }
|
.willkommen__plakette[data-rolle="creator"] { --rolle-ton: var(--creator-haupt); }
|
||||||
|
|
||||||
/* Die Lage in einem Satz, abgesetzt hinter der Rolle. Auf dem Handy
|
/* Die Lage in einem Satz, abgesetzt hinter der Rolle. Auf dem Handy
|
||||||
rutscht sie in die zweite Zeile, statt den Text zu quetschen. */
|
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
|
/* Dieselben vier Rollentöne wie in der Begrüßung, im Seitenkopf und auf
|
||||||
der Zugangsseite. Eine Rolle hat überall dieselbe Farbe -- sonst muss
|
der Zugangsseite. Eine Rolle hat überall dieselbe Farbe -- sonst muss
|
||||||
man jede Ansicht neu lernen. */
|
man jede Ansicht neu lernen. */
|
||||||
.team-karte[data-rolle="admin"] { --k-ton: #d8a13a; }
|
.team-karte[data-rolle="admin"] { --k-ton: var(--dogi-haupt); }
|
||||||
.team-karte[data-rolle="manager"] { --k-ton: #8a76ff; }
|
.team-karte[data-rolle="manager"] { --k-ton: var(--manager-haupt); }
|
||||||
.team-karte[data-rolle="scout"] { --k-ton: #12a69b; }
|
.team-karte[data-rolle="scout"] { --k-ton: var(--scout-haupt); }
|
||||||
.team-karte[data-rolle="creator"] { --k-ton: #3fbdf5; }
|
.team-karte[data-rolle="creator"] { --k-ton: var(--creator-haupt); }
|
||||||
/* Die eigene Karte: ein Rand in der eigenen Rollenfarbe. Ohne das sucht
|
/* Die eigene Karte: ein Rand in der eigenen Rollenfarbe. Ohne das sucht
|
||||||
man sich zwischen zwanzig Gesichtern selbst. */
|
man sich zwischen zwanzig Gesichtern selbst. */
|
||||||
.team-karte[data-ich="ja"] {
|
.team-karte[data-ich="ja"] {
|
||||||
|
|||||||
@@ -25,6 +25,19 @@
|
|||||||
ziel.textContent = '';
|
ziel.textContent = '';
|
||||||
ziel.dataset.rolle = ich.rolle || '';
|
ziel.dataset.rolle = ich.rolle || '';
|
||||||
|
|
||||||
|
/* DIE ROLLE AUCH ANS <html> (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 <html> und nicht am <body>: Das <html> 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.
|
/* Das eigene Bild, wenn es eines gibt -- sonst der Anfangsbuchstabe.
|
||||||
Der Buchstabe bleibt als Unterlage LIEGEN und wird nicht ersetzt:
|
Der Buchstabe bleibt als Unterlage LIEGEN und wird nicht ersetzt:
|
||||||
Laedt das Bild nicht (Verbindung weg, Datei geloescht), steht dort
|
Laedt das Bild nicht (Verbindung weg, Datei geloescht), steht dort
|
||||||
|
|||||||
+145
-27
@@ -37,36 +37,154 @@
|
|||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<svg style="display:none" aria-hidden="true"><defs>
|
<!-- ====================================================================
|
||||||
<!-- Chili fuer Spicy Media -- dasselbe Zeichen wie auf der
|
DIE FÜNF ROLLENZEICHEN, plastisch (08.09.2026)
|
||||||
Anmeldeseite. Zwei Rollen mit derselben Krone waeren genau der
|
|
||||||
Fehler, den die Kacheln schon einmal hatten: Man klickt zweimal
|
|
||||||
falsch, bevor man merkt, dass es zwei verschiedene sind. -->
|
|
||||||
<g id="r-chili"><path class="fuell" d="M13.4 4.6c-.6 1.4-.3 2.6.6 3.4 3 .3 5 2.6 5 5.4 0 3.4-3 6-6.8 6-4.6 0-8.2-2.9-9.7-6.7 3.7.9 6.6-.4 8-3.1.6-1.2.4-2.4-.4-3.1"/><path class="linie" d="M13.4 4.6c1.5-.6 2.8.1 3 1.4"/><path class="linie" d="M13.4 4.6c-.6 1.4-.3 2.6.6 3.4 3 .3 5 2.6 5 5.4 0 3.4-3 6-6.8 6-4.6 0-8.2-2.9-9.7-6.7 3.7.9 6.6-.4 8-3.1.6-1.2.4-2.4-.4-3.1"/></g>
|
|
||||||
<!-- DER HUSKY FUER DOGFATHER (07.09.2026). Filipe: "die krone bei
|
|
||||||
dogfather durch einen husky ersetzen, wie mein logo."
|
|
||||||
|
|
||||||
Bei 22 Pixeln entscheidet die SILHOUETTE, nicht das Detail. Ein
|
Filipe: "die symbole sollen auch noch viel viel viel realistischer
|
||||||
Husky erkennt man an dreierlei, und mehr passt auch nicht hinein:
|
und geiler sein", mit genauen Vorgaben je Rolle:
|
||||||
den spitzen, aufrecht stehenden Ohren, dem breiten Kopf, der
|
peperoni rot und grün
|
||||||
nach unten schmal zulaeuft, und der Gesichtsmaske. Fell, Zunge
|
husky silber und blaue Augen
|
||||||
oder ein zweiter Ton wuerden bei dieser Groesse zu Matsch --
|
manager gelber Stern, der glitzert
|
||||||
genau deshalb hat die Krone davor auch funktioniert.
|
scout grünes Schild mit einer roten Peperoni darin
|
||||||
|
creator lila und silber, "was richtig geiles"
|
||||||
|
|
||||||
`fuell` traegt die Flaeche, `linie` die Zeichnung darauf; beides
|
WAS SICH GRUNDSÄTZLICH ÄNDERT: Vorher trug jedes Zeichen genau EINE
|
||||||
getrennt, damit die Farbe im CSS unabhaengig vom Umriss gesetzt
|
Farbe (`currentColor` über `.fuell`/`.linie`). Damit lässt sich
|
||||||
werden kann. -->
|
"rot UND grün" nicht darstellen. Jedes Zeichen bekommt deshalb
|
||||||
<g id="r-husky">
|
eigene Verläufe — dieselbe Technik, mit der auch die Kacheln
|
||||||
<path class="fuell" d="M6.3 4.2 9.6 8.9h4.8l3.3-4.7 1.1 6.2c.5 2.6-.4 5.1-2.4 6.8L12 21.2l-4.4-4c-2-1.7-2.9-4.2-2.4-6.8z"/>
|
plastisch wirken: ein heller Rand oben, die Sättigung in der Mitte,
|
||||||
<path class="linie" d="M6.3 4.2 9.6 8.9h4.8l3.3-4.7 1.1 6.2c.5 2.6-.4 5.1-2.4 6.8L12 21.2l-4.4-4c-2-1.7-2.9-4.2-2.4-6.8z"/>
|
Abdunklung unten. Das ergibt Volumen statt einer flachen Fläche.
|
||||||
<path class="linie" d="M9.6 8.9c-.9 1.4-1.4 2.6-1.5 4.1M14.4 8.9c.9 1.4 1.4 2.6 1.5 4.1"/>
|
|
||||||
<circle class="auge" cx="9.5" cy="13.1" r="1.05"/>
|
WARUM VERLÄUFE UND KEIN DETAIL: Diese Zeichen stehen bei 22 px.
|
||||||
<circle class="auge" cx="14.5" cy="13.1" r="1.05"/>
|
Mehr Linien werden dort zu Matsch — das stand schon beim Husky hier,
|
||||||
<path class="nase" d="M12 15.4l1.5 1.1-1.5 1.4-1.5-1.4z"/>
|
und es gilt weiter. "Realistischer" heißt bei dieser Größe also
|
||||||
|
nicht "mehr Striche", sondern LICHT: eine Form, auf die Licht fällt,
|
||||||
|
wirkt körperlich; dieselbe Form flach gefüllt wirkt wie ein
|
||||||
|
Aufkleber. Alle Verläufe laufen deshalb von oben nach unten, als
|
||||||
|
stünde das Licht über der Seite — so wie bei allem anderen hier auch.
|
||||||
|
|
||||||
|
Die Verlaufs-IDs sind mit `rs-` vorangestellt (RollenSymbol), damit
|
||||||
|
sie mit nichts kollidieren, was später dazukommt.
|
||||||
|
==================================================================== -->
|
||||||
|
<!-- NICHT `display:none` VERSTECKEN -- das war ein echter Fehler, und man
|
||||||
|
sieht ihn erst im Bild (08.09.2026).
|
||||||
|
|
||||||
|
Solange die Zeichen einfarbig waren (`currentColor` ueber CSS), war
|
||||||
|
`display:none` harmlos. Sobald sie ihre Farbe aus einem <linearGradient>
|
||||||
|
im selben <defs> holen, ist es das nicht mehr: Ein Verlauf in einem
|
||||||
|
Teilbaum, der `display:none` traegt, wird nicht ausgewertet, und ein
|
||||||
|
`<use>` darauf bekommt schlicht KEINE Fuellung. Im Bildschirmfoto
|
||||||
|
standen daraufhin fuenf Bruchstuecke -- nur die Strichlinien, keine
|
||||||
|
Flaechen. Die Zahlen sagten dazu nichts, das Sprite war ja da.
|
||||||
|
|
||||||
|
Richtig ist ein Kasten ohne Groesse: Er wird gerendert (Verlaeufe
|
||||||
|
werden also aufgeloest), nimmt aber keinen Platz ein. -->
|
||||||
|
<svg width="0" height="0" style="position:absolute;overflow:hidden" aria-hidden="true"><defs>
|
||||||
|
|
||||||
|
<linearGradient id="rs-chili-rot" x1="0" y1="0" x2="0" y2="1">
|
||||||
|
<stop offset="0" stop-color="#ff8a6b"/>
|
||||||
|
<stop offset=".55" stop-color="#ef4136"/>
|
||||||
|
<stop offset="1" stop-color="#a8221c"/>
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="rs-chili-gruen" x1="0" y1="0" x2="1" y2="1">
|
||||||
|
<stop offset="0" stop-color="#8fd66a"/>
|
||||||
|
<stop offset="1" stop-color="#3f7d33"/>
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="rs-silber" x1="0" y1="0" x2="0" y2="1">
|
||||||
|
<stop offset="0" stop-color="#ffffff"/>
|
||||||
|
<stop offset=".42" stop-color="#cfd8e3"/>
|
||||||
|
<stop offset=".72" stop-color="#93a1b3"/>
|
||||||
|
<stop offset="1" stop-color="#5d6b7d"/>
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="rs-gold" x1="0" y1="0" x2="0" y2="1">
|
||||||
|
<stop offset="0" stop-color="#fff3b0"/>
|
||||||
|
<stop offset=".45" stop-color="#ffd24a"/>
|
||||||
|
<stop offset="1" stop-color="#c88a12"/>
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="rs-schild" x1="0" y1="0" x2="0" y2="1">
|
||||||
|
<stop offset="0" stop-color="#7fe0ae"/>
|
||||||
|
<stop offset=".5" stop-color="#3faa78"/>
|
||||||
|
<stop offset="1" stop-color="#1c5e42"/>
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="rs-lila" x1="0" y1="0" x2="1" y2="1">
|
||||||
|
<stop offset="0" stop-color="#d9c9ff"/>
|
||||||
|
<stop offset=".38" stop-color="#a78bfa"/>
|
||||||
|
<stop offset="1" stop-color="#5b3fa8"/>
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="rs-lila-silber" x1="0" y1="1" x2="1" y2="0">
|
||||||
|
<stop offset="0" stop-color="#6d4fc4"/>
|
||||||
|
<stop offset=".5" stop-color="#cbd5e1"/>
|
||||||
|
<stop offset="1" stop-color="#a78bfa"/>
|
||||||
|
</linearGradient>
|
||||||
|
<radialGradient id="rs-auge" cx=".38" cy=".32" r=".85">
|
||||||
|
<stop offset="0" stop-color="#bfe9ff"/>
|
||||||
|
<stop offset=".45" stop-color="#3fa9f5"/>
|
||||||
|
<stop offset="1" stop-color="#0f4c75"/>
|
||||||
|
</radialGradient>
|
||||||
|
|
||||||
|
<!-- SPICY MEDIA — die Peperoni, rot mit grünem Stiel.
|
||||||
|
Der Stiel liegt ÜBER der Frucht und ist eine eigene Form: Als
|
||||||
|
Teil desselben Pfades hätte er die Farbe der Frucht erben müssen,
|
||||||
|
und genau das wollte Filipe nicht. -->
|
||||||
|
<g id="r-chili">
|
||||||
|
<path fill="url(#rs-chili-rot)" d="M13.4 4.6c-.6 1.4-.3 2.6.6 3.4 3 .3 5 2.6 5 5.4 0 3.4-3 6-6.8 6-4.6 0-8.2-2.9-9.7-6.7 3.7.9 6.6-.4 8-3.1.6-1.2.4-2.4-.4-3.1"/>
|
||||||
|
<path fill="none" stroke="rgba(255,255,255,.5)" stroke-width=".9" stroke-linecap="round" d="M6.2 13.9c2.4 1.9 5 2.6 7.4 2"/>
|
||||||
|
<path fill="none" stroke="url(#rs-chili-gruen)" stroke-width="1.9" stroke-linecap="round" d="M13.4 4.6c1.5-.6 2.8.1 3 1.4"/>
|
||||||
|
<path fill="none" stroke="url(#rs-chili-gruen)" stroke-width="1.7" stroke-linecap="round" d="M13.4 4.6c-.5 1.2-.3 2.3.5 3.2"/>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- DOGFATHER — der Husky in Silber, mit blauen Augen.
|
||||||
|
Silhouette unverändert (sie war richtig): spitze Ohren, breiter
|
||||||
|
Kopf, schmal zulaufend. Neu ist das Licht darauf und die Augen,
|
||||||
|
die jetzt aus einem eigenen Radialverlauf kommen — ein blauer
|
||||||
|
Punkt allein sähe aus wie ein Loch, mit Lichtpunkt wirkt er nass. -->
|
||||||
|
<g id="r-husky">
|
||||||
|
<path fill="url(#rs-silber)" d="M6.3 4.2 9.6 8.9h4.8l3.3-4.7 1.1 6.2c.5 2.6-.4 5.1-2.4 6.8L12 21.2l-4.4-4c-2-1.7-2.9-4.2-2.4-6.8z"/>
|
||||||
|
<path fill="rgba(255,255,255,.34)" d="M6.3 4.2 9.6 8.9h2.4V4.9z"/>
|
||||||
|
<path fill="none" stroke="rgba(40,58,78,.55)" stroke-width=".85" stroke-linecap="round" d="M9.6 8.9c-.9 1.4-1.4 2.6-1.5 4.1M14.4 8.9c.9 1.4 1.4 2.6 1.5 4.1"/>
|
||||||
|
<circle fill="url(#rs-auge)" cx="9.5" cy="13.1" r="1.15"/>
|
||||||
|
<circle fill="url(#rs-auge)" cx="14.5" cy="13.1" r="1.15"/>
|
||||||
|
<circle fill="#fff" opacity=".9" cx="9.15" cy="12.75" r=".33"/>
|
||||||
|
<circle fill="#fff" opacity=".9" cx="14.15" cy="12.75" r=".33"/>
|
||||||
|
<path fill="#2b3746" d="M12 15.4l1.5 1.1-1.5 1.4-1.5-1.4z"/>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- MANAGER — der goldene Stern, der glitzert.
|
||||||
|
Das Funkeln ist ein schmaler heller Streifen, der einmal quer
|
||||||
|
über den Stern wandert. Es ist BEWUSST langsam (4,5 s) und
|
||||||
|
schwach: Ein schnelles Blinken wäre genau die aggressive Optik,
|
||||||
|
die hier nicht sein soll. Bei "weniger Bewegung" steht es still
|
||||||
|
(siehe personen.css) -- dann bleibt ein ruhiger goldener Stern. -->
|
||||||
|
<g id="r-stern">
|
||||||
|
<path fill="url(#rs-gold)" d="m12 3.4 2.6 5.6 6 .8-4.4 4.2 1.1 6-5.3-2.9-5.3 2.9 1.1-6L3.4 9.8l6-.8z"/>
|
||||||
|
<path fill="rgba(255,255,255,.45)" d="m12 3.4 2.6 5.6-2.6.7z"/>
|
||||||
|
<path class="rs-funkel" fill="rgba(255,255,255,.75)" d="m12 3.4 2.6 5.6 6 .8-4.4 4.2 1.1 6-5.3-2.9-5.3 2.9 1.1-6L3.4 9.8l6-.8z"/>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- SCOUT — grünes Schild mit einer roten Peperoni darin.
|
||||||
|
Der Haken von früher ist weg: Filipe hat die Peperoni ausdrücklich
|
||||||
|
verlangt, und beides nebeneinander wäre bei 22 px Matsch. Die
|
||||||
|
Chili ist stark vereinfacht — bei dieser Größe zählt nur, dass
|
||||||
|
eine rote, gebogene Form mit grünem Stiel im Schild steht. -->
|
||||||
|
<g id="r-schutz">
|
||||||
|
<path fill="url(#rs-schild)" d="M12 3.4 5.8 5.9v5c0 3.5 2.5 6.7 6.2 8 3.7-1.3 6.2-4.5 6.2-8v-5z"/>
|
||||||
|
<path fill="rgba(255,255,255,.28)" d="M12 3.4 5.8 5.9v5c0 1.4.4 2.7 1.1 3.9L12 3.4z"/>
|
||||||
|
<path fill="url(#rs-chili-rot)" d="M13.6 8.1c-.4.9-.2 1.7.4 2.2 1.9.2 3.2 1.7 3.2 3.4 0 2.1-1.9 3.8-4.3 3.8-2.9 0-5.2-1.8-6.1-4.2 2.3.6 4.2-.3 5-2 .4-.8.3-1.5-.2-2z" transform="translate(-.6 -.9) scale(.92) translate(1 1)"/>
|
||||||
|
<path fill="none" stroke="#8fd66a" stroke-width="1.3" stroke-linecap="round" d="M12.9 7.6c.9-.4 1.7 0 1.8.8"/>
|
||||||
|
</g>
|
||||||
|
|
||||||
|
<!-- CREATOR — Lila und Silber.
|
||||||
|
Statt der alten Person-Silhouette (die aussah wie ein leeres
|
||||||
|
Benutzerbild und damit wie "niemand") jetzt ein geschliffener
|
||||||
|
Kristall: lila Kern, silberne Facetten. Er hat als einziges der
|
||||||
|
fünf Zeichen eine Innenzeichnung, und die trägt auch klein --
|
||||||
|
weil es gerade Kanten sind, keine Rundungen. -->
|
||||||
|
<g id="r-person">
|
||||||
|
<path fill="url(#rs-lila)" d="M12 2.6 20 9l-3 11.4H7L4 9z"/>
|
||||||
|
<path fill="url(#rs-lila-silber)" opacity=".85" d="M12 2.6 20 9h-5.6zM12 2.6 4 9h5.6z"/>
|
||||||
|
<path fill="rgba(255,255,255,.4)" d="M12 2.6 14.4 9H9.6z"/>
|
||||||
|
<path fill="none" stroke="rgba(216,222,233,.75)" stroke-width=".8" stroke-linejoin="round" d="M12 2.6 20 9l-3 11.4H7L4 9zM4 9h16M9.6 9 12 20.4 14.4 9"/>
|
||||||
</g>
|
</g>
|
||||||
<g id="r-stern"><path class="fuell" d="m12 3.4 2.6 5.6 6 .8-4.4 4.2 1.1 6-5.3-2.9-5.3 2.9 1.1-6L3.4 9.8l6-.8z"/><path class="linie" d="m12 3.4 2.6 5.6 6 .8-4.4 4.2 1.1 6-5.3-2.9-5.3 2.9 1.1-6L3.4 9.8l6-.8z"/></g>
|
|
||||||
<g id="r-schutz"><path class="fuell" d="M12 3.4 5.8 5.9v5c0 3.5 2.5 6.7 6.2 8 3.7-1.3 6.2-4.5 6.2-8v-5z"/><path class="linie" d="M12 3.4 5.8 5.9v5c0 3.5 2.5 6.7 6.2 8 3.7-1.3 6.2-4.5 6.2-8v-5z"/><path class="linie hell" d="m9.5 11.8 1.8 1.8 3.3-3.5"/></g>
|
|
||||||
<g id="r-person"><circle class="fuell" cx="12" cy="8.4" r="3.6"/><path class="fuell" d="M5 20c0-3.9 3.1-7 7-7s7 3.1 7 7z"/><circle class="linie" cx="12" cy="8.4" r="3.6"/><path class="linie" d="M5 20c0-3.9 3.1-7 7-7s7 3.1 7 7"/></g>
|
|
||||||
</defs></svg>
|
</defs></svg>
|
||||||
|
|
||||||
<main class="inhalt inhalt--breit">
|
<main class="inhalt inhalt--breit">
|
||||||
|
|||||||
Reference in New Issue
Block a user