From aecf70ffad60c83074347d3d6ec23f73acbd1aee Mon Sep 17 00:00:00 2001
From: Eli Bosley <ekbosley@gmail.com>
Date: Mon, 8 Sep 2025 12:55:52 -0400
Subject: [PATCH] fix: properly override header values (#1673)

---
 @tailwind-shared/unraid-theme.css |  8 ++++----
 web/src/assets/main.css           | 32 ++++++++++++-------------------
 2 files changed, 16 insertions(+), 24 deletions(-)

diff --git a/@tailwind-shared/unraid-theme.css b/@tailwind-shared/unraid-theme.css
index 363ff9647..785d3ba90 100644
--- a/@tailwind-shared/unraid-theme.css
+++ b/@tailwind-shared/unraid-theme.css
@@ -84,10 +84,10 @@
   --color-primary-900: #7c2d12;
   --color-primary-950: #431407;
 
-  /* Header colors */
-  --color-header-text-primary: #1c1c1c;
-  --color-header-text-secondary: #999999;
-  --color-header-background: #f2f2f2;
+  /* Header colors - defaults will be overridden by theme */
+  --color-header-text-primary: var(--header-text-primary, #1c1c1c);
+  --color-header-text-secondary: var(--header-text-secondary, #999999);
+  --color-header-background: var(--header-background-color, #f2f2f2);
 
   /* Legacy colors - defaults (overridden by theme-variants.css) */
   --color-alpha: #ff8c2f;
diff --git a/web/src/assets/main.css b/web/src/assets/main.css
index e5d998538..bbcc46f9b 100644
--- a/web/src/assets/main.css
+++ b/web/src/assets/main.css
@@ -3,8 +3,12 @@
  * Using scoped selectors to prevent breaking Unraid WebGUI
  */
 
-/* Import all dependencies at root level */
-@import "tailwindcss";
+/* Define custom layers with controlled cascade */
+@layer theme, unapi-base, components, utilities;
+
+/* Import theme and utilities only - no global preflight */
+@import "tailwindcss/theme.css" layer(theme);
+@import "tailwindcss/utilities.css" layer(utilities);
 @import "@nuxt/ui";
 @import 'tw-animate-css';
 @import '../../../@tailwind-shared/index.css';
@@ -14,26 +18,14 @@
 @source "../../../unraid-ui/src/**/*.{vue,ts,js,tsx,jsx}";
 
 /* 
- * Override Tailwind's global resets to only apply within .unapi
- * We use high-specificity selectors to counteract Tailwind's global styles
+ * Scoped base styles for .unapi elements only
+ * Import Tailwind's preflight into our custom layer and scope it
  */
 
-@layer base {
-  /* Neutralize Tailwind's global resets for non-.unapi elements */
-  body *:not(.unapi *) {
-    all: revert-layer;
-  }
-
-  /* Reapply Tailwind-like resets only within .unapi */
-  .unapi *,
-  .unapi *::before,
-  .unapi *::after {
-    box-sizing: border-box;
-    border-width: 0;
-    border-style: solid;
-    border-color: theme('borderColor.DEFAULT', currentColor);
-    margin: 0;
-    padding: 0;
+@layer unapi-base {
+  /* Scope all Tailwind preflight styles to .unapi */
+  .unapi {
+    @import "tailwindcss/preflight.css";
   }
 
   /* Override Unraid's button styles for Nuxt UI components */