Team-Lage: fuenf Stufen mit eigener Farbe, Karten neu gebaut, 404 wirft nicht mehr hinaus
B7 -- "wenn ich auf diese sachen drücke werd ich auf die startseite geschickt" und "ich will das es ein zwei kategorien mehr gibt und das soll geiler aussehen und jede seine eigene farbe, stark erkennbar" 1. DER RAUSWURF. Ein Druck auf einen Stufen-Knopf schickte auf die Startseite. Ursache: `hole()` stand ACHTMAL Zeichen fuer Zeichen gleich in acht Dateien, und darin warf JEDER 404 hinaus -- auch der auf eine blosse Handlung. Jetzt eine gemeinsame `assets/js/holen.js` mit der engeren, abgeleiteten Regel: Ein 404 wirft nur, solange die Seite noch gar nichts bekommen hat. 2. ZWEI STUFEN MEHR, und keine davon erfunden: "Fortgeschritten" gibt es im Entwicklungs-Katalog laengst (ENTWICKLUNG_ERWARTUNG), hier fehlte genau diese Mitte; "Vertretung" stand bis heute IN der Beschreibung von Senior. Keine Datenbankaenderung noetig -- die Spalte ist absichtlich ein TEXT ohne CHECK. 3. DIE FARBEN SIND GERECHNET. Nachgemessen lagen "Probe" und "Standard" bei 0,0576 OKLab-Abstand; MINDEST_ABSTAND ist 0,090 -- die beiden waren nebeneinander dieselbe Farbe, und alle drei lagen unter MINDEST_BUNTHEIT. Die neuen fuenf sind ein Faecher aus fuenf Farbwinkeln im Abstand von 72 Grad; der Versatz ist der, bei dem der kleinste Abstand am groessten wird. Ergebnis: 0,1531 untereinander, 0,1108 zur Rollenmarke daneben, Kontrast 7,4 bis 8,6. B8 -- "die sollen viel krasser geiler und übersichtlicher sein ... und die kacheln sollen viel krass geiler und spezieller aussehen auch der hintergrund, veränder das komplett" 4. DIE KARTE IST NEU: Kopfband in der Farbe der Stufe bis an die Kanten, Zeichen von 44 auf 52 px mit Ring, Zahlenband als eigene Flaeche, neuer Hintergrund (Farbschein unter dem Kopfband, feine Schraffur, dunklere Platte). 781 px hoch gemessen, danach 746. 5. DIE ROLLE STEHT JETZT DA -- als Marke auf der Karte und als Ueberschrift ueber jeder Gruppe. Sortiert war schon vorher nach Rolle; man konnte es nur nicht sehen. DREI FEHLER, DIE DABEI AUFFIELEN * `auto-fit` liess die einzelne Karte der rechten Hand ueber die ganze Bildschirmbreite laufen, sobald gruppiert wurde. `auto-fill` haelt die leeren Spalten offen. * Der Name der Person trug `tperson__namen` statt `tperson__name` -- ein Buchstabe, und damit die Klasse fuer graues Kleingedrucktes. Auf einer Seite ueber Personen war der Name kleiner als die Beschriftung darunter. Gefunden hat es die neue Pruefung, die ueberall "?" las. * `stufeSetzen()` suchte das Stufen-Schild mit `[class*="tmerkmal--"]:not(...)` -- einer Aufzaehlung dessen, was es NICHT ist. Sobald die Rollenmarke davorstand, traf die Suche sie: Ein Druck auf "Standard" haette aus "Modi" das Wort "Standard" gemacht. Und die Karte faerbte sich beim Setzen nicht mit um. DREI PRUEFUNGEN, ALLE MIT GEGENPROBE * pruef-holen.mjs (NEU, 14): fuehrt die echte Datei aus und misst fuenf Wege; dieselben fuenf noch einmal an der ALTEN Fassung, die bei genau zwei durchfallen muss. Dazu: laedt jede der acht Seiten holen.js, und zwar VOR ihrem Skript. * pruef-teamlage-karten.mjs (NEU, 22): im Browser. Gruppen, Rollenwort, Stufenknoepfe nur bei Modis, der Druck selbst (kein Sprung, ein Abruf, Schild und Kartenfarbe ziehen mit), Gegenprobe mit dem zweiten Druck, und die neuen Baender auf 390 px. * pruef-team-stufen.mjs (28 -> 47): die abgeschriebene Liste ["probe","standard","senior"] ist raus -- geprueft werden jetzt Eigenschaften und die Farbabstaende, gelesen aus team.css. Gegenprobe ist der Stand von gestern, der durch dieselbe Messung faellt. Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
Claude Opus 5
+390
-18
@@ -353,6 +353,78 @@
|
||||
Frage, sie gibt nur Zusammenhang. */
|
||||
.tmerkmal--leise { opacity: .78; }
|
||||
|
||||
/* ---------------------------------------------------------------------
|
||||
DIE ROLLE (22.09.2026)
|
||||
---------------------------------------------------------------------
|
||||
Filipe: „und auch den rollen entsprechend reihenfolge. nicht einfach
|
||||
so sondern die rolle soll die reihenfolge ausmachen."
|
||||
|
||||
Gemessen war die Reihenfolge schon nach Rolle sortiert -- man konnte
|
||||
es nur nicht sehen: Auf der Karte stand die STUFE („Probe"), nie die
|
||||
Rolle. Eine Ordnung, die man nicht sehen kann, sieht aus wie Zufall.
|
||||
|
||||
DIE ROLLENMARKE IST DIE ERSTE UND DIE KRAEFTIGSTE. Sie steht vor der
|
||||
Stufe, weil sie die groessere Frage beantwortet: WAS jemand ist,
|
||||
nicht wie weit er darin ist. Gefuellt statt umrandet -- die anderen
|
||||
Marken sind Auskunft, diese ist Einordnung.
|
||||
--------------------------------------------------------------------- */
|
||||
.tmerkmal--rolle {
|
||||
color: #0a0f18;
|
||||
background: color-mix(in srgb, var(--rm, #9fb6c6) 82%, #ffffff);
|
||||
border-color: color-mix(in srgb, var(--rm, #9fb6c6) 60%, transparent);
|
||||
letter-spacing: .01em;
|
||||
}
|
||||
/* Jede Rolle ihr Ton. Die rechte Hand behaelt ihr Gold -- es ist
|
||||
dasselbe, das die Karte schon traegt; ein zweiter Ton daneben waere
|
||||
eine zweite Sprache fuer dieselbe Sache. */
|
||||
.tmerkmal--r-hand { --rm: #f0c14b; }
|
||||
.tmerkmal--r-linke { --rm: #d8a7f5; }
|
||||
.tmerkmal--r-modi { --rm: #8fd6ff; }
|
||||
|
||||
/* ---------------------------------------------------------------------
|
||||
DIE GRUPPENUEBERSCHRIFT
|
||||
---------------------------------------------------------------------
|
||||
Vier Karten hintereinander sehen gleich aus, egal in welcher
|
||||
Reihenfolge sie stehen. Erst die Zaesur macht aus der Sortierung
|
||||
eine Gliederung.
|
||||
|
||||
Sie steht nur da, wenn es mehr als eine Gruppe gibt -- bei einer
|
||||
waere sie keine Gliederung, sondern eine Zeile, die sagt, was man
|
||||
ohnehin sieht.
|
||||
--------------------------------------------------------------------- */
|
||||
.t-gruppe {
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
margin: 24px 0 10px;
|
||||
font-size: .78rem; font-weight: 700;
|
||||
letter-spacing: .12em; text-transform: uppercase;
|
||||
color: var(--tg, #9fb6c6);
|
||||
}
|
||||
.t-gruppe[data-rolle="hand"] { --tg: #f0c14b; }
|
||||
.t-gruppe[data-rolle="linke"] { --tg: #d8a7f5; }
|
||||
.t-gruppe[data-rolle="modi"] { --tg: #8fd6ff; }
|
||||
/* Eine Linie, die bis zum Rand laeuft. Sie traegt die Zaesur; die
|
||||
Schrift allein ginge zwischen den Karten unter. */
|
||||
.t-gruppe::after {
|
||||
content: ""; flex: 1 1 auto; height: 1px;
|
||||
background: linear-gradient(90deg,
|
||||
color-mix(in srgb, var(--tg) 45%, transparent),
|
||||
transparent 70%);
|
||||
}
|
||||
.t-gruppe__zahl {
|
||||
padding: 1px 9px; border-radius: 999px;
|
||||
border: 1px solid color-mix(in srgb, var(--tg) 40%, transparent);
|
||||
background: color-mix(in srgb, var(--tg) 12%, transparent);
|
||||
font-size: .72rem; letter-spacing: 0;
|
||||
}
|
||||
/* Die erste Ueberschrift braucht oben keinen Abstand -- darueber steht
|
||||
schon die Trennung zur Warteliste. */
|
||||
.t-gruppe:first-of-type { margin-top: 6px; }
|
||||
|
||||
@media (forced-colors: active) {
|
||||
.tmerkmal--rolle { border: 1px solid CanvasText; }
|
||||
.t-gruppe::after { background: CanvasText; }
|
||||
}
|
||||
|
||||
/* PAUSIERT FAELLT AUF, aber warm und nicht alarmierend: Eine Pause ist
|
||||
kein Fehler. Derselbe Ton wie die Warnung daneben, nur ruhiger --
|
||||
sonst liest man "pausiert" als "kaputt". */
|
||||
@@ -362,23 +434,79 @@
|
||||
background: rgba(255, 154, 162, .1);
|
||||
}
|
||||
|
||||
/* DIE DREI STUFEN steigern sich sichtbar, ohne dass eine davon nach
|
||||
Rang aussieht: gleiche Form, nur mehr Farbe. Probe bleibt bewusst
|
||||
das ruhigste Schild -- wer neu ist, soll nicht markiert wirken. */
|
||||
/* =====================================================================
|
||||
DIE FUENF STUFENFARBEN (22.09.2026) -- GERECHNET, NICHT GEWAEHLT
|
||||
=====================================================================
|
||||
|
||||
Filipe: „und ich will das es ein zwei kategorien mehr gibt und das
|
||||
soll geiler aussehen und jede seine eigene farbe, stark erkennbar."
|
||||
|
||||
DER ALTE STAND WAR MESSBAR ZU NAH BEIEINANDER. Nachgerechnet in
|
||||
OKLab, mit denselben Schwellen, die das ganze Haus benutzt
|
||||
(tools/kachelton-regeln.mjs):
|
||||
|
||||
probe #9fb6c6 <-> standard #7fc4e8 Abstand 0,0576
|
||||
probe <-> senior #8fd6a6 Abstand 0,1136
|
||||
standard <-> senior Abstand 0,1202
|
||||
|
||||
MINDEST_ABSTAND ist 0,090. Das erste Paar lag DARUNTER -- „Probe"
|
||||
und „Standard" waren nebeneinander praktisch dieselbe Farbe. Und
|
||||
die Buntheit lag bei 0,034 / 0,086 / 0,099, alle drei unter
|
||||
MINDEST_BUNTHEIT (0,12): blass, genau das, was er gemeldet hat.
|
||||
Der Kommentar, der hier stand, nannte das eine Absicht („Probe
|
||||
bleibt bewusst das ruhigste Schild"). Die Absicht war gut gemeint
|
||||
und hat dazu gefuehrt, dass man zwei Stufen nicht unterscheiden
|
||||
konnte.
|
||||
|
||||
DIE NEUEN FUENF SIND EIN GLEICHMAESSIGER FAECHER: fuenf Farbwinkel
|
||||
im Abstand von 72 Grad, alle auf derselben Helligkeit (OKLab
|
||||
L = 0,74) und jeweils so bunt, wie es bei diesem Winkel gerade noch
|
||||
in sRGB passt. Der Versatz (54 Grad) ist nicht gewaehlt, sondern
|
||||
ausgerechnet: Von allen 72 moeglichen Drehungen ist es die, bei der
|
||||
der KLEINSTE Abstand am groessten wird -- auch zum Babyblau der
|
||||
Rollenmarke „Modi", die direkt daneben steht.
|
||||
|
||||
Gemessen ergibt das:
|
||||
|
||||
kleinster Abstand untereinander 0,1531 (Schwelle 0,090)
|
||||
kleinster Abstand zur Rollenmarke 0,1108
|
||||
kleinster Abstand zu „pausiert" 0,1273
|
||||
Kontrast gegen den Kartengrund 7,3 bis 8,6 (noetig: 4,5)
|
||||
Buntheit 0,126 bis 0,212 (0,12-0,30)
|
||||
|
||||
Die Reihenfolge ist ausserdem KALT NACH WARM -- Probe fliederblau,
|
||||
Vertretung magenta. Damit traegt die Farbe dieselbe Aussage wie die
|
||||
Reihenfolge der Knoepfe: Man sieht die Steigerung, ohne zu lesen.
|
||||
|
||||
Nachgeprueft wird das nicht hier, sondern in pruef-team-stufen.mjs:
|
||||
Die Pruefung liest STUFEN aus dem Server und die Farben aus DIESER
|
||||
Datei und rechnet die Abstaende nach. Ein Kommentar, der eine Zahl
|
||||
behauptet, ist kein Nachweis.
|
||||
===================================================================== */
|
||||
.tmerkmal--probe {
|
||||
color: color-mix(in srgb, #9fb6c6 82%, #ffffff);
|
||||
border-color: rgba(159, 182, 198, .3);
|
||||
background: rgba(159, 182, 198, .08);
|
||||
color: color-mix(in srgb, #8aa5ff 82%, #ffffff);
|
||||
border-color: rgba(138, 165, 255, .42);
|
||||
background: rgba(138, 165, 255, .13);
|
||||
}
|
||||
.tmerkmal--standard {
|
||||
color: color-mix(in srgb, #7fc4e8 82%, #ffffff);
|
||||
border-color: rgba(127, 196, 232, .34);
|
||||
background: rgba(127, 196, 232, .1);
|
||||
color: color-mix(in srgb, #00c2c7 82%, #ffffff);
|
||||
border-color: rgba(0, 194, 199, .42);
|
||||
background: rgba(0, 194, 199, .13);
|
||||
}
|
||||
.tmerkmal--fort {
|
||||
color: color-mix(in srgb, #8dbe00 82%, #ffffff);
|
||||
border-color: rgba(141, 190, 0, .42);
|
||||
background: rgba(141, 190, 0, .13);
|
||||
}
|
||||
.tmerkmal--senior {
|
||||
color: color-mix(in srgb, #8fd6a6 84%, #ffffff);
|
||||
border-color: rgba(143, 214, 166, .38);
|
||||
background: rgba(143, 214, 166, .12);
|
||||
color: color-mix(in srgb, #ff8511 82%, #ffffff);
|
||||
border-color: rgba(255, 133, 17, .42);
|
||||
background: rgba(255, 133, 17, .13);
|
||||
}
|
||||
.tmerkmal--vertretung {
|
||||
color: color-mix(in srgb, #ff6ad0 82%, #ffffff);
|
||||
border-color: rgba(255, 106, 208, .42);
|
||||
background: rgba(255, 106, 208, .13);
|
||||
}
|
||||
|
||||
/* ---------- Die Stufe setzen (nur DogFather) --------------------------- */
|
||||
@@ -465,18 +593,39 @@
|
||||
/* 300 px ist nachgemessen und nicht geraten: Darunter bricht
|
||||
"Community" von der Zahl daneben ab, und die Stufenknoepfe fallen in
|
||||
drei Zeilen. Auf einem Handy bleibt es bei einer Spalte. */
|
||||
/* `auto-fill` UND NICHT `auto-fit` (22.09.2026).
|
||||
---------------------------------------------------------------------
|
||||
Der Unterschied fiel erst auf, als die Karten nach Rolle gruppiert
|
||||
wurden: `auto-fit` laesst leere Spalten zusammenfallen, und die
|
||||
uebrigen Karten ziehen sich ueber die frei gewordene Breite. Solange
|
||||
alle vier Personen in EINER Reihe standen, war das richtig. In einer
|
||||
Gruppe mit genau einer Person -- und die rechte Hand ist immer eine
|
||||
-- wurde daraus eine Karte ueber die gesamte Bildschirmbreite.
|
||||
|
||||
Im Bildschirmfoto vom 22.09. war Rieke damit 1800 px breit und hoeher
|
||||
als der sichtbare Bereich, waehrend die drei Modis darunter normal
|
||||
nebeneinander standen. Es sah aus wie zwei verschiedene Seiten.
|
||||
|
||||
`auto-fill` haelt die leeren Spalten offen. Eine Karte ist dann
|
||||
genauso breit wie jede andere, egal wie viele neben ihr stehen. Auf
|
||||
einem schmalen Schirm bleibt alles wie bisher: `min(300px, 100%)`
|
||||
laesst dort ohnehin nur eine Spalte zu. */
|
||||
.t-wartet, .t-leute {
|
||||
display: grid; gap: 12px;
|
||||
grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
|
||||
grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
/* 2. DIE STUFE ALS FARBE DER KARTE.
|
||||
Dieselben drei Toene wie die Schilder darin -- ein vierter waere
|
||||
eine zweite Sprache fuer dieselbe Sache. */
|
||||
.tperson[data-stufe="probe"] { --r: #9fb6c6; }
|
||||
.tperson[data-stufe="standard"] { --r: #7fc4e8; }
|
||||
.tperson[data-stufe="senior"] { --r: #8fd6a6; }
|
||||
Dieselben fuenf Toene wie die Schilder darin -- ein sechster
|
||||
waere eine zweite Sprache fuer dieselbe Sache. Sie stehen hier
|
||||
ein zweites Mal, weil CSS keine Zuordnung kennt; dass beide
|
||||
Listen gleich sind, weist pruef-team-stufen.mjs nach. */
|
||||
.tperson[data-stufe="probe"] { --r: #8aa5ff; }
|
||||
.tperson[data-stufe="standard"] { --r: #00c2c7; }
|
||||
.tperson[data-stufe="fort"] { --r: #8dbe00; }
|
||||
.tperson[data-stufe="senior"] { --r: #ff8511; }
|
||||
.tperson[data-stufe="vertretung"] { --r: #ff6ad0; }
|
||||
/* Pausiert wird leiser, nicht ausgegraut: 0,72 statt 0,6 (das ist der
|
||||
Wert fuer GESPERRT). Eine Pause ist kein Entzug. */
|
||||
.tperson[data-pause="ja"] { opacity: .72; }
|
||||
@@ -763,3 +912,226 @@
|
||||
Zeichen; die Grenze steht jetzt am oberen Ende dieses Bereichs und
|
||||
nicht darunter. */
|
||||
.t-kopf__grenze { max-width: 68ch; }
|
||||
|
||||
/* =======================================================================
|
||||
DIE PERSONENKARTE, KOMPLETT ANDERS (22.09.2026)
|
||||
=======================================================================
|
||||
|
||||
Filipe: „was verstehst du nicht wenn ich sage die sollen viel
|
||||
krasser geiler und übersichtlicher sein. […] und die kacheln sollen
|
||||
viel krass geiler und spezieller aussehen auch der hintergrund,
|
||||
veränder das komplett."
|
||||
|
||||
Das „was verstehst du nicht" ist berechtigt: Am 20.09. hatte ich
|
||||
dieselbe Karte schon einmal angefasst und dabei nur die RECHTE HAND
|
||||
besonders gemacht. Die Modi-Karten sahen danach aus wie vorher --
|
||||
dunkles Rechteck, Raster, ein Kantenlicht in einem blassen Ton.
|
||||
|
||||
---------------------------------------------------------------------
|
||||
WAS HIER ANDERS IST -- vier Dinge, keine Effekte
|
||||
|
||||
1. EIN KOPFBAND. Bis heute begann die Karte mit einem Kreis und
|
||||
einem Namen auf demselben Grund wie alles darunter. Vier Karten
|
||||
nebeneinander waren dadurch vier gleiche Rechtecke, in denen man
|
||||
den Namen SUCHEN musste. Jetzt traegt der Kopf ein eigenes Band
|
||||
in der Farbe der Stufe, bis an die Kanten der Karte (auch bis in
|
||||
die Fase -- `clip-path` an der Karte schneidet es sauber ab).
|
||||
Damit ist auf zwei Meter Entfernung erkennbar, wessen Karte das
|
||||
ist und wo sie anfaengt.
|
||||
|
||||
2. DER HINTERGRUND IST NICHT MEHR NEUTRAL. Er hatte einen
|
||||
Farbschimmer von 11 % aus einer Ecke; bei den alten, blassen
|
||||
Stufentoenen war davon nichts zu sehen. Jetzt laeuft die Farbe
|
||||
vom Kopfband aus nach unten aus und die Karte steht auf einer
|
||||
DUNKLEREN Grundplatte als zuvor. Beides zusammen: mehr Farbe UND
|
||||
besserer Textkontrast -- das ist kein Widerspruch, weil die Farbe
|
||||
oben liegt und der Text unten.
|
||||
|
||||
3. DER KREIS WIRD EIN ZEICHEN. 44 px ohne Rand waren ein Punkt
|
||||
neben einem Wort. 52 px mit einem Ring in der Stufenfarbe sind
|
||||
ein Abzeichen. Derselbe Ring liegt um das Foto, wenn es eins
|
||||
gibt -- ein Mensch mit Bild und einer ohne sollen gleich viel
|
||||
Platz und dieselbe Form haben.
|
||||
|
||||
4. DIE ZAHLEN STEHEN AUF EINEM SOCKEL. Sie sind der Teil, den man
|
||||
im Vorbeigehen liest. Ein eigener, dunklerer Streifen am Fuss
|
||||
trennt sie von den Balken darueber, statt sie in dieselbe Flaeche
|
||||
zu mischen.
|
||||
|
||||
AUGENSCHONEND BLEIBT ES: keine Bewegung, kein Leuchten, kein
|
||||
Flackern. Die staerkste Farbfaeche der Karte liegt bei 30 % Deckung
|
||||
ueber einem fast schwarzen Grund. Was sich geaendert hat, ist die
|
||||
ANORDNUNG -- und die kostet die Augen nichts.
|
||||
======================================================================= */
|
||||
|
||||
/* ---- 1. Das Kopfband -------------------------------------------------- */
|
||||
/* `z-index: 1` liegt zwischen Raster (::after, 0) und Kantenlicht
|
||||
(::before, 2). Ohne ihn verschwaende das Band unter dem Raster --
|
||||
nicht falsch, aber flau. */
|
||||
.tperson__kopf {
|
||||
position: relative; z-index: 1;
|
||||
margin: -17px -19px 14px;
|
||||
padding: 15px 19px 13px;
|
||||
gap: 13px;
|
||||
background:
|
||||
linear-gradient(135deg,
|
||||
color-mix(in srgb, var(--r) 30%, transparent) 0%,
|
||||
color-mix(in srgb, var(--r) 12%, transparent) 52%,
|
||||
color-mix(in srgb, var(--r) 4%, transparent) 100%),
|
||||
linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(0, 0, 0, .12));
|
||||
border-bottom: 1px solid color-mix(in srgb, var(--r) 36%, transparent);
|
||||
}
|
||||
@media (max-width: 620px) {
|
||||
/* Die Karte hat auf schmalen Schirmen weniger Polster (14/15 px),
|
||||
also braucht das Band andere Gegenmasse. Eine feste Zahl gehoert
|
||||
dorthin, wo das steht, was sie ausgleicht. */
|
||||
.tperson__kopf { margin: -14px -15px 12px; padding: 13px 15px 11px; }
|
||||
}
|
||||
|
||||
/* ---- 2. Der Grund ----------------------------------------------------- */
|
||||
/* Die deckende Grundfarbe setzt weiterhin module.css (#070b12) -- sie
|
||||
muss decken, weil die Karte auf dem Buehnenbild der Seite liegt.
|
||||
Hier stehen nur die Ebenen DARUEBER. */
|
||||
.tperson {
|
||||
background:
|
||||
/* Der Schein, der unter dem Kopfband hervorkommt und nach etwa
|
||||
einem Drittel der Karte ausgelaufen ist. */
|
||||
linear-gradient(180deg,
|
||||
color-mix(in srgb, var(--r) 13%, transparent) 0%,
|
||||
color-mix(in srgb, var(--r) 4%, transparent) 22%,
|
||||
transparent 38%),
|
||||
/* Eine sehr feine Schraffur -- sie gibt der Flaeche eine Oberflaeche,
|
||||
ohne ein Muster zu sein. 2,2 % Weiss auf Schwarz ist an der
|
||||
Grenze des Sichtbaren, und genau dort soll sie liegen. */
|
||||
repeating-linear-gradient(115deg,
|
||||
rgba(255, 255, 255, .022) 0 1px, transparent 1px 10px),
|
||||
/* Und die Platte darunter, dunkler als vorher. */
|
||||
linear-gradient(178deg, rgba(8, 11, 18, .97), rgba(4, 6, 11, .99));
|
||||
}
|
||||
|
||||
/* ---- 3. Das Zeichen --------------------------------------------------- */
|
||||
.tperson__zeichen,
|
||||
.tperson__bild {
|
||||
width: 52px; height: 52px;
|
||||
box-shadow:
|
||||
0 0 0 2px color-mix(in srgb, var(--r) 55%, transparent),
|
||||
0 0 0 3px rgba(0, 0, 0, .45);
|
||||
}
|
||||
.tperson__zeichen {
|
||||
font-size: 1.24rem;
|
||||
border-color: color-mix(in srgb, var(--r) 20%, transparent);
|
||||
background: color-mix(in srgb, var(--r) 22%, #070a11);
|
||||
}
|
||||
.tperson__bild { border-color: transparent; }
|
||||
|
||||
/* Der Name traegt das Band -- er ist der Grund, warum man hinsieht. */
|
||||
.tperson__kopf .tperson__name {
|
||||
font-size: 1.16rem; font-weight: 700; letter-spacing: -.01em;
|
||||
}
|
||||
|
||||
/* ---- 4. Das Zahlenband ------------------------------------------------ */
|
||||
/* EIN BAND, KEIN SOCKEL -- und das ist ein Unterschied, der beinahe
|
||||
danebengegangen waere. Ein Sockel klebt am unteren Rand der Karte;
|
||||
dafuer muesste er das letzte Element sein. Er ist es NICHT: Unter
|
||||
den Zahlen kommen auf der Team-Lage noch die drei Bereichsbalken,
|
||||
und auf team.html noch mehr. Ein negativer Aussenabstand nach unten
|
||||
haette die Balken unter das Band geschoben.
|
||||
|
||||
Gepruefte Reihenfolge in teamlage.js: Kopf, Merkmale, Ampel,
|
||||
Stufen, Schreiben, ZAHLEN, Balken. Also blutet das Band nur zu den
|
||||
Seiten aus und traegt oben wie unten eine Kante -- das funktioniert
|
||||
an jeder Stelle der Karte, auch wenn morgen etwas dazwischen kommt. */
|
||||
.tperson__zahlen {
|
||||
position: relative; z-index: 1;
|
||||
margin: 14px -19px;
|
||||
padding: 13px 19px;
|
||||
/* NUR ANGEDUNKELT, NICHT ZUGEDECKT. Zuerst stand hier schwarz mit
|
||||
34-52 % -- im Bildschirmfoto wurde daraus ein schwarzer Riegel
|
||||
quer durch die Karte, waehrend die Mitte den lila Himmel des
|
||||
Hauses zeigte. Drei verschiedene Flaechen uebereinander sehen
|
||||
nicht nach einer Karte aus, sondern nach drei. 14-22 % dunkelt
|
||||
genug, um die Zahlen abzusetzen, und laesst den Himmel durch. */
|
||||
background: linear-gradient(180deg, rgba(0, 0, 0, .14), rgba(0, 0, 0, .22));
|
||||
border-top: 1px solid color-mix(in srgb, var(--r) 20%, rgba(255, 255, 255, .06));
|
||||
border-bottom: 1px solid rgba(255, 255, 255, .05);
|
||||
}
|
||||
/* Steht es doch einmal ganz unten (keine Balken), soll die Karte nicht
|
||||
mit einer Kante mitten im Polster aufhoeren. */
|
||||
.tperson__zahlen:last-child {
|
||||
margin-bottom: -19px; padding-bottom: 16px; border-bottom: 0;
|
||||
}
|
||||
@media (max-width: 620px) {
|
||||
.tperson__zahlen { margin: 12px -15px; padding: 12px 15px; }
|
||||
.tperson__zahlen:last-child { margin-bottom: -16px; padding-bottom: 14px; }
|
||||
}
|
||||
|
||||
/* ---- 5. Fuenf Stufenknoepfe statt drei -------------------------------- */
|
||||
/* Bei fuenf Knoepfen auf einer 300 px breiten Karte wird aus einer
|
||||
Reihe eine Wand. Etwas schmaler und ein engerer Abstand halten sie
|
||||
auf zwei Zeilen statt auf drei -- gemessen, nicht geschaetzt. */
|
||||
.tstufen { gap: 5px; }
|
||||
.tstufen__knopf { padding: 6px 10px; font-size: .75rem; }
|
||||
|
||||
@media (forced-colors: active) {
|
||||
.tperson__kopf { border-bottom: 1px solid CanvasText; }
|
||||
.tperson__zahlen { border-top: 1px solid CanvasText; }
|
||||
.tperson__zeichen, .tperson__bild { box-shadow: none; border: 1px solid CanvasText; }
|
||||
}
|
||||
|
||||
/* ---- 6. Die Karte wird kuerzer --------------------------------------- */
|
||||
/* GEMESSEN, BEVOR ETWAS GEAENDERT WURDE (22.09.2026, 1420 px breit):
|
||||
Karte 781 px hoch, davon Kopf 82, Merkmale 28, Ampel 95,
|
||||
Schreiben-Knopf 60, ZAHLEN 167, BALKEN 276. Die beiden letzten
|
||||
machen mehr als die Haelfte aus -- also wird dort gekuerzt und
|
||||
nicht dort, wo es am leichtesten faellt.
|
||||
|
||||
Filipe zu einer anderen Seite, dieselbe Sache: „es ist alles so
|
||||
lang gezogen, muss ewig scrollen um alles zu sehen das ist uncool."
|
||||
Gekuerzt wird der Leerraum, nicht der Inhalt: Es steht hinterher
|
||||
dasselbe da. */
|
||||
.tperson .tz { padding: 8px 11px; }
|
||||
.tperson .tz__schild { line-height: 1.3; }
|
||||
.tperson .tfort { gap: 7px; margin-top: 12px; padding-top: 11px; }
|
||||
.tperson .tfort__zeile { padding: 9px 11px; gap: 5px; }
|
||||
.tperson .tampel { margin-top: 12px; }
|
||||
.tperson .tschreiben { margin: 2px 0 10px; padding: 9px 14px; }
|
||||
|
||||
/* ---- 7. Die Stufenknoepfe tragen ihre eigene Farbe -------------------- */
|
||||
/* IM BILDSCHIRMFOTO VOM 22.09. WAREN ALLE FUENF BABYBLAU, auch der
|
||||
gewaehlte. Der Knopf "Senior" fuehrte also zu einer orangen Karte,
|
||||
sah selbst aber aus wie "Standard". Filipe: „jede seine eigene
|
||||
farbe, stark erkennbar" -- das gilt fuer die Stelle, an der man die
|
||||
Stufe WAEHLT, mindestens so sehr wie fuer die, an der sie steht.
|
||||
|
||||
Der gewaehlte Knopf ist gefuellt (wie bisher), die uebrigen tragen
|
||||
ihren Ton nur angedeutet: als Schrift und Rand. Fuenf gefuellte
|
||||
Pillen nebeneinander waeren Konfetti; fuenf angedeutete sind eine
|
||||
Leiter, die man von links nach rechts liest.
|
||||
|
||||
`--st` steht je Knopf am `data-stufe`, das Skript setzt es ohnehin.
|
||||
Die Farbwerte sind dieselben fuenf wie oben -- dass sie
|
||||
uebereinstimmen, weist pruef-team-stufen.mjs nach. */
|
||||
.tstufen__knopf[data-stufe="probe"] { --st: #8aa5ff; }
|
||||
.tstufen__knopf[data-stufe="standard"] { --st: #00c2c7; }
|
||||
.tstufen__knopf[data-stufe="fort"] { --st: #8dbe00; }
|
||||
.tstufen__knopf[data-stufe="senior"] { --st: #ff8511; }
|
||||
.tstufen__knopf[data-stufe="vertretung"] { --st: #ff6ad0; }
|
||||
|
||||
.tstufen__knopf[data-stufe] {
|
||||
color: color-mix(in srgb, var(--st) 72%, #e8f1fa);
|
||||
border-color: color-mix(in srgb, var(--st) 30%, transparent);
|
||||
background: color-mix(in srgb, var(--st) 7%, transparent);
|
||||
}
|
||||
.tstufen__knopf[data-stufe]:hover:not([disabled]) {
|
||||
color: color-mix(in srgb, var(--st) 40%, #ffffff);
|
||||
background: color-mix(in srgb, var(--st) 15%, transparent);
|
||||
border-color: color-mix(in srgb, var(--st) 48%, transparent);
|
||||
}
|
||||
.tstufen__knopf[data-an="ja"][data-stufe] {
|
||||
color: #0a121e;
|
||||
background: color-mix(in srgb, var(--st) 84%, #ffffff);
|
||||
border-color: transparent;
|
||||
}
|
||||
@media (forced-colors: active) {
|
||||
.tstufen__knopf[data-an="ja"][data-stufe] { border: 2px solid Highlight; }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user