Wirlaburla/wormTuner
Wirlaburla/wormTuner
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix styles

Browse Source
This commit is contained in:
Wirlaburla 2023-01-08 23:56:04 -06:00
parent 85ae86ddd3
commit eda5b12ca6
2 changed files with 51 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
index.html
View File

@ -22,12 +22,12 @@
<song></song> <song></song>
</metadata></canvas> </metadata></canvas>
<controls> <controls>
<button title='Play' class='play' onclick='play()'><img src='//assets.worlio.com/style/radio/play.png'></button> <button title='Play' class='play' onclick='play()'><img src='play.png'></button>
<button title='Stop' onclick='stop()'><img src='//assets.worlio.com/style/radio/stop.png'></button> <button title='Stop' onclick='stop()'><img src='stop.png'></button>
<button style='flex-grow:1;pointer-events:none;'></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> <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> </controls>
</player> </player>
</div> </div>

56
radio.css
View File

@ -1,6 +1,21 @@
:root { @import url('//assets.worlio.com/style/css/theme.css');
--background: #b3a99e;
@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: #0079b5;
--primary-border: #009ae6; --primary-border: #009ae6;
@ -26,12 +41,14 @@ html {
} }
body { body {
background: var(--background); background: var(--background-image) var(--main-background);
background-repeat: repeat; background-repeat: repeat;
height: 100%; height: 100%;
margin: 0; margin: 0;
} }
body, button, fakebutton, input { font-family: Pixio; }
.container, .player-container { .container, .player-container {
background: var(--primary); background: var(--primary);
border: 2px outset var(--primary-border); border: 2px outset var(--primary-border);
@ -95,18 +112,18 @@ slider input {
background: lightgray; background: lightgray;
-webkit-appearance: none; -webkit-appearance: none;
appearance: none; appearance: none;
height: 4px; height: 50%;
margin: 6 2; margin: auto 4px;
width: 96px; width: 96px;
} }
slider input::-moz-range-thumb, slider input::-webkit-slider-thumb,
slider input::-webkit-slider-thumb { slider input::-moz-range-thumb {
background: gray; background: gray;
-webkit-appearance: none; -webkit-appearance: none;
appearance: none; appearance: none;
width: 8px; width: 8px;
height: 16px; height: 100%;
border: none; border: none;
border-radius: 0; border-radius: 0;
} }
@ -282,13 +299,15 @@ history .track a {
favorites, history { favorites, history {
height: 240px; height: 240px;
} }
body.old panel#favorites, body.old panel#history { display: none; }
} }
@media only screen and (orientation: landscape) { @media only screen and (orientation: landscape) {
.container, .footer { .container, .footer {
width: calc(100% - 64px); width: calc(100% - 64px);
height: calc(100% - 212px);
} }
body:not(.old) .container { height: calc(100% - 212px); }
.banner { .banner {
margin: auto; margin: auto;
@ -301,4 +320,23 @@ history .track a {
.player-container { .player-container {
margin-top: 48px; 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; }
} }