rt/wrolpi
1
0
Fork 0
mirror of https://github.com/lrnselfreliance/wrolpi.git synced 2026-10-26 19:01:39 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fix dark-theme Accordion background mismatch outside modals

Browse source 
The dark-theme rule hardcoded the inverted Accordion's title/content
background to #171616, which is the Modal content color. Inside a Modal
this matched, but on the /admin/status page (and any Segment, which
renders at #1B1C1D) the Accordion showed up as a darker band.

Make the inverted Accordion transparent so it inherits whatever
container it sits in, matching how the light theme already renders
accordions.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Roland 2026-06-28 16:38:43 -06:00 • committed by lrnselfreliance
parent 30bc59c4c3
commit 2cdb2a4b3e
1 changed files with 7 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

10
app/src/App.css
View file

@ -247,11 +247,15 @@ textarea.otp {
color: #DDDDDD !important;
}
/* Direct children only, so nested components that use the `content`/`title` class names (e.g. a Message's
Message.Content) are not given the accordion's dark background. */
/* The accordion has no background of its own; it inherits whatever container it sits in (Modal
content #171616, Segment #1B1C1D, the page body, etc.). This matches how the light theme already
renders accordions (transparent), and avoids a darker band when the parent isn't #171616.
Direct children only, so nested components that use the `content`/`title` class names (e.g. a
Message's Message.Content) are not affected. */
.ui.inverted.accordion,
.ui.inverted.accordion > .title,
.ui.inverted.accordion > .content {
background-color: #171616 !important;
background-color: transparent !important;
}
/* Mobile-responsive Confirm modal */