modify design

config

@@ -1,25 +1,24 @@
 {
-    "layer": "top", // Waybar at top layer
-    "position": "top", // Waybar position (top|bottom|left|right)
-    // "width": 1280, // Waybar width
-    // Choose the order of the modules
-    "modules-left": ["hyprland/workspaces"],
-    "modules-center": ["custom/music"],
-    "modules-right": ["pulseaudio", "backlight", "battery", "clock", "tray", "custom/lock", "custom/power"],
-    "wlr/workspaces": {
-         "disable-scroll": true,
-         "sort-by-name": true,
-         "format": " {icon} ",
-         "format-icons": {
-             "default": "",
+    "layer": "top",
+    "position": "top",
+    "modules-left": ["custom/haskell", "hyprland/workspaces"],
+    "modules-center": ["clock"],
+    "modules-right": ["pulseaudio", "backlight", "battery", "custom/music", "tray", "custom/lock", "custom/power"],
+    "custom/haskell": {
+        "format": "λ",
+        "tooltip": false
     },
+    "hyprland/workspaces": {
+        "disable-scroll": true,
+        "format": "{id}",
+        "on-click": "activate"
     },
     "tray": {
         "icon-size": 21,
         "spacing": 10
     },
     "custom/music": {
-        "format": "  {}",
+        "format": "{}",
         "escape": true,
         "interval": 5,
         "tooltip": false,
@@ -35,37 +34,30 @@
     },
     "backlight": {
         "device": "intel_backlight",
-        "format": "{icon}",
-        "format-icons": ["", "", "", "", "", "", "", "", ""]
+        "format": "BRI {percent}%"
     },
     "battery": {
         "states": {
             "warning": 30,
             "critical": 15
         },
-        "format": "{icon}",
-        "format-charging": "",
-        "format-plugged": "",
-        "format-alt": "{icon}",
-        "format-icons": ["", "",  "", "", "", "", "", "", "", "", "", ""]
+        "format": "BAT {capacity}%",
+        "format-charging": "BAT {capacity}% +",
+        "format-plugged": "BAT {capacity}% ="
     },
     "pulseaudio": {
-        // "scroll-step": 1, // %, can be a float
-        "format": "{icon} {volume}%",
-        "format-muted": "",
-        "format-icons": {
-            "default": ["", "", " "]
-        },
+        "format": "VOL {volume}%",
+        "format-muted": "VOL MUTE",
         "on-click": "pavucontrol"
     },
     "custom/lock": {
         "tooltip": false,
         "on-click": "sh -c '(sleep 0.5s; swaylock --grace 0)' & disown",
-        "format": "",
+        "format": "LOCK"
     },
     "custom/power": {
         "tooltip": false,
         "on-click": "wlogout &",
-        "format": "襤"
+        "format": "PWR"
     }
 }

style.css

@@ -1,40 +1,22 @@
 @import "mocha.css";
 
 * {
-  font-family: FantasqueSansMono Nerd Font;
-  font-size: 17px;
+  font-family: "FantasqueSansMono Nerd Font", monospace;
+  font-size: 15px;
   min-height: 0;
 }
 
 #waybar {
-  background: transparent;
+  background: @base;
   color: @text;
-  margin: 5px 5px;
-}
-
-#workspaces {
-  border-radius: 1rem;
-  margin: 5px;
-  background-color: @surface0;
-  margin-left: 1rem;
-}
-
-#workspaces button {
-  color: @lavender;
-  border-radius: 1rem;
-  padding: 0.4rem;
-}
-
-#workspaces button.active {
-  color: @sky;
-  border-radius: 1rem;
-}
-
-#workspaces button:hover {
-  color: @sapphire;
-  border-radius: 1rem;
+  border-radius: 0;
+  margin: 0;
+  padding: 0;
 }
 
+#workspaces,
+#workspaces button,
+#custom-haskell,
 #custom-music,
 #tray,
 #backlight,
@@ -43,15 +25,44 @@
 #pulseaudio,
 #custom-lock,
 #custom-power {
-  background-color: @surface0;
-  padding: 0.5rem 1rem;
-  margin: 5px 0;
+  border-radius: 0;
+  padding: 4px 8px;
+  margin: 0;
+  background: transparent;
+}
+
+#custom-haskell {
+  color: @mauve;
+  font-size: 16px;
+  font-weight: 900;
+}
+
+#workspaces {
+  background: transparent;
+}
+
+#workspaces button {
+  color: @overlay1;
+  box-shadow: none;
+  border: none;
+  outline: none;
+}
+
+#workspaces button.active {
+  color: #eb3489;
+  font-weight: bold;
+}
+
+#workspaces button:hover {
+  color: @text;
+  font-weight: bold;
+  box-shadow: none;
+  border: none;
+  background: transparent;
 }
 
 #clock {
   color: @blue;
-  border-radius: 0px 1rem 1rem 0px;
-  margin-right: 1rem;
 }
 
 #battery {
@@ -70,33 +81,30 @@
   color: @yellow;
 }
 
-#backlight, #battery {
-    border-radius: 0;
-}
-
 #pulseaudio {
   color: @maroon;
-  border-radius: 1rem 0px 0px 1rem;
-  margin-left: 1rem;
 }
 
 #custom-music {
   color: @mauve;
-  border-radius: 1rem;
 }
 
 #custom-lock {
-    border-radius: 1rem 0px 0px 1rem;
   color: @lavender;
 }
 
 #custom-power {
-    margin-right: 1rem;
-    border-radius: 0px 1rem 1rem 0px;
   color: @red;
 }
 
-#tray {
-  margin-right: 1rem;
-  border-radius: 1rem;
+#custom-haskell:hover,
+#custom-music:hover,
+#tray:hover,
+#backlight:hover,
+#clock:hover,
+#battery:hover,
+#pulseaudio:hover,
+#custom-lock:hover,
+#custom-power:hover {
+  font-weight: bold;
 }