Skip to content

fix(css): exclude webgui styles from api components#2590

Merged
limetech merged 1 commit intomasterfrom
fix/css
Mar 26, 2026
Merged

fix(css): exclude webgui styles from api components#2590
limetech merged 1 commit intomasterfrom
fix/css

Conversation

@Ajit-Mehrotra
Copy link
Contributor

@Ajit-Mehrotra Ajit-Mehrotra commented Mar 25, 2026

Companion PR: unraid/api#1949

Summary by CodeRabbit

  • Style
    • Refined sidebar theme styling to prevent style rules from applying to specific UI components, improving visual consistency and preventing unintended style conflicts.

@Ajit-Mehrotra Ajit-Mehrotra requested a review from elibosley March 25, 2026 19:45
@coderabbitai
Copy link
Contributor

coderabbitai bot commented Mar 25, 2026

Walkthrough

A CSS stylesheet was updated to exclude elements within .unapi containers from inheriting theme styles. The :where(:not(.unapi *)) pseudo-selector was added to multiple style rules within .Theme--sidebar, targeting paragraphs, form controls, buttons, and their interactive states.

Changes

Cohort / File(s) Summary
Theme Styling Scope
emhttp/plugins/dynamix/styles/default-base.css
Added :where(:not(.unapi *)) exclusion pseudo-selector to 26 style rules within .Theme--sidebar for paragraphs, text inputs, textareas, buttons, and their hover/active/disabled states to prevent theme styling from applying to elements inside .unapi subtrees.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

🐰 With CSS brush and selector's care,
I painted styles with utmost flair,
But .unapi zones must stay pristine,
So :where(:not()) keeps them clean!
Theme-scoped and nested, rules refined,
A rabbit's touch, both smart and kind. 🎨

🚥 Pre-merge checks | ✅ 3
✅ Passed checks (3 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title accurately describes the main change: excluding webgui default styles from API components using CSS selectors.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch fix/css

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@github-actions
Copy link

🔧 PR Test Plugin Available

A test plugin has been generated for this PR that includes the modified files.

Version: 2026.03.25.1946
Build: View Workflow Run

📥 Installation Instructions:

Install via Unraid Web UI:

  1. Go to Plugins → Install Plugin
  2. Copy and paste this URL:
https://preview.dl.unraid.net/pr-plugins/pr-2590/webgui-pr-2590.plg
  1. Click Install

Alternative: Direct Download

⚠️ Important Notes:

  • Testing only: This plugin is for testing PR changes
  • Backup included: Original files are automatically backed up
  • Easy removal: Files are restored when plugin is removed
  • Conflicts: Remove this plugin before installing production updates

📝 Modified Files:

Click to expand file list
emhttp/plugins/dynamix/styles/default-base.css

🔄 To Remove:

Navigate to Plugins → Installed Plugins and remove webgui-pr-2590, or run:

plugin remove webgui-pr-2590

🤖 This comment is automatically generated and will be updated with each new push to this PR.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (3)
emhttp/plugins/dynamix/styles/default-base.css (3)

2303-2313: ⚠️ Potential issue | 🟡 Minor

Inconsistency: a.button:hover missing the exclusion guard.

Line 2308 doesn't have the :where(:not(.unapi *)) guard, while the equivalent global rule (line 293) and adjacent selectors (lines 2303-2307) do.

🔧 Proposed fix
     input:hover[type="button"]:where(:not(.unapi *)) ,
     input:hover[type="reset"]:where(:not(.unapi *)) ,
     input:hover[type="submit"]:where(:not(.unapi *)) ,
     button:hover:where(:not(.unapi *)) ,
     button:hover[type="button"]:where(:not(.unapi *)) ,
-    a.button:hover {
+    a.button:hover:where(:not(.unapi *)) {
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@emhttp/plugins/dynamix/styles/default-base.css` around lines 2303 - 2313, The
selector a.button:hover is missing the exclusion guard used by the other button
selectors; update the CSS so the a.button:hover selector includes
:where(:not(.unapi *)) (matching the pattern used by input:hover[type="button"],
input:hover[type="reset"], input:hover[type="submit"], and button:hover) so the
rule becomes consistent and the hover styles are excluded within .unapi
contexts.

2261-2272: ⚠️ Potential issue | 🟡 Minor

Inconsistency: textarea and .textarea missing the exclusion guard.

Lines 2268-2269 don't have the :where(:not(.unapi *)) guard, while the equivalent global rules (lines 174-175) do. This means textarea and .textarea inside .unapi containers will still inherit these .Theme--sidebar styles.

🔧 Proposed fix
     input[type="text"]:where(:not(.unapi *)) ,
     input[type="password"]:where(:not(.unapi *)) ,
     input[type="number"]:where(:not(.unapi *)) ,
     input[type="url"]:where(:not(.unapi *)) ,
     input[type="email"]:where(:not(.unapi *)) ,
     input[type="date"]:where(:not(.unapi *)) ,
     input[type="file"]:where(:not(.unapi *)) ,
-    textarea,
-    .textarea {
+    textarea:where(:not(.unapi *)),
+    .textarea:where(:not(.unapi *)) {
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@emhttp/plugins/dynamix/styles/default-base.css` around lines 2261 - 2272, The
textarea selectors lack the exclusion guard used by the other input selectors;
update the rule so textarea and .textarea include the same :where(:not(.unapi
*)) exclusion as the input selectors (i.e., make the selector group include
textarea:where(:not(.unapi *)) and .textarea:where(:not(.unapi *))) so
textarea/.textarea inside .unapi containers are excluded just like
input[type="text"], input[type="password"], etc.

2274-2289: ⚠️ Potential issue | 🟡 Minor

Inconsistency: input[type="button/reset/submit"] missing the exclusion guard.

Lines 2274-2276 don't have the :where(:not(.unapi *)) guard, while the equivalent global rules (lines 209-211) and the adjacent button selectors (lines 2277-2279) do. This partial application could lead to style leakage for these input types.

🔧 Proposed fix
-    input[type="button"],
-    input[type="reset"],
-    input[type="submit"],
+    input[type="button"]:where(:not(.unapi *)),
+    input[type="reset"]:where(:not(.unapi *)),
+    input[type="submit"]:where(:not(.unapi *)),
     button:where(:not(.unapi *)),
     button[type="button"]:where(:not(.unapi *)),
     a.button:where(:not(.unapi *)) {
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@emhttp/plugins/dynamix/styles/default-base.css` around lines 2274 - 2289, The
selectors input[type="button"], input[type="reset"], and input[type="submit"]
lack the exclusion guard used elsewhere (:where(:not(.unapi *))), causing
inconsistent scoping; update the rule that contains these selectors so each
input selector includes the same :where(:not(.unapi *)) exclusion (matching the
adjacent button:where(:not(.unapi *)), button[type="button"]:where(:not(.unapi
*)), and a.button:where(:not(.unapi *)) selectors) to prevent style leakage.
🧹 Nitpick comments (1)
emhttp/plugins/dynamix/styles/default-base.css (1)

2226-2230: Other .Theme--sidebar rules in default-dynamix.css lack the :where(:not(.unapi *)) guard.

The search confirms default-dynamix.css contains .Theme--sidebar blocks (e.g., lines 1359, 1709) with nested selectors like table.tablesorter and .ui-dropdownchecklist that don't have the :where(:not(.unapi *)) guard applied to the p selector here. If complete .unapi exclusion across theme sidebar styles is the goal, those rules may need similar treatment for consistency.

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@emhttp/plugins/dynamix/styles/default-base.css` around lines 2226 - 2230,
Several .Theme--sidebar rules in the stylesheet are missing the
:where(:not(.unapi *)) guard applied to the p selector (you added
p:where(:not(.unapi *)) in one block); update the other .Theme--sidebar blocks
(e.g., those containing selectors like table.tablesorter and
.ui-dropdownchecklist) to include the same :where(:not(.unapi *)) wrapping for
any nested selectors that should be excluded from .unapi so the exclusion is
consistent across all sidebar styles.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Outside diff comments:
In `@emhttp/plugins/dynamix/styles/default-base.css`:
- Around line 2303-2313: The selector a.button:hover is missing the exclusion
guard used by the other button selectors; update the CSS so the a.button:hover
selector includes :where(:not(.unapi *)) (matching the pattern used by
input:hover[type="button"], input:hover[type="reset"],
input:hover[type="submit"], and button:hover) so the rule becomes consistent and
the hover styles are excluded within .unapi contexts.
- Around line 2261-2272: The textarea selectors lack the exclusion guard used by
the other input selectors; update the rule so textarea and .textarea include the
same :where(:not(.unapi *)) exclusion as the input selectors (i.e., make the
selector group include textarea:where(:not(.unapi *)) and
.textarea:where(:not(.unapi *))) so textarea/.textarea inside .unapi containers
are excluded just like input[type="text"], input[type="password"], etc.
- Around line 2274-2289: The selectors input[type="button"],
input[type="reset"], and input[type="submit"] lack the exclusion guard used
elsewhere (:where(:not(.unapi *))), causing inconsistent scoping; update the
rule that contains these selectors so each input selector includes the same
:where(:not(.unapi *)) exclusion (matching the adjacent button:where(:not(.unapi
*)), button[type="button"]:where(:not(.unapi *)), and a.button:where(:not(.unapi
*)) selectors) to prevent style leakage.

---

Nitpick comments:
In `@emhttp/plugins/dynamix/styles/default-base.css`:
- Around line 2226-2230: Several .Theme--sidebar rules in the stylesheet are
missing the :where(:not(.unapi *)) guard applied to the p selector (you added
p:where(:not(.unapi *)) in one block); update the other .Theme--sidebar blocks
(e.g., those containing selectors like table.tablesorter and
.ui-dropdownchecklist) to include the same :where(:not(.unapi *)) wrapping for
any nested selectors that should be excluded from .unapi so the exclusion is
consistent across all sidebar styles.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 07d01049-8483-438d-adbb-50216c1d7406

📥 Commits

Reviewing files that changed from the base of the PR and between 685ce26 and 79a8e1f.

📒 Files selected for processing (1)
  • emhttp/plugins/dynamix/styles/default-base.css

@elibosley elibosley added the 7.3 label Mar 26, 2026
@limetech limetech merged commit ce7c578 into master Mar 26, 2026
5 checks passed
@limetech limetech deleted the fix/css branch March 26, 2026 20:41
@github-actions
Copy link

🧹 PR Test Plugin Cleaned Up

The test plugin and associated files for this PR have been removed from the preview environment.


🤖 This comment is automatically generated when a PR is closed.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants