D4rkst3randClaude Opus 5
6c8ead8e15
Schritt 4. React 18, TypeScript, Vite 5, Tailwind 4 (CSS-first), Lucide, Zustand; kein Konsta. Quelle in server/ui, Build nach server/web (gitignored), im Abbild von einer eigenen Docker-Stufe gebaut. JEDER KNOPF GIBT RUECKMELDUNG -- und zwar erzwungen, nicht vorgenommen: - api.ts haelt den EINZIGEN fetch und GENAU EINE Fehlerklasse. Der Fivemanage-Fehler war, zwei zu haben: geworfen wurde `new Error`, geprueft auf `instanceof ApiError`, und damit verschwand jeder Fehlschlag lautlos. - store.ts haelt run(): Aktion rein, Erfolgstext rein, und es meldet bei Erfolg diesen und bei Fehlschlag den Text DES DIENSTES. Wer darueber geht, kann keinen stillen Knopf bauen. - Jeder wartende Knopf ist gesperrt und zeigt einen Kreisel. Der zweite Klick eine Sekunde spaeter war der Weg zu neunzehn gleichnamigen Organisationen. - Fehlermeldungen bleiben stehen, bis jemand sie wegklickt. Ein Fehler, der von allein verschwindet, ist einer, den niemand gelesen hat. @vitejs/plugin-react ist auf ^4 festgenagelt: die 6 verlangt vite ^8. In den peerDependencies nachgesehen -- Vite 5.4.21 liegt in der Schnittmenge von plugin-react@4 und @tailwindcss/vite@4. Am laufenden Container nachgemessen: / kommt als text/html, assets/*.js als text/javascript, *.css als text/css (die MIME-Falle aus Schritt 1 traegt), und /tokens, /speicher, /konto liefern dieselbe index.html -- die SPA-Rueckfall- route tut, wofuer sie gebaut wurde. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
49 lines
1.2 KiB
CSS
49 lines
1.2 KiB
CSS
@import 'tailwindcss';
|
|
|
|
/* Tailwind 4 ist CSS-first: die Gestaltung steht hier, nicht in einer
|
|
tailwind.config.js. Was unter @theme steht, wird zu Hilfsklassen — aus
|
|
--color-grund wird bg-grund, text-grund, border-grund. */
|
|
@theme {
|
|
--color-grund: #0b0d10;
|
|
--color-flaeche: #14181d;
|
|
--color-flaeche-hoch: #1c222a;
|
|
--color-rand: #2a323c;
|
|
--color-schrift: #e6eaf0;
|
|
--color-schrift-leise: #93a1b1;
|
|
|
|
--color-akzent: #4ea3ff;
|
|
--color-akzent-tief: #1b4f85;
|
|
|
|
--color-gut: #3fb950;
|
|
--color-schlecht: #f85149;
|
|
--color-warn: #d29922;
|
|
|
|
--font-sans:
|
|
ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
|
|
--font-mono: ui-monospace, 'Cascadia Code', 'Segoe UI Mono', Consolas, monospace;
|
|
}
|
|
|
|
html,
|
|
body,
|
|
#wurzel {
|
|
height: 100%;
|
|
}
|
|
|
|
body {
|
|
background: var(--color-grund);
|
|
color: var(--color-schrift);
|
|
font-family: var(--font-sans);
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
/* Der Fokusrahmen bleibt sichtbar. Ein Dashboard, das sich nur mit der Maus
|
|
bedienen lässt, ist bei 900 Kacheln kein Vergnügen. */
|
|
:focus-visible {
|
|
outline: 2px solid var(--color-akzent);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
::selection {
|
|
background: var(--color-akzent-tief);
|
|
}
|