Context menu trigger; Unified context menu

src/scss/components/_context-menu.scss

@@ -24,7 +24,6 @@
 		}
 
 		.title {
-			cursor: pointer;
 			display: block;
 			padding: 8px 12px;
 			width: 140px;
@@ -131,13 +130,24 @@
 		bottom: 0 !important;
 		left: 0 !important;
 		margin: 0 !important;
-		background: rgba(10, 10, 10, 0.95);
 		overflow-y: scroll;
 
+		.background {
+			position: absolute;
+			top: 0;
+			right: 0;
+			bottom: 0;
+			left: 0;
+			background: rgba(10, 10, 10, 0.95);
+			z-index: 1;
+		}
+
 		.liner {
 			width: 250px;
 			margin: 30px auto;
 			max-width: 90vw;
+			position: relative;
+			z-index: 2;
 
 			.title {				
 				padding: 16px 20px;

src/scss/components/_lists.scss

@@ -18,13 +18,6 @@
 		margin-bottom: -1px;
 		@include clearfix;
 
-		.source {
-			color: $mid_grey;
-			position: absolute;
-			top: 10px;
-			right: 15px;
-		}
-
 		&.selected {
 			background: $yellow !important;
 		}
@@ -91,10 +84,28 @@
 				padding: 7px 10px 7px 20px;
 
 				.col {
-					&.name { width: 50%; }
-					&.artists { width: 50%; }
-					&.album { width: 50%; padding-left: 50%; color: $mid_grey; }
-					&.duration { display: none; }
+					&.name {
+						width: 90%;
+						padding-right: 10%;
+					}
+
+					&.duration {
+						width: auto;
+						position: absolute;
+						right: 10px;
+						text-align: right;
+					}
+
+					&.artists,
+					&.album { 
+						width: auto;
+						color: $mid_grey;
+						display: inline-block;
+					}
+
+					&.album {
+						@include bullet();
+					}
 				}
 
 				&.header { 
@@ -107,7 +118,6 @@
 					left: 5px;
 				}
 			}
-
 		}
 
 
@@ -170,6 +180,26 @@
 				&.album { width: 25%; }
 				&.added { width: 20%; }
 			}
+
+			@include responsive( $bp_medium ){
+				.col {
+					&.name {
+						width: 90%;
+						padding-right: 10%;
+					}
+
+					&.artists,
+					&.album { 
+						width: auto;
+						color: $mid_grey;
+						display: inline-block;
+					}
+
+					&.added {
+						display: none;
+					}
+				}
+			}
 		}
 	}
 }