/* ═══════════════════════════════════════════════════════════════════════ SG MODULE KLEUREN v1.0 ═══════════════════════════════════════════════════════════════════════ Elk module heeft één vaste kleur die doorloopt in: 1. Sidebar nav-icoon (altijd zichtbaar, ook light mode) 2. Actieve nav-item accent (linker border + icoon glow) 3. Section header (icoon + accent-lijn bovenaan de pagina) 4. Dashboard snelkoppelingen 5. Bottom nav actieve staat PALET: dashboard #e30613 rood (SG brand) projecten #f97316 oranje planning #0891b2 cyaan team #7c3aed paars tijden #16a34a groen contracten #f59e0b amber finance #22c55e emerald marktplaats #ec4899 roze netwerk #0ea5e9 sky blauw wagenpark #d97706 amber donker vault #0d9488 teal meldingen #f43f5e roos mailbeheer #2563eb blauw notities #8b5cf6 violet personeelszaken #dc2626 rood donker elearning #f59e0b amber administratie #64748b grijs-blauw accountbeheer #7c3aed paars offerteaanvragen #f59e0b amber gpstracker #0ea5e9 sky blauw ═══════════════════════════════════════════════════════════════════════ */ /* ────────────────────────────────────────────────────────────────────── CSS CUSTOM PROPERTIES — één bron van waarheid ────────────────────────────────────────────────────────────────────── */ :root { --sgm-dashboard: #e30613; --sgm-projecten: #f97316; --sgm-planning: #0891b2; --sgm-team: #7c3aed; --sgm-tijden: #16a34a; --sgm-contracten: #f59e0b; --sgm-finance: #22c55e; --sgm-marktplaats: #ec4899; --sgm-netwerk: #0ea5e9; --sgm-wagenpark: #d97706; --sgm-vault: #0d9488; --sgm-meldingen: #f43f5e; --sgm-mailbeheer: #2563eb; --sgm-notities: #8b5cf6; --sgm-personeelszaken: #dc2626; --sgm-elearning: #f59e0b; --sgm-administratie: #64748b; --sgm-accountbeheer: #7c3aed; --sgm-offerteaanvragen: #f59e0b; --sgm-gpstracker: #0ea5e9; --sgm-rijverboden: #dc2626; --sgm-afval: #16a34a; --sgm-tribune: #4f46e5; --sgm-elearning: #f59e0b; /* Actief sectie — wordt gezet door JS via data-active-section op */ --sgm-actief: #e30613; } /* ══════════════════════════════════════════════════════════════════════ 1. SIDEBAR NAV-ICONEN — altijd kleur, ook in light mode De inline style="color:..." van sg-nav-engine.js heeft hogere specificiteit, maar we versterken hier voor de gevallen waar dat niet werkt (bijv. direct na DOM-inject). ══════════════════════════════════════════════════════════════════════ */ /* Generiek: elk nav-icon krijgt zijn kleur via data-section op de button */ #sidebarNav .nav-item[data-section="dashboard"] .nav-icon, .bottom-nav-btn[data-section="dashboard"] { color: var(--sgm-dashboard) !important; } #sidebarNav .nav-item[data-section="projecten"] .nav-icon, .bottom-nav-btn[data-section="projecten"] { color: var(--sgm-projecten) !important; } #sidebarNav .nav-item[data-section="planning"] .nav-icon, .bottom-nav-btn[data-section="planning"] { color: var(--sgm-planning) !important; } #sidebarNav .nav-item[data-section="team"] .nav-icon, .bottom-nav-btn[data-section="team"] { color: var(--sgm-team) !important; } #sidebarNav .nav-item[data-section="tijden"] .nav-icon, .bottom-nav-btn[data-section="tijden"] { color: var(--sgm-tijden) !important; } #sidebarNav .nav-item[data-section="contracten"] .nav-icon, .bottom-nav-btn[data-section="contracten"] { color: var(--sgm-contracten) !important; } #sidebarNav .nav-item[data-section="finance"] .nav-icon, .bottom-nav-btn[data-section="finance"] { color: var(--sgm-finance) !important; } #sidebarNav .nav-item[data-section="marktplaats"] .nav-icon, .bottom-nav-btn[data-section="marktplaats"] { color: var(--sgm-marktplaats) !important; } #sidebarNav .nav-item[data-section="netwerk"] .nav-icon, .bottom-nav-btn[data-section="netwerk"] { color: var(--sgm-netwerk) !important; } #sidebarNav .nav-item[data-section="wagenpark"] .nav-icon, .bottom-nav-btn[data-section="wagenpark"] { color: var(--sgm-wagenpark) !important; } #sidebarNav .nav-item[data-section="vault"] .nav-icon, .bottom-nav-btn[data-section="vault"] { color: var(--sgm-vault) !important; } #sidebarNav .nav-item[data-section="meldingen"] .nav-icon, .bottom-nav-btn[data-section="meldingen"] { color: var(--sgm-meldingen) !important; } #sidebarNav .nav-item[data-section="mailbeheer"] .nav-icon, .bottom-nav-btn[data-section="mailbeheer"] { color: var(--sgm-mailbeheer) !important; } #sidebarNav .nav-item[data-section="notities"] .nav-icon, .bottom-nav-btn[data-section="notities"] { color: var(--sgm-notities) !important; } #sidebarNav .nav-item[data-section="personeelszaken"] .nav-icon, .bottom-nav-btn[data-section="personeelszaken"] { color: var(--sgm-personeelszaken) !important; } #sidebarNav .nav-item[data-section="elearning"] .nav-icon, .bottom-nav-btn[data-section="elearning"] { color: var(--sgm-elearning) !important; } #sidebarNav .nav-item[data-section="administratie"] .nav-icon, .bottom-nav-btn[data-section="administratie"] { color: var(--sgm-administratie) !important; } #sidebarNav .nav-item[data-section="accountbeheer"] .nav-icon, .bottom-nav-btn[data-section="accountbeheer"] { color: var(--sgm-accountbeheer) !important; } #sidebarNav .nav-item[data-section="offerteaanvragen"] .nav-icon, .bottom-nav-btn[data-section="offerteaanvragen"] { color: var(--sgm-offerteaanvragen) !important; } #sidebarNav .nav-item[data-section="gpstracker"] .nav-icon, .bottom-nav-btn[data-section="gpstracker"] { color: var(--sgm-gpstracker) !important; } #sidebarNav .nav-item[data-section="tribune"] .nav-icon, .bottom-nav-btn[data-section="tribune"] { color: var(--sgm-tribune) !important; } /* ══════════════════════════════════════════════════════════════════════ 2. ACTIEF NAV-ITEM — accent border + glow in de eigen modulekleur ══════════════════════════════════════════════════════════════════════ */ /* Basis actief-stijl — overschrijft de altijd-rode border uit style.css */ #sidebarNav .nav-item.active { background: rgba(255,255,255,.10) !important; color: #ffffff !important; } /* Per sectie: eigen kleur als linker accent-border + icon glow */ #sidebarNav .nav-item[data-section="dashboard"].active { box-shadow: inset 3px 0 0 var(--sgm-dashboard) !important; } #sidebarNav .nav-item[data-section="projecten"].active { box-shadow: inset 3px 0 0 var(--sgm-projecten) !important; } #sidebarNav .nav-item[data-section="planning"].active { box-shadow: inset 3px 0 0 var(--sgm-planning) !important; } #sidebarNav .nav-item[data-section="team"].active { box-shadow: inset 3px 0 0 var(--sgm-team) !important; } #sidebarNav .nav-item[data-section="tijden"].active { box-shadow: inset 3px 0 0 var(--sgm-tijden) !important; } #sidebarNav .nav-item[data-section="contracten"].active { box-shadow: inset 3px 0 0 var(--sgm-contracten) !important; } #sidebarNav .nav-item[data-section="finance"].active { box-shadow: inset 3px 0 0 var(--sgm-finance) !important; } #sidebarNav .nav-item[data-section="marktplaats"].active { box-shadow: inset 3px 0 0 var(--sgm-marktplaats) !important; } #sidebarNav .nav-item[data-section="netwerk"].active { box-shadow: inset 3px 0 0 var(--sgm-netwerk) !important; } #sidebarNav .nav-item[data-section="wagenpark"].active { box-shadow: inset 3px 0 0 var(--sgm-wagenpark) !important; } #sidebarNav .nav-item[data-section="vault"].active { box-shadow: inset 3px 0 0 var(--sgm-vault) !important; } #sidebarNav .nav-item[data-section="meldingen"].active { box-shadow: inset 3px 0 0 var(--sgm-meldingen) !important; } #sidebarNav .nav-item[data-section="mailbeheer"].active { box-shadow: inset 3px 0 0 var(--sgm-mailbeheer) !important; } #sidebarNav .nav-item[data-section="notities"].active { box-shadow: inset 3px 0 0 var(--sgm-notities) !important; } #sidebarNav .nav-item[data-section="personeelszaken"].active { box-shadow: inset 3px 0 0 var(--sgm-personeelszaken) !important; } #sidebarNav .nav-item[data-section="elearning"].active { box-shadow: inset 3px 0 0 var(--sgm-elearning) !important; } #sidebarNav .nav-item[data-section="administratie"].active { box-shadow: inset 3px 0 0 var(--sgm-administratie) !important; } #sidebarNav .nav-item[data-section="accountbeheer"].active { box-shadow: inset 3px 0 0 var(--sgm-accountbeheer) !important; } #sidebarNav .nav-item[data-section="offerteaanvragen"].active { box-shadow: inset 3px 0 0 var(--sgm-offerteaanvragen) !important; } #sidebarNav .nav-item[data-section="gpstracker"].active { box-shadow: inset 3px 0 0 var(--sgm-gpstracker) !important; } #sidebarNav .nav-item[data-section="tribune"].active { box-shadow: inset 3px 0 0 var(--sgm-tribune) !important; } /* Actief icoon: licht glow in eigen kleur */ #sidebarNav .nav-item.active .nav-icon { filter: brightness(1.25) drop-shadow(0 0 5px currentColor) !important; } /* ══════════════════════════════════════════════════════════════════════ 3. SECTION HEADER — accent icoon-cirkel + gekleurde bovenlijn Werkt via data-section op het .section element (#sec-*) en via de CSS custom property --sgm-actief die JS zet op ══════════════════════════════════════════════════════════════════════ */ /* Generieke section-header stijl */ .section-header { position: relative; } /* Accent-lijn boven de sectie-header (dun, in modulekleur) */ .section-header::before { content: ''; display: block; height: 3px; border-radius: 2px; background: var(--sgm-actief, #e30613); margin-bottom: 14px; width: 48px; transition: background .3s ease, width .3s ease; } /* Sectie-icoon in de header */ .section-header .section-icon, .section-header h2 i:first-child, .section-header .header-icon { color: var(--sgm-actief, #e30613) !important; transition: color .3s ease; } /* Per actieve sectie: stel --sgm-actief in op body via data-section attribuut */ body[data-active-section="dashboard"] { --sgm-actief: var(--sgm-dashboard); } body[data-active-section="projecten"] { --sgm-actief: var(--sgm-projecten); } body[data-active-section="planning"] { --sgm-actief: var(--sgm-planning); } body[data-active-section="team"] { --sgm-actief: var(--sgm-team); } body[data-active-section="tijden"] { --sgm-actief: var(--sgm-tijden); } body[data-active-section="contracten"] { --sgm-actief: var(--sgm-contracten); } body[data-active-section="finance"] { --sgm-actief: var(--sgm-finance); } body[data-active-section="marktplaats"] { --sgm-actief: var(--sgm-marktplaats); } body[data-active-section="netwerk"] { --sgm-actief: var(--sgm-netwerk); } body[data-active-section="wagenpark"] { --sgm-actief: var(--sgm-wagenpark); } body[data-active-section="vault"] { --sgm-actief: var(--sgm-vault); } body[data-active-section="meldingen"] { --sgm-actief: var(--sgm-meldingen); } body[data-active-section="mailbeheer"] { --sgm-actief: var(--sgm-mailbeheer); } body[data-active-section="notities"] { --sgm-actief: var(--sgm-notities); } body[data-active-section="personeelszaken"] { --sgm-actief: var(--sgm-personeelszaken); } body[data-active-section="elearning"] { --sgm-actief: var(--sgm-elearning); } body[data-active-section="administratie"] { --sgm-actief: var(--sgm-administratie); } body[data-active-section="accountbeheer"] { --sgm-actief: var(--sgm-accountbeheer); } body[data-active-section="offerteaanvragen"] { --sgm-actief: var(--sgm-offerteaanvragen); } body[data-active-section="gpstracker"] { --sgm-actief: var(--sgm-gpstracker); } body[data-active-section="tribune"] { --sgm-actief: var(--sgm-tribune); } /* ══════════════════════════════════════════════════════════════════════ 4. MODULE TOPBAR — gekleurde balk bovenaan elke sectie Automatisch gegenereerd via .sg-module-topbar klasse ══════════════════════════════════════════════════════════════════════ */ .sg-module-topbar { display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px; margin: -16px -16px 16px; /* sluit aan op section padding */ border-bottom: 1px solid rgba(0,0,0,.06); background: color-mix(in srgb, var(--sgm-actief, #e30613) 8%, transparent); border-top: 3px solid var(--sgm-actief, #e30613); transition: background .3s, border-color .3s; } .sg-module-topbar .sgmt-icon { width: 36px; height: 36px; border-radius: 10px; background: color-mix(in srgb, var(--sgm-actief, #e30613) 15%, transparent); display: flex; align-items: center; justify-content: center; font-size: 1rem; color: var(--sgm-actief, #e30613); flex-shrink: 0; transition: background .3s, color .3s; } .sg-module-topbar .sgmt-title { font-size: 1rem; font-weight: 700; color: var(--text, #0f172a); margin: 0; line-height: 1.2; } .sg-module-topbar .sgmt-sub { font-size: .72rem; color: var(--text-muted, #64748b); margin: 0; } /* Dark mode aanpassing */ .sg-theme-dark .sg-module-topbar { background: color-mix(in srgb, var(--sgm-actief, #e30613) 12%, #0b1120); border-bottom-color: rgba(255,255,255,.06); } .sg-theme-dark .sg-module-topbar .sgmt-title { color: #f1f5f9; } /* ══════════════════════════════════════════════════════════════════════ 5. BOTTOM NAV — actieve knop in modulekleur ══════════════════════════════════════════════════════════════════════ */ .bottom-nav-btn.active { color: var(--sgm-actief, #e30613) !important; } .bottom-nav-btn[data-section="dashboard"].active { color: var(--sgm-dashboard) !important; } .bottom-nav-btn[data-section="projecten"].active { color: var(--sgm-projecten) !important; } .bottom-nav-btn[data-section="planning"].active { color: var(--sgm-planning) !important; } .bottom-nav-btn[data-section="team"].active { color: var(--sgm-team) !important; } .bottom-nav-btn[data-section="tijden"].active { color: var(--sgm-tijden) !important; } .bottom-nav-btn[data-section="contracten"].active { color: var(--sgm-contracten) !important; } .bottom-nav-btn[data-section="finance"].active { color: var(--sgm-finance) !important; } .bottom-nav-btn[data-section="marktplaats"].active{ color: var(--sgm-marktplaats) !important; } .bottom-nav-btn[data-section="netwerk"].active { color: var(--sgm-netwerk) !important; } .bottom-nav-btn[data-section="wagenpark"].active { color: var(--sgm-wagenpark) !important; } .bottom-nav-btn[data-section="vault"].active { color: var(--sgm-vault) !important; } .bottom-nav-btn[data-section="meldingen"].active { color: var(--sgm-meldingen) !important; } /* ══════════════════════════════════════════════════════════════════════ 6. DASHBOARD SNELKOPPELINGEN — modulekleur op icoon + hover-accent .dash-shortcut[data-section="..."] elementen ══════════════════════════════════════════════════════════════════════ */ /* Generiek: icoon in dashboard-tiles krijgt kleur via data-section */ [data-section="projecten"] .stat-icon, [data-section="projecten"] .dash-icon { background: color-mix(in srgb, var(--sgm-projecten) 15%, transparent) !important; color: var(--sgm-projecten) !important; } [data-section="planning"] .stat-icon, [data-section="planning"] .dash-icon { background: color-mix(in srgb, var(--sgm-planning) 15%, transparent) !important; color: var(--sgm-planning) !important; } [data-section="team"] .stat-icon, [data-section="team"] .dash-icon { background: color-mix(in srgb, var(--sgm-team) 15%, transparent) !important; color: var(--sgm-team) !important; } [data-section="tijden"] .stat-icon, [data-section="tijden"] .dash-icon { background: color-mix(in srgb, var(--sgm-tijden) 15%, transparent) !important; color: var(--sgm-tijden) !important; } [data-section="contracten"] .stat-icon, [data-section="contracten"] .dash-icon { background: color-mix(in srgb, var(--sgm-contracten) 15%, transparent) !important; color: var(--sgm-contracten) !important; } [data-section="finance"] .stat-icon, [data-section="finance"] .dash-icon { background: color-mix(in srgb, var(--sgm-finance) 15%, transparent) !important; color: var(--sgm-finance) !important; } [data-section="marktplaats"].stat-icon, [data-section="marktplaats"].dash-icon { background: color-mix(in srgb, var(--sgm-marktplaats) 15%, transparent) !important; color: var(--sgm-marktplaats) !important; } [data-section="netwerk"] .stat-icon, [data-section="netwerk"] .dash-icon { background: color-mix(in srgb, var(--sgm-netwerk) 15%, transparent) !important; color: var(--sgm-netwerk) !important; } [data-section="wagenpark"] .stat-icon, [data-section="wagenpark"] .dash-icon { background: color-mix(in srgb, var(--sgm-wagenpark) 15%, transparent) !important; color: var(--sgm-wagenpark) !important; } [data-section="vault"] .stat-icon, [data-section="vault"] .dash-icon { background: color-mix(in srgb, var(--sgm-vault) 15%, transparent) !important; color: var(--sgm-vault) !important; } /* ══════════════════════════════════════════════════════════════════════ 7. LIGHT MODE OVERRIDE — nav-items altijd donkere achtergrond zodat gekleurde iconen altijd zichtbaar zijn ══════════════════════════════════════════════════════════════════════ */ /* Light mode: sidebar blijft donker (zoals dark mode) — dit is de standaard SG-sidebar */ .sg-theme-light .sidebar { background: var(--sidebar-bg, #0c1120) !important; } /* Nav-iconen: altijd hun eigen kleur (overschrijf geen-kleur uit dark-fixes) */ .sg-theme-light #sidebarNav .nav-item .nav-icon { /* kleur komt van de data-section regels hierboven */ opacity: 1 !important; } /* Hover: licht ophelderen */ .sg-theme-light #sidebarNav .nav-item:hover .nav-icon { filter: brightness(1.2) !important; } /* ══════════════════════════════════════════════════════════════════════ 8. DARK MODE — kleuren iets lichter voor betere leesbaarheid ══════════════════════════════════════════════════════════════════════ */ .sg-theme-dark #sidebarNav .nav-item[data-section="dashboard"] .nav-icon { color: color-mix(in srgb, var(--sgm-dashboard) 85%, white) !important; } .sg-theme-dark #sidebarNav .nav-item[data-section="projecten"] .nav-icon { color: color-mix(in srgb, var(--sgm-projecten) 85%, white) !important; } .sg-theme-dark #sidebarNav .nav-item[data-section="planning"] .nav-icon { color: color-mix(in srgb, var(--sgm-planning) 85%, white) !important; } .sg-theme-dark #sidebarNav .nav-item[data-section="team"] .nav-icon { color: color-mix(in srgb, var(--sgm-team) 85%, white) !important; } .sg-theme-dark #sidebarNav .nav-item[data-section="tijden"] .nav-icon { color: color-mix(in srgb, var(--sgm-tijden) 85%, white) !important; } .sg-theme-dark #sidebarNav .nav-item[data-section="contracten"] .nav-icon { color: color-mix(in srgb, var(--sgm-contracten) 85%, white) !important; } .sg-theme-dark #sidebarNav .nav-item[data-section="finance"] .nav-icon { color: color-mix(in srgb, var(--sgm-finance) 85%, white) !important; } .sg-theme-dark #sidebarNav .nav-item[data-section="marktplaats"] .nav-icon { color: color-mix(in srgb, var(--sgm-marktplaats) 85%, white) !important; } .sg-theme-dark #sidebarNav .nav-item[data-section="netwerk"] .nav-icon { color: color-mix(in srgb, var(--sgm-netwerk) 85%, white) !important; } .sg-theme-dark #sidebarNav .nav-item[data-section="wagenpark"] .nav-icon { color: color-mix(in srgb, var(--sgm-wagenpark) 85%, white) !important; } .sg-theme-dark #sidebarNav .nav-item[data-section="vault"] .nav-icon { color: color-mix(in srgb, var(--sgm-vault) 85%, white) !important; } .sg-theme-dark #sidebarNav .nav-item[data-section="meldingen"] .nav-icon { color: color-mix(in srgb, var(--sgm-meldingen) 85%, white) !important; } .sg-theme-dark #sidebarNav .nav-item[data-section="mailbeheer"] .nav-icon { color: color-mix(in srgb, var(--sgm-mailbeheer) 85%, white) !important; } .sg-theme-dark #sidebarNav .nav-item[data-section="notities"] .nav-icon { color: color-mix(in srgb, var(--sgm-notities) 85%, white) !important; } .sg-theme-dark #sidebarNav .nav-item[data-section="personeelszaken"] .nav-icon { color: color-mix(in srgb, var(--sgm-personeelszaken) 85%, white) !important; } .sg-theme-dark #sidebarNav .nav-item[data-section="elearning"] .nav-icon { color: color-mix(in srgb, var(--sgm-elearning) 85%, white) !important; } .sg-theme-dark #sidebarNav .nav-item[data-section="administratie"] .nav-icon { color: color-mix(in srgb, var(--sgm-administratie) 85%, white) !important; } .sg-theme-dark #sidebarNav .nav-item[data-section="accountbeheer"] .nav-icon { color: color-mix(in srgb, var(--sgm-accountbeheer) 85%, white) !important; } .sg-theme-dark #sidebarNav .nav-item[data-section="gpstracker"] .nav-icon { color: color-mix(in srgb, var(--sgm-gpstracker) 85%, white) !important; } .sg-theme-dark #sidebarNav .nav-item[data-section="tribune"] .nav-icon { color: color-mix(in srgb, var(--sgm-tribune) 85%, white) !important; }