finished styling of tracks table

public/css/modules/base/base.css

@@ -46,7 +46,7 @@ html[data-theme='dark'] {
 
 	--table-bg: #141414;
 	--table-zebra: #242424;
-	--table-highlight: #747474;
+	--table-highlight: #343434;
 }
 
 html[data-theme='purple'] {

public/css/modules/globals/globals.css

@@ -1,120 +1,3 @@
-/* Tables */
-
-.table {
-	width: 100%;
-	background: var(--table-bg);
-	-webkit-border-horizontal-spacing: 0px;
-	-webkit-border-vertical-spacing: 0px;
-}
-
-.table td,
-.table th {
-	/* min-height: 50px; */
-	/* padding: 4px 12px 4px 5px; */
-	vertical-align: middle;
-}
-
-.table th {
-	/* text-align: left; */
-}
-
-.table tr:nth-child(even) {
-	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;
-}
-
-.tracklist_table td {
-	height: 50px;
-	vertical-align: middle;
-}
-
-.tracklist_table .explicit_icon {
-	vertical-align: middle;
-	margin-right: var(--explicit-separator);
-}
-
-.tracklist_table .track_position_head,
-.tracklist_table .track_position {
-	width: 10px;
-	text-align: center;
-}
-
-.explicit_tracklist {
-	margin-left: var(--explicit-separator);
-}
-
-.track_checkbox {
-	cursor: pointer;
-}
-
-.track_row > td > img {
-	width: 32px;
-	height: 32px;
-}
-
-.track_row > td > a > img {
-	width: 56px;
-	height: 56px;
-}
-
-.tracks_table td.breakline {
-	word-break: break-word;
-}
-
-.top-tracks-position {
-	padding: 12px;
-	text-align: center;
-	cursor: default;
-}
-
-/* Tables End */
-
 #loading_overlay {
 	justify-content: center;
 	align-items: center;

public/css/modules/globals/tables.css

@@ -0,0 +1,164 @@
+.table {
+	width: 100%;
+	-webkit-border-horizontal-spacing: 0px;
+	-webkit-border-vertical-spacing: 0px;
+}
+
+.table td,
+.table th {
+	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:hover {
+	background: var(--table-highlight);
+}
+
+.table .table__cover {
+	box-sizing: content-box;
+	width: 32px;
+}
+
+.table .table__cover.table__cover--big {
+	width: 48px;
+	text-align: center;
+}
+
+/* === Tracks Table === */
+.table--tracks {
+	border-collapse: collapse;
+
+	--radius: 3px;
+	--vertical-separator: 7px;
+}
+
+.table--tracks thead {
+	position: sticky;
+	border-bottom: 2px solid var(--table-highlight);
+}
+
+.table--tracks td {
+	height: 35px;
+}
+
+.table--tracks th {
+	padding-bottom: 10px;
+}
+
+.table--tracks .table__col.table__col--centered {
+	text-align: center;
+}
+
+.table--tracks td.breakline {
+	word-break: break-word;
+}
+
+.table--tracks tr:first-child td:first-child {
+	border-top-left-radius: var(--radius);
+}
+
+.table--tracks tr:first-child td:last-child {
+	border-top-right-radius: var(--radius);
+}
+
+.table--tracks tr:last-child td:first-child {
+	border-bottom-left-radius: var(--radius);
+}
+
+.table--tracks tr:last-child td:last-child {
+	border-bottom-right-radius: var(--radius);
+}
+
+.table--tracks td:first-child {
+	padding: var(--vertical-separator) 10px var(--vertical-separator) 20px;
+}
+
+.table--tracks td:nth-child(2) {
+	width: 50%;
+	padding: var(--vertical-separator) 10px;
+}
+
+.table--tracks td:nth-child(3) {
+	width: 16.8%;
+	padding: var(--vertical-separator) 10px;
+}
+
+.table--tracks td:nth-child(4) {
+	width: 16.8%;
+	padding: var(--vertical-separator) 10px;
+}
+
+.table--tracks td:nth-child(5) {
+	width: 6%;
+	padding: var(--vertical-separator) 10px;
+}
+
+.table--tracks td:last-child {
+	padding: var(--vertical-separator) 20px var(--vertical-separator) 10px;
+}
+
+.table--tracks .table__download {
+	text-align: center;
+}
+
+.table--tracks .table__download i.material-icons {
+	transition: color 175ms ease-in-out;
+}
+
+.table--tracks .table__download:hover i.material-icons {
+	color: var(--table-bg);
+}
+
+/* === Tracks Table End === */
+
+.table td img {
+	vertical-align: middle;
+}
+
+.tracklist_table td {
+	height: 50px;
+	vertical-align: middle;
+}
+
+.tracklist_table .explicit_icon {
+	vertical-align: middle;
+	margin-right: var(--explicit-separator);
+}
+
+.tracklist_table .track_position_head,
+.tracklist_table .track_position {
+	width: 10px;
+	text-align: center;
+}
+
+.explicit_tracklist {
+	margin-left: var(--explicit-separator);
+}
+
+.track_checkbox {
+	cursor: pointer;
+}
+
+.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/style.css

@@ -4,7 +4,8 @@
 @import './vendor/toastify.css';
 
 @import './modules/base/base.css';
-@import './modules/globals.css';
+@import './modules/globals/globals.css';
+@import './modules/globals/tables.css';
 @import './modules/animations.css';
 @import './modules/progressbar.css';