style(waybar): restructure waybar configs

Restructure Waybar config and style.css so the modules are ordered in the configs the same way they are ordered on the actual bar. The purpose of this is to make it easier for users to find things for making changes, and to help keep the configs organized.

.config/waybar/config

@@ -34,58 +34,34 @@
 
     // Modules
 
-    "idle_inhibitor": {
+    "custom/launcher": {
+        "format":"<span size='x-large'></span>",
+        "on-click": "exec wofi -c ~/.config/wofi/config -I",
+        "tooltip": false,
+    },
+
+    "sway/workspaces": {
+        "disable-scroll": true,
+        "disable-markup" : false,
+        "all-outputs": true,
         "format": "  {icon}  ",
+        //"format":"{icon}",
         "format-icons": {
-            "activated": "",
+            "1": "",
-            "deactivated": ""
+            "2": "",
+            "3": "",
+            "4": "",
         }
     },
 
-    "battery": {
+    "sway/mode": {
-        "states": {
+        "format": "{}",
-            "warning": 30,
+        "tooltip": false
-            "critical": 15
-        },
-        "format": "{icon} {capacity}%",
-        "format-icons": ["", "", "", "", ""]
     },
 
-    "clock": {
+    "sway/window": {
-        "interval": 10,
+        "format": "{}",
-        "format-alt": " {:%e %b %Y}", // Icon: calendar-alt
+        "max-length": 120
-        "format": "{:%H:%M}",
-        "tooltip-format": "{:%e %B %Y}"
-    },
-
-    "cpu": {
-        "interval": 5,
-        "format": "  {usage}% ({load})", // Icon: microchip
-        "states": {
-            "warning": 70,
-            "critical": 90,
-        },
-        "on-click": "footclient -T waybar_htop -e htop",
-    },
-
-    "custom/keyboard-layout": {
-      	"exec": "i=$(swaymsg -t get_inputs); echo \"\"; echo \"$i\" | grep -m1 'xkb_active_layout_name' | cut -d '\"' -f4",
-        "format": "",
-        // Interval set only as a fallback; use signal to update the module more immediately
-        "interval": 30,
-        // See example config for sending signal to Waybar in ~/.config/sway/config.d/input
-        "signal": 1,
-        "on-click": "~/.config/waybar/scripts/keyhint.sh",
-    },
-
-    "memory": {
-        "interval": 5,
-        "format": " {}%", // Icon: memory
-        "on-click": "footclient -T waybar_htop -e htop", 
-        "states": {
-            "warning": 70,
-            "critical": 90
-        }
     },
 
     "network": {
@@ -103,30 +79,34 @@
         "tooltip-format": "{ifname}: {ipaddr}/{cidr}",
     },
 
-    "sway/mode": {
+    "idle_inhibitor": {
-        "format": "{}",
-        "tooltip": false
-    },
-
-    "sway/window": {
-        "format": "{}",
-        "max-length": 120
-    },
-
-    "sway/workspaces": {
-        "disable-scroll": true,
-        "disable-markup" : false,
-        "all-outputs": true,
         "format": "{icon} ",
-        //"format":"{icon}",
         "format-icons":{
-            "1": "",
+            "activated": "",
-            "2": "",
+            "deactivated": ""
-            "3": "",
-            "4": "",
         }
     },
     
+    "memory": {
+        "interval": 5,
+        "format": " {}%", // Icon: memory
+        "on-click": "footclient -T waybar_htop -e htop", 
+        "states": {
+            "warning": 70,
+            "critical": 90
+        }
+    },
+
+    "cpu": {
+        "interval": 5,
+        "format": "  {usage}% ({load})", // Icon: microchip
+        "states": {
+            "warning": 70,
+            "critical": 90,
+        },
+        "on-click": "footclient -T waybar_htop -e htop",
+    },
+
     "pulseaudio": {
         "scroll-step": 2,
         "format": "{icon} {volume}%",
@@ -143,17 +123,23 @@
         "on-click": "pavucontrol"
     },
 
-    // to use the weather module replace <your_location> with your city or town
+    "custom/keyboard-layout": {
-    // note: do not use spaces: new york would be newyork
+      	"exec": "i=$(swaymsg -t get_inputs); echo \"\"; echo \"$i\" | grep -m1 'xkb_active_layout_name' | cut -d '\"' -f4",
-    "custom/weather": {
+        "format": "",
-        "exec": "~/.config/waybar/scripts/weather.sh <your_location>", 
+        // Interval set only as a fallback; use signal to update the module more immediately
-        "return-type": "json",
+        "interval": 30,
-        "interval": 600,
+        // See example config for sending signal to Waybar in ~/.config/sway/config.d/input
+        "signal": 1,
+        "on-click": "~/.config/waybar/scripts/keyhint.sh",
     },
 
-    "tray": {
+    "battery": {
-        "icon-size": 18,
+        "states": {
-        "spacing":10,
+            "warning": 30,
+            "critical": 15
+        },
+        "format": "{icon} {capacity}%",
+        "format-icons": ["", "", "", "", ""]
     },
 
     "backlight#icon": {
@@ -169,10 +155,24 @@
          "on-scroll-up": "brightnessctl -c backlight set +1%"
     },
 
-    "custom/launcher": {
+    "clock": {
-        "format":"<span size='x-large'></span>",
+        "interval": 10,
-        "on-click": "exec wofi -c ~/.config/wofi/config -I",
+        "format-alt": " {:%e %b %Y}", // Icon: calendar-alt
-        "tooltip": false,
+        "format": "{:%H:%M}",
+        "tooltip-format": "{:%e %B %Y}"
+    },
+
+    "tray": {
+        "icon-size": 18,
+        "spacing":10,
+     },
+
+    // to use the weather module replace <your_location> with your city or town
+    // note: do not use spaces: new york would be newyork
+    "custom/weather": {
+        "exec": "~/.config/waybar/scripts/weather.sh <your_location>", 
+        "return-type": "json",
+        "interval": 600,
     },
 
     "custom/power": {

.config/waybar/style.css

@@ -58,19 +58,19 @@
 }
 
 /* Every modules */
-#battery,
-#clock,
-#backlight,
-#cpu,
-#custom-keyboard-layout,
-#memory,
 #mode,
-#custom-weather,
 #network,
+#idle_inhibitor,
+#memory,
+#cpu,
 #pulseaudio,
+#custom-keyboard-layout,
+#battery,
+#backlight,
+#clock,
 #temperature,
-#tray,
+#custom-weather,
-#idle_inhibitor {
+#tray {
     padding:0.5rem 0.6rem;
     margin: 1px 0px;
 }
@@ -79,6 +79,83 @@
  * Modules styles
  * -------------------------------------------------------------------------- */
 
+#custom-launcher {
+    font-size:15px;
+    margin-left:15px;
+    margin-right:10px;
+}
+
+#workspaces {
+    font-size:13px;
+}
+
+#workspaces button {
+    border-bottom: 3px solid transparent;
+    margin-bottom: 0px;
+    padding:0px;
+}
+
+#workspaces button.focused {
+    border-bottom: 3px solid  @highlight;
+    margin-bottom: 1px;
+    padding-left:0;
+}
+
+#workspaces button.urgent {
+    border-color: #c9545d;
+    color: #c9545d;
+}
+
+#mode {
+    background: @highlight;
+    border-bottom: 3px transparent;
+    color:white;
+    margin-left: 5px;
+    padding: 7px;
+}
+
+#window {
+    font-weight: bold;
+}
+
+#network.disconnected {
+    color: orange;
+}
+
+#memory {
+    animation-timing-function: linear;
+    animation-iteration-count: infinite;
+    animation-direction: alternate;
+}
+
+#memory.warning {
+    color: orange;
+ }
+
+#memory.critical {
+    color: red;
+    animation-name: blink-critical;
+    animation-duration: 2s;
+    padding-left:5px;
+    padding-right:5px;
+}
+
+#cpu.warning {
+    color: orange;
+}
+
+#cpu.critical {
+    color: red;
+}
+
+#pulseaudio {
+    padding-top:6px;
+}
+
+#pulseaudio.muted {
+    color: @highlight;
+}
+
 #battery {
     animation-timing-function: linear;
     animation-iteration-count: infinite;
