Workspace styling

templates/.config/waybar/config.jsonc.j2

@@ -33,6 +33,10 @@
         "clock#local"
     ],
 
+    "niri/workspaces": {
+        "format": "\uf111"
+    },
+    
 {% for iface in host.wireless %}
     "network#{{ iface }}": {
         "interface": "{{ iface }}",

templates/.config/waybar/style.css.j2

@@ -20,8 +20,6 @@
     /* `otf-font-awesome` is required to be installed for icons */
     font-family: '{{ host.system_mono_font }}', 'Font Awesome 6 Free';
     font-size: 13px;
-
-    color: @base05;
 }
 
 window#waybar {
@@ -36,9 +34,24 @@ window#waybar {
     padding-right: 4px;
 }
 
-label.module {
+button {
+    /* Use box-shadow instead of border so the text isn't offset */
+    box-shadow: inset 0 -3px transparent;
+    /* Avoid rounded borders under each button name */
+    border: none;
+    border-radius: 0;
+}
+
+/* https://github.com/Alexays/Waybar/wiki/FAQ#the-workspace-buttons-have-a-strange-hover-effect */
+button:hover {
+    background: inherit;
+    text-shadow: none;
+}
+
+.module {
     padding: 0 5px;
     margin: 4px 0;
+    color: @base05;
     background: @base01;
     border-radius: 6px;
 }
@@ -49,6 +62,23 @@ label.module {
 
 #workspaces button {
     padding: 0 5px;
+    color: @base05;
+}
+
+#workspaces button.empty {
+    color: @base03;
+}
+
+#workspaces button:hover {
+    color: @base02;
+}
+
+#workspaces button.active {
+    color: @base04;
+}
+
+#workspaces button.urgent {
+    color: @base08;
 }
 
 .warning {