/* * styles-base.css * * Theming-Fundament fuer beide UIs (Desktop + Mobile). Definiert CSS- * Custom-Properties fuer Farben, Spacing, Schriftgroessen. Die UI- * spezifischen Stylesheets (styles-desktop.css, styles-mobile.css) * referenzieren diese Variablen, statt eigene Farb-Hexcodes zu nutzen. * * Dark Mode wird ueber [data-theme="dark"] auf aktiviert. Der * Loader in index.html setzt das Attribut beim Laden basierend auf * localStorage('gd-theme') oder prefers-color-scheme. * * Wichtig: Browser-Standardelemente (text inputs, scrollbars usw.) sollten * `color-scheme` kennen, damit die nativen Steuerungen (Caret, Scrollbar, * Form-Outline) zur Theme-Wahl passen. */ :root { /* Schriften, Spacing, Radien sind Theme-unabhaengig */ --font-family: -apple-system, "BlinkMacSystemFont", "Segoe UI", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-family-mono: "SF Mono", "Menlo", "Consolas", "Liberation Mono", monospace; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 22px; --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04), 0 2px 6px rgba(0, 0, 0, 0.04); --shadow-elevated: 0 4px 14px rgba(0, 0, 0, 0.08); --shadow-modal: 0 24px 48px rgba(0, 0, 0, 0.25); --transition-fast: 0.12s ease-out; --transition-medium: 0.22s ease-out; /* ---- LIGHT THEME (default) ---- */ color-scheme: light; --bg: #f5f6f8; --bg-elevated: #ffffff; --surface: #ffffff; --surface-muted: #f1f2f5; --surface-hover: #e9ebef; --surface-active: #dde0e5; --text: #1a1f29; --text-muted: #61697a; --text-faint: #94a0b3; --text-inverse: #ffffff; --line: #e2e5ec; --line-strong: #c9cfd9; --accent: #134e4a; /* tiefes Teal */ --accent-hover: #0f3f3c; --accent-soft: #d5ecea; --accent-text: #ffffff; --info: #1d4ed8; --info-soft: #dbeafe; --success: #15803d; --success-soft: #dcfce7; --warning: #b45309; --warning-soft: #fef3c7; --error: #b91c1c; --error-soft: #fee2e2; /* Status-Pillen */ --status-open: var(--info); --status-open-bg: var(--info-soft); --status-followup: var(--warning); --status-followup-bg: var(--warning-soft); --status-done: var(--success); --status-done-bg: var(--success-soft); --status-handed: #6d28d9; --status-handed-bg: #ede9fe; } [data-theme="dark"] { color-scheme: dark; --bg: #0f1216; --bg-elevated: #161a20; --surface: #1a1f27; --surface-muted: #232932; --surface-hover: #2a313c; --surface-active: #323a47; --text: #e8ecf2; --text-muted: #97a0b1; --text-faint: #6a7383; --text-inverse: #0f1216; --line: #2a313c; --line-strong: #3a4252; --accent: #4dd0c5; --accent-hover: #6ce0d7; --accent-soft: #163d3a; --accent-text: #07211f; --info: #60a5fa; --info-soft: #1e3a8a33; --success: #4ade80; --success-soft: #166e3433; --warning: #fbbf24; --warning-soft: #92400e33; --error: #f87171; --error-soft: #7f1d1d33; --status-open: var(--info); --status-open-bg: #1e3a8a33; --status-followup: var(--warning); --status-followup-bg: #78350f33; --status-done: var(--success); --status-done-bg: #14532d33; --status-handed: #c4b5fd; --status-handed-bg: #4c1d9533; --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 6px rgba(0, 0, 0, 0.25); --shadow-elevated: 0 4px 14px rgba(0, 0, 0, 0.4); --shadow-modal: 0 24px 48px rgba(0, 0, 0, 0.6); } /* Reset/Defaults */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: var(--font-family); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } button { font-family: inherit; } /* Screenreader-Only */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }