From f184711ff78337fc80828e91e7022eb07b68de65 Mon Sep 17 00:00:00 2001 From: Pujit Mehrotra Date: Mon, 1 Dec 2025 14:26:11 -0500 Subject: [PATCH] fix(css): rm overrides for webgui rules Because these overrides were underspecified (ie didn't apply to third party component css), and because the webgui currently doesn't use css layering, exclusions have been made in the webgui's default-base.css so they apply broadly, rendering these overrides incorrect and unnecessary. --- web/src/assets/main.css | 115 ++-------------------------------------- 1 file changed, 3 insertions(+), 112 deletions(-) diff --git a/web/src/assets/main.css b/web/src/assets/main.css index dea0c1086f..5b72a6ca21 100644 --- a/web/src/assets/main.css +++ b/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,7 +9,7 @@ /* Import theme and utilities only - no global preflight */ @import "tailwindcss/theme.css" layer(theme); @import "tailwindcss/utilities.css" layer(utilities); -/* @import "@nuxt/ui"; temporarily disabled */ +@import "@nuxt/ui"; @import 'tw-animate-css'; @import '../../../@tailwind-shared/index.css'; @@ -17,7 +17,7 @@ @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 */ @@ -28,122 +28,13 @@ @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; - } - /* 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; - } - - /* Focus styles for dialog buttons */ - .unapi [role="dialog"] button:focus-visible, - .unapi [data-radix-collection-item] button:focus-visible { - outline: 2px solid #ff8c2f; - outline-offset: 2px; - } - - /* Reset figure element for logo */ - .unapi figure { - margin: 0; - padding: 0; - } - - /* Reset heading elements - only margin/padding */ - .unapi h1, - .unapi h2, - .unapi h3, - .unapi h4, - .unapi h5 { - margin: 0; - padding: 0; - } - - /* Reset paragraph element */ - .unapi p { - margin: 0; - padding: 0; - text-align: unset; - } - - /* Reset UL styles to prevent default browser styling */ - .unapi ul { - 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 */ -.unapi a, -.unapi a:link, -.unapi a:visited { - color: inherit; - text-decoration: none; -} - -.unapi a:hover, -.unapi a:focus { - text-decoration: underline; - color: inherit; } -/* Note: Tailwind utilities will apply globally but should be used with .unapi prefix in HTML */ - /* Ensure unraid-modals container has extremely high z-index */ unraid-modals.unapi { position: relative;