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

taffybar: bump font size to 11pt and add icon-label spacing

Browse Source 
Increase global font size from 9pt to 11pt for better readability.
Add padding-right on icon-label icon elements to prevent nerd font
glyphs from overlapping adjacent text. Consolidate battery CSS
selectors to match the new single-widget structure.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Ivan Malison
2026-02-07 23:33:52 -08:00
committed by Kat Huang
parent 5a5758720b
commit 5eee144236
1 changed files with 9 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -10,7 +10,7 @@
/* Most text should come from Iosevka Aile; icon glyphs (Font Awesome / Nerd /* Most text should come from Iosevka Aile; icon glyphs (Font Awesome / Nerd
Font PUA) should come from a Nerd Font family to avoid tiny fallback glyphs. */ Font PUA) should come from a Nerd Font family to avoid tiny fallback glyphs. */
font-family: "Iosevka Aile", "Iosevka Nerd Font", "Iosevka NF", "Noto Sans", sans-serif; font-family: "Iosevka Aile", "Iosevka Nerd Font", "Iosevka NF", "Noto Sans", sans-serif;
font-size: 9pt; font-size: 11pt;
font-weight: 600; font-weight: 600;
color: @font-color; color: @font-color;
/* Bar background is painted on `.taffy-box`; most widget nodes stay /* Bar background is painted on `.taffy-box`; most widget nodes stay
@@ -23,6 +23,7 @@
uses a nerd font character, so force the nerd font family on it. */ uses a nerd font character, so force the nerd font family on it. */
.icon-label > .icon { .icon-label > .icon {
font-family: "Iosevka Nerd Font"; font-family: "Iosevka Nerd Font";
padding-right: 11px;
} }
/* The main bar container. border-radius matches the widget squircles (6px) /* The main bar container. border-radius matches the widget squircles (6px)
@@ -132,14 +133,12 @@
color: @widget-tray-fg; color: @widget-tray-fg;
} }
.outer-pad.battery-icon, .outer-pad.battery {
.outer-pad.battery-text {
background-color: @widget-battery-bg; background-color: @widget-battery-bg;
border-color: @widget-battery-border; 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); 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 * {
.outer-pad.battery-text * {
color: @widget-battery-fg; color: @widget-battery-fg;
} }
@@ -240,25 +239,16 @@
background-color: rgba(255, 255, 255, 0.06); background-color: rgba(255, 255, 255, 0.06);
} }
/* Inside workspaces the squircle pill IS the background, so individual .workspaces .window-icon-container,
icon containers stay transparent. */ .workspaces .window-icon-container.active {
.workspaces .window-icon-container { /* Don't give each window icon its own background/border; the workspace
squircle is the background. */
background-color: transparent; background-color: transparent;
border: 0px; border: 0px;
box-shadow: none; box-shadow: none;
padding: 0px 2px; padding: 0px 2px;
} }
/* Subtle bright ring around the focused window's icon so it stands out
from the other icons in the same workspace pill. */
.workspaces .window-icon-container.active {
background-color: rgba(255, 255, 255, 0.10);
border: 0px;
border-radius: 50%;
box-shadow: 0 0 6px rgba(255, 255, 255, 0.45);
padding: 2px;
}
.workspaces .active .contents, .workspaces .active .contents,
.workspaces .visible .contents { .workspaces .visible .contents {
background-color: transparent; background-color: transparent;
@@ -464,7 +454,7 @@ popover modelbutton:hover * {
.clock label, .clock label,
.mpris label, .mpris label,
.battery-text label { .battery label {
letter-spacing: 0.2px; letter-spacing: 0.2px;
} }