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]>
559 lines
21 KiB
CSS
559 lines
21 KiB
CSS
/* ===================================================================
|
|
Kalender
|
|
|
|
Gebaut nach demselben Grundsatz wie die Kacheln auf der Startseite:
|
|
Die Farbe gehört zur SACHE, nicht zum Rang. Ein Call ist überall
|
|
blau, ein Review überall grün, eine Frist überall orange -- in der
|
|
Pille im Raster, in der Zeile in der Liste, im Filterknopf und im
|
|
Balken des Zeitstrahls. Wer die Farbe einmal gelernt hat, muss die
|
|
Beschriftung nicht mehr lesen.
|
|
|
|
Augenschonend: gedeckte Töne, keine Signalfarben, kein Blinken. Der
|
|
einzige laute Punkt ist "heute" -- und der darf laut sein, weil man
|
|
ihn sucht.
|
|
=================================================================== */
|
|
|
|
/* ---------- Kopf: der Zeitraum als Überschrift --------------------------
|
|
Man liest zuerst, WO man ist, und bewegt sich dann. Deshalb steht der
|
|
Monat groß und die Navigation daneben, nicht umgekehrt. */
|
|
.k-kopf {
|
|
position: relative; overflow: hidden;
|
|
display: flex; align-items: flex-end; justify-content: space-between;
|
|
flex-wrap: wrap; gap: 16px;
|
|
margin-bottom: 22px; padding-bottom: 18px;
|
|
/* Dieselbe auslaufende Trennlinie wie auf allen anderen Seiten -- der
|
|
Kalender hat zwar einen eigenen Kopf, gehört aber zur selben
|
|
Familie. Die Farbe kommt aus data-ton am body (kopf.js). */
|
|
border-bottom: 1px solid transparent;
|
|
border-image: linear-gradient(90deg,
|
|
color-mix(in srgb, var(--ton, var(--akzent)) 40%, var(--rand-hell)),
|
|
transparent 62%) 1;
|
|
}
|
|
/* Zeichen und Zeitraum nebeneinander (die Plakette setzt kopf.js). */
|
|
.k-kopf .kopf-zeile__marke { align-items: center; }
|
|
.k-kopf .k-kopf__titel { min-width: 0; }
|
|
.k-zeitraum {
|
|
margin: 0;
|
|
font-size: clamp(1.7rem, 3.2vw, 2.4rem);
|
|
letter-spacing: -.025em;
|
|
color: #f2f7fd;
|
|
text-shadow: 0 2px 26px rgba(63, 189, 245, .16);
|
|
/* Der Monatsname wechselt beim Blättern die Länge. Ohne feste
|
|
Zeichenbreite für die Jahreszahl springt die Zeile dabei. */
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.k-kopf__unter {
|
|
margin: 5px 0 0;
|
|
font-size: .82rem; letter-spacing: .1em; text-transform: uppercase;
|
|
color: var(--text-still);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.k-nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
|
|
.k-pfeil {
|
|
min-width: 38px; padding-left: 0; padding-right: 0;
|
|
font-size: 1.15rem; line-height: 1;
|
|
justify-content: center;
|
|
}
|
|
|
|
/* ---------- Die beiden Anlassreihen ------------------------------------
|
|
Oben "Als Nächstes" (blickt ab heute nach vorn, ändert sich beim
|
|
Blättern NICHT), darunter die Anlässe des angezeigten Zeitraums. Sie
|
|
sehen absichtlich gleich aus -- es sind dieselben Dinge, nur zu einer
|
|
anderen Frage. Die Überschriften sagen, welche. */
|
|
.k-leiste { margin-bottom: 20px; }
|
|
.k-leiste .feldschild { display: flex; align-items: center; gap: 9px; }
|
|
.k-leiste .feldschild::before {
|
|
content: "";
|
|
width: 18px; height: 2px; border-radius: 2px;
|
|
background: linear-gradient(90deg, var(--akzent), transparent);
|
|
opacity: .8;
|
|
}
|
|
.k-anlassreihe {
|
|
display: grid; gap: 9px;
|
|
grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.k-anlasskarte {
|
|
--afarbe: var(--akzent);
|
|
position: relative; overflow: hidden;
|
|
display: flex; align-items: center; gap: 12px;
|
|
padding: 11px 14px 11px 16px;
|
|
border: 1px solid color-mix(in srgb, var(--afarbe) 26%, var(--rand));
|
|
border-radius: var(--radius-klein);
|
|
background:
|
|
linear-gradient(90deg, color-mix(in srgb, var(--afarbe) 11%, transparent), transparent 58%),
|
|
var(--flaeche);
|
|
cursor: pointer;
|
|
transition: border-color .18s ease, background .18s ease, transform .18s ease;
|
|
}
|
|
.k-anlasskarte::before {
|
|
content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
|
|
background: linear-gradient(180deg, var(--afarbe),
|
|
color-mix(in srgb, var(--afarbe) 35%, transparent));
|
|
}
|
|
.k-anlasskarte:hover, .k-anlasskarte:focus-visible {
|
|
border-color: color-mix(in srgb, var(--afarbe) 46%, var(--rand));
|
|
transform: translateY(-1px);
|
|
}
|
|
/* Vorbei heißt: steht noch da, aber leiser. Ganz wegzulassen wäre
|
|
falsch -- man will sehen, dass der Tag gewesen ist. */
|
|
.k-anlasskarte.vorbei { opacity: .5; }
|
|
.k-anlasskarte__sym { font-size: 1.3rem; line-height: 1; flex: none; }
|
|
.k-anlasskarte__txt { display: grid; gap: 2px; min-width: 0; flex: 1 1 auto; }
|
|
/* Der Name darf umbrechen statt abzubrechen. Vorher stand hier
|
|
"Tag der Deutsc…" -- abgeschnittener Text sieht auf den ersten Blick
|
|
nach Absicht aus und ist deshalb der teuerste stille Fehler in einer
|
|
Karte. Zwei Zeilen kosten nichts, ein verlorener Name schon. */
|
|
.k-anlasskarte__name {
|
|
font-weight: 650; color: var(--text);
|
|
line-height: 1.25;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
.k-anlasskarte__wann { font-size: .78rem; color: var(--text-leise); }
|
|
.k-anlasskarte__rest {
|
|
flex: none; text-align: right;
|
|
font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
|
|
color: var(--afarbe);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.k-anlasskarte__rest small {
|
|
display: block; margin-top: 2px;
|
|
font-size: .64rem; letter-spacing: .06em;
|
|
color: var(--text-still); text-transform: none;
|
|
}
|
|
.k-anlassleer {
|
|
grid-column: 1 / -1;
|
|
margin: 0; padding: 13px 16px;
|
|
font-size: .88rem; color: var(--text-still);
|
|
border: 1px dashed var(--rand); border-radius: var(--radius-klein);
|
|
}
|
|
|
|
/* ---------- Werkzeugleiste: Ansicht und Filter -------------------------- */
|
|
.k-werkzeuge {
|
|
display: flex; align-items: center; justify-content: space-between;
|
|
flex-wrap: wrap; gap: 12px;
|
|
margin: 4px 0 16px;
|
|
}
|
|
.k-ansichten { display: flex; gap: 6px; flex-wrap: wrap; }
|
|
.k-ansicht {
|
|
padding: 8px 15px;
|
|
border: 1px solid var(--rand); border-radius: 999px;
|
|
background: var(--flaeche);
|
|
color: var(--text-leise);
|
|
font: inherit; font-size: .86rem;
|
|
cursor: pointer;
|
|
transition: border-color .18s ease, background .18s ease, color .18s ease;
|
|
}
|
|
.k-ansicht:hover { color: var(--text); border-color: var(--rand-hell); }
|
|
.k-ansicht[aria-pressed="true"] {
|
|
color: #eaf4fd;
|
|
border-color: color-mix(in srgb, var(--akzent) 46%, transparent);
|
|
background: color-mix(in srgb, var(--akzent) 15%, transparent);
|
|
}
|
|
|
|
.k-filter { display: flex; gap: 6px; flex-wrap: wrap; }
|
|
.k-chip {
|
|
--cfarbe: var(--akzent);
|
|
display: inline-flex; align-items: center; gap: 8px;
|
|
padding: 8px 14px;
|
|
border: 1px solid var(--rand); border-radius: 999px;
|
|
background: var(--flaeche);
|
|
color: var(--text-still);
|
|
font: inherit; font-size: .84rem;
|
|
cursor: pointer;
|
|
font-variant-numeric: tabular-nums;
|
|
transition: border-color .18s ease, background .18s ease, color .18s ease, opacity .18s ease;
|
|
}
|
|
.k-chip__punkt {
|
|
width: 8px; height: 8px; border-radius: 50%;
|
|
background: var(--cfarbe);
|
|
transition: opacity .18s ease, box-shadow .18s ease;
|
|
}
|
|
.k-chip[aria-pressed="true"] {
|
|
color: var(--text);
|
|
border-color: color-mix(in srgb, var(--cfarbe) 40%, transparent);
|
|
background: color-mix(in srgb, var(--cfarbe) 11%, transparent);
|
|
}
|
|
.k-chip[aria-pressed="true"] .k-chip__punkt {
|
|
box-shadow: 0 0 8px color-mix(in srgb, var(--cfarbe) 70%, transparent);
|
|
}
|
|
/* Ausgeschaltet: der Punkt wird hohl. Nur die Deckkraft zu senken wäre
|
|
im Kontrastmodus nicht zu unterscheiden. */
|
|
.k-chip[aria-pressed="false"] .k-chip__punkt {
|
|
background: transparent;
|
|
box-shadow: inset 0 0 0 1.5px var(--cfarbe);
|
|
opacity: .55;
|
|
}
|
|
|
|
/* ---------- Monatsraster ------------------------------------------------
|
|
Eine Spalte für die Kalenderwoche, dann die sieben Tage. Die
|
|
KW-Spalte ist kein Schmuck: In Absprachen ("machen wir in KW 42")
|
|
ist sie die übliche Währung. */
|
|
.k-raster {
|
|
display: grid;
|
|
grid-template-columns: 46px repeat(7, minmax(0, 1fr));
|
|
gap: 1px;
|
|
background: var(--rand);
|
|
border: 1px solid var(--rand);
|
|
border-radius: var(--radius-klein);
|
|
overflow: hidden;
|
|
}
|
|
.k-spaltenkopf {
|
|
padding: 11px 10px;
|
|
background: rgba(12, 17, 28, .82);
|
|
font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
|
|
color: var(--text-leise);
|
|
}
|
|
.k-spaltenkopf--kw { color: var(--text-still); }
|
|
|
|
.k-kw {
|
|
display: flex; align-items: flex-start; justify-content: center;
|
|
padding: 10px 4px;
|
|
background: rgba(9, 13, 22, .78);
|
|
font-size: .78rem; font-weight: 600;
|
|
color: var(--text-still);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
/* Die laufende Woche wird in der KW-Spalte markiert -- dadurch findet
|
|
man sich beim Blättern sofort zurecht. */
|
|
.k-kw[data-jetzt="ja"] {
|
|
color: var(--akzent);
|
|
background: color-mix(in srgb, var(--akzent) 12%, rgba(9, 13, 22, .78));
|
|
}
|
|
|
|
.k-tag {
|
|
min-height: 108px;
|
|
padding: 8px 9px 10px;
|
|
background: rgba(11, 15, 25, .74);
|
|
display: flex; flex-direction: column; gap: 4px;
|
|
cursor: pointer;
|
|
transition: background .16s ease;
|
|
}
|
|
.k-tag:hover { background: rgba(20, 27, 42, .85); }
|
|
.k-tag:focus-visible { outline: 2px solid var(--akzent); outline-offset: -2px; }
|
|
/* Tage des Nachbarmonats: da, aber deutlich zurückgenommen. Sie ganz
|
|
wegzulassen würde das Raster zerreißen. */
|
|
.k-tag[data-fremd="ja"] { background: rgba(7, 10, 17, .72); }
|
|
.k-tag[data-fremd="ja"] .k-tag__zahl { color: var(--text-still); opacity: .6; }
|
|
.k-tag[data-wochenende="ja"] { background: rgba(9, 12, 20, .8); }
|
|
/* Gesetzlicher Feiertag: ein Hauch Rosé. Kein Signal, nur eine andere
|
|
Fläche -- man sieht ihn, ohne dass er ruft. */
|
|
.k-tag[data-feiertag="ja"] { background: color-mix(in srgb, #ff9aa2 9%, rgba(11, 15, 25, .74)); }
|
|
.k-tag[data-feiertag="ja"]:hover { background: color-mix(in srgb, #ff9aa2 14%, rgba(11, 15, 25, .74)); }
|
|
.k-tag[data-heute="ja"] {
|
|
background: color-mix(in srgb, var(--akzent) 13%, rgba(11, 15, 25, .74));
|
|
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--akzent) 50%, transparent);
|
|
}
|
|
|
|
.k-tag__kopf { display: flex; align-items: baseline; gap: 6px; }
|
|
.k-tag__zahl {
|
|
font-size: .95rem; font-weight: 650; color: var(--text);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
/* Am Monatsersten steht der Monatsname dabei -- sonst weiß man in der
|
|
letzten Rasterzeile nicht, ob die 1 schon zum nächsten Monat gehört.
|
|
|
|
Bewusst --text-leise statt --text-still: Wenn der Monatserste
|
|
zufällig HEUTE ist, liegt der Text auf der aufgehellten Heute-Zelle,
|
|
und dort kam der leiseste Grauton nur noch auf 3,96:1. Gemessen an
|
|
echten Bildpunkten, nicht an der Farbangabe -- die weiß nichts davon,
|
|
was hinter ihr liegt. Jetzt 5,9:1. */
|
|
.k-tag__monat { font-size: .7rem; color: var(--text-leise); }
|
|
.k-tag__heute {
|
|
margin-left: auto;
|
|
font-size: .62rem; letter-spacing: .1em; text-transform: uppercase;
|
|
color: var(--akzent);
|
|
}
|
|
|
|
/* ---------- Anlassmarke im Raster --------------------------------------- */
|
|
.k-anlass {
|
|
--afarbe: var(--akzent);
|
|
display: block;
|
|
padding: 2px 6px;
|
|
border-radius: 5px;
|
|
border-left: 2px solid var(--afarbe);
|
|
background: color-mix(in srgb, var(--afarbe) 13%, transparent);
|
|
color: color-mix(in srgb, var(--afarbe) 70%, #ffffff);
|
|
font-size: .68rem; line-height: 1.35;
|
|
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
|
}
|
|
/* Feiertage sind lauter als Anlässe: Sie sind eine Tatsache, kein
|
|
Vorschlag. */
|
|
.k-anlass.feiertag {
|
|
background: color-mix(in srgb, var(--afarbe) 20%, transparent);
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* ---------- Pille: ein Eintrag im Raster -------------------------------- */
|
|
.k-pille {
|
|
--pfarbe: var(--akzent);
|
|
display: block;
|
|
padding: 3px 7px;
|
|
border-radius: 5px;
|
|
border-left: 2px solid var(--pfarbe);
|
|
background: color-mix(in srgb, var(--pfarbe) 16%, transparent);
|
|
color: var(--text);
|
|
font-size: .72rem; line-height: 1.4;
|
|
text-decoration: none;
|
|
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
|
transition: background .16s ease;
|
|
}
|
|
.k-pille:hover { background: color-mix(in srgb, var(--pfarbe) 26%, transparent); }
|
|
.k-pille__zeit {
|
|
color: var(--pfarbe); font-weight: 650; margin-right: 5px;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
/* Erledigt: durchgestrichen UND blasser. Nur blasser wäre im
|
|
Kontrastmodus nicht zu erkennen. */
|
|
.k-pille.erledigt { opacity: .5; text-decoration: line-through; }
|
|
|
|
/* ---------- Wochenansicht ----------------------------------------------- */
|
|
.k-woche {
|
|
display: grid; gap: 1px;
|
|
grid-template-columns: repeat(7, minmax(0, 1fr));
|
|
background: var(--rand);
|
|
border: 1px solid var(--rand);
|
|
border-radius: var(--radius-klein);
|
|
overflow: hidden;
|
|
}
|
|
.k-wochentag {
|
|
min-height: 190px;
|
|
padding: 10px;
|
|
background: rgba(11, 15, 25, .74);
|
|
display: flex; flex-direction: column; gap: 5px;
|
|
cursor: pointer;
|
|
transition: background .16s ease;
|
|
}
|
|
.k-wochentag:hover { background: rgba(20, 27, 42, .85); }
|
|
.k-wochentag:focus-visible { outline: 2px solid var(--akzent); outline-offset: -2px; }
|
|
.k-wochentag[data-feiertag="ja"] { background: color-mix(in srgb, #ff9aa2 9%, rgba(11, 15, 25, .74)); }
|
|
.k-wochentag[data-heute="ja"] {
|
|
background: color-mix(in srgb, var(--akzent) 13%, rgba(11, 15, 25, .74));
|
|
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--akzent) 50%, transparent);
|
|
}
|
|
.k-wochentag__kopf {
|
|
display: flex; align-items: baseline; gap: 7px;
|
|
padding-bottom: 7px; margin-bottom: 3px;
|
|
border-bottom: 1px solid var(--rand);
|
|
}
|
|
.k-wochentag__name {
|
|
font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
|
|
color: var(--text-still);
|
|
}
|
|
.k-wochentag__zahl {
|
|
font-size: 1.25rem; font-weight: 700; color: var(--text);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.k-wochentag__leer { margin: auto 0; color: var(--text-still); font-size: .8rem; }
|
|
|
|
/* ---------- Listenansicht ----------------------------------------------- */
|
|
.k-liste { display: grid; gap: 12px; }
|
|
.k-listentag {
|
|
padding: 14px 16px;
|
|
border: 1px solid var(--rand); border-radius: var(--radius-klein);
|
|
background: var(--flaeche);
|
|
display: grid; gap: 7px;
|
|
}
|
|
.k-listentag[data-vergangen="ja"] { opacity: .62; }
|
|
.k-listentag[data-heute="ja"] {
|
|
border-color: color-mix(in srgb, var(--akzent) 40%, transparent);
|
|
background: color-mix(in srgb, var(--akzent) 7%, var(--flaeche));
|
|
}
|
|
.k-listentag__kopf { display: flex; align-items: baseline; gap: 11px; flex-wrap: wrap; }
|
|
.k-listentag__datum { font-weight: 650; color: var(--text); }
|
|
.k-listentag__kw {
|
|
font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
|
|
color: var(--text-still); font-variant-numeric: tabular-nums;
|
|
}
|
|
.k-listentag__marke {
|
|
margin-left: auto; padding: 2px 9px;
|
|
border-radius: 999px;
|
|
border: 1px solid color-mix(in srgb, var(--akzent) 34%, transparent);
|
|
background: color-mix(in srgb, var(--akzent) 13%, transparent);
|
|
color: var(--akzent);
|
|
font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
|
|
}
|
|
|
|
/* ---------- Eine ausführliche Zeile ------------------------------------- */
|
|
.k-zeile {
|
|
--zfarbe: var(--akzent);
|
|
position: relative;
|
|
display: grid;
|
|
grid-template-columns: auto 1fr auto;
|
|
align-items: center; gap: 12px;
|
|
padding: 9px 12px 9px 14px;
|
|
border-radius: 8px;
|
|
border: 1px solid var(--rand);
|
|
background:
|
|
linear-gradient(90deg, color-mix(in srgb, var(--zfarbe) 8%, transparent), transparent 50%),
|
|
var(--flaeche);
|
|
}
|
|
.k-zeile::before {
|
|
content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px;
|
|
border-radius: 0 3px 3px 0;
|
|
background: var(--zfarbe);
|
|
}
|
|
.k-zeile[data-erledigt="ja"] { opacity: .55; }
|
|
.k-zeile[data-erledigt="ja"] .k-zeile__titel { text-decoration: line-through; }
|
|
.k-zeile__zeit {
|
|
font-size: .82rem; font-weight: 650; color: var(--zfarbe);
|
|
font-variant-numeric: tabular-nums;
|
|
min-width: 5.5ch;
|
|
}
|
|
.k-zeile__titel { color: var(--text); min-width: 0; }
|
|
.k-zeile__knoepfe { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
|
|
.k-zeile__art {
|
|
padding: 2px 9px;
|
|
border-radius: 999px;
|
|
border: 1px solid color-mix(in srgb, var(--zfarbe) 32%, transparent);
|
|
color: var(--zfarbe);
|
|
font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
|
|
}
|
|
.k-zeile__zusatz {
|
|
grid-column: 1 / -1;
|
|
display: flex; flex-wrap: wrap; gap: 4px 10px;
|
|
font-size: .78rem; color: var(--text-leise);
|
|
}
|
|
.k-zeile__zusatz a { color: var(--akzent); }
|
|
|
|
/* ---------- Zeitstrahl ---------------------------------------------------
|
|
Sechs Wochen auf einer Achse. Die Höhe eines Strichs ist die Menge
|
|
des Tages -- man sieht Ballungen und Lücken, ohne zu zählen. */
|
|
.k-strahl-rahmen {
|
|
padding: 20px 18px 14px;
|
|
border: 1px solid var(--rand); border-radius: var(--radius-klein);
|
|
background: var(--flaeche);
|
|
}
|
|
.k-strahl {
|
|
display: grid;
|
|
grid-auto-flow: column;
|
|
grid-auto-columns: minmax(0, 1fr);
|
|
align-items: end;
|
|
gap: 2px;
|
|
height: 150px;
|
|
}
|
|
.k-strahl__tag {
|
|
--menge: 0;
|
|
position: relative;
|
|
height: 100%;
|
|
display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
|
|
gap: 3px;
|
|
padding-bottom: 16px;
|
|
border-radius: 4px 4px 0 0;
|
|
cursor: pointer;
|
|
transition: background .16s ease;
|
|
}
|
|
.k-strahl__tag:hover { background: rgba(255, 255, 255, .05); }
|
|
.k-strahl__tag:focus-visible { outline: 2px solid var(--akzent); outline-offset: 1px; }
|
|
.k-strahl__tag[data-wochenende="ja"] { background: var(--flaeche); }
|
|
.k-strahl__tag[data-feiertag="ja"] { background: color-mix(in srgb, #ff9aa2 10%, transparent); }
|
|
.k-strahl__tag[data-heute="ja"] { background: color-mix(in srgb, var(--akzent) 15%, transparent); }
|
|
.k-strahl__saeule {
|
|
--sfarbe: var(--akzent);
|
|
width: 100%;
|
|
/* Ein leerer Tag bekommt einen Sockel von 3 px statt gar nichts --
|
|
sonst sähe die Achse an ruhigen Stellen kaputt aus. */
|
|
height: calc(3px + var(--menge) * 20px);
|
|
border-radius: 3px 3px 0 0;
|
|
background: linear-gradient(180deg, var(--sfarbe),
|
|
color-mix(in srgb, var(--sfarbe) 30%, transparent));
|
|
opacity: .92;
|
|
}
|
|
.k-strahl__tag[style*="--menge: 0"] .k-strahl__saeule { opacity: .3; }
|
|
.k-strahl__sym { position: absolute; top: 2px; font-size: .8rem; }
|
|
.k-strahl__kw {
|
|
position: absolute; bottom: 0;
|
|
font-size: .62rem; color: var(--text-still);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.k-strahl__fuss {
|
|
margin: 14px 0 0;
|
|
font-size: .76rem; color: var(--text-still);
|
|
}
|
|
|
|
/* ---------- Leerer Zeitraum --------------------------------------------- */
|
|
.k-leer {
|
|
padding: 26px 22px;
|
|
border: 1px dashed var(--rand); border-radius: var(--radius-klein);
|
|
text-align: center;
|
|
}
|
|
.k-leer__satz { margin: 0 0 6px; color: var(--text-leise); }
|
|
.k-leer__tipp { margin: 0; font-size: .82rem; color: var(--text-still); }
|
|
|
|
/* ---------- Tagesdialog -------------------------------------------------- */
|
|
.k-dialog {
|
|
width: min(560px, calc(100vw - 32px));
|
|
padding: 20px 22px;
|
|
border: 1px solid var(--rand-hell);
|
|
border-radius: var(--radius);
|
|
background: var(--glas-tief);
|
|
color: var(--text);
|
|
box-shadow: var(--schatten);
|
|
backdrop-filter: blur(14px);
|
|
}
|
|
.k-dialog::backdrop { background: rgba(3, 5, 10, .72); backdrop-filter: blur(3px); }
|
|
.k-dialog__kopf {
|
|
display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
|
|
margin-bottom: 14px;
|
|
}
|
|
.k-dialog__titel { display: block; font-size: 1.1rem; color: #eaf2fb; }
|
|
.k-dialog__unter {
|
|
display: block; margin-top: 3px;
|
|
font-size: .76rem; letter-spacing: .1em; text-transform: uppercase;
|
|
color: var(--text-still);
|
|
}
|
|
.k-dialog__anlaesse { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
|
|
.k-dialog__anlaesse:empty { display: none; }
|
|
.k-dialog__anlaesse .k-anlass { font-size: .76rem; padding: 4px 9px; }
|
|
.k-dialog__liste { display: grid; gap: 8px; margin-bottom: 16px; }
|
|
.k-dialog__fuss {
|
|
display: flex; align-items: center; justify-content: space-between; gap: 12px;
|
|
padding-top: 14px;
|
|
border-top: 1px solid var(--rand);
|
|
}
|
|
.k-dialog__tipp { font-size: .74rem; color: var(--text-still); }
|
|
|
|
/* ---------- Kleinere Bildschirme ----------------------------------------
|
|
Das Monatsraster ist auf einem Handy nicht sinnvoll zu quetschen: Bei
|
|
390 px wären die Zellen 46 px breit, und in einer 46-px-Zelle steht
|
|
kein Termin. Statt zu schrumpfen wird deshalb umgebaut -- die
|
|
KW-Spalte fällt weg, die Zellen werden flacher, und die Pillen zeigen
|
|
nur noch die Uhrzeit als Punkt. */
|
|
@media (max-width: 860px) {
|
|
.k-raster { grid-template-columns: 32px repeat(7, minmax(0, 1fr)); }
|
|
.k-tag { min-height: 76px; padding: 6px 5px 7px; }
|
|
.k-tag__monat, .k-tag__heute { display: none; }
|
|
.k-anlass, .k-pille {
|
|
font-size: .6rem; padding: 1px 4px;
|
|
border-left-width: 2px;
|
|
}
|
|
.k-pille__zeit { margin-right: 3px; }
|
|
.k-spaltenkopf { padding: 8px 4px; font-size: .66rem; letter-spacing: .06em; }
|
|
.k-kw { font-size: .66rem; padding: 7px 2px; }
|
|
.k-woche { grid-template-columns: 1fr; }
|
|
.k-wochentag { min-height: 0; }
|
|
.k-strahl { height: 110px; }
|
|
}
|
|
@media (max-width: 560px) {
|
|
.k-kopf { align-items: flex-start; }
|
|
.k-nav { width: 100%; }
|
|
.k-zeile { grid-template-columns: auto 1fr; }
|
|
.k-zeile__knoepfe { grid-column: 1 / -1; }
|
|
.k-anlassreihe { grid-template-columns: 1fr; }
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.k-anlasskarte, .k-tag, .k-wochentag, .k-pille, .k-chip,
|
|
.k-ansicht, .k-strahl__tag { transition: none; }
|
|
.k-anlasskarte:hover { transform: none; }
|
|
}
|
|
|
|
/* Ohne Farbverläufe (Kontrastmodus, Druck) müssen Kante und Schrift
|
|
allein tragen -- deshalb bleiben die Ränder erhalten. */
|
|
@media (forced-colors: active) {
|
|
.k-zeile::before, .k-anlasskarte::before { background: CanvasText; }
|
|
.k-pille, .k-anlass { border: 1px solid CanvasText; }
|
|
.k-strahl__saeule { background: CanvasText; }
|
|
}
|