waybar: make waybar vertical

stow/.config/waybar/style.css

@@ -3,22 +3,19 @@
 * {
     /* `otf-font-awesome` is required to be installed for icons */
 /*    font-family: ComicShannsMono Nerd Font, FontAwesome, Roboto, Helvetica, Arial, sans-serif;*/
-    font-size: 13px;
+    font-size: 20px;
     border-radius: 10px;
     transition-duration: 0.5s;
 }
 
 .module {
-    margin-left: 5px;
-    margin-right: 5px;
-    margin-top: 10px;
+    margin-top: 5px;
+    margin-bottom: 5px;
 }
 
 window#waybar {
     color: @primary;
     background-color: transparent;
-    transition-property: background-color;
-    transition-duration: .5s;
 }
 
 window#waybar.hidden {
@@ -48,10 +45,15 @@ button {
 
 #workspaces button {
     color: @primary;
-    padding: 0 5px;
+    padding: 5 0px;
     border-radius: inherit;
 }
 
+#workspaces button.active {
+    color: @on_primary;
+    background-color: @on_primary_container;
+}
+
 #workspaces button:hover {
     color: @on_primary;
     background: @on_primary_container;
@@ -79,19 +81,15 @@ button {
 #scratchpad,
 #power-profiles-daemon,
 #mpd {
-    padding: 0 10px;
+    padding: 10 0px;
     background-color: @background;
     color: @primary;
 }
 
-#window,
-#workspaces {
-}
-
 #clock {
-    border-top-right-radius: 0px;
+    border-bottom-left-radius: 0px;
     border-bottom-right-radius: 0px;
-    margin-right: 0px;
+    margin-bottom: 0px;
 
     border-right: none;
 
@@ -101,8 +99,8 @@ button {
 
 #custom-swaync {
     border-top-left-radius: 0px;
-    border-bottom-left-radius: 0px;
-    margin-left: 0px;
+    border-top-right-radius: 0px;
+    margin-top: 0px;
 
     border-left: none;
 
@@ -111,11 +109,38 @@ button {
     padding: 10px;
 }
 
+
+
+#wireplumber {
+    background-color: @background;
+    color: @secondary;
+
+    margin-bottom: 0px;
+    border-bottom-left-radius: 0px;
+    border-bottom-right-radius: 0px;
+}
+
+#backlight {
+    background-color: @background;
+    color: @secondary;
+
+    margin-top: 0px;
+    margin-bottom: 0px;
+    border-radius: 0px;
+}
+
+
 #battery {
     background-color: @background;
     color: @secondary;
+    margin-top: 0px;
+    border-top-left-radius: 0px;
+    border-top-right-radius: 0px;
 }
 
+
+
+
 #battery.charging, #battery.plugged {
     color: #ffffff;
     background-color: #26A65B;
@@ -154,14 +179,9 @@ button {
     color: @tertiary;
 }
 
-#backlight {
-    background-color: @background;
-    color: @tertiary;
-}
-
 #network {
     background-color: @background;
-    color: @secondary;
+    color: @tertiary;
 }
 
 #network.disconnected {
@@ -169,12 +189,6 @@ button {
     color: @error;
 }
 
-#wireplumber {
-    background-color: @background;
-    color: @tertiary;
-/*    color: @primary;*/
-}
-
 #wireplumber.muted {
     background-color: @background;
     color: @error;
@@ -183,7 +197,7 @@ button {
 #custom-media {
     background-color: @background;
     color: @tertiary;
-    min-width: 100px;
+    min-height: 100px;
 }
 
 #tray {