completed tables styling

public/css/modules/globals/tables.css

@@ -6,12 +6,22 @@
 	--vertical-separator: 7px;
 }
 
-.table td:first-child {
-	padding: var(--vertical-separator) 10px var(--vertical-separator) 20px;
+.table tr {
+	background: var(--table-bg);
+	transition: background-color 175ms ease-in-out;
 }
 
-.table td:last-child {
-	padding: var(--vertical-separator) 20px var(--vertical-separator) 10px;
+.table tr:nth-child(even) {
+	background: var(--table-zebra);
+	transition: background-color 175ms ease-in-out;
+}
+
+.table tr:not(:last-child) {
+	border-bottom: 1px solid var(--table-highlight);
+}
+
+.table tbody tr:not(.table__row-no-highlight):hover {
+	background: var(--table-highlight);
 }
 
 .table td,
@@ -23,23 +33,18 @@
 	padding: var(--vertical-separator) 10px;
 }
 
+.table td:first-child {
+	padding: var(--vertical-separator) 10px var(--vertical-separator) 20px;
+}
+
+.table td:last-child {
+	padding: var(--vertical-separator) 20px var(--vertical-separator) 10px;
+}
+
 .table td img {
 	vertical-align: middle;
 }
 
-.table tr {
-	background: var(--table-bg);
-	transition: background-color 175ms ease-in-out;
-}
-
-.table tr:not(:last-child) {
-	border-bottom: 1px solid var(--table-highlight);
-}
-
-.table tbody tr:not(.table__row-no-highlight):hover {
-	background: var(--table-highlight);
-}
-
 .table .table__icon {
 	box-sizing: content-box;
 	width: 32px;
@@ -82,7 +87,9 @@
 
 /* .table__cell-content {} */
 
-.table__cell-content--vertical-center {
+.table__cell-content.table__cell-content--vertical-center {
+	/*  Wrap cell content in this to center vertically cells
+	with material icons or both material icons and text */
 	display: flex;
 	align-items: center;
 }
@@ -99,6 +106,22 @@
 	color: var(--table-bg);
 }
 
+.track_row > td > img {
+	width: 32px;
+	height: 32px;
+}
+
+.track_row > td > a > img {
+	width: 56px;
+	height: 56px;
+}
+
+.top-tracks-position {
+	padding: 12px;
+	text-align: center;
+	cursor: default;
+}
+
 /* === Tracks Table === */
 .table--tracks {
 	border-collapse: collapse;
@@ -139,8 +162,6 @@
 	border-bottom-right-radius: var(--radius);
 }
 
-/* === Tracks Table End === */
-
 /* === Tracklist Table === */
 
 /* .table--tracklist {} */
@@ -166,18 +187,10 @@
 	height: 35px;
 }
 
-.tracklist_table .track_position_head,
-.tracklist_table .track_position {
-	width: 10px;
-	text-align: center;
-}
-
 .explicit_tracklist {
 	margin-left: var(--explicit-separator);
 }
 
-/* === Tracklist Table End === */
-
 /* === Charts Table === */
 
 /* .table--charts {} */
@@ -185,21 +198,3 @@
 .table--charts td {
 	height: 35px;
 }
-
-/* === Charts Table End === */
-
-.track_row > td > img {
-	width: 32px;
-	height: 32px;
-}
-
-.track_row > td > a > img {
-	width: 56px;
-	height: 56px;
-}
-
-.top-tracks-position {
-	padding: 12px;
-	text-align: center;
-	cursor: default;
-}

public/css/modules/track-preview.css

@@ -1,7 +1,7 @@
 .preview_controls {
 	opacity: 0;
 	display: block;
-	background: rgba(0, 0, 0, .5);
+	background: rgba(0, 0, 0, 0.5);
 	width: 56px;
 	height: 56px;
 	text-align: center;
@@ -11,8 +11,9 @@
 	top: 0;
 	right: 0;
 }
-.preview_playlist_controls{
-	cursor:pointer;
+
+.preview_playlist_controls {
+	cursor: pointer;
 }
 
 a.single-cover {