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

taffybar: add distinct colored squircle backgrounds per widget

Browse Source 
Fix CSS import syntax (bare `import` -> `@import url()`) so
@define-color variables from theme.css are available. Define
per-widget background/foreground/border colors and add CSS rules
for clock, disk-usage, sni-tray, battery, and backlight widgets.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Ivan Malison
2026-02-07 19:23:45 -08:00
parent 781a64aa92
commit 8ae1b2d906
2 changed files with 81 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,7 +2,7 @@
*
* Colors live in `theme.css` (loaded via `palette.css`).
*/
import theme.css
@import url("theme.css");
.taffy-window * {
/* Most text should come from Iosevka Aile; icon glyphs (Font Awesome / Nerd
@@ -89,6 +89,53 @@ import theme.css
color: @widget-mpris-fg;
}
.outer-pad.clock {
background-color: @widget-clock-bg;
border-color: @widget-clock-border;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 24px rgba(0, 0, 0, 0.30);
}
.outer-pad.clock * {
color: @widget-clock-fg;
}
.outer-pad.disk-usage {
background-color: @widget-disk-bg;
border-color: @widget-disk-border;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 24px rgba(0, 0, 0, 0.30);
}
.outer-pad.disk-usage * {
color: @widget-disk-fg;
}
.outer-pad.sni-tray {
background-color: @widget-tray-bg;
border-color: @widget-tray-border;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 24px rgba(0, 0, 0, 0.30);
}
.outer-pad.sni-tray * {
color: @widget-tray-fg;
}
.outer-pad.battery-icon,
.outer-pad.battery-text {
background-color: @widget-battery-bg;
border-color: @widget-battery-border;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 24px rgba(0, 0, 0, 0.30);
}
.outer-pad.battery-icon *,
.outer-pad.battery-text * {
color: @widget-battery-fg;
}
.outer-pad.backlight {
background-color: @widget-backlight-bg;
border-color: @widget-backlight-border;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 24px rgba(0, 0, 0, 0.30);
}
.outer-pad.backlight * {
color: @widget-backlight-fg;
}
/* Workspaces styling */
.workspaces .inner-pad {