Pretty new config is stable!

waybar/config.template

@@ -17,9 +17,9 @@
     //"margin-right": 20,
     //"margin-top": 20,
     // Choose the order of the modules
-    "modules-left": ["sway/workspaces", "sway/window"],
+    "modules-left": ["sway/mode", "sway/workspaces", "sway/window"],
     "modules-center": [],
-    "modules-right": ["sway/mode", "custom/weather", "custom/keyboard", "backlight", "cpu", "memory", "custom/disk", "temperature", "pulseaudio", "custom/battery", "tray", "custom/wallpaper", "custom/pkg", "custom/idle_mode", "custom/clock", "custom/nc"],
+    "modules-right": ["custom/keyboard", "custom/weather", "backlight", "cpu", "memory", "custom/disk", "temperature", "pulseaudio", "custom/battery", "tray", "custom/wallpaper", "custom/pkg", "custom/idle_mode", "custom/clock", "custom/nc"],
     // Modules configuration
     "sway/workspaces": {
         // "disable-scroll": true,
@@ -65,6 +65,13 @@
         //"format-disconnected": "⚠ mpd",
         //"on-click": "${HOME}/scripts/waybar/waybar-mpd.sh"
     //},
+    "custom/keyboard": {
+        "on-click": "${HOME}/scripts/waybar/waybar-keyboard.sh layout",
+        "on-click-right": "${HOME}/scripts/waybar/waybar-keyboard.sh osk",
+        "exec": "${HOME}/scripts/waybar/waybar-keyboard.sh bar",
+	"exec-on-event": true,
+        "return-type": "json",
+    },
     "custom/weather": {
         "interval": 600,
         "return-type": "json",
@@ -97,14 +104,6 @@
         "on-scroll-up": "${HOME}/scripts/waybar/waybar-backlight.sh up",
         "on-scroll-down": "${HOME}/scripts/waybar/waybar-backlight.sh down"
     },
-    //"backlight": {
-        //"device": "acpi_video1",
-        //"format": "{icon} {percent}%",
-        //"format-icons": [ "•", "☼", "o", "", ""],
-        //"on-click": "${HOME}/scripts/thinkpad/blc.pl --notify %",
-        //"on-scroll-up": "${HOME}/scripts/thinkpad/blc.pl --notify ++",
-        //"on-scroll-down": "${HOME}/scripts/thinkpad/blc.pl --notify --"
-    //},
     "custom/battery": {
         "format": "{}",
         "return-type": "json",
@@ -131,6 +130,13 @@
         "on-click": "pavucontrol",
         "on-click-right": "${HOME}/scripts/waybar/waybar-volume.sh"
     },
+    "custom/pkg": {
+        "interval": 360,
+        "tooltip-format": "<span font='Anonymous Pro 12'><big>{:%d %B}</big>\n<tt><small>{calendar}</small></tt></span>",
+        "on-click": "alacritty --config-file ~/.dotfiles/alacritty/host.toml --class Alacritty-grave -e ${HOME}/scripts/waybar/waybar-pkg.sh upgrade",
+        "return-type": "json",
+        "exec": "${HOME}/scripts/waybar/waybar-pkg.sh bar"
+    },
     "tray": {
         "icon-size": 24,
         "spacing": 0
@@ -140,25 +146,6 @@
         "exec": "echo '✶\nRotate wallpaper\nactive'",
         "on-click": "${HOME}/scripts/sway/rotate-wallpaper.sh"
     },
-    //"custom/todo": {
-        //"interval": 86400,
-        //"exec": "echo '☑\nTo-do list\n'",
-        //"on-click": "${HOME}/scripts/waybar/waybar-todo.sh",
-    //},
-    "custom/keyboard": {
-        "interval": 1,
-        "on-click": "${HOME}/scripts/waybar/waybar-keyboard.sh layout",
-        "on-click-right": "${HOME}/scripts/waybar/waybar-keyboard.sh osk",
-        "exec": "${HOME}/scripts/waybar/waybar-keyboard.sh bar",
-        "return-type": "json",
-    },
-    "custom/pkg": {
-        "interval": 360,
-        "tooltip-format": "<span font='Anonymous Pro 12'><big>{:%d %B}</big>\n<tt><small>{calendar}</small></tt></span>",
-        "on-click": "alacritty --config-file ~/.dotfiles/alacritty/host.toml --class Alacritty-grave -e ${HOME}/scripts/waybar/waybar-pkg.sh upgrade",
-        "return-type": "json",
-        "exec": "${HOME}/scripts/waybar/waybar-pkg.sh bar"
-    },
     "custom/idle_mode": {
         "interval": 1,
         "return-type": "json",
@@ -166,36 +153,30 @@
         "on-click": "${HOME}/scripts/sway/idle.sh mode",
         "on-click-right": "${HOME}/scripts/sway/idle.sh toggle"
     },
-    "custom/gammastep": {
-        "interval": 1,
-        "return-type": "json",
-        "exec": "${HOME}/scripts/waybar/waybar-gammastep.sh",
-        "on-click": "${HOME}/scripts/waybar/waybar-gammastep.sh toggle"
-    },
-    "custom/nc": {
-    	"tooltip": true,
-    	"format": "{icon} Test",
-    	"format-icons": {
-            "notification": " <span foreground=red><sup></sup></span>",
-            "none": "<span style='color: #928374'> </span>",
-            "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": "swaync-client -swb",
-    	"exec-if": "which swaync-client",
-    	"on-click": "swaync-client -t",
-    	"on-click-right": "swaync-client -d",
-    	"escape": true
-    },
     "custom/clock": {
         "interval": 60,
         "on-click": "flatpak run org.mozilla.Firefox https://papillon.john.me.tz/calendar.php",
         "return-type": "json",
         "exec": "echo '{\"class\": \"clock\", \"text\": \"'$(date '+%H:%M')'\", \"tooltip\": \"'$(date '+%A, %B %d, %Y | %Y-%m-%d')'\"}'"
     },
+    "custom/nc": {
+    	"tooltip": true,
+    	"format": "{icon}",
+    	"format-icons": {
+            "notification": "",
+            "none": "",
+            "dnd-notification": "",
+            "dnd-none": "",
+            "inhibited-notification": "",
+            "inhibited-none": " ",
+            "dnd-inhibited-notification": "",
+            "dnd-inhibited-none": " "
+    	},
+    	"return-type": "json",
+    	"exec": "swaync-client -swb",
+    	"exec-if": "which swaync-client",
+    	"on-click": "swaync-client --toggle-panel",
+    	"on-click-right": "swaync-client --toggle-dnd",
+    	"escape": true
+    }
 }]

