/* tracker/assets/app.css */ /* 1) Default (Light) */ :root{ --bg: #ffffff; --text: #111111; --muted: #666666; --card-bg: #ffffff; --border: #dddddd; --link: #0b57d0; --input-bg: #ffffff; --input-text: #111111; --table-border: #eeeeee; --success: #0a7a0a; --error: #b00020; } /* 2) Auto Dark Mode (OS) */ @media (prefers-color-scheme: dark) { :root{ --bg: #0f1115; --text: #e6e6e6; --muted: #a0a0a0; --card-bg: #141823; --border: #2a2f3a; --link: #8ab4f8; --input-bg: #0f131d; --input-text: #e6e6e6; --table-border: #232838; --success: #53d769; --error: #ff5a5f; } } /* 3) Manuell erzwingen (über bzw. "light") */ html[data-theme="light"]{ --bg: #ffffff; --text: #111111; --muted: #666666; --card-bg: #ffffff; --border: #dddddd; --link: #0b57d0; --input-bg: #ffffff; --input-text: #111111; --table-border: #eeeeee; --success: #0a7a0a; --error: #b00020; } html[data-theme="dark"]{ --bg: #0f1115; --text: #e6e6e6; --muted: #a0a0a0; --card-bg: #141823; --border: #2a2f3a; --link: #8ab4f8; --input-bg: #0f131d; --input-text: #e6e6e6; --table-border: #232838; --success: #53d769; --error: #ff5a5f; } /* 4) Gemeinsame Basis-Styles */ *{ box-sizing: border-box; } body{ margin: 0; font-family: Arial, sans-serif; background: var(--bg); color: var(--text); } a{ color: var(--link); } a:hover{ text-decoration: underline; } nav a{ margin-right: 12px; } .box{ border: 1px solid var(--border); border-radius: 8px; padding: 16px; margin-top: 16px; background: var(--card-bg); } .hint, .muted{ color: var(--muted); } .error{ color: var(--error); margin-top: 12px; } .success{ color: var(--success); margin-top: 12px; } input, textarea, select{ width: 100%; padding: 10px; margin-top: 6px; background: var(--input-bg); color: var(--input-text); border: 1px solid var(--border); border-radius: 6px; } button, a.btn{ padding: 10px 14px; border: 1px solid var(--border); border-radius: 8px; background: transparent; color: var(--text); cursor: pointer; } button:hover, a.btn:hover{ filter: brightness(1.05); } table{ width: 100%; border-collapse: collapse; margin-top: 10px; } th, td{ text-align: left; border-bottom: 1px solid var(--table-border); padding: 10px 6px; vertical-align: top; }