/* ============================================================================= * * Waybar configuration * * Configuration reference: https://github.com/Alexays/Waybar/wiki/Configuration * * =========================================================================== */ /* ----------------------------------------------------------------------------- * Keyframes * -------------------------------------------------------------------------- */ @define-color highlight #ffbb00 ; @define-color base1 #111111 ; @define-color lgray #cccccc ; @define-color dgray #777777 ; @define-color urgent #ee1100 ; @keyframes blink-warning { 70% { color: white; } to { color: white; background-color: orange; } } @keyframes blink-critical { 70% { color: white; } to { color: white; background-color: red; } } /* ----------------------------------------------------------------------------- * Base styles * -------------------------------------------------------------------------- */ /* Reset all styles */ * { border: none; border-radius: 0; min-height: 0; margin: 0px; padding: 0; all: unset; } /* The whole bar */ #waybar { background: transparent; color: #bebebe; background-color: @base1; font-family: "Ubuntu", "Font Awesome 6 Free-Solid"; /* font-weight: bold; */ font-size: 14px; } /* Every modules */ #battery, #clock, #backlight, #cpu, #custom-keyboard-layout, #memory, #mode, #custom-weather, #network, #pulseaudio, #temperature, #tray, #idle_inhibitor, #custom-PBPbattery { padding:0.0rem 1rem; margin: 0px 0px; } /* ----------------------------------------------------------------------------- * Modules styles * -------------------------------------------------------------------------- */ #battery { animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: alternate; } #battery.warning { color: orange; } #battery.critical { color: red; } /* #battery.warning.discharging { animation-name: blink-warning; animation-duration: 3s; } #battery.critical.discharging { animation-name: blink-critical; animation-duration: 2s; } */ #cpu.warning { color: orange; } #cpu.critical { color: red; } #memory { animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: alternate; } #memory.warning { color: orange; } #memory.critical { color: red; animation-name: blink-critical; animation-duration: 2s; } #mode { background: @highlight; border-bottom: 3px transparent; color:white; } #network.disconnected { color: orange; } #temperature.critical { color: red; } #workspaces { font-size:14px; margin: 2px; margin-top: 2px; } #workspaces button { border-bottom: 0px solid transparent; padding-bottom: 2px; padding-top: 3px; min-width: 20px; margin-right: 1px; color: @lgray; opacity: 0.5; } #workspaces button.current_output { opacity: 1; } #workspaces button.visible { border-bottom: 3px solid @lgray; padding-top: 0px; } #workspaces button.focused { border-bottom: 3px solid transparent; padding-bottom: 3px; } #workspaces button.current_output.visible { border-bottom: 3px solid @dgray; padding-top: 0px; } #workspaces button.current_output.focused { border-bottom: 3px solid @highlight; padding-top: 0px; } #workspaces button.urgent { border-bottom: 3px solid @urgent; padding-top: 0px; color: @urgent; }