Light interface

src/scss/components/_filter-field.scss

@@ -16,12 +16,12 @@
 		@include animate();
 		width: 0;
 		padding-left: 25px;
-		background: transparent;
 	}
 
 	&:not(.active){
 		input {
 			cursor: pointer;
+			background: transparent !important;
 		}
 		
 		&:hover {

src/scss/components/_header.scss

@@ -48,6 +48,10 @@ main {
 						display: none;
 					}
 				}
+
+				.light-theme & {
+					color: $darkest_grey;
+				}
 			}
 		}
 
@@ -57,6 +61,17 @@ main {
 			left: 0;
 			width: 100%;
 			z-index: 98;
+
+			.light-theme & {
+				h1 {
+					color: $white;
+				}
+
+				.button,
+				button {
+					color: $white;
+				}
+			}
 		}
 
 		@include responsive($bp_medium){

src/scss/components/_images.scss

@@ -17,7 +17,7 @@
 		border-radius: 3px;
 
 		.light-theme & {
-			background-color: $light_grey;
+			background-color: $faint_grey;
 		}
 	}
 
@@ -37,7 +37,7 @@
 		border: 0;
 
 		&:hover {
-			background: #000000;
+			background: $black;
 		}
 	}
 

src/scss/components/_loader.scss

@@ -25,8 +25,10 @@
 		position: absolute;
 		top: 0;
 		left: 0;
-		border: {
-			color: lighten($dark_grey, 5%);
+		border-color: lighten($dark_grey, 5%);
+
+		.light-theme & {
+			border-color: $faint_grey;
 		}
 	}
 	
@@ -76,6 +78,10 @@
 
 		&:before {
 			border-color: darken($secondary_grey, 5%);
+
+			.light-theme & {
+				border-color: $faint_grey;
+			}
 		}
 	}
 }

src/scss/components/_playback-controls.scss

@@ -18,6 +18,10 @@
 		color: $white;
 		text-decoration: none;
 
+		.light-theme & {
+			color: $darkest_grey;
+		}
+
 		.thumbnail {
 			float: left;
 			margin: 12px;

src/scss/components/_services.scss

@@ -80,6 +80,22 @@
 					font-weight: bold;
 					font-size: 16px;
 				}
+
+				.light-theme & {
+					background: $faint_grey;
+
+					&:hover{
+						background: darken($faint_grey, 4%);
+					}
+
+					&.active {
+						background: darken($faint_grey, 4%);
+					}
+
+					&:after {
+						background: darken($faint_grey, 4%);
+					}
+				}
 			}
 		}
 	}
@@ -92,6 +108,10 @@
 		.field:last-child {
 			padding-bottom: 0;
 		}