waybar/style.css

@@ -45,64 +45,137 @@
     min-height: 0;
 }
 
-window#waybar.window {
-}
-
 window#waybar {
     margin: -5px;
-    border-bottom: solid 1px @fg;
-    background-color: @bg;
     animation-name: fadeIn;
     animation-duration: 1s;
     color: @fg;
+    border-bottom: solid 1px @fg;
+    border-top: solid 1px @fg;
 }
 
-#window, #mode, #custom-weather, #mpd, #cpu, #memory, #custom-disk, #temperature, #custom-battery, #pulseaudio, #tray, #custom-todo, #custom-keyboard, #custom-pkg, #custom-clock {
+/* Right */
-    color: @grey06;
+
-    padding: 0px 2px;
+#window, #custom-weather, #custom-mpd, #custom-keyboard, #backlight, #cpu, #memory, #custom-disk, #temperature, #pulseaudio, #custom-battery, #tray, #custom-wallpaper, #custom-pkg, #custom-clock, #custom-idle_mode, #custom-nc {
+    border-top: solid 1px @fg;
+    border-bottom: solid 1px @fg;
     margin: 0px;
+    padding-left: 5px;
+}
+
+/* Left-most modules */
+
+#custom-keyboard, #backlight, #tray {
+    border-top-left-radius: 15px;
+    border-bottom-left-radius: 15px;
+    border-left: 1px solid @fg;
+    padding-left: 5px;
+}
+
+/* Misc */
+
+#custom-weather, #custom-mpd, #custom-keyboard {
+    color: @fg;
+    background: @grey01;
+}
+
+/* Status area */
+
+#backlight, #cpu, #memory, #custom-disk, #temperature, #pulseaudio, #custom-battery {
+    color: @yellowhi;
+    background: @grey02;
 }
 
 /* Tray */
 
 #tray, #custom-wallpaper, #custom-pkg, #custom-clock, #custom-idle_mode {
     background: @grey03;
