Waybar tweak

private_dot_config/waybar/style.css

@@ -1,6 +1,6 @@
 * {
-	font-family: Hack Nerd Font;
-	font-size: 12px;
+    font-family: Hack Nerd Font Mono;
+    font-size: 12px;
 }
 
 window#waybar {
@@ -10,9 +10,9 @@ window#waybar {
     transition-duration: .5s;
 }
 window#waybar:first-child > box {
-    margin-top: 6px;
-    padding: 8px 4px 4px 4px;
-    border-radius: 20px 20px 20px 20px;
+    margin: 6px;
+    padding: 4px;
+    border-radius: 20px;
     background-color: rgba(46, 52, 64, 0.5);
     border: 2px solid #88c0d0;
 }
@@ -100,9 +100,12 @@ button:hover {
 #power-profiles-daemon,
 #keyboard-state,
 #mpd {
-    padding: 0 10px;
-    color: #ffffff;
+    /*padding: 0px;
+    color: #ffffff;*/
     border-radius: 20px;
+    margin: 2px;
+    padding-left: 5px;
+    padding-right: 5px;
 }
 
 #window,
@@ -119,57 +122,6 @@ button:hover {
     margin-right: 0;
 }
 
-#clock {
-    background-color: #64727D;
-}
-
-#battery {
-    background-color: #ffffff;
-    color: #000000;
-}
-
-#battery.charging, #battery.plugged {
-    color: #ffffff;
-    background-color: #26A65B;
-}
-
-@keyframes blink {
-    to {
-        background-color: #ffffff;
-        color: #000000;
-    }
-}
-
-/* Using steps() instead of linear as a timing function to limit cpu usage */
-#battery.critical:not(.charging) {
-    background-color: #f53c3c;
-    color: #ffffff;
-    animation-name: blink;
-    animation-duration: 0.5s;
-    animation-timing-function: steps(12);
-    animation-iteration-count: infinite;
-    animation-direction: alternate;
-}
-
-#power-profiles-daemon {
-    padding-right: 15px;
-}
-
-#power-profiles-daemon.performance {
-    background-color: #f53c3c;
-    color: #ffffff;
-}
-
-#power-profiles-daemon.balanced {
-    background-color: #2980b9;
-    color: #ffffff;
-}
-
-#power-profiles-daemon.power-saver {
-    background-color: #2ecc71;
-    color: #000000;
-}
-
 label:focus {
     background-color: #000000;
 }
@@ -286,21 +238,21 @@ label:focus {
 #language {
     background: #00b093;
     color: #740864;
-    padding: 0 5px;
-    margin: 0 5px;
+    /*padding: 0 5px;
+    margin: 0 5px;*/
     min-width: 16px;
 }
 
 #keyboard-state {
     background: #97e1ad;
     color: #000000;
-    padding: 0 0px;
-    margin: 0 5px;
+    /*padding: 0 0px;
+    margin: 0 5px;*/
     min-width: 16px;
 }
 
 #keyboard-state > label {
-    padding: 0 5px;
+    /*padding: 0 5px;*/
 }
 
 #keyboard-state > label.locked {
@@ -334,3 +286,54 @@ label:focus {
 #privacy-item.audio-out {
     background-color: #0069d4;
 }
+
+#battery {
+background-color: #ffffff;
+color: #000000;
+}
+
+#battery.charging, #battery.plugged {
+color: #ffffff;
+background-color: #26A65B;
+}
+
+@keyframes blink {
+    to {
+        background-color: #ffffff;
+        color: #000000;
+    }
+}
+
+/* Using steps() instead of linear as a timing function to limit cpu usage */
+#battery.critical:not(.charging) {
+background-color: #f53c3c;
+color: #ffffff;
+animation-name: blink;
+animation-duration: 0.5s;
+animation-timing-function: steps(12);
+animation-iteration-count: infinite;
+animation-direction: alternate;
+}
+
+#power-profiles-daemon {
+/*padding-right: 15px;*/
+}
+
+#power-profiles-daemon.performance {
+background-color: #f53c3c;
+color: #ffffff;
+}
+
+#power-profiles-daemon.balanced {
+background-color: #2980b9;
+color: #ffffff;
+}
+
+#power-profiles-daemon.power-saver {
+background-color: #2ecc71;
+color: #000000;
+}
+
+#clock {
+    background-color: #64727D;
+}