fix(css): exclude webgui styles from buttons/selects in api components

[Ajit-Mehrotra]

For the upcoming onboarding flow in 7.3

Summary by CodeRabbit

• Style
  • Refined button and select element styling to no longer apply within specific content areas, preserving previous appearance for interactive elements outside those regions.

[coderabbitai]

Walkthrough

A CSS file narrowing the scope of button and select element styles by wrapping selectors with :where(:not(.unapi *)), preventing these styles from applying to elements within .unapi scoped containers while preserving styles elsewhere.

Changes

Cohort / File(s)	Summary
CSS Selector Scoping emhttp/plugins/dynamix/styles/default-base.css	Wrapped button, button[type="button"], a.button, and select selectors with :where(:not(.unapi *)) to exclude styling from elements inside .unapi containers.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Poem

🐰 A scope adjustment, subtle and fine,
These buttons and selects now respect the line,
Where .unapi dwells, they shall not tread,
CSS whispers softly instead,
Styles now dance with precision's delight! ✨

🚥 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 clearly and specifically describes the main change: excluding webgui styles from buttons/selects in api components using CSS scope narrowing.
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
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/api-css-conflicts

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[github-actions]

🔧 PR Test Plugin Available

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

Version: 2026.02.10.2145
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-2543/webgui-pr-2543.plg

3. Click Install

Alternative: Direct Download

• 📦 Download PLG
• 📦 Download TXZ

⚠️ 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-2543, or run:

plugin remove webgui-pr-2543

---

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

[coderabbitai]

Actionable comments posted: 1

Caution

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

⚠️ Outside diff range comments (2)

emhttp/plugins/dynamix/styles/default-base.css (2)

2303-2343: ⚠️ Potential issue | 🟠 Major

Hover, active, and disabled state selectors for button/a.button are not excluded for .unapi.

The base styles (line 2277–2279) correctly exclude .unapi * elements, but the corresponding hover (2306–2308), active (2318–2320), and disabled (2326–2336) selectors for button, button[type="button"], and a.button are still unscoped. This means API component buttons will lose their base sidebar styles but still pick up sidebar hover/active/disabled overrides — likely causing visual inconsistencies.

The same :where(:not(.unapi *)) pattern should be applied to these state selectors as well for button, button:hover, button:active, button[disabled], etc.

---

2349-2376: ⚠️ Potential issue | 🟡 Minor

Select derivative selectors (option, option:disabled, select[disabled]) not excluded.

Line 2349 correctly scopes the base select with :where(:not(.unapi *)), but the subsequent select option (2363), select option:disabled (2368), and select[disabled] (2372) selectors remain unscoped. While the base select styles won't apply, these child/state selectors will still match .unapi select elements and apply sidebar-specific option colors and disabled styles.

Proposed fix

-    select option {
+    select:where(:not(.unapi *)) option {
         color: var(--text-color);
         background-color: var(--opac-background-color);
     }
     
-    select option:disabled {
+    select:where(:not(.unapi *)) option:disabled {
         color: var(--disabled-text-color);
     }
     
-    select[disabled] {
+    select[disabled]:where(:not(.unapi *)) {
         color: var(--disabled-text-color);
         border-color: var(--disabled-input-border-color);
         background-color: var(--disabled-input-background-color);
     }

🤖 Fix all issues with AI agents

In `@emhttp/plugins/dynamix/styles/default-base.css`:
- Around line 2274-2279: The rule inconsistently excludes API components: add
the same :where(:not(.unapi *)) exclusion to the input selectors so
input[type="button"], input[type="reset"], and input[type="submit"] are wrapped
the same way as button, button[type="button"], and a.button; update the selector
list containing input[type="button"], input[type="reset"], input[type="submit"],
button:where(:not(.unapi *)), button[type="button"]:where(:not(.unapi *)),
a.button:where(:not(.unapi *)) so the input[type=...] selectors include
:where(:not(.unapi *)) (or alternatively add separate
input[type="..."]:where(:not(.unapi *)) entries) to ensure API (.unapi) children
are consistently excluded.

[coderabbitai]

⚠️ Potential issue | 🟠 Major

Inconsistent exclusion: input[type] selectors in the same rule are not wrapped with :where(:not(.unapi *)).

Lines 2274–2276 (input[type="button"], input[type="reset"], input[type="submit"]) are left unmodified while button, button[type="button"], and a.button on lines 2277–2279 are wrapped. If API components can also contain <input type="button|reset|submit"> elements, those will still receive the sidebar overrides.

Proposed fix for consistency

-    input[type="button"],
-    input[type="reset"],
-    input[type="submit"],
-    button:where(:not(.unapi *)),
-    button[type="button"]:where(:not(.unapi *)),
-    a.button:where(:not(.unapi *)) {
+    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 *)) {

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

	input[type="button"],
	input[type="reset"],
	input[type="submit"],
	button,
	button[type="button"],
	a.button {
	button:where(:not(.unapi *)),
	button[type="button"]:where(:not(.unapi *)),
	a.button:where(:not(.unapi *)) {
	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

In `@emhttp/plugins/dynamix/styles/default-base.css` around lines 2274 - 2279, The
rule inconsistently excludes API components: add the same :where(:not(.unapi *))
exclusion to the input selectors so input[type="button"], input[type="reset"],
and input[type="submit"] are wrapped the same way as button,
button[type="button"], and a.button; update the selector list containing
input[type="button"], input[type="reset"], input[type="submit"],
button:where(:not(.unapi *)), button[type="button"]:where(:not(.unapi *)),
a.button:where(:not(.unapi *)) so the input[type=...] selectors include
:where(:not(.unapi *)) (or alternatively add separate
input[type="..."]:where(:not(.unapi *)) entries) to ensure API (.unapi) children
are consistently excluded.