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]>
157 lines
6.3 KiB
CSS
157 lines
6.3 KiB
CSS
/* ===================================================================
|
|
Automationen.
|
|
|
|
Ein Zustandsbild, keine Bedienoberflaeche: Der einzige Schalter ist
|
|
der fuer die KI, weil sie als einzige Rechenzeit kostet, die der
|
|
Website gehoert. Alles andere laeuft und wird hier nur gezeigt.
|
|
=================================================================== */
|
|
|
|
.block { margin-bottom: 34px; }
|
|
.block__kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
|
|
.block__titel {
|
|
margin: 0; font-size: .78rem; font-weight: 700;
|
|
letter-spacing: .08em; text-transform: uppercase; color: var(--akzent);
|
|
}
|
|
.block__zahl {
|
|
min-width: 22px; padding: 1px 8px; text-align: center;
|
|
font-size: .74rem; font-weight: 700; color: var(--text-still);
|
|
background: rgba(255, 255, 255, .06); border-radius: 999px;
|
|
}
|
|
.block__frage { margin: 0 0 14px; font-size: .85rem; color: var(--text-still); max-width: 76ch; }
|
|
|
|
/* ---------- KI ------------------------------------------------------------ */
|
|
|
|
.ki-kasten {
|
|
margin-bottom: 34px; padding: 20px 22px;
|
|
border: 1px solid var(--rand); border-radius: var(--radius);
|
|
background: var(--flaeche);
|
|
}
|
|
.ki-kasten[data-zustand="laeuft"] {
|
|
border-color: rgba(138, 118, 255, .34);
|
|
background: rgba(138, 118, 255, .05);
|
|
}
|
|
.ki-kasten[data-zustand="weg"] {
|
|
border-color: rgba(255, 154, 162, .3);
|
|
background: rgba(255, 154, 162, .045);
|
|
}
|
|
.ki-kasten__kopf {
|
|
display: flex; gap: 20px; align-items: flex-start;
|
|
justify-content: space-between; flex-wrap: wrap;
|
|
}
|
|
.ki-kasten__titel { margin: 2px 0 6px; font-size: 1.1rem; font-weight: 700; }
|
|
.ki-kasten__text { margin: 0; font-size: .88rem; color: var(--text-leise); max-width: 62ch; }
|
|
|
|
.ki-kasten__daten {
|
|
display: grid; gap: 7px; margin: 18px 0 0; padding: 16px 0 0; list-style: none;
|
|
border-top: 1px solid var(--rand);
|
|
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
|
}
|
|
.ki-kasten__daten li { display: flex; gap: 10px; font-size: .83rem; color: var(--text-leise); }
|
|
.ki-kasten__schild {
|
|
flex: none; min-width: 74px;
|
|
font-size: .7rem; font-weight: 700; letter-spacing: .07em;
|
|
text-transform: uppercase; color: var(--text-still); padding-top: 2px;
|
|
}
|
|
|
|
/* ---------- Sicherung & Zustand -------------------------------------------
|
|
|
|
Derselbe Kasten wie bei der KI, aber mit eigener Farbgebung fuer den
|
|
Zustand: Gruen gibt es hier bewusst nicht -- "es lief" ist der
|
|
Normalfall und soll nicht feiern. Auffaellig wird es nur, wenn eine
|
|
Nacht ausgefallen ist oder etwas schiefging.
|
|
-------------------------------------------------------------------------- */
|
|
|
|
.zustand {
|
|
margin-bottom: 34px; padding: 20px 22px;
|
|
border: 1px solid var(--rand); border-radius: var(--radius);
|
|
background: var(--flaeche);
|
|
}
|
|
.zustand[data-zustand="alt"] {
|
|
border-color: rgba(232, 192, 125, .34); background: rgba(232, 192, 125, .05);
|
|
}
|
|
.zustand[data-zustand="fehler"] {
|
|
border-color: rgba(255, 154, 162, .34); background: rgba(255, 154, 162, .05);
|
|
}
|
|
.zustand__kopf {
|
|
display: flex; gap: 20px; align-items: flex-start;
|
|
justify-content: space-between; flex-wrap: wrap;
|
|
}
|
|
.zustand__titel { margin: 2px 0 6px; font-size: 1.1rem; font-weight: 700; }
|
|
.zustand[data-zustand="fehler"] .zustand__titel { color: var(--warn); }
|
|
.zustand__text { margin: 0; font-size: .88rem; color: var(--text-leise); max-width: 68ch; }
|
|
|
|
.zustand__daten {
|
|
display: grid; gap: 7px; margin: 18px 0 0; padding: 16px 0 0; list-style: none;
|
|
border-top: 1px solid var(--rand);
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
}
|
|
.zustand__daten li { display: flex; gap: 10px; font-size: .83rem; color: var(--text-leise); }
|
|
.zustand__daten .ki-kasten__schild { min-width: 128px; }
|
|
|
|
.zustand__listenkopf { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--rand); }
|
|
|
|
/* ---------- Hinweise ------------------------------------------------------- */
|
|
|
|
.hinweise { display: grid; gap: 7px; }
|
|
.hinweis {
|
|
position: relative; display: flex; align-items: center; gap: 12px;
|
|
padding: 11px 15px 11px 18px;
|
|
text-decoration: none; color: var(--text); font-size: .89rem;
|
|
border: 1px solid var(--rand); border-radius: var(--radius-klein);
|
|
background: var(--flaeche);
|
|
transition: border-color .18s ease, background .18s ease;
|
|
}
|
|
.hinweis::before {
|
|
content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 2px;
|
|
border-radius: 0 2px 2px 0; background: var(--rand);
|
|
}
|
|
.hinweis[data-stufe="warnung"] {
|
|
border-color: rgba(255, 154, 162, .3); background: rgba(255, 154, 162, .05);
|
|
}
|
|
.hinweis[data-stufe="warnung"]::before { background: var(--warn); }
|
|
.hinweis[data-stufe="offen"]::before { background: var(--akzent); opacity: .7; }
|
|
.hinweis[data-stufe="ruhig"] { opacity: .8; }
|
|
.hinweis:hover { border-color: rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .05); }
|
|
.hinweis__zahl {
|
|
flex: none; min-width: 30px; text-align: center;
|
|
font-size: 1.05rem; font-weight: 700;
|
|
}
|
|
.hinweis[data-stufe="warnung"] .hinweis__zahl { color: var(--warn); }
|
|
.hinweis__text { flex: 1; color: var(--text-leise); }
|
|
.hinweis__pfeil { color: var(--text-still); }
|
|
.hinweis:hover .hinweis__pfeil { color: var(--akzent); }
|
|
|
|
/* ---------- Regeln --------------------------------------------------------- */
|
|
|
|
.regeln {
|
|
display: grid; gap: 10px;
|
|
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
|
}
|
|
.regel {
|
|
padding: 15px 17px;
|
|
border: 1px solid var(--rand); border-radius: var(--radius-klein);
|
|
background: var(--flaeche);
|
|
}
|
|
.regel__name { margin: 0 0 5px; font-size: .93rem; font-weight: 650; }
|
|
.regel__text { margin: 0; font-size: .83rem; color: var(--text-still); line-height: 1.55; }
|
|
|
|
/* ---------- Verlauf -------------------------------------------------------- */
|
|
|
|
.verlauf { display: grid; gap: 2px; }
|
|
.verlauf__zeile {
|
|
display: grid; gap: 12px; align-items: baseline;
|
|
grid-template-columns: 96px minmax(0, 1fr) minmax(0, 1.2fr);
|
|
padding: 8px 12px; border-radius: var(--radius-klein);
|
|
font-size: .82rem;
|
|
}
|
|
.verlauf__zeile:nth-child(odd) { background: var(--flaeche); }
|
|
.verlauf__zeit { color: var(--text-still); font-variant-numeric: tabular-nums; }
|
|
.verlauf__was { color: var(--text); }
|
|
.verlauf__wer { color: var(--text-still); overflow: hidden; text-overflow: ellipsis; }
|
|
|
|
|
|
@media (max-width: 700px) {
|
|
.verlauf__zeile { grid-template-columns: 1fr; gap: 2px; }
|
|
}
|
|
@media (prefers-reduced-motion: reduce) { .hinweis { transition: none; } }
|