From 5f5bc8ec5490fc330753f311405e59997d7bdb9f Mon Sep 17 00:00:00 2001
From: Ivan Malison <IvanMalison@gmail.com>
Date: Thu, 5 Feb 2026 15:06:20 -0800
Subject: [PATCH] taffybar: menu css debugging tweaks

---
 .../config/taffybar/ivanm-dfinity-razer.css   |  94 ++++++++++++-
 dotfiles/config/taffybar/palette.css          |   7 +-
 dotfiles/config/taffybar/taffybar.css         | 125 +++++++++++++++++-
 dotfiles/config/taffybar/uber-loaner.css      |  94 ++++++++++++-
 4 files changed, 306 insertions(+), 14 deletions(-)

diff --git a/dotfiles/config/taffybar/ivanm-dfinity-razer.css b/dotfiles/config/taffybar/ivanm-dfinity-razer.css
index 08ee1428..f8d03490 100644
--- a/dotfiles/config/taffybar/ivanm-dfinity-razer.css
+++ b/dotfiles/config/taffybar/ivanm-dfinity-razer.css
@@ -93,14 +93,14 @@
 
 /* Button styling */
 
-button {
+.taffy-window button {
 	all: initial;
 	background-color: @transparent;
 	border-width: 0px;
 	border-radius: 0px;
 }
 
-button:checked, button:hover .Contents:hover {
+.taffy-window button:checked, .taffy-window button:hover .Contents:hover {
 	box-shadow: inset 0 -3px @taffy-blue;
 }
 
@@ -112,14 +112,100 @@ button:checked, button:hover .Contents:hover {
 	color: @menu-font-color;
 }
 
+/* Force an opaque background for menus, regardless of the system GTK theme. */
+.taffy-window menu, menu,
+.taffy-window menu.background, menu.background,
+.taffy-window .menu, .menu,
+.taffy-window .menu.background, .menu.background,
+GtkMenu, GtkMenu.background {
+	background-color: @menu-background-color;
+	background-image: none;
+	border: 1px solid rgba(0, 0, 0, 0.20);
+	padding: 4px 0px;
+}
+
+.taffy-window menu, menu {
+	background-color: @menu-background-color;
+	background-image: none;
+}
+
+/* Some themes apply transparency to the menu's toplevel popup window. */
+window.popup, window.popup.background,
+window.menu, window.menu.background,
+.menu, .menu.background {
+	background-color: @menu-background-color;
+	background-image: none;
+}
+
+window.popup *, window.menu * {
+	background-color: @menu-background-color;
+	background-image: none;
+}
+
+window.popup decoration, window.menu decoration {
+	background-color: @menu-background-color;
+	background-image: none;
+}
+
 .taffy-window menuitem, menuitem {
 	background-color: @menu-background-color;
 }
 
+menu menuitem, GtkMenu menuitem, .menu menuitem {
+	background-color: @menu-background-color;
+}
+
 .taffy-window menuitem:hover, menuitem:hover {
 	background-color: @taffy-blue;
 }
 
-.taffy-window menuitem:hover > label, menuitem:hover > label {
-	color: @white;
+menu menuitem:hover, GtkMenu menuitem:hover, .menu menuitem:hover {
+	background-color: @taffy-blue;
+}
+
+window.popup menuitem:hover *, window.menu menuitem:hover * {
+	background-color: @taffy-blue;
+}
+
+menu *, GtkMenu *, .menu * {
+	background-color: @menu-background-color;
+	background-image: none;
+}
+
+menu menuitem:hover *, GtkMenu menuitem:hover *, .menu menuitem:hover * {
+	background-color: @taffy-blue;
+}
+
+.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 {
+	background-color: @menu-background-color;
+	background-image: none;
+	border: 1px solid rgba(0, 0, 0, 0.20);
+}
+
+popover modelbutton, popover modelbutton * {
+	background-color: @menu-background-color;
+	color: @menu-font-color;
+}
+
+popover modelbutton:hover {
+	background-color: @taffy-blue;
+}
+
+popover modelbutton:hover > label {
+	color: @menu-font-color;
+}
+
+popover * {
+	background-color: @menu-background-color;
+	background-image: none;
+}
+
+popover modelbutton:hover * {
+	background-color: @taffy-blue;
 }
diff --git a/dotfiles/config/taffybar/palette.css b/dotfiles/config/taffybar/palette.css
index 8480584b..5f8f4ab0 100644
--- a/dotfiles/config/taffybar/palette.css
+++ b/dotfiles/config/taffybar/palette.css
@@ -3,9 +3,10 @@
 @define-color bar-gradient-start rgba(20, 26, 40, 0.68);
 @define-color bar-gradient-end rgba(12, 18, 30, 0.68);
 @define-color bar-border rgba(255, 255, 255, 0.06);
-@define-color menu-background-color #1f202a;
-@define-color menu-font-color #e7e4ee;
-@define-color menu-highlight #3a3550;
+/* Temporary: keep menus high-contrast and readable while debugging theme issues. */
+@define-color menu-background-color #ffffff;
+@define-color menu-font-color #000000;
+@define-color menu-highlight rgba(0, 0, 0, 0.08);
 @define-color font-color #e7e4ee;
 @define-color font-muted #b8b1c6;
 @define-color pill-background rgba(48, 52, 69, 0.92);
diff --git a/dotfiles/config/taffybar/taffybar.css b/dotfiles/config/taffybar/taffybar.css
index 7eefee26..a3aceba0 100644
--- a/dotfiles/config/taffybar/taffybar.css
+++ b/dotfiles/config/taffybar/taffybar.css
@@ -135,14 +135,14 @@
 
 /* Button styling */
 
-button {
+.taffy-window button {
 	all: initial;
 	background-color: @transparent;
 	border-width: 0px;
 	border-radius: 0px;
 }
 
-button:checked, button:hover .Contents:hover {
+.taffy-window button:checked, .taffy-window button:hover .Contents:hover {
 	box-shadow: inset 0 -2px @accent;
 	background-color: rgba(255, 255, 255, 0.06);
 }
@@ -156,16 +156,135 @@ button:checked, button:hover .Contents:hover {
 	text-shadow: none;
 }
 
+/* Force an opaque background for menus, regardless of the system GTK theme. */
+.taffy-window menu, menu,
+.taffy-window menu.background, menu.background,
+.taffy-window .menu, .menu,
+.taffy-window .menu.background, .menu.background,
+GtkMenu, GtkMenu.background {
+	background-color: @menu-background-color;
+	background-image: none;
+	border: 1px solid rgba(0, 0, 0, 0.20);
+	padding: 4px 0px;
+}
+
+/* GTK menus often have a dedicated background node under the menu. */
+menu > background,
+menu > .background,
+GtkMenu > background,
+GtkMenu > .background,
+.menu > background,
+.menu > .background {
+	background-color: @menu-background-color;
+	background-image: none;
+}
+
+.taffy-window menu, menu {
+	background-color: @menu-background-color;
+	background-image: none;
+}
+
+/* Some themes apply transparency to the menu's toplevel popup window. */
+window.popup, window.popup.background,
+window.menu, window.menu.background,
+.menu, .menu.background {
+	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;
+}
+
+window.popup decoration, window.menu decoration {
+	background-color: @menu-background-color;
+	background-image: none;
+}
+
 .taffy-window menuitem, menuitem {
 	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: @white;
+	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 {
+	background-color: @menu-background-color;
+	background-image: none;
+	border: 1px solid rgba(0, 0, 0, 0.20);
+}
+
+popover > background,
+popover > .background,
+popover > box,
+popover > contents > box,
+popover > contents > * {
+	background-color: @menu-background-color;
+	background-image: none;
+}
+
+popover modelbutton, popover modelbutton * {
+	background-color: @menu-background-color;
+	color: @menu-font-color;
+	text-shadow: none;
+}
+
+popover modelbutton:hover {
+	background-color: @menu-highlight;
+}
+
+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,
diff --git a/dotfiles/config/taffybar/uber-loaner.css b/dotfiles/config/taffybar/uber-loaner.css
index a88b161a..1b97dec2 100644
--- a/dotfiles/config/taffybar/uber-loaner.css
+++ b/dotfiles/config/taffybar/uber-loaner.css
@@ -85,14 +85,14 @@
 
 /* Button styling */
 
-button {
+.taffy-window button {
 	all: initial;
 	background-color: @transparent;
 	border-width: 0px;
 	border-radius: 0px;
 }
 
-button:checked, button:hover .Contents:hover {
+.taffy-window button:checked, .taffy-window button:hover .Contents:hover {
 	box-shadow: inset 0 -3px @taffy-blue;
 }
 
@@ -104,14 +104,100 @@ button:checked, button:hover .Contents:hover {
 	color: @menu-font-color;
 }
 
+/* Force an opaque background for menus, regardless of the system GTK theme. */
+.taffy-window menu, menu,
+.taffy-window menu.background, menu.background,
+.taffy-window .menu, .menu,
+.taffy-window .menu.background, .menu.background,
+GtkMenu, GtkMenu.background {
+	background-color: @menu-background-color;
+	background-image: none;
+	border: 1px solid rgba(0, 0, 0, 0.20);
+	padding: 4px 0px;
+}
+
+.taffy-window menu, menu {
+	background-color: @menu-background-color;
+	background-image: none;
+}
+
+/* Some themes apply transparency to the menu's toplevel popup window. */
+window.popup, window.popup.background,
+window.menu, window.menu.background,
+.menu, .menu.background {
+	background-color: @menu-background-color;
+	background-image: none;
+}
+
+window.popup *, window.menu * {
+	background-color: @menu-background-color;
+	background-image: none;
+}
+
+window.popup decoration, window.menu decoration {
+	background-color: @menu-background-color;
+	background-image: none;
+}
+
 .taffy-window menuitem, menuitem {
 	background-color: @menu-background-color;
 }
 
+menu menuitem, GtkMenu menuitem, .menu menuitem {
+	background-color: @menu-background-color;
+}
+
 .taffy-window menuitem:hover, menuitem:hover {
 	background-color: @taffy-blue;
 }
 
-.taffy-window menuitem:hover > label, menuitem:hover > label {
-	color: @white;
+menu menuitem:hover, GtkMenu menuitem:hover, .menu menuitem:hover {
+	background-color: @taffy-blue;
+}
+
+window.popup menuitem:hover *, window.menu menuitem:hover * {
+	background-color: @taffy-blue;
+}
+
+menu *, GtkMenu *, .menu * {
+	background-color: @menu-background-color;
+	background-image: none;
+}
+
+menu menuitem:hover *, GtkMenu menuitem:hover *, .menu menuitem:hover * {
+	background-color: @taffy-blue;
+}
+
+.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 {
+	background-color: @menu-background-color;
+	background-image: none;
+	border: 1px solid rgba(0, 0, 0, 0.20);
+}
+
+popover modelbutton, popover modelbutton * {
+	background-color: @menu-background-color;
+	color: @menu-font-color;
+}
+
+popover modelbutton:hover {
+	background-color: @taffy-blue;
+}
+
+popover modelbutton:hover > label {
+	color: @menu-font-color;
+}
+
+popover * {
+	background-color: @menu-background-color;
+	background-image: none;
+}
+
+popover modelbutton:hover * {
+	background-color: @taffy-blue;
 }