1173 lines
26 KiB
Plaintext
1173 lines
26 KiB
Plaintext
;; LASS stylesheet for Asteroid Radio
|
|
;; Hacker-themed green terminal styling
|
|
|
|
(:let ((color-dodger-blue "#4488FF")
|
|
(color-aqua "#00FFFF")
|
|
(color-accented-black "#1a2332")
|
|
(main-font "VT323, monospace"))
|
|
(:import (url "https://fonts.googleapis.com/css2?family=VT323&display=swap"))
|
|
(body
|
|
;; :font-family "Courier New, monospace"
|
|
:font-family #(main-font)
|
|
:font-weight 400
|
|
:font-style normal
|
|
:background "#0a0a0a"
|
|
:color "#00ffff"
|
|
:margin 0
|
|
:padding "20px"
|
|
:box-sizing "border-box"
|
|
|
|
(select
|
|
:font-family #(main-font))
|
|
|
|
(header
|
|
(.page-title
|
|
:display "flex"
|
|
:align-items "center"
|
|
:justify-content "center"
|
|
:gap "15px"
|
|
:margin 0)
|
|
|
|
(.page-subtitle
|
|
:color #(color-dodger-blue)
|
|
:display "flex"
|
|
:justify-content "center"
|
|
:font-style "italic"
|
|
:margin 0
|
|
:margin-top ".8rem"
|
|
:margin-bottom "4rem"))
|
|
|
|
(.container
|
|
:max-width "1200px"
|
|
:margin "0 auto")
|
|
|
|
(strong :letter-spacing "0.08rem")
|
|
|
|
(h1
|
|
:color "#4488ff"
|
|
:text-align center
|
|
:font-size "2.5em"
|
|
:margin-bottom "30px")
|
|
|
|
(h2
|
|
:color "#4488ff")
|
|
|
|
(.status
|
|
:background "#1a2332"
|
|
:padding "20px"
|
|
:border "1px solid #2a3441"
|
|
:margin "20px 0")
|
|
|
|
(.panel
|
|
:background "#1a2332"
|
|
:padding "20px"
|
|
:border "1px solid #2a3441"
|
|
:margin "20px 0")
|
|
|
|
(.nav
|
|
:margin "20px 0"
|
|
:display "flex"
|
|
:gap "5px"
|
|
:flex-wrap "wrap"
|
|
:justify-content center
|
|
(a
|
|
:color "#00ffff"
|
|
:text-decoration none
|
|
:margin "0"
|
|
:padding "10px 20px"
|
|
:border "1px solid #2a3441"
|
|
:background "#1a2332"
|
|
:min-width "100px"
|
|
:text-align "center"
|
|
:border-sizing "border-box"
|
|
:letter-spacing "0.08rem"
|
|
:cursor pointer
|
|
:display inline-block)
|
|
|
|
((:and a :first-child)
|
|
:margin-left "0")
|
|
|
|
((:and a :hover)
|
|
:text-decoration underline
|
|
:text-underline-offset "5px"
|
|
:background "#2a3441"
|
|
:color "#00ff00")
|
|
|
|
;; Logout button styling - subtle, not alarming
|
|
(.btn-logout
|
|
:background "#2a3441"
|
|
:border-color "#3a4551"
|
|
:color "#ff9999")
|
|
|
|
((:and .btn-logout :hover)
|
|
:background "#3a4551"
|
|
:border-color "#4a5561"
|
|
:color "#ffaaaa"))
|
|
|
|
;; Hide conditional auth elements by default (JavaScript will show them)
|
|
(|[data-show-if-logged-in]|
|
|
:display none)
|
|
|
|
(|[data-show-if-logged-out]|
|
|
:display none)
|
|
|
|
(|[data-show-if-admin]|
|
|
:display none)
|
|
|
|
(.controls
|
|
:margin "20px 0"
|
|
(button
|
|
:background "#1a2332"
|
|
:color "#00ffff"
|
|
:border "1px solid #2a3441"
|
|
:padding "10px 20px"
|
|
:margin "5px"
|
|
:cursor pointer)
|
|
((:and button :hover)
|
|
:background "#2a3441"))
|
|
|
|
(button
|
|
:background "#2a3441"
|
|
:color "#00ffff"
|
|
:border "1px solid #3a4551"
|
|
:padding "10px 20px"
|
|
:margin "5px"
|
|
:cursor pointer)
|
|
|
|
((:and button :hover)
|
|
:background "#3a4551")
|
|
|
|
(.now-playing
|
|
:background "#1a2332"
|
|
:padding "20px"
|
|
:border "1px solid #2a3441"
|
|
:margin "20px 0"
|
|
:font-size "1.5em"
|
|
:color "#4488ff"
|
|
:overflow auto)
|
|
|
|
;; Recently Played Panel
|
|
(.recently-played-panel
|
|
:background "#1a2332"
|
|
:border "1px solid #2a3441"
|
|
:border-radius "8px"
|
|
:padding "20px"
|
|
:margin "20px 0"
|
|
|
|
(h3 :margin "0 0 15px 0"
|
|
:color "#00ff00"
|
|
:font-size "1.2em"
|
|
:font-weight 600)
|
|
|
|
(.recently-played-list
|
|
:min-height "100px"
|
|
|
|
((:or .loading .no-tracks .error)
|
|
:text-align center
|
|
:color "#888"
|
|
:padding "20px"
|
|
:font-style italic)
|
|
|
|
(.error :color "#ff4444")
|
|
|
|
(.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
|
|
:grid-template-columns "1fr auto"
|
|
:grid-template-rows "auto auto"
|
|
:gap "2px 20px"
|
|
:align-items center)
|
|
|
|
((:and .recently-played-list .track-title)
|
|
:grid-column 1
|
|
:grid-row 1)
|
|
|
|
((:and .recently-played-list .track-artist)
|
|
:color "#4488ff"
|
|
:font-size "0.9em"
|
|
:grid-column 1
|
|
:grid-row 2)
|
|
|
|
((:and .recently-played-list .track-time)
|
|
:color "#888"
|
|
:font-size "0.85em"
|
|
:grid-column 2
|
|
:grid-row 1
|
|
:text-align right))
|
|
|
|
(.back
|
|
:color "#00ffff"
|
|
:text-decoration none
|
|
:margin-bottom "20px"
|
|
:display inline-block)
|
|
((:and .back :hover)
|
|
:text-decoration underline)
|
|
|
|
;; Player-specific styles
|
|
(.player
|
|
:background "#1a2332"
|
|
:padding "40px"
|
|
:border "1px solid #2a3441"
|
|
:margin "40px auto"
|
|
:max-width "600px"
|
|
(.controls
|
|
(button
|
|
:padding "15px 30px"
|
|
:margin "10px"
|
|
:font-size "1.2em")))
|
|
|
|
;; Web Player Widget Styles
|
|
(.player-section
|
|
:background "#1a2332"
|
|
:padding "25px"
|
|
:border "1px solid #2a3441"
|
|
:margin "20px 0"
|
|
:border-radius "5px"
|
|
|
|
(.live-stream
|
|
:overflow auto))
|
|
|
|
(.live-stream
|
|
:margin-top "2rem"
|
|
:font-size "1.1rem"
|
|
:color #(color-dodger-blue)
|
|
|
|
(.live-stream-label
|
|
:font-size "1.2rem"
|
|
:color #(color-aqua))
|
|
|
|
(code :font-size "0.9rem")
|
|
|
|
(.frame-enable-message
|
|
:color #(color-aqua))
|
|
|
|
(.live-stream-quality
|
|
|
|
:display "flex"
|
|
:align-items "center"
|
|
:flex-wrap "wrap"
|
|
|
|
(label
|
|
:margin-right "10px")
|
|
|
|
(select
|
|
:background "transparent"
|
|
:color "#00ff00"
|
|
:border "1px solid #00ff00"
|
|
:letter-spacing "0.08rem"
|
|
:font-size "0.95rem"
|
|
:min-width "220px"
|
|
:width "fit-content"
|
|
:padding "5px")
|
|
|
|
((:and select :hover)
|
|
:background "#2a3441")))
|
|
|
|
(.track-browser
|
|
:margin "15px 0")
|
|
|
|
(.search-input
|
|
:width "100%"
|
|
:padding "12px"
|
|
:background "#0a0a0a"
|
|
:color "#00ffff"
|
|
:border "1px solid #2a3441"
|
|
:font-family "Courier New, monospace"
|
|
:font-size "14px"
|
|
:margin-bottom "15px"
|
|
:box-sizing "border-box")
|
|
|
|
(.sort-select
|
|
:padding "0.25rem"
|
|
:margin-right "10px")
|
|
|
|
(.track-list
|
|
:max-height "400px"
|
|
:overflow-y auto
|
|
:border "1px solid #2a3441"
|
|
:background "#0a0a0a")
|
|
|
|
(.track-item
|
|
:display flex
|
|
:justify-content space-between
|
|
:align-items center
|
|
:padding "12px 15px"
|
|
:border-bottom "1px solid #2a3441"
|
|
:transition "background-color 0.2s")
|
|
|
|
(.track-info
|
|
:flex 1
|
|
(.track-title
|
|
:color "#00ffff"
|
|
:font-weight bold
|
|
:margin-bottom "4px")
|
|
(.track-meta
|
|
:color "#888"
|
|
:font-size "0.9em"))
|
|
|
|
(.track-actions
|
|
:display flex
|
|
:gap "8px")
|
|
|
|
(.audio-player
|
|
:text-align center)
|
|
|
|
((:and "@-moz-document" "url-prefix()")
|
|
(audio
|
|
:background-color "red"))
|
|
|
|
((:and audio |::-webkit-media-controls-panel|)
|
|
:border "1px solid"
|
|
:border-color #(color-accented-black)
|
|
:background-color #(color-accented-black))
|
|
|
|
;; ((:and audio (:or |::-webkit-media-controls-mute-button|
|
|
;; |::-webkit-media-controls-play-button|
|
|
;; |::-webkit-media-controls-current-time-display|
|
|
;; |::-webkit-media-controls-time-remaining-display|
|
|
;; ))
|
|
;; :height "20px"
|
|
;; :line-height "20px")
|
|
|
|
((:and audio (:or |::-webkit-media-controls-current-time-display|
|
|
|::-webkit-media-controls-time-remaining-display|))
|
|
:color "#fff")
|
|
|
|
((:and audio |::-webkit-media-controls-enclosure|)
|
|
:border-radius 0)
|
|
|
|
((:and audio (:or |::-webkit-media-controls-mute-button|
|
|
|::-webkit-media-controls-play-button|
|
|
|::-webkit-media-controls-volume-slider|
|
|
|::-webkit-media-controls-timeline|
|
|
|::-webkit-media-controls-toggle-closed-captions-button|
|
|
|::-webkit-media-controls-fullscreen-button|
|
|
|::-webkit-media-controls-timeline|
|
|
|::-webkit-media-controls-overlay-enclosure|))
|
|
:filter "invert(1)")
|
|
|
|
(.track-art
|
|
:font-size "3em"
|
|
:margin-right "20px"
|
|
:color "#4488ff")
|
|
|
|
(.track-details
|
|
(.track-title
|
|
:font-size "1.4em"
|
|
:color "#00ffff"
|
|
:margin-bottom "5px")
|
|
(.track-artist
|
|
:font-size "1.1em"
|
|
:color "#4488ff"
|
|
:margin-bottom "3px")
|
|
(.track-album
|
|
:color "#888"))
|
|
|
|
(.player-controls
|
|
:margin "20px 0"
|
|
:display flex
|
|
:justify-content center
|
|
:gap "10px"
|
|
:flex-wrap wrap)
|
|
|
|
(.player-info
|
|
:display flex
|
|
:justify-content space-between
|
|
:align-items center
|
|
:margin-top "15px"
|
|
:padding "10px"
|
|
:background "#0a0a0a"
|
|
:border "1px solid #2a3441"
|
|
:border-radius "3px")
|
|
|
|
(.time-display
|
|
:color "#00ffff"
|
|
:font-family "Courier New, monospace")
|
|
|
|
(.volume-control
|
|
:display flex
|
|
:align-items center
|
|
:gap "10px"
|
|
(label
|
|
:color "#4488ff"))
|
|
|
|
(.volume-slider
|
|
:width "100px"
|
|
:height "5px"
|
|
:background "#2a3441"
|
|
:outline none
|
|
:border-radius "3px")
|
|
|
|
;; Button styles
|
|
(.btn
|
|
:background "#2a3441"
|
|
:color "#00ffff"
|
|
:border "1px solid #3a4551"
|
|
:padding "8px 16px"
|
|
:margin "3px"
|
|
:cursor pointer
|
|
:font-family "Courier New, monospace"
|
|
:font-size "14px"
|
|
:border-radius "3px"
|
|
:transition "all 0.2s")
|
|
((:and .btn :hover)
|
|
:background "#3a4551"
|
|
:border-color "#3a4551")
|
|
|
|
(.btn
|
|
(.btn-primary
|
|
:background "#0066cc"
|
|
:border-color "#0088ff")
|
|
((:and .btn-primary :hover)
|
|
:background "#0088ff")
|
|
|
|
(.btn-secondary
|
|
:background "#444"
|
|
:border-color "#2a3441")
|
|
((:and .btn-secondary :hover)
|
|
:background "#666")
|
|
|
|
(.btn-sm
|
|
:padding "4px 8px"
|
|
:font-size "12px")
|
|
|
|
(.btn.active
|
|
:background "#4488ff"
|
|
:border-color "#5599ff"
|
|
:color "#000"))
|
|
|
|
;; Playlist and Queue styles
|
|
(.playlist-controls
|
|
:margin-bottom "15px"
|
|
:display flex
|
|
:gap "10px"
|
|
:align-items center)
|
|
|
|
(.playlist-input
|
|
:flex 1
|
|
:padding "8px 12px"
|
|
:background "#0a0a0a"
|
|
:color "#00ffff"
|
|
:border "1px solid #2a3441"
|
|
:font-family "Courier New, monospace"
|
|
:box-sizing "border-box")
|
|
|
|
(.playlist-list
|
|
:border "1px solid #2a3441"
|
|
:background "#0a0a0a"
|
|
:min-height "100px"
|
|
:padding "10px")
|
|
|
|
(.queue-controls
|
|
:margin-bottom "15px"
|
|
:display flex
|
|
:gap "10px")
|
|
|
|
(.play-queue
|
|
:border "1px solid #2a3441"
|
|
:background "#0a0a0a"
|
|
:min-height "150px"
|
|
:max-height "300px"
|
|
:overflow-y auto
|
|
:padding "10px")
|
|
|
|
(.queue-item
|
|
:display flex
|
|
:justify-content space-between
|
|
:align-items center
|
|
:padding "8px 10px"
|
|
:border-bottom "1px solid #2a3441"
|
|
:margin-bottom "5px")
|
|
((:and .queue-item :last-child)
|
|
:border-bottom none
|
|
:margin-bottom 0)
|
|
|
|
(.queue-position
|
|
:background "#00ff00"
|
|
:color "#000"
|
|
:padding "4px 8px"
|
|
:border-radius "3px"
|
|
:font-weight bold
|
|
:margin-right "10px"
|
|
:min-width "30px"
|
|
:text-align center
|
|
:display inline-block)
|
|
|
|
(.queue-track-info
|
|
:flex 1
|
|
:margin-right "10px")
|
|
|
|
((:and .queue-track-info .track-title)
|
|
:font-weight bold
|
|
:margin-bottom "2px")
|
|
|
|
((:and .queue-track-info .track-artist)
|
|
:font-size "0.9em"
|
|
:color "#888")
|
|
|
|
(.queue-actions
|
|
:margin-top "20px"
|
|
:padding "15px"
|
|
:background "#0a0a0a"
|
|
:border "1px solid #2a3441"
|
|
:border-radius "4px")
|
|
|
|
(.queue-list
|
|
:border "1px solid #2a3441"
|
|
:background "#0a0a0a"
|
|
:min-height "200px"
|
|
:max-height "400px"
|
|
:overflow-y auto
|
|
:padding "10px"
|
|
:margin-bottom "20px")
|
|
|
|
(.search-results
|
|
:margin-top "10px"
|
|
:max-height "300px"
|
|
:overflow-y auto)
|
|
|
|
(.search-result-item
|
|
:display flex
|
|
:justify-content space-between
|
|
:align-items center
|
|
:padding "10px"
|
|
:border "1px solid #2a3441"
|
|
:margin-bottom "5px"
|
|
:background "#0a0a0a"
|
|
:border-radius "3px")
|
|
|
|
((:and .search-result-item :hover)
|
|
:background "#1a1a1a"
|
|
:border-color "#00ff00")
|
|
|
|
((:and .search-result-item .track-info)
|
|
:flex 1)
|
|
|
|
((:and .search-result-item .track-actions)
|
|
:display flex
|
|
:gap "5px")
|
|
|
|
(.empty-state
|
|
:text-align center
|
|
:color "#666"
|
|
:padding "30px"
|
|
:font-style italic)
|
|
|
|
(.empty-queue
|
|
:text-align center
|
|
:color "#666"
|
|
:padding "20px"
|
|
:font-style italic)
|
|
|
|
(.no-tracks
|
|
:text-align center
|
|
:color "#666"
|
|
:padding "20px"
|
|
:font-style italic)
|
|
|
|
(.no-playlists
|
|
:text-align center
|
|
:color "#666"
|
|
:padding "20px"
|
|
:font-style italic)
|
|
|
|
(.loading
|
|
:text-align center
|
|
:color "#4488ff"
|
|
:padding "20px")
|
|
|
|
(.error
|
|
:text-align center
|
|
:color "#ff0000"
|
|
:padding "20px"
|
|
:font-weight bold)
|
|
|
|
;; Upload interface styles
|
|
(.upload-section
|
|
:margin "20px 0"
|
|
:padding "20px"
|
|
:background "#0a0a0a"
|
|
:border "1px solid #2a3441"
|
|
:border-radius "5px")
|
|
|
|
(.upload-controls
|
|
:display flex
|
|
:gap "15px"
|
|
:align-items center
|
|
:margin-bottom "15px")
|
|
|
|
(.upload-info
|
|
:color "#888"
|
|
:font-size "0.9em")
|
|
|
|
(.upload-progress
|
|
:margin-top "10px"
|
|
:padding "10px"
|
|
:background "#1a2332"
|
|
:border "1px solid #2a3441"
|
|
:border-radius "3px")
|
|
|
|
(.progress-bar
|
|
:height "20px"
|
|
:background "#4488ff"
|
|
:border-radius "3px"
|
|
:transition "width 0.3s ease"
|
|
:width "0%")
|
|
|
|
(.progress-text
|
|
:display block
|
|
:margin-top "5px"
|
|
:color "#00ffff"
|
|
:font-size "0.9em")
|
|
|
|
(input
|
|
:padding "8px 12px"
|
|
:background "#1a2332"
|
|
:color "#00ffff"
|
|
:border "1px solid #2a3441"
|
|
:border-radius "3px"
|
|
:font-family "Courier New, monospace")
|
|
|
|
(.upload-interface
|
|
:margin-top 2rem
|
|
:padding 1.5rem
|
|
:background-color "#1a2332"
|
|
:border-radius 8px
|
|
:border "1px solid #2a3441"
|
|
|
|
(h3 :color "#00ffff"
|
|
:margin-bottom 1rem)
|
|
|
|
(.upload-area
|
|
:border "2px dashed #2a3441"
|
|
:border-radius 8px
|
|
:padding 2rem
|
|
:text-align center
|
|
:background-color "#0f0f0f"
|
|
:transition "border-color 0.3s ease"
|
|
|
|
(.upload-icon :font-size 3rem
|
|
:color "#666"
|
|
:margin-bottom 1rem)
|
|
|
|
(p :color "#999"
|
|
:margin-bottom 1rem)
|
|
|
|
(.btn :margin-top 1rem))
|
|
|
|
((:and .upload-area :hover)
|
|
:border-color "#00ffff"))
|
|
|
|
;; Authentication Styles
|
|
(.auth-container
|
|
:display flex
|
|
:justify-content center
|
|
:align-items center
|
|
:min-height "60vh"
|
|
:padding 2rem)
|
|
|
|
(.auth-form
|
|
:background-color "#1a2332"
|
|
:border "1px solid #2a3441"
|
|
:border-radius 8px
|
|
:padding 2rem
|
|
:width "100%"
|
|
:max-width 600px
|
|
:box-shadow "0 4px 6px rgba(0, 0, 0, 0.3)"
|
|
|
|
(h2 :color "#00ffff"
|
|
:text-align center
|
|
:margin-bottom 1.5rem
|
|
:font-size 1.5rem)
|
|
|
|
(h3 :color "#00ffff"
|
|
:margin-bottom 1rem
|
|
:font-size 1.2rem))
|
|
|
|
(.form-group
|
|
:margin-bottom 1.5rem
|
|
|
|
(label :display block
|
|
:color "#ccc"
|
|
:margin-bottom 0.5rem
|
|
:font-weight bold)
|
|
|
|
(input :width "100%"
|
|
:padding 0.75rem
|
|
:background-color "#0f0f0f"
|
|
:border "1px solid #2a3441"
|
|
:border-radius 4px
|
|
:color "#fff"
|
|
:font-size 1rem
|
|
:box-sizing border-box)
|
|
|
|
((:and input :focus)
|
|
:border-color "#00ffff"
|
|
:outline none
|
|
:box-shadow "0 0 0 2px rgba(0, 255, 0, 0.2)"))
|
|
|
|
(.form-actions
|
|
:display flex
|
|
:gap 1rem
|
|
:margin-top 1.5rem)
|
|
|
|
(.message
|
|
:padding 0.75rem
|
|
:border-radius 4px
|
|
:margin-top 1rem
|
|
:text-align center
|
|
:font-weight bold
|
|
|
|
((:parent .success)
|
|
:background-color "rgba(0, 255, 0, 0.1)"
|
|
:border "1px solid #00ffff"
|
|
:color "#00ffff")
|
|
|
|
((:parent .error)
|
|
:background-color "rgba(255, 0, 0, 0.1)"
|
|
:border "1px solid #ff0000"
|
|
:color "#ff0000"))
|
|
|
|
(.auth-link
|
|
:text-align center
|
|
:margin-top 1.5rem
|
|
:color "#999"
|
|
|
|
(a :color "#00ffff"
|
|
:text-decoration none)
|
|
|
|
((:and a :hover) :text-decoration underline))
|
|
|
|
;; Profile Styles
|
|
(.profile-info
|
|
:margin-bottom 2rem)
|
|
|
|
(.info-group
|
|
:display flex
|
|
:justify-content space-between
|
|
:align-items center
|
|
:padding 0.75rem 0
|
|
:border-bottom "1px solid #2a3441"
|
|
|
|
(label :color "#ccc"
|
|
:font-weight bold)
|
|
|
|
(span :color "#fff"))
|
|
|
|
((:and .info-group :last-child) :border-bottom none)
|
|
|
|
(.role-badge
|
|
:background-color "#00ffff"
|
|
:color "#000"
|
|
:padding "0.25rem 0.5rem"
|
|
:border-radius 4px
|
|
:font-size 0.875rem
|
|
:font-weight bold)
|
|
|
|
(.profile-actions
|
|
:display flex
|
|
:gap 1rem
|
|
:justify-content center)
|
|
|
|
;; Additional Profile Page Styles
|
|
(.artist-stats
|
|
:display flex
|
|
:flex-direction column
|
|
:gap 0.75rem)
|
|
|
|
(.artist-item
|
|
:display flex
|
|
:justify-content space-between
|
|
:align-items center
|
|
:padding "0.5rem 0"
|
|
:border-bottom "1px solid #2a3441")
|
|
|
|
((:and .artist-item :last-child)
|
|
:border-bottom none)
|
|
|
|
(.artist-name
|
|
:color "#e0e6ed"
|
|
:font-weight 500)
|
|
|
|
(.artist-plays
|
|
:color "#8892b0"
|
|
:font-size 0.875rem)
|
|
|
|
(.track-item
|
|
:display flex
|
|
:justify-content space-between
|
|
:align-items center
|
|
:padding "0.75rem 0"
|
|
:border-bottom "1px solid #2a3441")
|
|
|
|
((:and .track-item :last-child)
|
|
:border-bottom none)
|
|
|
|
(.track-info
|
|
:display flex
|
|
:flex-direction column
|
|
:gap 0.25rem)
|
|
|
|
(.track-title
|
|
:color "#e0e6ed"
|
|
:font-weight 500)
|
|
|
|
(.track-artist
|
|
:color "#8892b0"
|
|
:font-size 0.875rem)
|
|
|
|
(.track-meta
|
|
:display flex
|
|
:flex-direction column
|
|
:align-items flex-end
|
|
:gap 0.25rem
|
|
:text-align right)
|
|
|
|
(.track-duration
|
|
:color "#64ffda"
|
|
:font-size 0.875rem
|
|
:font-weight bold)
|
|
|
|
(.track-played-at
|
|
:color "#8892b0"
|
|
:font-size 0.75rem)
|
|
|
|
(.activity-chart
|
|
:text-align center)
|
|
|
|
(.chart-placeholder
|
|
:display flex
|
|
:align-items flex-end
|
|
:justify-content space-between
|
|
:height 120px
|
|
:margin "1rem 0"
|
|
:padding "0 1rem")
|
|
|
|
(.chart-bar
|
|
:width 8px
|
|
:background-color "#64ffda"
|
|
:border-radius "2px 2px 0 0"
|
|
:margin "0 1px"
|
|
:min-height 4px
|
|
:opacity 0.8)
|
|
|
|
((:and .chart-bar :hover)
|
|
:opacity 1)
|
|
|
|
(.chart-note
|
|
:color "#8892b0"
|
|
:font-size 0.875rem
|
|
:margin-top 0.5rem)
|
|
|
|
(.stat-number
|
|
:color "#64ffda"
|
|
:font-size 1.5rem
|
|
:font-weight bold
|
|
:display block)
|
|
|
|
(.stat-text
|
|
:color "#e0e6ed"
|
|
:font-size 1.2rem
|
|
:font-weight 500
|
|
:display block)
|
|
|
|
;; Toast notification styles
|
|
(.toast
|
|
:position fixed
|
|
:top 20px
|
|
:right 20px
|
|
:padding "12px 20px"
|
|
:border-radius 4px
|
|
:color white
|
|
:font-weight bold
|
|
:z-index 1000
|
|
:transition "opacity 0.3s ease")
|
|
|
|
;; User Management Styles
|
|
(.user-management :margin-top 2rem)
|
|
|
|
(.users-table
|
|
:width "100%"
|
|
:border-collapse collapse
|
|
:background-color "#1a2332"
|
|
:border "1px solid #2a3441"
|
|
:border-radius 8px
|
|
:overflow hidden
|
|
|
|
(thead
|
|
:background-color "#0f0f0f"
|
|
|
|
(th :padding 1rem
|
|
:text-align left
|
|
:color "#00ffff"
|
|
:font-weight bold
|
|
:border-bottom "1px solid #2a3441"))
|
|
|
|
(tbody
|
|
(tr :border-bottom "1px solid #2a3441"
|
|
|
|
(td :padding 1rem
|
|
:color "#fff"
|
|
:vertical-align middle))
|
|
((:and tr :hover) :background-color "#222")
|
|
|
|
|
|
(.user-actions
|
|
:display flex
|
|
:gap 0.5rem
|
|
|
|
(.btn :padding "0.25rem 0.5rem"
|
|
:font-size 0.875rem))))
|
|
|
|
(.user-stats
|
|
:display grid
|
|
:grid-template-columns "repeat(auto-fit, minmax(150px, 1fr))"
|
|
:gap 1rem
|
|
:margin-bottom 2rem)
|
|
|
|
(.stat-card
|
|
:background-color "#1a2332"
|
|
:border "1px solid #2a3441"
|
|
:border-radius 8px
|
|
:padding 1rem
|
|
:text-align center
|
|
|
|
(.stat-number :font-size 2rem
|
|
:font-weight bold
|
|
:color "#00ffff"
|
|
:display block)
|
|
|
|
(.stat-label :color "#ccc"
|
|
:font-size 0.875rem
|
|
:margin-top 0.5rem))
|
|
|
|
;; Center alignment for player page
|
|
;; (body.player-page
|
|
;; :text-align center)
|
|
|
|
) ;; Close main body block
|
|
|
|
;; Persistent bottom player overrides
|
|
((:and body .persistent-player-container)
|
|
:margin 0
|
|
:padding "10px;"
|
|
:background #(color-accented-black)
|
|
|
|
(.persistent-player
|
|
:display "flex"
|
|
:align-items "center"
|
|
:gap "15px"
|
|
:max-width "100%")
|
|
|
|
(.player-label
|
|
:color "#00ff00"
|
|
:font-weight "bold"
|
|
:white-space "nowrap")
|
|
|
|
(.quality-selector
|
|
:display "flex"
|
|
:align-items "center"
|
|
:gap "5px")
|
|
|
|
(.quality-selector
|
|
(label
|
|
:color "#00ff00"
|
|
:font-size "0.9em"))
|
|
|
|
(.quality-selector
|
|
(select
|
|
:background "transparent"
|
|
:color "#00ff00"
|
|
:letter-spacing "0.08rem"
|
|
:border "1px solid #00ff00"
|
|
:padding "3px 8px")
|
|
((:and select :hover)
|
|
:background "#2a3441"))
|
|
|
|
(audio
|
|
:flex 1
|
|
:min-width "200px"
|
|
:border 0)
|
|
|
|
;; ((:and audio |::-webkit-media-controls-panel|)
|
|
;; :border 1 solid #(color-accented-black)
|
|
;; :background-color #(color-accented-black))
|
|
|
|
(.now-playing-mini
|
|
:color "#00ff00"
|
|
:font-size "0.9em"
|
|
:white-space "nowrap"
|
|
:overflow "hidden"
|
|
:text-overflow "ellipsis"
|
|
:flex 1
|
|
:min-width "300px")
|
|
|
|
(.persistent-disable-btn
|
|
:background transparent
|
|
:color "#00ff00"
|
|
:border "1px solid #00ff00"
|
|
:padding "5px 10px"
|
|
:cursor "pointer"
|
|
:font-family #(main-font)
|
|
:font-size "0.85em"
|
|
:white-space nowrap)
|
|
|
|
((:and .persistent-disable-btn :hover)
|
|
:background "#2a3441"))
|
|
|
|
;; Popout player overrides
|
|
((:and body .popout-body)
|
|
:margin 0
|
|
:padding "10px"
|
|
:background "#0a0a0a"
|
|
:overflow "hidden"
|
|
|
|
(.popout-player
|
|
:max-width "400px"
|
|
:margin "0 auto")
|
|
|
|
(.popout-header
|
|
:display "flex"
|
|
:justify-content "space-between"
|
|
:align-items "center"
|
|
:margin-bottom "10px"
|
|
:padding-bottom "10px"
|
|
:border-bottom "1px solid #2a3441")
|
|
|
|
(.popout-title
|
|
:font-size "1.2em"
|
|
:color #(color-dodger-blue)
|
|
(.popout-subtitle
|
|
:margin-top 0
|
|
:margin-left "2rem"
|
|
:font-style italic
|
|
:font-size ".8rem"))
|
|
|
|
(.close-btn
|
|
:background transparent
|
|
:font-family #(main-font)
|
|
:color "#00ff00"
|
|
:border "1px solid #00ff00"
|
|
:padding "5px 10px"
|
|
:cursor "pointer"
|
|
:border-radius "3px"
|
|
:font-size "0.9em")
|
|
|
|
((:and .close-btn :hover)
|
|
:background "#2a3441")
|
|
|
|
(.now-playing-mini
|
|
:background #(color-accented-black)
|
|
:padding "10px"
|
|
:border-radius "5px"
|
|
:margin-bottom "10px"
|
|
:border "1px solid #2a3441")
|
|
|
|
(.track-info-mini
|
|
:font-size "0.9em")
|
|
|
|
(.track-title-mini
|
|
:color "#00ff00"
|
|
:font-weight "bold"
|
|
:margin-bottom "3px")
|
|
|
|
(.track-artist-mini
|
|
:color "#4488ff"
|
|
:font-size "0.85em")
|
|
|
|
(.quality-selector
|
|
:margin "10px 0"
|
|
:padding "10px"
|
|
:background #(color-accented-black)
|
|
:border-radius "5px"
|
|
:border "1px solid #2a3441"
|
|
|
|
(label
|
|
:color "#00ff00"
|
|
:margin-right "10px")
|
|
|
|
(select
|
|
:background transparent
|
|
:color "#00ff00"
|
|
:border "1px solid #00ff00"
|
|
:padding "5px"
|
|
:border-radius "3px")
|
|
|
|
((:and select :hover)
|
|
:background "#2a3441"))
|
|
|
|
(audio
|
|
:width "100%"
|
|
:margin "10px 0")
|
|
|
|
(.status-mini
|
|
:text-align "center"
|
|
:color "#888"
|
|
:font-size "0.85em"
|
|
:margin-top "10px"))
|
|
|
|
;; media queries for reponsiveness
|
|
(:media "(max-width: 576px)"
|
|
(body
|
|
(.playlist-controls
|
|
:display block
|
|
;;:width "100%"
|
|
(>* :width "100%")
|
|
(button :margin-left 0
|
|
:margin-right 0))))
|
|
|
|
;; specific browser queries
|
|
(:supports "(-moz-appearance: none)"
|
|
(audio
|
|
:opacity 1
|
|
:background-color #(color-accented-black)))
|
|
|
|
;; Live stream pulse animation (like old MacBook sleep indicator)
|
|
(.live-stream-indicator
|
|
:animation "asteroid-pulse 2s ease-in-out infinite")
|
|
|
|
(:keyframes asteroid-pulse
|
|
(0% :opacity 1)
|
|
(50% :opacity 0.3)
|
|
(100% :opacity 1))
|
|
) ;; End of let block
|