/* * Per-user UI themes (Themes module). Applied by `data-app-theme="t1..t5"` on * , rendered server-side by the app layout from the user's saved choice * (users.theme, mirrored in the session). Catalog: src/Module/Themes/ThemeCatalog.php. * * Each theme = a light token block + a FULLY PARALLEL dark block (the light * block outranks the base dark block, so every token must repeat in dark), * plus menu-icon colors and an optional shell twist. * * Adding a theme: add the parallel blocks here + a catalog entry (id must * match), and widen the users.theme column check if the id scheme changes. */ /* ---- Shared fixes under any theme ----------------------------------------- */ /* app.css references the --app-* shell tokens (defaults in tokens.css :root): --app-primary-hover, --app-grad-a/b, --app-navbar-toggle-icon and --app-navbar-icon. Theme blocks override them; the rules below stay as a safety net for themes that miss one. */ html[data-app-theme] .btn-primary { --bs-btn-hover-bg: var(--app-primary-hover); --bs-btn-hover-border-color: var(--app-primary-hover); --bs-btn-active-bg: var(--app-primary-hover); --bs-btn-active-border-color: var(--app-primary-hover); --bs-btn-hover-color: var(--md-sys-color-on-primary); --bs-btn-active-color: var(--md-sys-color-on-primary); } html[data-app-theme] .logo-avatar, html[data-app-theme] .user-avatar { background: linear-gradient(135deg, var(--app-grad-a) 0%, var(--app-grad-b) 100%); color: var(--md-sys-color-on-primary); } /* ---- Picker page (templates/themes/index.view.php) ------------------------ */ .theme-swatches { display: flex; gap: 6px; } .theme-swatch { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--md-sys-color-outline-variant); } /* ========================================================================== t1 — Índigo Clássico: o visual atual refinado + ícones de menu coloridos ========================================================================== */ html[data-app-theme="t1"] { --md-sys-color-primary: #1e40af; --md-sys-color-on-primary: #ffffff; --md-sys-color-primary-container: #e0e7ff; --md-sys-color-on-primary-container: #1e1b4b; --md-sys-color-secondary: #0891b2; --md-sys-color-surface: #ffffff; --md-sys-color-on-surface: #0f172a; --md-sys-color-surface-variant: #eef2ff; --md-sys-color-on-surface-variant: #475569; --md-sys-color-surface-container: #f8fafc; --md-sys-color-surface-container-highest: #e2e8f0; --md-sys-color-outline: #cbd5e1; --md-sys-color-outline-variant: #e2e8f0; --md-sys-color-background: #f8fafc; --md-sys-color-on-background: #0f172a; --md-sys-color-error: #dc2626; --app-primary-hover: #1e3a8a; --app-grad-a: #1e3a8a; --app-grad-b: #4338ca; } html[data-app-theme="t1"][data-bs-theme="dark"] { --md-sys-color-primary: #a5b4fc; --md-sys-color-on-primary: #1e1b4b; --md-sys-color-primary-container: #3730a3; --md-sys-color-on-primary-container: #e0e7ff; --md-sys-color-secondary: #67e8f9; --md-sys-color-surface: #0f172a; --md-sys-color-on-surface: #e2e8f0; --md-sys-color-surface-variant: #1e293b; --md-sys-color-on-surface-variant: #94a3b8; --md-sys-color-surface-container: #1e293b; --md-sys-color-surface-container-highest: #334155; --md-sys-color-outline: #475569; --md-sys-color-outline-variant: #334155; --md-sys-color-background: #0b1220; --md-sys-color-on-background: #e2e8f0; --md-sys-color-error: #f87171; --app-primary-hover: #c7d2fe; --app-grad-a: #a5b4fc; --app-grad-b: #818cf8; } html[data-app-theme="t1"] .sidebar-nav-link .bi-speedometer2 { color: #0284c7; } html[data-app-theme="t1"] .sidebar-nav-link .bi-people { color: #7c3aed; } html[data-app-theme="t1"] .sidebar-nav-link .bi-building { color: #2563eb; } html[data-app-theme="t1"] .sidebar-nav-link .bi-key { color: #d97706; } html[data-app-theme="t1"] .sidebar-nav-link .bi-palette { color: #db2777; } html[data-app-theme="t1"] .sidebar-nav-link .bi-database-gear { color: #0d9488; } html[data-app-theme="t1"][data-bs-theme="dark"] .sidebar-nav-link .bi-speedometer2 { color: #38bdf8; } html[data-app-theme="t1"][data-bs-theme="dark"] .sidebar-nav-link .bi-people { color: #a78bfa; } html[data-app-theme="t1"][data-bs-theme="dark"] .sidebar-nav-link .bi-building { color: #60a5fa; } html[data-app-theme="t1"][data-bs-theme="dark"] .sidebar-nav-link .bi-key { color: #fbbf24; } html[data-app-theme="t1"][data-bs-theme="dark"] .sidebar-nav-link .bi-palette { color: #f472b6; } html[data-app-theme="t1"][data-bs-theme="dark"] .sidebar-nav-link .bi-database-gear { color: #2dd4bf; } /* ========================================================================== t2 — Esmeralda: sidebar menta tingida + item ativo em pílula ========================================================================== */ html[data-app-theme="t2"] { --md-sys-color-primary: #047857; --md-sys-color-on-primary: #ffffff; --md-sys-color-primary-container: #d1fae5; --md-sys-color-on-primary-container: #064e3b; --md-sys-color-secondary: #0d9488; --md-sys-color-surface: #ffffff; --md-sys-color-on-surface: #10231c; --md-sys-color-surface-variant: #ecfdf5; --md-sys-color-on-surface-variant: #3f5c51; --md-sys-color-surface-container: #f3faf7; --md-sys-color-surface-container-highest: #d7e8e0; --md-sys-color-outline: #b5cec3; --md-sys-color-outline-variant: #dcebe3; --md-sys-color-background: #f3faf7; --md-sys-color-on-background: #10231c; --md-sys-color-error: #dc2626; --app-primary-hover: #065f46; --app-grad-a: #047857; --app-grad-b: #0d9488; } html[data-app-theme="t2"][data-bs-theme="dark"] { --md-sys-color-primary: #34d399; --md-sys-color-on-primary: #022c22; --md-sys-color-primary-container: #065f46; --md-sys-color-on-primary-container: #d1fae5; --md-sys-color-secondary: #2dd4bf; --md-sys-color-surface: #0c1a15; --md-sys-color-on-surface: #d4e7dd; --md-sys-color-surface-variant: #14261f; --md-sys-color-on-surface-variant: #9db8ab; --md-sys-color-surface-container: #12211b; --md-sys-color-surface-container-highest: #1e372d; --md-sys-color-outline: #3d5a4d; --md-sys-color-outline-variant: #24382f; --md-sys-color-background: #0a1611; --md-sys-color-on-background: #d4e7dd; --md-sys-color-error: #f87171; --app-primary-hover: #6ee7b7; --app-grad-a: #34d399; --app-grad-b: #2dd4bf; } html[data-app-theme="t2"] .sidebar { background: #e7f6ee; border-right-color: transparent; } html[data-app-theme="t2"][data-bs-theme="dark"] .sidebar { background: #0f2019; } html[data-app-theme="t2"] .sidebar-nav-link { border-left: none; border-radius: var(--md-sys-shape-corner-full); margin: 2px 12px; padding: 8px 14px; } html[data-app-theme="t2"] .sidebar-nav-link.active { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); } html[data-app-theme="t2"] .sidebar-nav-link .bi-speedometer2 { color: #059669; } html[data-app-theme="t2"] .sidebar-nav-link .bi-people { color: #0891b2; } html[data-app-theme="t2"] .sidebar-nav-link .bi-building { color: #047857; } html[data-app-theme="t2"] .sidebar-nav-link .bi-key { color: #ca8a04; } html[data-app-theme="t2"] .sidebar-nav-link .bi-palette { color: #db2777; } html[data-app-theme="t2"] .sidebar-nav-link .bi-database-gear { color: #4f46e5; } html[data-app-theme="t2"][data-bs-theme="dark"] .sidebar-nav-link .bi-speedometer2 { color: #34d399; } html[data-app-theme="t2"][data-bs-theme="dark"] .sidebar-nav-link .bi-people { color: #22d3ee; } html[data-app-theme="t2"][data-bs-theme="dark"] .sidebar-nav-link .bi-building { color: #34d399; } html[data-app-theme="t2"][data-bs-theme="dark"] .sidebar-nav-link .bi-key { color: #facc15; } html[data-app-theme="t2"][data-bs-theme="dark"] .sidebar-nav-link .bi-palette { color: #f472b6; } html[data-app-theme="t2"][data-bs-theme="dark"] .sidebar-nav-link .bi-database-gear { color: #818cf8; } /* ========================================================================== t3 — Violeta Noturno: sidebar escura mesmo no modo claro ========================================================================== */ html[data-app-theme="t3"] { --md-sys-color-primary: #6d28d9; --md-sys-color-on-primary: #ffffff; --md-sys-color-primary-container: #ede9fe; --md-sys-color-on-primary-container: #4c1d95; --md-sys-color-secondary: #c026d3; --md-sys-color-surface: #ffffff; --md-sys-color-on-surface: #1e1b2e; --md-sys-color-surface-variant: #f3f0fa; --md-sys-color-on-surface-variant: #564f6b; --md-sys-color-surface-container: #faf9fd; --md-sys-color-surface-container-highest: #e6e1f2; --md-sys-color-outline: #c9c2dd; --md-sys-color-outline-variant: #e6e1f2; --md-sys-color-background: #f7f5fb; --md-sys-color-on-background: #1e1b2e; --md-sys-color-error: #dc2626; --app-primary-hover: #5b21b6; --app-grad-a: #6d28d9; --app-grad-b: #a21caf; } html[data-app-theme="t3"][data-bs-theme="dark"] { --md-sys-color-primary: #a78bfa; --md-sys-color-on-primary: #2e1065; --md-sys-color-primary-container: #5b21b6; --md-sys-color-on-primary-container: #ede9fe; --md-sys-color-secondary: #e879f9; --md-sys-color-surface: #171226; --md-sys-color-on-surface: #e3ddf3; --md-sys-color-surface-variant: #221a38; --md-sys-color-on-surface-variant: #a79dc4; --md-sys-color-surface-container: #1d1630; --md-sys-color-surface-container-highest: #322851; --md-sys-color-outline: #4f4570; --md-sys-color-outline-variant: #2c2347; --md-sys-color-background: #120e1e; --md-sys-color-on-background: #e3ddf3; --md-sys-color-error: #f87171; --app-primary-hover: #c4b5fd; --app-grad-a: #a78bfa; --app-grad-b: #e879f9; } html[data-app-theme="t3"] .sidebar { background: #241b3a; border-right: none; } html[data-app-theme="t3"][data-bs-theme="dark"] .sidebar { background: #1a1330; } html[data-app-theme="t3"] .sidebar-nav-link { color: #cdc4e8; } html[data-app-theme="t3"] .sidebar-nav-link:hover { background: rgba(255, 255, 255, 0.06); } html[data-app-theme="t3"] .sidebar-nav-link.active { background: #4c1d95; color: #ede9fe; border-left-color: #a78bfa; } html[data-app-theme="t3"] .sidebar-section-label { color: #8d84ab; opacity: 1; } /* Sidebar is always dark — one icon set for both modes. */ html[data-app-theme="t3"] .sidebar-nav-link .bi-speedometer2 { color: #22d3ee; } html[data-app-theme="t3"] .sidebar-nav-link .bi-people { color: #a78bfa; } html[data-app-theme="t3"] .sidebar-nav-link .bi-building { color: #c026d3; } html[data-app-theme="t3"] .sidebar-nav-link .bi-key { color: #fbbf24; } html[data-app-theme="t3"] .sidebar-nav-link .bi-palette { color: #f472b6; } html[data-app-theme="t3"] .sidebar-nav-link .bi-database-gear { color: #34d399; } /* ========================================================================== t4 — Terracota: superfícies creme; item ativo em bloco sólido primary ========================================================================== */ html[data-app-theme="t4"] { --md-sys-color-primary: #c2410c; --md-sys-color-on-primary: #ffffff; --md-sys-color-primary-container: #ffedd5; --md-sys-color-on-primary-container: #7c2d12; --md-sys-color-secondary: #b45309; --md-sys-color-surface: #fffbf7; --md-sys-color-on-surface: #292018; --md-sys-color-surface-variant: #faeee2; --md-sys-color-on-surface-variant: #6b5d4f; --md-sys-color-surface-container: #faf5ef; --md-sys-color-surface-container-highest: #efe4d8; --md-sys-color-outline: #d6c7b8; --md-sys-color-outline-variant: #ece0d3; --md-sys-color-background: #faf5ef; --md-sys-color-on-background: #292018; --md-sys-color-error: #b91c1c; --app-primary-hover: #9a3412; --app-grad-a: #c2410c; --app-grad-b: #b45309; } html[data-app-theme="t4"][data-bs-theme="dark"] { --md-sys-color-primary: #fb923c; --md-sys-color-on-primary: #431407; --md-sys-color-primary-container: #9a3412; --md-sys-color-on-primary-container: #ffedd5; --md-sys-color-secondary: #fbbf24; --md-sys-color-surface: #201812; --md-sys-color-on-surface: #ece1d5; --md-sys-color-surface-variant: #2c221a; --md-sys-color-on-surface-variant: #c0ab97; --md-sys-color-surface-container: #281e16; --md-sys-color-surface-container-highest: #3d2f23; --md-sys-color-outline: #66513e; --md-sys-color-outline-variant: #38291d; --md-sys-color-background: #1a130e; --md-sys-color-on-background: #ece1d5; --md-sys-color-error: #f87171; --app-primary-hover: #fdba74; --app-grad-a: #fb923c; --app-grad-b: #fbbf24; } html[data-app-theme="t4"] .sidebar-nav-link.active { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); border-left-color: var(--md-sys-color-on-primary-container); } /* (0,4,1) — outranks the per-icon rules below without !important. */ html[data-app-theme="t4"] .sidebar-nav-link.active .bi { color: var(--md-sys-color-on-primary); } html[data-app-theme="t4"] .sidebar-nav-link .bi-speedometer2 { color: #ea580c; } html[data-app-theme="t4"] .sidebar-nav-link .bi-people { color: #b45309; } html[data-app-theme="t4"] .sidebar-nav-link .bi-building { color: #c2410c; } html[data-app-theme="t4"] .sidebar-nav-link .bi-key { color: #ca8a04; } html[data-app-theme="t4"] .sidebar-nav-link .bi-palette { color: #be185d; } html[data-app-theme="t4"] .sidebar-nav-link .bi-database-gear { color: #0f766e; } html[data-app-theme="t4"][data-bs-theme="dark"] .sidebar-nav-link .bi-speedometer2 { color: #fb923c; } html[data-app-theme="t4"][data-bs-theme="dark"] .sidebar-nav-link .bi-people { color: #fbbf24; } html[data-app-theme="t4"][data-bs-theme="dark"] .sidebar-nav-link .bi-building { color: #fb923c; } html[data-app-theme="t4"][data-bs-theme="dark"] .sidebar-nav-link .bi-key { color: #facc15; } html[data-app-theme="t4"][data-bs-theme="dark"] .sidebar-nav-link .bi-palette { color: #f472b6; } html[data-app-theme="t4"][data-bs-theme="dark"] .sidebar-nav-link .bi-database-gear { color: #2dd4bf; } /* ========================================================================== t5 — Grafite: tinta-sobre-branco, sem sombras, raios menores ========================================================================== */ html[data-app-theme="t5"] { --md-sys-color-primary: #0f172a; --md-sys-color-on-primary: #ffffff; --md-sys-color-primary-container: #e2e8f0; --md-sys-color-on-primary-container: #0f172a; --md-sys-color-secondary: #475569; --md-sys-color-surface: #ffffff; --md-sys-color-on-surface: #0f172a; --md-sys-color-surface-variant: #f1f5f9; --md-sys-color-on-surface-variant: #475569; --md-sys-color-surface-container: #f8fafc; --md-sys-color-surface-container-highest: #e2e8f0; --md-sys-color-outline: #94a3b8; --md-sys-color-outline-variant: #e2e8f0; --md-sys-color-background: #ffffff; --md-sys-color-on-background: #0f172a; --md-sys-color-error: #dc2626; --app-primary-hover: #1e293b; --app-grad-a: #0f172a; --app-grad-b: #334155; /* Shape tokens are mode-independent — set once here for both modes. */ --md-sys-shape-corner-small: 4px; --md-sys-shape-corner-medium: 6px; --md-sys-shape-corner-large: 8px; } html[data-app-theme="t5"][data-bs-theme="dark"] { --md-sys-color-primary: #e2e8f0; --md-sys-color-on-primary: #0f172a; --md-sys-color-primary-container: #334155; --md-sys-color-on-primary-container: #f1f5f9; --md-sys-color-secondary: #94a3b8; --md-sys-color-surface: #0e1116; --md-sys-color-on-surface: #e5e7eb; --md-sys-color-surface-variant: #161b22; --md-sys-color-on-surface-variant: #9ca3af; --md-sys-color-surface-container: #11151b; --md-sys-color-surface-container-highest: #1f2937; --md-sys-color-outline: #4b5563; --md-sys-color-outline-variant: #1f2937; --md-sys-color-background: #0a0d11; --md-sys-color-on-background: #e5e7eb; --md-sys-color-error: #f87171; --app-primary-hover: #cbd5e1; --app-grad-a: #e2e8f0; --app-grad-b: #94a3b8; } html[data-app-theme="t5"] .card, html[data-app-theme="t5"] .stat-card, html[data-app-theme="t5"] .app-navbar { box-shadow: none; } html[data-app-theme="t5"] .sidebar-nav-link.active { background: transparent; color: var(--md-sys-color-on-surface); border-left: 2px solid var(--md-sys-color-on-surface); font-weight: 600; } html[data-app-theme="t5"] .sidebar-nav-link .bi-speedometer2 { color: #2563eb; } html[data-app-theme="t5"] .sidebar-nav-link .bi-people { color: #db2777; } html[data-app-theme="t5"] .sidebar-nav-link .bi-building { color: #0f766e; } html[data-app-theme="t5"] .sidebar-nav-link .bi-key { color: #d97706; } html[data-app-theme="t5"] .sidebar-nav-link .bi-palette { color: #9333ea; } html[data-app-theme="t5"] .sidebar-nav-link .bi-database-gear { color: #059669; } html[data-app-theme="t5"][data-bs-theme="dark"] .sidebar-nav-link .bi-speedometer2 { color: #60a5fa; } html[data-app-theme="t5"][data-bs-theme="dark"] .sidebar-nav-link .bi-people { color: #f472b6; } html[data-app-theme="t5"][data-bs-theme="dark"] .sidebar-nav-link .bi-building { color: #2dd4bf; } html[data-app-theme="t5"][data-bs-theme="dark"] .sidebar-nav-link .bi-key { color: #fbbf24; } html[data-app-theme="t5"][data-bs-theme="dark"] .sidebar-nav-link .bi-palette { color: #c084fc; } html[data-app-theme="t5"][data-bs-theme="dark"] .sidebar-nav-link .bi-database-gear { color: #34d399; }