List borders (using :after to dodge rounded corners)

src/js/components/GridItem.js

@@ -102,7 +102,7 @@ export default class GridItem extends React.Component{
 			<div className={"grid-item "+this.props.type+"-grid-item"} onClick={e => this.handleClick(e)} onContextMenu={e => this.handleContextMenu(e)}>
 				<Thumbnail size="medium" images={images} />
 				<div className="name">
-					{item.name ? item.name : <span className="dark-mid_grey-text">{item.uri}</span>}
+					{item.name ? item.name : <span className="opaque-text">{item.uri}</span>}
 				</div>
 				<div className="secondary">					
 					{this.props.show_source_icon ? <Icon name={helpers.sourceIcon(item.uri)} type="fontawesome" className="source" /> : null}

src/scss/components/_lists.scss

@@ -11,11 +11,22 @@
 
 		display: block;
 		position: relative;
-		margin: 0 -10px -1px -10px;
+		margin: 0 -10px 0 -10px;
 		padding: 14px 30px 13px 10px;
 		border-radius: 3px;
-		border-bottom: 1px solid rgba(255,255,255,0.05);
-		border-top: 1px solid rgba(255,255,255,0.05);
+
+		&:before {
+			pointer-events: none;
+			content: '';
+			display: block;
+			position: absolute;
+			top: 0;
+			left: 0;
+			bottom: 0;
+			right: 0;
+			border-top: 3px solid transparent;
+			border-bottom: 1px solid rgba(125,125,125,0.15);
+		}
 
 		:root .notouch:not(.dragging) &:not(.header):not(.no-click).hover {
 			background: rgba(255,255,255,0.03);
@@ -27,22 +38,7 @@
 		}
 
 		&.selected {
-			background: rgba(255,255,255,0.08) !important;
-
-			.select-zone {
-				&::after {
-					background: colour(blue);
-					border-color: colour(blue) !important;
-				}
-			}
-		}
-
-		.light-theme & {
-			border-color: rgba(0,0,0,0.05);
-
-			&.selected {
-				background: colour(faint_grey) !important;
-			}
+			background: rgba(125,125,125,0.15) !important;
 		}
 
 		&.playing {
@@ -81,7 +77,6 @@
 			font-size: 10px;
 			color: colour(grey);
 			text-transform: uppercase;
-			border-top: 0;
 			padding-bottom: 2px;
 		}
 
@@ -128,9 +123,9 @@
 
 			:root .dragging &.hover,
 			&.touch-drag-hover {
-				border-top: 3px solid colour(blue);
-				margin-top: -3px;
-				background: transparent;
+				&:before {
+					border-top-color: colour(blue);
+				}
 			}
 
 			&.has-touch-drag-zone {

src/scss/global/_colours.scss

@@ -45,6 +45,10 @@ $colours: (
 	}
 }
 
+.opaque-text {
+	opacity: 0.35;
+}
+
 
 /**
  * Retrieve colour from $colours map

src/scss/views/_modal.scss

@@ -162,6 +162,11 @@
 				.list__item {
 					margin: 0 0 20px 0;
 					padding: 5px;
+					cursor: pointer;
+
+					&:before {
+						display: none;
+					}
 
 					.thumbnail {
 						float: left;