mirror of
https://github.com/mudler/LocalAI.git
synced 2026-04-17 05:18:53 -04:00
138 lines
4.5 KiB
CSS
138 lines
4.5 KiB
CSS
/* LocalAI Theme - CSS Variables System */
|
|
:root,
|
|
[data-theme="dark"] {
|
|
--color-bg-primary: #0f1117;
|
|
--color-bg-secondary: #161921;
|
|
--color-bg-tertiary: #1c1f2a;
|
|
--color-bg-overlay: rgba(15, 17, 23, 0.95);
|
|
|
|
--color-primary: #4f7df5;
|
|
--color-primary-hover: #3d6be3;
|
|
--color-primary-active: #2f5ad1;
|
|
--color-primary-text: #FFFFFF;
|
|
--color-primary-light: rgba(79, 125, 245, 0.08);
|
|
--color-primary-border: rgba(79, 125, 245, 0.15);
|
|
|
|
--color-secondary: #64748B;
|
|
--color-secondary-hover: #475569;
|
|
--color-secondary-light: rgba(100, 116, 139, 0.1);
|
|
|
|
--color-accent: #7c9cf5;
|
|
--color-accent-hover: #6889e3;
|
|
--color-accent-light: rgba(124, 156, 245, 0.1);
|
|
|
|
--color-text-primary: #E5E7EB;
|
|
--color-text-secondary: #94A3B8;
|
|
--color-text-muted: #64748B;
|
|
--color-text-disabled: #475569;
|
|
--color-text-inverse: #FFFFFF;
|
|
|
|
--color-border-subtle: rgba(255, 255, 255, 0.08);
|
|
--color-border-default: rgba(255, 255, 255, 0.12);
|
|
--color-border-strong: rgba(79, 125, 245, 0.3);
|
|
--color-border-divider: rgba(255, 255, 255, 0.05);
|
|
--color-border-primary: rgba(79, 125, 245, 0.2);
|
|
--color-border-focus: rgba(79, 125, 245, 0.4);
|
|
|
|
--color-success: #22C55E;
|
|
--color-success-light: rgba(34, 197, 94, 0.1);
|
|
--color-success-border: rgba(34, 197, 94, 0.3);
|
|
--color-warning: #F59E0B;
|
|
--color-warning-light: rgba(245, 158, 11, 0.1);
|
|
--color-warning-border: rgba(245, 158, 11, 0.3);
|
|
--color-error: #EF4444;
|
|
--color-error-light: rgba(239, 68, 68, 0.1);
|
|
--color-error-border: rgba(239, 68, 68, 0.3);
|
|
--color-info: #4f7df5;
|
|
--color-info-light: rgba(79, 125, 245, 0.1);
|
|
--color-info-border: rgba(79, 125, 245, 0.3);
|
|
--color-accent-border: rgba(124, 156, 245, 0.3);
|
|
--color-modal-backdrop: rgba(0, 0, 0, 0.6);
|
|
|
|
--shadow-subtle: 0 1px 2px rgba(0, 0, 0, 0.2);
|
|
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.25);
|
|
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
|
|
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.35);
|
|
--shadow-glow: 0 0 0 1px rgba(79, 125, 245, 0.15), 0 0 12px rgba(79, 125, 245, 0.2);
|
|
--shadow-sidebar: 1px 0 3px rgba(0, 0, 0, 0.25);
|
|
|
|
--duration-fast: 150ms;
|
|
--duration-normal: 200ms;
|
|
--duration-slow: 300ms;
|
|
--ease-default: cubic-bezier(0.4, 0, 0.2, 1);
|
|
|
|
--spacing-xs: 0.25rem;
|
|
--spacing-sm: 0.5rem;
|
|
--spacing-md: 1rem;
|
|
--spacing-lg: 1.5rem;
|
|
--spacing-xl: 2rem;
|
|
|
|
--radius-sm: 4px;
|
|
--radius-md: 6px;
|
|
--radius-lg: 8px;
|
|
--radius-xl: 12px;
|
|
--radius-full: 9999px;
|
|
|
|
--sidebar-width: 200px;
|
|
--sidebar-width-collapsed: 52px;
|
|
--color-toggle-off: #475569;
|
|
}
|
|
|
|
[data-theme="light"] {
|
|
--color-bg-primary: #f5f6f9;
|
|
--color-bg-secondary: #FFFFFF;
|
|
--color-bg-tertiary: #f0f1f5;
|
|
--color-bg-overlay: rgba(245, 246, 249, 0.9);
|
|
|
|
--color-primary: #4068d9;
|
|
--color-primary-hover: #3358c7;
|
|
--color-primary-active: #2a4ab5;
|
|
--color-primary-text: #FFFFFF;
|
|
--color-primary-light: rgba(64, 104, 217, 0.08);
|
|
--color-primary-border: rgba(64, 104, 217, 0.2);
|
|
|
|
--color-secondary: #475569;
|
|
--color-secondary-hover: #334155;
|
|
--color-secondary-light: rgba(71, 85, 105, 0.1);
|
|
|
|
--color-accent: #5a78c9;
|
|
--color-accent-hover: #4a67b7;
|
|
--color-accent-light: rgba(90, 120, 201, 0.1);
|
|
|
|
--color-text-primary: #1E293B;
|
|
--color-text-secondary: #64748B;
|
|
--color-text-muted: #94A3B8;
|
|
--color-text-disabled: #CBD5E1;
|
|
--color-text-inverse: #FFFFFF;
|
|
|
|
--color-border-subtle: rgba(15, 23, 42, 0.06);
|
|
--color-border-default: rgba(15, 23, 42, 0.1);
|
|
--color-border-strong: rgba(64, 104, 217, 0.3);
|
|
--color-border-divider: rgba(15, 23, 42, 0.04);
|
|
--color-border-primary: rgba(64, 104, 217, 0.2);
|
|
--color-border-focus: rgba(64, 104, 217, 0.4);
|
|
|
|
--color-success: #16A34A;
|
|
--color-success-light: rgba(22, 163, 74, 0.1);
|
|
--color-success-border: rgba(22, 163, 74, 0.3);
|
|
--color-warning: #D97706;
|
|
--color-warning-light: rgba(217, 119, 6, 0.1);
|
|
--color-warning-border: rgba(217, 119, 6, 0.3);
|
|
--color-error: #DC2626;
|
|
--color-error-light: rgba(220, 38, 38, 0.1);
|
|
--color-error-border: rgba(220, 38, 38, 0.3);
|
|
--color-info: #4068d9;
|
|
--color-info-light: rgba(64, 104, 217, 0.1);
|
|
--color-info-border: rgba(64, 104, 217, 0.3);
|
|
--color-accent-border: rgba(90, 120, 201, 0.3);
|
|
--color-modal-backdrop: rgba(0, 0, 0, 0.5);
|
|
|
|
--shadow-subtle: 0 1px 2px rgba(0, 0, 0, 0.05);
|
|
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
|
|
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
|
|
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.08);
|
|
--shadow-glow: 0 0 0 1px rgba(64, 104, 217, 0.15), 0 0 8px rgba(64, 104, 217, 0.2);
|
|
--shadow-sidebar: 1px 0 3px rgba(0, 0, 0, 0.08);
|
|
--color-toggle-off: #CBD5E1;
|
|
}
|