Update .config/waybar/config.jsonc

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

private_dot_config/waybar/config.jsonc

@@ -8,12 +8,10 @@
         "spacing": 4, // Gaps between modules (4px)
         // Choose the order of the modules
         "modules-left": [
-            "clock",
+            "group/datetime",
             "pulseaudio",
             "bluetooth",
-            "cpu",
+            "group/hardware",
-            "memory",
-            "disk",
             "privacy"
         ],
         "modules-center": [
@@ -28,6 +26,13 @@
         "group/music":{
             "modules":["mpris", "cava"]
         },
+        "group/hardware":{
+            "modules":["cpu","memory","disk"],
+            "orientation":"horizontal"
+        },
+        "group/datetime":{
+            "modules":["clock","clock#date"]
+        },
         "include": [
             "~/.config/waybar/modules.jsonc"
         ]

private_dot_config/waybar/modules.jsonc

@@ -34,28 +34,16 @@
     },
     "disk": {
         "interval": 30,
-        "format": "{percentage_used}% 󰋊",
+        "format": "{percentage_used:3d}% 󰋊",
         "unit": "GB"
     },
     "bluetooth": {
         "format":" {status}",
         "format-disabled":"",
         "format-connected":" {device_alias}",
-        "format-connected-battery":" {device_alias} | {device_battery_percentage}%",
+        "format-connected-battery":"{device_battery_percentage:3d}% ",
         "on-click":"blueman-manager"
     },
-    "keyboard-state": {
-        "numlock": true,
-        "capslock": true,
-        "format": "{name} {icon}",
-        "format-icons": {
-            "locked": "",
-            "unlocked": ""
-        }
-    },
-    "sway/mode": {
-        "format": "<span style=\"italic\">{}</span>"
-    },
     "sway/scratchpad": {
         "format": "{icon} {count}",
         "show-empty": false,
@@ -63,39 +51,6 @@
         "tooltip": true,
         "tooltip-format": "{app}: {title}"
     },
