/* * SSND Shared Theme — design tokens for all SSND apps * * Usage: * * * Provides: * - Light mode CSS variables (:root) * - Dark mode CSS variables (html[data-theme="dark"]) * - Base scrollbar styling * - ::selection colour * * Dark mode toggled by setting data-theme="dark" on . * Per-app overrides: redefine any variable in your own stylesheet after this one. * * Brand colours (for reference in app stylesheets): * Primary purple : #5729DB * Navy : #003177 * Accent orange : #F5A623 * Header gradient: linear-gradient(135deg, #003177, #5729DB) */ /* --- Light mode (default) --- */ :root { /* Surfaces */ --bg: #f7f8fc; /* page background — cool blue-grey tint */ --bg-secondary: #eaecf5; /* tabs bar, controls bar, card headers */ --input-bg: #fff; --scrollbar-bg: #f7f8fc; --stripe-bg: rgba(0,0,50,0.03); /* Text */ --text: #1a1d2e; --text-muted: #555970; --text-faint: #8b90a8; --input-text: #1a1d2e; /* Borders */ --border: #d4d8ea; --border-subtle:#e4e7f2; --border-input: #c4c9de; /* Interactive */ --hover-bg: #dde1f5; /* Brand accents */ --accent-orange: #F5A623; --pipe-color: #9333ea; /* separator pipes in tables */ --admin-badge: #9333ea; /* (a)/(m) admin indicators */ } /* --- Dark mode --- */ html[data-theme="dark"] { /* Surfaces */ --bg: #121417; --bg-secondary: #1a1d22; --input-bg: #252930; --scrollbar-bg: #121417; --stripe-bg: rgba(255,255,255,0.025); /* Text */ --text: #e8eaed; --text-muted: #8892a4; --text-faint: #636e7e; --input-text: #e8eaed; /* Borders */ --border: #2e3238; --border-subtle:#2e3238; --border-input: #3a3f4a; /* Interactive */ --hover-bg: #1e2a3a; /* Brand accents */ --accent-orange: #F5A623; --pipe-color: #F5A623; /* orange on dark for contrast */ --admin-badge: #F5A623; } /* --- Scrollbar --- */ ::-webkit-scrollbar { width: 14px; } ::-webkit-scrollbar-track { background: var(--scrollbar-bg); } ::-webkit-scrollbar-thumb { border: 4px solid var(--scrollbar-bg); border-radius: 20px; background-color: #5729DB; } /* --- Selection --- */ ::selection { background: #5729DB; color: #fff; }