/** * Nobody Workz – Farbpalette (9 Stufen um #008bc2). * Dark ist Standard; Light über [data-theme="light"] am . * * Stufen: #ffffff → #bfe2f0 → #80c5e1 → #40a8d1 → #008bc2 → #006892 → #004661 → #002331 → #000000 */ :root { --nw-white: #ffffff; --nw-mist: #bfe2f0; --nw-sky: #80c5e1; --nw-blue-mid: #40a8d1; --nw-accent: #008bc2; --nw-deep: #006892; --nw-navy: #004661; --nw-ink: #002331; --nw-black: #000000; /* Für rgb(var(--rgb-*)) in Vuetify-Overrides */ --rgb-ink: 0, 35, 49; --rgb-navy: 0, 70, 97; --rgb-deep: 0, 104, 146; --rgb-on-dark: 255, 255, 255; } :root, [data-theme="dark"] { --bg-base: var(--nw-ink); --bg-surface: var(--nw-navy); --bg-elevated: var(--nw-deep); --bg-hover: #005a7a; --bg-main-content: var(--nw-white); --border-subtle: rgba(128, 197, 225, 0.14); --border-muted: rgba(128, 197, 225, 0.28); --text-primary: var(--nw-white); --text-secondary: var(--nw-mist); --text-muted: var(--nw-sky); --text-on-accent: var(--nw-white); --accent: var(--nw-accent); --accent-hover: var(--nw-blue-mid); --accent-subtle: rgba(0, 139, 194, 0.2); --accent-glow: rgba(0, 139, 194, 0.08); --danger: #ef4444; --danger-subtle: rgba(239, 68, 68, 0.12); --success: #22c55e; --success-subtle: rgba(34, 197, 94, 0.12); --warning: #f59e0b; --warning-subtle: rgba(245, 158, 11, 0.12); --info: var(--nw-accent); --info-subtle: rgba(0, 139, 194, 0.14); --shadow-color: rgba(0, 0, 0, 0.35); /* Helle Inhaltsfläche (Webmail-Liste, Karten) */ --mail-toolbar-border: rgba(0, 104, 146, 0.14); --mail-row-hover-bg: #d4eaf4; --mail-row-border: rgba(0, 104, 146, 0.1); --mail-row-text: var(--nw-ink); --mail-row-text-muted: #006892; } [data-theme="dark"] { color-scheme: dark; } [data-theme="light"] { color-scheme: light; } select, select option { background-color: var(--bg-surface); color: var(--text-primary); } [data-theme="light"] { --bg-base: var(--nw-mist); --bg-surface: var(--nw-white); --bg-elevated: var(--nw-white); --bg-hover: #d4eaf4; --bg-main-content: var(--nw-white); --border-subtle: rgba(0, 104, 146, 0.12); --border-muted: rgba(0, 104, 146, 0.22); --text-primary: var(--nw-ink); --text-secondary: var(--nw-navy); --text-muted: var(--nw-deep); --text-on-accent: var(--nw-white); --accent: var(--nw-accent); --accent-hover: var(--nw-deep); --accent-subtle: rgba(0, 139, 194, 0.12); --accent-glow: rgba(0, 139, 194, 0.06); --danger: #dc2626; --danger-subtle: rgba(220, 38, 38, 0.1); --success: #16a34a; --success-subtle: rgba(22, 163, 74, 0.1); --warning: #d97706; --warning-subtle: rgba(217, 119, 6, 0.1); --info: var(--nw-accent); --info-subtle: rgba(0, 139, 194, 0.1); --shadow-color: rgba(0, 35, 49, 0.08); --mail-toolbar-border: rgba(0, 104, 146, 0.12); --mail-row-hover-bg: #e8f4fa; --mail-row-border: rgba(0, 104, 146, 0.08); --mail-row-text: var(--nw-ink); --mail-row-text-muted: var(--nw-deep); }