-    "mpd": {
-        "format": "{stateIcon} {consumeIcon}{randomIcon}{repeatIcon}{singleIcon}{artist} - {album} - {title} ({elapsedTime:%M:%S}/{totalTime:%M:%S}) ⸨{songPosition}|{queueLength}⸩ {volume}% ",
-        "format-disconnected": "Disconnected ",
-        "format-stopped": "{consumeIcon}{randomIcon}{repeatIcon}{singleIcon}Stopped ",
-        "unknown-tag": "N/A",
-        "interval": 5,
-        "consume-icons": {
-            "on": " "
-        },
-        "random-icons": {
-            "off": "<span color=\"#f53c3c\"></span> ",
-            "on": " "
-        },
-        "repeat-icons": {
-            "on": " "
-        },
-        "single-icons": {
-            "on": "1 "
-        },
-        "state-icons": {
-            "paused": "",
-            "playing": ""
-        },
-        "tooltip-format": "MPD (connected)",
-        "tooltip-format-disconnected": "MPD (disconnected)"
-    },
-    "idle_inhibitor": {
-        "format": "{icon}",
-        "format-icons": {
-            "activated": "",
-            "deactivated": ""
-        }
-    },
     "tray": {
         // "icon-size": 21,
         "spacing": 10,
@@ -108,86 +63,37 @@
     "clock": {
         "interval": 1,
         "timezone": "Europe/Brussels",
-        "format": "{:%H:%M:%S\n%a %d/%m/%Y}",
+        "format": "{:%H:%M:%S}"
-        "tooltip-format": "<big>{:%Y %B}</big>\n<tt><small>{calendar}</small></tt>"
+    },
-        //"format-alt": "{:%Y-%m-%d}"
+    "clock#date":{
+        "interval": 1,
+        "timezone": "Europe/Brussels",
+        "format": "{:%a %d/%m/%Y}"
     },
     "cpu": {
         "interval": 1,
-        "format": "{usage}% ",
+        "format": "{usage:3d}% ",
         "tooltip": false
     },
     "memory": {
         "interval": 1,
-        "format": "{}% "
+        "format": "{percentage:3d}% "
-    },
-    "temperature": {
-        // "thermal-zone": 2,
-        // "hwmon-path": "/sys/class/hwmon/hwmon2/temp1_input",
-        "interval": 1,
-        "critical-threshold": 80,
-        // "format-critical": "{temperatureC}°C {icon}",
-        "format": "{temperatureC}°C {icon}",
-        "format-icons": ["", "", ""]
-    },
-    "backlight": {
-        // "device": "acpi_video1",
-        "format": "{percent}% {icon}",
-        "format-icons": ["", "", "", "", "", "", "", "", ""]
-    },
-    "battery": {
-        "states": {
-            // "good": 95,
-            "warning": 30,
-            "critical": 15
-        },
-        "format": "{capacity}% {icon}",
-        "format-full": "{capacity}% {icon}",
-        "format-charging": "{capacity}% ",
-        "format-plugged": "{capacity}% ",
-        "format-alt": "{time} {icon}",
-        // "format-good": "", // An empty format will hide the module
-        // "format-full": "",
-        "format-icons": ["", "", "", "", ""]
-    },
-    "battery#bat2": {
-        "bat": "BAT2"
-    },
-    "power-profiles-daemon": {
-      "format": "{icon}",
-      "tooltip-format": "Power profile: {profile}\nDriver: {driver}",
-      "tooltip": true,
-      "format-icons": {
-        "default": "",
-        "performance": "",
-        "balanced": "",
-        "power-saver": ""
-      }
-    },
-    "network": {
-        // "interface": "wlp2*", // (Optional) To force the use of this interface
-        "format-wifi": "{essid} ({signalStrength}%) ",
-        "format-ethernet": "{ipaddr}/{cidr} ",
-        "tooltip-format": "{ifname} via {gwaddr} ",
-        "format-linked": "{ifname} (No IP) ",
-        "format-disconnected": "Disconnected ⚠",
-        "format-alt": "{ifname}: {ipaddr}/{cidr}"
     },
     "pulseaudio": {
         // "scroll-step": 1, // %, can be a float
-        "format": "{volume:02d}% {icon}",
+        "format": "{volume:3d}% {icon}",
-        "format-bluetooth": "{volume:02d}% {icon}",
+        // "format-bluetooth": "{volume:3d}% {icon}",
-        "format-bluetooth-muted": "   {icon}",
+        // "format-bluetooth-muted": "   {icon}",
-        "format-muted": "   {format_source}",
+        // "format-muted": "   {format_source}",
-        "format-source": "{volume}% ",
+        // "format-source": "{volume}% ",
-        "format-source-muted": "",
+        // "format-source-muted": "",
         "format-icons": {
-            "headphone": "",
+            // "headphone": "",
-            "hands-free": "",
+            // "hands-free": "",
-            "headset": "",
+            // "headset": "",
-            "phone": "",
+            // "phone": "",
-            "portable": "",
+            // "portable": "",
-            "car": "",
+            // "car": "",
             "default": ["", "", ""]
         },
         "on-click": "pavucontrol"

private_dot_config/waybar/style.css

@@ -2,7 +2,7 @@
     /* `otf-font-awesome` is required to be installed for icons */
     /* font-family: FontAwesome, Roboto, Helvetica, Arial, sans-serif; */
     font-family: JetBrainsMono Nerd Font, FontAwesome;
-    font-size: 15px;
+    font-size: 14px;
 }
 
 window#waybar {
@@ -60,8 +60,8 @@ button:hover {
 .modules-right
 {
     background: rgba(0, 0, 8, .7);
-    margin: 0px 10px;
+    margin: 0 10px;
-    padding: 0 5px;
+    padding: 0 10px;
     border-radius: 15px;
 }
 .modules-left {
@@ -85,6 +85,8 @@ button:hover {
 #tray,
 #power
 {
+    margin: 0 5px;
+    padding: 0 5px;
     color: #ffffff;
 }
 
@@ -92,64 +94,32 @@ button:hover {
 #clock {
     border-top-left-radius: 15px;
     border-bottom-left-radius: 15px;
-    background-color: rgba(0, 255, 225, 0.5);
 }
 
 #pulseaudio {
-    background-color: rgba(0, 255, 76, 0.5);
 }
 
 #pulseaudio.muted {
-    background-color: rgba(255, 0, 55, 0.5);
+    background-color: rgba(255, 0, 55, 0.05);
 }
 
 #pulseaudio:not(.muted):hover {
-    background-color: rgba(0, 255, 76, 0.75);
+    background-color: rgba(255, 255, 0, 0.1);
 }
 
-#cpu {
+#bluetooth {
 }
 
-#memory {
+#bluetooth:hover {
+    background-color: rgba(0, 149, 255, 0.1);
 }
 
-#disk {
+#hardware {
-}
-
-#tray {
-    background-color: #2980b9;
-}
-
-#tray > .passive {
-    -gtk-icon-effect: dim;
-}
-
-#tray > .needs-attention {
-    -gtk-icon-effect: highlight;
-    background-color: #eb4d4b;
-}
-
-#music{
-    margin-top: 10px;
-}
-
-#cava {
-    font-size: 24px;
-    color: rgba(255, 255, 255, 0.15);
-}
-
-#mpris {
-}
-
-#scratchpad {
-}
-
-#scratchpad.empty {
-	background-color: transparent;
 }
 
 #privacy {
     padding: 0;
+    margin-right: 0;
 }
 
 #privacy-item {
@@ -170,3 +140,33 @@ button:hover {
 #privacy-item.audio-out {
     background-color: #0069d4;
 }
+
+#music{
+}
+
+#cava {
+    color: rgba(255, 255, 255, 0.15);
+}
+
+#mpris {
+}
+
+#scratchpad {
+}
+
+#scratchpad.empty {
+	background-color: transparent;
+}
+
+#tray {
+    background-color: #2980b9;
+}
+
+#tray > .passive {
+    -gtk-icon-effect: dim;
+}
+
+#tray > .needs-attention {
+    -gtk-icon-effect: highlight;
+    background-color: #eb4d4b;
+}