normalized tables with meyer reset, set up a rundimental table layout (need to change the name)

public/css/modules/base/base.css

@@ -29,6 +29,10 @@ html[data-theme='light'] {
 	--panels-background: #222324;
 	--panels-text: #ffffff;
 	--accent-text: #ffffff;
+
+	--table-bg: #ffffff;
+	--table-zebra: #c9c9c9;
+	--table-highlight: #8f8f8f;
 }
 
 html[data-theme='dark'] {
@@ -39,6 +43,10 @@ html[data-theme='dark'] {
 	--panels-background: #1a1a1a;
 	--panels-text: #ffffff;
 	--accent-text: #dfdfdf;
+
+	--table-bg: #141414;
+	--table-zebra: #242424;
+	--table-highlight: #747474;
 }
 
 html[data-theme='purple'] {
@@ -50,6 +58,10 @@ html[data-theme='purple'] {
 	--panels-background: #100727;
 	--panels-text: #ffffff;
 	--accent-text: #dfdfdf;
+
+	--table-bg: #0c041b;
+	--table-zebra: #130a29;
+	--table-highlight: #321874;
 }
 
 body {

public/css/modules/base/normalize.css

@@ -4,6 +4,27 @@
 	box-sizing: border-box;
 }
 
-body {
+:root {
 	font-size: 16px;
 }
+
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}

public/css/modules/globals.css

@@ -2,27 +2,69 @@
 
 .table {
 	width: 100%;
+	background: var(--table-bg);
 	-webkit-border-horizontal-spacing: 0px;
 	-webkit-border-vertical-spacing: 0px;
 }
 
 .table td,
 .table th {
-	height: 50px;
-	padding: 4px 12px 4px 5px;
+	/* min-height: 50px; */
+	/* padding: 4px 12px 4px 5px; */
 	vertical-align: middle;
-	/* border: 0px black solid; */
 }
 
 .table th {
-	text-align: left;
+	/* text-align: left; */
 }
 
 .table tr:nth-child(even) {
-	background-color: var(--secondary-background);
-	border: 0px black solid;
+	background: var(--table-zebra);
 }
 
+.table tbody tr:hover {
+	background: var(--table-highlight);
+}
+
+/* === Tracks Table === */
+.table--design-1 {
+	border-collapse: collapse;
+}
+
+.table--design-1 td {
+	vertical-align: middle;
+}
+
+.table--design-1 td:first-child {
+	/* width: 32px; */
+	padding: 0 10px 0 20px;
+}
+
+.table--design-1 td:nth-child(2) {
+	width: 45%;
+	padding: 0 10px;
+}
+
+.table--design-1 td:nth-child(3) {
+	width: 16.8%;
+	padding: 0 10px;
+}
+
+.table--design-1 td:nth-child(4) {
+	width: 16.8%;
+	padding: 0 10px;
+}
+.table--design-1 td:nth-child(5) {
+	width: 6%;
+	padding: 0 10px;
+}
+
+.table--design-1 td:last-child {
+	padding: 0 20px 0 10px;
+}
+
+/* === Tracks Table End === */
+
 .table td img {
 	vertical-align: middle;
 }

public/css/modules/tabs/search-tab.css

@@ -1,6 +1,5 @@
 #main_search .search_section {
 	float: none;
-	cursor: pointer;
 	padding-top: 20px;
 	padding-bottom: 20px;
 }
@@ -11,6 +10,7 @@
 
 .search_header {
 	display: inline-block;
+	cursor: pointer;
 	font-size: 1.75rem;
 	margin-bottom: 25px;
 }

public/index.html

@@ -122,17 +122,18 @@ <h2>Start searching!</h2>
 													</div>
 												</div>
 												<div v-else-if="section == 'TRACK'">
-													<table class="table tracks_table">
+													<table class="table table--design-1 tracks_table">
+														<tbody>
 															<tr v-for="track in results.allTab.TRACK.data.slice(0, 6)" class="track_row">
-															<td aria-hidden="true" style="width: 48px; text-align: center;">
+																<td class="table__cover" aria-hidden="true">
 																	<img class="rounded coverart"
 																		:src="'https://e-cdns-images.dzcdn.net/images/cover/'+track.ALB_PICTURE+'/32x32-000000-80-0-0.jpg'">
 																</td>
-															<td class="breakline inline-flex">
+																<td class="breakline">
 																	<i v-if="track.EXPLICIT_LYRICS == 1" class="material-icons explicit_icon">
 																		explicit
 																	</i>
-																{{track.SNG_TITLE + (track.VERSION ? ' '+track.VERSION : '')}}
+																	{{ track.SNG_TITLE + (track.VERSION ? ' ' + track.VERSION : '') }}
 																</td>
 																<td class="breakline">
 																	<span class="clickable" @click="artistView" :data-id="artist.ART_ID"
@@ -153,6 +154,7 @@ <h2>Start searching!</h2>
 																	</i>
 																</td>
 															</tr>
+														</tbody>
 													</table>
 												</div>
 												<div v-else-if="section == 'ARTIST'" class="release_grid firstrow_only">
@@ -216,7 +218,8 @@ <h1>Loading</h1>
 										<div v-else-if="results.trackTab.data.length == 0">
 											<h1>No Tracks found</h1>
 										</div>
-										<table class="table tracks_table" v-if="results.trackTab.data.length > 0">
+										<table class="table table--design-1 tracks_table" v-if="results.trackTab.data.length > 0">
+											<tbody>
 												<tr>
 													<th style="width: 48px;"></th>
 													<th>Title</th>
@@ -262,6 +265,7 @@ <h1>No Tracks found</h1>
 														</i>
 													</td>
 												</tr>
+											</tbody>
 										</table>
 									</div>
 									<!-- ### Album Search Tab ### -->