Add .config/waybar/''

Update .config/waybar/config.jsonc
Update .config/waybar/style.css

private_dot_config/waybar/''

@@ -0,0 +1,61 @@
+@import "./colors.css";
+
+/* Global styles */
+* {
+    transition: 0.7s all ease-in-out;
+    font-size: 16px;
+    font-family: inherit;
+    padding: 3px;
+    margin: 1px 2px;
+    color: @text;
+    border-radius: 12px;
+    min-width: 20px;
+}
+
+*:hover {
+    text-shadow: none;
+}
+
+/* Window */
+window#waybar {
+    background-color: @base;
+}
+
+/* Workspaces */
+#workspaces button {
+    padding: 2px;
+    margin: 1px;
+    background: transparent;
+    color: @lavender;
+    box-shadow: inset 0 3px;
+}
+
+#workspaces button:hover {
+    background-color: @surface1;
+    box-shadow: inset 0 5px;
+}
+
+#workspaces button.active {
+    box-shadow: inset 0 8px;
+}
+
+#workspaces button.urgent {
+    background-color: @red;
+}
+
+/* Clock */
+#clock {
+    font-style: oblique;
+}
+
+/* Modules */
+.modules-left,
+.modules-right,
+.modules-center {
+    background-color: @crust;
+}
+
+/* Tray */
+#tray>.needs-attention {
+    background-color: @red;
+}

private_dot_config/waybar/config.jsonc

@@ -3,7 +3,13 @@
     "layer": "top", // Waybar at top layer
     "position": "right", // Waybar position (top|bottom|left|right)
     "spacing": 4, // Gaps between modules (4px)
-    "width": 80,
+    "margin-top": 10,
+    "margin-bottom": 10,
+    "margin-left": 8,
+    "margin-right": 8,
+    "mode": "dock",
+    "reload_style_on_change": true,
+    "width": 70,
     "output": [
         "DP-1",
         "eDP-1",

private_dot_config/waybar/style.css

@@ -9,7 +9,6 @@
     margin: 1px 2px;
     color: @text;
     border-radius: 12px;
-    min-width: 20px;
 }
 
 *:hover {
@@ -19,6 +18,7 @@
 /* Window */
 window#waybar {
     background-color: @base;
+    border-radius: 15px;
 }
 
 /* Workspaces */