/* ============================================================================= * * Waybar configuration * * Configuration reference: https://github.com/Alexays/Waybar/wiki/Configuration * * =========================================================================== */ /* ----------------------------------------------------------------------------- * Keyframes * -------------------------------------------------------------------------- */ @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: 0; padding: 0; } /* The whole bar */ #waybar { background: #000000; color: white; font-family: Cantarell, Noto Sans, sans-serif; font-size: 13px; } /* Each module */ #battery, #clock, #cpu, #custom-keyboard-layout, #memory, #mode, #network, #pulseaudio, #temperature, #tray { padding-left: 10px; padding-right: 10px; } /* ----------------------------------------------------------------------------- * Module 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; } #clock { font-weight: bold; } #cpu { /* No styles */ } #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: #64727D; border-top: 2px solid white; /* To compensate for the top border and still have vertical centering */ padding-bottom: 2px; } #network { /* No styles */ } #network.disconnected { color: orange; } #pulseaudio { /* No styles */ } #pulseaudio.muted { /* No styles */ } #custom-spotify { color: rgb(102, 220, 105); } #temperature { /* No styles */ } #temperature.critical { color: red; } #tray { /* No styles */ } #window { font-weight: bold; } #workspaces button { border-top: 2px solid transparent; /* To compensate for the top border and still have vertical centering */ padding-bottom: 2px; padding-left: 10px; padding-right: 10px; color: #444; } #workspaces button.focused { border-color: white; color: #fff; } #workspaces button.urgent { border-color: #c9545d; color: #c9545d; } #workspaces button:hover { background: black; border-top: 0px; }