Pushing this mess anyway
This commit is contained in:
342
css/radio.css
Normal file
342
css/radio.css
Normal file
@@ -0,0 +1,342 @@
|
||||
@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;
|
||||
|
||||
--secondary: #f3dca9;
|
||||
--secondary-border: #f2e5c8;
|
||||
|
||||
--button: #DFDFDF;
|
||||
--button-active: gray;
|
||||
|
||||
--monitor: #0F0F0F;
|
||||
--monitor-text: #F0F0F0;
|
||||
--monitor-border: gray;
|
||||
|
||||
--link-color: unset;
|
||||
}
|
||||
|
||||
*:link, *:visited {
|
||||
color: var(--link-color);
|
||||
}
|
||||
|
||||
html {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
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);
|
||||
padding: 4px;
|
||||
}
|
||||
.container {
|
||||
min-width: 320px;
|
||||
min-height: 280px;
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
margin: auto;
|
||||
max-width: 976px;
|
||||
}
|
||||
.player-container {
|
||||
position: relative;
|
||||
border-bottom: none;
|
||||
width: 320px;
|
||||
height: 78px;
|
||||
margin-bottom: -2px;
|
||||
z-index: 1;
|
||||
}
|
||||
.footer {
|
||||
min-width: 320px;
|
||||
max-width: 976px;
|
||||
text-align: right;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
player, visualizer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: var(--secondary);
|
||||
border: 2px outset var(--secondary-border);
|
||||
flex-shrink: 0;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.banner {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
player {
|
||||
width: 308px; height: 68px;
|
||||
}
|
||||
|
||||
visualizer {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.vis-container {
|
||||
width: 320px;
|
||||
max-width: 320px;
|
||||
}
|
||||
|
||||
button, fakebutton, slider {
|
||||
border: 2px outset var(--button);
|
||||
background: var(--button);
|
||||
}
|
||||
|
||||
slider input {
|
||||
background: lightgray;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
height: 50%;
|
||||
margin: auto 4px;
|
||||
width: 96px;
|
||||
}
|
||||
|
||||
slider input::-webkit-slider-thumb,
|
||||
slider input::-moz-range-thumb {
|
||||
background: gray;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: 8px;
|
||||
height: 100%;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
select {
|
||||
border: none;
|
||||
background: none;
|
||||
}
|
||||
|
||||
button:active,
|
||||
button.active,
|
||||
fakebutton:active,
|
||||
fakebutton.active {
|
||||
border: 2px inset var(--button-active);
|
||||
background: var(--button-active);
|
||||
}
|
||||
|
||||
fakebutton { display: flex; }
|
||||
fakebutton img { margin: 2px; }
|
||||
|
||||
controls {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
controls input { flex-grow: 1; }
|
||||
|
||||
tablist {
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
metadata, canvas {
|
||||
color: var(--monitor-text);
|
||||
background: black;
|
||||
border: 2px inset var(--secondary-border);
|
||||
}
|
||||
|
||||
metadata {
|
||||
padding: 4px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
metadata station { font-weight: bold; }
|
||||
|
||||
panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
stations {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
border: 2px inset var(--primary-border);
|
||||
margin: 2px;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
favorites, history, stats {
|
||||
background: var(--monitor);
|
||||
color: var(--monitor-text);
|
||||
border: 2px inset var(--monitor-border);
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 4px;
|
||||
overflow-y: scroll;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
tabbox {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
}
|
||||
tabbox.active { display: flex; }
|
||||
|
||||
station {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
padding: 4px;
|
||||
margin: 2px;
|
||||
border: 2px inset var(--button-active);
|
||||
background: var(--button-active);
|
||||
}
|
||||
|
||||
station.active {
|
||||
background: var(--button);
|
||||
border: 2px outset var(--button);
|
||||
color: black;
|
||||
}
|
||||
|
||||
station station-name { font-weight: bold; }
|
||||
station track-meta {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
history track-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
history track-container track-station { font-weight: bold; }
|
||||
|
||||
history track-container:nth-of-type(1) {
|
||||
background-color: var(--monitor-text);
|
||||
color: var(--monitor);
|
||||
}
|
||||
|
||||
canvas.vis, canvas.metadata { border-bottom: none; }
|
||||
|
||||
.button-row { display: flex; }
|
||||
|
||||
.fav-button img {
|
||||
filter: contrast(0%);
|
||||
}
|
||||
|
||||
.fav-button.fav img {
|
||||
filter: none;
|
||||
}
|
||||
|
||||
favorites .station-header,
|
||||
history .station-header {
|
||||
text-align: center;
|
||||
margin: 4px 0;
|
||||
text-decoration: underline;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
favorites .track,
|
||||
history .track {
|
||||
display: flex;
|
||||
border-bottom: 1px dashed var(--monitor-text);
|
||||
margin: 2px 0;
|
||||
}
|
||||
|
||||
favorites .track button,
|
||||
history .track button {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
flex-grow: 0;
|
||||
margin: 2px;
|
||||
}
|
||||
|
||||
favorites .track a,
|
||||
history .track a {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
@media only screen and (orientation: portrait) {
|
||||
.container, .footer {
|
||||
flex-direction: column;
|
||||
width: 320px;
|
||||
}
|
||||
|
||||
.banner { flex-direction: column-reverse; }
|
||||
.banner img, .player-container {
|
||||
margin: auto;
|
||||
}
|
||||
.banner > img { flex-shrink: 0; }
|
||||
.player-container { margin-bottom: -2px; }
|
||||
|
||||
panel {
|
||||
max-height: 480px;
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
body:not(.old) .container { height: calc(100% - 212px); }
|
||||
|
||||
.banner {
|
||||
margin: auto;
|
||||
min-width: 320px;
|
||||
width: calc(100% - 52px);
|
||||
max-width: 988px;
|
||||
}
|
||||
.banner > img { margin-top: 2px; }
|
||||
|
||||
.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; }
|
||||
}
|
||||
Reference in New Issue
Block a user