added hover and active style to buttons

public/css/modules/base/base.css

@@ -28,7 +28,7 @@ html[data-theme='light'] {
 	--main-text-inverted: #eeeeee;
 	--panels-background: #222324;
 	--panels-text: #ffffff;
-	--accent-text: #ffffff;
+	--accent-text: black;
 
 	--table-bg: #ffffff;
 	--table-zebra: #c9c9c9;

public/css/modules/globals/globals.css

@@ -1,3 +1,92 @@
+input[type='text'],
+input[type='password'],
+input[type='number'] {
+	width: calc(100% - 16px);
+	border: 0px solid black;
+	line-height: 36px;
+	padding: 0px 8px;
+	border-radius: 4px;
+	background-color: var(--secondary-background);
+	color: var(--primary-text);
+	margin-bottom: 8px;
+}
+
+input[type='checkbox'] {
+	-webkit-appearance: none;
+	appearance: none;
+	background-color: none;
+	border: 2px solid gray;
+	opacity: 0.5;
+	border-radius: 2px;
+	padding: 7px;
+	margin: 3px;
+	display: inline-block;
+	position: relative;
+}
+
+input[type='checkbox']:checked {
+	opacity: 1;
+	background-color: var(--accent-color);
+	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='18' viewBox='3 3 18 18' width='18'%3E%3Cpath fill='%23ffffff' d='M 10,17 5,12 6.41,10.59 10,14.17 17.59,6.58 19,8 Z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
+	background-position: center center;
+	border: 0px solid var(--accent-color);
+	border-radius: 2px;
+	padding: 9px;
+	margin: 3px;
+	color: var(--accent-text);
+}
+
+select {
+	-webkit-appearance: none;
+	appearance: none;
+	width: 100%;
+	border: 0px solid black;
+	line-height: 36px;
+	padding: 0px 40px 0px 8px;
+	border-radius: 4px;
+	background-color: var(--secondary-background);
+	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 0 24 24' width='24'%3E%3Cpath style='fill%3A%23000000%3Bfill-opacity%3A0.25' d='M7 10l5 5 5-5z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
+	background-repeat: no-repeat;
+	background-size: 24px;
+	background-position: calc(100% - 8px) center;
+	background-clip: border-box;
+	color: var(--primary-text);
+	margin-bottom: 8px;
+}
+
+p {
+	word-break: break-word;
+}
+
+button {
+	min-width: 64px;
+	color: var(--accent-text);
+	position: relative;
+	background-color: var(--accent-color);
+	border: 1px solid transparent;
+	/* border: none; */
+	border-radius: 4px;
+	font-family: inherit;
+	font-weight: 600;
+	font-size: 14px;
+	padding: 0px 8px;
+	margin-right: 8px;
+	height: 36px;
+	text-transform: uppercase;
+	cursor: pointer;
+	transition: transform 50ms ease-in-out, background-color 200ms ease;
+}
+
+button:active {
+	background-color: var(--accent-color);
+	transform: scale(0.95);
+}
+
+button:hover {
+	background: none;
+	border: 1px solid var(--accent-color);
+}
+
 #loading_overlay {
 	justify-content: center;
 	align-items: center;
@@ -98,10 +187,6 @@ span.tag {
 	padding: 3px 6px;
 }
 
-p {
-	word-break: break-word;
-}
-
 a:visited {
 	color: dodgerblue;
 }
@@ -127,22 +212,6 @@ a:visited {
 	margin-left: auto;
 }
 
-button {
-	font-family: inherit;
-	font-weight: 600;
-	font-size: 14px;
-	padding: 0px 8px;
-	margin-right: 8px;
-	height: 36px;
-	background-color: var(--accent-color);
-	border: 0px solid black;
-	border-radius: 4px;
-	min-width: 64px;
-	text-transform: uppercase;
-	color: var(--accent-text);
-	cursor: pointer;
-}
-
 button[disabled] {
 	background-color: var(--secondary-background);
 	color: var(--main-text);
@@ -168,62 +237,6 @@ button.with_icon i {
 	margin-left: 8px;
 }
 
-input[type='text'],
-input[type='password'],
-input[type='number'] {
-	width: calc(100% - 16px);
-	border: 0px solid black;
-	line-height: 36px;
-	padding: 0px 8px;
-	border-radius: 4px;
-	background-color: var(--secondary-background);
-	color: var(--primary-text);
-	margin-bottom: 8px;
-}
-
-select {
-	-webkit-appearance: none;
-	appearance: none;
-	width: 100%;
-	border: 0px solid black;
-	line-height: 36px;
-	padding: 0px 40px 0px 8px;
-	border-radius: 4px;
-	background-color: var(--secondary-background);
-	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 0 24 24' width='24'%3E%3Cpath style='fill%3A%23000000%3Bfill-opacity%3A0.25' d='M7 10l5 5 5-5z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
-	background-repeat: no-repeat;
-	background-size: 24px;
-	background-position: calc(100% - 8px) center;
-	background-clip: border-box;
-	color: var(--primary-text);
-	margin-bottom: 8px;
-}
-
-input[type='checkbox'] {
-	-webkit-appearance: none;
-	appearance: none;
-	background-color: none;
-	border: 2px solid gray;
-	opacity: 0.5;
-	border-radius: 2px;
-	padding: 7px;
-	margin: 3px;
-	display: inline-block;
-	position: relative;
-}
-
-input[type='checkbox']:checked {
-	opacity: 1;
-	background-color: var(--accent-color);
-	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='18' viewBox='3 3 18 18' width='18'%3E%3Cpath fill='%23ffffff' d='M 10,17 5,12 6.41,10.59 10,14.17 17.59,6.58 19,8 Z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
-	background-position: center center;
-	border: 0px solid var(--accent-color);
-	border-radius: 2px;
-	padding: 9px;
-	margin: 3px;
-	color: var(--accent-text);
-}
-
 .right {
 	float: right;
 }
@@ -245,25 +258,6 @@ input[type='checkbox']:checked {
 	margin: 16px 0px;
 }
 
-th.sortable {
-	-webkit-user-select: none;
-	user-select: none;
-}
-
-th.sort-asc:after {
-	content: '\25b2';
-	font-size: 0.7em;
-	padding-left: 3px;
-	line-height: 0.7em;
-}
-
-th.sort-desc:after {
-	content: '\25bc';
-	font-size: 0.7em;
-	padding-left: 3px;
-	line-height: 0.7em;
-}
-
 .fab {
 	width: 56px;
 	height: 56px;

public/css/modules/globals/tables.css

@@ -29,6 +29,25 @@
 	vertical-align: middle;
 }
 
+th.sortable {
+	-webkit-user-select: none;
+	user-select: none;
+}
+
+th.sort-asc:after {
+	content: '\25b2';
+	font-size: 0.7em;
+	padding-left: 3px;
+	line-height: 0.7em;
+}
+
+th.sort-desc:after {
+	content: '\25bc';
+	font-size: 0.7em;
+	padding-left: 3px;
+	line-height: 0.7em;
+}
+
 .table td {
 	padding: var(--vertical-separator) 10px;
 }

public/index.html

@@ -130,10 +130,12 @@ <h2>Start searching!</h2>
 																		:src="'https://e-cdns-images.dzcdn.net/images/cover/'+track.ALB_PICTURE+'/32x32-000000-80-0-0.jpg'">
 																</td>
 																<td class="table__cell table__cell--large breakline">
+																	<div class="table__cell-content table__cell-content--vertical-center">
 																		<i v-if="track.EXPLICIT_LYRICS == 1" class="material-icons explicit_icon">
 																			explicit
 																		</i>
 																		{{ track.SNG_TITLE + (track.VERSION ? ' ' + track.VERSION : '') }}
+																	</div>
 																</td>
 																<td class="table__cell table__cell--medium table__cell--center breakline">
 																	<span class="clickable" @click="artistView" :data-id="artist.ART_ID"
@@ -395,16 +397,16 @@ <h2 class="page_heading">Charts</h2>
 									<!-- Ugly af -->
 									<template v-for="release in countries">
 										<div role="button" :aria-label="release.title" v-if="release.title === 'Worldwide'"
-											class="release clickable" @click="getTrackList" :data-title="release.title"
+											class="release clickable" @click="getTrackList" :data-title="release.title" :data-id="release.id"
-											:data-id="release.id" :key="release.id">
+											:key="release.id">
 											<img class="rounded coverart" :src="release.picture_medium">
 										</div>
 									</template>
 
 									<template v-for="release in countries">
 										<div role="button" :aria-label="release.title" v-if="release.title !== 'Worldwide'"
-											class="release clickable" @click="getTrackList" :data-title="release.title"
+											class="release clickable" @click="getTrackList" :data-title="release.title" :data-id="release.id"
-											:data-id="release.id" :key="release.id">
+											:key="release.id">
 											<img class="rounded coverart" :src="release.picture_medium">
 										</div>
 									</template>