waybar: theres never be an end

waybar/style.css

@@ -72,13 +72,20 @@ tooltip {
     background-color: alpha(@base, 0.6);
     font-size: 15px; /* Slightly smaller font size */
     font-weight: 800;
-    color: @foreground;
+    color: @subtext1;
     border-radius: 14px;
     padding: 3px 6px; /* Reduced padding */
     margin: 2px;
     opacity: 1;
 }
 
+#custom-mediaplayer {
+    background-color: alpha(@base, 0.6);
+    border-radius: 14px;
+    padding: 3px 12px;
+    color: @lavender;
+}
+
 #clock,
 #battery,
 #cpu,
@@ -113,6 +120,60 @@ tooltip {
     padding: 6px; /* Adjusted padding */
 }
 
+#monitors {
+    background-color: alpha(@base, 0.6);
+    border-radius: 14px;
+    padding: 6px;
+}
+
+#network.speed {
+    background: transparent;
+    color: @lavender;
+    padding: 0;
+}
+
+#temperature {
+    background: transparent;
+    color: @maroon;
+    padding: 0px;
+}
+
+#memory {
+    color: @peach;
+    background: transparent;
+    padding: 0px;
+}
+
+#cpu {
+    color: @yellow;
+    background: transparent;
+    padding: 0px;
+}
+
+#battery {
+    background: transparent;
+    color: #c0caf5;
+    padding: 0;
+}
+
+#battery.charging,
+#battery.full,
+#battery.plugged {
+    color: @green;
+}
+
+#backlight {
+    background: transparent;
+    color: @teal;
+    padding: 0;
+}
+
+#wireplumber {
+    background: transparent;
+    color: @sapphire;
+    padding: 0;
+}
+
 #custom-screenshot_t {
     background-color: alpha(@base, 0.6);
     border-radius: 14px;
@@ -125,12 +186,6 @@ tooltip {
     padding: 3px 12px;
 }
 
-#custom-mediaplayer {
-    background-color: alpha(@base, 0.6);
-    border-radius: 14px;
-    padding: 3px 12px;
-}
-
 #tray {
     background-color: alpha(@base, 0.6);
     border-radius: 14px;
@@ -138,18 +193,6 @@ tooltip {
     border: 3px solid @blue;
 }
 
-#cpu {
-    color: @maroon;
-    background-color: alpha(@base, 0.6);
-    padding: 6px;
-}
-
-#memory {
-    color: @yellow;
-    background-color: alpha(@base, 0.6);
-    padding: 6px;
-}
-
 #custom-power {
     background-color: alpha(@base, 0.6);
     border-radius: 14px;
@@ -245,29 +288,11 @@ tooltip {
     color: #7d9bba;
 }
 
-#wireplumber {
-    color: @teal;
-}
-
-#backlight {
-    color: #8fbcbb;
-}
-
 #clock {
     color: #c8d2e0;
     border: 3px solid @blue;
 }
 
-#battery {
-    color: #c0caf5;
-}
-
-#battery.charging,
-#battery.full,
-#battery.plugged {
-    color: @green;
-}
-
 @keyframes blink {
     to {
         background-color: rgba(30, 34, 42, 0.5);
@@ -300,10 +325,6 @@ label:focus {
     color: @red;
 }
 
-#network {
-    color: @lavender;
-}
-
 #network.disconnected {
     color: @red;
 }
@@ -322,10 +343,6 @@ label:focus {
     background-color: #ffa000;
 }
 
-#temperature {
-    background-color: #f0932b;
-}
-
 #temperature.critical {
     background-color: #eb4d4b;
 }