style: started removing globals.scss; style: removed loading placeholder classes

src/components/pages/About.vue

@@ -19,9 +19,9 @@
 
 		<h2>{{ $t('about.titles.usefulLinks') }}</h2>
 		<ul class="no-dots">
-			<li>
+			<!-- <li>
 				<a href="https://deemix.app" target="_blank">🌍 {{ $t('about.officialWebsite') }}</a>
-			</li>
+			</li> -->
 			<li>
 				<a href="https://codeberg.org/RemixDev/deemix" target="_blank">🚀 {{ $t('about.officialRepo') }}</a>
 			</li>

src/components/pages/Artist.vue

@@ -9,8 +9,14 @@
 		>
 			<h1 class="m-0">{{ title }}</h1>
 
-			<div role="button" aria-label="download" @click.stop="addToQueue" :data-link="link" class="fab right">
-				<i class="material-icons" :title="$t('globals.download_hint')">get_app</i>
+			<div
+				role="button"
+				aria-label="download"
+				@click.stop="addToQueue"
+				:data-link="link"
+				class="rounded-full bg-primary text-grayscale-870 cursor-pointer w-16 h-16 grid place-items-center right"
+			>
+				<i class="material-icons text-4xl" :title="$t('globals.download_hint')">get_app</i>
 			</div>
 		</header>
 

src/components/pages/LinkAnalyzer.vue

@@ -68,9 +68,9 @@
 					@contextmenu.prevent="openQualityModal"
 					@click.stop="addToQueue"
 					:data-link="link"
-					class="fab right"
+					class="rounded-full bg-primary text-grayscale-870 cursor-pointer w-16 h-16 grid place-items-center right"
 				>
-					<i class="material-icons" :title="$t('globals.download_hint')">get_app</i>
+					<i class="material-icons text-4xl" :title="$t('globals.download_hint')">get_app</i>
 				</div>
 			</header>
 			<table class="table">

src/components/pages/Settings.vue

@@ -1,5 +1,5 @@
 <template>
-	<div id="settings_tab" class="fixed_footer" ref="root">
+	<div id="settings_tab" class="fixed-footer " ref="root">
 		<h1 class="mb-8 text-5xl">{{ $t('settings.title') }}</h1>
 
 		<div id="logged_in_info" v-if="isLoggedIn" ref="loggedInInfo">
@@ -617,7 +617,7 @@
 			</div>
 		</div>
 
-		<footer>
+		<footer class="bg-background-main">
 			<button class="mr-2 btn btn-primary" @click="resetSettings">{{ $t('settings.reset') }}</button>
 			<button class="btn btn-primary" @click="saveSettings">{{ $t('settings.save') }}</button>
 		</footer>

src/components/pages/Tracklist.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="relative fixed_footer image-header" ref="root">
+	<div class="relative fixed-footer bg-background-main image-header" ref="root">
 		<header
 			:style="{
 				'background-image':
@@ -139,7 +139,7 @@
 			</tbody>
 		</table>
 		<span v-if="label" style="opacity: 0.4; margin-top: 8px; display: inline-block; font-size: 13px">{{ label }}</span>
-		<footer>
+		<footer class="bg-background-main">
 			<button class="mr-2 btn btn-primary" @click.stop="addToQueue" :data-link="link">
 				{{ `${$t('globals.download', { thing: $tc(`globals.listTabs.${type}`, 1) })}` }}
 			</button>