mirror of
https://github.com/mudler/LocalAI
synced 2026-05-24 09:28:23 +00:00
60549a8a60
Replace the universal max-width:1200px cap on .page with a four-tier archetype system (narrow 760, medium 1080, default 1600, wide unbounded) selected per page based on what its UX actually wants. Data/table pages fill ultrawide displays; forms cap at reading width; tabbed feature surfaces breathe. Mobile/tablet: - New 640/1024 breakpoint split. Tablets (640-1023) get a persistent 52px icon rail; below 640 keeps the slide-off drawer. - Drawer polish: body-scroll lock, Escape to close, focus moves into the drawer on open and back to the hamburger on close, aria-hidden + inert on main while open. - Mobile top bar carries hamburger + theme toggle + account avatar (44x44 touch targets) so theme/account aren't trapped in the drawer. - Page-level reflow on phones: page-header column-stacks, filter chips scroll horizontally, tables go edge-to-edge, OperationsBar overflows rather than wrapping. Honors prefers-reduced-motion. Manage > Models: drop the toggle column; Enable/Disable joins the per-row Actions menu alongside Stop/Pin/Edit/Logs/Delete for consistency with the other action verbs. Page-width tokens live in theme.css so future tuning is one line. Removes 7 inline maxWidth workarounds from page roots. Signed-off-by: Ettore Di Giacinto <[email protected]> Assisted-by: Claude Code:claude-opus-4-7 [Edit] [Bash]
257 lines
8.8 KiB
CSS
257 lines
8.8 KiB
CSS
/* LocalAI Theme — Nord palette (polar night + frost + aurora).
|
|
Adapted from claudemaster's Nord preset. Variable names preserved. */
|
|
:root,
|
|
[data-theme="dark"] {
|
|
/* Surfaces — deep blue-black, beyond polar night */
|
|
--color-bg-primary: #13171f; /* page — very dark, cool */
|
|
--color-bg-secondary: #1a1f2a; /* sidebar, headers, cards */
|
|
--color-bg-tertiary: #242a36; /* wells / sunken rows */
|
|
--color-bg-overlay: rgba(19, 23, 31, 0.92);
|
|
--color-bg-hover: #242a36;
|
|
|
|
--color-surface-raised: #1a1f2a;
|
|
--color-surface-sunken: #0e1117;
|
|
--color-surface-hover: #242a36;
|
|
--color-surface-elevated: #2f3644;
|
|
|
|
/* Primary — frost cyan (nord8) */
|
|
--color-primary: #88c0d0;
|
|
--color-primary-hover: #9ccbd9;
|
|
--color-primary-active: #7ab4c4;
|
|
--color-primary-text: #2e3440;
|
|
--color-primary-light: rgba(136, 192, 208, 0.14);
|
|
--color-primary-border: rgba(136, 192, 208, 0.34);
|
|
|
|
--color-secondary: #81a1c1; /* nord9 */
|
|
--color-secondary-hover: #8faed0;
|
|
--color-secondary-light: rgba(129, 161, 193, 0.12);
|
|
|
|
/* Accent alias — frost cyan remains the brand accent */
|
|
--color-accent: #88c0d0;
|
|
--color-accent-hover: #9ccbd9;
|
|
--color-accent-light: rgba(136, 192, 208, 0.14);
|
|
--color-accent-border: rgba(136, 192, 208, 0.34);
|
|
|
|
/* Text — snow storm scale */
|
|
--color-text-primary: #eceff4; /* nord6 */
|
|
--color-text-secondary: #d8dee9; /* nord4 */
|
|
--color-text-muted: #a1acb9;
|
|
--color-text-disabled: #6e7a8c;
|
|
--color-text-inverse: #2e3440;
|
|
|
|
/* Borders — cool blue-gray */
|
|
--color-border-subtle: rgba(216, 222, 233, 0.06);
|
|
--color-border-default: rgba(216, 222, 233, 0.12);
|
|
--color-border-strong: rgba(216, 222, 233, 0.24);
|
|
--color-border-divider: rgba(216, 222, 233, 0.05);
|
|
--color-border-primary: rgba(136, 192, 208, 0.45);
|
|
--color-border-focus: rgba(136, 192, 208, 0.45);
|
|
|
|
/* Status — aurora */
|
|
--color-success: #a3be8c; /* nord14 */
|
|
--color-success-light: rgba(163, 190, 140, 0.14);
|
|
--color-success-border: rgba(163, 190, 140, 0.32);
|
|
--color-warning: #ebcb8b; /* nord13 */
|
|
--color-warning-light: rgba(235, 203, 139, 0.14);
|
|
--color-warning-border: rgba(235, 203, 139, 0.32);
|
|
--color-error: #bf616a; /* nord11 */
|
|
--color-error-light: rgba(191, 97, 106, 0.14);
|
|
--color-error-border: rgba(191, 97, 106, 0.32);
|
|
--color-info: #81a1c1; /* nord9 */
|
|
--color-info-light: rgba(129, 161, 193, 0.14);
|
|
--color-info-border: rgba(129, 161, 193, 0.32);
|
|
|
|
--color-modal-backdrop: rgba(8, 11, 17, 0.68);
|
|
|
|
--color-focus-ring: rgba(136, 192, 208, 0.34);
|
|
|
|
/* Data viz — full aurora + frost palette */
|
|
--color-data-1: #88c0d0; /* frost cyan */
|
|
--color-data-2: #bf616a; /* red */
|
|
--color-data-3: #b48ead; /* purple */
|
|
--color-data-4: #ebcb8b; /* yellow */
|
|
--color-data-5: #a3be8c; /* green */
|
|
--color-data-6: #d08770; /* orange */
|
|
--color-data-7: #81a1c1; /* blue */
|
|
--color-data-8: #8fbcbb; /* teal */
|
|
|
|
/* Log streams — tuned to Nord aurora */
|
|
--color-log-stdout: #d8dee9;
|
|
--color-log-stderr: #bf616a;
|
|
--color-log-info: #88c0d0;
|
|
--color-log-warn: #ebcb8b;
|
|
|
|
/* Shadows — cool, deeper */
|
|
--shadow-subtle: 0 1px 2px rgba(0, 0, 0, 0.5);
|
|
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5), 0 4px 14px rgba(0, 0, 0, 0.45);
|
|
--shadow-md: 0 2px 8px rgba(0, 0, 0, 0.55), 0 20px 48px rgba(0, 0, 0, 0.65);
|
|
--shadow-lg: 0 2px 8px rgba(0, 0, 0, 0.6), 0 28px 64px rgba(0, 0, 0, 0.7);
|
|
--shadow-glow: var(--shadow-md);
|
|
--shadow-sidebar: 1px 0 0 rgba(216, 222, 233, 0.06);
|
|
|
|
--shadow-inset-top: inset 0 1px 0 rgba(255, 255, 255, 0.05);
|
|
--shadow-inset-hi: inset 0 1px 0 rgba(255, 255, 255, 0.18);
|
|
|
|
/* Motion */
|
|
--duration-fast: 120ms;
|
|
--duration-normal: 180ms;
|
|
--duration-slow: 260ms;
|
|
--ease-default: cubic-bezier(0.22, 1, 0.36, 1);
|
|
--ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
|
|
|
|
/* Spacing */
|
|
--spacing-xs: 0.25rem;
|
|
--spacing-sm: 0.5rem;
|
|
--spacing-md: 1rem;
|
|
--spacing-lg: 1.5rem;
|
|
--spacing-xl: 2rem;
|
|
--spacing-2xl: 3rem;
|
|
--spacing-3xl: 4rem;
|
|
|
|
/* Radii — sharp, editorial */
|
|
--radius-sm: 3px;
|
|
--radius-md: 5px;
|
|
--radius-lg: 8px;
|
|
--radius-xl: 10px;
|
|
--radius-full: 9999px;
|
|
|
|
/* Typography — Geist Variable + Geist Mono Variable */
|
|
--font-sans: "Geist", "Geist Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", ui-sans-serif, system-ui, sans-serif;
|
|
--font-mono: "Geist Mono", "Geist Mono Variable", ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
|
|
|
|
--text-xs: 0.6875rem;
|
|
--text-sm: 0.8125rem;
|
|
--text-base: 0.875rem;
|
|
--text-lg: 1rem;
|
|
--text-xl: 1.25rem;
|
|
--text-2xl: 1.625rem;
|
|
--text-3xl: 2rem;
|
|
--text-4xl: 2.5rem;
|
|
|
|
--font-weight-regular: 400;
|
|
--font-weight-medium: 500;
|
|
--font-weight-semibold: 600;
|
|
--font-weight-bold: 700;
|
|
|
|
--leading-tight: 1.2;
|
|
--leading-snug: 1.4;
|
|
--leading-normal: 1.55;
|
|
--leading-relaxed: 1.7;
|
|
|
|
--sidebar-width: 200px;
|
|
--sidebar-width-collapsed: 52px;
|
|
--color-toggle-off: #2f3644;
|
|
--color-toggle-on: var(--color-primary);
|
|
|
|
/* Page-width archetypes — applied via .page / .page--narrow /
|
|
.page--medium / .page--wide. Default is wide-enough for ops/data
|
|
tables; medium suits two-column app pages (sticky nav + form);
|
|
narrow caps reading width. */
|
|
--page-max-narrow: 760px;
|
|
--page-max-medium: 1080px;
|
|
--page-max-default: 1600px;
|
|
--page-max-wide: none;
|
|
|
|
/* Responsive breakpoints — kept here so JS can read them via getComputedStyle. */
|
|
--bp-mobile: 640px;
|
|
--bp-tablet: 1024px;
|
|
}
|
|
|
|
[data-theme="light"] {
|
|
/* Snow storm */
|
|
--color-bg-primary: #eceff4; /* nord6 */
|
|
--color-bg-secondary: #ffffff;
|
|
--color-bg-tertiary: #e5e9f0; /* nord5 */
|
|
--color-bg-overlay: rgba(236, 239, 244, 0.92);
|
|
--color-bg-hover: #e5e9f0;
|
|
|
|
--color-surface-raised: #ffffff;
|
|
--color-surface-sunken: #e5e9f0;
|
|
--color-surface-hover: #d8dee9;
|
|
--color-surface-elevated: #d8dee9; /* nord4 */
|
|
|
|
/* Primary — deeper frost for WCAG on snow storm */
|
|
--color-primary: #5e81ac; /* nord10 */
|
|
--color-primary-hover: #4c6d92;
|
|
--color-primary-active: #3e5b7c;
|
|
--color-primary-text: #eceff4;
|
|
--color-primary-light: rgba(94, 129, 172, 0.12);
|
|
--color-primary-border: rgba(94, 129, 172, 0.34);
|
|
|
|
--color-secondary: #4c566a; /* nord3 */
|
|
--color-secondary-hover: #3b4252;
|
|
--color-secondary-light: rgba(76, 86, 106, 0.1);
|
|
|
|
--color-accent: #5e81ac;
|
|
--color-accent-hover: #4c6d92;
|
|
--color-accent-light: rgba(94, 129, 172, 0.12);
|
|
--color-accent-border: rgba(94, 129, 172, 0.32);
|
|
|
|
--color-text-primary: #2e3440; /* nord0 */
|
|
--color-text-secondary: #3b4252; /* nord1 */
|
|
--color-text-muted: #6e7a8c;
|
|
--color-text-disabled: #a1acb9;
|
|
--color-text-inverse: #ffffff;
|
|
|
|
--color-border-subtle: rgba(46, 52, 64, 0.08);
|
|
--color-border-default: rgba(46, 52, 64, 0.14);
|
|
--color-border-strong: rgba(46, 52, 64, 0.28);
|
|
--color-border-divider: rgba(46, 52, 64, 0.06);
|
|
--color-border-primary: rgba(94, 129, 172, 0.45);
|
|
--color-border-focus: rgba(94, 129, 172, 0.45);
|
|
|
|
/* Status — darker aurora for light mode contrast */
|
|
--color-success: #6b8a5a;
|
|
--color-success-light: rgba(107, 138, 90, 0.12);
|
|
--color-success-border: rgba(107, 138, 90, 0.3);
|
|
--color-warning: #b08334;
|
|
--color-warning-light: rgba(176, 131, 52, 0.12);
|
|
--color-warning-border: rgba(176, 131, 52, 0.3);
|
|
--color-error: #a13e47;
|
|
--color-error-light: rgba(161, 62, 71, 0.1);
|
|
--color-error-border: rgba(161, 62, 71, 0.3);
|
|
--color-info: #4c6d92;
|
|
--color-info-light: rgba(76, 109, 146, 0.12);
|
|
--color-info-border: rgba(76, 109, 146, 0.3);
|
|
|
|
--color-modal-backdrop: rgba(46, 52, 64, 0.38);
|
|
|
|
--color-focus-ring: rgba(94, 129, 172, 0.34);
|
|
|
|
/* Data viz — muted aurora for light mode */
|
|
--color-data-1: #5e81ac;
|
|
--color-data-2: #a13e47;
|
|
--color-data-3: #8b5a92;
|
|
--color-data-4: #b08334;
|
|
--color-data-5: #6b8a5a;
|
|
--color-data-6: #b8684f;
|
|
--color-data-7: #4c6d92;
|
|
--color-data-8: #5a9090;
|
|
|
|
--color-log-stdout: #2e3440;
|
|
--color-log-stderr: #a13e47;
|
|
--color-log-info: #4c6d92;
|
|
--color-log-warn: #b08334;
|
|
|
|
/* Soft cool shadows */
|
|
--shadow-subtle: 0 1px 2px rgba(46, 52, 64, 0.05);
|
|
--shadow-sm: 0 1px 2px rgba(46, 52, 64, 0.07), 0 4px 14px rgba(46, 52, 64, 0.07);
|
|
--shadow-md: 0 2px 8px rgba(46, 52, 64, 0.1), 0 20px 48px rgba(46, 52, 64, 0.12);
|
|
--shadow-lg: 0 4px 12px rgba(46, 52, 64, 0.14), 0 28px 64px rgba(46, 52, 64, 0.16);
|
|
--shadow-sidebar: 1px 0 0 rgba(46, 52, 64, 0.06);
|
|
|
|
--shadow-inset-top: inset 0 1px 0 rgba(255, 255, 255, 0.7);
|
|
--shadow-inset-hi: inset 0 1px 0 rgba(255, 255, 255, 0.8);
|
|
|
|
--color-toggle-off: #c3cad6;
|
|
--color-toggle-on: var(--color-primary);
|
|
|
|
/* Page-width archetypes — see :root block for usage. */
|
|
--page-max-narrow: 760px;
|
|
--page-max-medium: 1080px;
|
|
--page-max-default: 1600px;
|
|
--page-max-wide: none;
|
|
|
|
--bp-mobile: 640px;
|
|
--bp-tablet: 1024px;
|
|
}
|