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

public/index.html

@@ -122,20 +122,20 @@ <h2>Start searching!</h2>
 													</div>
 												</div>
 												<div v-else-if="section == 'TRACK'">
-													<table class="table table--design-1 tracks_table">
+													<table class="table table--tracks">
 														<tbody>
-															<tr v-for="track in results.allTab.TRACK.data.slice(0, 6)" class="track_row">
+															<tr v-for="track in results.allTab.TRACK.data.slice(0, 6)">
 																<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">
+																<td class="table__col breakline">
 																	<i v-if="track.EXPLICIT_LYRICS == 1" class="material-icons explicit_icon">
 																		explicit
 																	</i>
 																	{{ track.SNG_TITLE + (track.VERSION ? ' ' + track.VERSION : '') }}
 																</td>
-																<td class="breakline">
+																<td class="table__col breakline">
 																	<span class="clickable" @click="artistView" :data-id="artist.ART_ID"
 																		v-for="artist in track.ARTISTS">{{artist.ART_NAME}}
 																	</span>
@@ -143,12 +143,12 @@ <h2>Start searching!</h2>
 																<td class="breakline clickable" @click="albumView" :data-id="track.ALB_ID">
 																	{{track.ALB_TITLE}}
 																</td>
-																<td>
+																<td class="table__col table__col--centered">
 																	{{convertDuration(track.DURATION)}}
 																</td>
-																<td role="button" aria-label="download" @contextmenu.prevent="openQualityModal"
+																<td class="table__download clickable" @contextmenu.prevent="openQualityModal"
 																	@click.stop="addToQueue" :data-link="'https://www.deezer.com/track/'+track.SNG_ID"
-																	style="width: 56px; text-align: center;" class="clickable">
+																	role="button" aria-label="download">
 																	<i class="material-icons">
 																		get_app
 																	</i>
@@ -218,11 +218,10 @@ <h1>Loading</h1>
 										<div v-else-if="results.trackTab.data.length == 0">
 											<h1>No Tracks found</h1>
 										</div>
-										<table class="table table--design-1 tracks_table" v-if="results.trackTab.data.length > 0">
+										<table class="table table--tracks" v-if="results.trackTab.data.length > 0">
-											<tbody>
+											<thead>
 												<tr>
-													<th style="width: 48px;"></th>
+													<th colspan="2">Title</th>
-													<th>Title</th>
 													<th>Artists</th>
 													<th>Album</th>
 													<th>
@@ -232,8 +231,10 @@ <h1>No Tracks found</h1>
 													</th>
 													<th style="width: 56px;"></th>
 												</tr>
-												<tr v-for="track in results.trackTab.data" class="track_row">
+											</thead>
-													<td style="width: 48px; text-align: center;">
+											<tbody>
+												<tr v-for="track in results.trackTab.data">
+													<td class="table__cover table__cover--big">
 														<a href="#" @click="playPausePreview"
 															:class="'rounded' + (track.preview ? ' single-cover' : '')" :data-preview="track.preview">
 															<i @mouseenter="previewMouseEnter" @mouseleave="previewMouseLeave" v-if="track.preview"
@@ -242,24 +243,25 @@ <h1>No Tracks found</h1>
 															</i>
 															<img class="rounded coverart" :src="track.album.cover_small">
 													</td>
-													<td class="breakline inline-flex">
+													<td class="table__col breakline">
 														<i v-if="track.explicit_lyrics" class="material-icons explicit_icon">
 															explicit
 														</i>
 														{{ track.title + (track.title_version && track.title.indexOf(track.title_version) == -1 ? ' '+ track.title_version : '') }}
 													</td>
-													<td class="breakline clickable" @click="artistView" :data-id="track.artist.id">
+													<td class="table__col table__col--centered breakline clickable" @click="artistView"
+														:data-id="track.artist.id">
 														{{track.artist.name}}
 													</td>
-													<td class="breakline clickable" @click="albumView" :data-id="track.album.id">
+													<td class="table__col table__col--centered breakline clickable" @click="albumView"
+														:data-id="track.album.id">
 														{{track.album.title}}
 													</td>
-													<td>
+													<td class="table__col table__col--centered">
 														{{convertDuration(track.duration)}}
 													</td>
-													<td role="button" aria-label="download" @contextmenu.prevent="openQualityModal"
+													<td class="table__download clickable" @contextmenu.prevent="openQualityModal"
-														@click.stop="addToQueue" :data-link="track.link" style="width: 56px; text-align: center;"
+														@click.stop="addToQueue" :data-link="track.link" role="button" aria-label="download">
-														class="clickable">
 														<i class="material-icons">
 															get_app
 														</i>