@define-color background #282a36; @define-color current-line #44475a; @define-color foreground #f8f8f2; @define-color comment #6272a4; @define-color cyan #8be9fd; @define-color green #50fa7b; @define-color orange #ffb86c; @define-color pink #ff79c6; @define-color purple #bd93f9; @define-color red #ff5555; @define-color yellow #f1fa8c; * { /* `otf-font-awesome` is required to be installed for icons */ font-family: FontAwesome, Roboto, Helvetica, Arial, sans-serif; font-size: 20px; } window#waybar { background-color: rgba(40, 42, 54, 0.5); border-bottom: 3px solid @current-line; color: @foreground; transition-property: background-color; transition-duration: .5s; } window#waybar.hidden { opacity: 0.2; } /* window#waybar.empty { background-color: transparent; } window#waybar.solo { background-color: #FFFFFF; } */ window#waybar.termite { background-color: #3F3F3F; } window#waybar.chromium { background-color: @background; border: none; } #workspaces button { padding: 0 5px; background-color: transparent; color: @foreground; /* Use box-shadow instead of border so the text isn't offset */ box-shadow: inset 0 -3px transparent; /* Avoid rounded borders under each workspace name */ border: none; border-radius: 0; } /* https://github.com/Alexays/Waybar/wiki/FAQ#the-workspace-buttons-have-a-strange-hover-effect */ #workspaces button:hover { background: rgba(0, 0, 0, 0.2); box-shadow: inset 0 -3px #ffffff; } #workspaces button.focused { background-color: #64727D; box-shadow: inset 0 -3px #ffffff; } #workspaces button.urgent { background-color: #eb4d4b; } #mode { background-color: #64727D; border-bottom: 3px solid #ffffff; } #clock, #battery, #cpu, #memory, #disk, #temperature, #backlight, #network, #pulseaudio, #custom-media, #tray, #mode, #idle_inhibitor, #mpd { padding: 0 10px; color: @foreground; } #window, #workspaces { margin: 0 4px; } /* If workspaces is the leftmost module, omit left margin */ .modules-left > widget:first-child > #workspaces { margin-left: 0; } /* If workspaces is the rightmost module, omit right margin */ .modules-right > widget:last-child > #workspaces { margin-right: 0; } #clock { background-color: @comment; } #battery { background-color: #ffffff; color: @background; } #battery.charging, #battery.plugged { color: #ffffff; background-color: @background; } @keyframes blink { to { background-color: #ffffff; color: @background; } } #battery.critical:not(.charging) { background-color: #f53c3c; color: #ffffff; animation-name: blink; animation-duration: 0.5s; animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: alternate; } label:focus { background-color: @background; } #cpu { background-color: @green; color: @background; } #memory { background-color: @purple; } #disk { background-color: @pink; } #backlight { background-color: @comment; } #network { background-color: @cyan; } #network.disconnected { background-color: @red; } #pulseaudio { background-color: @yellow; color: @background; } #pulseaudio.muted { background-color: @red; color: @background; } #custom-media { background-color: #66cc99; color: #2a5c45; min-width: 100px; } #custom-media.custom-spotify { background-color: #66cc99; } #custom-media.custom-vlc { background-color: #ffa000; } #temperature { color: @background; background-color: @orange; } #temperature.critical { background-color: #eb4d4b; } /* #tray { background-color: #2980b9; } */ #tray > .passive { -gtk-icon-effect: dim; } #tray > .needs-attention { -gtk-icon-effect: highlight; background-color: #eb4d4b; } #idle_inhibitor { background-color: #2d3436; } #idle_inhibitor.activated { background-color: #ecf0f1; color: #2d3436; } #mpd { background-color: @red; color: #2a5c45; } #mpd.disconnected { background-color: #f53c3c; } #mpd.stopped { background-color: #90b1b1; } #mpd.paused { background-color: #51a37a; } #language { background: @cyan; color: @background; padding: 0 5px; margin: 0 5px; min-width: 16px; } #keyboard-state { background: @cyan; color: @background; padding: 0 0px; margin: 0 5px; min-width: 16px; } #keyboard-state > label { padding: 0 5px; } #keyboard-state > label.locked { background: rgba(0, 0, 0, 0.2); }