fix styles
This commit is contained in:
parent
85ae86ddd3
commit
eda5b12ca6
|
@ -22,12 +22,12 @@
|
|||
<song></song>
|
||||
</metadata></canvas>
|
||||
<controls>
|
||||
<button title='Play' class='play' onclick='play()'><img src='//assets.worlio.com/style/radio/play.png'></button>
|
||||
<button title='Stop' onclick='stop()'><img src='//assets.worlio.com/style/radio/stop.png'></button>
|
||||
<button title='Play' class='play' onclick='play()'><img src='play.png'></button>
|
||||
<button title='Stop' onclick='stop()'><img src='stop.png'></button>
|
||||
<button style='flex-grow:1;pointer-events:none;'></button>
|
||||
<button title='Mute/Unmute' class='volume' onclick='mute()'><img src='//assets.worlio.com/style/radio/vol.png'></button>
|
||||
<button title='Mute/Unmute' class='volume' onclick='mute()'><img src='vol.png'></button>
|
||||
<slider title='100%' class='volslider'><input type=range min=0 max=100 value=100 step=5 oninput="volChange(this)"></slider>
|
||||
<button class='fav-button' title='Favorite' onclick='updateFavStatus(favoriteTrack(station.listen_url, station.title));'><img src='//assets.worlio.com/style/radio/heart.png'></button>
|
||||
<button class='fav-button' title='Favorite' onclick='updateFavStatus(favoriteTrack(station.listen_url, station.title));'><img src='heart.png'></button>
|
||||
</controls>
|
||||
</player>
|
||||
</div>
|
||||
|
|
56
radio.css
56
radio.css
|
@ -1,6 +1,21 @@
|
|||
:root {
|
||||
--background: #b3a99e;
|
||||
@import url('//assets.worlio.com/style/css/theme.css');
|
||||
|
||||
@font-face {
|
||||
font-family:Pixio;
|
||||
src:url(//assets.worlio.com/fonts/Pixio/Pixio.woff2),
|
||||
url(//assets.worlio.com/fonts/Pixio/Pixio.woff),
|
||||
url(//assets.worlio.com/fonts/Pixio/Pixio.ttf) format("truetype");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family:nk57;
|
||||
src:url(../fonts/nk57/nk57-monospace-cd-rg.ttf) format("truetype"),
|
||||
url(../fonts/nk57/nk57-monospace-cd-bd.ttf) format("truetype"),
|
||||
url(../fonts/nk57/nk57-monospace-cd-it.ttf) format("truetype"),
|
||||
url(../fonts/nk57/nk57-monospace-cd-lt.ttf) format("truetype");
|
||||
}
|
||||
|
||||
:root {
|
||||
--primary: #0079b5;
|
||||
--primary-border: #009ae6;
|
||||
|
||||
|
@ -26,12 +41,14 @@ html {
|
|||
}
|
||||
|
||||
body {
|
||||
background: var(--background);
|
||||
background: var(--background-image) var(--main-background);
|
||||
background-repeat: repeat;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body, button, fakebutton, input { font-family: Pixio; }
|
||||
|
||||
.container, .player-container {
|
||||
background: var(--primary);
|
||||
border: 2px outset var(--primary-border);
|
||||
|
@ -95,18 +112,18 @@ slider input {
|
|||
background: lightgray;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
height: 4px;
|
||||
margin: 6 2;
|
||||
height: 50%;
|
||||
margin: auto 4px;
|
||||
width: 96px;
|
||||
}
|
||||
|
||||
slider input::-moz-range-thumb,
|
||||
slider input::-webkit-slider-thumb {
|
||||
slider input::-webkit-slider-thumb,
|
||||
slider input::-moz-range-thumb {
|
||||
background: gray;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: 8px;
|
||||
height: 16px;
|
||||
height: 100%;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
@ -282,13 +299,15 @@ history .track a {
|
|||
favorites, history {
|
||||
height: 240px;
|
||||
}
|
||||
|
||||
body.old panel#favorites, body.old panel#history { display: none; }
|
||||
}
|
||||
|
||||
@media only screen and (orientation: landscape) {
|
||||
.container, .footer {
|
||||
width: calc(100% - 64px);
|
||||
height: calc(100% - 212px);
|
||||
}
|
||||
body:not(.old) .container { height: calc(100% - 212px); }
|
||||
|
||||
.banner {
|
||||
margin: auto;
|
||||
|
@ -301,4 +320,23 @@ history .track a {
|
|||
.player-container {
|
||||
margin-top: 48px;
|
||||
}
|
||||
|
||||
/* OLD */
|
||||
body.old .container, body.old .footer {
|
||||
flex-direction: column;
|
||||
width: 320px;
|
||||
}
|
||||
|
||||
body.old .banner { flex-direction: column-reverse; }
|
||||
body.old .banner img, body.old .player-container {
|
||||
margin: auto;
|
||||
}
|
||||
body.old .banner > img { flex-shrink: 0; }
|
||||
body.old .player-container { margin-bottom: -2px; }
|
||||
|
||||
body.old panel {
|
||||
max-height: 480px;
|
||||
}
|
||||
|
||||
body.old panel#favorites, body.old panel#history { display: none; }
|
||||
}
|
Loading…
Reference in New Issue
Block a user