/* ============================================================================= * * Waybar configuration * * Configuration reference: https://github.com/Alexays/Waybar/wiki/Configuration * * This configuration is based on: https://github.com/robertjk/dotfiles/ * * =========================================================================== */ /* ----------------------------------------------------------------------------- * 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 { color: white; font-family: SauceCodePro Nerd Font Propo; font-size: 14px; } /* Each module */ #battery, #clock, #cpu, #custom-keyboard-layout, #memory, #mode, #network, #pulseaudio, #temperature, #custom-current-task, #custom-apps-menu, #custom-power-menu, #custom-notification, #custom-mouse-battery, #idle_inhibitor, #workspaces, #backlight, #tray { margin-left: 8px; margin-right: 8px; } /* ----------------------------------------------------------------------------- * 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 */ } #tray { /* No styles */ } #idle_inhibitor { font-weight: bold; font-size: 18px; padding-right: 10px; margin: 0px; } #custom-power-menu { font-weight: bold; font-size: 18px; padding-right: 10px; margin: 0px; } #custom-apps-menu { font-weight: bold; font-size: 18px; padding-right: 10px; } #custom-current-task { font-weight: bold; margin-left: 16px; } #custom-current-task.active { color: green; } #custom-current-task.paused { color: gray; } #custom-mouse-battery.warning { color: orange; } #custom-mouse-battery.critical { color: red; } #workspaces { margin: 0px; } #workspaces button { border-top: 2px solid transparent; /* To compensate for the top border and still have vertical centering */ padding-bottom: 2px; padding-left: 8px; padding-right: 8px; color: #888888; } #workspaces button.focused { border-color: #4c7899; color: white; background-color: #285577; } #workspaces button.urgent { border-color: #c9545d; color: #c9545d; }