@@ -103,94 +180,17 @@
     animation-duration: 2s;
 }
 
-#cpu.warning {
+#backlight.icon {
-    color: orange;
+    padding-right:1px;
-}
+    font-size: 13px;
-
-#cpu.critical {
-    color: red;
-}
-
-#memory {
-    animation-timing-function: linear;
-    animation-iteration-count: infinite;
-    animation-direction: alternate;
-}
-
-#memory.warning {
-    color: orange;
- }
-
-#memory.critical {
-    color: red;
-    animation-name: blink-critical;
-    animation-duration: 2s;
-    padding-left:5px;
-    padding-right:5px;
-}
-
-#mode {
-    background: @highlight;
-    border-bottom: 3px transparent;
-    color:white;
-    margin-left: 5px;
-    padding: 7px;
-}
-
-#network.disconnected {
-    color: orange;
-}
-
-#pulseaudio {
-    padding-top:6px;
-}
-
-#pulseaudio.muted {
-    color: @highlight;
 }
 
 #temperature.critical {
     color: red;
 }
 
-#window {
-    font-weight: bold;
-}
-
-#workspaces {
-    font-size:13px;
-}
-
-#workspaces button {
-    border-bottom: 3px solid transparent;
-    margin-bottom: 0px;
-    padding:0px;
-}
-
-#workspaces button.focused {
-    border-bottom: 3px solid  @highlight;
-    margin-bottom: 1px;
-    padding-left:0;
-}
-
-#workspaces button.urgent {
-    border-color: #c9545d;
-    color: #c9545d;
-}
-
 #custom-power {
     margin-left:15px;
     margin-right:15px;
     font-size:15px;
 }
-
-#custom-launcher {
-    font-size:15px;
-    margin-left:15px;
-    margin-right:10px;
-}
-
-#backlight.icon {
-    padding-right:1px;
-    font-size: 13px;
-}