DogFatherGitandClaude Opus 5
4219ac3f9d
Filipe, mit dem Fenster im Bild: "perfektionnier auch diese kachel die sieht so scheisse aus." Er hatte recht, und der Grund war nicht die Farbe, sondern die REIHENFOLGE. Vor dem Feld, in das man einfuegt, standen fuenf lange Schritte und zwei Absaetze -- rund 1400 px Text, bevor die eigentliche Arbeit anfing. Wer das Fenster zum zwanzigsten Mal oeffnet, scrollt jedes Mal an einer Anleitung vorbei, die er laengst kennt; wer es zum ersten Mal oeffnet, liest eine Wand, bevor er weiss, worum es geht. Das habe ich selbst gebaut, heute Vormittag, auf den Wunsch "ich brauch auch eine erklaerung immer dabei". Die Erklaerung war richtig -- ihr Platz war falsch. JETZT: ein Satz oben, sofort das Feld, dann Tag und Vorschau. Die ausfuehrliche Anleitung liegt unter einer aufklappbaren Zeile, die zugeklappt 37 px braucht statt 560. DIE UEBERSCHRIFTENZEILE BLEIBT OBEN, ausserhalb des Aufklappers. Sie ist die einzige Angabe, ohne die es gar nicht geht -- den haeufigsten Fehlgriff hinter einen Klick zu legen waere genau der falsche Tausch. Nebenbei: Der Erklaersatz zum Tag stand IN der Feldbeschriftung und machte sie zweizeilig -- eine Beschriftung, die man lesen muss, ist keine mehr. Er steht jetzt darunter. Das Datumsfeld erbt die Schrift des Hauses (ohne Angabe nimmt der Browser seine eigene, und das sah aus wie ein vergessener Rest) und ist auf die Breite gedeckelt, die ein Datum braucht. Und das Fenster rollt INNEN, damit "Uebernehmen" immer erreichbar bleibt. pruef-backstage-import 72 -> 77. Die neuen Zeilen messen die POSITION in Pixeln, nicht den Text: Die bestehenden Pruefungen lesen `textContent` des ganzen Dialogs und waeren auch dann gruen, wenn die Anleitung wieder nach vorn rutscht. Dazu: zugeklappt beim Oeffnen, Ueberschriftenzeile trotzdem sichtbar, die Zeile nimmt unter 90 px, und der Aufklapper klappt wirklich auf (ein Aufklapper, der klemmt, versteckt die Anleitung endgueltig). Mit SCHIRM=1 legt die Pruefung drei Bilder ab: leer, zugeklappt, aufgeklappt. Co-Authored-By: Claude Opus 5 <[email protected]>
425 lines
15 KiB
CSS
425 lines
15 KiB
CSS
/* ===================================================================
|
|
Zahlen. Baut auf gate.css, start.css und aufgaben.css auf.
|
|
|
|
DER GESTALTERISCHE GRUNDSATZ dieser Seite ist ein anderer als auf den
|
|
uebrigen: Hier steht nicht die Flaeche im Vordergrund, sondern die
|
|
ZAHL. Alles andere -- Rahmen, Beschriftung, Vergleich, Linie --
|
|
ordnet sich ihr unter und wird leiser, je weiter es von ihr weg ist.
|
|
|
|
Deshalb:
|
|
* Die Zahl in Tabellenziffern (font-variant-numeric), damit
|
|
untereinanderstehende Werte auf derselben Stelle sitzen. Ohne das
|
|
tanzen 1.240 und 987 gegeneinander, und man vergleicht schlechter.
|
|
* Der Vergleich in GEDECKTEM Gruen/Rot, nicht in Signalfarbe. Ein
|
|
Minus ist eine Auskunft, kein Alarm -- und die Seite soll
|
|
augenschonend bleiben (Dauerregel).
|
|
* Die Verlaufslinie ohne Achsen, Gitter und Beschriftung. Sie
|
|
beantwortet genau eine Frage ("geht es hoch oder runter?"), und
|
|
jede weitere Linie darin macht diese Antwort langsamer.
|
|
=================================================================== */
|
|
|
|
/* ---------- Kopf ------------------------------------------------------- */
|
|
|
|
.leistung__wahl { display: grid; gap: 6px; min-width: 220px; }
|
|
|
|
/* Wie vollstaendig die Woche erfasst ist. Steht neben der Ueberschrift
|
|
und nicht darunter: Wer die Zahlen liest, muss diesen Satz VORHER
|
|
gesehen haben -- eine Woche aus zwei Tagen ist etwas anderes als eine
|
|
aus sieben. */
|
|
.leistung__erfassung {
|
|
margin: 0; font-size: 13px; color: var(--text-still);
|
|
}
|
|
.leistung__erfassung[data-knapp="ja"] { color: #d9a441; }
|
|
|
|
.leistung__leer {
|
|
margin: 0; padding: 18px; text-align: center;
|
|
color: var(--text-leise); font-size: 14px; line-height: 1.6;
|
|
}
|
|
|
|
.leistung-woche, .leistung-ziele, .leistung-tage { margin: 0 0 30px; }
|
|
|
|
/* ---------- Die Wochenkarten -------------------------------------------- */
|
|
|
|
.zahlkarten {
|
|
display: grid; gap: 14px;
|
|
grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
|
|
}
|
|
|
|
.zahlkarte {
|
|
position: relative; overflow: hidden;
|
|
padding: 16px 16px 12px;
|
|
background: var(--flaeche);
|
|
border: 1px solid var(--rand);
|
|
border-radius: var(--radius-klein);
|
|
display: grid; gap: 4px;
|
|
/* Alle Karten gleich hoch, auch die ohne Verlaufslinie. Sonst
|
|
entsteht eine Treppe, und eine Treppe liest man als Bedeutung
|
|
("die kurze Karte ist weniger wichtig"), obwohl sie nur ein
|
|
Nebeneffekt ist. */
|
|
align-content: start; min-height: 132px;
|
|
}
|
|
|
|
/* DIE LEITZAHL. Die Verweildauer ist seit 2026 die Groesse, an der der
|
|
Algorithmus alles aufhaengt -- sie darf nicht eine von sieben
|
|
gleichaussehenden Karten sein. Ein feiner Rand und ein Hauch Farbe
|
|
reichen; ein Kasten in Signalfarbe waere Laerm. */
|
|
.zahlkarte[data-leit="ja"] {
|
|
border-color: color-mix(in srgb, var(--akzent) 34%, transparent);
|
|
background:
|
|
radial-gradient(120% 100% at 0% 0%,
|
|
color-mix(in srgb, var(--akzent) 9%, transparent), transparent 70%),
|
|
var(--flaeche);
|
|
}
|
|
|
|
.zahlkarte__name {
|
|
margin: 0; font-size: 12px; letter-spacing: .07em; text-transform: uppercase;
|
|
color: var(--text-still);
|
|
}
|
|
|
|
.zahlkarte__wert {
|
|
margin: 0; font-size: 30px; line-height: 1.1; font-weight: 650;
|
|
color: var(--text);
|
|
/* Tabellenziffern: gleiche Breite je Ziffer. Damit stehen die Werte
|
|
mehrerer Karten auf derselben senkrechten Linie. */
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.zahlkarte__wandel {
|
|
margin: 2px 0 0; font-size: 12.5px; line-height: 1.45;
|
|
}
|
|
/* Gedeckt, nicht grell. Gruen und Rot sind hier Auskunft, nicht Ampel --
|
|
und beide bleiben ueber 4,5:1 gegen die Kachelflaeche. */
|
|
.zahlkarte__wandel[data-richtung="hoch"] { color: #6fc38a; }
|
|
.zahlkarte__wandel[data-richtung="runter"] { color: #e08c93; }
|
|
.zahlkarte__wandel[data-richtung="gleich"] { color: var(--text-still); }
|
|
|
|
/* Die kleine Verlaufslinie. Sie sitzt unten in der Karte und laeuft
|
|
ueber die ganze Breite -- als Untergrund, nicht als eigenes Bild. */
|
|
.zahlkarte__linie {
|
|
width: 100%; height: 30px; margin-top: 8px; display: block;
|
|
overflow: visible;
|
|
}
|
|
.zahlkarte__linie polyline {
|
|
fill: none; stroke: var(--akzent); stroke-width: 1.6;
|
|
stroke-linejoin: round; stroke-linecap: round;
|
|
/* Nicht mitskalieren: preserveAspectRatio="none" streckt das Bild in
|
|
die Breite und wuerde die Linie sonst hauchduenn ziehen. */
|
|
vector-effect: non-scaling-stroke;
|
|
opacity: .8;
|
|
}
|
|
.zahlkarte__linie circle {
|
|
fill: var(--akzent); stroke: none;
|
|
/* Der letzte Punkt ist das Jetzt. Er wird durch die Streckung zum
|
|
Ei -- deshalb bleibt er klein genug, dass es nicht auffaellt. */
|
|
}
|
|
.zahlkarte[data-leit="ja"] .zahlkarte__linie polyline { opacity: 1; }
|
|
|
|
/* ---------- Ziele -------------------------------------------------------- */
|
|
|
|
.zielbalken { display: grid; gap: 16px; }
|
|
|
|
.zielbalken__zeile {
|
|
padding: 14px 16px;
|
|
background: var(--flaeche);
|
|
border: 1px solid var(--rand);
|
|
border-radius: var(--radius-klein);
|
|
}
|
|
.zielbalken__kopf {
|
|
display: flex; justify-content: space-between; align-items: baseline;
|
|
gap: 12px; margin-bottom: 10px; flex-wrap: wrap;
|
|
}
|
|
.zielbalken__name { font-size: 14px; color: var(--text); }
|
|
.zielbalken__zahl {
|
|
font-size: 14px; color: var(--text-leise); font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.zielbalken__spur {
|
|
height: 10px; border-radius: 999px; overflow: hidden;
|
|
background: rgba(150, 186, 220, 0.12);
|
|
}
|
|
.zielbalken__fuell {
|
|
height: 100%; border-radius: 999px;
|
|
background: linear-gradient(90deg, var(--akzent-tief), var(--akzent));
|
|
transition: width var(--tempo);
|
|
}
|
|
/* Ein erreichtes Ziel wechselt die Farbe, nicht die Groesse. Ein
|
|
springender Balken waere Bewegung ohne Aussage. */
|
|
.zielbalken__fuell[data-voll="ja"] {
|
|
background: linear-gradient(90deg, #2f8f5b, #55c184);
|
|
}
|
|
.zielbalken__anteil {
|
|
margin: 8px 0 0; font-size: 12.5px; color: var(--text-still);
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.zielbalken__fuell { transition: none; }
|
|
}
|
|
|
|
/* ---------- Die Tageszeilen ---------------------------------------------- */
|
|
|
|
.tagetabelle {
|
|
display: grid; gap: 8px;
|
|
}
|
|
|
|
.tagzeile {
|
|
display: grid; align-items: center; gap: 6px 16px;
|
|
grid-template-columns: 74px 1fr auto;
|
|
padding: 12px 16px;
|
|
background: var(--flaeche);
|
|
border: 1px solid var(--rand);
|
|
border-radius: var(--radius-klein);
|
|
}
|
|
/* EIN TAG OHNE EINTRAG BLEIBT SICHTBAR -- er ist selbst die Auskunft.
|
|
Er wird nur leiser, damit die erfassten Tage vorn stehen. */
|
|
.tagzeile[data-leer="ja"] {
|
|
background: transparent;
|
|
border-style: dashed;
|
|
border-color: rgba(150, 186, 220, 0.13);
|
|
}
|
|
/* Woher die Zeile kommt. Ein schmaler Streifen links, kein Etikett:
|
|
Man muss es wissen KOENNEN, nicht bei jedem Blick lesen. */
|
|
.tagzeile[data-quelle="import"] {
|
|
border-left: 3px solid color-mix(in srgb, var(--violett) 55%, transparent);
|
|
}
|
|
|
|
.tagzeile__datum { display: grid; gap: 1px; }
|
|
.tagzeile__wochentag {
|
|
font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
|
|
color: var(--text-still);
|
|
}
|
|
.tagzeile__zahl {
|
|
font-size: 15px; color: var(--text); font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.tagzeile__werte {
|
|
display: flex; flex-wrap: wrap; gap: 6px 22px; min-width: 0;
|
|
}
|
|
.tagzeile__wert { display: grid; gap: 1px; min-width: 0; }
|
|
.tagzeile__wertname {
|
|
font-size: 12px; letter-spacing: .05em; color: var(--text-still);
|
|
}
|
|
.tagzeile__wertzahl {
|
|
font-size: 15px; color: var(--text); font-variant-numeric: tabular-nums;
|
|
}
|
|
.tagzeile__leer { font-size: 13.5px; color: var(--text-still); }
|
|
|
|
/* Die Notiz laeuft ueber die ganze Zeilenbreite unter den Werten --
|
|
sie ist der Kontext, ohne den eine eingebrochene Zahl in die Irre
|
|
fuehrt ("krank", "Technik ausgefallen"). */
|
|
.tagzeile__notiz {
|
|
grid-column: 2 / -1;
|
|
margin: 2px 0 0; font-size: 13px; line-height: 1.5;
|
|
color: var(--text-leise);
|
|
}
|
|
|
|
.tagzeile__knopf {
|
|
grid-row: 1; grid-column: 3;
|
|
padding: 8px 14px; min-height: 38px;
|
|
font: inherit; font-size: 13px;
|
|
color: var(--text-leise); cursor: pointer;
|
|
background: transparent;
|
|
border: 1px solid var(--rand); border-radius: 999px;
|
|
transition: color var(--tempo), border-color var(--tempo);
|
|
}
|
|
.tagzeile__knopf:hover, .tagzeile__knopf:focus-visible {
|
|
color: var(--text); border-color: var(--rand-hell);
|
|
}
|
|
|
|
/* ---------- Der Import --------------------------------------------------- */
|
|
|
|
.dialog--breit { max-width: 720px; }
|
|
|
|
.import-vorschau {
|
|
margin: 4px 0 14px; padding: 16px;
|
|
background: rgba(150, 186, 220, 0.05);
|
|
border: 1px solid var(--rand);
|
|
border-radius: var(--radius-klein);
|
|
}
|
|
|
|
.import-zahlen { display: flex; flex-wrap: wrap; gap: 12px 28px; }
|
|
.import-zahl { display: grid; gap: 2px; }
|
|
.import-zahl__wert {
|
|
font-size: 26px; font-weight: 650; line-height: 1.1;
|
|
color: var(--text); font-variant-numeric: tabular-nums;
|
|
}
|
|
.import-zahl__name { font-size: 12px; color: var(--text-still); }
|
|
.import-zahl[data-warn="ja"] .import-zahl__wert { color: #d9a441; }
|
|
|
|
.import-spalten {
|
|
margin: 14px 0 0; font-size: 13px; line-height: 1.6;
|
|
color: var(--text-leise);
|
|
}
|
|
.import-probleme {
|
|
margin: 10px 0 0; padding-left: 20px;
|
|
font-size: 12.5px; line-height: 1.7; color: #d9a441;
|
|
}
|
|
|
|
/* ---------- Handy --------------------------------------------------------- */
|
|
|
|
@media (max-width: 640px) {
|
|
/* Die Wochenkarten werden EINSPALTIG, nicht enger. Zwei Karten
|
|
nebeneinander auf 360 px lassen fuer die Zahl 150 px uebrig -- ein
|
|
vierstelliger Wert bricht dann um, und eine umgebrochene Zahl ist
|
|
keine Zahl mehr. */
|
|
.zahlkarten { grid-template-columns: 1fr; }
|
|
.zahlkarte { min-height: 0; }
|
|
.zahlkarte__wert { font-size: 27px; }
|
|
|
|
.leistung__wahl { min-width: 0; width: 100%; }
|
|
|
|
/* Die Tageszeile wird zweizeilig: Datum und Knopf oben, die Werte
|
|
darunter. Drei Spalten nebeneinander quetschen den Knopf sonst auf
|
|
unter 44 px -- und darunter trifft man ihn mit dem Daumen nicht
|
|
mehr zuverlaessig. */
|
|
.tagzeile {
|
|
grid-template-columns: 1fr auto;
|
|
gap: 10px 12px;
|
|
}
|
|
.tagzeile__datum { grid-row: 1; grid-column: 1; }
|
|
.tagzeile__knopf { grid-row: 1; grid-column: 2; }
|
|
.tagzeile__werte { grid-row: 2; grid-column: 1 / -1; gap: 8px 18px; }
|
|
.tagzeile__notiz { grid-row: 3; grid-column: 1 / -1; }
|
|
|
|
.import-zahl__wert { font-size: 23px; }
|
|
}
|
|
|
|
/* =====================================================================
|
|
DIE BACKSTAGE-TABELLE (11.09.2026)
|
|
|
|
Ein Textfeld, in das eine ganze Tabelle passt -- und eine Vorschau,
|
|
die nicht nur zählt, sondern NAMEN nennt. Wer eine Zeile übersieht,
|
|
hat stillschweigend jemanden ausgelassen; das ist die Sorte Fehler,
|
|
die erst Wochen später auffällt.
|
|
===================================================================== */
|
|
.netz__feld {
|
|
width: 100%;
|
|
min-height: 120px;
|
|
font-family: ui-monospace, "Cascadia Code", "Consolas", monospace;
|
|
font-size: .82rem; line-height: 1.5;
|
|
/* Umbrechen AUS: Eine Tabellenzeile soll eine Zeile bleiben, sonst
|
|
sieht man nicht, ob die Spalten sauber getrennt wurden. */
|
|
white-space: pre; overflow-x: auto;
|
|
}
|
|
.import-vorschau__zeile {
|
|
margin: 0 0 4px;
|
|
font-size: .84rem; line-height: 1.5;
|
|
color: var(--text-leise);
|
|
}
|
|
.import-vorschau__zeile[data-art="gut"] {
|
|
color: color-mix(in srgb, var(--k-gut, #5fc99a) 45%, #ffffff);
|
|
font-weight: 600;
|
|
}
|
|
.import-vorschau__zeile[data-art="warn"] {
|
|
color: color-mix(in srgb, var(--k-warn, #e0736b) 42%, #ffffff);
|
|
font-weight: 600;
|
|
}
|
|
.import-vorschau__zeile[data-art="still"] {
|
|
color: var(--text-still); font-size: .8rem;
|
|
}
|
|
|
|
/* =====================================================================
|
|
DIE ANLEITUNGEN (11.09.2026)
|
|
|
|
Filipe: "ich brauch auch eine erklärung immer dabei wo die scouts und
|
|
manager das finden. also eine perfekte beschreibung bitte."
|
|
|
|
Zwei Ebenen, weil zwei Fragen dahinterstecken:
|
|
|
|
1. WAS IST DAS? -- zwei Sätze, immer sichtbar unter den Knöpfen.
|
|
Wer davorsitzt und beide Knöpfe zum ersten Mal sieht, weiß sonst
|
|
nicht, welcher für ihn gemeint ist.
|
|
2. WIE GEHT DAS? -- die Schritte, im Fenster, wo man sie braucht.
|
|
Dort stören sie niemanden, der es längst weiß.
|
|
|
|
Eine Anleitung, die immer und vollständig auf der Seite steht, liest
|
|
nach dem dritten Mal niemand mehr -- und dann steht sie nur im Weg.
|
|
===================================================================== */
|
|
.quellen-hinweis {
|
|
display: flex; flex-wrap: wrap; gap: 6px 22px;
|
|
margin: 10px 0 0;
|
|
font-size: .8rem; line-height: 1.5;
|
|
color: var(--text-still);
|
|
}
|
|
.quellen-hinweis > span { flex: 1 1 320px; min-width: 0; }
|
|
.quellen-hinweis strong { color: var(--text-leise); }
|
|
|
|
/* Die Schritte im Fenster. Nummern in der Hausfarbe, damit man sie als
|
|
Reihenfolge liest und nicht als Aufzählung -- bei einer Anleitung ist
|
|
die Reihenfolge die halbe Auskunft. */
|
|
.anleitung {
|
|
margin: 10px 0 12px; padding: 0 0 0 1.5em;
|
|
font-size: .83rem; line-height: 1.55;
|
|
color: var(--text-still);
|
|
}
|
|
.anleitung li { margin: 0 0 6px; }
|
|
.anleitung li::marker { color: var(--akzent); font-weight: 700; }
|
|
.anleitung strong { color: var(--text-leise); }
|
|
|
|
.dialog__unter--still { font-size: .8rem; color: var(--text-still); }
|
|
|
|
/* ---- EINGEKLAPPTE HILFE (11.09.2026) ------------------------------
|
|
Filipe zum Backstage-Fenster: "die sieht so scheisse aus."
|
|
|
|
Der Grund war nicht die Farbe, sondern die Reihenfolge: Fuenf lange
|
|
Schritte standen VOR dem Feld, in das man einfuegt. Wer das Fenster
|
|
oft benutzt, scrollte jedes Mal an einer Anleitung vorbei, die er
|
|
laengst kennt.
|
|
|
|
Jetzt liegt sie unter einer Zeile, die man aufklappen KANN. Kein
|
|
Kasten, kein Rahmen -- nur ein Pfeil und eine stille Zeile, damit
|
|
sie im geschlossenen Zustand fast nichts vom Fenster wegnimmt. */
|
|
.hilfe {
|
|
margin: 14px 0 4px;
|
|
border-top: 1px solid var(--rand);
|
|
padding-top: 10px;
|
|
}
|
|
.hilfe > summary {
|
|
display: flex; align-items: center; gap: 7px;
|
|
list-style: none; cursor: pointer;
|
|
font-size: .82rem; color: var(--text-still);
|
|
padding: 3px 0;
|
|
transition: color var(--tempo);
|
|
}
|
|
.hilfe > summary::-webkit-details-marker { display: none; }
|
|
/* Der Pfeil wird gedreht statt ausgetauscht -- ein Zeichen, zwei
|
|
Zustaende, und die Drehung sagt von selbst, was passiert. */
|
|
.hilfe > summary::before {
|
|
content: ""; flex: none;
|
|
width: 7px; height: 7px;
|
|
border-right: 1.6px solid currentColor;
|
|
border-bottom: 1.6px solid currentColor;
|
|
transform: rotate(-45deg);
|
|
transition: transform var(--tempo);
|
|
}
|
|
.hilfe[open] > summary::before { transform: rotate(45deg); }
|
|
.hilfe > summary:hover { color: var(--text-leise); }
|
|
.hilfe > summary:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; }
|
|
.hilfe__satz {
|
|
margin: 0 0 8px; font-size: .8rem; line-height: 1.55;
|
|
color: var(--text-still);
|
|
}
|
|
.hilfe__satz strong { color: var(--text-leise); }
|
|
|
|
/* Der Tag steht neben seinem Hinweis, nicht in der Beschriftung. Vorher
|
|
hing der ganze Erklaersatz in der Ueberschrift des Feldes und machte
|
|
sie zweizeilig -- eine Beschriftung, die man lesen muss, ist keine
|
|
mehr. */
|
|
/* `font: inherit` ist hier kein Schoenheitsfehler-Fix, sondern
|
|
Notwendigkeit: Ohne Angabe rendert der Browser ein Datumsfeld in
|
|
SEINER Schrift -- neben dem uebrigen Fenster sieht das aus wie ein
|
|
Rest, den jemand vergessen hat. Die Breite deckelt es auf die
|
|
Laenge, die ein Datum wirklich braucht; volle Breite laesst ein
|
|
fast leeres Feld quer durch den Dialog laufen. */
|
|
.neu__zeile--tag input[type="date"] {
|
|
max-width: 190px;
|
|
font: inherit; font-size: .88rem;
|
|
}
|
|
.feld-hinweis {
|
|
margin: 5px 0 0; font-size: .76rem; color: var(--text-still);
|
|
}
|
|
|
|
/* Ein Fenster, das laenger ist als der Bildschirm, versteckt seine
|
|
eigenen Knoepfe. Gerollt wird INNEN, damit "Uebernehmen" immer
|
|
erreichbar bleibt. */
|
|
.dialog--breit .neu { max-height: min(86vh, 900px); overflow-y: auto; }
|