+
+		.light-theme & {
+			background: darken($faint_grey, 4%);
+		}
 	}
 
 	@include responsive($bp_medium){

src/scss/components/_sidebar.scss

@@ -13,8 +13,8 @@ aside{
 	box-sizing: border-box;
 
 	.light-theme & {
-		background: $faint_grey;
-		border-right: 1px solid darken($faint_grey, 3%);
+		background: lighten($faint_grey, 2%);
+		border-right: none;
 	}
 
 	.liner {

src/scss/components/_slider.scss

@@ -2,6 +2,7 @@
 .slider {
 	position: relative;
 	cursor: pointer;
+	height: 20px;
 
 	input[type="range"]{
 		position: absolute;
@@ -33,83 +34,59 @@
 		position: absolute;
 		background: rgba(0,0,0,0.2);
 		border-radius: 2px;
+		height: 4px;
+		top: 42%;
+		right: 0;
+		left: 0;
+		margin-top: -3px;
 
 		.progress {
 			position: absolute;
 			background: $turquoise;
 			pointer-events: none;
+			top: 0;
 			left: 0;
 			border-radius: 2px;
+			height: 100%;
+			max-width: 100%;
+			border-radius: 4px;
+
+			&:after {
+				@include animate(0.1s);
+				content: '';
+				display: block;
+				background: $turquoise;
+				position: absolute;
+				top: 0;
+				right: -1px;
+				width: 4px;
+				height: 4px;
+				border-radius: 50%;
+			}
 		}
 	}
 
 	&.disabled {
 		.progress {
-			background: rgba(255,255,255,0.25);
+			background: $mid_grey;
+
+			&:after {
+				background: $mid_grey !important;
+			}
 		}
 	}
 
-	&.horizontal {
-		height: 20px;
-
+	&:hover {
 		.track {
-			height: 4px;
-			top: 42%;
-			right: 0;
-			left: 0;
-			margin-top: -3px;
-
 			.progress {
-				top: 0;
-				height: 100%;
-				max-width: 100%;
-				border-radius: 4px;
-
 				&:after {
-					@include animate(0.1s);
-					content: '';
-					display: block;
-					background: $turquoise;
-					position: absolute;
-					top: 0;
-					right: -1px;
-					width: 4px;
-					height: 4px;
-					border-radius: 50%;
+					width: 12px;
+					height: 12px;
+					top: -4px;
+					right: -6px;
+					background: lighten($turquoise, 10%);
 				}
 			}
 		}
-
-		&:hover {
-			.track {
-				.progress {
-					&:after {
-						width: 12px;
-						height: 12px;
-						top: -4px;
-						right: -6px;
-						background: lighten($turquoise, 10%);
-					}
-				}
-			}
-		}
-	}
-
-	&.vertical {
-		width: 20px;
-		height: 100%;
-
-		.track {
-			width: 5px;
-			top: 0;
-			bottom: 0;
-			left: 12px;
-
-			.progress {
-				bottom: 0;
-				width: 100%;
-				max-height: 100%;
-			}
-		}
 	}
 }

src/scss/components/_snapcast.scss

@@ -17,12 +17,6 @@
 		.slider-wrapper {
 			margin-left: 30px;
 		}
-
-		&.muted {
-			.slider .progress {
-				background: $mid_grey;
-			}
-		}
 		
 		&.group-volume-control {
 			padding: 10px 0 5px;
@@ -32,10 +26,9 @@
 		}
 
 		&.client-volume-control {
-			padding-top: 4px;
-			width: 80%;
+			padding-top: 11px;
 			padding-right: 10px;
-			display: inline-block;
+			display: block;
 			vertical-align: middle;
 			box-sizing: border-box;
 		}
@@ -96,11 +89,8 @@
 					& > .latency {
 						width: 28%;
 						padding-left: 2%;
-					}
 
-					& > .volume,
-					& > .latency {
-						input {
+						input[type="number"] {
 							width: 20%;
 						}
 					}
@@ -120,7 +110,7 @@
 							bottom: 0;
 							width: 1px;
 							background: $grey;
-							z-index: 1;
+							z-index: 0;
 						}
 
 						.progress.positive {
@@ -131,6 +121,11 @@
 						.progress.negative {
 							border-top-right-radius: 0;
 							border-bottom-right-radius: 0;
+
+							&:after {
+								right: auto;
+								left: -1px;
+							}
 						}
 					}
 

src/scss/components/_sources-priority-field.scss

@@ -34,5 +34,20 @@
 			background: $blue;
 			color: $white;
 		}
+
+		.light-theme & {
+			background: $faint_grey;
+			color: inherit;
+
+			&:hover {
+				background: darken($faint_grey, 4%);
+			}
+
+			&:focus,
+			&:active {
+				background: $blue;
+				color: $white;
+			}
+		}
 	}
 }

src/scss/components/_tooltip.scss

@@ -37,6 +37,15 @@
 			bottom: -3px;
 			left: 9px;
 		}
+
+		.light-theme & {
+			background: $grey;
+			color: $white;
+
+			&:after {
+				background: $grey;
+			}
+		}
 	}
 
 	&:hover {