worlio-themes/core/css/radio.css

328 lines
5.3 KiB
CSS
Raw Normal View History

2024-02-23 18:52:31 -05:00
@import url('theme.css');
@import url('fonts.css');
2023-04-26 18:57:59 -04:00
: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; }
}