waybar: Add better padding, use input ttf and rounded corners

Signed-off-by: David Runge <dave@sleepmap.de>

1 files changed, 9 insertions, 13 deletions

diff --git a/.config/waybar/style.css b/.config/waybar/style.css
index 8cdc6d9..5cdef99 100644
--- a/.config/waybar/style.css
+++ b/.config/waybar/style.css
@@ -2,14 +2,13 @@
     border: none;
     border-radius: 0;
     /* `otf-font-awesome` is required to be installed for icons */
-    font-family: Roboto, Helvetica, Arial, sans-serif;
-    font-size: 13px;
+    font-family: Input, Roboto, Helvetica, Arial, sans-serif;
+    font-size: 12px;
     min-height: 0;
 }
 
 window#waybar {
     background-color: rgba(43, 48, 59, 0.5);
-    border-bottom: 3px solid rgba(100, 114, 125, 0.5);
     color: #ffffff;
     transition-property: background-color;
     transition-duration: .5s;
@@ -32,21 +31,17 @@ window#waybar.termite {
     background-color: #3F3F3F;
 }
 
-window#waybar.chromium {
-    background-color: #000000;
-    border: none;
-}
-
-window#waybar.firefox {
+window#waybar.chromium, window#waybar.firefox {
     background-color: #000000;
     border: none;
 }
 
 #workspaces button {
-    padding: 0 5px;
+    padding: 0 6px;
     background-color: transparent;
     color: #ffffff;
     border-bottom: 3px solid transparent;
+    border-radius: 6px;
 }
 
 /* https://github.com/Alexays/Waybar/wiki/FAQ#the-workspace-buttons-have-a-strange-hover-effect */
@@ -67,7 +62,6 @@ window#waybar.firefox {
 
 #mode {
     background-color: #64727D;
-    border-bottom: 3px solid #ffffff;
 }
 
 #clock,
@@ -83,8 +77,10 @@ window#waybar.firefox {
 #mode,
 #idle_inhibitor,
 #mpd {
-    padding: 0 4px;
-    margin: 0 0px;
+    border-radius: 6px;
+    padding-left: 4px;
+    padding-right: 8px;
+    margin: 0 2px;
     color: #ffffff;
 }