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

Fix taffybar host CSS composition

Browse Source
This commit is contained in:
Ivan Malison
2026-04-11 12:30:37 -07:00
committed by Kat Huang
parent 8bd6d80ffb
commit 0ce886b202
6 changed files with 113 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
dotfiles/config/taffybar/end-widget-colors.css
View File

@@ -1,82 +1,83 @@
/* End-widget color rotation.
*
* Defines a 5-color palette and cycles through it using :nth-child().
* End widgets are children of their own container box in taffybar's layout,
* so nth-child counts only among siblings in that box.
*
* NOTE: These rules also match workspace .outer-pad elements.
* taffybar.css resets workspace pills via `.workspaces .outer-pad` which
* has equal specificity but comes later in the cascade, so it wins.
* End widgets get semantic palette classes from Haskell (`.end-widget` plus
* `.end-slot-N`) when they are packed into the bar. That keeps the CSS simple
* and avoids relying on GTK's `:nth-child(...)` matching behavior.
*
* To change the palette, edit the @define-color values below.
* To add more colors to the rotation, add end-color-6-* etc. and a
* corresponding :nth-child(Nn+6) rule block (updating N in all selectors).
* To add more colors to the rotation, add end-color-6-* etc. and a matching
* `.end-slot-6` rule.
*/
/* --- Rotation palette (5 colors) --- */
/* 1 — indigo */
@define-color end-color-1-bg rgba(50, 60, 160, 0.92);
@define-color end-color-1-bg rgb(50, 60, 160);
@define-color end-color-1-fg #d5d8f8;
@define-color end-color-1-border rgba(90, 100, 210, 0.60);
@define-color end-color-1-border rgb(90, 100, 210);
/* 2 — purple */
@define-color end-color-2-bg rgba(110, 45, 160, 0.92);
@define-color end-color-2-bg rgb(110, 45, 160);
@define-color end-color-2-fg #e8d5f8;
@define-color end-color-2-border rgba(155, 85, 210, 0.60);
@define-color end-color-2-border rgb(155, 85, 210);
/* 3 — emerald */
@define-color end-color-3-bg rgba(25, 130, 75, 0.92);
@define-color end-color-3-bg rgb(25, 130, 75);
@define-color end-color-3-fg #c8f5e0;
@define-color end-color-3-border rgba(55, 190, 115, 0.60);
@define-color end-color-3-border rgb(55, 190, 115);
/* 4 — teal */
@define-color end-color-4-bg rgba(20, 120, 140, 0.92);
@define-color end-color-4-bg rgb(20, 120, 140);
@define-color end-color-4-fg #d0f2f8;
@define-color end-color-4-border rgba(50, 175, 200, 0.60);
@define-color end-color-4-border rgb(50, 175, 200);
/* 5 — rose */
@define-color end-color-5-bg rgba(160, 40, 70, 0.92);
@define-color end-color-5-bg rgb(160, 40, 70);
@define-color end-color-5-fg #f8d5e0;
@define-color end-color-5-border rgba(210, 80, 115, 0.60);
@define-color end-color-5-border rgb(210, 80, 115);
/* --- Color rotation rules --- */
/* Slot 1: indigo (child 1, 6, 11, ...) */
.outer-pad:nth-child(5n+1) {
/* Slot 1: indigo */
.outer-pad.end-widget.end-slot-1 {
background-color: @end-color-1-bg;
background-image: none;
border-color: @end-color-1-border;
color: @end-color-1-fg;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 24px rgba(0, 0, 0, 0.30);
}
/* Slot 2: purple (child 2, 7, 12, ...) */
.outer-pad:nth-child(5n+2) {
/* Slot 2: purple */
.outer-pad.end-widget.end-slot-2 {
background-color: @end-color-2-bg;
background-image: none;
border-color: @end-color-2-border;
color: @end-color-2-fg;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 24px rgba(0, 0, 0, 0.30);
}
/* Slot 3: emerald (child 3, 8, 13, ...) */
.outer-pad:nth-child(5n+3) {
/* Slot 3: emerald */
.outer-pad.end-widget.end-slot-3 {
background-color: @end-color-3-bg;
background-image: none;
border-color: @end-color-3-border;
color: @end-color-3-fg;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 24px rgba(0, 0, 0, 0.30);
}
/* Slot 4: teal (child 4, 9, 14, ...) */
.outer-pad:nth-child(5n+4) {
/* Slot 4: teal */
.outer-pad.end-widget.end-slot-4 {
background-color: @end-color-4-bg;
background-image: none;
border-color: @end-color-4-border;
color: @end-color-4-fg;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 24px rgba(0, 0, 0, 0.30);
}
/* Slot 5: rose (child 5, 10, 15, ...) */
.outer-pad:nth-child(5n+5) {
/* Slot 5: rose */
.outer-pad.end-widget.end-slot-5 {
background-color: @end-color-5-bg;
background-image: none;
border-color: @end-color-5-border;
color: @end-color-5-fg;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 24px rgba(0, 0, 0, 0.30);
@@ -85,7 +86,8 @@
/* --- SNI tray (center widget, not part of the rotation) --- */
.outer-pad.sni-tray {
background-color: @widget-tray-bg;
border-color: @widget-tray-border;
background-color: rgb(65, 70, 100);
background-image: none;
border-color: rgb(110, 115, 160);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 24px rgba(0, 0, 0, 0.30);
}

50
dotfiles/config/taffybar/end-widget-solid.css Normal file
View File

@@ -0,0 +1,50 @@
/* Final pass overrides for end-widget pill chrome.
*
* This is loaded after the main bar/theme CSS so the end-widget palette stays
* vivid even if earlier rules or theme rendering make the pills read too
* transparent on some hosts.
*/
.outer-pad.end-widget.end-slot-1 {
background-color: rgb(50, 60, 160);
background-image: none;
border-color: rgb(90, 100, 210);
}
.outer-pad.end-widget.end-slot-2 {
background-color: rgb(110, 45, 160);
background-image: none;
border-color: rgb(155, 85, 210);
}
.outer-pad.end-widget.end-slot-3 {
background-color: rgb(25, 130, 75);
background-image: none;
border-color: rgb(55, 190, 115);
}
.outer-pad.end-widget.end-slot-4 {
background-color: rgb(20, 120, 140);
background-image: none;
border-color: rgb(50, 175, 200);
}
.outer-pad.end-widget.end-slot-5 {
background-color: rgb(160, 40, 70);
background-image: none;
border-color: rgb(210, 80, 115);
}
.outer-pad.sni-tray {
background-color: rgb(65, 70, 100);
background-image: none;
border-color: rgb(110, 115, 160);
}
.outer-pad.end-widget,
.outer-pad.sni-tray {
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.10),
inset 0 0 0 1px rgba(255, 255, 255, 0.10),
0 10px 24px rgba(0, 0, 0, 0.30);
}

50
dotfiles/config/taffybar/ryzen-shine.css
View File

@@ -1,3 +1,5 @@
@import url("taffybar.css");
/* Host-specific density tweaks for ryzen-shine. Keep the same visual style,
* but shrink the bar back down after the upstream sizing change.
*/
@@ -5,51 +7,3 @@
.taffy-box {
font-size: 10pt;
}
.outer-pad {
margin: 2px 3px;
}
.inner-pad {
padding: 1px 8px;
}
.icon-label > .icon {
padding-right: 8px;
}
.ram-swap .icon-label > .icon {
min-width: 18px;
padding-right: 6px;
}
.workspaces .outer-pad {
margin: 2px 2px;
}
.workspaces .inner-pad {
padding: 1px 2px 1px 8px;
}
.workspace-label {
font-size: 9pt;
}
.workspaces .overlay-box .workspace-label {
padding: 1px 4px 3px 10px;
}
.window-icon-container {
padding: 0px 3px;
}
.auto-size-image, .sni-tray {
padding: 0px 3px;
}
.sni-tray-expand-toggle,
.sni-tray-edit-toggle,
.sni-tray-settings-toggle {
padding: 0px 3px;
margin-left: 2px;
}

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

@@ -1,8 +1,12 @@
@import url("theme.css");
@import url("end-widget-colors.css");
@import url("end-widget-solid.css");
/* Widget/layout styling for taffybar.
*
* Colors live in `theme.css`, and the end-widget palette lives in
* `end-widget-colors.css`. Both are loaded explicitly from `cssPaths` so they
* hot-reload reliably and do not depend on GTK's `@import` handling.
* This file is the single CSS entrypoint for the shared bar theme. Supporting
* stylesheets are pulled in via `@import` so GTK sees one user stylesheet per
* host rather than several separately loaded files with fragile precedence.
*/
/* Base typography + foreground color for the bar itself.
@@ -15,7 +19,7 @@
/* 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-family: "Iosevka Aile", "Iosevka Nerd Font", "Iosevka NF", "Noto Sans", sans-serif;
font-size: 11pt;
font-size: 10.5pt;
font-weight: 600;
color: @font-color;
text-shadow: none;
@@ -48,13 +52,14 @@
padding: 0px 4px;
}
/* The main bar container. border-radius matches the widget squircles (6px)
so the bar itself has softly rounded corners. */
/* The main bar container. Keep the bar and widget pills aligned so the whole
surface reads as one rounded system rather than a mix of sharp and round
shapes. */
.taffy-box {
border-width: 0px;
padding: 0px;
margin: 0px;
border-radius: 6px;
border-radius: 10px;
box-shadow: none;
background-color: @bar-background;
background-image: none;
@@ -62,12 +67,12 @@
/* Each widget is wrapped in outer-pad > inner-pad > contents by
buildContentsBox (Haskell). The outer-pad draws the squircle
background pill. border-radius kept low (6px) for a more squared
"squircle" shape rather than a fully rounded pill. */
background pill. Use a clearly rounded radius so the pill silhouette stays
visible even on the denser desktop monitor. */
.outer-pad {
background-color: @pill-background;
border: 0px;
border-radius: 6px;
border-radius: 10px;
margin: 4px 4px;
/* No white outline; define shape with subtle inner highlight + dark stroke. */
box-shadow:
@@ -78,7 +83,7 @@
.inner-pad {
padding: 2px 10px;
border-radius: 4px;
border-radius: 8px;
}
.contents {
@@ -142,7 +147,7 @@
.workspaces .contents {
box-shadow: none;
border-radius: 5px;
border-radius: 8px;
border-width: 0px;
border-style: solid;
border-color: @transparent;
@@ -153,7 +158,7 @@
/* Overlay label (workspace number) that sits inside the icon "squircle". */
padding: 1px 3px;
margin: 0px;
font-size: 10pt;
font-size: 9.5pt;
opacity: 0.92;
font-weight: 700;
transition: color .2s;
@@ -231,7 +236,7 @@
.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;
border-radius: 7px;
padding: 2px 4px;
}
@@ -247,7 +252,7 @@
.window-icon-container {
transition: opacity .2s, box-shadow .2s;
opacity: 1;
border-radius: 5px;
border-radius: 8px;
transition: background-color .2s;
background-color: rgba(255, 255, 255, 0.04);
padding: 1px 4px;
@@ -266,7 +271,7 @@
.sni-tray-settings-toggle {
background-color: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 6px;
border-radius: 8px;
padding: 0px 4px;
margin-left: 3px;
}
@@ -343,7 +348,7 @@
.wakeup-debug-hit {
background-color: rgba(255, 255, 255, 0.22);
border-radius: 5px;
border-radius: 8px;
}

10
dotfiles/config/taffybar/taffybar.hs
View File

@@ -246,13 +246,13 @@ workspaceWindowIconGetter =
-- ** Host Overrides
defaultCssFiles :: [FilePath]
defaultCssFiles = ["theme.css", "end-widget-colors.css", "taffybar.css"]
defaultCssFiles = ["taffybar.css"]
cssFilesByHostname :: [(String, [FilePath])]
cssFilesByHostname =
[ ("imalison-home", ["theme.css", "end-widget-colors.css", "taffybar.css"]),
("ryzen-shine", ["theme.css", "end-widget-colors.css", "taffybar.css", "ryzen-shine.css"]),
("stevie-nixos", ["theme.css", "end-widget-colors.css", "taffybar.css"])
[ ("imalison-home", ["taffybar.css"]),
("ryzen-shine", ["ryzen-shine.css"]),
("stevie-nixos", ["taffybar.css"])
]
laptopHosts :: [String]
@@ -509,6 +509,8 @@ cpuWidget =
cpuMonitorNew
defaultGraphConfig
{ graphDataColors = [(0, 1, 0.5, 0.8), (1, 0, 0, 0.5)],
graphBackgroundColor = (0, 0, 0, 0),
graphBorderWidth = 0,
graphLabel = Just "CPU",
graphWidth = 50,
graphDirection = LEFT_TO_RIGHT

BIN
nixos/secrets/gws-client-secret.json.age
View File

Binary file not shown.