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
style: Update recently played track styling
2025-11-22 17:00:29 +03:00 · 2025-11-22 17:00:29 +03:00 · 2025-11-22 17:00:29 +03:00 · 2025-11-22 17:00:29 +03:00 · 2025-11-22 17:00:26 +03:00
3 changed files with 47 additions and 53 deletions
--- a/asteroid.lisp
+++ b/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
--- a/static/asteroid.lass
+++ b/static/asteroid.lass
@ -145,23 +145,47 @@
       :padding "20px"
       :font-style italic)
      
-      (.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"
+      (.error :color "#ff4444")
      
-      ((:and :last-child) :border-bottom none)
-      ((:and :hover) :background-color "#2a3441"))
+      (.track-link
+       :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|
--- a/static/js/recently-played.js
+++ b/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-artist">${escapeHtml(track.artist)}</div>
-                            <span class="track-time">${timeAgo}</span>
-                            <div class="track-meta">
-                                <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">
+                            <div class="track-title">
+                                <a href="${track.search_url}" target="_blank" rel="noopener noreferrer" class="track-link">
+                                    ${escapeHtml(track.song)}
+                                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="external-icon">
                                        <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>
                `;
Author	SHA1	Message	Date
Glenn Thompson	60a6505151	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	2025-11-22 17:00:29 +03:00
Glenn Thompson	479ff6ac5e	style: Update recently played track styling - Change track link colors: cyan default, green hover, blue visited - Add equal left/right padding (12px) to track-list for centered separators - Increase track-item top/bottom padding from 6px to 10px for better spacing - Move track-list and track-item inside recently-played-list block for proper CSS nesting - Addresses feedback from easilok on symmetry and breathing room	2025-11-22 17:00:29 +03:00
Glenn Thompson	f145585608	fix: Correct LASS hover syntax for track links - Move track-link styles inside recently-played-list block for proper CSS nesting - Use (:and .track-link :hover) at correct nesting level per LASS documentation - Fixes hover color change to green when mousing over track names - Generates correct CSS selector: .recently-played-list .track-link:hover	2025-11-22 17:00:29 +03:00
Glenn Thompson	9a76d0bc28	refactor: Make track name clickable with external link icon - Replace separate MusicBrainz link with clickable track name - Add external link icon next to track name - Simplify grid layout by removing track-meta column - Update CSS styling for track-link with hover effects - Improves UX by making the primary action (clicking track) more intuitive	2025-11-22 17:00:29 +03:00
Glenn Thompson	65b1ddb9ce	Add recently played tracks feature with MusicBrainz integration - Display last 3 played tracks on front page - Auto-updates every 30 seconds - Shows track title, artist, and time ago - Links to MusicBrainz search for each track - Thread-safe in-memory storage - Works in both normal and frameset modes - Hacker-themed green styling Implements feature request from fade to show recently played tracks with linkage to track info at music database.	2025-11-22 17:00:26 +03:00