Softer UI

src/scss/components/_playback-controls.scss

@@ -5,18 +5,19 @@
 	bottom: 0;
 	right: 0;
 	left: 0;
-	height: 50px;
+	height: 40px;
 	background: $white;
 	color: $black;
+	border-top: 1px solid $light_grey;
 
 	.current-track {
 		@include animate();
 		cursor: pointer;
 		position: absolute;
-		bottom: 50px;
+		bottom: 41px;
 		width: 220px;
-		font-size: 16px;
-		color: $white;
+		font-size: 14px;
+		color: $black;
 		text-decoration: none;
 
 		.thumbnail {
@@ -25,7 +26,7 @@
 		}
 
 		.title {
-			padding-top: 18px;
+			padding-top: 20px;
 			@include one_line_text;
 		}
 
@@ -42,14 +43,14 @@
 		}
 
 		&:hover {
-			background: rgba(255,255,255,0.1);
+			background: $light_grey;
 		}
 	}
 
 	.control {
 		@include animate();
-		font-size: 16px;
-		color: $dark_grey;
+		font-size: 12px;
+		color: $mid_grey;
 		cursor: pointer;
 		padding: 8px;
 		display: inline-block;
@@ -57,7 +58,7 @@
 
 		&.play {
 			font-size: 24px;
-			margin-top: -4px;
+			margin-top: -6px;
 		}
 
 		&.active {
@@ -65,23 +66,22 @@
 		}
 
 		&:hover {
-			color: $blue;
+			color: $dark_grey;
 		}
 	}
 
 	section {
 		position: absolute;
-		top: 10px;
+		top: 6px;
 
 		&.playback {
 			left: 20px;
-			top: 11px;
 			width: 120px;
 			text-align: center;
 		}
 
 		&.progress {
-			top: 12px;
+			top: 7px;
 			left: 140px;
 			right: 280px;
 			padding-left: 20px;
@@ -96,30 +96,31 @@
 			}
 
 			.current {
+				font-size: 11px;
 				position: absolute;
-				top: 5px;
+				top: 6px;
 				left: 0;
 				width: 45px;
 				text-align: right;
 			}
 
 			.total {
+				font-size: 11px;
 				position: absolute;
-				top: 5px;
+				top: 6px;
 				right: 0;
 				width: 45px;
 			}
 		}
 
 		&.settings {
-			top: 11px;
 			right: 170px;
 			width: 120px;
 			text-align: center;
 		}
 
 		&.volume {
-			top: 12px;
+			top: 7px;
 			right: 20px;
 			width: 150px;
 
@@ -139,6 +140,12 @@
 				right: 0;
 				left: 30px;
 			}
+
+			.muted {
+				.slider .progress {
+					background: $mid_grey;
+				}
+			}
 		}
 	}
 }