-    border-bottom: 1px solid @fg;
     color: @bluehi;
-    margin: 0px;
 }
 
 /* Workspaces */
 
 #workspaces {
-    color: @fg;
+    border-top-right-radius: 15px;
+    border-bottom-right-radius: 15px;
+    background-color: @grey02;
 }
 
+#workspaces button, #mode {
+    border: solid 1px @fg;
+    border-left: 0px;
+    border-top-left-radius: 0px;
+    border-bottom-left-radius: 0px;
+    border-top-right-radius: 15px;
+    border-bottom-right-radius: 15px;
+    color: @white;
+    padding: 0px;
+    margin: 0px;
+    background: none;
+    margin-right: -10px;
+    padding-left: 6px;
+}
+
+#workspaces button:first-child {
+    padding-left: 5px;
+}
+
+#workspaces button:last-child {
+    margin-right: 0px;
+}
 #workspaces button.visible {
-    background-color: @grey06;
+    color: @white;
 }
 
 #workspaces button.focused {
-    background-color: @fg;
+    color: @orangehi;
-    color: @grey06;
+    border-color: @orangehi;
+    font-weight: bold;
 }
 
-#workspaces button.urgent {
+#workspaces button.urgent, #mode {
-    background-color: @redhi;
+    color: @redhi;
-    color: @white;
+    border-color: @redhi;
+    font-weight: bold;
 }
 
 /* Mode */
 
 #mode {
-    background-color: @grey06;
+    background-color: @grey01;
-    color: @bg;
+    padding-right: 7px;
 }
 
 /* Window title */
 
+window#waybar.empty #window {
+    background: none;
+}
+
 #window {
     color: @fg;
+    margin: 0px 10px;
+    padding: 0px 20px;
+    background: linear-gradient(90deg, @bg 0%, @grey03 3%, @grey03 97%, @bg 100%);
+}
+
+/* Keyboard */
+
+#custom-keyboard {
+    padding-left: 5px;
+}
+
+#custom-keyboard.alternate {
+    color: @orange;
+}
+
+/* Weather */
+
+#custom-weather {
+    color: @bluehi;
+    border-radius: 0px;
+    padding-right: 24px;
+    margin-right: -20px;
 }
 
 /* MPD */
@@ -111,30 +184,9 @@ window#waybar {
     color: @fg;
 }
 
-/* Weather */
-
-#custom-weather {
-    margin-top: -8px;
-    margin-bottom: -2px;
-}
-
-/* Keyboard */
-
-#custom-keyboard {
-    color: @bluehi;
-    margin-right: -2px;
-    margin-top: -1px;
-}
-
-#custom-keyboard.alternate {
-    color: @orange;
-}
-
 /* Backlight */
 
 #backlight {
-    margin-left: 5px;
-    margin-right: 2px;
     color: @yellowhi;
 }
 
@@ -198,7 +250,7 @@ window#waybar {
 
 #custom-battery {
     color: @green;
-    margin-top: -1px;
+    padding-right: 24px;
 }
 
 #custom-battery.charging {
@@ -225,14 +277,15 @@ window#waybar {
 /* Tray */
 
 #tray {
+    margin-left: -20px;
     margin-right: -4px;
 }
 
 /* Wallpaper rotation */
 
 #custom-wallpaper {
-    font-size: 22px;
+    font-size: 16px;
-    margin-top: -4px;
+    padding-right: 4px;
 }
 
 /* Package upgrades */
@@ -250,10 +303,11 @@ window#waybar {
 #custom-idle_mode {
     font-family: "Font Awesome 6 Brands", "Font Awesome 6 Free";
     padding-right: 3px;
+    padding-left: 0px;
 }
 
 #custom-idle_mode.none {
-    color: @red;
+    color: @orangehi;
 }
 
 /* Clock */
@@ -262,6 +316,7 @@ window#waybar {
     color: @fg;
     font-weight: bold;
     margin: 0px;
+    padding-right: 5px;
 }
 
 /* Notifications */
@@ -270,4 +325,13 @@ window#waybar {
     font-family: "NotoSansMono Nerd Font";
     background: @grey06;
     margin: 0px;
+    padding-right: 5px;
+    padding-left: 5px;
+}
+
+#custom-nc.dnd-none {
+    color: @bg;
+}
+#custom-nc.dnd-notification {
+    background: @orange;
 }