HitonabiandClaude Opus 5.5
dfe0971180
Der User: „Viel zu dünn. Und den Graphen kann ja kein Mensch lesen.“ Vorher drei Balken und ein winziges Stunden-Histogramm ohne lesbare Achsen, halb so breit neben dem Radar. - Eigene Ansicht views/ModellNutzung.tsx in voller Breite (Radar darunter, ebenfalls volle Breite). - Kennzahlen: Anfragen mit Schnitt je vollem Tag, heute/gestern, typische Antwort mit „9 von 10 bis“, Fehler (ab 1 % bernstein, ab 5 % rot, immer mit Wort dazu, nie nur Farbe). - Tabelle je Absender: Anfragen mit Anteil-Balken, Antwortzeiten, Rechenzeit mit Anteil (NerdQuiz stellt 92 % der Anfragen, aber nur 75 % der Rechenzeit), Fehler in Worten („Modell nicht erreichbar (502)“), letzte Anfrage. Schmal als Karten mit Beschriftung. - Neuer Baustein components/diagramme/Saeulen.tsx für „je Tag (7 Tage)“ und „je Stunde (24 h)“: gestapelt je Absender, glatte y-Achse, Wochentag/Datum bzw. Uhrzeit an der x-Achse (Stunden ausgedünnt auf 3 bzw. 6 h), Legende, Summen auf den Tagessäulen (bei den Stunden nur die höchste), Anzeige per Zeiger, Finger und Pfeiltasten, darunter „Werte als Tabelle“. Auf dem Handy steht die Anzeige unter dem Diagramm, sonst verdeckte sie das halbe Bild. Säulen höchstens 24 px, 2 px Luft zwischen den Stücken statt Rändern. - Farben: neue Tokens --reihe-3 (Gelb) und --reihe-weitere (Grau; ab der vierten Farbe fasst „Weitere“ zusammen). Mit dem Paletten-Prüfer gegen #15181b gemessen: jedes Paar auch bei Rot-Grün-Schwäche getrennt. Türkis fiel durch (neben Magenta bei Grünschwäche ΔE 1,6), Violett gleicht der KI-Box-Farbe. Die Farbe folgt dem Absender (feste Reihe der Box), nicht dem Rang. - „Wann welches Modell geladen wurde“ eingeklappt darunter: Anzahl, zuletzt, davor — mit Rolle (Hirn, Coder, Bild-Zwilling) statt nur Dateiname. - useBreite aus Verlauf.tsx nach lib/breite.ts, damit beide Diagramme ihn teilen. - Ältere Stände der Box ohne die neuen Felder zeigen weiter Anzahlen und Verläufe, Zeiten als „–“ — die Homelab-Instanz fragt über den Partner und kann einen anderen Stand haben. frontend/dist ist bewusst nicht gebaut (kommt beim Zusammenführen). Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
200 lines
6.4 KiB
CSS
200 lines
6.4 KiB
CSS
@import "tailwindcss";
|
|
@import "tw-animate-css";
|
|
@import "shadcn/tailwind.css";
|
|
@import "@fontsource/barlow/400.css";
|
|
@import "@fontsource/barlow/500.css";
|
|
@import "@fontsource/barlow/600.css";
|
|
@import "@fontsource/barlow-condensed/500.css";
|
|
@import "@fontsource/barlow-condensed/600.css";
|
|
@import "@fontsource/barlow-condensed/700.css";
|
|
@import "@fontsource/jetbrains-mono/400.css";
|
|
@import "@fontsource/jetbrains-mono/500.css";
|
|
|
|
/*
|
|
* Cockpit (Box-Wart-Umbau 09/2026, Richtung A): dunkles Instrumentenbrett.
|
|
* Bernstein = Achtung (Hinweise, Hauptknöpfe), Grün = läuft, Cyan = Info/Anzeige,
|
|
* Rot = Störung. Farbe erscheint nur, wenn etwas ist — im Normalfall bleibt es ruhig.
|
|
* Nur ein dunkles Design (User-Entscheid 23.09.), daher alle Werte direkt auf :root.
|
|
*/
|
|
|
|
@custom-variant dark (&:is(.dark *));
|
|
|
|
@theme inline {
|
|
--font-sans: "Barlow", "Segoe UI", system-ui, sans-serif;
|
|
--font-heading: "Barlow Condensed", "Barlow", "Segoe UI", sans-serif;
|
|
--font-anzeige: "Barlow Condensed", "Barlow", "Segoe UI", sans-serif;
|
|
--font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
|
|
|
|
--color-background: var(--background);
|
|
--color-foreground: var(--foreground);
|
|
--color-card: var(--card);
|
|
--color-card-foreground: var(--card-foreground);
|
|
--color-popover: var(--popover);
|
|
--color-popover-foreground: var(--popover-foreground);
|
|
--color-primary: var(--primary);
|
|
--color-primary-foreground: var(--primary-foreground);
|
|
--color-secondary: var(--secondary);
|
|
--color-secondary-foreground: var(--secondary-foreground);
|
|
--color-muted: var(--muted);
|
|
--color-muted-foreground: var(--muted-foreground);
|
|
--color-accent: var(--accent);
|
|
--color-accent-foreground: var(--accent-foreground);
|
|
--color-destructive: var(--destructive);
|
|
--color-border: var(--border);
|
|
--color-input: var(--input);
|
|
--color-ring: var(--ring);
|
|
|
|
--color-panel: var(--panel);
|
|
--color-erhaben: var(--erhaben);
|
|
--color-linie: var(--linie);
|
|
--color-linie-stark: var(--linie-stark);
|
|
--color-text-2: var(--text-2);
|
|
--color-text-3: var(--text-3);
|
|
|
|
--color-bernstein: var(--bernstein);
|
|
--color-bernstein-hell: var(--bernstein-hell);
|
|
--color-bernstein-grund: var(--bernstein-grund);
|
|
--color-bernstein-lampe: var(--bernstein-lampe);
|
|
--color-gruen: var(--gruen);
|
|
--color-gruen-text: var(--gruen-text);
|
|
--color-gruen-grund: var(--gruen-grund);
|
|
--color-gruen-rand: var(--gruen-rand);
|
|
--color-cyan: var(--cyan);
|
|
--color-cyan-text: var(--cyan-text);
|
|
--color-cyan-grund: var(--cyan-grund);
|
|
--color-cyan-rand: var(--cyan-rand);
|
|
--color-rot: var(--rot);
|
|
--color-rot-text: var(--rot-text);
|
|
--color-rot-grund: var(--rot-grund);
|
|
--color-rot-rand: var(--rot-rand);
|
|
--color-box: var(--box);
|
|
--color-box-text: var(--box-text);
|
|
--color-box-grund: var(--box-grund);
|
|
--color-box-rand: var(--box-rand);
|
|
--color-lab: var(--lab);
|
|
--color-lab-text: var(--lab-text);
|
|
--color-lab-grund: var(--lab-grund);
|
|
--color-lab-rand: var(--lab-rand);
|
|
--color-aus-grund: var(--aus-grund);
|
|
--color-aus-rand: var(--aus-rand);
|
|
--color-aus-text: var(--aus-text);
|
|
|
|
--radius-sm: calc(var(--radius) * 0.6);
|
|
--radius-md: calc(var(--radius) * 0.8);
|
|
--radius-lg: var(--radius);
|
|
--radius-xl: calc(var(--radius) * 1.4);
|
|
--radius-2xl: calc(var(--radius) * 1.8);
|
|
}
|
|
|
|
:root {
|
|
color-scheme: dark;
|
|
--radius: 0.625rem;
|
|
|
|
--background: #0e1012;
|
|
--foreground: #e6eaee;
|
|
--card: #15181b;
|
|
--card-foreground: #e6eaee;
|
|
--popover: #15181b;
|
|
--popover-foreground: #e6eaee;
|
|
--primary: #ffb020;
|
|
--primary-foreground: #1a1300;
|
|
--secondary: #1c2126;
|
|
--secondary-foreground: #e6eaee;
|
|
--muted: #1c2126;
|
|
--muted-foreground: #8b949e;
|
|
--accent: #1c2126;
|
|
--accent-foreground: #e6eaee;
|
|
--destructive: #ff5a4f;
|
|
--border: #262b30;
|
|
--input: #3a4148;
|
|
--ring: #5cc8ff;
|
|
|
|
--panel: #15181b;
|
|
--erhaben: #1c2126;
|
|
--linie: #262b30;
|
|
--linie-stark: #3a4148;
|
|
--text-2: #aeb6bf;
|
|
--text-3: #8b949e;
|
|
|
|
--bernstein: #ffb020;
|
|
--bernstein-hell: #ffc24d;
|
|
--bernstein-grund: #2a1e05;
|
|
--bernstein-lampe: #3a2a08;
|
|
--gruen: #3ddc8a;
|
|
--gruen-text: #7cc9a0;
|
|
--gruen-grund: #0f2319;
|
|
--gruen-rand: #1f5a3b;
|
|
--cyan: #5cc8ff;
|
|
--cyan-text: #93d5f8;
|
|
--cyan-grund: #0c2230;
|
|
--cyan-rand: #2f7fb0;
|
|
--rot: #ff5a4f;
|
|
--rot-text: #ff9a92;
|
|
--rot-grund: #2e0f0d;
|
|
--rot-rand: #a33a33;
|
|
/* Farben der beiden Bereiche — nur für Zugehörigkeit (Menü, Kopf, Karten), nie für Zustände:
|
|
Zustände bleiben grün/bernstein/rot/cyan. KI-Box = Indigo, Homelab = Violett. */
|
|
--box: #8b95ff;
|
|
--box-text: #b4bbff;
|
|
--box-grund: #151a36;
|
|
--box-rand: #3f4aa8;
|
|
--lab: #c98bff;
|
|
--lab-text: #deb8ff;
|
|
--lab-grund: #22163a;
|
|
--lab-rand: #6d44a6;
|
|
/* Messreihen im Monitoring (geprüft auf dunklem Grund #15181b, auch für Farbfehlsichtigkeit):
|
|
erste Reihe Blau, zweite Magenta. Zustandsfarben bleiben für Zustände. */
|
|
--reihe-1: #3987e5;
|
|
--reihe-2: #d55181;
|
|
/* Dritte Reihe Gelb (Modell-Nutzung, 25.09.2026): mit Blau und Magenta auch bei Rot-Grün-Schwäche jedes Paar
|
|
sicher getrennt (ΔE ≥ 13 in OKLab, Kontrast ≥ 4,5:1). Türkis fiel durch (neben Magenta bei Grünschwäche ΔE 1,6),
|
|
Violett gleicht der KI-Box-Farbe und neben Blau (ΔE 1,9). Ab der vierten Reihe fasst „Weitere“ grau zusammen —
|
|
hell genug, dass es sich auch bei Farbfehlsichtigkeit von Magenta abhebt (ΔE 8,6). */
|
|
--reihe-3: #c98500;
|
|
--reihe-weitere: #9aa3ad;
|
|
--aus-grund: #171b1f;
|
|
--aus-rand: #2e343a;
|
|
--aus-text: #9aa3ad;
|
|
}
|
|
|
|
@layer base {
|
|
* {
|
|
@apply border-border outline-ring/50;
|
|
}
|
|
html {
|
|
@apply font-sans;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
body {
|
|
@apply bg-background text-foreground;
|
|
margin: 0;
|
|
}
|
|
:focus-visible {
|
|
outline: 2px solid var(--cyan);
|
|
outline-offset: 2px;
|
|
}
|
|
}
|
|
|
|
@layer utilities {
|
|
/* Beschriftung wie auf einem Instrumentenbrett: schmal, groß, gesperrt. */
|
|
.schild {
|
|
font-family: var(--font-anzeige);
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.16em;
|
|
}
|
|
.ziffern {
|
|
font-family: var(--font-mono);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
}
|
|
|
|
/* Leuchtende Lampen: nur ein ruhiges Atmen, und nur wenn das System Bewegung erlaubt. */
|
|
@keyframes lampe-atmen {
|
|
0%, 100% { box-shadow: 0 0 10px color-mix(in srgb, var(--bernstein) 25%, transparent); }
|
|
50% { box-shadow: 0 0 22px color-mix(in srgb, var(--bernstein) 45%, transparent); }
|
|
}
|
|
@media (prefers-reduced-motion: no-preference) {
|
|
.lampe-atmet { animation: lampe-atmen 3.2s ease-in-out infinite; }
|
|
}
|