/* ============================================================================= * * 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: rgba(25, 25, 25, 0.75); /*filter: blur(10px);*/ color: white; font-family: UbuntuMono Nerd Font; font-size: 15px; } /* Each module */ #battery, #clock, #cpu, #custom-keyboard-layout, #keyboard-state, #memory, #mode, #network, #pulseaudio, #temperature, #backlight, #tray { margin: 0 5px; padding-left: 5px; padding-right: 5px; } #custom-power { padding-right: 5px; padding-left: 5px; margin-left: 5px; } #battery, #clock, #cpu, #custom-keyboard-layout, #memory, #mode, #keyboard-state, #network, #pulseaudio, #backlight, #temperature { box-shadow: inset 0 3px #ddd; } /* ----------------------------------------------------------------------------- * 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; margin-left: 10px; } #scratchpad { box-shadow: inset 0 3px #ddd; padding-bottom: 2px; padding-left: 5px; padding-right: 5px; padding-top: 2px; padding-bottom: 0; color: white; background-color: #888888; } #workspaces button { padding: 0 5px; background-color: transparent; color: #ffffff; transition: box-shadow 0.1s, font-weight 0.1s; } #workspaces button:hover { box-shadow: none; /* Remove predefined box-shadow */ text-shadow: none; /* Remove predefined text-shadow */ background: none; /* Remove predefined background color (white) */ /* transition: none; Disable predefined animations */ font-weight: bold; box-shadow: inset 0 3px #4c7899; } #workspaces button.focused { background-color: #285577; box-shadow: inset 0 3px #4c7899; transition: box-shadow 0.1s, font-weight 0.1s; } #workspaces button.urgent { background-color: #891818; box-shadow: inset 0 3px #ab2828; transition: box-shadow 0.1s, font-weight 0.1s; } #workspaces button.urgent:hover { box-shadow: inset 0 3px #4c7899; }