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
Merge remote-tracking branch 'upstream/main' into glenneth/recently-played-tracks
2025-11-22 10:39:09 +03:00 · 2025-11-22 10:23:45 +03:00 · 2025-11-21 14:21:53 +03:00 · 2025-11-21 10:02:52 +03:00 · 2025-11-21 08:50:19 +03:00 · 2025-11-21 08:47:26 +03:00
2 changed files with 47 additions and 52 deletions
--- a/static/asteroid.lass
+++ b/static/asteroid.lass
@ -145,23 +145,47 @@
       :padding "20px"
       :font-style italic)
      
-      (.error :color "#ff4444"))
+      (.error :color "#ff4444")
      
-     ((:and .recently-played-list .track-list)
+      (.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
+       :padding "0 12px"
       :margin 0
       :border none
       :max-height none
       :overflow-y visible)
      
-     ((:and .recently-played-list .track-item)
-      :padding "6px 12px"
+      (.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 :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,33 +209,8 @@
      :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"
     :text-decoration none
@ -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	7e3c9e0767	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 10:39:09 +03:00
Glenn Thompson	c36015747b	Merge remote-tracking branch 'upstream/main' into glenneth/recently-played-tracks	2025-11-22 10:23:45 +03:00
Glenn Thompson	06fe13ee2e	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-21 14:21:53 +03:00
Glenn Thompson	a35e301583	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-21 10:02:52 +03:00
Glenn Thompson	dccca05b9b	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-21 08:50:19 +03:00
Glenn Thompson	decff5c033	Merge remote-tracking branch 'origin/main' into glenneth/recently-played-tracks	2025-11-21 08:47:26 +03:00
Glenn Thompson	e3e3a144d4	Merge remote-tracking branch 'upstream/main'	2025-11-21 08:35:30 +03:00
Glenn Thompson	6125d06c7d	feat: Add recently-played.ctml partial template Add modular partial template for recently-played section that can be included in other templates	2025-11-20 11:32:11 +03:00
Glenn Thompson	ef204a7612	feat: Add favicon and asteroid.png graphics to front page - Add favicon.ico, favicon-16x16.png, and favicon-32x32.png - Add asteroid.png graphic to header on both front-page.ctml and front-page-content.ctml - Update header styling to display asteroid graphics flanking the station name	2025-11-20 11:30:43 +03:00
Luis Pereira	afcd4fe294	fix: playlist creation on frontend	2025-11-20 11:30:43 +03:00
Luis Pereira	4e509f12b1	fix: hide duplicated browser audio in player page	2025-11-20 11:30:43 +03:00
Luis Pereira	adb14b56ab	fix: tracks and playlist db interation through data-model	2025-11-20 11:30:43 +03:00
Glenn Thompson	cec3763403	Merge remote-tracking branch 'upstream/main'	2025-11-20 07:04:29 +03:00
Glenn Thompson	06c5904ecd	Refine recently played styling and MusicBrainz search - Use 2-column grid layout: track/artist left, time/link right - Match color scheme with now-playing section (blue text) - Tighter row spacing (6px padding) - Simplified MusicBrainz search query (no field prefixes) - Fix CSS selector for proper link styling - Right-align time and MusicBrainz link	2025-11-18 07:16:07 +03:00
Glenn Thompson	4fd35db924	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-18 07:16:07 +03:00
Glenn Thompson	c198775083	Merge remote-tracking branch 'upstream/main'	2025-11-18 07:15:32 +03:00
Glenn Thompson	d187a01641	Merge remote-tracking branch 'upstream/main'	2025-11-17 06:34:49 +03:00
Glenn Thompson	f498008d2a	Merge remote-tracking branch 'upstream/main'	2025-11-15 18:43:48 +03:00
Glenn Thompson	96a3ce2b64	Merge remote-tracking branch 'upstream/main'	2025-11-14 09:08:31 +03:00
Glenn Thompson	63d606b39b	fix: Use sequential mode in liquidsoap to play through entire playlist The playlist was stuck on the first track because mode='normal' stops after playing once. Changed to mode='sequential' which plays through the entire playlist in order and then loops. Also improved reload mechanism: - Use reload_mode='watch' for efficient file change detection - Increased reload interval to 5 minutes (less disruptive)	2025-11-13 07:08:25 +03:00