rearranged modules and fixed margins

waybar/config.jsonc

@@ -54,7 +54,12 @@
     "height": 32,
     "spacing": 4,
     "modules-left": [
-        "river/tags"
+        "cpu",
+        "memory",
+        "temperature",
+        "backlight",
+        "battery",
+        "river/tags",
     ],
     "modules-center": [
         "river/window"
@@ -64,16 +69,11 @@
         "pulseaudio",
         "network",
         "power-profiles-daemon",
-        "cpu",
-        "memory",
-        "temperature",
-        "backlight",
-        "battery",
         "clock",
         "tray"
     ],
     "mpd": {
-        "format": "{stateIcon} {consumeIcon}{randomIcon}{repeatIcon}{singleIcon} {title} ({elapsedTime:%M:%S}/{totalTime:%M:%S}) #{songPosition}/{queueLength} ",
+        "format": "{stateIcon} {consumeIcon}{randomIcon}{repeatIcon}{singleIcon} {artist} - {title} ({elapsedTime:%M:%S}/{totalTime:%M:%S}) #{songPosition}/{queueLength} ",
         "format-disconnected": "Disconnected ",
         "format-stopped": "{consumeIcon}{randomIcon}{repeatIcon}{singleIcon}Stopped ",
         "unknown-tag": "N/A",

waybar/style.css

@@ -5,13 +5,22 @@
 }
 
 window#waybar {
-    background-color: rgba(43, 48, 59, 0.5);
-    border-bottom: 3px solid rgba(100, 114, 125, 0.5);
+    background-color: rgba(44, 37, 46, 0.7);
+    padding-bottom: 6px;
+    border-bottom: 2px solid rgba(129, 161, 193, 0.5);
     color: #ffffff;
     transition-property: background-color;
     transition-duration: .5s;
 }
 
+.modules-right {
+    margin-right: 6px;
+}
+
+.modules-left {
+    margin-left: 6px;
+}
+
 window#waybar.hidden {
     opacity: 0.2;
 }
@@ -40,7 +49,7 @@ button:hover {
 }
 
 #tags button {
-    padding: 0 5px;
+    padding: 0 4px;
     background-color: transparent;
     color: #ffffff;
 }
@@ -75,6 +84,16 @@ button:hover {
     border: 2px solid #81a1c1;
 }
 
+#cpu,
+#memory,
+#temperature,
+#backlight,
+#battery,
+#mpd,
+#network {
+    padding-right: 11px;
+}
+
 #clock:hover,
 #battery:hover,
 #power-profiles-daemon:hover,
@@ -88,16 +107,6 @@ button:hover {
     margin: 0 4px;
 }
 
-/* If workspaces is the leftmost module, omit left margin */
-.modules-left > widget:first-child > #tags {
-    margin-left: 0;
-}
-
-/* If workspaces is the rightmost module, omit right margin */
-.modules-right > widget:last-child > #tags {
-    margin-right: 0;
-}
-
 @keyframes blink {
     to {
         background-color: #ffffff;
@@ -117,7 +126,7 @@ button:hover {
 }
 
 #power-profiles-daemon {
-    padding-right: 15px;
+    padding-right: 13px;
 }
 
 #tray > .passive {