/* NE20 control panel (server-rendered). Light + dark themes on CSS vars. Default follows the system (prefers-color-scheme); an explicit choice is applied via data-theme on (set pre-paint + by the topbar toggle). Served at GET /admin/static/app.css. */ /* Theme-independent brand tokens. */ :root { --accent: #3b82f6; --accent-dim: rgba(59,130,246,.14); --amber: #f5a623; --green: #22c55e; --red: #ef4444; --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; } /* LIGHT neutrals (default; also when forced via data-theme="light"). */ :root:not([data-theme="dark"]) { --bg: #ffffff; --side: #f7f8fa; --card: #f7f8fa; --card2: #eceef2; --border: #e3e5ea; --border2: #d6d9e0; --text: #0a0a0c; --muted: #5b6270; --dim: #8a8f99; --accent-hover: #2563eb; --hover: #eef0f3; --topbar-bg: rgba(255,255,255,.8); } /* DARK neutrals — auto (system dark, no explicit choice). */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0a0a0c; --side: #0c0d10; --card: #131419; --card2: #1a1c22; --border: #23252c; --border2: #2c2e36; --text: #f3f4f6; --muted: #8b909b; --dim: #62666f; --accent-hover: #5b97f7; --hover: #16171c; --topbar-bg: rgba(10,10,12,.85); } } /* DARK neutrals — forced via data-theme="dark". */ [data-theme="dark"] { --bg: #0a0a0c; --side: #0c0d10; --card: #131419; --card2: #1a1c22; --border: #23252c; --border2: #2c2e36; --text: #f3f4f6; --muted: #8b909b; --dim: #62666f; --accent-hover: #5b97f7; --hover: #16171c; --topbar-bg: rgba(10,10,12,.85); } /* Theme bridge: map Pico v2's vars onto the NE20 vars. The NE20 vars carry the actual light/dark values, so the mapping itself is theme-independent. The two selectors are exhaustive (dark vs not-dark) and mirror Pico's specificity, so our values win in every theme context (app.css loads after pico.css). */ :root:not([data-theme="dark"]), [data-theme="dark"] { --pico-background-color: var(--bg); --pico-color: var(--text); --pico-h1-color: var(--text); --pico-h2-color: var(--text); --pico-h3-color: var(--text); --pico-h4-color: var(--text); --pico-h5-color: var(--text); --pico-h6-color: var(--text); --pico-muted-color: var(--muted); --pico-muted-border-color: var(--border); --pico-border-color: var(--border); --pico-primary: var(--accent); --pico-primary-background: var(--accent); --pico-primary-border: var(--accent); --pico-primary-hover: var(--accent-hover); --pico-primary-hover-background: var(--accent-hover); --pico-primary-hover-border: var(--accent-hover); --pico-primary-inverse: #fff; --pico-primary-focus: var(--accent-dim); --pico-card-background-color: var(--card); --pico-card-border-color: var(--border); --pico-card-sectioning-background-color: var(--card2); --pico-code-background-color: var(--card2); --pico-code-color: var(--muted); --pico-table-border-color: var(--border); --pico-table-row-stripped-background-color: rgba(111, 120, 135, 0.04); --pico-form-element-background-color: var(--card2); --pico-form-element-selected-background-color: var(--border2); --pico-form-element-border-color: var(--border2); --pico-form-element-color: var(--text); --pico-form-element-placeholder-color: var(--dim); --pico-form-element-active-background-color: var(--card2); --pico-form-element-active-border-color: var(--accent); --pico-form-element-focus-color: var(--accent); --pico-form-element-invalid-border-color: rgba(239, 68, 68, .5); --pico-form-element-invalid-active-border-color: var(--red); --pico-form-element-valid-border-color: rgba(34, 197, 94, .5); --pico-form-element-valid-active-border-color: var(--green); --pico-switch-checked-background-color: var(--accent); --pico-dropdown-background-color: var(--card2); --pico-dropdown-border-color: var(--border2); --pico-dropdown-hover-background-color: var(--card); --pico-progress-color: var(--accent); } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } a { color: inherit; } .app { display: flex; min-height: 100vh; } /* ---- Sidebar ---- */ .sidebar { width: 232px; flex: 0 0 232px; background: var(--side); border-right: 1px solid var(--border); padding: 16px 12px; position: sticky; top: 0; height: 100vh; } .brand { display: flex; align-items: center; gap: 11px; padding: 6px 8px 18px; text-decoration: none; } .brand .logo { width: 38px; height: 38px; border-radius: 10px; object-fit: cover; display: block; flex: none; box-shadow: 0 0 0 1px rgba(59,130,246,.25); } .brand .name { font-weight: 700; font-size: 16px; line-height: 1.1; color: var(--text); } .brand .sub { color: var(--muted); font-size: 12px; } .nav-label { color: var(--dim); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; padding: 12px 10px 6px; } /* Pico styles