/* ------------------------------------------------------------ app.css Ergaenzungen zu Tailwind CDN. Bewusst minimal -- die meisten Stile kommen aus Utility-Klassen in den Templates. ------------------------------------------------------------ */ /* Date-Inputs in iOS Safari haben sonst variable Hoehe */ input[type="date"] { -webkit-appearance: none; appearance: none; } /* Nutzbare Spinner auf dem Smartphone */ input[type="number"] { -webkit-appearance: textfield; appearance: textfield; } /* "tabular-nums" Tailwind-Utility ist zwar verfuegbar, aber wir stellen sicher, dass Stunden-Spalten auch ohne Klasse linksbuendig gleich breit erscheinen. */ .tabular-nums { font-variant-numeric: tabular-nums; } /* Sticky-Footer Padding, damit Inhalt nicht von der mobilen Bottom-Bar verdeckt wird (siehe bericht_form.html). */ @media (max-width: 640px) { body { padding-bottom: env(safe-area-inset-bottom); } } /* Print: Sticky Header/Footer und Save-Bar nicht drucken */ @media print { header, footer, .fixed { display: none !important; } body { background: #fff; } } /* ============================================================ Dark Mode ------------------------------------------------------------ Aktiviert ueber (Tailwind darkMode: 'class'). Die Overrides nutzen .dark als Eltern-Selector -- Specificity ist hoeher als die Tailwind-Utility-Klassen, daher kein !important noetig. Aufbau: Backgrounds, Borders, Text, dann Tags/Buttons und ein paar App-spezifische Komponenten. ============================================================ */ html.dark { color-scheme: dark; } html.dark body { background: #0b1220; color: #e2e8f0; } /* Backgrounds */ html.dark .bg-white { background-color: #1e293b; } /* card */ html.dark .bg-slate-50 { background-color: #0f172a; } html.dark .bg-slate-50\/30 { background-color: rgba(15,23,42,.3); } html.dark .bg-slate-50\/50 { background-color: rgba(15,23,42,.5); } html.dark .bg-slate-100 { background-color: #1f2937; } /* Subtile Tag-/Badge-Backgrounds: pastellig, dezenter */ html.dark .bg-amber-50 { background-color: #3b2a0a; } html.dark .bg-amber-100 { background-color: #3b2a0a; } html.dark .bg-emerald-50 { background-color: #042f24; } html.dark .bg-sky-50 { background-color: #0c2740; } html.dark .bg-rose-50 { background-color: #3a1a1c; } html.dark .bg-red-50 { background-color: #3a1a1c; } html.dark .bg-orange-50 { background-color: #3a230a; } html.dark .bg-brand-50 { background-color: #112340; } /* Borders -- staerker als der Background, sonst verschwinden Karten */ html.dark .border-slate-100 { border-color: #1f2937; } html.dark .border-slate-200 { border-color: #334155; } html.dark .border-slate-300 { border-color: #475569; } html.dark .border-amber-200 { border-color: #5a3f0c; } html.dark .border-emerald-200{ border-color: #0c5141; } html.dark .border-red-200 { border-color: #5a1f22; } html.dark .border-brand-200 { border-color: #1f3d63; } html.dark .divide-slate-100 > * + * { border-top-color: #1f2937; } /* Text -- hellere Slate-Tone */ html.dark .text-slate-900 { color: #e2e8f0; } html.dark .text-slate-800 { color: #cbd5e1; } html.dark .text-slate-700 { color: #cbd5e1; } html.dark .text-slate-600 { color: #94a3b8; } html.dark .text-slate-500 { color: #94a3b8; } html.dark .text-slate-400 { color: #64748b; } html.dark .text-slate-300 { color: #475569; } /* Tag-Texte (Status-Badges) ein bisschen heller */ html.dark .text-amber-700 { color: #fbbf24; } html.dark .text-amber-800 { color: #fde68a; } html.dark .text-emerald-700 { color: #34d399; } html.dark .text-rose-700 { color: #fb7185; } html.dark .text-red-600 { color: #f87171; } html.dark .text-red-700 { color: #fb7185; } html.dark .text-red-800 { color: #fecaca; } html.dark .text-orange-700 { color: #fb923c; } html.dark .text-brand-700 { color: #92b1cd; } html.dark .text-brand-800 { color: #b9cfe2; } /* Hover-Backgrounds */ html.dark .hover\:bg-slate-50:hover { background-color: #1a2436; } html.dark .hover\:bg-slate-100:hover { background-color: #243043; } html.dark .hover\:bg-slate-200:hover { background-color: #2d3a52; } html.dark .hover\:bg-brand-100:hover { background-color: #1f3d63; } html.dark .hover\:bg-brand-800:hover { background-color: #234670; } html.dark .hover\:text-slate-900:hover { color: #e2e8f0; } /* Form-Felder */ html.dark input, html.dark textarea, html.dark select { background-color: #0f172a; color: #e2e8f0; border-color: #334155; } html.dark input::placeholder, html.dark textarea::placeholder { color: #64748b; } html.dark input:focus, html.dark textarea:focus, html.dark select:focus { border-color: #5e85ad; } html.dark input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(0.8); } /* Tables: Zebra-/Hover-Effekt im Dark-Mode dezenter */ html.dark thead.bg-slate-50 { background-color: #182234; } /* Footer CivilOps Bautagebuch */ html.dark footer { background-color: #1e293b; } /* Dispoplan-Gruppenfarben im Dark Mode dezenter (Pastell -> gedämpft) */ html.dark .bg-sky-100 { background-color: #082f49; } html.dark .bg-emerald-100 { background-color: #064e3b; } html.dark .bg-fef3c7, html.dark .bg-amber-100 { background-color: #43320a; } html.dark .bg-fde68a, html.dark .bg-amber-200 { background-color: #5a4308; } html.dark .bg-fee2e2, html.dark .bg-rose-100, html.dark .bg-red-100 { background-color: #4a1a1c; } html.dark .bg-indigo-100 { background-color: #1e1b4b; } html.dark .bg-slate-200 { background-color: #334155; } /* SortableJS Drop-Indicator im Dark Mode */ html.dark .bg-amber-50 + tr, html.dark tr.bg-amber-50 { background-color: #3b2a0a; } html.dark tr.bg-slate-50 { background-color: #1a2436; } /* Theme-Toggle Button: leichte Animation */ .theme-toggle-icon { transition: transform 0.25s ease; } html.dark .theme-toggle-icon { transform: rotate(180deg); } /* Bauzeitenplan: Tagesraster-Linienfarbe (Gantt) */ :root { --bzp-grid: #f1f5f9; } html.dark { --bzp-grid: #253044; }