mirror of
https://github.com/unraid/api.git
synced 2025-12-30 21:19:49 -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>
96 lines
2.9 KiB
CSS
96 lines
2.9 KiB
CSS
/**
|
|
* Tailwind v4 Theme Variants
|
|
* Defines theme-specific CSS variables that can be switched via classes
|
|
* These are applied dynamically based on the theme selected in GraphQL
|
|
*/
|
|
|
|
/* Default/White Theme */
|
|
:root,
|
|
.theme-white {
|
|
--header-text-primary: #ffffff;
|
|
--header-text-secondary: #999999;
|
|
--header-background-color: #1c1b1b;
|
|
--header-gradient-start: rgba(28, 27, 27, 0);
|
|
--header-gradient-end: rgba(28, 27, 27, 0.7);
|
|
--ui-border-muted: hsl(240 5% 20%);
|
|
--color-border: #383735;
|
|
--color-alpha: #ff8c2f;
|
|
--color-beta: #1c1b1b;
|
|
--color-gamma: #ffffff;
|
|
--color-gamma-opaque: rgba(255, 255, 255, 0.3);
|
|
}
|
|
|
|
/* Black Theme */
|
|
.theme-black,
|
|
.theme-black.dark {
|
|
--header-text-primary: #1c1b1b;
|
|
--header-text-secondary: #999999;
|
|
--header-background-color: #f2f2f2;
|
|
--header-gradient-start: rgba(242, 242, 242, 0);
|
|
--header-gradient-end: rgba(242, 242, 242, 0.7);
|
|
--ui-border-muted: hsl(240 5.9% 90%);
|
|
--color-border: #e0e0e0;
|
|
--color-alpha: #ff8c2f;
|
|
--color-beta: #f2f2f2;
|
|
--color-gamma: #1c1b1b;
|
|
--color-gamma-opaque: rgba(28, 27, 27, 0.3);
|
|
}
|
|
|
|
/* Gray Theme */
|
|
.theme-gray {
|
|
--header-text-primary: #ffffff;
|
|
--header-text-secondary: #999999;
|
|
--header-background-color: #1c1b1b;
|
|
--header-gradient-start: rgba(28, 27, 27, 0);
|
|
--header-gradient-end: rgba(28, 27, 27, 0.7);
|
|
--ui-border-muted: hsl(240 5% 25%);
|
|
--color-border: #383735;
|
|
--color-alpha: #ff8c2f;
|
|
--color-beta: #383735;
|
|
--color-gamma: #ffffff;
|
|
--color-gamma-opaque: rgba(255, 255, 255, 0.3);
|
|
}
|
|
|
|
/* Azure Theme */
|
|
.theme-azure {
|
|
--header-text-primary: #1c1b1b;
|
|
--header-text-secondary: #999999;
|
|
--header-background-color: #f2f2f2;
|
|
--header-gradient-start: rgba(242, 242, 242, 0);
|
|
--header-gradient-end: rgba(242, 242, 242, 0.7);
|
|
--ui-border-muted: hsl(210 40% 80%);
|
|
--color-border: #5a8bb8;
|
|
--color-alpha: #ff8c2f;
|
|
--color-beta: #e7f2f8;
|
|
--color-gamma: #336699;
|
|
--color-gamma-opaque: rgba(51, 102, 153, 0.3);
|
|
}
|
|
|
|
/* Dark Mode Overrides */
|
|
.dark {
|
|
--ui-border-muted: hsl(240 5% 20%);
|
|
--color-border: #383735;
|
|
}
|
|
|
|
/*
|
|
* Dynamic color variables for user overrides from GraphQL
|
|
* These are set via JavaScript and override the theme defaults
|
|
*/
|
|
.has-custom-header-text {
|
|
--header-text-primary: var(--custom-header-text-primary);
|
|
--color-header-text-primary: var(--custom-header-text-primary);
|
|
}
|
|
|
|
.has-custom-header-meta {
|
|
--header-text-secondary: var(--custom-header-text-secondary);
|
|
--color-header-text-secondary: var(--custom-header-text-secondary);
|
|
}
|
|
|
|
.has-custom-header-bg {
|
|
--header-background-color: var(--custom-header-background-color);
|
|
--color-header-background: var(--custom-header-background-color);
|
|
--header-gradient-start: var(--custom-header-gradient-start);
|
|
--header-gradient-end: var(--custom-header-gradient-end);
|
|
--color-header-gradient-start: var(--custom-header-gradient-start);
|
|
--color-header-gradient-end: var(--custom-header-gradient-end);
|
|
} |