fix styles some more

index.html

@@ -25,8 +25,9 @@
 						<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>
-						<slider title='100%'><img src='vol.png'><input type=range min=0 max=100 value=100 step=5 oninput="volChange(this)"></slider>
-						<button class='fav-button' title='Favorite' onclick='favoriteCurrentTrack()'><img src='heart.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='heart.png'></button>
 					</controls>
 				</player>
 			</div>

radio.css

@@ -1,6 +1,4 @@
 :root {
-	--background: #b3a99e;
-
 	--primary: #0079b5;
 	--primary-border: #009ae6;
 
@@ -26,7 +24,7 @@ html {
 }
 
 body {
-	background: var(--background);
+	background: var(--background-image) var(--main-background);
 	background-repeat: repeat;
 	height: 100%;
 	margin: 0;
@@ -95,18 +93,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 +280,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 +301,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; }
 }

radio.js

@@ -34,6 +34,7 @@ var tuner = {
 	player: null,
 	playing: true,
 	volume: 100,
+	isMuted: false,
 	canvas: {
 		element: null,
 		drawRequest: 0
@@ -119,6 +120,25 @@ function stop() {
 	updateMetadata('');
 }
 
+function mute() {
+	if (tuner.isMuted) {
+		document.querySelector('.volume').classList.remove('active');
+		document.querySelector('.volslider').title = tuner.volume+'%';
+		tuner.player.audioElement.volume=tuner.volume/100;
+	} else {
+		document.querySelector('.volume').classList.add('active');
+		document.querySelector('.volslider').title = "Muted";
+		tuner.player.audioElement.volume=0;
+	}
+	tuner.isMuted = !tuner.isMuted;
+}
+
+function volChange(e) {
+	tuner.player.audioElement.volume=e.value/100;
+	e.parentNode.title = e.value+'%';
+	tuner.volume = e.value;
+}
+
 function updateMetadata(track) {
 	var line_data = [
 		{
@@ -381,12 +401,6 @@ function searchFavorites(query) {
 	}
 }
 
-function volChange(e) {
-	tuner.player.audioElement.volume=e.value/100;
-	e.parentNode.title = e.value+'%';
-	tuner.volume = e.value;
-}
-
 function setVisMode(i) {
 	if (i > vis_modes.length) visualizer.mode = 1;
 	else visualizer.mode = i;