@import "catppuccin.css"; * { /* `otf-font-awesome` is required to be installed for icons */ font-family: FontAwesome, Inconsolata Nerd Font; font-size: 13px; } window#waybar { background-color: @base; color: @text; transition-property: background-color; transition-duration: .5s; } button { /* Use box-shadow instead of border so the text isn't offset */ box-shadow: inset 0 -3px transparent; /* Avoid rounded borders under each button name */ border: none; border-radius: 0; } /* https://github.com/Alexays/Waybar/wiki/FAQ#the-workspace-buttons-have-a-strange-hover-effect */ button:hover { background: inherit; } #workspaces { background-color: @crust; padding: 2px; margin: 5px; border-radius: 10px; } #workspaces button { padding: 0 5px; background-color: transparent; color: @sky; font-size: 11px; } #workspaces button:hover { background: rgba(0, 0, 0, 0.2); } #workspaces button.urgent { background-color: #eb4d4b; } #mode { background-color: #64727D; box-shadow: inset 0 -3px #ffffff; } @keyframes blink { to { background-color: #ffffff; color: #000000; } } /* Using steps() instead of linear as a timing function to limit cpu usage */ #battery.critical:not(.charging) { background-color: #f53c3c; color: #ffffff; animation-name: blink; animation-duration: 0.5s; animation-timing-function: steps(12); animation-iteration-count: infinite; animation-direction: alternate; } label:focus { background-color: #000000; } #pulseaudio, #battery, #network, #cpu, #memory, #temperature, #backlight, #language, #battery, #clock, #tray { background-color: @mantle; padding: 5px; margin: 3px; border-radius: 10px; } #pulseaudio { color: @maroon; } #network { color: @sapphire; } #cpu { color: @flamingo; } #memory { color: @blue; } #temperature { color: @red; } #backlight { color: @teal; } #language { color: @rosewater; } #battery { color: @lavender; } #clock { color: @pink; }