42a901f39c
- Replace top header with left sidebar navigation - Sidebar shows module-aware nav items filtered by /api/modules - Collapsible: expanded shows icon+label, collapsed shows icon only - Toggle with Ctrl+J or collapse button, state persisted in localStorage - Keyboard navigable: Arrow Up/Down, Enter to navigate, Escape to collapse - Bottom section: density toggle, user info with role badge, logout - Add useModules hook for fetching module state - Add sidebar density variables to theme.css Closes #113, closes #114
108 lines
2.7 KiB
CSS
108 lines
2.7 KiB
CSS
/* Catppuccin Mocha Theme */
|
|
:root {
|
|
--ctp-rosewater: #f5e0dc;
|
|
--ctp-flamingo: #f2cdcd;
|
|
--ctp-pink: #f5c2e7;
|
|
--ctp-mauve: #cba6f7;
|
|
--ctp-red: #f38ba8;
|
|
--ctp-maroon: #eba0ac;
|
|
--ctp-peach: #fab387;
|
|
--ctp-yellow: #f9e2af;
|
|
--ctp-green: #a6e3a1;
|
|
--ctp-teal: #94e2d5;
|
|
--ctp-sky: #89dceb;
|
|
--ctp-sapphire: #74c7ec;
|
|
--ctp-blue: #89b4fa;
|
|
--ctp-lavender: #b4befe;
|
|
--ctp-text: #cdd6f4;
|
|
--ctp-subtext1: #bac2de;
|
|
--ctp-subtext0: #a6adc8;
|
|
--ctp-overlay2: #9399b2;
|
|
--ctp-overlay1: #7f849c;
|
|
--ctp-overlay0: #6c7086;
|
|
--ctp-surface2: #585b70;
|
|
--ctp-surface1: #45475a;
|
|
--ctp-surface0: #313244;
|
|
--ctp-base: #1e1e2e;
|
|
--ctp-mantle: #181825;
|
|
--ctp-crust: #11111b;
|
|
}
|
|
|
|
/* ── Font scale ── */
|
|
:root {
|
|
--font-title: 1.1rem; /* page titles */
|
|
--font-body: 0.8125rem; /* 13px — body text, breadcrumbs */
|
|
--font-table: 0.75rem; /* 12px — table cells, inputs, buttons */
|
|
--font-sm: 0.6875rem; /* 11px — section headers, labels, captions */
|
|
--font-xs: 0.625rem; /* 10px — badges (minimum) */
|
|
}
|
|
|
|
/* ── Density: comfortable (default) ── */
|
|
[data-density="comfortable"],
|
|
:root {
|
|
--d-header-py: 0.625rem;
|
|
--d-header-px: 2rem;
|
|
--d-header-logo: 1.25rem;
|
|
--d-nav-gap: 1rem;
|
|
--d-nav-py: 0.25rem;
|
|
--d-nav-px: 0.75rem;
|
|
--d-nav-radius: 0.5rem;
|
|
--d-user-gap: 0.5rem;
|
|
--d-user-font: var(--font-body);
|
|
|
|
--d-th-py: 0.25rem;
|
|
--d-th-px: 0.75rem;
|
|
--d-th-font: var(--font-table);
|
|
--d-td-py: 0.25rem;
|
|
--d-td-px: 0.75rem;
|
|
--d-td-font: var(--font-body);
|
|
|
|
--d-toolbar-gap: 0.5rem;
|
|
--d-toolbar-py: 0.5rem;
|
|
--d-toolbar-mb: 0.25rem;
|
|
--d-input-py: 0.25rem;
|
|
--d-input-px: 0.5rem;
|
|
--d-input-font: var(--font-body);
|
|
|
|
--d-footer-h: 28px;
|
|
--d-footer-font: var(--font-table);
|
|
--d-footer-px: 2rem;
|
|
|
|
--d-sidebar-w: 220px;
|
|
--d-sidebar-collapsed: 48px;
|
|
}
|
|
|
|
/* ── Density: compact ── */
|
|
[data-density="compact"] {
|
|
--d-header-py: 0.25rem;
|
|
--d-header-px: 1.25rem;
|
|
--d-header-logo: 1.1rem;
|
|
--d-nav-gap: 0.5rem;
|
|
--d-nav-py: 0.25rem;
|
|
--d-nav-px: 0.5rem;
|
|
--d-nav-radius: 0.25rem;
|
|
--d-user-gap: 0.25rem;
|
|
--d-user-font: var(--font-table);
|
|
|
|
--d-th-py: 0.25rem;
|
|
--d-th-px: 0.5rem;
|
|
--d-th-font: var(--font-sm);
|
|
--d-td-py: 0.25rem;
|
|
--d-td-px: 0.5rem;
|
|
--d-td-font: var(--font-table);
|
|
|
|
--d-toolbar-gap: 0.25rem;
|
|
--d-toolbar-py: 0.25rem;
|
|
--d-toolbar-mb: 0.25rem;
|
|
--d-input-py: 0.25rem;
|
|
--d-input-px: 0.5rem;
|
|
--d-input-font: var(--font-table);
|
|
|
|
--d-footer-h: 24px;
|
|
--d-footer-font: var(--font-sm);
|
|
--d-footer-px: 1.25rem;
|
|
|
|
--d-sidebar-w: 180px;
|
|
--d-sidebar-collapsed: 40px;
|
|
}
|