update

.config/waybar/config.jsonc

@@ -13,6 +13,7 @@
     "cpu",
     "memory",
     "pulseaudio",
+    "custom/notification",
     "clock",
   ],
   // Modules configuration
@@ -20,7 +21,7 @@
     "disable-scroll": true,
     "disable-markup": false,
     "all-outputs": false,
-    "format": "{name}",
+    "format": "{id}",
     "persistent-workspaces": {
       "HDMI-A-1": [1, 2, 3, 4, 5],
     },
@@ -47,7 +48,7 @@
   //   "format": "<span style=\"italic\">{}</span>",
   // },
   "tray": {
-    "icon-size": 16,
+    "icon-size": 24,
     "spacing": 4,
   },
   "clock": {
@@ -111,6 +112,26 @@
       "default": ["🔈️", "🔊"],
     },
     "on-click": "pavucontrol",
+  },
+    "custom/notification": {
+    "tooltip": false,
+    "format": "{icon}",
+    "format-icons": {
+      "notification": "<span foreground='red'><sup></sup></span>",
+      "none": "",
+      "dnd-notification": "<span foreground='red'><sup></sup></span>",
+      "dnd-none": "",
+      "inhibited-notification": "<span foreground='red'><sup></sup></span>",
+      "inhibited-none": "",
+      "dnd-inhibited-notification": "<span foreground='red'><sup></sup></span>",
+      "dnd-inhibited-none": ""
+      },
+    "return-type": "json",
+    "exec-if": "which swaync-client",
+    "exec": "swaync-client -swb",
+    "on-click": "swaync-client -t -sw",
+    "on-click-right": "swaync-client -d -sw",
+    "escape": true
   },
   // "custom/media": {
   //   "format": "{icon} {}",

.config/waybar/style.css

@@ -6,7 +6,8 @@
     font-size: 16px;
     font-weight: 700;
     min-height: 0;
-    margin: 4px 0 0 0;
+    padding: 0;
+    margin: 0;
 }
 
 window#waybar {
@@ -23,21 +24,29 @@ window#waybar {
 window#waybar.hidden {
     opacity: 0;
 }
-/* https://github.com/Alexays/Waybar/wiki/FAQ#the-workspace-buttons-have-a-strange-hover-effect */
+
+#workspaces {
+    /* border: 1px solid red; */
+    /* padding: 0.5rem 1.25rem 0.5rem 1rem; */
+}
+
 #workspaces button {
     padding: 0 8px;
-    /* background: transparent; */
-    color: #ffffff;
-    /* border-bottom: 3px solid transparent; */
+    color: rgba(255, 255, 255, 0.3);
+    background: transparent;
 }
 
-#workspaces button.focused {
-    background: #64727d;
-    border-bottom: 3px solid #ffffff;
-}
+/* #workspaces button.focused { */
+/*     background: #64727d; */
+/*     border-bottom: 3px solid #ffffff; */
+/* } */
 
 #workspaces button.urgent {
-    background-color: #eb4d4b;
+    background-color: rgba(128,157,170, 0.8);
+}
+
+#workspaces button.active {
+    color: rgba(255, 255, 255, 0.8);
 }
 
 #mode {
@@ -158,6 +167,12 @@ tooltip label {
     color: #ffffff;
 }
 
+#custom-notification {
+    background: transparent;
+    border: 2px solid rgba(154, 177, 187, 0.2);
+    padding: 0.5rem 1.25rem 0.5rem 1rem;
+}
+
 /* #idle_inhibitor {
     background-color: #2d3436;
 }