mirror of
https://github.com/unraid/api.git
synced 2025-12-30 13:09:52 -06:00
af5ca11860
<!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - New Features - Introduced Docker management UI components: Overview, Logs, Console, Preview, and Edit. - Added responsive Card/Detail layouts with grouping, bulk actions, and tabs. - New UnraidToaster component and global toaster configuration. - Component auto-mounting improved with async loading and multi-selector support. - UI/UX - Overhauled theme system (light/dark tokens, primary/orange accents) and added theme variants. - Header OS version now includes integrated changelog modal. - Registration displays warning states; multiple visual polish updates. - API - CPU load now includes percentGuest and percentSteal metrics. - Chores - Migrated web app to Vite; updated artifacts and manifests. <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: mdatelle <mike@datelle.net> Co-authored-by: Michael Datelle <mdatelle@icloud.com>
144 lines
4.8 KiB
CSS
144 lines
4.8 KiB
CSS
/* Hybrid theme system: Native CSS + Theme Store fallback */
|
|
|
|
/* Light mode defaults */
|
|
:root {
|
|
/* Nuxt UI Color System - Primary (Orange for Unraid) */
|
|
--ui-color-primary-50: #fff7ed;
|
|
--ui-color-primary-100: #ffedd5;
|
|
--ui-color-primary-200: #fed7aa;
|
|
--ui-color-primary-300: #fdba74;
|
|
--ui-color-primary-400: #fb923c;
|
|
--ui-color-primary-500: #ff8c2f;
|
|
--ui-color-primary-600: #ea580c;
|
|
--ui-color-primary-700: #c2410c;
|
|
--ui-color-primary-800: #9a3412;
|
|
--ui-color-primary-900: #7c2d12;
|
|
--ui-color-primary-950: #431407;
|
|
|
|
/* Nuxt UI Color System - Neutral (True Gray) */
|
|
--ui-color-neutral-50: #fafafa;
|
|
--ui-color-neutral-100: #f5f5f5;
|
|
--ui-color-neutral-200: #e5e5e5;
|
|
--ui-color-neutral-300: #d4d4d4;
|
|
--ui-color-neutral-400: #a3a3a3;
|
|
--ui-color-neutral-500: #737373;
|
|
--ui-color-neutral-600: #525252;
|
|
--ui-color-neutral-700: #404040;
|
|
--ui-color-neutral-800: #262626;
|
|
--ui-color-neutral-900: #171717;
|
|
--ui-color-neutral-950: #0a0a0a;
|
|
|
|
/* Nuxt UI Default color shades */
|
|
--ui-primary: var(--ui-color-primary-500);
|
|
--ui-secondary: var(--ui-color-neutral-500);
|
|
|
|
/* Nuxt UI Design Tokens - Text */
|
|
--ui-text-dimmed: var(--ui-color-neutral-400);
|
|
--ui-text-muted: var(--ui-color-neutral-500);
|
|
--ui-text-toned: var(--ui-color-neutral-600);
|
|
--ui-text: var(--ui-color-neutral-700);
|
|
--ui-text-highlighted: var(--ui-color-neutral-900);
|
|
--ui-text-inverted: white;
|
|
|
|
/* Nuxt UI Design Tokens - Background */
|
|
--ui-bg: white;
|
|
--ui-bg-muted: var(--ui-color-neutral-50);
|
|
--ui-bg-elevated: var(--ui-color-neutral-100);
|
|
--ui-bg-accented: var(--ui-color-neutral-200);
|
|
--ui-bg-inverted: var(--ui-color-neutral-900);
|
|
|
|
/* Nuxt UI Design Tokens - Border */
|
|
--ui-border: var(--ui-color-neutral-200);
|
|
--ui-border-muted: var(--ui-color-neutral-200);
|
|
--ui-border-accented: var(--ui-color-neutral-300);
|
|
--ui-border-inverted: var(--ui-color-neutral-900);
|
|
|
|
/* Nuxt UI Radius */
|
|
--ui-radius: 0.5rem;
|
|
|
|
--background: 0 0% 100%;
|
|
--foreground: 0 0% 3.9%;
|
|
--muted: 0 0% 96.1%;
|
|
--muted-foreground: 0 0% 45.1%;
|
|
--popover: 0 0% 100%;
|
|
--popover-foreground: 0 0% 3.9%;
|
|
--card: 0 0% 100%;
|
|
--card-foreground: 0 0% 3.9%;
|
|
--border: 0 0% 89.8%;
|
|
--input: 0 0% 89.8%;
|
|
--primary: 24 100% 50%; /* Orange #ff8c2f in HSL */
|
|
--primary-foreground: 0 0% 98%;
|
|
--secondary: 0 0% 96.1%;
|
|
--secondary-foreground: 0 0% 9%;
|
|
--accent: 0 0% 96.1%;
|
|
--accent-foreground: 0 0% 9%;
|
|
--destructive: 0 84.2% 60.2%;
|
|
--destructive-foreground: 0 0% 98%;
|
|
--ring: 24 100% 50%; /* Orange ring to match primary */
|
|
--chart-1: 12 76% 61%;
|
|
--chart-2: 173 58% 39%;
|
|
--chart-3: 197 37% 24%;
|
|
--chart-4: 43 74% 66%;
|
|
--chart-5: 27 87% 67%;
|
|
}
|
|
|
|
/* Dark mode */
|
|
.dark {
|
|
/* Nuxt UI Default color shades - Dark mode */
|
|
--ui-primary: var(--ui-color-primary-400);
|
|
--ui-secondary: var(--ui-color-neutral-400);
|
|
|
|
/* Nuxt UI Design Tokens - Text (Dark) */
|
|
--ui-text-dimmed: var(--ui-color-neutral-500);
|
|
--ui-text-muted: var(--ui-color-neutral-400);
|
|
--ui-text-toned: var(--ui-color-neutral-300);
|
|
--ui-text: var(--ui-color-neutral-200);
|
|
--ui-text-highlighted: white;
|
|
--ui-text-inverted: var(--ui-color-neutral-900);
|
|
|
|
/* Nuxt UI Design Tokens - Background (Dark) */
|
|
--ui-bg: var(--ui-color-neutral-900);
|
|
--ui-bg-muted: var(--ui-color-neutral-800);
|
|
--ui-bg-elevated: var(--ui-color-neutral-800);
|
|
--ui-bg-accented: var(--ui-color-neutral-700);
|
|
--ui-bg-inverted: white;
|
|
|
|
/* Nuxt UI Design Tokens - Border (Dark) */
|
|
--ui-border: var(--ui-color-neutral-800);
|
|
--ui-border-muted: var(--ui-color-neutral-700);
|
|
--ui-border-accented: var(--ui-color-neutral-700);
|
|
--ui-border-inverted: white;
|
|
|
|
--background: 0 0% 3.9%;
|
|
--foreground: 0 0% 98%;
|
|
--muted: 0 0% 14.9%;
|
|
--muted-foreground: 0 0% 63.9%;
|
|
--popover: 0 0% 3.9%;
|
|
--popover-foreground: 0 0% 98%;
|
|
--card: 0 0% 3.9%;
|
|
--card-foreground: 0 0% 98%;
|
|
--border: 0 0% 14.9%;
|
|
--input: 0 0% 14.9%;
|
|
--primary: 24 100% 50%; /* Orange #ff8c2f in HSL */
|
|
--primary-foreground: 0 0% 98%;
|
|
--secondary: 0 0% 14.9%;
|
|
--secondary-foreground: 0 0% 98%;
|
|
--accent: 0 0% 14.9%;
|
|
--accent-foreground: 0 0% 98%;
|
|
--destructive: 0 62.8% 30.6%;
|
|
--destructive-foreground: 0 0% 98%;
|
|
--ring: 24 100% 50%; /* Orange ring to match primary */
|
|
--chart-1: 220 70% 50%;
|
|
--chart-2: 160 60% 45%;
|
|
--chart-3: 30 80% 55%;
|
|
--chart-4: 280 65% 60%;
|
|
--chart-5: 340 75% 55%;
|
|
}
|
|
|
|
/* Alternative class-based dark mode support for specific Unraid themes */
|
|
.dark[data-theme='black'],
|
|
.dark[data-theme='gray'] {
|
|
--background: 0 0% 3.9%;
|
|
--foreground: 0 0% 98%;
|
|
--border: 0 0% 14.9%;
|
|
} |