refactor: update styles to use CSS Layers and Scope for better isolation

[Ajit-Mehrotra]

Summary

This PR updates the core stylesheet handling in default-base.css and font-awesome.css to leverage modern CSS features (@layer and @scope) for cleaner style isolation, specifically preventing styles from leaking into .unapi components.

Changes:

1. Default Base:

   • Wrapped styles in @layer default and @scope (:root) to (.unapi).
   • Removed verbose and fragile :where(:not(.unapi *)) exclusion selectors in favor of a more robust @scope mechanism.
   • Updated .Theme--sidebar to :scope.Theme--sidebar to align with the new scoping.

2. Font Awesome:

   • Wrapped styles in @layer default and @scope (:root) to (.unapi) to ensure icons outside the unapi scope render correctly (fixing an issue in CA where a small number of plugin icons were too small).

Reasoning

These changes were primarily made because file-modifications for the new notifications refactor in the api were becoming too tedious and brittle, and I wasn't confident in the direction we were going.

In addition, previous attempts to isolate legacy styles using complex :not() selectors were becoming unwieldy and causing specificity battles. Using @scope allows us to explicitly define the "donut scope" for these styles (stopping at .unapi), preventing them from bleeding into the API-driven UI components while maintaining proper cascading for the rest of the interface. @layer is used to lower the specificity of these base styles so they are easier to override when necessary.

Resources

You can read more about @scope and @layer in the MDN docs.

Please Note

These changes are not ready to be merged yet. Please coordinate with the API team. @elibosley and @zackspear are aware of both the API and Webgui changes.

Related PRs

api:
- PR (#1860)

community apps:

• PR (#15)

Summary by CodeRabbit

• Style
  • Improved CSS stylesheet organization and structure through the implementation of CSS layers and scoping directives for better maintainability and style encapsulation.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

These changes introduce CSS layers and scoping mechanisms to organize and restrict the applicability of base and font-awesome styles. Specific :where(:not(.unapi *)) pseudo-selectors are removed and replaced with broader selectors within new @layer and @scope contexts.

Changes

Cohort / File(s)	Summary
CSS Layer & Scope Refactor emhttp/plugins/dynamix/styles/default-base.css	Introduces @layer default and @scope (:root) to (.unapi); removes :where(:not(.unapi *)) from p, input, textarea, button, select, and a.button selectors; updates .Theme--sidebar to use :scope for narrowed targeting
Font Awesome Styling Scope emhttp/plugins/dynamix/styles/font-awesome.css	Wraps entire stylesheet in @layer default and @scope (:root) to (.unapi); preserves all existing font-face and icon rules unchanged

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Poem

🐰 Our styles now dance in ordered layers,
Scoped tight to .unapi's care,
Where :where once filtered with great flair,
Broader selectors now declare—
A cleaner cascade, if we dare! ✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and specifically describes the main change: refactoring styles to use CSS Layers and Scope for better isolation, which directly matches the core focus of both modified files.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

✨ Finishing touches

• 📝 Generate docstrings

---

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.01.05.0315
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-2504/webgui-pr-2504.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
emhttp/plugins/dynamix/styles/font-awesome.css

🔄 To Remove:

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

plugin remove webgui-pr-2504

---

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