fix: css

Author: pujitm

web/postcss/scopeTailwindToUnapi.ts

@@ -35,7 +35,8 @@ const DEFAULT_INCLUDE_ROOT = true;
 
 const KEYFRAME_AT_RULES = new Set(['keyframes']);
 const NON_SCOPED_AT_RULES = new Set(['font-face', 'page']);
-const MERGE_WITH_SCOPE_PATTERNS: RegExp[] = [/^\.theme-/, /^\.has-custom-/, /^\.dark\b/];
+const MERGE_WITH_SCOPE_PATTERNS: RegExp[] = [/^\.theme-/, /^\.has-custom-/, /^\.dark\b/, /^\.light\b/];
+const ROOT_ELEMENT_PATTERN = /^(html|body)(?=$|[.#[:\s>+~])/;
 
 function shouldScopeRule(rule: Rule, targetLayers: Set<string>, includeRootRules: boolean): boolean {
   const hasSelectorString = typeof rule.selector === 'string' && rule.selector.length > 0;
@@ -104,6 +105,12 @@ function prefixSelector(selector: string, scope: string): string {
     return trimmed;
   }
 
+  const rootElementMatch = trimmed.match(ROOT_ELEMENT_PATTERN);
+  if (rootElementMatch) {
+    const suffix = trimmed.slice(rootElementMatch[0].length);
+    return suffix ? `${scope}${suffix}` : scope;
+  }
+
   if (trimmed === ':root') {
     return scope;
   }

web/src/__tests__/scopeTailwindToUnapi.spec.ts

@@ -67,6 +67,24 @@ describe('scopeTailwindToUnapi plugin', () => {
     expect(rule.selector).toBe('.unapi .card');
   });
 
+  it('scopes html and body selectors to the root scope element', () => {
+    const plugin = scopeTailwindToUnapi();
+    const rule = createRule(['html', 'body.dark']);
+
+    plugin.Rule?.(rule);
+
+    expect(rule.selectors).toEqual(['.unapi', '.unapi.dark']);
+  });
+
+  it('merges theme mode selectors onto the unapi scope', () => {
+    const plugin = scopeTailwindToUnapi();
+    const rule = createRule(['.light', '.dark']);
+
+    plugin.Rule?.(rule);
+
+    expect(rule.selectors).toEqual(['.unapi.light', '.unapi.dark']);
+  });
+
   it('processes large rule sets within the target budget', () => {
     const plugin = scopeTailwindToUnapi();
     const totalRules = 10_000;

web/src/assets/main.css

@@ -1,4 +1,4 @@
-/* 
+/*
  * Tailwind v4 configuration with Nuxt UI v3
  * Using scoped selectors to prevent breaking Unraid WebGUI
  */
@@ -9,55 +9,36 @@
 /* Import theme and utilities only - no global preflight */
 @import "tailwindcss/theme.css" layer(theme);
 @import "tailwindcss/utilities.css" layer(utilities);
-@import "@nuxt/ui"; 
+@import "@nuxt/ui/.nuxt/ui.css" layer(theme);
+@import "@nuxt/ui";
 @import 'tw-animate-css';
 @import '../../../@tailwind-shared/index.css';
 
 /* Scan for Tailwind classes in all source files */
 @source "../**/*.{vue,ts,js,tsx,jsx}";
 @source "../../../unraid-ui/src/**/*.{vue,ts,js,tsx,jsx}";
 
-/* 
+/*
  * Scoped base styles for .unapi elements only
  * Import Tailwind's preflight into our custom layer and scope it
  */
 
 @layer unapi-base {
-  /* Scope all Tailwind preflight styles to .unapi */
-  .unapi {
-    @import "tailwindcss/preflight.css";
-  }
-
-  /* Override Unraid's button styles for Nuxt UI components */
-  .unapi button {
-    /* Reset Unraid's button styles */
-    margin: 0 !important;
-    padding: 0;
-    border: none;
-    background: none;
-  }
+  /* Scope Tailwind preflight so Nuxt UI components get default browser resets */
+  @import "tailwindcss/preflight.css";
 
   /* Accessible focus styles for keyboard navigation */
   .unapi button:focus-visible {
     outline: 2px solid #ff8c2f;
     outline-offset: 2px;
   }
 
-  /* Restore button functionality while removing Unraid's forced styles */
-  .unapi button:not([role="switch"]) {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    transition: all 0.2s;
-  }
-
   /* Ensure Nuxt UI modal/slideover close buttons work properly */
   .unapi [role="dialog"] button,
   .unapi [data-radix-collection-item] button {
-    margin: 0 !important;
-    background: transparent !important;
-    border: none !important;
+    margin: 0;
+    background: transparent;
+    border: none;
   }
 
   /* Focus styles for dialog buttons */
@@ -95,37 +76,6 @@
     padding-inline-start: 0;
     list-style-type: none;
   }
-
-  /* Reset toggle/switch button backgrounds */
-  .unapi button[role="switch"],
-  .unapi button[role="switch"][data-state="checked"],
-  .unapi button[role="switch"][data-state="unchecked"] {
-    background-color: transparent;
-    background: transparent;
-    border: 1px solid #ccc;
-  }
-
-  /* Style for checked state */
-  .unapi button[role="switch"][data-state="checked"] {
-    background-color: #ff8c2f; /* Unraid orange */
-  }
-
-  /* Style for unchecked state */
-  .unapi button[role="switch"][data-state="unchecked"] {
-    background-color: #e5e5e5;
-  }
-
-  /* Dark mode toggle styles */
-  .unapi.dark button[role="switch"][data-state="unchecked"],
-  .dark .unapi button[role="switch"][data-state="unchecked"] {
-    background-color: #333;
-    border-color: #555;
-  }
-
-  /* Toggle thumb/handle */
-  .unapi button[role="switch"] span {
-    background-color: white;
-  }
 }
 
 /* Override link styles inside .unapi */

web/vite.config.ts

@@ -96,6 +96,8 @@ export default defineConfig({
       '~': fileURLToPath(new URL('./src', import.meta.url)),
       '~~': fileURLToPath(new URL('./', import.meta.url)),
       '~/': fileURLToPath(new URL('./src/', import.meta.url)),
+      '#build': fileURLToPath(new URL('./node_modules/@nuxt/ui/.nuxt', import.meta.url)),
+      '#build/ui.css': fileURLToPath(new URL('./node_modules/@nuxt/ui/.nuxt/ui.css', import.meta.url)),
     },
   },