Playing animation

src/scss/components/_icon.scss

@@ -45,4 +45,78 @@
 		@include spin(1s);
 		padding: 0 0.32em !important;
 	}
+
+	&--css {
+		&.icon--playing {
+			display: inline-block;
+			position: relative;
+			margin-left: 8px;
+			width: 16px;
+			height: 1em;
+
+			@keyframes playing_bar {
+				0% {
+					height: 0%;
+				}
+				12.5% {
+					height: 75%;
+				}
+				25% {
+					height: 100%;
+				}
+				37.5% {
+					height: 10%;
+				}
+				50% {
+					height: 40%;
+				}
+				62.5% {
+					height: 50%;
+				}
+				75% {
+					height: 30%;
+				}
+				87.5% {
+					height: 55%;
+				}
+				100% {
+					height: 0%;
+				}
+			}
+
+			span {
+				@include animate();
+				display: block;
+				position: absolute;
+				bottom: 0;
+				width: 4px;
+				height: 100%;
+				background: colour(turquoise);
+				animation-name: playing_bar;
+				animation-iteration-count: infinite;
+
+				&:nth-child(1){
+					left: 0;
+    				animation-duration: 2s;
+				}
+
+				&:nth-child(2){
+					left: 6px;
+    				animation-duration: 4s;
+				}
+
+				&:nth-child(3){
+					left: 12px;
+    				animation-duration: 1s;
+				}
+			}
+
+			&.js--stopped,
+			&.js--paused {
+				span {
+					animation-play-state: paused;
+				}
+			}
+		}
+	}
 }

src/scss/components/_lists.scss

@@ -38,12 +38,22 @@
 			border-top: 1px solid rgba(128,128,128,0.05);
 		}
 
-		:root .notouch:not(.dragging) &:not(.no-click):hover {
-			background: rgba(255,255,255,0.03);
-			cursor: pointer;
+		:root .notouch:not(.dragging) &:not(.no-click) {
+			&:hover {
+				background: rgba(255,255,255,0.03);
+				cursor: pointer;
 
-			.light-theme & {
-				background: rgba(0,0,0,0.03);
+				.light-theme & {
+					background: rgba(0,0,0,0.03);
+				}
+			}
+
+			&:active,
+			&:focus {
+				@include noanimate();
+				-moz-transform: scale(0.997);
+				-webkit-transform: scale(0.997);
+				transform: scale(0.997);
 			}
 		}
 
@@ -88,6 +98,15 @@
 					&__item {
 						&--name {
 							color: colour(turquoise);
+
+							.icon {
+								padding-left: 5px;
+								font-size: 12px;
+
+								@include responsive($bp_medium){
+									display: none;
+								}
+							}
 						}
 					}
 				}
@@ -111,7 +130,7 @@
 		}
 
 		&__column {
-			padding: 22px 0 18px;
+			padding: 24px 0 16px;
 
 			&--name {
 				padding: 14px 0 10px;
@@ -174,11 +193,11 @@
 		}
 	}
 
-	&.track-list {
+	&--tracks {
 		.list__item {
 			cursor: pointer;
 
-			:root .dragging &--hover,
+			:root .dragging &:hover,
 			&.touch-drag-hover {
 				&:before {
 					opacity: 1;
@@ -211,7 +230,7 @@
 		}
 	}
 
-	&.related-artist-list {
+	&--related-artists {
 		padding-bottom: 20px;
 		cursor: pointer;
 		
@@ -244,13 +263,6 @@
 		}
 	}
 
-	&.library-local-view,
-	&.library-local-directory-list {
-		.list__item {
-			cursor: pointer;
-		}
-	}
-
 	@include responsive($bp_medium){
 
 		&__item {

src/scss/components/_parallax.scss

@@ -15,10 +15,10 @@ $parallax: 'parallax';
 
 	&__inner {
 		position: absolute;
-		top: 0;
-		right: 0;
-		left: 0;
-		bottom: 0;
+		top: -1px;
+		right: -1px;
+		left: -1px;
+		bottom: -1px;
 	}
 
 	&__image {