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

taffybar: add theme.css and update CSS styling

Browse Source 
Extract color variables into a dedicated theme.css and import it from
the main stylesheet.  Remove the bar gradient in favor of a flat
background, adjust workspace overlay-box margins, add SNI tray
double-padding fix, and clean up whitespace.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Ivan Malison
2026-02-07 16:02:18 -08:00
committed by Kat Huang
parent a22e4cfb8b
commit 05c7d20b5c
2 changed files with 49 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,6 +2,7 @@
* *
* Colors live in `theme.css` (loaded via `palette.css`). * Colors live in `theme.css` (loaded via `palette.css`).
*/ */
import theme.css
.taffy-window * { .taffy-window * {
/* Most text should come from Iosevka Aile; icon glyphs (Font Awesome / Nerd /* Most text should come from Iosevka Aile; icon glyphs (Font Awesome / Nerd
@@ -19,15 +20,12 @@
.taffy-box { .taffy-box {
border-width: 0px; border-width: 0px;
padding: 0px; padding: 0px;
margin: 0px; margin: 0px;
border-radius: 0px; border-radius: 0px;
box-shadow: none; box-shadow: none;
background-color: @bar-background; background-color: @bar-background;
background-image: linear-gradient(to bottom, @bar-gradient-start, @bar-gradient-end); background-image: none;
} }
.outer-pad { .outer-pad {
@@ -118,14 +116,16 @@
background-color: @transparent; background-color: @transparent;
} }
/* The workspace label is overlaid bottom-left over the workspace icon strip. */ /* The workspace label is overlaid bottom-left over the workspace icon strip.
Positioning: halign=start (left), valign=end (bottom) set in Haskell code.
Margins offset from that anchor point. */
.workspaces .overlay-box { .workspaces .overlay-box {
transition: background-color .2s, border-color .2s; transition: background-color .2s, border-color .2s;
/* The workspace widget's outer-pad has margin; without this, the overlay /* Offset from the bottom-left anchor into the pill area.
sits in the margin area and looks "outside" the squircle. */ Increase margin-left to push right, margin-bottom to push up. */
margin-left: 10px; margin-left: 6px;
margin-bottom: 10px; margin-top: 4px;
background-color: transparent; background-color: transparent;
border: none; border: none;
@@ -201,6 +201,11 @@
padding: 1px 4px; padding: 1px 4px;
} }
/* If the SNI tray is wrapped in our standard widget box, avoid double-padding. */
.sni-tray .sni-tray {
padding: 0px;
}
.window-icon-container.active { .window-icon-container.active {
background-color: rgba(255, 255, 255, 0.13); background-color: rgba(255, 255, 255, 0.13);
border-color: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.16);

35
dotfiles/config/taffybar/theme.css Normal file
View File

@@ -0,0 +1,35 @@
/* Taffybar palette/theme variables.
*
* `palette.css` imports this file so host configs can keep referencing the
* historical filename while we iterate on a more structured theme.
*/
@define-color accent #f1b2b2;
/* Bar chrome */
@define-color bar-background rgba(0, 0, 0, 0.55);
@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);
/* The subtle translucent "sheet" behind all widgets. */
@define-color bar-overlay rgba(0, 0, 0, .2);
/* Widgets (pill/squircle containers) */
@define-color pill-background rgba(48, 52, 69, 0.92);
@define-color pill-border rgba(92, 95, 120, 0.85);
@define-color pill-highlight rgba(255, 255, 255, 0.10);
@define-color pill-shadow rgba(0, 0, 0, 0.28);
/* Text */
@define-color font-color #e7e4ee;
@define-color font-muted #b8b1c6;
/* Menus: keep high-contrast and readable while iterating. */
@define-color menu-background-color #ffffff;
@define-color menu-font-color #000000;
@define-color menu-highlight rgba(0, 0, 0, 0.08);
@define-color transparent rgba(0.0, 0.0, 0.0, 0.0);
@define-color white #ffffff;
@define-color black #000000;