DogFatherGitandClaude Opus 5
1fe443e59c
DAS LICHT BLIEB HAENGEN -- vier Ursachen, jede einzeln behoben:
1. EIN WETTLAUF. Zwischen dem Anmelden eines Bildaufbaus und seinem
Ablauf konnte der Zeiger die Karte laengst verlassen haben. Dann hatte
pointerout schon aufgeraeumt, und der Bildaufbau schaltete das Licht
gleich wieder AN. Der haeufigste Fall und der unauffaelligste.
2. UEBER EINE LUECKE VERLASSEN. Wer eine Karte nicht ueber eine
Nachbarkarte verliess, sondern ueber den Zwischenraum, loeste kein
Ereignis aus, das die alte Karte kannte.
3. GESCROLLT, OHNE DIE MAUS ZU BEWEGEN. Die Karte wandert unter dem
stehenden Zeiger weg -- es kommt gar kein Zeigerereignis. Jetzt wird
beim Scrollen nachgesehen, ob die beleuchtete Karte noch unter dem
Zeiger liegt.
4. FENSTER ODER TAB VERLASSEN. Auch dort kommt nichts mehr.
Es gibt jetzt genau EINE beleuchtete Karte -- mehr kann es nicht geben,
es gibt ja nur einen Zeiger. Beim Wechsel geht die alte aus, bevor die
neue angeht.
DIE FARBE GEHOERT ZUR KACHEL. Auf der Wissensseite leuchteten alle sechs
Welten violett, weil die Farbe dort --w heisst und der ganze uebrige
Workspace --ton benutzt. Das Licht griff auf --ton zu, fand nichts und
nahm den Farbton der SEITE. Dieselbe Luecke bei den Aufgaben-Spalten
(--sfarbe), den Kalenderkarten (--afarbe) und den Kalenderzeilen
(--zfarbe). Alle vier setzen jetzt --ton mit.
Nachgewiesen an echten Bildpunkten, nicht am Quelltext: Der Zeiger wird
auf die Aufgaben-Kachel gesetzt (dort muss Rot ueberwiegen: 85 zu 22)
und auf die Kalender-Kachel (dort Blau: 71 zu 13). Ein
Zeichenkettenvergleich haette das nicht gekonnt -- der Browser rechnet
color-mix() aus und schreibt je nach Fassung rgb(), color() oder oklab()
zurueck.
DAS HANDY, komplett durchgeprueft: neue pruef-handy.mjs faehrt alle
fuenfzehn Seiten auf DREI echten Geraetegroessen ab (320 px iPhone SE,
390 px iPhone, 412 px Android) und misst fuenf Dinge, die am Rechner
unsichtbar sind. Gefunden und behoben:
* ZWEI ECHTE UEBERLAEUFE (startcheck +27 px, automation +33 px). Die
Seite liess sich waagerecht schieben -- auf einem Telefon der
schlimmste Fehler. Ursachen: zwoelf Raster mit festem Mindestmass
(minmax(280px, 1fr) kann nicht schrumpfen -> min(280px, 100%)),
zwoelf feste Mindestbreiten an Auswahlfeldern, und ein "flex: none"
an den Stufen-Knoepfen, das jedes Schrumpfen verbot. "width: 100%"
allein reichte dort nicht.
* BERUEHRZIELE unter 24 px (WCAG 2.2, Kriterium 2.5.8). Auswahlfelder
waren 18 bis 22 px hoch. Jetzt 44 px -- die Empfehlung von Apple und
Google, und der Daumen ist nun einmal breiter als ein Mauszeiger.
Nebenbei behebt die Schriftgroesse 16 px das Hineinzoomen von iOS.
* SCHRIFT unter 11,7 px an 52 Stellen. Gesucht wurden sie nicht von
Hand -- das waere ein Ratespiel gewesen und haette die Haelfte
uebersehen -- sondern durch Durchsuchen der Stildateien nach
font-size unter 0,73rem.
ZWEI FEHLER IN DEN EIGENEN PRUEFUNGEN gefunden und behoben: Die
Schriftregel griff zuerst gar nicht (start.css wird VOR den Seitenstilen
geladen, bei gleicher Staerke gewinnt die spaetere -- jetzt mit
body.start qualifiziert), und die Lichtpruefung scrollte 600 px und
stellte nicht zurueck, sodass die folgende Pruefung ins Leere zeigte.
GEGENPROBE gemacht: Mit absichtlich eingebauten Fehlern (8-px-Schrift,
500 px breiter Inhalt) meldet die Handypruefung sofort Rot. Eine
Pruefung, die immer bestaetigt, bestaetigt nichts.
Alle achtzehn Pruefungen laufen gruen.
Co-Authored-By: Claude Opus 5 <[email protected]>
270 lines
11 KiB
CSS
270 lines
11 KiB
CSS
/* ===================================================================
|
|
Aufgabenbrett. Baut auf gate.css und start.css auf.
|
|
=================================================================== */
|
|
|
|
/* .inhalt--breit, .zurueck, .kopf-zeile und .leise sind am 31.08.2026 nach
|
|
start.css gewandert -- sie werden auf jeder Seite gebraucht, aber nicht
|
|
jede Seite laedt diese Datei hier. */
|
|
|
|
/* ---------- Formular -------------------------------------------------- */
|
|
|
|
.neu {
|
|
margin: 0 0 28px;
|
|
padding: 20px;
|
|
background: var(--flaeche);
|
|
border: 1px solid var(--rand);
|
|
border-radius: var(--radius);
|
|
}
|
|
.neu__zeile { margin-bottom: 14px; }
|
|
/* Zwoelf Spalten statt auto-fit: Damit laesst sich sagen, WIE breit ein
|
|
Feld sein soll -- ein Titel braucht die ganze Zeile, eine Stufe ein
|
|
Drittel. auto-fit gab jedem Feld dieselbe Breite, egal was drin steht. */
|
|
.neu__raster {
|
|
display: grid; gap: 14px 16px; margin-bottom: 8px;
|
|
grid-template-columns: repeat(12, 1fr);
|
|
}
|
|
/* Vorgabe: ein Drittel. Reicht fuer Auswahlfelder und Datumsangaben. */
|
|
.neu__raster > .feld { grid-column: span 4; min-width: 0; }
|
|
|
|
/* Diese Klasse stand in drei HTML-Dateien, war aber NIE definiert --
|
|
deshalb quetschte das Raster jedes Feld in dieselbe Breite und lange
|
|
Kategorienamen wurden abgeschnitten. */
|
|
.neu__raster > .feld--breit { grid-column: 1 / -1; }
|
|
.neu__raster > .feld--halb { grid-column: span 6; }
|
|
|
|
@media (max-width: 860px) {
|
|
.neu__raster > .feld { grid-column: span 6; }
|
|
}
|
|
@media (max-width: 560px) {
|
|
.neu__raster > .feld, .neu__raster > .feld--halb { grid-column: 1 / -1; }
|
|
}
|
|
.neu__knoepfe { display: flex; gap: 10px; align-items: center; margin-top: 12px; }
|
|
|
|
.feld-schild {
|
|
display: block; margin-bottom: 6px;
|
|
font-size: .76rem; font-weight: 600; letter-spacing: .06em;
|
|
text-transform: uppercase; color: var(--text-still);
|
|
}
|
|
|
|
.neu input, .neu textarea, .neu select {
|
|
width: 100%; padding: 10px 12px;
|
|
background: rgba(255, 255, 255, .045);
|
|
border: 1px solid var(--rand);
|
|
border-radius: var(--radius-klein);
|
|
color: var(--text); font: inherit;
|
|
transition: border-color var(--tempo), box-shadow var(--tempo);
|
|
}
|
|
.neu textarea { resize: vertical; min-height: 62px; }
|
|
.neu input:focus, .neu textarea:focus, .neu select:focus {
|
|
outline: none; border-color: rgba(63, 189, 245, .7);
|
|
box-shadow: 0 0 0 3px rgba(63, 189, 245, .16);
|
|
}
|
|
/* Aufhellen ist nicht mehr noetig: color-scheme: dark (gate.css) laesst den
|
|
Browser das Kalendersymbol schon hell zeichnen. Ein invert() wuerde es hier
|
|
wieder verdunkeln. */
|
|
.neu input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; }
|
|
|
|
/* ---------- Brett ----------------------------------------------------- */
|
|
|
|
.brett {
|
|
display: grid; gap: 14px;
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
align-items: start;
|
|
}
|
|
|
|
/* Die vier Spalten bekommen dieselbe Behandlung wie die Kacheln auf der
|
|
Startseite: eine eigene Farbe je Status, ein Streifen oben in dieser
|
|
Farbe, ein sehr weicher Verlauf darunter. Vorher unterschied sie nur
|
|
ein 8 px grosser Punkt -- vier gleiche graue Kaesten nebeneinander.
|
|
|
|
Die Farbe folgt dem STATUS, nicht dem Rang: Offen blaugrau (noch
|
|
nichts passiert), In Arbeit blau (laeuft), Review gold (jemand muss
|
|
hinsehen), Erledigt gruen (fertig). */
|
|
.spalte {
|
|
--sfarbe: #6f89a8;
|
|
position: relative; overflow: hidden;
|
|
background:
|
|
linear-gradient(180deg, color-mix(in srgb, var(--sfarbe) 8%, transparent), transparent 42%),
|
|
var(--flaeche);
|
|
border: 1px solid color-mix(in srgb, var(--sfarbe) 20%, var(--rand));
|
|
border-radius: var(--radius);
|
|
padding: 16px 13px 18px;
|
|
min-height: 120px;
|
|
}
|
|
/* Der Streifen oben laeuft nach rechts aus -- eine durchgezogene Kante
|
|
wirkt wie eine Trennwand, eine auslaufende wie eine Markierung. */
|
|
.spalte::before {
|
|
content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
|
|
background: linear-gradient(90deg, var(--sfarbe),
|
|
color-mix(in srgb, var(--sfarbe) 20%, transparent) 70%, transparent);
|
|
}
|
|
/* Was die Spalte bedeutet -- steht immer da, nicht nur wenn sie leer
|
|
ist. "Review" allein sagt einem Neuen nichts. */
|
|
.spalte__unter {
|
|
margin: 2px 0 12px 17px;
|
|
font-size: .76rem; color: var(--text-still);
|
|
}
|
|
|
|
.spalte__kopf {
|
|
display: flex; align-items: center; gap: 8px;
|
|
margin: 0 2px 12px;
|
|
font-size: .78rem; font-weight: 700;
|
|
letter-spacing: .08em; text-transform: uppercase;
|
|
color: var(--text-leise);
|
|
}
|
|
.spalte__punkt { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
|
|
.spalte__zahl {
|
|
margin-left: auto; padding: 1px 8px;
|
|
background: rgba(255, 255, 255, .06); border-radius: 999px;
|
|
font-size: .74rem; color: var(--text-still); letter-spacing: normal;
|
|
}
|
|
|
|
/* --ton mitgesetzt: Das Licht unter dem Zeiger nimmt seine Farbe von
|
|
dort. Ohne diese Zeile leuchtete die gruene Erledigt-Spalte orange
|
|
(der Farbton der SEITE), was aussah wie ein Fehler und einer war. */
|
|
.spalte[data-status="offen"] { --sfarbe: #6f89a8; --ton: #6f89a8; }
|
|
.spalte[data-status="arbeit"] { --sfarbe: #3fbdf5; --ton: #3fbdf5; }
|
|
.spalte[data-status="review"] { --sfarbe: #e0a33c; --ton: #e0a33c; }
|
|
.spalte[data-status="erledigt"] { --sfarbe: #4dab77; --ton: #4dab77; }
|
|
.spalte__punkt {
|
|
background: var(--sfarbe);
|
|
box-shadow: 0 0 9px color-mix(in srgb, var(--sfarbe) 70%, transparent);
|
|
}
|
|
.spalte .spalte__zahl { color: var(--sfarbe); }
|
|
|
|
.karte {
|
|
padding: 12px 13px;
|
|
margin-bottom: 9px;
|
|
background: rgba(9, 13, 22, .78);
|
|
border: 1px solid var(--rand);
|
|
border-left: 3px solid transparent;
|
|
border-radius: var(--radius-klein);
|
|
}
|
|
.karte[data-prio="hoch"] { border-left-color: #d8656e; }
|
|
.karte[data-prio="mittel"] { border-left-color: #4b6c8a; }
|
|
.karte[data-prio="niedrig"] { border-left-color: #3c4a5a; }
|
|
|
|
.karte__titel { font-weight: 600; font-size: .93rem; line-height: 1.35; }
|
|
.karte__text { margin: 6px 0 0; font-size: .84rem; color: var(--text-leise); }
|
|
|
|
.karte__zeile {
|
|
display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
|
|
margin-top: 10px; font-size: .76rem; color: var(--text-still);
|
|
}
|
|
.karte__frist--faellig { color: var(--warn); font-weight: 600; }
|
|
|
|
.karte__schritte { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
|
|
|
|
/* Der leere Zustand einer Spalte. Vorher stand hier in allen vier
|
|
Spalten ein Gedankenstrich -- vier graue Striche nebeneinander sehen
|
|
aus, als sei die Seite kaputt. Jetzt sagt jeder Satz, was das
|
|
Leersein BEDEUTET (siehe SPALTEN in aufgaben.js), auf einer eigenen
|
|
ruhigen Flaeche statt im Nichts. */
|
|
.spalte__leer {
|
|
margin: 4px 0 0; padding: 16px 12px;
|
|
text-align: center;
|
|
font-size: .82rem; color: var(--text-still); line-height: 1.5;
|
|
border: 1px solid color-mix(in srgb, var(--sfarbe) 14%, transparent);
|
|
border-radius: var(--radius-klein);
|
|
background: color-mix(in srgb, var(--sfarbe) 5%, transparent);
|
|
}
|
|
|
|
@media (max-width: 1080px) { .brett { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
|
|
@media (max-width: 620px) { .brett { grid-template-columns: 1fr; } }
|
|
|
|
/* ---------- Bearbeiten-Dialog ------------------------------------------ */
|
|
|
|
.dialog {
|
|
width: min(560px, calc(100vw - 32px));
|
|
padding: 0; border: 1px solid var(--rand-hell);
|
|
border-radius: var(--radius);
|
|
background: #0b1018;
|
|
color: var(--text);
|
|
box-shadow: var(--schatten);
|
|
}
|
|
.dialog::backdrop { background: rgba(2, 4, 8, .68); backdrop-filter: blur(3px); }
|
|
|
|
.neu--blank { margin: 0; border: 0; background: none; padding: 22px; }
|
|
|
|
.dialog__titel { margin: 0 0 18px; font-size: 1.12rem; font-weight: 700; }
|
|
|
|
.dialog__knoepfe { display: flex; gap: 10px; align-items: center; margin-top: 16px; flex-wrap: wrap; }
|
|
.dialog__knoepfe #b-loeschen { margin-left: auto; }
|
|
|
|
.abmelden--warnung { color: var(--warn); border-color: rgba(255, 154, 162, .35); }
|
|
.abmelden--warnung:hover { background: rgba(255, 154, 162, .1); border-color: rgba(255, 154, 162, .6); }
|
|
|
|
/* Der Bearbeiten-Stift war nie ein richtiger Knopf, sondern nackter
|
|
Text -- man sah nicht, dass man draufdruecken kann. Jetzt traegt er
|
|
das Knopf-System in der kleinsten, ruhigsten Groesse. */
|
|
.karte__stift { margin-left: auto; }
|
|
.karte__kopf { display: flex; align-items: flex-start; gap: 8px; }
|
|
.karte__kopf .karte__titel { flex: 1 1 auto; }
|
|
|
|
/* ===================================================================
|
|
Rückmeldungen an einer Aufgabe ("Aufgaben & Feedback", Konzept).
|
|
|
|
Direkt an der Karte, nicht in einem Fenster: Man liest sie im
|
|
Zusammenhang mit der Aufgabe -- sonst fehlt beim Antworten die
|
|
Hälfte.
|
|
=================================================================== */
|
|
|
|
.karte__rueck {
|
|
display: inline-flex; align-items: center; gap: 7px;
|
|
margin-top: 10px; padding: 6px 11px; cursor: pointer;
|
|
background: transparent;
|
|
border: 1px solid var(--rand); border-radius: 999px;
|
|
color: var(--text-still); font: inherit; font-size: .76rem;
|
|
transition: color .16s ease, border-color .16s ease, background .16s ease;
|
|
}
|
|
.karte__rueck:hover { color: var(--text); border-color: rgba(255, 255, 255, .24); }
|
|
/* Wo schon etwas besprochen wurde, sieht man es ohne Aufklappen. */
|
|
.karte__rueck[data-hat="ja"] {
|
|
color: var(--akzent);
|
|
border-color: rgba(63, 189, 245, .38);
|
|
background: rgba(63, 189, 245, .08);
|
|
}
|
|
.karte__rueck[data-offen="ja"] { border-color: rgba(63, 189, 245, .6); color: #fff; }
|
|
.karte__blase {
|
|
width: 14px; height: 14px; flex: none;
|
|
fill: none; stroke: currentColor; stroke-width: 1.7;
|
|
stroke-linecap: round; stroke-linejoin: round;
|
|
}
|
|
|
|
.rueck {
|
|
margin-top: 11px; padding-top: 11px;
|
|
border-top: 1px solid var(--rand);
|
|
}
|
|
.rueck__liste { display: grid; gap: 8px; margin-bottom: 11px; }
|
|
.rueck__eintrag {
|
|
padding: 9px 12px;
|
|
background: rgba(255, 255, 255, .035);
|
|
border: 1px solid var(--rand); border-radius: var(--radius-klein);
|
|
}
|
|
.rueck__kopf { display: flex; align-items: baseline; gap: 8px; margin: 0 0 3px; }
|
|
.rueck__wer { font-size: .79rem; font-weight: 650; color: var(--text); }
|
|
.rueck__wann { font-size: .72rem; color: var(--text-still); }
|
|
.rueck__weg {
|
|
margin-left: auto; padding: 0 5px; cursor: pointer; line-height: 1;
|
|
background: none; border: 0; color: var(--text-still); font-size: 1rem;
|
|
}
|
|
.rueck__weg:hover { color: #ffb4b9; }
|
|
.rueck__text {
|
|
margin: 0; font-size: .85rem; color: var(--text-leise);
|
|
white-space: pre-wrap; line-height: 1.5;
|
|
}
|
|
|
|
.rueck__form { display: grid; gap: 8px; justify-items: start; }
|
|
.rueck__feld {
|
|
width: 100%; padding: 9px 12px;
|
|
background: rgba(255, 255, 255, .045);
|
|
border: 1px solid var(--rand); border-radius: var(--radius-klein);
|
|
color: var(--text); font: inherit; font-size: .86rem; resize: vertical;
|
|
}
|
|
.rueck__feld:focus {
|
|
outline: none; border-color: rgba(63, 189, 245, .65);
|
|
box-shadow: 0 0 0 3px rgba(63, 189, 245, .15);
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) { .karte__rueck { transition: none; } }
|