/** * Evenia Project Manager - Sistema de Temes * Dos temes: Dashboard (blau fosc) i Evenia (taronja) * Usat amb classe al : theme-dashboard (defecte) o theme-evenia */ /* ============================================ TEMA DASHBOARD (blau fosc) - Per defecte ============================================ */ :root, body.theme-dashboard { /* Sidebar */ --sb-bg: #1e1e2d; --sb-head: #000; --sb-body: #2a2a3d; --sb-text: #ccc; --sb-text-active: #fff; --sb-muted: #777; --sb-hover: rgba(255, 255, 255, 0.07); --sb-sep: rgba(255, 255, 255, 0.1); --sb-sub: rgba(0, 0, 0, 0.2); --sb-section: rgba(255, 255, 255, 0.05); /* Accent */ --accent: #4285f4; --accent-hover: #3367d6; --accent-focus: rgba(66, 133, 244, 0.2); /* Content */ --bg: #f4f6f9; --card: #fff; --text: #333; --muted: #6c757d; /* Navbar */ --nav-bg: #fff; --nav-border: #dee2e6; /* Login */ --login-bg: #2a2a3d; --login-btn: #4285f4; --login-btn-hover: #3367d6; --login-focus: rgba(66, 133, 244, 0.2); --login-status-bg: #e8f0fe; --login-status-color: #1a73e8; /* Font */ --font: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } /* ============================================ TEMA EVENIA (taronja / fosc sidebar) ============================================ */ body.theme-evenia { /* Sidebar */ --sb-bg: #2e2e2e; --sb-head: #000; --sb-body: #3a3a3a; --sb-text: #ccc; --sb-text-active: #fff; --sb-muted: #888; --sb-hover: rgba(255, 139, 44, 0.1); --sb-sep: rgba(255, 255, 255, 0.08); --sb-sub: rgba(0, 0, 0, 0.2); --sb-section: rgba(255, 255, 255, 0.04); /* Accent */ --accent: #ff8b2c; --accent-hover: #e67a1f; --accent-focus: rgba(255, 139, 44, 0.2); /* Content */ --bg: #f8f9fa; --card: #fff; --text: #404040; --muted: #6c757d; /* Navbar */ --nav-bg: #fff; --nav-border: #dee2e6; /* Login */ --login-bg: #3a3a3a; --login-btn: #ff8b2c; --login-btn-hover: #e67a1f; --login-focus: rgba(255, 139, 44, 0.2); --login-status-bg: #fff3e0; --login-status-color: #e65100; } /* ============================================ THEME TOGGLE WIDGET (navbar) ============================================ */ .theme-toggle { display: flex; gap: 2px; background: #f0f0f0; border-radius: 6px; padding: 2px; } .theme-toggle button { border: none; padding: 4px 9px; border-radius: 5px; font-size: 0.7rem; cursor: pointer; background: transparent; color: var(--muted); transition: background 0.2s, color 0.2s; } .theme-toggle button.active { background: var(--accent); color: #fff; } /* ============================================ GLOBAL OVERRIDES PER TEMES ============================================ */ /* Accent color on primary buttons */ .btn-primary, .bg-primary { background-color: var(--accent) !important; border-color: var(--accent) !important; } .btn-primary:hover, .btn-primary:focus { background-color: var(--accent-hover) !important; border-color: var(--accent-hover) !important; } /* Outline variant */ .btn-outline-primary { color: var(--accent) !important; border-color: var(--accent) !important; } .btn-outline-primary:hover { background-color: var(--accent) !important; color: #fff !important; } /* Text accent */ .text-primary { color: var(--accent) !important; } /* Progress bar */ .progress-bar.bg-primary { background-color: var(--accent) !important; } /* ============================================ THEME INIT SCRIPT (inline in templates) ============================================ Usage in or before body content: */