From 2cdb2a4b3e29282e533f5da017b34ac74bf793fa Mon Sep 17 00:00:00 2001 From: Roland Date: Sun, 28 Jun 2026 16:38:43 -0600 Subject: [PATCH] Fix dark-theme Accordion background mismatch outside modals 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) --- app/src/App.css | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/app/src/App.css b/app/src/App.css index 6ca76aae..822987dd 100644 --- a/app/src/App.css +++ b/app/src/App.css @@ -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 */