style(eww): revamp mpd player widget design and animations

.config/eww/eww.scss

@@ -67,13 +67,19 @@
     box-shadow: none;
     padding: 0;
     margin: 0;
+    transition: all 0.15s ease;
 }
 
 .player-shape-btn:hover {
     /* GTK's default button hover would paint a rectangle behind the
        SVG, reintroducing exactly the shape this design avoids. */
     background-color: transparent;
     background-image: none;
+    opacity: 0.85;
+}
+
+.player-shape-btn:active {
+    opacity: 0.6;
 }
 
 /* Defines the collapsed state's overall footprint (it is the overlay's
@@ -85,8 +91,8 @@
    top-left, and the triangle's lower tip ends at ~18px. */
 .player-collapsed-sizer {
     background-color: transparent;
-    min-width: 72px;
-    min-height: 72px;
+    min-width: 68px;
+    min-height: 68px;
 }
 
 /* The separate expand triangle -- no negative margin: it is positioned
@@ -99,11 +105,14 @@
     box-shadow: none;
     padding: 0;
     margin: 0;
+    border-radius: 50%;
+    transition: all 0.2s ease;
 }
 
 .player-expand-arrow:hover {
-    background-color: transparent;
+    background-color: rgba(0, 162, 255, 0.15);
     background-image: none;
+    box-shadow: 0 0 12px 4px rgba(0, 162, 255, 0.4);
 }
 
 /* Expanded state: a taller card. */

.config/eww/eww.yuck

@@ -87,7 +87,7 @@
     ;; :visible false drops the widget from allocation entirely; the
     ;; revealer inside it still provides the reveal animation.
     (box :visible {!player_expanded}
-      (revealer :transition "crossfade" :duration "250ms" :reveal {!player_expanded}
+      (revealer :transition "slideup" :duration "250ms" :reveal {!player_expanded}
         ;; The sizer is the overlay's first (size-determining) child:
         ;; a bit larger than the 64px circle, so the arrow can sit in
         ;; the empty upper-left corner *outside* the circle's arc
@@ -110,7 +110,7 @@
     ;; toggle/stop pair, plus collapse (back to the circle) and close
     ;; (this instance only, see win-id above) in the corner.
     (box :visible {player_expanded}
-      (revealer :transition "crossfade" :duration "300ms" :reveal {player_expanded}
+      (revealer :transition "slideup" :duration "300ms" :reveal {player_expanded}
         (overlay
           (box :orientation "v" :space-evenly false :halign "center" :class "player-card"
             (image :class "player-albumart" :path {mpd_status.albumart} :image-width 120 :image-height 120)
@@ -131,7 +131,7 @@
   ;; different widths too, not just heights, and a fixed width would
   ;; leave the small circle floating in the middle of reserved space
   ;; instead of flush against the corner.
-  :geometry (geometry :x "5px" :y "15px" :width "1px" :height "1px" :anchor "bottom right")
+  :geometry (geometry :x "10px" :y "15px" :width "1px" :height "1px" :anchor "bottom right")
   :stacking "fg"
   :windowtype "normal"
   (mpd-player-widget :win-id win-id))