From 9dcd05748e708856ac26d7d8b854e40d780a4506 Mon Sep 17 00:00:00 2001 From: Eli Bosley Date: Sun, 31 Aug 2025 09:00:40 -0400 Subject: [PATCH] refactor: enhance CSS patching and restoration logic in deployment script - Added a new installation script to patch webgui CSS files, ensuring that styles for specific elements are wrapped with `:not(.unraid-reset)` to prevent style leakage. - Implemented a backup and restoration mechanism for original CSS files, allowing for easy recovery after patching. - Improved the handling of CSS directories and added warnings for missing directories to enhance robustness during deployment. --- plugin/plugins/dynamix.unraid.net.plg | 114 ++++++++++++++++++++++++++ web/assets/main.css | 107 +++++++++++++----------- 2 files changed, 175 insertions(+), 46 deletions(-) diff --git a/plugin/plugins/dynamix.unraid.net.plg b/plugin/plugins/dynamix.unraid.net.plg index 6ebddb974..3ab9ca59e 100755 --- a/plugin/plugins/dynamix.unraid.net.plg +++ b/plugin/plugins/dynamix.unraid.net.plg @@ -161,7 +161,100 @@ exit 0 sed -i 's||\n|' "/usr/local/emhttp/plugins/dynamix/include/DefaultPageLayout.php" fi fi + + ]]> + + + + + ]|$)/", $trimmedLine)) { + // Add :not(.unraid-reset) prefix + $modifiedLines[] = $leadingWhitespace . ":not(.unraid-reset) " . $trimmedLine; + $modified = true; + break; + } + } + + if (!$modified) { + $modifiedLines[] = $line; + } + } + + // Write modified content back + file_put_contents($cssFile, implode("\n", $modifiedLines)); + } + + echo "CSS patching complete.\n"; + ?> ]]> @@ -272,6 +365,27 @@ exit 0 [ -f "$FILE-" ] && mv -f "$FILE-" "$FILE" done + # Restore CSS files from backup + echo "Restoring original CSS files..." + CSS_DIR="/usr/local/emhttp/plugins/dynamix/styles" + BACKUP_DIR="$CSS_DIR/.unraid-api-backup" + + if [ -d "$BACKUP_DIR" ]; then + for backup_file in "$BACKUP_DIR"/*.css; do + if [ -f "$backup_file" ]; then + filename=$(basename "$backup_file") + original_file="$CSS_DIR/$filename" + echo " Restoring $filename..." + cp "$backup_file" "$original_file" + fi + done + # Remove backup directory after restoration + rm -rf "$BACKUP_DIR" + echo "CSS restoration complete." + else + echo "No CSS backup found, skipping restoration." + fi + # Handle the unraid-components directory DIR=/usr/local/emhttp/plugins/dynamix.my.servers/unraid-components # Remove the archive's contents before restoring diff --git a/web/assets/main.css b/web/assets/main.css index e60473a51..d8b470aa9 100644 --- a/web/assets/main.css +++ b/web/assets/main.css @@ -8,76 +8,91 @@ @source "../../unraid-ui/src/**/*.{vue,ts}"; @source "../**/*.{vue,ts,js}"; -/* Create a CSS layer for resets with lower priority than Tailwind */ -@layer base { - /* Reset inherited styles from webgui for Unraid components */ - .unraid-reset, - .unraid-reset *:not(svg):not(path):not(g):not(circle):not(rect):not(line):not(polyline):not(polygon):not(ellipse):not(text):not(tspan):not(stop):not(defs):not(clipPath):not(mask):not(marker):not(symbol):not(use):not(image):not(pattern) { - /* Reset all CSS properties to browser defaults */ - all: unset; - - /* Restore essential properties */ - display: revert; - box-sizing: border-box; - } +/* + * Strategy: Only reset the specific properties that webgui sets + * This preserves Tailwind's ability to style elements + */ - /* Apply isolation to non-modal components to prevent style leakage */ - .unraid-reset:not(#teleports):not(#modals):not(unraid-modals) { - /* Create a new stacking context for style isolation */ - isolation: isolate; - } +/* Container wrapper */ +.unraid-reset { + /* Create isolation and set base styles */ + isolation: isolate; + display: contents; - /* Ensure SVG icons render properly - don't reset them */ - .unraid-reset svg { - fill: currentColor; - } + /* Override webgui font settings */ + font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; + font-size: 16px; + line-height: 1.5; + color: rgb(17 24 39); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } -/* Specific resets for interactive elements to restore functionality */ +/* Dark mode */ +.dark .unraid-reset { + color: rgb(243 244 246); +} + +/* Reset only the properties that webgui commonly sets */ +.unraid-reset * { + /* Reset text transforms */ + text-transform: none; + letter-spacing: normal; + + /* Ensure box-sizing is correct */ + box-sizing: border-box; +} + +/* Specific resets for form elements that webgui heavily styles */ .unraid-reset button, .unraid-reset input, .unraid-reset select, .unraid-reset textarea { - cursor: revert; - /* Reset button borders that leak from webgui */ - border: none; - background: none; - padding: 0; - margin: 0; + /* Remove webgui form styling */ + appearance: none; + background-image: none; font: inherit; color: inherit; - text-align: inherit; + min-width: initial; } -.unraid-reset a { +/* Ensure buttons are clickable */ +.unraid-reset button, +.unraid-reset [role="button"], +.unraid-reset input[type="button"], +.unraid-reset input[type="submit"], +.unraid-reset input[type="reset"] { cursor: pointer; - text-decoration: revert; } +/* Links */ +.unraid-reset a { + color: inherit; + text-decoration: none; + cursor: pointer; +} + +/* Hidden elements */ .unraid-reset [hidden] { display: none !important; } -/* Ensure modals and their backdrops appear above all other content */ -[role="dialog"] { - z-index: 99999 !important; +/* SVG icons should inherit color */ +.unraid-reset svg { + fill: currentColor; } -/* Modal backdrop */ -.fixed.inset-0[aria-hidden="true"], -[data-headlessui-portal] .fixed.inset-0 { - z-index: 99998 !important; -} - -/* Teleport container children */ +/* Modal z-index management */ +[role="dialog"], +[data-headlessui-portal], #teleports > *, #modals > *, unraid-modals > * { z-index: 99999 !important; } -/* Portal roots from HeadlessUI */ -[data-headlessui-portal] { - position: relative; - z-index: 99999 !important; -} +/* Modal backdrops */ +.fixed.inset-0[aria-hidden="true"], +[data-headlessui-portal] .fixed.inset-0 { + z-index: 99998 !important; +} \ No newline at end of file