update

.config/waybar/style.css

@@ -1,15 +1,15 @@
 * {
   border: none;
-  border-radius: 8px;
-  font-family: "SauceCodePro Nerd Font", "SauceCodePro Nerd Font Mono", "Symbols Nerd Font Mono", "Symbols Nerd Font", "Font Awesome 7 Free", sans-serif;
-  font-size: 14px;
+  border-radius: 10px;
+  font-family: "Ubuntu", "SauceCodePro Nerd Font", "SauceCodePro Nerd Font Mono", "Symbols Nerd Font Mono", "Symbols Nerd Font", "Font Awesome 7 Free", sans-serif;
+  font-size: 15px;
   min-height: 0;
 }
 
 window#waybar {
-  background: alpha(#2e3440, 0.92);
+  background: #2e3440;
   color: #eceff4;
-  border-bottom: 2px solid alpha(#5e81ac, 0.55);
+  border-bottom: 2px solid #5e81ac;
 }
 
 tooltip {
@@ -19,8 +19,10 @@ tooltip {
 }
 
 #workspaces {
-  background: alpha(#3b4252, 0.88);
+  background: #3b4252;
   padding: 2px 6px;
+  margin: 4px 3px;
+  border: 1px solid #4c566a;
 }
 
 #workspaces button {
@@ -31,7 +33,7 @@ tooltip {
 }
 
 #workspaces button:hover {
-  background: alpha(#4c566a, 0.55);
+  background: #434c5e;
 }
 
 #workspaces button.active {
@@ -45,6 +47,8 @@ tooltip {
 }
 
 #window,
+#custom-spotify,
+#custom-weather,
 #clock,
 #custom-screenshot,
 #idle_inhibitor,
@@ -55,40 +59,87 @@ tooltip {
 #tray,
 #custom-mount-data,
 #custom-mount-usb1 {
-  background: alpha(#3b4252, 0.88);
-  color: #eceff4;
+  background: #3b4252;
+  color: #e5e9f0;
   padding: 0 10px;
   margin: 4px 3px;
+  border: 1px solid #4c566a;
 }
 
 #clock {
-  background: alpha(#5e81ac, 0.35);
+  background: #34425a;
+  color: #eceff4;
+  border-color: #81a1c1;
+}
+
+#custom-spotify {
+  background: #3a4a3f;
+  color: #eceff4;
+  font-weight: 600;
+  border-color: #a3be8c;
+}
+
+#custom-spotify.paused {
+  background: #5b4f3b;
+  color: #eceff4;
+  border-color: #d08770;
+}
+
+#custom-spotify.stopped,
+#custom-spotify.idle {
+  background: #4c566a;
+  color: #d8dee9;
+  border-color: #616e88;
+}
+
+#custom-weather {
+  background: #34504f;
+  color: #eceff4;
+  font-weight: 600;
+  border-color: #88c0d0;
 }
 
 #cpu,
 #memory {
-  background: alpha(#81a1c1, 0.25);
+  background: #384b5e;
+  color: #eceff4;
+  border-color: #5e81ac;
 }
 
 #network {
-  background: alpha(#88c0d0, 0.22);
+  background: #2f4f5a;
+  color: #eceff4;
+  border-color: #81a1c1;
 }
 
 #network.disconnected {
-  color: #bf616a;
-  background: alpha(#bf616a, 0.18);
+  color: #eceff4;
+  background: #5a3942;
+  border-color: #d08770;
+}
+
+#pulseaudio {
+  background: #4b4256;
+  color: #eceff4;
+  border-color: #b48ead;
 }
 
 #pulseaudio.muted {
-  color: #ebcb8b;
+  color: #eceff4;
+  background: #5a433f;
+  border-color: #d08770;
 }
 
 #idle_inhibitor.activated {
-  color: #a3be8c;
+  color: #eceff4;
+  background: #3a4a3f;
+  border-color: #a3be8c;
 }
 
 #idle_inhibitor.deactivated {
-  color: #bf616a;
+  color: #eceff4;
+  background: #34425a;
+  border-color: #81a1c1;
 }
 
 #custom-mount-data,
@@ -98,12 +149,14 @@ tooltip {
 
 #custom-mount-data.mounted,
 #custom-mount-usb1.mounted {
-  color: #a3be8c;
-  background: alpha(#a3be8c, 0.12);
+  color: #eceff4;
+  background: #3a4a3f;
+  border-color: #a3be8c;
 }
 
 #custom-mount-data.unmounted,
 #custom-mount-usb1.unmounted {
-  color: #bf616a;
-  background: alpha(#bf616a, 0.16);
+  color: #eceff4;
+  background: #5a3942;
+  border-color: #d08770;
 }