StefanandClaude Opus 5
adedaa9a0d
Farbschema folgt zunächst der Systemeinstellung, lässt sich per Knopf in der Kopfzeile umstellen und wird dann gemerkt. Bei gesperrtem Speicher (privates Fenster) greift wieder die Systemeinstellung. theme.js steht bewusst OHNE defer und vor dem Inhalt: es setzt die Farbklasse, bevor gezeichnet wird. Mit defer blitzte beim Laden kurz die helle Fassung auf. Eine eigene Datei statt eines <script>-Blocks, weil die CSP nur script-src 'self' erlaubt - inline wäre blockiert. Fusszeile zeigt Version oder Commit, gleiches Muster wie die Kantone-App: die CI reicht beides als Build-Argument durch, lokal erscheint der Build-Zeitpunkt. Der ändert sich bei jedem Neubau und zeigt damit sofort, ob wirklich der neue Stand läuft. Beim Ergänzen der Dunkel-Varianten hatte mein Ersetzer die eben eingefügten dark:-Klassen selbst nochmal getroffen und daraus Paare wie "dark:text-slate-300 dark:text-slate-600" gemacht - bereinigt. 81 Tests, alle grün. Neu darunter: die Fusszeile zeigt Tag bzw. Commit, theme.js steht vor <body> und ohne defer, der Umschalter ist da. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01GR4bNaj9GtRu57J4Niii8o
35 lines
1.1 KiB
CSS
35 lines
1.1 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer components {
|
|
/* Mindestens 44 px hohe Tippflächen - darunter trifft man auf dem
|
|
Handy schlecht. */
|
|
.knopf {
|
|
@apply inline-flex items-center justify-center gap-2 min-h-[44px]
|
|
px-4 rounded-xl font-semibold transition;
|
|
}
|
|
.knopf-haupt {
|
|
@apply knopf bg-marke-700 text-white hover:bg-marke-800
|
|
dark:bg-marke-600 dark:hover:bg-marke-700;
|
|
}
|
|
.knopf-still {
|
|
@apply knopf bg-slate-100 text-slate-700 hover:bg-slate-200
|
|
dark:bg-slate-700 dark:text-slate-100 dark:hover:bg-slate-600;
|
|
}
|
|
.feld {
|
|
@apply w-full min-h-[44px] px-3 rounded-xl border border-slate-300
|
|
bg-white text-slate-900 focus:outline-none focus:ring-2
|
|
focus:ring-marke-600
|
|
dark:border-slate-600 dark:bg-slate-800 dark:text-slate-100;
|
|
}
|
|
.etikett {
|
|
@apply block text-sm font-medium text-slate-600 mb-1
|
|
dark:text-slate-300;
|
|
}
|
|
.karte {
|
|
@apply bg-white rounded-2xl shadow-sm overflow-hidden
|
|
dark:bg-slate-800;
|
|
}
|
|
}
|