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

taffybar: menu css debugging tweaks

Browse Source
This commit is contained in:
Ivan Malison
2026-02-05 15:06:20 -08:00
committed by Kat Huang
parent 4a431d410d
commit 5f5bc8ec54
4 changed files with 306 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
dotfiles/config/taffybar/ivanm-dfinity-razer.css
View File

@@ -93,14 +93,14 @@
/* Button styling */ /* Button styling */
button { .taffy-window button {
all: initial; all: initial;
background-color: @transparent; background-color: @transparent;
border-width: 0px; border-width: 0px;
border-radius: 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; box-shadow: inset 0 -3px @taffy-blue;
} }
@@ -112,14 +112,100 @@ button:checked, button:hover .Contents:hover {
color: @menu-font-color; 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 { .taffy-window menuitem, menuitem {
background-color: @menu-background-color; background-color: @menu-background-color;
} }
menu menuitem, GtkMenu menuitem, .menu menuitem {
background-color: @menu-background-color;
}
.taffy-window menuitem:hover, menuitem:hover { .taffy-window menuitem:hover, menuitem:hover {
background-color: @taffy-blue; background-color: @taffy-blue;
} }
.taffy-window menuitem:hover > label, menuitem:hover > label { menu menuitem:hover, GtkMenu menuitem:hover, .menu menuitem:hover {
color: @white; 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;
} }

7
dotfiles/config/taffybar/palette.css
View File

@@ -3,9 +3,10 @@
@define-color bar-gradient-start rgba(20, 26, 40, 0.68); @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-gradient-end rgba(12, 18, 30, 0.68);
@define-color bar-border rgba(255, 255, 255, 0.06); @define-color bar-border rgba(255, 255, 255, 0.06);
@define-color menu-background-color #1f202a; /* Temporary: keep menus high-contrast and readable while debugging theme issues. */
@define-color menu-font-color #e7e4ee; @define-color menu-background-color #ffffff;
@define-color menu-highlight #3a3550; @define-color menu-font-color #000000;
@define-color menu-highlight rgba(0, 0, 0, 0.08);
@define-color font-color #e7e4ee; @define-color font-color #e7e4ee;
@define-color font-muted #b8b1c6; @define-color font-muted #b8b1c6;
@define-color pill-background rgba(48, 52, 69, 0.92); @define-color pill-background rgba(48, 52, 69, 0.92);

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

@@ -135,14 +135,14 @@
/* Button styling */ /* Button styling */
button { .taffy-window button {
all: initial; all: initial;
background-color: @transparent; background-color: @transparent;
border-width: 0px; border-width: 0px;
border-radius: 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; box-shadow: inset 0 -2px @accent;
background-color: rgba(255, 255, 255, 0.06); background-color: rgba(255, 255, 255, 0.06);
} }
@@ -156,16 +156,135 @@ button:checked, button:hover .Contents:hover {
text-shadow: none; 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 { .taffy-window menuitem, menuitem {
background-color: @menu-background-color; 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 { .taffy-window menuitem:hover, menuitem:hover {
background-color: @menu-highlight; 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 { .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, .clock label,

94
dotfiles/config/taffybar/uber-loaner.css
View File

@@ -85,14 +85,14 @@
/* Button styling */ /* Button styling */
button { .taffy-window button {
all: initial; all: initial;
background-color: @transparent; background-color: @transparent;
border-width: 0px; border-width: 0px;
border-radius: 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; box-shadow: inset 0 -3px @taffy-blue;
} }
@@ -104,14 +104,100 @@ button:checked, button:hover .Contents:hover {
color: @menu-font-color; 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 { .taffy-window menuitem, menuitem {
background-color: @menu-background-color; background-color: @menu-background-color;
} }
menu menuitem, GtkMenu menuitem, .menu menuitem {
background-color: @menu-background-color;
}
.taffy-window menuitem:hover, menuitem:hover { .taffy-window menuitem:hover, menuitem:hover {
background-color: @taffy-blue; background-color: @taffy-blue;
} }
.taffy-window menuitem:hover > label, menuitem:hover > label { menu menuitem:hover, GtkMenu menuitem:hover, .menu menuitem:hover {
color: @white; 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;
} }