Workspace styling

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

@@ -32,12 +32,15 @@
         "clock#utc",
         "clock#local"
     ],
+
+    "niri/workspaces": {
+        "format": "\uf111"
+    },
     
 {% for iface in host.wireless %}
     "network#{{ iface }}": {
         "interface": "{{ iface }}",
-        "format": "\uf1eb \uf058",
-        "format-disconnected": "\uf1eb \uf057",
+        "format": "\uf1eb",
         "tooltip-format": "{{ iface }} {ipaddr} {essid} {signalStrength}",
         "tooltip-format-disconnected": "{{ iface }} down"
     },
@@ -46,8 +49,7 @@
 {% for iface in host.ethernet %}
     "network#{{ iface }}": {
         "interface": "{{ iface }}",
-        "format": "\uf6ff \uf058",
-        "format-disconnected": "\uf6ff \uf057",
+        "format": "\uf6ff",
         "tooltip-format": "{{ iface }} {ipaddr}",
         "tooltip-format-disconnected": "{{ iface }} down"
     },
@@ -56,8 +58,7 @@
 {% if not host.ethernet and host.auto_ethernet %}
     "network#auto_ethernet": {
         "interface": "en*",
-        "format": "\uf6ff \uf058",
-        "format-disconnected": "\uf6ff \uf057",
+        "format": "\uf6ff",
         "tooltip-format": "{{ iface }} {ipaddr}",
         "tooltip-format-disconnected": "{{ iface }} down"
     },

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,13 +34,26 @@ window#waybar {
     padding-right: 4px;
 }
 
-.module, #network.disconnected {
+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;
-
-    box-shadow: none;
 }
 
 #workspaces {
@@ -51,17 +62,33 @@ window#waybar {
 
 #workspaces button {
     padding: 0 5px;
+    color: @base05;
 }
 
+#workspaces button.empty {
+    color: @base03;
+}
 
-#wireplumber.muted, #network.disabled, .warning {
-    box-shadow: 0 -3px 0 @base0A;
+#workspaces button:hover {
+    color: @base02;
+}
+
+#workspaces button.active {
+    color: @base04;
+}
+
+#workspaces button.urgent {
+    color: @base08;
+}
+
+.warning {
+    box-shadow: 0 -2px 0 @base0A;
 }
 
 .critical {
-    box-shadow: 0 -3px 0 @base08;
+    box-shadow: 0 -2px 0 @base08;
 }
 
-#network {
-    box-shadow: 0 -3px 0 @base0B;
+#network.disconnected, .muted {
+    color: @base03;
 }