lots of waybar changes

.config/waybar/config

@@ -1,49 +1,44 @@
-{
+[{
+    "output": "DP-1",
     "layer": "top", // Waybar at top layer
     // "position": "bottom", // Waybar position (top|bottom|left|right)
     "height": 30, // Waybar height (to be removed for auto height)
     // "width": 1280, // Waybar width
-    // Choose the order of the modules
     "modules-left": [
-        "sway/workspaces",
+    	"idle_inhibitor", 
+	"cpu", 
+	"memory", 
+	"disk", 
+	"custom/temperature",
         "sway/mode",
+        "sway/window",
         "custom/media"
     ],
     "modules-center": [
-        "sway/window"
+        "sway/workspaces"
     ],
     "modules-right": [
+    	"tray",
         "custom/watson",
         "custom/calc",
-        "idle_inhibitor",
         "pulseaudio",
  //       "network",
-        "cpu",
-        "memory",
-        "custom/temperature",
-        "backlight",
-//        "battery",
-//       "battery#bat2",
         "clock",
-        "tray",
 	"custom/power"
     ],
     // Modules configuration
-    // "sway/workspaces": {
-    //     "disable-scroll": true,
-    //     "all-outputs": true,
-    //     "format": "{name}: {icon}",
-    //     "format-icons": {
-    //         "1": "",
-    //         "2": "",
-    //         "3": "",
-    //         "4": "",
-    //         "5": "",
-    //         "urgent": "",
-    //         "focused": "",
-    //         "default": ""
-    //     }
-    // },
+     "sway/workspaces": {
+         "disable-scroll": true,
+         "all-outputs": false,
+         "format": "{name}",
+         "format-icons": {
+             "urgent": "",
+         }
+    },
+    "disk": {
+        "interval": 30,
+        "format": "{percentage_used}% <span></span>",
+    },
     "sway/mode": {
         "format": "<span style=\"italic\">{}</span>"
     },
@@ -218,4 +213,27 @@
 		    "escape": true,
     	  "tooltip": false 
     }
-}
+},
+{
+    "output": "HDMI-A-1",
+    "layer": "top", // Waybar at top layer
+    "position": "bottom", // Waybar position (top|bottom|left|right)
+    "height": 30, // Waybar height (to be removed for auto height)
+    // "width": 1280, // Waybar width
+    "modules-left": [
+        "sway/window",
+    ],
+    "modules-center": [
+        "sway/workspaces"
+    ],
+    "modules-right": [
+    ],
+     "sway/workspaces": {
+         "disable-scroll": true,
+         "all-outputs": false,
+         "format": "{name}",
+         "format-icons": {
+             "urgent": "",
+         }
+    }
+}]

.config/waybar/style.css

@@ -1,14 +1,19 @@
+@define-color bg_primary #1d2021;
+@define-color font_primary #fbf1c7;
+@define-color bg_active #17917a;
+
 * {
     border: none;
     border-radius: 0;
     /* `otf-font-awesome` is required to be installed for icons */
-    font-family: Vulf Mono Code, mono, sans-serif;
+    font-family: Vulf Mono Code, mono, "Font Awesome", sans-serif;
     font-size: 12px;
     min-height: 0;
 }
 
 window#waybar {
-    background-color: #1d2021;
+    /*background-color: #1d2021;*/
+    background-color: transparent;
     /*border-bottom: 3px solid rgba(100, 114, 125, 0.2);*/
     color: #fbf1c7;
     transition-property: background-color;
@@ -37,6 +42,44 @@ window#waybar.chromium {
     border: none;
 }
 
+.modules-center {
+    border-radius: 5px;
+    padding: 0px 10px;
+    background-color: @bg_primary;
+}
+
+.modules-left > * {
+  background-color: @bg_primary;
+  padding: 0px 10px;
+}
+
+.modules-left > widget:last-child {
+  background-color: @bg_active;
+  color: @bg_primary;
+  margin-left: 20px;
+  border-radius: 0px 5px 5px 0px;
+  padding: 0 5px;
+  margin: 0 5px;
+}
+
+
+.modules-left > widget:nth-last-child(2) {
+  /*border-radius: 0px 5px 5px 0px;*/
+}
+
+.modules-right > * {
+  background-color: @bg_primary;
+  padding: 0px 10px;
+}
+
+.modules-right > widget:first-child {
+  background-color: transparent;
+}
+
+.modules-right > widget:nth-child(2) {
+  border-radius: 5px 0px 0px 5px;
+}
+
 #workspaces {
 /*  background-color:  #434c5e;
   padding: 1 5 1 5;
@@ -46,7 +89,7 @@ window#waybar.chromium {
 }
 
 #workspaces button {
-    padding: 0 2px;
+    padding: 0 5px;
     /* background-color: #fbf1c7; */
     color: #fbf1c7;
 }
@@ -74,6 +117,7 @@ window#waybar.chromium {
 #clock,
 #battery,
 #cpu,
+#disk,
 #memory,
 #temperature,
 #backlight,
@@ -86,9 +130,11 @@ window#waybar.chromium {
 #custom-temperature,
 #custom-watson,
 #custom-calc,
+#custom-power,
+#window,
 #mpd {
-    padding: 0 4px;
-    margin: 0 4px;
+    padding: 0 5px;
+    margin: 0 5px;
     color: #fbf1c7;
 }
 
@@ -154,7 +200,6 @@ label:focus {
 #custom-power {
     padding-right: 15px;
     padding-left: 10px;
-    padding-top: 3px;
 }
 
 #temperature {