From 0c41f8146bfda9fecea45622e062d3a18e3e75f7 Mon Sep 17 00:00:00 2001 From: Marius Vollmer Date: Thu, 9 Jan 2025 10:17:16 +0200 Subject: [PATCH] systemd: White widget backgrounds in the journal filter toolbar The secondary button should not be transparent. At the same time, improve the existing CSS that does the same job for menu toggles. The toolbar already has its own super custom styling, which I had missed earlier. Let's move our tweaks for the menu toggles into that section and do them by setting the appropriate PF variable. Also, we can remove the FIXME part. --- pkg/systemd/logs.scss | 28 ++++++++++++++-------------- test/reference | 2 +- 2 files changed, 15 insertions(+), 15 deletions(-) diff --git a/pkg/systemd/logs.scss b/pkg/systemd/logs.scss index 1c326f00bc75..3ca5b8fc8c83 100644 --- a/pkg/systemd/logs.scss +++ b/pkg/systemd/logs.scss @@ -117,6 +117,20 @@ .pf-v5-c-toolbar { --pf-v5-c-toolbar--BackgroundColor: var(--pf-v5-c-page__main-section--BackgroundColor); + // We want menu toggles and secondary buttons in light mode to have + // a white background to increase their text-to-background contrast + // and to match the SearchInput component. + + html:not(.pf-v5-theme-dark) & { + .pf-v5-c-menu-toggle { + --pf-v5-c-menu-toggle--BackgroundColor: var(--pf-v5-global--BackgroundColor--100); + } + + .pf-v5-c-button { + --pf-v5-c-button--m-secondary--BackgroundColor: var(--pf-v5-global--BackgroundColor--100); + } + } + // Make toolbar stretch to all the available space and wrap up to two lines .pf-v5-c-toolbar__group:nth-child(3) { flex-grow: 1; @@ -141,11 +155,6 @@ .pf-v5-c-toolbar__expandable-content.pf-m-expanded .pf-v5-c-divider { display: none; } - - // FIXME: When porting the selects to the PF5 select implementation drop this - .pf-v5-c-toolbar__item { - align-self: center; - } } .log-text-filter-popover-button { @@ -156,12 +165,3 @@ color: var(--pf-v5-global--Color--100); } } - -/* Menu toggles are transparent in light mode (but not in dark - mode). This makes them white on a white page (fine), but grey in a - grey toolbar. The deprecated Select had a white background. Let's - make MenuToggles match. -*/ -html:not(.pf-v5-theme-dark) .pf-v5-c-menu-toggle:not(.pf-m-primary) { - background-color: var(--pf-v5-global--BackgroundColor--100); -} diff --git a/test/reference b/test/reference index c83ced24f3d8..246a85aef9d4 160000 --- a/test/reference +++ b/test/reference @@ -1 +1 @@ -Subproject commit c83ced24f3d8a9d0279808014598b9a85893d061 +Subproject commit 246a85aef9d47b950a61ac9327c0cd7cd1f0cdc8