diff --git a/index.html b/index.html
index 7cb7e42..bfa2795 100644
--- a/index.html
+++ b/index.html
@@ -22,12 +22,12 @@
-
-
+
+
-
+
-
+
diff --git a/radio.css b/radio.css
index a2639d0..5d8df5a 100644
--- a/radio.css
+++ b/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; }
}
\ No newline at end of file