From aa9648105fc1935743e51be0aaf1d5d8fcd0bc76 Mon Sep 17 00:00:00 2001
From: Eli Bosley <ekbosley@gmail.com>
Date: Sun, 31 Aug 2025 10:00:07 -0400
Subject: [PATCH] refactor: update CSS patching for improved compatibility and
 specificity

- Modified the CSS patching script to enhance compatibility by updating echo statements and adjusting the patching logic.
- Removed unnecessary layer wrapping in the CSS content, simplifying the structure while maintaining style specificity.
- Updated comments for clarity on the purpose of the compatibility patch and its impact on CSS management.
---
 plugin/plugins/dynamix.unraid.net.plg | 31 +++-----------
 web/assets/main.css                   | 61 +++++++++++++--------------
 2 files changed, 34 insertions(+), 58 deletions(-)

diff --git a/plugin/plugins/dynamix.unraid.net.plg b/plugin/plugins/dynamix.unraid.net.plg
index 21e5b29ba..3298c2acf 100755
--- a/plugin/plugins/dynamix.unraid.net.plg
+++ b/plugin/plugins/dynamix.unraid.net.plg
@@ -170,7 +170,7 @@ exit 0
     <INLINE>
       <![CDATA[
       <?php
-      echo "Patching webgui CSS files to exclude .unraid-reset components...\n";
+      echo "Patching webgui CSS files for compatibility...\n";
       
       $cssDir = "/usr/local/emhttp/plugins/dynamix/styles";
       $backupDir = "$cssDir/.unraid-api-backup";
@@ -211,7 +211,7 @@ exit 0
           $content = file_get_contents($cssFile);
           
           // Skip if already patched
-          if (strpos($content, "@layer webgui") !== false) {
+          if (strpos($content, "/* Unraid API compatibility patch */") !== false) {
               echo "  $filename already patched, skipping...\n";
               continue;
           }
@@ -223,31 +223,10 @@ exit 0
           
           echo "  Patching $filename...\n";
           
-          // Wrap entire CSS file content in a @layer
-          // This puts all webgui styles in a lower priority layer
-          $layerPrefix = "
-/* Added by Unraid API to prevent style conflicts */
-/* Define layer order - base resets first, then webgui overrides them, then our app styles */
-@layer properties, theme, base, webgui, components, utilities, unraid-api;
-
-/* Wrap all existing webgui styles in the webgui layer */
-@layer webgui {
-";
+          // Add compatibility patch comment
+          $content = "/* Unraid API compatibility patch */\n" . $content;
           
-          $layerSuffix = "
-} /* End @layer webgui */
-
-/* Styles for Unraid API components */
-@layer unraid-api {
-    /* Any .unraid-reset elements will have styles that override webgui layer */
-    .unraid-reset {
-        /* This layer has higher priority than webgui layer */
-    }
-}
-";
-          
-          // Wrap the content in the layer
-          $content = $layerPrefix . $content . $layerSuffix;
+          // No layer wrapping - keep original CSS as-is
           
           // Write modified content back
           file_put_contents($cssFile, $content);
diff --git a/web/assets/main.css b/web/assets/main.css
index 57beab45a..6024b8f55 100644
--- a/web/assets/main.css
+++ b/web/assets/main.css
@@ -3,10 +3,8 @@
  * This prevents Tailwind from applying global resets that affect webgui
  */
 
-/* Layer order is defined by the plugin to ensure proper cascade:
- * @layer properties, theme, base, webgui, components, utilities, unraid-api;
- * This ensures: base resets < webgui styles < our component styles
- * Do not define layers here as it will conflict with the plugin's definition */
+/* Define layers for Tailwind v4 */
+@layer theme, base, components, utilities;
 
 /* Import only the parts of Tailwind we need - NO PREFLIGHT */
 @import 'tailwindcss/theme.css' layer(theme);
@@ -23,10 +21,9 @@
 /* 
  * Scoped resets - only apply within our components
  * This replaces Tailwind's global preflight
- * Placed in components layer: higher than webgui but lower than utilities
- * This allows Tailwind utilities to override these resets
+ * Using high specificity to override webgui styles
  */
-@layer components {
+@layer base {
   /* Container with proper isolation */
   .unraid-reset {
     isolation: isolate;
@@ -81,7 +78,7 @@
     color: inherit;
   }
   
-  /* Override webgui button styles - layer precedence handles specificity */
+  /* Override webgui button styles with higher specificity */
   .unraid-reset button,
   .unraid-reset button[type="button"],
   .unraid-reset button[type="submit"],
@@ -91,32 +88,32 @@
   .unraid-reset input[type="reset"],
   .unraid-reset a.button {
     /* Reset ALL webgui button properties including CSS variables */
-    font-family: inherit;
-    font-size: inherit;
-    font-weight: normal;
-    letter-spacing: normal;
-    text-transform: none;
-    min-width: auto;
-    margin: 0;
-    padding: 0;
-    text-align: center;
-    text-decoration: none;
-    white-space: nowrap;
-    cursor: pointer;
-    outline: none;
-    border-radius: 0;
-    border: none;
-    color: inherit;
-    background: transparent;
-    background-size: auto;
-    appearance: none;
-    box-sizing: border-box;
+    font-family: inherit !important;
+    font-size: inherit !important;
+    font-weight: normal !important;
+    letter-spacing: normal !important;
+    text-transform: none !important;
+    min-width: auto !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    text-align: center !important;
+    text-decoration: none !important;
+    white-space: nowrap !important;
+    cursor: pointer !important;
+    outline: none !important;
+    border-radius: 0 !important;
+    border: none !important;
+    color: inherit !important;
+    background: transparent !important;
+    background-size: auto !important;
+    appearance: none !important;
+    box-sizing: border-box !important;
     
     /* Override CSS variables from webgui */
-    --button-border: none;
-    --button-text-color: inherit;
-    --button-background: transparent;
-    --button-background-size: auto;
+    --button-border: none !important;
+    --button-text-color: inherit !important;
+    --button-background: transparent !important;
+    --button-background-size: auto !important;
   }
   
   /* Form elements */