/** * WSC Suite — Theme definitions. * * Every theme is a set of CSS custom property overrides scoped to * [data-theme="name"] on the element. The base token values * live in app.css :root — these blocks only override what changes. * * No JavaScript, no extra HTTP round-trips at runtime. The data-theme * attribute is set server-side in the layout template from the user's * saved setting, so there is no flash-of-wrong-theme. * * @file assets/css/themes.css * @package WSC_App * @version 1.0.0 */ /* ── Midnight (dark mode) ────────────────────────────────────────── Deep dark background, electric blue accents, high contrast text. Designed for low-light environments and extended evening work. ──────────────────────────────────────────────────────────────────── */ [data-theme="midnight"] { --color-bg: #0d1117; --color-bg-card: #161b22; --color-border: #30363d; --color-text: #e6edf3; --color-text-muted: #8b949e; --color-brand: #58a6ff; --color-brand-dark: #388bfd; --color-brand-light: #1c2d3f; --color-success: #3fb950; --color-success-bg: #0f2b1a; --color-danger: #f85149; --color-danger-bg: #2c1518; --color-warning: #d29922; --color-warning-bg: #2d2000; --color-sidebar-bg: #010409; --color-sidebar-text: #8b949e; --color-sidebar-hover:#161b22; --color-sidebar-active:#58a6ff; --shadow-sm: 0 1px 0 rgba(0,0,0,.3); --shadow: 0 1px 3px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.3); } [data-theme="midnight"] .data-table tbody tr:hover { background: #1c2128; } [data-theme="midnight"] th { background: #1c2128; } [data-theme="midnight"] .tbl-bar, [data-theme="midnight"] .card-head { background: #161b22; } [data-theme="midnight"] .field input, [data-theme="midnight"] .field select, [data-theme="midnight"] .field textarea, [data-theme="midnight"] .inp, [data-theme="midnight"] .sel { background: #0d1117; border-color: #30363d; color: #e6edf3; } [data-theme="midnight"] .field input:focus, [data-theme="midnight"] .field select:focus, [data-theme="midnight"] .field textarea:focus, [data-theme="midnight"] .inp:focus, [data-theme="midnight"] .sel:focus { border-color: #58a6ff; box-shadow: 0 0 0 3px rgba(88,166,255,.15); } [data-theme="midnight"] .btn-secondary { background: #21262d; border-color: #30363d; color: #e6edf3; } [data-theme="midnight"] .btn-secondary:hover { background: #30363d; } [data-theme="midnight"] .badge-draft { background: #21262d; color: #8b949e; } [data-theme="midnight"] .badge-sent { background: #1c2d3f; color: #58a6ff; } [data-theme="midnight"] .badge-paid { background: #0f2b1a; color: #3fb950; } [data-theme="midnight"] .badge-overdue { background: #2c1518; color: #f85149; } [data-theme="midnight"] .badge-partial { background: #2d2000; color: #d29922; } [data-theme="midnight"] .stat-card { background: #161b22; } [data-theme="midnight"] .auth-page { background: #010409; } [data-theme="midnight"] .auth-card { background: #161b22; border-color: #30363d; } /* ── Ocean ───────────────────────────────────────────────────────── Sky-blue brand, light blue-tinted surfaces, teal sidebar. Professional, fresh, good for finance/accounting contexts. ──────────────────────────────────────────────────────────────────── */ [data-theme="ocean"] { --color-bg: #f0f9ff; --color-bg-card: #ffffff; --color-border: #bae6fd; --color-brand: #0284c7; --color-brand-dark: #0369a1; --color-brand-light: #e0f2fe; --color-text: #0c4a6e; --color-text-muted: #64748b; --color-success: #059669; --color-success-bg: #ecfdf5; --color-danger: #dc2626; --color-danger-bg: #fef2f2; --color-sidebar-bg: #0c4a6e; --color-sidebar-text: #7dd3fc; --color-sidebar-hover:#075985; --color-sidebar-active:#38bdf8; } [data-theme="ocean"] th { background: #e0f2fe; } [data-theme="ocean"] .tbl-bar { background: #f0f9ff; } [data-theme="ocean"] .badge-sent { background: #e0f2fe; color: #0284c7; } [data-theme="ocean"] .badge-paid { background: #ecfdf5; color: #059669; } [data-theme="ocean"] .stat-card { border-color: #bae6fd; } /* ── Sage ────────────────────────────────────────────────────────── Calm green palette. Easy on the eyes, good for long sessions. Sidebar feels grounded and natural. ──────────────────────────────────────────────────────────────────── */ [data-theme="sage"] { --color-bg: #f0fdf4; --color-bg-card: #ffffff; --color-border: #bbf7d0; --color-brand: #16a34a; --color-brand-dark: #15803d; --color-brand-light: #dcfce7; --color-text: #14532d; --color-text-muted: #64748b; --color-success: #15803d; --color-success-bg: #dcfce7; --color-sidebar-bg: #14532d; --color-sidebar-text: #86efac; --color-sidebar-hover:#166534; --color-sidebar-active:#4ade80; } [data-theme="sage"] th { background: #dcfce7; } [data-theme="sage"] .tbl-bar { background: #f0fdf4; } [data-theme="sage"] .badge-paid { background: #dcfce7; color: #15803d; } [data-theme="sage"] .badge-sent { background: #dbeafe; color: #1d4ed8; } /* ── Slate ───────────────────────────────────────────────────────── Neutral blue-grey. No strong colour bias, works well in corporate environments where the brand has its own colour. ──────────────────────────────────────────────────────────────────── */ [data-theme="slate"] { --color-bg: #f8fafc; --color-bg-card: #ffffff; --color-border: #e2e8f0; --color-brand: #475569; --color-brand-dark: #334155; --color-brand-light: #f1f5f9; --color-text: #0f172a; --color-text-muted: #64748b; --color-success: #059669; --color-success-bg: #ecfdf5; --color-danger: #dc2626; --color-danger-bg: #fef2f2; --color-sidebar-bg: #1e293b; --color-sidebar-text: #94a3b8; --color-sidebar-hover:#334155; --color-sidebar-active:#94a3b8; } [data-theme="slate"] .sidebar-link.is-active { border-left-color: #94a3b8; } [data-theme="slate"] th { background: #f1f5f9; } [data-theme="slate"] .tbl-bar { background: #f8fafc; } [data-theme="slate"] .badge-sent { background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0; } /* ── Rose ────────────────────────────────────────────────────────── Bold rose/pink brand. Distinctive, high energy. Works well for creative agencies or lifestyle businesses. ──────────────────────────────────────────────────────────────────── */ [data-theme="rose"] { --color-bg: #fff1f2; --color-bg-card: #ffffff; --color-border: #fecdd3; --color-brand: #e11d48; --color-brand-dark: #be123c; --color-brand-light: #ffe4e6; --color-text: #881337; --color-text-muted: #64748b; --color-success: #059669; --color-success-bg: #ecfdf5; --color-danger: #9f1239; --color-danger-bg: #ffe4e6; --color-sidebar-bg: #881337; --color-sidebar-text: #fda4af; --color-sidebar-hover:#9f1239; --color-sidebar-active:#fb7185; } [data-theme="rose"] th { background: #ffe4e6; } [data-theme="rose"] .tbl-bar { background: #fff1f2; } [data-theme="rose"] .badge-sent { background: #ffe4e6; color: #e11d48; } [data-theme="rose"] .badge-paid { background: #ecfdf5; color: #059669; } [data-theme="rose"] .badge-overdue { background: #ffe4e6; color: #9f1239; } /* ── Print — force light theme for printing regardless of selection ─ */ @media print { html, [data-theme] { --color-bg: #fff; --color-bg-card: #fff; --color-border: #ccc; --color-text: #000; --color-text-muted: #555; --color-sidebar-bg: #fff; } .sidebar { display: none !important; } .main { margin-left: 0 !important; } .topbar { position: static !important; box-shadow: none !important; } }