Rework Waybar configuration

files/config/waybar/config

@@ -1,13 +1,29 @@
 {
     "layer": "top",
-    "height":"22",
+    "spacing":6,
     "disable-toolptips": true,
     "modules-left": ["sway/workspaces", "sway/mode"],
     "modules-center": [],
-    "modules-right": ["network", "temperature", "memory", "cpu", "backlight", "battery", "pulseaudio", "clock", "tray"],
-        "sway/mode": {
+    "modules-right": [
+        "network", 
+        "custom/sep",
+        "temperature", "memory", "cpu", 
+        "custom/sep",
+        "backlight", "battery", 
+        "custom/sep",
+        "pulseaudio",
+        "custom/sep",
+        "clock", 
+        "custom/sep",
+        "tray"
+    ],
+    "sway/mode": {
         "format": "<span style=\"italic\">{}</span>"
     },
+    "custom/sep": {
+        "format": "|",
+        "tooltip": false
+    },
     "sway/workspace": {
         "disable-scroll": true
     },
@@ -20,22 +36,22 @@
     },
     "clock": {
         "tooltip": false,
-        "tooltip-format": "{:%Y-%m-%d | %H:%M}",
+        "timezone": "Europe/Paris",
         "format-alt": "{:%Y-%m-%d}"
     },
     "temperature": {
         "thermal-zone": 0,
         "critical-threshold": 80,
-        "format": "{temperatureC}°C  |"
+        "format": "{temperatureC}°C  "
     },
     "cpu": {
-        "format": "{usage}%  |",
-        "tooltip": false
+        "format": "{usage}% {icon}",
+        "tooltip": false,
+        "format-icons": [""]
     },
    "backlight": {
-        //"device": "intel_backlight",
-        "format": "{percent}% {icon} |",
-        "format-icons": ["", ""],
+        "format": "{percent}% {icon}",
+        "format-icons": ["󰌶", "󱩏", "󱩐", "󱩐", "󱩑", "󱩒", "󱩓", "󱩔", "󱩕", "󱩖", "󰛨"],
         "tooltip": false
     },
     "battery": {
@@ -44,37 +60,36 @@
             "full": 100,
             "warning": 30,
             "critical": 15
-
         },
-        "format": "{capacity}% {icon} |",
-        "format-charging": "{capacity}%  |",
-        "format-plugged": "{capacity}%  |",
-        "format-alt": "{time} {icon} |",
-        "format-icons": ["", "", "", "", ""]
+        "format": "{capacity}% {icon}",
+        "format-charging": "{capacity}% ",
+        "format-plugged": "{capacity}% ",
+        "format-alt": "{time} {icon}",
+        "format-icons": [" ", " ", " ", " ", " "]
     },
     "network": {
         "tooltip": false,
-        "format-wifi": "{essid} ({signalStrength}%)  |",
-        "format-ethernet": "{ifname}: {ipaddr}/{cidr}  |",
-        "format-linked": "{ifname} (No IP)  |",
-        "format-disconnected": "Disconnected ⚠ |",
-        "format-alt": "{ifname}: {ipaddr}/{cidr} |"
+        "format-wifi": "{essid} ({signalStrength}%)  ",
+        "format-ethernet": "{ifname}: {ipaddr}/{cidr}  ",
+        "format-linked": "{ifname} (No IP)  ",
+        "format-disconnected": "Disconnected ⚠ ",
+        "format-alt": "{ifname}: {ipaddr}/{cidr}"
     },
     "pulseaudio": {
         "tooltip": false,
-        "format": "{volume}% {icon} |",
-        "format-bluetooth": "{volume}% {icon} |",
-        "format-muted": "婢|",
+        "format": "{format_source} {volume}% {icon}",
+        "format-bluetooth": "{volume}% {icon}",
+        "format-muted": "{format_source} 婢 ",
         "format-source": "{volume}%  ",
-        "format-source-muted": "",
+        "format-source-muted": " ",
         "format-icons": {
-            "headphones": "",
-            "handsfree": "",
-            "headset": "",
-            "phone": "",
-            "portable": "",
-            "car": "",
-            "default": "墳"
+            "headphones": " ",
+            "handsfree": " ",
+            "headset": " ",
+            "phone": " ",
+            "portable": " ",
+            "car": " ",
+            "default": "墳 "
         }
     },
     "memory": {

files/config/waybar/style.css

@@ -1,14 +1,21 @@
+
+@define-color color-base-bg #323232;
+@define-color color-base-fg #ddd;
+
+@define-color electric-magenta #f268b3;
+@define-color electric-green #1cd180;
+
 * {
     border: none;
     border-radius: 0;
-    font-family: "Fira Code Nerd Font";
-    font-size: 14px;
     min-height:0;
 }
 
 window#waybar {
-    background:#323232 ;
-    color:#ddd;
+    background: @color-base-bg ;
+    color: @color-base-fg;
+    font-family: "Fira Code Nerd Font";
+    font-size: 12px;
 }
 
 button,
@@ -26,12 +33,10 @@ button:hover{
 }
 #workspaces {
     color:#fff;
-
 }
 #workspaces button {
     margin:0 3px;
     padding:4px 4px;
-    background:#323232  ;
     color:#9c9c9c;
     border-bottom: 1px solid transparent;
 }
@@ -39,14 +44,18 @@ button:hover{
 #workspaces button:hover {
     box-shadow:inherit;
     text-shadow:inherit;
-    color:#f268b3;
-    border-bottom: 1px solid #f268b3;
+    color: @electric-magenta;
+    border-bottom: 1px solid @electric-magenta;
 }
 
 #workspaces button.focused {
     background:#1cd180 ;
     color:#000;
 }
+#workspaces button.visible:not(.focused) {
+    color: @electric-green;
+    border-color: @electric-green;
+}
 
 #clock,
 #cpu,
@@ -66,20 +75,27 @@ button:hover{
     background:red;
     font-weight:bold;
 }
-
 #pulseaudio {}
-#pulseaudio.muted {}
+#pulseaudio.muted {
+    color:#f268b3;
+}
 
-#battery {
-    border-bottom:1px solid transparent;
+#battery.discharging {
+    color: @color-base-fg;
+    border-bottom: none;
 }
 
 #battery.charging, #battery.plugged {
-    border-color:#1cd180;
-    color:#1cd180;
+    border-bottom: 1px solid @electric-green;
+    color: @electric-green;
 }
 
 #battery.critical:not(.charging) {
-    border-color:#f268b3;
-    color:#f268b3;
+    border-color: @electric-magenta;
+    color: @electric-magenta;
+}
+
+#tray {
+    font-family: "DejaVu Sans";
+    font-size: 12px;
 }