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/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,
-#idle_inhibitor {
+#custom-weather,
+#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 {
-    color: orange;
-}
-
-#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;
+#backlight.icon {
+    padding-right:1px;
+    font-size: 13px;
 }
 
 #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;
-}