feat: split panels for waybar;

refactor: waybar, swaync and rofi now share colors;
refactor: removed windows from rofi, niced colors;
fix: transparency blur arifacts;

waybar/config.jsonc

@@ -8,24 +8,18 @@
     "spacing": 4, // Gaps between modules (4px)
     // Choose the order of the modules
     "modules-left": [
-        "hyprland/workspaces",
-        "pulseaudio"
+        "hyprland/workspaces"
     ],
     "modules-center": [
         "mpd"
     ],
     "modules-right": [
+        "pulseaudio",
         "network",
-        "cpu",
         "memory",
-        //"temperature",
-        //"backlight",
-        //"hyprland/language",
         "battery",
-        //"battery#bat2",
         "tray",
         "clock"
-        // "custom/power"
     ],
     // Modules configuration
     "hyprland/workspaces": {
@@ -68,7 +62,6 @@
             "10": "零",
             "11": "一",
             "12": "十",
-            // "3": "",
             "default": "",
             "empty": ""
         }
@@ -98,10 +91,10 @@
     },
     "mpd": {
         "password": "kapuchinamusica",
-        "artist-len": 15,
-        "title-len": 30,
+        "artist-len": 30,
+        "title-len": 45,
         "unknown-tag": "n/a",
-        "format": "{stateIcon} {artist} - {title} {elapsedTime:%M:%S}/{totalTime:%M:%S}",
+        "format": "{stateIcon} {artist} - {title}",
         "interval": 1,
         "single-icons": {
             "on": "1 "
@@ -208,12 +201,12 @@
     },
     "pulseaudio": {
         // "scroll-step": 1, // %, can be a float
-        "format": "{volume}% {icon} {format_source}",
-        "format-bluetooth": "{volume}% {icon} {format_source}",
-        "format-bluetooth-muted": " {icon} {format_source}",
-        "format-muted": " {format_source}",
+        "format": "{format_source} {volume}% {icon}",
+        "format-bluetooth": "{format_source} {volume}% {icon}",
+        "format-bluetooth-muted": "{format_source}  {icon}",
+        "format-muted": "{format_source} 󰖁",
         "format-source": "",
-        "format-source-muted": " ",
+        "format-source-muted": "  ",
         "format-icons": {
             "headphone": "",
             //"hands-free": "",

waybar/style.css

@@ -1,17 +1,46 @@
 * {
     /* `otf-font-awesome` is required to be installed for icons */
-    font-family: Iosevka, Roboto, Helvetica, Arial, sans-serif;
+    font-family: "Iosevka Nerd Font";
     font-size: 15px;
 }
 
 window#waybar {
+    /*
     background-color: rgba(23, 28, 39, 0.8);
     border-bottom: 3px solid rgba(90, 104, 115, 0.5);
+    */
+    background-color: transparent;
     color: #ffffff;
     transition-property: background-color;
     transition-duration: .5s;
 }
 
+.modules-left, .modules-right, #mpd.playing, #mpd.paused {
+    background-color: rgba(23, 28, 39, 0.8);
+    border: 3px solid rgba(90, 104, 115, 0.8);
+    border-top: none;
+}
+
+.modules-left {
+  border-left: none;
+  border-radius: 0 0 10px 0;
+}
+
+.modules-right {
+  border-right: none;
+  border-radius: 0 0 0 10px;
+}
+
+#mpd.playing, #mpd.paused {
+  border-radius: 0 0 10px 10px;
+}
+
+#mpd.playing {
+}
+
+@keyframes gradientShift {
+}
+
 window#waybar.hidden {
     opacity: 0.2;
 }
@@ -123,11 +152,9 @@ button:hover {
 
 @keyframes hover {
     0% {
-        background: rgba(0, 0, 0, 0);
         color: #ffffff;
     }
     100% {
-        background: rgba(0, 0, 0, 0.2);
         color: #E96375;
     }
 }
@@ -147,13 +174,19 @@ button:hover {
 #mode:hover,
 #idle_inhibitor:hover,
 #scratchpad:hover,
-#power-profiles-daemon:hover,
-#mpd:hover {
+#power-profiles-daemon:hover 
+{
     color: #E96375;
     background: rgba(0, 0, 0, 0.2);
     animation: hover 0.2s 1;
 }
 
+#mpd:hover
+{
+    color: #E96375;
+    animation: hover 0.2s 1;
+}
+
 #window,
 #workspaces {
     margin: 0 4px;
@@ -261,7 +294,6 @@ label:focus {
 }
 
 #pulseaudio.muted {
-    color: #2a5c45;
 }
 
 #wireplumber {
@@ -272,7 +304,6 @@ label:focus {
 }
 
 #custom-media {
-    color: #2a5c45;
     min-width: 100px;
 }
 
@@ -363,9 +394,6 @@ label:focus {
     }
 }
 
-#mpd {
-}
-
 #mpd.disconnected {
 }
 
@@ -431,8 +459,8 @@ label:focus {
 #custom-media,
 #mode,
 #idle_inhibitor,
-#scratchpad,
-#mpd {
+#scratchpad
+{
     padding: 0 10px;
     background-color: transparent;
     color: #ffffff;