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

taffybar: accent-tinted active workspace, white border active window

Browse Source 
Use accent color (#f1b2b2) tint for the active workspace pill instead of
a white outline, so it's visually distinct from the active window
highlight. Add white border and background to the active window icon
container within workspaces. Also add nerd font family to mpris icon.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Ivan Malison
2026-02-07 23:50:28 -08:00
committed by Kat Huang
parent 1db1da6378
commit c80f1addb2
1 changed files with 14 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -105,6 +105,9 @@
.outer-pad.mpris * { .outer-pad.mpris * {
color: @widget-mpris-fg; color: @widget-mpris-fg;
} }
.outer-pad.mpris .icon {
font-family: "Iosevka Nerd Font";
}
.outer-pad.clock { .outer-pad.clock {
background-color: @widget-clock-bg; background-color: @widget-clock-bg;
@@ -204,13 +207,14 @@
color: rgba(255, 255, 255, 0.92); color: rgba(255, 255, 255, 0.92);
} }
/* White inset outline on the active workspace's squircle pill. /* Accent-tinted background on the active workspace's squircle pill.
.active is set on the GtkOverlay (by setWorkspaceWidgetStatusClass in .active is set on the GtkOverlay (by setWorkspaceWidgetStatusClass in
Haskell), and .outer-pad is a child of that overlay, so Haskell), and .outer-pad is a child of that overlay, so
`.workspaces .active .outer-pad` correctly targets the pill. */ `.workspaces .active .outer-pad` correctly targets the pill. */
.workspaces .active .outer-pad { .workspaces .active .outer-pad {
background-color: rgba(241, 178, 178, 0.25);
box-shadow: box-shadow:
inset 0 0 0 2px rgba(255, 255, 255, 0.75), inset 0 0 0 1px rgba(241, 178, 178, 0.5),
inset 0 1px 0 @pill-highlight, inset 0 1px 0 @pill-highlight,
0 10px 24px @pill-shadow; 0 10px 24px @pill-shadow;
} }
@@ -239,8 +243,7 @@
background-color: rgba(255, 255, 255, 0.06); background-color: rgba(255, 255, 255, 0.06);
} }
.workspaces .window-icon-container, .workspaces .window-icon-container {
.workspaces .window-icon-container.active {
/* Don't give each window icon its own background/border; the workspace /* Don't give each window icon its own background/border; the workspace
squircle is the background. */ squircle is the background. */
background-color: transparent; background-color: transparent;
@@ -249,6 +252,13 @@
padding: 0px 2px; padding: 0px 2px;
} }
.workspaces .window-icon-container.active {
background-color: rgba(255, 255, 255, 0.10);
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 4px;
padding: 2px 4px;
}
.workspaces .active .contents, .workspaces .active .contents,
.workspaces .visible .contents { .workspaces .visible .contents {
background-color: transparent; background-color: transparent;