diff --git a/dotfiles/config/taffybar/end-widget-colors.css b/dotfiles/config/taffybar/end-widget-colors.css index 25e826a9..0476e336 100644 --- a/dotfiles/config/taffybar/end-widget-colors.css +++ b/dotfiles/config/taffybar/end-widget-colors.css @@ -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); } diff --git a/dotfiles/config/taffybar/end-widget-solid.css b/dotfiles/config/taffybar/end-widget-solid.css new file mode 100644 index 00000000..eda2dbb0 --- /dev/null +++ b/dotfiles/config/taffybar/end-widget-solid.css @@ -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); +} diff --git a/dotfiles/config/taffybar/ryzen-shine.css b/dotfiles/config/taffybar/ryzen-shine.css index d6014fd6..3a9133db 100644 --- a/dotfiles/config/taffybar/ryzen-shine.css +++ b/dotfiles/config/taffybar/ryzen-shine.css @@ -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; -} diff --git a/dotfiles/config/taffybar/taffybar.css b/dotfiles/config/taffybar/taffybar.css index dd15edbb..f552fbbf 100644 --- a/dotfiles/config/taffybar/taffybar.css +++ b/dotfiles/config/taffybar/taffybar.css @@ -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; } diff --git a/dotfiles/config/taffybar/taffybar.hs b/dotfiles/config/taffybar/taffybar.hs index 54165062..af2d07ea 100644 --- a/dotfiles/config/taffybar/taffybar.hs +++ b/dotfiles/config/taffybar/taffybar.hs @@ -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 diff --git a/nixos/secrets/gws-client-secret.json.age b/nixos/secrets/gws-client-secret.json.age index d0dae6ae..51fd17b5 100644 Binary files a/nixos/secrets/gws-client-secret.json.age and b/nixos/secrets/gws-client-secret.json.age differ