/** * @file stee-theme.css * @description Stee Huisstijl — 3 kleurthema's met onafhankelijke dark mode * * Thema 1: 🟣 Rustig & Vertrouwd (paars) — standaard * Thema 2: 🟢 Fris & Modern (groen) * Thema 3: 🟤 Warm & Huiskamer (bruin) * * Gebaseerd op: Stee_Huisstijl_Design_System.md * Datum: 2026-08-12 * * GEBRUIK: Voeg data-theme="purple|green|brown" toe op * Default = purple (Rustig & Vertrouwd) */ /* ═══════════════════════════════════════════════════════ 📝 TYPOGRAFIE — System fonts (snel, offline, geen SW-problemen) Inter/Poppins fallback naar system-ui voor native feel. ═══════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════ 🟣 THEMA 1 — Rustig & Vertrouwd (Paars) — DEFAULT ═══════════════════════════════════════════════════════ */ :root, [data-theme="purple"], [data-theme=""] { /* ── Primary ── */ --primary: #5E2D87; --primary-light: #8E5CB5; --primary-very-light: #EDE4F4; /* ── Semantic ── */ --success: #2E7D6B; --danger: #E14D4D; --warning: #F59E0B; --info: #2563EB; /* ── Backgrounds ── */ --bg-app: #F8F7FA; --bg-surface: #FFFFFF; --bg-selected: #EDE4F4; --bg-hover: #F3EEF8; /* ── Text ── */ --text: #1F2937; --text-secondary: #6B7280; --text-muted: #9CA3AF; --text-on-primary: #FFFFFF; /* ── Borders ── */ --border: #E5E7EB; --border-light: #F0F0F0; --border-hover: #D1D5DB; /* ── Shadows ── */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); /* ── Transaction amounts ── */ --amount-negative: #E14D4D; --amount-positive: #2E7D6B; /* ── Category tags ── */ --tag-bg: #EDE4F4; --tag-text: #5E2D87; /* ── Navigation ── */ --nav-active-bg: #5E2D87; --nav-active-text: #FFFFFF; --nav-inactive-bg: #FFFFFF; --nav-inactive-text: #1F2937; --nav-hover-bg: #F3EEF8; /* ── Knoppen ── */ --btn-primary-bg: #5E2D87; --btn-primary-text: #FFFFFF; --btn-primary-hover: #4A2470; --btn-secondary-bg: #FFFFFF; --btn-secondary-text: #5E2D87; --btn-secondary-border: #5E2D87; --btn-success-bg: #2E7D6B; --btn-danger-bg: #E14D4D; /* ── Header / topbar ── */ --header-bg: #5E2D87; --header-text: #FFFFFF; /* ── Badges ── */ --badge-owner-bg: #FFF3E0; --badge-owner-text: #E65100; --badge-member-bg: #E3F2FD; --badge-member-text: #1565C0; --badge-admin-bg: #FCE4EC; --badge-admin-text: #C62828; --badge-active-bg: #E8F5E9; --badge-active-text: #2E7D32; /* ── Login / admin accent ── */ --accent: #5E2D87; --accent-hover: #4A2470; --accent-light-bg: #EDE4F4; /* ── Logo color ── */ --logo-color: #5E2D87; /* ── Boodschappen aanbieding ── */ --offer-color: #E14D4D; /* ── Graphiek ── */ --chart-primary: #5E2D87; --chart-secondary: #8E5CB5; --chart-positive: #2E7D6B; --chart-negative: #E14D4D; /* ── Themanaam (voor JS) ── */ --theme-name: "Rustig & Vertrouwd"; --theme-emoji: "🟣"; /* ── Fonts ── */ --font-heading: 'Poppins', system-ui, -apple-system, sans-serif; --font-body: 'Inter', system-ui, -apple-system, sans-serif; } /* ═══════════════════════════════════════════════════════ 🟢 THEMA 2 — Fris & Modern (Groen) ═══════════════════════════════════════════════════════ */ [data-theme="green"] { --primary: #0FA67A; --primary-light: #22C55E; --primary-very-light: #DDF7EE; --success: #22C55E; --danger: #E14D4D; --warning: #F59E0B; --info: #2563EB; --bg-app: #F7FAF9; --bg-surface: #FFFFFF; --bg-selected: #DDF7EE; --bg-hover: #E8F8F0; --text: #1F2937; --text-secondary: #6B7280; --text-muted: #9CA3AF; --text-on-primary: #FFFFFF; --border: #E5E7EB; --border-light: #F0F0F0; --border-hover: #D1D5DB; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --amount-negative: #E14D4D; --amount-positive: #22C55E; --tag-bg: #DDF7EE; --tag-text: #0FA67A; --nav-active-bg: #0FA67A; --nav-active-text: #FFFFFF; --nav-inactive-bg: #FFFFFF; --nav-inactive-text: #1F2937; --nav-hover-bg: #E8F8F0; --btn-primary-bg: #0FA67A; --btn-primary-text: #FFFFFF; --btn-primary-hover: #0C8563; --btn-secondary-bg: #FFFFFF; --btn-secondary-text: #0FA67A; --btn-secondary-border: #0FA67A; --btn-success-bg: #22C55E; --btn-danger-bg: #E14D4D; --header-bg: #0FA67A; --header-text: #FFFFFF; --badge-owner-bg: #FFF3E0; --badge-owner-text: #E65100; --badge-member-bg: #E3F2FD; --badge-member-text: #1565C0; --badge-admin-bg: #FCE4EC; --badge-admin-text: #C62828; --badge-active-bg: #DDF7EE; --badge-active-text: #0FA67A; --accent: #0FA67A; --accent-hover: #0C8563; --accent-light-bg: #DDF7EE; --logo-color: #0FA67A; --offer-color: #F59E0B; --chart-primary: #0FA67A; --chart-secondary: #22C55E; --chart-positive: #22C55E; --chart-negative: #E14D4D; --theme-name: "Fris & Modern"; --theme-emoji: "🟢"; --font-heading: 'Poppins', system-ui, -apple-system, sans-serif; --font-body: 'Inter', system-ui, -apple-system, sans-serif; } /* ═══════════════════════════════════════════════════════ 🟤 THEMA 3 — Warm & Huiskamer (Bruin) ═══════════════════════════════════════════════════════ */ [data-theme="brown"] { --primary: #8B5E3C; --primary-light: #D9A066; --primary-very-light: #FFF5E6; --success: #6B8E68; --danger: #C95C4C; --warning: #D9A066; --info: #8B5E3C; --bg-app: #FFFDF9; --bg-surface: #FFFFFF; --bg-selected: #FFF5E6; --bg-hover: #FFF0D9; --text: #1F2937; --text-secondary: #6B7280; --text-muted: #9CA3AF; --text-on-primary: #FFFFFF; --border: #E5E7EB; --border-light: #F0F0F0; --border-hover: #D1D5DB; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --amount-negative: #C95C4C; --amount-positive: #6B8E68; --tag-bg: #FFF5E6; --tag-text: #8B5E3C; --nav-active-bg: #8B5E3C; --nav-active-text: #FFFFFF; --nav-inactive-bg: #FFFFFF; --nav-inactive-text: #1F2937; --nav-hover-bg: #FFF0D9; --btn-primary-bg: #8B5E3C; --btn-primary-text: #FFFFFF; --btn-primary-hover: #724D30; --btn-secondary-bg: #FFFFFF; --btn-secondary-text: #8B5E3C; --btn-secondary-border: #8B5E3C; --btn-success-bg: #6B8E68; --btn-danger-bg: #C95C4C; --header-bg: #8B5E3C; --header-text: #FFFFFF; --badge-owner-bg: #FFF5E6; --badge-owner-text: #8B5E3C; --badge-member-bg: #E3F2FD; --badge-member-text: #1565C0; --badge-admin-bg: #FCE4EC; --badge-admin-text: #C62828; --badge-active-bg: #E8F5E9; --badge-active-text: #6B8E68; --accent: #8B5E3C; --accent-hover: #724D30; --accent-light-bg: #FFF5E6; --logo-color: #8B5E3C; --offer-color: #D9A066; --chart-primary: #8B5E3C; --chart-secondary: #D9A066; --chart-positive: #6B8E68; --chart-negative: #C95C4C; --theme-name: "Warm & Huiskamer"; --theme-emoji: "🟤"; --font-heading: 'Poppins', system-ui, -apple-system, sans-serif; --font-body: 'Inter', system-ui, -apple-system, sans-serif; } /* ═══════════════════════════════════════════════════════ 🌙 DONKERE WEERGAVE — orthogonaal op het kleurthema ═══════════════════════════════════════════════════════ */ [data-color-mode="dark"] { color-scheme: dark; --bg-app: #101218; --bg-surface: #1A1D25; --bg-selected: #292D3A; --bg-hover: #232733; --text: #F3F4F6; --text-secondary: #C2C7D0; --text-muted: #8F96A3; --text-on-primary: #FFFFFF; --border: #343946; --border-light: #292E39; --border-hover: #4A5161; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35); --shadow-md: 0 4px 14px rgba(0, 0, 0, .45); --shadow-lg: 0 10px 30px rgba(0, 0, 0, .55); --nav-inactive-bg: #1A1D25; --nav-inactive-text: #E5E7EB; --nav-hover-bg: #292D3A; --btn-secondary-bg: #1A1D25; --badge-owner-bg: #49351E; --badge-owner-text: #FFD39B; --badge-member-bg: #173A54; --badge-member-text: #9ED5FF; --badge-admin-bg: #4A2230; --badge-admin-text: #FFB5C8; --badge-active-bg: #173E34; --badge-active-text: #9DE4CF; --header-bg: #151820; --header-text: #F9FAFB; --accent-light-bg: #292D3A; } /* ═══════════════════════════════════════════════════════ 🌐 ALGEMENE TYPOGRAFIE & BASIS (alle thema's) ═══════════════════════════════════════════════════════ */ /* ── Body ── */ body.stee-themed { font-family: var(--font-body); background-color: var(--bg-app); color: var(--text); margin: 20px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ── Headings ── */ .stee-themed h1, .stee-themed h2, .stee-themed h3, .stee-themed h4, .stee-themed h5, .stee-themed h6, .stee-themed .heading { font-family: var(--font-heading); font-weight: 600; } /* ── Paginatitel ── */ .stee-themed .page-title, .stee-themed h1 { font-family: var(--font-heading); font-weight: 600; color: var(--text); } /* ── Sectietitel ── */ .stee-themed .section-title, .stee-themed h2 { font-family: var(--font-heading); font-weight: 600; color: var(--text); } /* ── Knoppen (Poppins SemiBold) ── */ .stee-themed button, .stee-themed .btn, .stee-themed .app-nav-link, .stee-themed .settings-tab, .stee-themed .tab-btn { font-family: var(--font-heading); font-weight: 600; } /* ── Bedragen (Poppins SemiBold) ── */ .stee-themed .card-amount, .stee-themed .fin-amt-neg, .stee-themed .fin-amt-pos, .stee-themed .stat .num, .stee-themed .amount { font-family: var(--font-heading); font-weight: 600; } /* ── Navigatie ── */ .stee-themed .app-nav-link, .stee-themed .settings-tab { font-family: var(--font-heading); font-weight: 500; } /* ═══════════════════════════════════════════════════════ 🎨 KLEUR-OVERRIDES — bestaande classes met CSS variabelen ═══════════════════════════════════════════════════════ */ /* ── Logo ── */ .stee-themed .app-logo { color: var(--logo-color); font-family: var(--font-heading); font-weight: 700; } /* ── Navigatie ── */ .stee-themed .app-nav-link { color: var(--nav-inactive-text); background: var(--nav-inactive-bg); border-color: var(--border); } .stee-themed .app-nav-link:hover { background: var(--nav-hover-bg); } .stee-themed .app-nav-link.active { background: var(--nav-active-bg); color: var(--nav-active-text); border-color: var(--nav-active-bg); } /* ── Settings tabs ── */ .stee-themed .settings-tab { background: var(--bg-selected); color: var(--primary); border-color: var(--border); } .stee-themed .settings-tab:hover { background: var(--bg-hover); } .stee-themed .settings-tab.active { background: var(--bg-surface); color: var(--primary); border-color: var(--primary); } /* ── Primaire knop ── */ .stee-themed .btn-primary, .stee-themed button.btn-primary { background: var(--btn-primary-bg); color: var(--btn-primary-text); border-color: var(--btn-primary-bg); } .stee-themed .btn-primary:hover { background: var(--btn-primary-hover); } /* ── Secundaire knop ── */ .stee-themed .btn-secondary, .stee-themed button.btn-secondary { background: var(--btn-secondary-bg); color: var(--btn-secondary-text); border: 1px solid var(--btn-secondary-border); } /* ── Success knop ── */ .stee-themed .btn-success { background: var(--btn-success-bg); color: var(--text-on-primary); border-color: var(--btn-success-bg); } /* ── Danger knop ── */ .stee-themed .btn-danger { background: var(--btn-danger-bg); color: var(--text-on-primary); border-color: var(--btn-danger-bg); } /* ── Bedragen ── */ .stee-themed .fin-amt-neg, .stee-themed .card-amount.negative { color: var(--amount-negative); } .stee-themed .fin-amt-pos, .stee-themed .card-amount.positive { color: var(--amount-positive); } /* ── Transaction card ── */ .stee-themed .transaction-card { background: var(--bg-surface); border-color: var(--border); box-shadow: var(--shadow-sm); } .stee-themed .transaction-card:hover { box-shadow: var(--shadow-md); } /* ── Category tag ── */ .stee-themed .card-category-detail { background: var(--tag-bg); color: var(--tag-text); } /* ── Card name ── */ .stee-themed .card-name { color: var(--text-secondary); } /* ── Info box ── */ .stee-themed .info-box { background: var(--accent-light-bg); border-left-color: var(--primary); } /* ── Status ── */ .stee-themed .status { background: var(--accent-light-bg); } /* ── Modal ── */ .stee-themed .modal-content { background: var(--bg-surface); border-color: var(--border); box-shadow: var(--shadow-lg); } /* ── Settings panel ── */ .stee-themed .settings-panel { background: var(--bg-surface); border-color: var(--border); } /* ── Drop zone ── */ .stee-themed .drop-zone { border-color: var(--border); background: var(--bg-app); } /* ── Input focus ── */ .stee-themed input:focus, .stee-themed select:focus, .stee-themed textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 94, 45, 135), 0.15); } /* ── Sidebar ── */ .stee-themed .financien-sidebar { background: var(--bg-surface); box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1); } .stee-themed .financien-sidebar-header { border-bottom-color: var(--border); } /* ── Background overrides ── */ .stee-themed .container { background: transparent; } .stee-themed #stickyHeader, .stee-themed .sticky-header { background: var(--bg-app); } /* ── Select mode ── */ .stee-themed .transaction-card.select-mode.selected { outline-color: var(--primary); box-shadow: 0 0 8px rgba(var(--primary-rgb, 94, 45, 135), 0.3); } /* ── Prediction badges ── */ .stee-themed .prediction-badge.matched { background: var(--success); } .stee-themed .prediction-badge.deviation, .stee-themed .transaction-badge.deviation { background: var(--warning); } /* ── Linked indicator ── */ .stee-themed .linked-indicator { color: var(--info); } /* ── Overview card ── */ .stee-themed .overview-card { background: var(--bg-surface); border-color: var(--border); } /* ── Storage bar ── */ .stee-themed .storage-bar-fill { background: var(--primary); } /* ═══════════════════════════════════════════════════════ 🖥️ LOGIN PAGINA THEMA-OVERRIDES ═══════════════════════════════════════════════════════ */ .stee-themed.login-page .card { background: var(--bg-surface); border-color: var(--border); box-shadow: var(--shadow-md); } .stee-themed.login-page .logo h1 { color: var(--text); font-family: var(--font-heading); } .stee-themed.login-page .logo p { color: var(--text-secondary); } .stee-themed.login-page label { color: var(--text-secondary); } .stee-themed.login-page .btn-primary { background: var(--btn-primary-bg); color: var(--btn-primary-text); } .stee-themed.login-page .btn-primary:hover { background: var(--btn-primary-hover); } .stee-themed.login-page .btn-primary:disabled { background: var(--primary-light); cursor: not-allowed; } .stee-themed.login-page .btn-link { color: var(--primary); } .stee-themed.login-page input[type="text"]:focus, .stee-themed.login-page input[type="email"]:focus, .stee-themed.login-page input[type="password"]:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 94, 45, 135), 0.15); } .stee-themed.login-page .error { background: #FFF5F5; color: var(--danger); border-color: #FFCDD2; } .stee-themed.login-page .success { background: var(--accent-light-bg); color: var(--success); border-color: #C5E1A5; } .stee-themed.login-page .info { background: #E3F2FD; color: var(--info); border-color: #90CAF9; } /* ═══════════════════════════════════════════════════════ 🛡️ ADMIN PAGINA THEMA-OVERRIDES ═══════════════════════════════════════════════════════ */ .stee-themed.admin-page .topbar { background: var(--header-bg); color: var(--header-text); } .stee-themed.admin-page .tabs button { color: var(--text-secondary); } .stee-themed.admin-page .tabs button.active { color: var(--primary); border-bottom-color: var(--primary); } .stee-themed.admin-page .tabs button:hover { color: var(--text); } .stee-themed.admin-page .stat .num { color: var(--primary); } .stee-themed.admin-page .stat { background: var(--bg-surface); border-color: var(--border); } .stee-themed.admin-page .tbl-wrap { background: var(--bg-surface); border-color: var(--border); } .stee-themed.admin-page th { background: var(--bg-app); color: var(--text-secondary); border-bottom-color: var(--border); } .stee-themed.admin-page td { border-bottom-color: var(--border-light); } .stee-themed.admin-page tr:hover td { background: var(--bg-hover); } .stee-themed.admin-page .badge-owner { background: var(--badge-owner-bg); color: var(--badge-owner-text); } .stee-themed.admin-page .badge-member { background: var(--badge-member-bg); color: var(--badge-member-text); } .stee-themed.admin-page .badge-admin { background: var(--badge-admin-bg); color: var(--badge-admin-text); } .stee-themed.admin-page .badge-active, .stee-themed.admin-page .badge-on { background: var(--badge-active-bg); color: var(--badge-active-text); } .stee-themed.admin-page .btn-primary { color: var(--primary); border-color: var(--primary-light); } .stee-themed.admin-page .btn-primary:hover { background: var(--accent-light-bg); } .stee-themed.admin-page .btn-add { background: var(--btn-primary-bg); color: var(--btn-primary-text); } .stee-themed.admin-page .msg-ok { background: var(--accent-light-bg); color: var(--success); } .stee-themed.admin-page .msg-err { background: #FFEBEE; color: var(--danger); } /* ═══════════════════════════════════════════════════════ 🎨 THEMA-SELECTOR UI (op instellingen pagina) ═══════════════════════════════════════════════════════ */ .theme-selector { display: flex; gap: 16px; flex-wrap: wrap; margin: 16px 0; } .theme-card { flex: 1; min-width: 200px; max-width: 320px; border: 2px solid var(--border); border-radius: 12px; padding: 20px; cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s; background: var(--bg-surface); } .theme-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .theme-card.selected { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 94, 45, 135), 0.2); } .theme-card-swatch { display: flex; gap: 6px; margin: 8px 0; } .theme-card-swatch span { width: 32px; height: 32px; border-radius: 6px; display: inline-block; border: 1px solid var(--border); } .theme-card-name { font-family: var(--font-heading); font-weight: 600; font-size: 1em; margin-bottom: 4px; } .theme-card-desc { font-size: 0.85em; color: var(--text-secondary); line-height: 1.4; } .theme-card .check-mark { float: right; font-size: 1.2em; opacity: 0; transition: opacity 0.2s; } .theme-card.selected .check-mark { opacity: 1; color: var(--primary); } /* ═══════════════════════════════════════════════════════ 🍞 BODESCHAPPEN TAB-OVERRIDES ═══════════════════════════════════════════════════════ */ .stee-themed .tab-btn.active { background: var(--nav-active-bg); color: var(--nav-active-text); border-color: var(--nav-active-bg); } .stee-themed .cat-tab.active { background: var(--nav-active-bg); color: var(--nav-active-text); border-color: var(--nav-active-bg); } .stee-themed .shop-card { background: var(--bg-surface); border-color: var(--border); } .stee-themed .shop-card:hover { background: var(--bg-hover); } /* ═══════════════════════════════════════════════════════ 🔄 TRANSITIE bij thema-wissel ═══════════════════════════════════════════════════════ */ .stee-themed.stee-transitioning, .stee-themed.stee-transitioning *, .stee-themed.stee-transitioning *::before, .stee-themed.stee-transitioning *::after { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important; } /* Subtiele containerlijnen volgen de gekozen huisstijlkleur. */ :root:not([data-color-mode="dark"]), [data-color-mode="light"] { --border: color-mix(in srgb, var(--primary) 26%, #E5E7EB); --border-light: color-mix(in srgb, var(--primary) 13%, #F0F0F0); --border-hover: color-mix(in srgb, var(--primary) 46%, #D1D5DB); } [data-color-mode="dark"] { --border: color-mix(in srgb, var(--primary-light) 34%, #343946); --border-light: color-mix(in srgb, var(--primary-light) 18%, #292E39); --border-hover: color-mix(in srgb, var(--primary-light) 52%, #4A5161); }