/* -------- Catppuccin Latte Palette -------- */ @define-color base #EFF1F5; @define-color mantle #E6E9EF; @define-color crust #DCE0E8; @define-color text #4C4F69; @define-color subtext0 #6C6F85; @define-color green #40A02B; @define-color yellow #DF8E1D; @define-color sky #04A5E5; @define-color rose #D20F39; @define-color blue #1E66F5; @define-color surface2 #ACB0BE; @define-color peach #FE640B; /* -------- Base Styles -------- */ * { font-family: "FiraCode Nerd Font", "Font Awesome 7 Free"; font-size: 15px; } window#waybar { /* background: @base; */ background: transparent; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); transition: background-color .35s ease, color .35s ease; } window#waybar.hidden { opacity: 0.2; } window#waybar.termite { background: @base; } window#waybar.chromium { background: @base; border: none; } /* -------- Module “pill” look -------- */ #workspaces, #clock, #mpris, #pulseaudio, #bluetooth, #upower, #network { background: @base; border: none; border-radius: 5px; padding: 3px 8px; } /* consistent gaps between modules */ .modules-left > widget, .modules-right > widget { margin: 0 15px; } .modules-left > widget:first-child { margin-left: 0; } .modules-right > widget:last-child { margin-right: 0; } /* -------- Buttons (generic) -------- */ /* Buttons */ button { border: none; border-radius: 8px; background: transparent; color: @text; transition: background-color .2s ease, box-shadow .2s ease; box-shadow: inset 0 -3px transparent; } /* hover */ button:hover { background: rgba(255,255,255,0.08); box-shadow: inset 0 -3px @green; } /* active (no CSS transform in GTK; simulate press with padding + shadow) */ button:active { padding-top: 1px; /* nudge down visually */ padding-bottom: 1px; /* keep height stable */ box-shadow: inset 0 -2px @green; color: @base; } /* -------- Workspaces -------- */ #workspaces { background: @base; } #workspaces button { padding: 2px 8px; margin: 0 2px; border-radius: 8px; transition: background-color .2s ease, box-shadow .2s ease; } #workspaces button:hover { background: rgba(255,255,255,0.08); } #workspaces button.active, #workspaces button.focused { background: @green; color: @base; box-shadow: inset 0 -3px @green; } #workspaces button.urgent { background: @rose; color: @base; box-shadow: inset 0 -3px rgba(0,0,0,0.2); } /* -------- Clock -------- */ #clock { background: @green; color: @base; font-weight: 600; letter-spacing: 0.2px; } /* -------- Mpris -------- */ #mpris { background: @green; color: @base; font-weight: 600; letter-spacing: 0.2px; } /* -------- Pavu -------- */ #pulseaudio { background: @green; color: @base; font-weight: 600; letter-spacing: 0.2px; } /* -------- Bluetooth -------- */ #bluetooth { background: @green; color: @base; font-weight: 600; letter-spacing: 0.2px; } /* -------- Upower -------- */ #upower { background: @green; color: @base; font-weight: 600; letter-spacing: 0.2px; } /* -------- Network -------- */ #network { background: @green; color: @base; font-weight: 600; letter-spacing: 0.2px; } /* -------- Helpers -------- */ @keyframes blink { to { background-color: @green; color: @base; } }