Skip to content

Commit

Permalink
systemd: White widget backgrounds in the journal filter toolbar
Browse files Browse the repository at this point in the history
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.
  • Loading branch information
mvollmer committed Jan 9, 2025
1 parent 809ed8a commit e2c84c6
Showing 1 changed file with 13 additions and 14 deletions.
27 changes: 13 additions & 14 deletions pkg/systemd/logs.scss
Original file line number Diff line number Diff line change
Expand Up @@ -117,6 +117,19 @@
.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;
Expand All @@ -141,11 +154,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 {
Expand All @@ -156,12 +164,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);
}

0 comments on commit e2c84c6

Please sign in to comment.