Slider; Queue

src/scss/app.scss

@@ -12,6 +12,7 @@
 @import 'components/images';
 @import 'components/icon';
 @import 'components/search-form';
+@import 'components/player';
 @import 'components/sidebar';
 @import 'components/lists';
 @import 'components/grid';
@@ -20,4 +21,5 @@
 @import 'views/artist';
 @import 'views/album';
 @import 'views/playlist';
+@import 'views/queue';
 

src/scss/components/_player.scss

@@ -0,0 +1,51 @@
+
+.player {
+
+	.current-track {
+		font-size: 16px;
+		text-transform: uppercase;
+		text-align: center;
+
+		.title {
+			@include one_line_text;
+		}
+
+		.artist-sentence {
+			opacity: 0.5;
+			display: block;
+			@include one_line_text;
+
+			.artist {
+				color: inherit;
+				text-decoration: none;
+				border-bottom: 1px dotted transparent;
+			}
+		}
+	}
+
+	.controls {
+		text-align: center;
+
+		a {
+			cursor: pointer;
+			font-size: 14px;
+			padding: 8px;
+			display: inline-block;
+			opacity: 0.8;
+
+			&.active {
+				color: $turquoise;
+			}
+
+			&:hover {
+				opacity: 1.0;
+			}
+		}
+	}
+
+	.slider.animating {
+		.progress{
+			/* @include animate(10s); */
+		}
+	}
+}

src/scss/components/_sidebar.scss

@@ -83,52 +83,11 @@ aside{
 		left: 0;
 		right: 0;
 		padding: 14px;
+		color: #FFFFFF;
 
-		.track-in-focus {
-			font-size: 16px;
-			text-transform: uppercase;
-			text-align: center;
-			color: #FFFFFF;
-
-			.title {
-				@include one_line_text;
-			}
-
-			.artist-sentence {
-				opacity: 0.5;
-				display: block;
-				@include one_line_text;
-
-				.artist {
-					color: inherit;
-					text-decoration: none;
-					border-bottom: 1px dotted transparent;
-
-					&:hover {
-						border-color: #FFFFFF !important;
-					}
-				}
-			}
-		}
-
-		.controls {
-			text-align: center;
-
-			a {
-				color: #FFFFFF;
-				cursor: pointer;
-				font-size: 14px;
-				padding: 8px;
-				display: inline-block;
-				opacity: 0.8;
-
-				&.active {
-					color: $turquoise;
-				}
-
-				&:hover {
-					opacity: 1.0;
-				}
+		.artist-sentence {
+			.artist:hover {
+				border-color: #FFFFFF !important;
 			}
 		}
 	}

src/scss/global/_core.scss

@@ -106,7 +106,15 @@ main {
 	&.w100 {	width: 100%; }
 }
 
-.cf{
+.pull-left {
+	float: left;
+}
+
+.pull-right {
+	float: right;
+}
+
+.cf {
 	@include clearfix;
 }
 

src/scss/views/_album.scss

@@ -49,7 +49,7 @@
 				.name {
 					@include animate();
 					position: absolute;
-					top: 35%;
+					top: 40%;
 					left: 0;
 					right: 0;
 					text-align: center;
@@ -59,6 +59,10 @@
 					font-weight: bold;
 				}
 
+				.secondary {
+					display: none;
+				}
+
 				&:hover {
 					.name {
 						opacity: 1;

src/scss/views/_playlist.scss

@@ -59,6 +59,10 @@
 					font-weight: bold;
 				}
 
+				.secondary {
+					display: none;
+				}
+
 				&:hover {
 					.name {
 						opacity: 1;

src/scss/views/_queue.scss

@@ -0,0 +1,35 @@
+
+.queue-view {
+
+	.player {
+		text-align: center;
+		padding: 40px 0;
+
+		.artwork,
+		.controls a {
+			border: 0;
+		}
+
+		.artwork,
+		.controls {
+			display: block;
+			max-width: 400px;
+			margin: 0 auto;
+		}
+
+		.controls {
+			padding: 20px 0;
+			a {
+				font-size: 18px;
+			}
+		}
+
+		.thumbnail {
+			max-width: none;
+		}
+
+		.current-track {
+			font-weight: 700;
+		}
+	}
+}