DogFatherGitandClaude Opus 5
fc4fde0f02
DIE BUEHNEN WAREN ZU DUNKEL. Bei 0.42 Helligkeit sah man Schemen, nicht die Szene -- "zu dunkel und sieht ganz komisch aus" traf es genau. Jetzt 0.66 mit etwas mehr Farbe (1.08), die Vignette schwaecher (0.52 statt 0.72). Die Bilder kommen durch. MOEGLICH IST DAS NUR MIT DEM GEGENZUG: Alle Kacheln, Karten und Spalten lagen bei 2 bis 3 Prozent WEISS -- also praktisch durchsichtig. Solange der Hintergrund fast schwarz war, fiel das nicht auf; sobald er hell wurde, lief das Bild mitten durch den Text. Jetzt gibt es --flaeche (rgba(9,13,22,.78)), eine deckende dunkle Flaeche, und 44 Stellen in 16 Dateien holen sich ihre Farbe von dort. Der Unterschied ist genau der, den Filipe beschrieben hat: Der Hintergrund bleibt sichtbar, aber ZWISCHEN den Kacheln -- nicht hinter der Schrift. Wer die Flaechen kuenftig dichter oder durchlaessiger will, aendert eine einzige Zeile statt 44. Die Kacheln selbst tragen ihren Farbton jetzt AUF der Flaeche (color-mix mit --flaeche statt mit transparent) -- dadurch bleibt die Farbe erkennbar, ohne dass die Kachel durchsichtig wird. DIE KOPFLEISTE war so breit wie das ganze Fenster, obwohl der Text kurz ist: .marke__text stand auf flex: 1 1 auto. Das war unsichtbar, solange der Schriftzug nur Text war -- seit er einen Rahmen traegt, lief die Pille quer durchs Bild. Jetzt flex: 0 1 auto (schrumpfen ja, wachsen nein). Gemessen: 375 px statt 1280. Kontrast an echten Bildpunkten auf allen sechs Seiten nachgemessen -- haelt trotz des viel helleren Bildes (schlechtester Wert 4,69:1). Co-Authored-By: Claude Opus 5 <[email protected]>
267 lines
10 KiB
CSS
267 lines
10 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;
|
|
}
|
|
|
|
.spalte[data-status="offen"] { --sfarbe: #6f89a8; }
|
|
.spalte[data-status="arbeit"] { --sfarbe: #3fbdf5; }
|
|
.spalte[data-status="review"] { --sfarbe: #e0a33c; }
|
|
.spalte[data-status="erledigt"] { --sfarbe: #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; } }
|