/* ~/.config/waybar/style.css */ @import "./catppuccin-waybar/themes/mocha.css"; /* --- Global Reset --- */ * { border: none; border-radius: 12px; min-height: 0; font-family: JetBrainsMono Nerd Font, sans-serif; font-size: 12px; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); } /* --- Bar Background (Floating Island Style) --- */ window#waybar { background-color: transparent; color: @text; } /* --- Top Bar Special Handling --- */ window#waybar.top { margin-top: 6px; } /* --- Bottom Bar Special Handling --- */ window#waybar.bottom { margin-bottom: 6px; } /* --- Shared Island Styling --- */ #workspaces, #window, #tray, #custom-sys, #hardware, #custom-disk-root, #custom-bluetooth-audio, #custom-volume, #custom-buds, #custom-mic, #custom-gamemode, #custom-power_status { background-color: alpha(@surface0, 0.8); margin: 4px 6px; padding: 4px 16px; border: 1px solid alpha(@surface1, 0.5); box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15); color: @text; /* Unifies all standard text to the soft Catppuccin white */ } /* --- Workspaces --- */ #workspaces { padding: 2px 8px; } #workspaces button { padding: 0; margin: 4px; min-width: 12px; min-height: 12px; background-color: @subtext0; /* Subtle dark gray for inactive */ color: transparent; border-radius: 12px; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); } #workspaces button.active { min-width: 30px; background-color: @mauve; /* Signature Catppuccin accent */ } #workspaces button.active:hover { min-width: 30px; background-color: @mauve; } #workspaces button:hover { background-color: @lavender; min-width: 20px; } #workspaces button.urgent { background-color: @red; } /* --- Clock (Centered Pill) --- */ #clock { background: linear-gradient(45deg, @mauve, @lavender); /* Cohesive pastel gradient */ color: @surface0; font-weight: 900; margin: 4px 6px; padding: 4px 20px; border-radius: 12px; box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15); } /* --- Power Status --- */ #custom-power_status { font-weight: bold; } #custom-power_status.charging { color: @green; } #custom-power_status.warning { color: @peach; } #custom-power_status.critical { color: @red; animation: blink 1s infinite alternate; } @keyframes blink { to { color: @base; background-color: @red; } } /* --- Hardware Group (Left Bottom) --- */ #hardware { border-radius: 24px; padding: 4px 10px; } /* Strip backgrounds and borders from the items inside the group */ #custom-cpu, #custom-mem, #custom-network { background-color: transparent; border: none; box-shadow: none; margin: 0; padding: 0 8px; } /* Subtle vertical separator line between them */ #custom-cpu, #custom-mem { border-right: 1px solid alpha(@surface1, 0.5); border-radius: 0; } /* Hardware Semantic Alerts */ #custom-cpu.high, #custom-mem.high { color: @peach; } #custom-cpu.max, #custom-mem.max { color: @red; } /* --- Center Bottom Utilities --- */ #custom-gamemode.active { color: @mauve; /* Matches the workspace accent */ /* padding-left: 9px; */ } /* --- Right Bottom Controls Semantic Alerts --- */ #custom-volume.muted, #custom-mic.muted { color: @overlay1; /* Dims when muted */ } #custom-bluetooth-audio.disabled { color: @overlay1; /* Green for active ANC */ } #custom-bluetooth-audio.connected { color: @blue; /* Green for active ANC */ } #custom-bluetooth-audio.anc-off { color: @blue; /* Green for active ANC */ } #custom-bluetooth-audio.anc-active { color: @blue; /* Green for active ANC */ } #custom-bluetooth-audio.anc-aware { color: @blue; /* Yellow for transparency mode */ } #custom-bluetooth-audio.disconnected { color: @text; /* Gray when off */ } /* --- Hover States --- */ #custom-volume:hover, #custom-buds:hover, #custom-mic:hover, #custom-bluetooth-audio:hover, #custom-power_status:hover { background-color: @surface1; color: @mauve; /* Subtle accent color on hover instead of jarring borders */ } /* --- Tooltip --- */ tooltip { background-color: alpha(@base, 0.9); border: 1px solid @surface1; border-radius: 8px; } tooltip label { color: @text; padding: 8px; }