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;
 }