CRYONOVA Schritt 3: Feldfokus, Blickfaenge, Testkorrekturen
Der Feldfokus zeigt jetzt den Ion-Rand und den weichen Schein, den das
Design-System auf Seite 15 verlangt. Er fehlte, weil der allgemeine
Tastaturring seinen dunklen Innenring darueberlegte: Dessen Selektor hat
Spezifitaet 0,3,0, die Feldregel nur 0,2,1 -- und Spezifitaet schlaegt
Reihenfolge, egal wie weit unten die Regel steht. Eingabefelder sind
jetzt vom Innenring ausgenommen; sie brauchen ihn nicht, weil sie selbst
eine dunkle Flaeche sind. Der Aqua-Umriss bleibt fuer alle erhalten.
Die zwei Blickfang-Motive stehen jetzt auch wirklich auf einer Seite:
das Wappen auf "Ueber mich", direkt nach dem Absatz ueber die Herkunft
des Namens, der Monolith auf "Portfolio" zwischen Einleitung und den
echten Projekten. Beide als Zierbild ausgezeichnet -- ihre Aussage steht
schon im Text daneben. Auf dem Handy laedt automatisch die kleine
Fassung.
Vier Fehler steckten in der Pruefung selbst, nicht im Stilblatt:
- Sie griff das erste "input" der Anfrageseite. Das sind aber sechs
optisch versteckte Auswahl-Radios, kein Textfeld.
- Sie mass ohne Fensterfokus. Ein Browser wendet :focus nur an, wenn das
Fenster selbst den Fokus hat -- das DOM meldet trotzdem brav
matches(":focus") === true, die Farbe bleibt die alte.
- Sie mass mitten im Uebergang, bevor die Animation stand.
- Und sie zaehlte Schattenebenen an "),", einem Muster, das in keinem
Schattenwert je vorkommt. Geprueft wird jetzt die Anforderung selbst:
Ion-Farbe und ein Weichzeichner ueber 0.
Geprueft: 334 Pruefungen gruen (CRYONOVA 53, Blickfang 13, Abmelden 16,
Angebot 54, Abbruch 42, System 5, Automatik 55, Angebote 56, Kette 40).
Co-Authored-By: Claude Opus 5 <[email protected]>
This commit is contained in:
Claude Opus 5
+199
-1
@@ -2556,7 +2556,20 @@ a.wd-karte:active, .wd-karte--klickbar:active {
|
||||
.wd :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
|
||||
outline: 2px solid rgb(var(--wd-aqua-rgb));
|
||||
outline-offset: 2px;
|
||||
/* Der dunkle Innenring trennt das Aqua von hellen Flaechen. */
|
||||
}
|
||||
|
||||
/* Der dunkle Innenring trennt das Aqua von hellen Flaechen.
|
||||
|
||||
Eingabefelder sind hier BEWUSST ausgenommen: Sie sind selbst eine
|
||||
dunkle, vertiefte Flaeche, das Aqua hebt sich davon ohnehin ab. Ein
|
||||
Innenring waere nicht nur ueberfluessig, er ueberschreibt auch den
|
||||
Ion-Schein, den das System auf Seite 15 fuer den Feldfokus verlangt.
|
||||
|
||||
Warum die Ausnahme im Selektor stehen muss und nicht einfach weiter
|
||||
unten ueberschrieben wird: Diese Regel hat Spezifitaet 0,3,0
|
||||
(Klasse + :is + :focus-visible), die Feldregel nur 0,2,1 -- und
|
||||
Spezifitaet schlaegt Reihenfolge, egal wie weit unten sie steht. */
|
||||
.wd :is(a, button, summary, [tabindex]):focus-visible {
|
||||
box-shadow: 0 0 0 4px rgb(3 8 16 / .85);
|
||||
}
|
||||
|
||||
@@ -2641,3 +2654,188 @@ a.wd-karte:active, .wd-karte--klickbar:active {
|
||||
.wd-status--kritisch { background: rgb(var(--wd-fehler-rgb) / .13); color: var(--wd-fehler); border-color: rgb(var(--wd-fehler-rgb) / .35); }
|
||||
.wd-status--pausiert { background: rgb(var(--wd-chrome-rgb) / .12); color: var(--wd-chrome); border-color: rgb(var(--wd-chrome-rgb) / .30); }
|
||||
.wd-status--vip { background: rgb(var(--wd-gold-rgb) / .13); color: var(--wd-gold); border-color: rgb(var(--wd-gold-rgb) / .35); }
|
||||
|
||||
/* =====================================================================
|
||||
SIGNATURE-VERLAEUFE (Design-System Seite 18)
|
||||
|
||||
Vier Verlaeufe mit je einer klaren Aufgabe. Das System gibt dazu eine
|
||||
Dosierungsregel, die wichtiger ist als die Verlaeufe selbst:
|
||||
|
||||
"Maximal ein Signature-Verlauf pro sichtbarer Bildschirmhoehe.
|
||||
Keine Regenbogenflaechen. Kein Vollflaechen-Neon.
|
||||
Champagne niemals mit Violet mischen."
|
||||
|
||||
Das letzte Verbot ist keine Geschmacksfrage: Champagne steht fuer
|
||||
Treue und Bezahltes, Violet fuer Spezielles. Mischt man beides, kann
|
||||
niemand mehr ablesen, was eine Flaeche bedeutet -- und genau die
|
||||
Ablesbarkeit ist der Zweck eines Farbsystems.
|
||||
|
||||
Deshalb sind es HILFSKLASSEN und keine Vorgabe auf Kacheln: Ein
|
||||
Verlauf, der automatisch auf jeder Karte laege, waere sofort eine
|
||||
Regenbogenflaeche. Man setzt ihn bewusst an eine Stelle.
|
||||
===================================================================== */
|
||||
|
||||
/* CRYO FLOW -- primaere Energie. Baby zu Ion zu Aqua. */
|
||||
.wd-verlauf--cryo {
|
||||
background: linear-gradient(135deg,
|
||||
rgb(var(--wd-blau-rgb) / .95) 0%,
|
||||
rgb(var(--wd-ion-rgb) / .90) 50%,
|
||||
rgb(var(--wd-aqua-rgb) / .85) 100%);
|
||||
}
|
||||
|
||||
/* PRISM SHIFT -- Premium und Fokus. Ion zu Indigo. */
|
||||
.wd-verlauf--prisma {
|
||||
background: linear-gradient(135deg,
|
||||
rgb(var(--wd-ion-rgb) / .92) 0%,
|
||||
rgb(var(--wd-indigo-rgb) / .92) 100%);
|
||||
}
|
||||
|
||||
/* AURORA CUT -- Spezialmoment. Indigo zu Violet. */
|
||||
.wd-verlauf--aurora {
|
||||
background: linear-gradient(135deg,
|
||||
rgb(var(--wd-indigo-rgb) / .90) 0%,
|
||||
rgb(var(--wd-lila-rgb) / .90) 100%);
|
||||
}
|
||||
|
||||
/* LIQUID VALUE -- VIP und Treue. Champagne allein, mit einer dunklen
|
||||
Tiefe statt einer zweiten Akzentfarbe: Das System verbietet die
|
||||
Mischung mit Violet ausdruecklich. */
|
||||
.wd-verlauf--liquid {
|
||||
background: linear-gradient(135deg,
|
||||
rgb(var(--wd-gold-rgb) / .92) 0%,
|
||||
rgb(var(--wd-gold-rgb) / .55) 55%,
|
||||
rgb(var(--wd-dunkelblau-2)) 100%);
|
||||
}
|
||||
|
||||
/* Text auf einem Signature-Verlauf braucht immer dunkle Schrift --
|
||||
alle vier sind hell genug, dass helle Schrift darauf verschwindet. */
|
||||
.wd-verlauf--cryo, .wd-verlauf--prisma,
|
||||
.wd-verlauf--aurora, .wd-verlauf--liquid { color: var(--wd-schwarz); }
|
||||
|
||||
/* =====================================================================
|
||||
FORMULARE UND TABELLEN (Design-System Seite 15)
|
||||
|
||||
"Fokus: Eingabefeld erhaelt Ion-Blue-Rand und sanften Glow.
|
||||
Tabellenzeile erhaelt beim Hover ein sehr schwaches,
|
||||
positionsabhaengiges Licht."
|
||||
|
||||
Das Wort "sehr schwach" ist hier die eigentliche Anweisung. Eine
|
||||
Tabelle ist zum Lesen da: Wandert beim Ueberfahren ein kraeftiges
|
||||
Licht mit, springt der Blick staendig zur Maus statt zur Zahl, die
|
||||
man eigentlich sucht. Deshalb liegt die Deckkraft hier bei einem
|
||||
Bruchteil dessen, was eine Kachel bekommt.
|
||||
===================================================================== */
|
||||
|
||||
/* Der Fokus im Eingabefeld: Ion-Rand plus weicher Schein.
|
||||
Die Vertiefung bleibt erhalten -- sonst springt das Feld beim
|
||||
Anklicken optisch aus der Flaeche heraus. */
|
||||
.wd-feld input:focus, .wd-feld select:focus, .wd-feld textarea:focus,
|
||||
.wd-eingabe:focus {
|
||||
border-color: rgb(var(--wd-ion-rgb) / .85);
|
||||
box-shadow:
|
||||
var(--wd-tiefe),
|
||||
0 0 0 4px rgb(var(--wd-ion-rgb) / .16),
|
||||
0 0 18px -4px rgb(var(--wd-ion-rgb) / .45);
|
||||
}
|
||||
|
||||
/* Ein Feld mit Fehler traegt IMMER auch Text -- die Farbe allein
|
||||
waere fuer niemanden lesbar, der sie nicht unterscheiden kann. */
|
||||
.wd-feld--fehler input, .wd-feld--fehler select, .wd-feld--fehler textarea {
|
||||
border-color: rgb(var(--wd-fehler-rgb) / .7);
|
||||
}
|
||||
.wd-feld--fehler input:focus, .wd-feld--fehler select:focus,
|
||||
.wd-feld--fehler textarea:focus {
|
||||
box-shadow:
|
||||
var(--wd-tiefe),
|
||||
0 0 0 4px rgb(var(--wd-fehler-rgb) / .18);
|
||||
}
|
||||
|
||||
/* ---------- Tabellen ---------- */
|
||||
.wd-tabelle {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: .92rem;
|
||||
}
|
||||
.wd-tabelle th {
|
||||
text-align: left;
|
||||
font-size: .74rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: .06em;
|
||||
text-transform: uppercase;
|
||||
color: var(--wd-text-soft);
|
||||
padding: .6rem .8rem;
|
||||
border-bottom: 1px solid rgb(var(--wd-blau-rgb) / .22);
|
||||
}
|
||||
.wd-tabelle td {
|
||||
padding: .7rem .8rem;
|
||||
border-bottom: 1px solid rgb(255 255 255 / .05);
|
||||
color: var(--wd-text-mid);
|
||||
}
|
||||
/* Zahlen in gleicher Ziffernbreite: Sonst stehen Betraege in einer
|
||||
Spalte nicht untereinander, und man vergleicht sie falsch. */
|
||||
.wd-tabelle td.wd-zahl, .wd-tabelle th.wd-zahl {
|
||||
text-align: right;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
.wd-tabelle tbody tr {
|
||||
--wd-lichtx: 50%;
|
||||
position: relative;
|
||||
transition: background-color .2s ease;
|
||||
}
|
||||
/* Das positionsabhaengige Licht der Zeile -- bewusst nur 7 %, ein
|
||||
Viertel dessen, was eine Kachel bekommt. Es soll die Zeile
|
||||
nachzeichnen, nicht den Blick fangen. */
|
||||
.wd-tabelle tbody tr:hover {
|
||||
background: linear-gradient(90deg,
|
||||
transparent 0%,
|
||||
rgb(var(--wd-blau-rgb) / .07) var(--wd-lichtx),
|
||||
transparent 100%);
|
||||
}
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.wd-tabelle tbody tr:hover { background: rgb(var(--wd-blau-rgb) / .05); }
|
||||
}
|
||||
|
||||
/* =====================================================================
|
||||
KACHEL-ANATOMIE (Design-System Seite 11)
|
||||
|
||||
Das System beschreibt sechs Bestandteile: Material (Obsidian Glass
|
||||
statt flacher Farbe), Kante (1 px Baby Blue, 24-36 % Deckkraft),
|
||||
Lumen, Inhalt ueber dem Licht, Tiefe (zarter Schatten plus innere
|
||||
Lichtkante) und Zustand.
|
||||
|
||||
Fuenf davon standen bereits. Was fehlte, ist die INNERE LICHTKANTE:
|
||||
eine haarfeine helle Linie an der Oberkante. Sie ist der Unterschied
|
||||
zwischen "dunkles Rechteck" und "Objekt aus Glas" -- Licht faellt von
|
||||
oben, also faengt die obere Kante es ein. Ohne sie wirkt jede Kachel
|
||||
flach, egal wie gut die Farben sind.
|
||||
===================================================================== */
|
||||
.wd-karte {
|
||||
/* BEIDE Hintergrundebenen, nicht nur eine.
|
||||
|
||||
Die Kachel baut ihre Kante ueber einen zweiten Verlauf auf der
|
||||
border-box -- der Rahmen selbst ist durchsichtig. Ein erster
|
||||
Versuch setzte hier nur die Flaeche (padding-box) und liess die
|
||||
Randebene damit ersatzlos wegfallen: Der Rand mass danach
|
||||
rgba(0,0,0,0), also gar nichts. Sichtbar war das kaum, messbar
|
||||
sofort -- und das System verlangt ausdruecklich eine Kante von
|
||||
1 px Baby Blue mit 24-36 % Deckkraft (Seite 11). */
|
||||
background:
|
||||
linear-gradient(180deg,
|
||||
rgb(var(--wd-glas-rgb) / .58),
|
||||
rgb(6 19 35 / .72)) padding-box,
|
||||
linear-gradient(140deg,
|
||||
rgb(var(--wd-blau-rgb) / .36),
|
||||
rgb(var(--wd-blau-rgb) / .10) 45%,
|
||||
rgb(var(--wd-lila-rgb) / .26)) border-box;
|
||||
/* Die innere Lichtkante: eine haarfeine helle Linie oben. Sie ist
|
||||
der Unterschied zwischen "dunkles Rechteck" und "Objekt aus
|
||||
Glas" -- Licht faellt von oben, also faengt die obere Kante es
|
||||
ein. Ohne sie wirkt jede Kachel flach, egal wie gut die Farben
|
||||
sind. */
|
||||
box-shadow:
|
||||
var(--wd-hoehe-1),
|
||||
inset 0 1px 0 rgb(var(--wd-blau-rgb) / .16);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user