@import "themes/{{ .chezmoi.config.data.theme }}.css"; @define-color bar_bg alpha(@background, 0.85); @define-color pill_bg alpha(@panel, 0.9); @define-color pill_hover alpha(@panel, 0.98); @define-color alert_shadow alpha(@error, 0.45); /* Bar */ window#waybar { background: @bar_bg; color: @foreground; border-bottom: 1px solid @border; } /* Extra breathing room for the first/last pill in each section */ #left > :first-child, #center > :first-child, #right > :first-child { margin-top: 6px; } #left > :last-child, #center > :last-child, #right > :last-child { margin-bottom: 6px; } /* Typography */ * { font-family: "GeistMono Nerd Font", monospace; font-size: 11px; } /* Workspaces */ #workspaces { margin: 0; padding: 2px 3px; background: transparent; font-size: 10px; } #workspaces button { background: @pill_bg; color: @dim; border: 1px solid @border; border-radius: 5px; margin: 1px; padding: 2px 5px; } #workspaces button:hover { background: @pill_hover; border-color: @accent; color: @foreground; } #workspaces button.active { background: @accent; color: @background; border-color: @accent; } #workspaces button.urgent { background: @error; color: @background; border-color: @error; box-shadow: 0 0 6px @alert_shadow; } /* Shared pill look for ALL modules */ #cpu, #memory, #disk, #network, #privacy, #wireplumber, #clock, #idle_inhibitor, #gamemode, #battery, #power-profiles-daemon, #bluetooth, #tray, #temperature, #custom-swaync, #custom-temps-cycle, #custom-hyprsunset, #custom-alhp { background: @pill_bg; color: @foreground; border: 1px solid @border; border-radius: 6px; padding: 2px 6px; margin: 2px 2px; } #cpu:hover, #memory:hover, #disk:hover, #network:hover, #privacy:hover, #wireplumber:hover, #clock:hover, #idle_inhibitor:hover, #gamemode:hover, #battery:hover, #power-profiles-daemon:hover, #bluetooth:hover, #tray:hover, #temperature:hover, #custom-swaync:hover, #custom-temps-cycle:hover, #custom-hyprsunset:hover, #custom-alhp:hover { background: @pill_hover; border-color: @accent; } /* State-driven styling: low urgency = border, high urgency = full pill */ #cpu.warning, #memory.warning, #disk.warning, #battery.warning, #temperature.warning, #custom-temps-cycle.warning { border-color: @warning; } #custom-alhp.stale, #wireplumber.muted { border-color: @warning; } #custom-swaync.unread { border-color: @info; } #idle_inhibitor.activated { border-color: @info; } #privacy { border-color: @sacred; } #privacy-item, #privacy-item.screenshare, #privacy-item.audio-in, #privacy-item.audio-out { color: @sacred; } #cpu.critical, #memory.critical, #disk.critical, #battery.critical, #network.disconnected, #network.disabled, #temperature.critical, #custom-temps-cycle.critical, #custom-alhp.bad, #custom-alhp.down { background: @error; color: @background; border-color: @error; } #wireplumber.muted { color: @dim; } #idle_inhibitor.deactivated { color: @dim; } /* Group wrappers */ #group-temps, #group-volume { background: transparent; border: 0; margin: 0; padding: 0; } #custom-temps-cycle.down { color: @dim; } #group-temps #temperature { margin: 1px 0; } #group-temps #temperature:hover { background: @pill_hover; border-color: @accent; } #group-temps #temperature.critical { background: @error; color: @background; border-color: @error; } #group-temps #temperature.warning { border-color: @warning; } /* Tray */ #tray > .passive { opacity: 0.7; } #tray > .needs-attention { background: @error; color: @background; border: 1px solid @error; box-shadow: 0 0 6px @alert_shadow; } /* Volume group sizing */ #group-volume #wireplumber { margin: 1px 0; padding: 2px 3px; } #group-volume #wireplumber:hover { background: @pill_hover; border-color: @accent; } /* Tooltips */ tooltip, window#waybar tooltip { background: @panel; color: @foreground; border: 1px solid @border; border-radius: 8px; padding: 6px 8px; } /* Popup menus */ menu, .menu, popover, .popover { background: @panel; color: @foreground; border: 1px solid @border; border-radius: 8px; padding: 6px 8px; } menuitem, .menuitem { background: transparent; color: @foreground; border: 1px solid transparent; border-radius: 6px; padding: 6px 8px; } menuitem:hover, .menuitem:hover { background: @pill_hover; border-color: @accent; } menuitem:disabled, .menuitem:disabled { color: @dim; } menu separator, .menu separator { background: @border; min-height: 1px; margin: 6px 0; }