changed waybar style and config

.config/waybar/config

@@ -4,7 +4,7 @@
     "layer":"top",
     "modules-left": ["hyprland/workspaces"],
     "modules-center": [],
-    "modules-right": ["custom/playerctl", "idle_inhibitor", "pulseaudio", "clock", "tray","custom/swaync"],
+    "modules-right": ["group/audio", "idle_inhibitor", "group/system"],
     "idle_inhibitor": {
         "format": "{icon}",
         "format-icons": {
@@ -12,6 +12,22 @@
             "deactivated": ""
         }
     },
+
+    "group/audio":{
+      "orientation": "horizontal",
+      "modules":[
+        "custom/playerctl",
+        "pulseaudio"
+      ]
+    },
+    "group/system":{
+      "orientation": "horizontal",
+      "modules":[
+        "clock",
+        "tray",
+        "custom/swaync"
+      ]
+    },
     "tray": {
         // "icon-size": 21,
         "spacing": 10
@@ -41,7 +57,7 @@
         "on-click-right":"playerctl --player=spotify,%any next",
         "on-scroll-up":"playerctl --player=spotify,%any volume 0.05+",
         "on-scroll-down":"playerctl --player=spotify,%any volume 0.05-",
-        "exec": "playerctl --player=spotify,%any -f '{{title}} - {{artist}}' metadata -F 2>/dev/null",
+        "exec": "playerctl --player=spotify,%any -f '{{title}} - {{artist}}' metadata -F | sed -u 's/&/\\&/g' 2>/dev/null",
         "max-length":50,
         "tooltip":false
     },

.config/waybar/style.css

@@ -1,18 +1,20 @@
 @define-color color0 #2e3440;
-@define-color color1 #3b4252;
+@define-color bg #2e3440;
-@define-color color2 #434c5e;
+@define-color fg #323f2d;
-@define-color color3 #4c566a;
+@define-color focus #3b5631;
+@define-color text #ffffff;
+@define-color border #f4d9e1;
 
 * {
-  /* `otf-font-awesome` is required to be installed for icons */
   font-family: FontAwesome, Roboto, Helvetica, Arial, sans-serif;
   font-size: 13px;
+  border-radius: 24px;
+  min-height: 0;
 }
 
 window#waybar {
-  background-color: @color0;
+  background-color: @bg;
-  color: #ffffff;
+  color: @text;
-  margin-top: 0.6em;
 }
 
 window#waybar.hidden {
@@ -20,20 +22,26 @@ window#waybar.hidden {
 }
 
 /*--- Workspaces ---*/
+#workspaces{
+  border: solid 1px @border;
+
+  margin-top: 2px;
+  margin-bottom: 2px;
+}
+
 #workspaces button {
-  /* Use box-shadow instead of border so the text isn't offset */
-  box-shadow: inset 0 -3px transparent;
-
   border: none;
-  border-radius: 4px;
+  border-radius: 24px;
 
+  
   padding: 0 5px;
   background-color: transparent;
-  color: #ffffff;
+  color: @text;
+  transition: all 0.3s ease-in-out;
 }
 
 #workspaces button:hover {
-  background: @color2;
+  background: @fg;
 
   /* Disble clicking effect */
   box-shadow: inherit;
@@ -41,7 +49,7 @@ window#waybar.hidden {
 }
 
 #workspaces button.focused {
-  background-color: @color3;
+  background-color: @focus;
 }
 
 #workspaces button.urgent {
@@ -49,7 +57,17 @@ window#waybar.hidden {
 }
 
 #workspaces button.active{
-  background-color: @color3;
+  background-color: @focus;
+  transition: all 0.3s ease-in-out;
+}
+
+/*--- Groups ---*/
+#audio, #system, #idle_inhibitor {
+  border: solid 1px @border;
+  border-radius: 24px;
+  margin-top: 2px;
+  margin-bottom: 2px;
+
 }
 
 /*--- Each module ---*/
@@ -62,31 +80,44 @@ window#waybar.hidden {
 #tray,
 #mode,
 #idle_inhibitor{
-  border: none;
+  color: @text;
-  border-radius: 4px;
+
-  color: #ffffff;
+
-  padding-left: 0.6em;
+  padding-left: 6px;
-  padding-right: 0.6em;
+  padding-right: 6px;
+}
+
+
+.modules-left{
+  padding-left: 3px;
+}
+
+.modules-right{
+  padding-right: 3px;
 }
 
 /* If workspaces is the leftmost module, omit left margin */
+/*
 .modules-left > widget:first-child > #workspaces {
     margin-left: 0;
 }
-
+*/
 /* If workspaces is the rightmost module, omit right margin */
+/*
 .modules-right > widget:last-child > #workspaces {
     margin-right: 0;
 }
+*/
 
-
+/*
 #window,
 #workspaces {
     margin: 0 4px;
 }
-
+*/
 /* Module style */
 
+/*
 #clock {
     background-color: #64727D;
 }
@@ -129,10 +160,6 @@ label:focus {
     background-color: #2980b9;
 }
 
-#tray > .passive {
-    -gtk-icon-effect: dim;
-}
-
 #tray > .needs-attention {
     -gtk-icon-effect: highlight;
     background-color: #eb4d4b;
@@ -149,13 +176,18 @@ label:focus {
 
 #custom-playerctl {
   padding: 0 10px;
-  background-color: #1DB954; /*Spotify green*/
+  background-color: #1DB954; 
 }
+*/
+#tray > .passive {
+    -gtk-icon-effect: dim;
+}
+
 
 #custom-swaync {
   font-family: "NotoSansMono Nerd Font";
   padding: 0 10px;
-  color: #ffffff;
+  color: @text;
   font-size: 17px;
 }