/* ============================================================ CKS Supplier Portal — Themes & Templates ------------------------------------------------------------ Driven by attributes on : data-template = violet | emerald | ocean | amber | rose data-theme = light | dark (resolved; "auto" handled in JS) data-bs-theme = light | dark (Bootstrap native dark mode) style.css defines the LIGHT base via :root. Here we: • derive every accent from a single --brand token (templates) • override neutrals/surfaces for dark mode • style the appearance picker panel ============================================================ */ /* ── color-scheme (native controls: scrollbars, selects) ── */ :root { color-scheme: light; } [data-theme="dark"] { color-scheme: dark; } /* ── Brand base: one accent token, everything derives ────── Applies to the default (violet) template and every other. Templates below only change --brand. */ :root, [data-template] { --brand: #6E56CF; --violet: var(--brand); --violet-dark: color-mix(in srgb, var(--brand) 78%, black); --violet-light: color-mix(in srgb, var(--brand) 82%, white); --violet-tint: color-mix(in srgb, var(--brand) 7%, transparent); --violet-soft: color-mix(in srgb, var(--brand) 13%, transparent); --violet-dim: color-mix(in srgb, var(--brand) 9%, transparent); /* Sidebar accents follow the brand so every template feels cohesive */ --sidebar-hover-bg: color-mix(in srgb, var(--brand) 6%, transparent); --sidebar-active-bg: color-mix(in srgb, var(--brand) 12%, transparent); --sidebar-active-txt: color-mix(in srgb, var(--brand) 52%, black); } /* ── Templates: just recolor --brand ─────────────────────── */ [data-template="emerald"] { --brand: #059669; } [data-template="ocean"] { --brand: #3B82F6; } [data-template="amber"] { --brand: #D97706; } [data-template="rose"] { --brand: #E11D48; } /* ── DARK THEME: neutral + surface overrides ─────────────── */ [data-theme="dark"] { --sidebar-bg: #0F1218; --sidebar-border: rgba(255,255,255,0.08); --sidebar-text: #9AA3B2; --sidebar-hover-bg: rgba(255,255,255,0.05); --sidebar-active-bg: color-mix(in srgb, var(--brand) 16%, transparent); --sidebar-active-txt: color-mix(in srgb, var(--brand) 62%, white); --body-bg: #0A0C10; --card-bg: #14171F; --card-border: rgba(255,255,255,0.09); --card-shadow: 0 1px 2px rgba(0,0,0,0.5), 0 4px 14px rgba(0,0,0,0.4); --card-shadow-hover: 0 2px 6px rgba(0,0,0,0.6), 0 10px 30px rgba(0,0,0,0.5); --text-primary: #E6E9EF; --text-secondary: #C2C8D2; --text-muted: #8A92A2; --border: rgba(255,255,255,0.10); --success: #34D399; --success-bg: rgba(16,185,129,0.12); --success-bdr: rgba(16,185,129,0.40); --warning: #FBBF24; --warning-bg: rgba(245,158,11,0.12); --warning-bdr: rgba(245,158,11,0.40); --danger: #F87171; --danger-bg: rgba(239,68,68,0.12); --danger-bdr: rgba(239,68,68,0.40); --info: #60A5FA; --info-bg: rgba(59,130,246,0.12); --info-bdr: rgba(59,130,246,0.40); } /* ── DARK THEME: hardcoded-light classes in style.css ────── */ [data-theme="dark"] .form-control[readonly], [data-theme="dark"] .form-control:disabled { background: #1B1F29; color: var(--text-muted); } [data-theme="dark"] .input-group-text { background: #1B1F29; border-color: var(--border); color: var(--text-muted); } [data-theme="dark"] .item-table th { background: #1B1F29; } [data-theme="dark"] .item-table td { color: var(--text-primary); } [data-theme="dark"] .table-light th { background: #1B1F29 !important; } [data-theme="dark"] .table-light td { color: var(--text-primary); } [data-theme="dark"] .outlet-check { background: #1B1F29; } [data-theme="dark"] code { background: #1E222C; color: var(--violet); border-color: rgba(255,255,255,0.10); } [data-theme="dark"] .login-page-bg { background: #0A0C10; } [data-theme="dark"] .login-card { background: var(--card-bg); border-color: var(--card-border); } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--brand) 45%, transparent); } /* ── DARK THEME: one-time terms overlay (inline styles) ──── */ [data-theme="dark"] #termsOverlay { background: rgba(0,0,0,0.72) !important; } [data-theme="dark"] #termsOverlay [style*="background:#fff"] { background: var(--card-bg) !important; } [data-theme="dark"] #termsOverlay [style*="background:#FAFAFA"] { background: var(--body-bg) !important; } [data-theme="dark"] #termsOverlay [style*="color:#111827"] { color: var(--text-primary) !important; } [data-theme="dark"] #termsOverlay [style*="color:#4B5563"] { color: var(--text-secondary) !important; } [data-theme="dark"] #termsOverlay [style*="color:#6B7280"] { color: var(--text-muted) !important; } /* ============================================================ APPEARANCE PICKER PANEL ============================================================ */ #themeBackdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 2000; opacity: 0; pointer-events: none; transition: opacity .2s; } #themeBackdrop.show { opacity: 1; pointer-events: auto; } #themePanel { position: fixed; right: 20px; bottom: 20px; width: 330px; max-width: calc(100vw - 24px); background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 16px; box-shadow: 0 24px 70px rgba(0,0,0,0.45); z-index: 2001; padding: 18px 18px 16px; font-family: var(--font-body); color: var(--text-primary); transform: translateY(14px) scale(.98); opacity: 0; pointer-events: none; transition: transform .22s cubic-bezier(.22,1,.36,1), opacity .22s; } #themePanel.show { transform: none; opacity: 1; pointer-events: auto; } .theme-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .theme-panel-head > span { font-family: var(--font-display); font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 8px; } .theme-panel-head .bi { color: var(--violet); } .theme-close { background: none; border: none; font-size: 20px; line-height: 1; color: var(--text-muted); cursor: pointer; padding: 0 4px; } .theme-close:hover { color: var(--text-primary); } .theme-section-label { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); margin: 6px 0 9px; } .tpl-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; } .tpl-swatch { display: flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 99px; border: 1px solid var(--border); background: transparent; color: var(--text-secondary); font-family: var(--font-body); font-size: 12px; font-weight: 600; cursor: pointer; transition: all .15s; } .tpl-swatch:hover { border-color: var(--sw); color: var(--text-primary); } .tpl-swatch .tpl-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--sw); box-shadow: 0 0 0 2px color-mix(in srgb, var(--sw) 25%, transparent); } .tpl-swatch.active { border-color: var(--sw); color: var(--text-primary); background: color-mix(in srgb, var(--sw) 12%, transparent); box-shadow: 0 0 0 1px var(--sw) inset; } .theme-opt-row { display: flex; gap: 8px; } .theme-opt { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 8px; border-radius: 10px; border: 1px solid var(--border); background: transparent; color: var(--text-secondary); font-family: var(--font-body); font-size: 12px; font-weight: 600; cursor: pointer; transition: all .15s; } .theme-opt:hover { border-color: var(--violet); color: var(--text-primary); background: var(--violet-tint); } .theme-opt .bi { font-size: 14px; } .theme-opt.active { border-color: var(--violet); color: #fff; background: var(--violet); } .theme-opt.active .bi { color: #fff; } .theme-hint { font-size: 11px; color: var(--text-muted); margin: 10px 0 0; line-height: 1.5; } @media (max-width: 768px) { #themePanel { left: 12px; right: 12px; bottom: 12px; width: auto; max-width: none; } }