-
Notifications
You must be signed in to change notification settings - Fork 11
Feat/vue #1655
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Feat/vue #1655
Changes from all commits
9b7e375
151be64
c2944cf
1bea98e
a719b57
4a4ffda
a69bee2
990b59d
0ba573e
9c083a0
d2805cc
5cd27ff
435e77d
61a0cb9
f6c9951
b816886
15ddf2f
56e7607
0c082fd
0c0d416
e392204
0853c99
8ac4155
ae22ce1
076e711
57488a3
81acd60
246919b
36f2caa
4a85d7e
dae0c2b
8bdaa68
030d682
a8c5543
ff45f12
30d1298
8469699
e9ea493
75930a4
fe38e34
9a9de63
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,6 @@ | ||
| /* Tailwind Shared Styles - Single entry point for all shared CSS */ | ||
| @import './css-variables.css'; | ||
| @import './unraid-theme.css'; | ||
| @import './theme-variants.css'; | ||
| @import './base-utilities.css'; | ||
| @import './sonner.css'; |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,96 @@ | ||
| /** | ||
| * 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); | ||
| } |
| Original file line number | Diff line number | Diff line change | ||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
|
@@ -85,22 +85,22 @@ | |||||||||||||||||||||||||||||||||||||||||||||||||
| --color-primary-950: #431407; | ||||||||||||||||||||||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||||||||||||||||||||||
| /* Header colors */ | ||||||||||||||||||||||||||||||||||||||||||||||||||
| --color-header-text-primary: var(--header-text-primary); | ||||||||||||||||||||||||||||||||||||||||||||||||||
| --color-header-text-secondary: var(--header-text-secondary); | ||||||||||||||||||||||||||||||||||||||||||||||||||
| --color-header-background-color: var(--header-background-color); | ||||||||||||||||||||||||||||||||||||||||||||||||||
| --color-header-text-primary: #1c1c1c; | ||||||||||||||||||||||||||||||||||||||||||||||||||
| --color-header-text-secondary: #999999; | ||||||||||||||||||||||||||||||||||||||||||||||||||
| --color-header-background: #f2f2f2; | ||||||||||||||||||||||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||||||||||||||||||||||
| /* Legacy colors */ | ||||||||||||||||||||||||||||||||||||||||||||||||||
| --color-alpha: var(--color-alpha); | ||||||||||||||||||||||||||||||||||||||||||||||||||
| --color-beta: var(--color-beta); | ||||||||||||||||||||||||||||||||||||||||||||||||||
| --color-gamma: var(--color-gamma); | ||||||||||||||||||||||||||||||||||||||||||||||||||
| --color-gamma-opaque: var(--color-gamma-opaque); | ||||||||||||||||||||||||||||||||||||||||||||||||||
| --color-customgradient-start: var(--color-customgradient-start); | ||||||||||||||||||||||||||||||||||||||||||||||||||
| --color-customgradient-end: var(--color-customgradient-end); | ||||||||||||||||||||||||||||||||||||||||||||||||||
| /* Legacy colors - defaults (overridden by theme-variants.css) */ | ||||||||||||||||||||||||||||||||||||||||||||||||||
|
Comment on lines
87
to
+92
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 🛠️ Refactor suggestion Back-compat alias for renamed header background token
/* Header colors */
--color-header-text-primary: #1c1c1c;
--color-header-text-secondary: #999999;
--color-header-background: #f2f2f2;
+ /* Back-compat alias — remove after downstream migration */
+ --color-header-background-color: var(--color-header-background);📝 Committable suggestion
Suggested change
🤖 Prompt for AI Agents |
||||||||||||||||||||||||||||||||||||||||||||||||||
| --color-alpha: #ff8c2f; | ||||||||||||||||||||||||||||||||||||||||||||||||||
| --color-beta: #f2f2f2; | ||||||||||||||||||||||||||||||||||||||||||||||||||
| --color-gamma: #999999; | ||||||||||||||||||||||||||||||||||||||||||||||||||
| --color-gamma-opaque: rgba(153, 153, 153, 0.5); | ||||||||||||||||||||||||||||||||||||||||||||||||||
| --color-customgradient-start: rgba(242, 242, 242, 0); | ||||||||||||||||||||||||||||||||||||||||||||||||||
| --color-customgradient-end: rgba(242, 242, 242, 0.85); | ||||||||||||||||||||||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||||||||||||||||||||||
| /* Gradients */ | ||||||||||||||||||||||||||||||||||||||||||||||||||
| --color-header-gradient-start: var(--header-gradient-start); | ||||||||||||||||||||||||||||||||||||||||||||||||||
| --color-header-gradient-end: var(--header-gradient-end); | ||||||||||||||||||||||||||||||||||||||||||||||||||
| --color-banner-gradient: var(--banner-gradient); | ||||||||||||||||||||||||||||||||||||||||||||||||||
| /* Gradients - defaults (overridden by theme-variants.css) */ | ||||||||||||||||||||||||||||||||||||||||||||||||||
| --color-header-gradient-start: rgba(242, 242, 242, 0); | ||||||||||||||||||||||||||||||||||||||||||||||||||
| --color-header-gradient-end: rgba(242, 242, 242, 0.85); | ||||||||||||||||||||||||||||||||||||||||||||||||||
| --color-banner-gradient: none; | ||||||||||||||||||||||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||||||||||||||||||||||
| /* Font sizes */ | ||||||||||||||||||||||||||||||||||||||||||||||||||
| --font-10px: 10px; | ||||||||||||||||||||||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||||||||||||||||||||||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,5 @@ | ||
| { | ||
| "version": "4.18.2", | ||
| "version": "4.19.1", | ||
| "extraOrigins": [], | ||
| "sandbox": true, | ||
| "ssoSubIds": [], | ||
|
|
||
Uh oh!
There was an error while loading. Please reload this page.