fixes cava in waybar

.config/waybar/style.css

@@ -18,9 +18,8 @@
 
 .modules-left,
 .modules-right {
-  background-color: rgba(17, 24, 39, 0.5);
-  margin-top: 2px;
-  border-radius: 3px;
+  background-color: rgba(17, 24, 39, 0.1);
+  margin: 4px;
   padding: 3px 6px;
 }
 
@@ -40,20 +39,15 @@ window#waybar.empty #window {
   background-color: transparent;
 }
 
+/* --- Workspaces --- */
 #workspaces button {
   padding: 3px 2px;
   margin: 3px 2px;
   border-radius: 6px;
   color: @foreground;
-  background-color: @color0;
+  background-color: alpha(@foreground, 0.15);
   transition: all 0.3s ease-in-out;
-  font-size: 9px; /* Slightly smaller font size */
-}
-
-#workspaces {
-  background-color: transparent;
-  margin: 0;
-  padding: 0;
+  font-size: 9px;
 }
 
 #workspaces button.active {
@@ -69,15 +63,44 @@ window#waybar.empty #window {
   background-color: @color9;
 }
 
+#workspaces {
+  background-color: transparent;
+  margin: 0;
+  padding: 0;
+}
+
+/* --- Tray --- */
+#tray {
+  margin: 2px;
+}
+
+#tray > * {
+  background-color: alpha(@foreground, 0.15);
+  margin: 2px;
+}
+
+#tray > * > image,
+#tray > * image {
+  padding: 0px 10px;
+}
+
+#tray > *:hover {
+  background: @color2;
+}
+
+#tray > .needs-attention {
+  background-color: @color9;
+}
+
 #window {
   background-color: alpha(@background, 0.1);
   color: @foreground;
   border-radius: 3px;
-  padding: 1px 10px; /* Reduced padding */
+  padding: 1px 10px;
   margin: 2px;
 }
 
-/* Shared module styling */
+/* --- Shared module styling --- */
 #clock,
 #battery,
 #cpu,
@@ -91,8 +114,9 @@ window#waybar.empty #window {
 #temperature,
 #backlight,
 #network,
+#pulseaudio,
 #wireplumber,
-#pulseaudio {
+#cava {
   background-color: alpha(@foreground, 0.15);
   color: @foreground;
   padding: 0px 10px;
@@ -113,18 +137,41 @@ window#waybar.empty #window {
 #backlight:hover,
 #network:hover,
 #wireplumber:hover,
-#pulseaudio:hover {
+#pulseaudio:hover,
+#cava:hover {
   background: @color2;
 }
 
+#wireplumber {
+  border-radius: 0px 3px 3px 0px;
+  margin-left: 0px;
+}
+
+#cava {
+  border-radius: 3px 0px 0px 3px;
+  margin-right: 0px;
+}
+
 #bluetooth {
   background-color: alpha(@color3, 0.3);
 }
 
 #bluetooth.disabled {
+}
+
+#bluetooth.on {
   background-color: alpha(@color2, 1);
 }
 
+#bluetooth.connected {
+  background-color: alpha(@color4, 1);
+}
+
+#bluetooth.connected:hover,
+#bluetooth.on:hover {
+  background-color: alpha(@color3, 0.3);
+}
+
 #battery.critical:not(.charging) {
   color: @color1;
   background-color: alpha(@color2, 1);
@@ -134,15 +181,6 @@ window#waybar.empty #window {
   background-color: alpha(@color2, 1);
 }
 
-#tray > .passive {
-  -gtk-icon-effect: dim;
-}
-
-#tray > .needs-attention {
-  -gtk-icon-effect: highlight;
-  background-color: rgba(253, 77, 75, 0.5);
-}
-
 #idle_inhibitor {
   background-color: rgba(45, 52, 54, 0.5);
 }