From 528787c678088cf1fd6b64db90be02c74299c2ed Mon Sep 17 00:00:00 2001 From: Andrew Scott Date: Thu, 15 Jun 2023 04:11:05 -0400 Subject: [PATCH] Update waybar appearance --- dot_config/waybar/config | 25 ++--- dot_config/waybar/style.css | 201 ++++++++++++++++++------------------ 2 files changed, 108 insertions(+), 118 deletions(-) diff --git a/dot_config/waybar/config b/dot_config/waybar/config index 5738ec9..243b40b 100644 --- a/dot_config/waybar/config +++ b/dot_config/waybar/config @@ -17,7 +17,7 @@ "modules-right": [ "idle_inhibitor", - "pulseaudio", + "pulseaudio", "network", "cpu", "memory", @@ -60,6 +60,7 @@ }, "clock": { + "format": "{:%H:%M}", "timezone": "America/New_York", "tooltip-format": "{:%Y %B}\n{calendar}", "format-alt": "{:%Y-%m-%d}" @@ -67,7 +68,7 @@ "cpu": { "format": "{usage}% ", - "tooltip": false + "tooltip": true }, "memory": { @@ -109,7 +110,7 @@ }, "network": { - // "interface": "wlp2*", // (Optional) To force the use of this interface + // "interface": "wlan0", "format-wifi": "{essid} ({signalStrength}%) ", "format-ethernet": "{ipaddr}/{cidr} ", "tooltip-format": "{ifname} via {gwaddr} ", @@ -119,7 +120,7 @@ }, "pulseaudio": { - // "scroll-step": 1, // %, can be a float + "scroll-step": 1, "format": "{volume}% {icon} {format_source}", "format-bluetooth": "{volume}% {icon} {format_source}", "format-bluetooth-muted": " {icon} {format_source}", @@ -135,21 +136,7 @@ "car": "", "default": ["", "", ""] }, - "on-click": "pavucontrol" + "on-click": "pactl set-sink-mute @DEFAULT_SINK@ toggle" }, - - "custom/media": { - "format": "{icon} {}", - "return-type": "json", - "max-length": 40, - "format-icons": { - "spotify": "", - "default": "🎜" - }, - "escape": true, - "exec": "$HOME/.config/waybar/mediaplayer.py 2> /dev/null" // Script in resources folder - // "exec": "$HOME/.config/waybar/mediaplayer.py --player spotify 2> /dev/null" // Filter player based on name - } } - diff --git a/dot_config/waybar/style.css b/dot_config/waybar/style.css index cf5c5fb..b29d69a 100644 --- a/dot_config/waybar/style.css +++ b/dot_config/waybar/style.css @@ -1,19 +1,19 @@ * { - /* `otf-font-awesome` is required to be installed for icons */ - font-family: FontAwesome, Roboto, Helvetica, Arial, sans-serif; - font-size: 13px; + /* `otf-font-awesome` is required to be installed for icons */ + font-family: FontAwesome, Hack, monospace; + font-size: 12px; } 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; + background-color: rgba(50, 61, 67, 0.8); + border-bottom: 3px solid rgba(100, 114, 125, 0.5); + color: #d0bf9b; + transition-property: background-color; + transition-duration: 0.5s; } window#waybar.hidden { - opacity: 0.2; + opacity: 0.8; } /* @@ -21,55 +21,55 @@ window#waybar.empty { background-color: transparent; } window#waybar.solo { - background-color: #FFFFFF; + background-color: #4a555b; } */ window#waybar.termite { - background-color: #3F3F3F; + background-color: #3f3f3f; } window#waybar.chromium { - background-color: #000000; - border: none; + background-color: #d8caac; + border: none; } button { - /* Use box-shadow instead of border so the text isn't offset */ - box-shadow: inset 0 -3px transparent; - /* Avoid rounded borders under each button name */ - border: none; - border-radius: 0; + /* Use box-shadow instead of border so the text isn't offset */ + box-shadow: inset 0 -3px transparent; + /* Avoid rounded borders under each button name */ + border: none; + border-radius: 0; } /* https://github.com/Alexays/Waybar/wiki/FAQ#the-workspace-buttons-have-a-strange-hover-effect */ button:hover { - background: inherit; - box-shadow: inset 0 -3px #ffffff; + background: inherit; + box-shadow: inset 0 -3px #4a555b; } #workspaces button { - padding: 0 5px; - background-color: transparent; - color: #ffffff; + padding: 0 5px; + background-color: transparent; + color: #4a555b; } #workspaces button:hover { - background: rgba(0, 0, 0, 0.2); + background: rgba(0, 0, 0, 0.2); } #workspaces button.focused { - background-color: #64727D; - box-shadow: inset 0 -3px #ffffff; + background-color: #64727d; + box-shadow: inset 0 -3px #4a555b; } #workspaces button.urgent { - background-color: #eb4d4b; + background-color: #eb4d4b; } #mode { - background-color: #64727D; - border-bottom: 3px solid #ffffff; + background-color: #64727d; + border-bottom: 3px solid #4a555b; } #clock, @@ -88,193 +88,196 @@ button:hover { #idle_inhibitor, #scratchpad, #mpd { - padding: 0 10px; - color: #ffffff; + padding: 0 10px; + color: #4a555b; } #window, #workspaces { - margin: 0 4px; + margin: 0 4px; } /* If workspaces is the leftmost module, omit left margin */ .modules-left > widget:first-child > #workspaces { - margin-left: 0; + margin-left: 0; } /* If workspaces is the rightmost module, omit right margin */ .modules-right > widget:last-child > #workspaces { - margin-right: 0; + margin-right: 0; } #clock { - background-color: #64727D; + background-color: #6eb2a9; + color: #4a555b; } #battery { - background-color: #ffffff; - color: #000000; + background-color: #4a555b; + color: #d8caac; } -#battery.charging, #battery.plugged { - color: #ffffff; - background-color: #26A65B; +#battery.charging, +#battery.plugged { + color: #4a555b; + background-color: #26a65b; } @keyframes blink { - to { - background-color: #ffffff; - color: #000000; - } + to { + background-color: #4a555b; + color: #d8caac; + } } #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; + background-color: #f53c3c; + color: #4a555b; + animation-name: blink; + animation-duration: 0.5s; + animation-timing-function: linear; + animation-iteration-count: infinite; + animation-direction: alternate; } label:focus { - background-color: #000000; + background-color: #d8caac; } #cpu { - background-color: #2ecc71; - color: #000000; + background-color: #9bb86f; + color: #4a555b; } #memory { - background-color: #9b59b6; + background-color: #cf87a9; } #disk { - background-color: #964B00; + background-color: #964b00; } #backlight { - background-color: #90b1b1; + background-color: #90b1b1; } #network { - background-color: #2980b9; + background-color: #7fbbb3; } #network.disconnected { - background-color: #f53c3c; + background-color: #f53c3c; } #pulseaudio { - background-color: #f1c40f; - color: #000000; + background-color: #d5b26b; + color: #4a555b; } #pulseaudio.muted { - background-color: #90b1b1; - color: #2a5c45; + background-color: #90b1b1; + color: #2a5c45; } #wireplumber { - background-color: #fff0f5; - color: #000000; + background-color: #fff0f5; + color: #d8caac; } #wireplumber.muted { - background-color: #f53c3c; + background-color: #f53c3c; } #custom-media { - background-color: #66cc99; - color: #2a5c45; - min-width: 100px; + background-color: #66cc99; + color: #2a5c45; + min-width: 100px; } #custom-media.custom-spotify { - background-color: #66cc99; + background-color: #66cc99; } #custom-media.custom-vlc { - background-color: #ffa000; + background-color: #ffa000; } #temperature { - background-color: #f0932b; + background-color: #e2966c; } #temperature.critical { - background-color: #eb4d4b; + background-color: #eb4d4b; } #tray { - background-color: #2980b9; + background-color: #323d43; } #tray > .passive { - -gtk-icon-effect: dim; + -gtk-icon-effect: dim; } #tray > .needs-attention { - -gtk-icon-effect: highlight; - background-color: #eb4d4b; + -gtk-icon-effect: highlight; + background-color: #e26c6e; } #idle_inhibitor { - background-color: #2d3436; + background-color: #525c62; + color: #d0bf9b; } #idle_inhibitor.activated { - background-color: #ecf0f1; - color: #2d3436; + background-color: #d0bf9b; + color: #525c62; } #mpd { - background-color: #66cc99; - color: #2a5c45; + background-color: #66cc99; + color: #2a5c45; } #mpd.disconnected { - background-color: #f53c3c; + background-color: #f53c3c; } #mpd.stopped { - background-color: #90b1b1; + background-color: #90b1b1; } #mpd.paused { - background-color: #51a37a; + background-color: #51a37a; } #language { - background: #00b093; - color: #740864; - padding: 0 5px; - margin: 0 5px; - min-width: 16px; + background: #00b093; + color: #740864; + padding: 0 5px; + margin: 0 5px; + min-width: 16px; } #keyboard-state { - background: #97e1ad; - color: #000000; - padding: 0 0px; - margin: 0 5px; - min-width: 16px; + background: #72b783; + color: #4a555b; + padding: 0 0px; + margin: 0 0px; + min-width: 16px; } #keyboard-state > label { - padding: 0 5px; + padding: 0 5px; } #keyboard-state > label.locked { - background: rgba(0, 0, 0, 0.2); + background: rgba(0, 0, 0, 0.2); } #scratchpad { - background: rgba(0, 0, 0, 0.2); + background: rgba(0, 0, 0, 0.2); } #scratchpad.empty { - background-color: transparent; + background-color: transparent; }