colonelpanic/dotfiles
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

taffybar: fix SNI popup menu styling (white bg, black text, blue hover)

Browse Source 
GTK's menuAttachToWidget makes popup menus CSS descendants of the tray
widget, so .outer-pad.sni-tray * (specificity 0,2,0) was bleeding light
tray text colors into menu items.  Fix by using the same parent selectors
with menu descendant types (.outer-pad.sni-tray menu menuitem *) for
specificity 0,2,2+ that definitively overrides the tray color rule.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Ivan Malison
2026-02-09 00:35:32 -08:00
committed by Kat Huang
parent 134c1aef8f
commit ee0d21f8db
2 changed files with 115 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

224
dotfiles/config/taffybar/taffybar.css
View File

@@ -322,144 +322,148 @@
background-color: rgba(255, 255, 255, 0.06); background-color: rgba(255, 255, 255, 0.06);
} }
/* Menu styling */ /* ── Menu styling ───────────────────────────────────────────────────────
Force a clean white-background / black-text look on all popup menus
(GtkMenu, DBusMenu, popovers) regardless of the active GTK theme.
The CSS provider runs at priority 900 (above USER = 800). */
/* The ".taffy-window" prefixed selectors are needed because if they aren't present, /* --- Popup menu containers ---
the top level .Taffybar selector takes precedence */ .outer-pad.sni-tray * (specificity 0,2,0) bleeds tray colors into
.taffy-window menuitem *, menuitem * { popup menus via GTK's menuAttachToWidget CSS parent chain.
color: @menu-font-color; We use compound class selectors (0,2,0+) to match or exceed that. */
.dbusmenu-menu.dbusmenu-root,
menu, menu.background,
.dbusmenu-menu {
background-color: #ffffff;
background-image: none;
color: #000000;
font-family: "Noto Sans", sans-serif;
font-size: 10pt;
font-weight: 400;
text-shadow: none; text-shadow: none;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 6px;
padding: 4px 0;
} }
/* Force an opaque background for menus, regardless of the system GTK theme. */ /* Override tray color bleed using the SAME parent that causes it
.taffy-window menu, menu, (.outer-pad.sni-tray) plus menu descendant types → specificity 0,2,2+. */
.taffy-window menu.background, menu.background, .outer-pad.sni-tray menu,
.taffy-window .menu, .menu, .outer-pad.sni-tray menu menuitem,
.taffy-window .menu.background, .menu.background, .outer-pad.sni-tray menu menuitem *,
GtkMenu, GtkMenu.background { .outer-pad menu,
background-color: @menu-background-color; .outer-pad menu menuitem,
.outer-pad menu menuitem *,
.taffy-window menu menuitem,
.taffy-window menu menuitem * {
color: #000000;
text-shadow: none;
font-family: "Noto Sans", sans-serif;
font-size: 10pt;
font-weight: 400;
}
/* Menu items: white bg. */
.outer-pad.sni-tray menu menuitem,
.outer-pad menu menuitem,
menu menuitem {
background-color: #ffffff;
background-image: none; background-image: none;
border: 1px solid rgba(0, 0, 0, 0.20); padding: 4px 12px;
padding: 4px 0px; min-height: 20px;
} }
/* GTK menus often have a dedicated background node under the menu. */ /* Children transparent so hover bg shows through. */
menu > background, .outer-pad.sni-tray menu menuitem *,
menu > .background, .outer-pad menu menuitem *,
GtkMenu > background, menu menuitem * {
GtkMenu > .background, background-color: transparent;
.menu > background,
.menu > .background {
background-color: @menu-background-color;
background-image: none; background-image: none;
} }
.taffy-window menu, menu { /* --- Hover --- */
background-color: @menu-background-color; .outer-pad.sni-tray menu menuitem:hover,
background-image: none; .outer-pad menu menuitem:hover,
menu menuitem:hover {
background-color: #4a90d9;
} }
/* Some themes apply transparency to the menu's toplevel popup window. */ .outer-pad.sni-tray menu menuitem:hover *,
.outer-pad menu menuitem:hover *,
menu menuitem:hover * {
background-color: transparent;
color: #ffffff;
}
/* --- Separators --- */
.dbusmenu-menu .dbusmenu-separator,
menuitem separator {
background-color: transparent;
min-height: 1px;
margin: 4px 8px;
border-top: 1px solid rgba(0, 0, 0, 0.12);
}
/* --- Arrows & toggle indicators --- */
.dbusmenu-menu.dbusmenu-root menuitem arrow,
menuitem arrow {
background-color: transparent;
color: rgba(0, 0, 0, 0.4);
}
.dbusmenu-menu.dbusmenu-root menuitem check,
.dbusmenu-menu.dbusmenu-root menuitem radio,
menuitem check, menuitem radio {
background-color: transparent;
color: #000000;
}
/* --- Submenus --- */
.dbusmenu-submenu,
.dbusmenu-menu menu {
background-color: #ffffff;
background-image: none;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 6px;
padding: 4px 0;
}
/* --- Background/decoration nodes in popup windows --- */
window.popup, window.popup.background, window.popup, window.popup.background,
window.menu, window.menu.background, window.menu, window.menu.background {
.menu, .menu.background { background-color: #ffffff;
background-color: @menu-background-color;
background-image: none;
}
window.popup > background,
window.popup > .background,
window.menu > background,
window.menu > .background {
background-color: @menu-background-color;
background-image: none;
}
window.popup *, window.menu * {
background-color: @menu-background-color;
background-image: none; background-image: none;
} }
window.popup decoration, window.menu decoration { window.popup decoration, window.menu decoration {
background-color: @menu-background-color; background-color: #ffffff;
background-image: none; background-image: none;
} }
.taffy-window menuitem, menuitem { /* --- Popovers (some SNI apps use these instead of GtkMenu) --- */
background-color: @menu-background-color;
}
/* Higher-specificity rules to beat theme defaults like `menu menuitem { background: transparent; }`. */
menu menuitem, GtkMenu menuitem, .menu menuitem {
background-color: @menu-background-color;
}
.taffy-window menuitem:hover, menuitem:hover {
background-color: @menu-highlight;
}
menu menuitem:hover, GtkMenu menuitem:hover, .menu menuitem:hover {
background-color: @menu-highlight;
}
window.popup menuitem:hover *, window.menu menuitem:hover * {
background-color: @menu-highlight;
}
/* Last-resort: some menu implementations keep child nodes transparent, so paint
the whole subtree. This is scoped to menu/popover widgets to avoid affecting
the bar itself. */
menu *, GtkMenu *, .menu * {
background-color: @menu-background-color;
background-image: none;
}
menu menuitem:hover *, GtkMenu menuitem:hover *, .menu menuitem:hover * {
background-color: @menu-highlight;
}
.taffy-window menuitem:hover > label, menuitem:hover > label {
color: @menu-font-color;
}
/* Some menus (notably a few StatusNotifierItem menus) are rendered as popovers
containing modelbuttons instead of menuitems. */
popover, popover.background, popover > contents { popover, popover.background, popover > contents {
background-color: @menu-background-color; background-color: #ffffff;
background-image: none; background-image: none;
border: 1px solid rgba(0, 0, 0, 0.20); border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 6px;
} }
popover > background, popover *, popover modelbutton, popover modelbutton * {
popover > .background, background-color: transparent;
popover > box, color: #000000;
popover > contents > box, font-family: "Noto Sans", sans-serif;
popover > contents > * { font-size: 10pt;
background-color: @menu-background-color; font-weight: 400;
background-image: none;
}
popover modelbutton, popover modelbutton * {
background-color: @menu-background-color;
color: @menu-font-color;
text-shadow: none; text-shadow: none;
} }
popover modelbutton {
background-color: #ffffff;
padding: 4px 12px;
}
popover modelbutton:hover { popover modelbutton:hover {
background-color: @menu-highlight; background-color: #e0e0e0;
}
popover modelbutton:hover > label {
color: @menu-font-color;
}
popover * {
background-color: @menu-background-color;
background-image: none;
}
popover modelbutton:hover * {
background-color: @menu-highlight;
} }
.clock label, .clock label,

2
dotfiles/config/taffybar/theme.css
View File

@@ -74,7 +74,7 @@
/* Menus: keep high-contrast and readable while iterating. */ /* Menus: keep high-contrast and readable while iterating. */
@define-color menu-background-color #ffffff; @define-color menu-background-color #ffffff;
@define-color menu-font-color #000000; @define-color menu-font-color #000000;
@define-color menu-highlight rgba(0, 0, 0, 0.08); @define-color menu-highlight rgba(0, 0, 0, 0.10);
@define-color transparent rgba(0.0, 0.0, 0.0, 0.0); @define-color transparent rgba(0.0, 0.0, 0.0, 0.0);
@define-color white #ffffff; @define-color white #ffffff;