feat: transition for stopped and playing mpd widget

waybar/style.css

@@ -36,10 +36,11 @@ window#waybar.chromium {
 }
 
 /* Common module styling */
-.modules-right, #mpd.playing, #mpd.paused {
+.modules-right, #mpd {
     background: linear-gradient(to bottom, @bg-primary, @bg-secondary);
     border: 3px solid @border-color;
     border-top: none;
+    padding: 0 10px;
 }
 
 .modules-left {
@@ -53,19 +54,21 @@ window#waybar.chromium {
 }
 
 /* MPD player states */
-#mpd.stopped {
-    border: none;
-    border-radius: 0 0 10px 10px;
-}
-
-#mpd.playing, #mpd.paused {
-    border-radius: 0 0 10px 10px;
+#mpd {
+  transition: color 2s ease-out, border-bottom 2s ease-out, background 2s ease-out, border-color 2s ease-out;
+  border-radius: 0 0 10px 10px;
 }
 
 #mpd.playing {
     color: @accent-alt;
 }
 
+#mpd.stopped {
+  border-color: transparent;
+  background: transparent;
+  color: transparent;
+}
+
 /* Workspaces */
 #workspaces {
     background: linear-gradient(to bottom, @bg-primary, @bg-secondary);
@@ -132,7 +135,7 @@ window#waybar.chromium {
 /* Module base styling */
 #clock, #battery, #cpu, #memory, #disk, #temperature, #backlight,
 #network, #pulseaudio, #wireplumber, #custom-media, #tray, #mode,
-#idle_inhibitor, #scratchpad, #mpd {
+#idle_inhibitor, #scratchpad {
     padding: 0 10px;
     color: @text-primary;
     transition: color 2s ease-out, border-bottom 2s ease-out, background 2s ease-out;
@@ -148,7 +151,7 @@ window#waybar.chromium {
     transition: color 0.5s ease-out, border-bottom 0.5s ease-out, background 0.5s ease-out;
 }
 
-#mpd:hover {
+#mpd.playing:hover, #mpd.paused:hover {
     color: @accent-color;
     animation: hover 0.2s 1;
 }