From 7e85f653ccf20bdc8a30dc037c56985d70b1abb4 Mon Sep 17 00:00:00 2001 From: David Runge Date: Sat, 8 Aug 2020 22:44:02 +0200 Subject: waybar: add local style.css .config/waybar/style.css: Add a local style.css for waybar which uses dimmed down colors taken from the standard. --- .config/waybar/style.css | 203 +++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 203 insertions(+) create mode 100644 .config/waybar/style.css diff --git a/.config/waybar/style.css b/.config/waybar/style.css new file mode 100644 index 0000000..63e6f57 --- /dev/null +++ b/.config/waybar/style.css @@ -0,0 +1,203 @@ +* { + border: none; + border-radius: 0; + /* `otf-font-awesome` is required to be installed for icons */ + font-family: Roboto, Helvetica, Arial, sans-serif; + font-size: 13px; + min-height: 0; +} + +window#waybar { + background-color: rgba(43, 48, 59, 0.5); + border-bottom: 3px solid rgba(100, 114, 125, 0.5); + color: #ffffff; + 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: #000000; + border: none; +} + +#workspaces button { + padding: 0 5px; + background-color: transparent; + color: #ffffff; + border-bottom: 3px solid transparent; +} + +/* 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: inherit; + border-bottom: 3px solid #ffffff; +} + +#workspaces button.focused { + background-color: #64727D; + border-bottom: 3px solid #ffffff; +} + +#workspaces button.urgent { + background-color: #eb4d4b; +} + +#mode { + background-color: #64727D; + border-bottom: 3px solid #ffffff; +} + +#clock, +#battery, +#cpu, +#memory, +#temperature, +#backlight, +#network, +#pulseaudio, +#custom-media, +#tray, +#mode, +#idle_inhibitor, +#mpd { + padding: 0 4px; + margin: 0 0px; + color: #ffffff; +} + +#clock { + background-color: #64727D; +} + +#battery { + background-color: #ffffff; + color: #000000; +} + +#battery.charging { + color: #ffffff; + background-color: #26A65B; +} + +@keyframes blink { + to { + background-color: #ffffff; + color: #000000; + } +} + +#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: #000000; +} + +#cpu { + background-color: rgba(46, 204, 113, 0.33); + color: #000000; +} + +#memory { + background-color: rgba(155, 89, 182, 0.33); +} + +#backlight { + background-color: rgba(155, 89, 182, 0.33); +} + +#network { + background-color: rgba(41, 128, 185, 0.33); +} + +#network.disconnected { + background-color: rgba(245, 60, 60, 0.33); +} + +#pulseaudio { + background-color: rgba(241, 196, 15, 0.33); + color: #000000; +} + +#pulseaudio.muted { + background-color: rgba(144, 177, 177, 0.33); + color: #2a5c45; +} + +#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 { + background-color: rgba(240, 147, 43, 0.33); +} + +#temperature.critical { + background-color: #eb4d4b; +} + +#tray { + background-color: #2980b9; +} + +#idle_inhibitor { + background-color: rgba(45, 52, 54, 0.33); +} + +#idle_inhibitor.activated { + background-color: #ecf0f1; + color: #2d3436; +} + +#mpd { + background-color: rgba(102, 204, 153, 1); + color: rgba(42, 92, 69, 1); +} + +#mpd.disconnected { + background-color: rgba(245, 60, 60, 0.0); + color: rgba(42, 92, 69, 1); +} + +#mpd.stopped { + background-color: rgba(144, 177, 177, 1); +} + +#mpd.paused { + background-color: rgba(81, 163, 122, 1); +} -- cgit v1.2.3-70-g09d2