From eda5b12ca6a6ecc10b2f752bc2810c62a3b9628b Mon Sep 17 00:00:00 2001
From: Wirlaburla <vencorr@zoho.com>
Date: Sun, 8 Jan 2023 23:56:04 -0600
Subject: [PATCH] fix styles

---
 index.html |  8 ++++----
 radio.css  | 56 +++++++++++++++++++++++++++++++++++++++++++++---------
 2 files changed, 51 insertions(+), 13 deletions(-)

diff --git a/index.html b/index.html
index 7cb7e42..bfa2795 100644
--- a/index.html
+++ b/index.html
@@ -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>
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