style: Match audio player color to app panels

- Change audio player background from #1a1a1a to #1a2332
- Matches the blue-grey color used throughout the app
- Addresses Fade's feedback about brownish grey appearance

asteroid.lisp

@@ -73,7 +73,6 @@
   (let ((query (format nil "~a ~a" artist song)))
     (format nil "https://musicbrainz.org/search?query=~a&type=recording"
             (drakma:url-encode query :utf-8))))
-
 ;; API Routes using Radiance's define-api
 ;; API endpoints are accessed at /api/<name> automatically
 ;; They use lambda-lists for parameters and api-output for responses

static/asteroid.lass

@@ -145,23 +145,47 @@
        :padding "20px"
        :font-style italic)
       
-      (.error :color "#ff4444"))
+      (.error :color "#ff4444")
-     
-     ((:and .recently-played-list .track-list)
-      :list-style none
-      :padding 0
-      :margin 0
-      :border none
-      :max-height none
-      :overflow-y visible)
-     
-     ((:and .recently-played-list .track-item)
-      :padding "6px 12px"
-      :border-bottom "1px solid #2a3441"
-      :transition "background-color 0.2s"
       
-      ((:and :last-child) :border-bottom none)
+      (.track-link
-      ((:and :hover) :background-color "#2a3441"))
+       :display inline-flex
+       :align-items center
+       :gap "4px"
+       :color "#00ffff"
+       :text-decoration none
+       :font-weight 500
+       :font-size "1em"
+       :transition "all 0.2s"
+       
+       (.external-icon
+        :width "14px"
+        :height "14px"
+        :margin-left "2px"
+        :vertical-align middle))
+      
+      ((:and .track-link :hover)
+       :color "#00ff00"
+       :text-decoration underline
+       :text-underline-offset "3px")
+      
+      ((:and .track-link :visited)
+       :color "#4488ff")
+      
+      (.track-list
+       :list-style none
+       :padding "0 12px"
+       :margin 0
+       :border none
+       :max-height none
+       :overflow-y visible)
+      
+      (.track-item
+       :padding "10px 0"
+       :border-bottom "1px solid #2a3441"
+       :transition "background-color 0.2s"
+       
+       ((:and :last-child) :border-bottom none)
+       ((:and :hover) :background-color "#2a3441")))
      
      ((:and .recently-played-list .track-info)
       :display grid
@@ -171,9 +195,6 @@
       :align-items center)
      
      ((:and .recently-played-list .track-title)
-      :color "#4488ff"
-      :font-weight 500
-      :font-size "1em"
       :grid-column 1
       :grid-row 1)
      
@@ -188,32 +209,7 @@
       :font-size "0.85em"
       :grid-column 2
       :grid-row 1
-      :text-align right)
-     
-     ((:and .recently-played-list .track-meta)
-      :grid-column 2
-      :grid-row 2
       :text-align right))
-     
-     (.recently-played-list
-      (.allmusic-link
-       :display inline-flex
-       :align-items center
-       :gap "4px"
-       :color "#4488ff"
-       :text-decoration none
-       :font-size "0.85em"
-       :letter-spacing "0.08rem"
-       :transition "all 0.2s"
-       :white-space nowrap
-       
-       ((:and :hover)
-        :color "#00ff00"
-        :text-decoration underline
-        :text-underline-offset "5px")
-       
-       (svg :width "14px"
-            :height "14px")))
 
     (.back
      :color "#00ffff"
@@ -311,7 +307,7 @@
      :text-align center)
 
     ((:and audio |::-webkit-media-controls-panel|)
-     :background-color "#1a1a1a")
+     :background-color "#1a2332")
 
     ;; ((:and audio (:or |::-webkit-media-controls-mute-button|
     ;;                   |::-webkit-media-controls-play-button|

static/js/recently-played.js

@@ -19,19 +19,18 @@ async function updateRecentlyPlayed() {
                 html += `
                     <li class="track-item">
                         <div class="track-info">
-                            <div class="track-title">${escapeHtml(track.song)}</div>
+                            <div class="track-title">
-                            <div class="track-artist">${escapeHtml(track.artist)}</div>
+                                <a href="${track.search_url}" target="_blank" rel="noopener noreferrer" class="track-link">
-                            <span class="track-time">${timeAgo}</span>
+                                    ${escapeHtml(track.song)}
-                            <div class="track-meta">
+                                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="external-icon">
-                                <a href="${track.search_url}" target="_blank" rel="noopener noreferrer" class="allmusic-link">
-                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                         <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
                                         <polyline points="15 3 21 3 21 9"></polyline>
                                         <line x1="10" y1="14" x2="21" y2="3"></line>
                                     </svg>
-                                    MusicBrainz
                                 </a>
                             </div>
+                            <div class="track-artist">${escapeHtml(track.artist)}</div>
+                            <span class="track-time">${timeAgo}</span>
                         </div>
                     </li>
                 `;