fix: improve live stream text proportions
This commit is contained in:
Luis Pereira
Brian O'Reilly
parent
57af5663ab
commit
709affa957
|
|
@ -11,6 +11,30 @@ body{
|
|||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body select{
|
||||
font-family: VT323, monospace;
|
||||
}
|
||||
|
||||
|
||||
|
||||
body header .page-title{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 15px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body header .page-subtitle{
|
||||
color: #4488FF;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-style: italic;
|
||||
margin: 0;
|
||||
margin-top: .8rem;
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
|
||||
body .container{
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
|
|
@ -175,17 +199,49 @@ body .recently-played-panel .recently-played-list .error{
|
|||
color: #ff4444;
|
||||
}
|
||||
|
||||
body .recently-played-panel .recently-played-list.track-list{
|
||||
body .recently-played-panel .recently-played-list .track-link{
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
color: #00ffff;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
font-size: 1em;
|
||||
-moz-transition: all 0.2s;
|
||||
-o-transition: all 0.2s;
|
||||
-webkit-transition: all 0.2s;
|
||||
-ms-transition: all 0.2s;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
body .recently-played-panel .recently-played-list .track-link .external-icon{
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin-left: 2px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
body .recently-played-panel .recently-played-list .track-link:hover{
|
||||
color: #00ff00;
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 3px;
|
||||
}
|
||||
|
||||
body .recently-played-panel .recently-played-list .track-link:visited{
|
||||
color: #4488ff;
|
||||
}
|
||||
|
||||
body .recently-played-panel .recently-played-list .track-list{
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
padding: 0 12px;
|
||||
margin: 0;
|
||||
border: none;
|
||||
max-height: none;
|
||||
overflow-y: visible;
|
||||
}
|
||||
|
||||
body .recently-played-panel .recently-played-list.track-item{
|
||||
padding: 6px 12px;
|
||||
body .recently-played-panel .recently-played-list .track-item{
|
||||
padding: 10px 0;
|
||||
border-bottom: 1px solid #2a3441;
|
||||
-moz-transition: background-color 0.2s;
|
||||
-o-transition: background-color 0.2s;
|
||||
|
|
@ -194,11 +250,11 @@ body .recently-played-panel .recently-played-list.track-item{
|
|||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
body .recently-played-panel .recently-played-list.track-item LAST-CHILD{
|
||||
body .recently-played-panel .recently-played-list .track-item LAST-CHILD{
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
body .recently-played-panel .recently-played-list.track-item HOVER{
|
||||
body .recently-played-panel .recently-played-list .track-item HOVER{
|
||||
background-color: #2a3441;
|
||||
}
|
||||
|
||||
|
|
@ -211,9 +267,6 @@ body .recently-played-panel .recently-played-list.track-info{
|
|||
}
|
||||
|
||||
body .recently-played-panel .recently-played-list.track-title{
|
||||
color: #4488ff;
|
||||
font-weight: 500;
|
||||
font-size: 1em;
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
|
@ -233,41 +286,6 @@ body .recently-played-panel .recently-played-list.track-time{
|
|||
text-align: right;
|
||||
}
|
||||
|
||||
body .recently-played-panel .recently-played-list.track-meta{
|
||||
grid-column: 2;
|
||||
grid-row: 2;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
|
||||
|
||||
body .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;
|
||||
-moz-transition: all 0.2s;
|
||||
-o-transition: all 0.2s;
|
||||
-webkit-transition: all 0.2s;
|
||||
-ms-transition: all 0.2s;
|
||||
transition: all 0.2s;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
body .recently-played-list .allmusic-link HOVER{
|
||||
color: #00ff00;
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 5px;
|
||||
}
|
||||
|
||||
body .recently-played-list .allmusic-link svg{
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
body .back{
|
||||
color: #00ffff;
|
||||
text-decoration: none;
|
||||
|
|
@ -307,19 +325,29 @@ body .player-section .live-stream{
|
|||
overflow: auto;
|
||||
}
|
||||
|
||||
body .live-stream{
|
||||
margin-top: 2rem;
|
||||
font-size: 1.1rem;
|
||||
color: #4488FF;
|
||||
}
|
||||
|
||||
|
||||
body .live-stream p,
|
||||
body .live-stream label{
|
||||
font-size: 1.5rem;
|
||||
body .live-stream .live-stream-label{
|
||||
font-size: 1.2rem;
|
||||
color: #00FFFF;
|
||||
}
|
||||
|
||||
body .live-stream code{
|
||||
font-size: 1rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
body .live-stream .frame-enable-message{
|
||||
color: #00FFFF;
|
||||
}
|
||||
|
||||
body .live-stream .live-stream-quality{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
body .live-stream .live-stream-quality label{
|
||||
|
|
@ -327,9 +355,20 @@ body .live-stream .live-stream-quality label{
|
|||
}
|
||||
|
||||
body .live-stream .live-stream-quality 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;
|
||||
}
|
||||
|
||||
body .live-stream .live-stream-quality select:hover{
|
||||
background: #2a3441;
|
||||
}
|
||||
|
||||
body .track-browser{
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
|
@ -395,8 +434,16 @@ body .audio-player{
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
|
||||
body @-moz-documenturl-prefix() audio{
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
body audio::-webkit-media-controls-panel{
|
||||
background-color: #1a1a1a;
|
||||
border: 1px solid;
|
||||
border-color: #1a2332;
|
||||
background-color: #1a2332;
|
||||
}
|
||||
|
||||
body audio::-webkit-media-controls-current-time-display,
|
||||
|
|
@ -1177,6 +1224,191 @@ body .stat-card .stat-label{
|
|||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
body.persistent-player-container{
|
||||
margin: 0;
|
||||
padding: 10px;;
|
||||
background: #1a2332;
|
||||
}
|
||||
|
||||
body.persistent-player-container .persistent-player{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
body.persistent-player-container .player-label{
|
||||
color: #00ff00;
|
||||
font-weight: bold;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
body.persistent-player-container .quality-selector{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
body.persistent-player-container .quality-selector label{
|
||||
color: #00ff00;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
|
||||
|
||||
body.persistent-player-container .quality-selector select{
|
||||
background: transparent;
|
||||
color: #00ff00;
|
||||
letter-spacing: 0.08rem;
|
||||
border: 1px solid #00ff00;
|
||||
padding: 3px 8px;
|
||||
}
|
||||
|
||||
body.persistent-player-container .quality-selector select:hover{
|
||||
background: #2a3441;
|
||||
}
|
||||
|
||||
body.persistent-player-container audio{
|
||||
flex: 1;
|
||||
min-width: 200px;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
body.persistent-player-container .now-playing-mini{
|
||||
color: #00ff00;
|
||||
font-size: 0.9em;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
flex: 1;
|
||||
min-width: 300px;
|
||||
}
|
||||
|
||||
body.persistent-player-container .persistent-disable-btn{
|
||||
background: transparent;
|
||||
color: #00ff00;
|
||||
border: 1px solid #00ff00;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
font-family: VT323, monospace;
|
||||
font-size: 0.85em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
body.persistent-player-container .persistent-disable-btn:hover{
|
||||
background: #2a3441;
|
||||
}
|
||||
|
||||
body.popout-body{
|
||||
margin: 0;
|
||||
padding: 10px;
|
||||
background: #0a0a0a;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
body.popout-body .popout-player{
|
||||
max-width: 400px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
body.popout-body .popout-header{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid #2a3441;
|
||||
}
|
||||
|
||||
body.popout-body .popout-title{
|
||||
font-size: 1.2em;
|
||||
color: #4488FF;
|
||||
}
|
||||
|
||||
body.popout-body .popout-title .popout-subtitle{
|
||||
margin-top: 0;
|
||||
margin-left: 2rem;
|
||||
font-style: italic;
|
||||
font-size: .8rem;
|
||||
}
|
||||
|
||||
body.popout-body .close-btn{
|
||||
background: transparent;
|
||||
font-family: VT323, monospace;
|
||||
color: #00ff00;
|
||||
border: 1px solid #00ff00;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
border-radius: 3px;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
body.popout-body .close-btn:hover{
|
||||
background: #2a3441;
|
||||
}
|
||||
|
||||
body.popout-body .now-playing-mini{
|
||||
background: #1a2332;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 10px;
|
||||
border: 1px solid #2a3441;
|
||||
}
|
||||
|
||||
body.popout-body .track-info-mini{
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
body.popout-body .track-title-mini{
|
||||
color: #00ff00;
|
||||
font-weight: bold;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
body.popout-body .track-artist-mini{
|
||||
color: #4488ff;
|
||||
font-size: 0.85em;
|
||||
}
|
||||
|
||||
body.popout-body .quality-selector{
|
||||
margin: 10px 0;
|
||||
padding: 10px;
|
||||
background: #1a2332;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #2a3441;
|
||||
}
|
||||
|
||||
body.popout-body .quality-selector label{
|
||||
color: #00ff00;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
body.popout-body .quality-selector select{
|
||||
background: transparent;
|
||||
color: #00ff00;
|
||||
border: 1px solid #00ff00;
|
||||
padding: 5px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
body.popout-body .quality-selector select:hover{
|
||||
background: #2a3441;
|
||||
}
|
||||
|
||||
body.popout-body audio{
|
||||
width: 100%;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
body.popout-body .status-mini{
|
||||
text-align: center;
|
||||
color: #888;
|
||||
font-size: 0.85em;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
@media (max-width: 576px){
|
||||
body .playlist-controls{
|
||||
display: block;
|
||||
|
|
@ -1188,4 +1420,11 @@ body .stat-card .stat-label{
|
|||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@supports (-moz-appearance: none){
|
||||
audio{
|
||||
opacity: 1;
|
||||
background-color: #1a2332;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,11 +1,14 @@
|
|||
;; LASS stylesheet for Asteroid Radio
|
||||
;; Hacker-themed green terminal styling
|
||||
|
||||
(:let ()
|
||||
(: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 "VT323, monospace"
|
||||
:font-family #(main-font)
|
||||
:font-weight 400
|
||||
:font-style normal
|
||||
:background "#0a0a0a"
|
||||
|
|
@ -14,6 +17,26 @@
|
|||
: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")
|
||||
|
|
@ -239,23 +262,45 @@
|
|||
:border "1px solid #2a3441"
|
||||
:margin "20px 0"
|
||||
:border-radius "5px"
|
||||
|
||||
(.live-stream
|
||||
:overflow auto) )
|
||||
:overflow auto))
|
||||
|
||||
(.live-stream
|
||||
((:or p label) :font-size "1.5rem")
|
||||
:margin-top "2rem"
|
||||
:font-size "1.1rem"
|
||||
:color #(color-dodger-blue)
|
||||
|
||||
(code :font-size "1rem")
|
||||
(.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
|
||||
:padding "5px")))
|
||||
: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")
|
||||
|
|
@ -306,8 +351,14 @@
|
|||
(.audio-player
|
||||
:text-align center)
|
||||
|
||||
((:and "@-moz-document" "url-prefix()")
|
||||
(audio
|
||||
:background-color "red"))
|
||||
|
||||
((:and audio |::-webkit-media-controls-panel|)
|
||||
:background-color "#1a2332")
|
||||
: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|
|
||||
|
|
@ -935,6 +986,165 @@
|
|||
|
||||
) ;; 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
|
||||
|
|
@ -944,4 +1154,10 @@
|
|||
(>* :width "100%")
|
||||
(button :margin-left 0
|
||||
:margin-right 0))))
|
||||
|
||||
;; specific browser queries
|
||||
(:supports "(-moz-appearance: none)"
|
||||
(audio
|
||||
:opacity 1
|
||||
:background-color #(color-accented-black)))
|
||||
) ;; End of let block
|
||||
|
|
|
|||
|
|
@ -4,56 +4,8 @@
|
|||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" type="text/css" href="/asteroid/static/asteroid.css">
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 10px;
|
||||
background: #1a1a1a;
|
||||
font-family: 'VT323', monospace;
|
||||
}
|
||||
.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: #2a2a2a;
|
||||
color: #00ff00;
|
||||
border: 1px solid #00ff00;
|
||||
padding: 3px 8px;
|
||||
font-family: 'VT323', monospace;
|
||||
}
|
||||
audio {
|
||||
flex: 1;
|
||||
min-width: 200px;
|
||||
}
|
||||
.now-playing-mini {
|
||||
color: #00ff00;
|
||||
font-size: 0.9em;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
flex: 1;
|
||||
min-width: 300px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<body class="persistent-player-container">
|
||||
<div class="persistent-player">
|
||||
<span class="player-label">🟢 LIVE:</span>
|
||||
|
||||
|
|
@ -73,7 +25,7 @@
|
|||
|
||||
<span class="now-playing-mini" id="mini-now-playing">Loading...</span>
|
||||
|
||||
<button onclick="disableFramesetMode()" style="background: #2a2a2a; color: #00ff00; border: 1px solid #00ff00; padding: 5px 10px; cursor: pointer; font-family: 'VT323', monospace; font-size: 0.85em; white-space: nowrap;">
|
||||
<button onclick="disableFramesetMode()" class="persistent-disable-btn">
|
||||
✕ Disable
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -15,11 +15,12 @@
|
|||
<body>
|
||||
<div class="container">
|
||||
<header>
|
||||
<h1 style="display: flex; align-items: center; justify-content: center; gap: 15px;">
|
||||
<h1 class="page-title">
|
||||
<img src="/asteroid/static/asteroid.png" alt="Asteroid" style="height: 60px; width: auto;">
|
||||
<span data-text="station-name">ASTEROID RADIO</span>
|
||||
<img src="/asteroid/static/asteroid.png" alt="Asteroid" style="height: 60px; width: auto;">
|
||||
</h1>
|
||||
<h3 class="page-subtitle">The Station at the End of Time</h3>
|
||||
<nav class="nav">
|
||||
<a href="/asteroid/content" target="content-frame">Home</a>
|
||||
<a href="/asteroid/player-content" target="content-frame">Player</a>
|
||||
|
|
@ -34,12 +35,12 @@
|
|||
|
||||
<main>
|
||||
<div class="live-stream">
|
||||
<h2 style="color: #00ff00;">🟢 LIVE STREAM</h2>
|
||||
<h2 style="color: #00ff00; margin: 0;"><span style="font-size: 1rem;">🟢</span> LIVE STREAM</h2>
|
||||
<input type="hidden" id="stream-base-url" lquery="(val stream-base-url)">
|
||||
<p><strong>Stream URL:</strong> <code id="stream-url" lquery="(text default-stream-url)"></code></p>
|
||||
<p><strong>Stream Quality:</strong> <span id="stream-format" lquery="(text default-stream-encoding-desc)"></span></p>
|
||||
<p><strong>BROADCASTING:</strong> <span id="stream-status" style="">Asteroid music for Hackers on The Station at the End of Time.</span></p>
|
||||
<p><em>The live stream player is now in the persistent bar at the bottom of the page.</em></p>
|
||||
<p><strong class="live-stream-label">Stream URL:</strong> <code id="stream-url" lquery="(text default-stream-url)"></code></p>
|
||||
<p><strong class="live-stream-label">Stream Quality:</strong> <span id="stream-format" lquery="(text default-stream-encoding-desc)"></span></p>
|
||||
<p><strong class="live-stream-label">BROADCASTING:</strong> <span id="stream-status" style="">Asteroid music for Hackers.</span></p>
|
||||
<p class="frame-enable-message"><em>The live stream player is now in the persistent bar at the bottom of the page</em></p>
|
||||
</div>
|
||||
|
||||
<div id="now-playing" class="now-playing"></div>
|
||||
|
|
|
|||
|
|
@ -15,11 +15,12 @@
|
|||
<body>
|
||||
<div class="container">
|
||||
<header>
|
||||
<h1 style="display: flex; align-items: center; justify-content: center; gap: 15px;">
|
||||
<h1 class="page-title">
|
||||
<img src="/asteroid/static/asteroid.png" alt="Asteroid" style="height: 60px; width: auto;">
|
||||
<span data-text="station-name">ASTEROID RADIO</span>
|
||||
<img src="/asteroid/static/asteroid.png" alt="Asteroid" style="height: 60px; width: auto;">
|
||||
</h1>
|
||||
<h3 class="page-subtitle">The Station at the End of Time</h3>
|
||||
<nav class="nav">
|
||||
<a href="/asteroid/">Home</a>
|
||||
<a href="/asteroid/player">Player</a>
|
||||
|
|
@ -34,13 +35,13 @@
|
|||
|
||||
<main>
|
||||
<div class="live-stream">
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
|
||||
<h2 style="color: #00ff00; margin: 0;">🟢 LIVE STREAM</h2>
|
||||
<div style="margin-bottom: 20px;">
|
||||
<h2 style="color: #00ff00; margin: 0;"><span style="font-size: 1rem;">🟢</span> LIVE STREAM</h2>
|
||||
</div>
|
||||
|
||||
<!-- Stream Quality Selector -->
|
||||
<div class="live-stream-quality">
|
||||
<label for="stream-quality" ><strong>Quality:</strong></label>
|
||||
<label for="stream-quality" class="live-stream-label" ><strong>Quality:</strong></label>
|
||||
<select id="stream-quality" onchange="changeStreamQuality()">
|
||||
<option value="aac">AAC 96kbps (Recommended)</option>
|
||||
<option value="mp3">MP3 128kbps (Compatible)</option>
|
||||
|
|
@ -49,9 +50,9 @@
|
|||
</div>
|
||||
|
||||
<input type="hidden" id="stream-base-url" lquery="(val stream-base-url)">
|
||||
<p><strong>Stream URL:</strong> <code id="stream-url" lquery="(text default-stream-url)"></code></p>
|
||||
<p><strong>Stream Quality:</strong> <span id="stream-format" lquery="(text default-stream-encoding-desc)"></span></p>
|
||||
<p><strong>BROADCASTING:</strong> <span id="stream-status" style="">Asteroid music for Hackers on The Station at the End of Time.</span></p>
|
||||
<p><strong class="live-stream-label">Stream URL:</strong> <code id="stream-url" lquery="(text default-stream-url)"></code></p>
|
||||
<p><strong class="live-stream-label">Stream Quality:</strong> <span id="stream-format" lquery="(text default-stream-encoding-desc)"></span></p>
|
||||
<p><strong class="live-stream-label" class="live-stream-label">BROADCASTING:</strong> <span id="stream-status" style="">Asteroid music for Hackers</span></p>
|
||||
|
||||
<div style="display: flex; gap: 10px; justify-content: end; margin-bottom: 20px;">
|
||||
<button id="popout-btn" class="btn btn-info" onclick="openPopoutPlayer()" style="font-size: 0.9em;">
|
||||
|
|
|
|||
|
|
@ -65,7 +65,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<audio id="audio-player" controls preload="none" style="width: 100%; margin: 20px 0;">
|
||||
<audio id="audio-player" controls preload="none" style="width: 100%; margin: 20px 0; display: none;">
|
||||
Your browser does not support the audio element.
|
||||
</audio>
|
||||
|
||||
|
|
|
|||
|
|
@ -5,95 +5,16 @@
|
|||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" type="text/css" href="/asteroid/static/asteroid.css">
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 10px;
|
||||
background: #0a0a0a;
|
||||
overflow: hidden;
|
||||
}
|
||||
.popout-container {
|
||||
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: #00ff00;
|
||||
}
|
||||
.close-btn {
|
||||
background: #ff4444;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
border-radius: 3px;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
.close-btn:hover {
|
||||
background: #ff6666;
|
||||
}
|
||||
.now-playing-mini {
|
||||
background: #1a1a1a;
|
||||
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: #1a1a1a;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #2a3441;
|
||||
}
|
||||
.quality-selector label {
|
||||
color: #00ff00;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.quality-selector select {
|
||||
background: #0a0a0a;
|
||||
color: #00ff00;
|
||||
border: 1px solid #2a3441;
|
||||
padding: 5px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
audio {
|
||||
width: 100%;
|
||||
margin: 10px 0;
|
||||
}
|
||||
.status-mini {
|
||||
text-align: center;
|
||||
color: #888;
|
||||
font-size: 0.85em;
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
<script src="/asteroid/static/js/front-page.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<body class="popout-body">
|
||||
<div class="popout-container">
|
||||
<div class="popout-header">
|
||||
<div class="popout-title">🎵 Asteroid Radio</div>
|
||||
<div class="popout-title">
|
||||
🎵 Asteroid Radio
|
||||
<br/>
|
||||
<span class="popout-subtitle">The Station at the End of Time</span>
|
||||
</div>
|
||||
<button class="close-btn" onclick="window.close()">✖ Close</button>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue