feat(waybar): improving styling

waybar/.config/waybar/config.jsonc

@@ -2,8 +2,8 @@
   "layer": "top",
   "position": "top",
   "mod": "dock",
-  "margin-left": 4,
-  "margin-right": 4,
+  "margin-left": 8,
+  "margin-right": 8,
   "margin-top": 8,
   "margin-bottom": 0,
   "exclusive": true,

waybar/.config/waybar/style.css

@@ -19,10 +19,17 @@
 }
 
 window#waybar {
-  background: transparent;
+  background: alpha(@background, 0.95);
+  border: 1px solid #595959;
+  border-radius: 6px;
+  box-shadow: none;
   color: @foreground;
 }
 
+window#waybar > box {
+  padding: 8px;
+}
+
 tooltip {
   background: @background;
   border: 1px solid @accent-alt;
@@ -49,9 +56,9 @@ tooltip {
 #custom-power {
   background: alpha(@background, 0.56);
   border: 1px solid alpha(@foreground, 0.14);
-  border-radius: 14px;
+  border-radius: 9px;
   box-shadow: 0 8px 24px alpha(@background, 0.22);
-  margin: 0 5px;
+  margin: 0 4px;
   padding: 0 12px;
   min-height: 34px;
 }
@@ -62,14 +69,19 @@ tooltip {
 
 #workspaces button {
   all: initial;
-  min-width: 18px;
-  padding: 0 8px;
+  font-size: 21px;
+  min-width: 22px;
+  padding: 0 4px;
   margin: 5px 2px;
-  border-radius: 10px;
+  border-radius: 7px;
   color: @foreground-muted;
   opacity: 0.9;
 }
 
+#workspaces button label {
+  font-size: 21px;
+}
+
 #workspaces button.empty {
   color: @foreground-muted;
   opacity: 0.45;