style: removed some global styles; chore: removed useless type="text/javascript" from socket.io script tag; moved Settings page styles into its component; fix: play button color on PreviewControls component

public/index.html

@@ -21,7 +21,7 @@
 		<div id="app"></div>
 	</body>
 
-	<script type="text/javascript" src="/js/vendor/socket.io.js"></script>
+	<script src="/js/vendor/socket.io.js"></script>
 	<script src="/js/bundle.js"></script>
 
 </html>

src/app.js

@@ -9,6 +9,8 @@ import '@/styles/vendor/material-icons.css'
 import '@/styles/vendor/OpenSans.css'
 
 import '@/styles/scss/style.scss'
+import '@/styles/css/normalize.css'
+import '@/styles/css/base.css'
 import '@/styles/css/components.css'
 import '@/styles/css/helpers.css'
 import '@/styles/css/typography.css'

src/components/globals/PreviewControls.vue

@@ -2,7 +2,7 @@
 	<i
 		@mouseenter="previewMouseEnter"
 		@mouseleave="previewMouseLeave"
-		class="absolute top-0 right-0 flex items-center justify-center w-full h-full text-center transition-opacity duration-200 ease-in-out bg-black bg-opacity-50 rounded opacity-0 material-icons preview_controls"
+		class="absolute top-0 right-0 flex items-center justify-center w-full h-full text-center text-white transition-opacity duration-200 ease-in-out bg-black bg-opacity-50 rounded opacity-0 material-icons preview_controls"
 		:title="$t('globals.play_hint')"
 	>
 		play_arrow

src/components/pages/Settings.vue

@@ -130,7 +130,7 @@
 				</h3>
 			</template>
 
-			<div class="settings-container">
+			<div class="space-x-5 settings-container">
 				<div class="settings-container__third">
 					<label class="with-checkbox">
 						<input type="checkbox" v-model="settings.createPlaylistFolder" />
@@ -188,7 +188,7 @@
 				</h3>
 			</template>
 
-			<div class="settings-container">
+			<div class="space-x-5 settings-container">
 				<div class="settings-container__third settings-container__third--only-checkbox">
 					<label class="with-checkbox">
 						<input type="checkbox" v-model="settings.padTracks" />
@@ -286,7 +286,7 @@
 				</h3>
 			</template>
 
-			<div class="settings-container">
+			<div class="space-x-5 settings-container">
 				<div class="settings-container__half">
 					<label class="with-checkbox">
 						<input type="checkbox" v-model="settings.tags.title" />
@@ -427,7 +427,7 @@
 				</select>
 			</div>
 
-			<div class="settings-container">
+			<div class="space-x-5 settings-container">
 				<div class="settings-container__third settings-container__third--only-checkbox">
 					<label class="with-checkbox">
 						<input type="checkbox" v-model="settings.fallbackBitrate" />
@@ -663,7 +663,7 @@
 	</div>
 </template>
 
-<style lang="scss">
+<style lang="scss" scoped>
 #logged_in_info {
 	height: 250px;
 	display: flex;
@@ -687,12 +687,75 @@
 		}
 	}
 
-	svg {
+	&::v-deep svg {
 		width: 40px !important;
 		height: 40px !important;
 		filter: brightness(0.5);
 	}
 }
+
+.settings-group {
+	border-top-width: 1px;
+	border-color: hsl(0, 0%, 50%);
+}
+
+.settings-group__header {
+	display: inline-flex;
+	align-items: center;
+	padding-top: 2rem;
+	padding-bottom: 2rem;
+	font-size: 1.5rem;
+
+	i.material-icons {
+		margin-right: 1rem;
+	}
+}
+
+.settings-container {
+	display: flex;
+
+	&__half {
+		width: 50%;
+	}
+
+	&__third {
+		width: 33%;
+
+		&--only-checkbox {
+			display: flex;
+			flex-direction: column;
+			align-items: start;
+			justify-content: center;
+		}
+	}
+
+	&__half > *,
+	&__third > * {
+		margin-bottom: 1rem;
+	}
+}
+
+.with-checkbox {
+	display: flex;
+	align-items: center;
+
+	[type='checkbox'] {
+		cursor: pointer;
+	}
+
+	.checkbox-text {
+		margin-left: 10px;
+		cursor: pointer;
+		user-select: none;
+	}
+}
+
+/* Input group */
+.input-group {
+	.input-group-text {
+		margin-bottom: 0.5rem;
+	}
+}
 </style>
 
 <script>

src/styles/css/base.css

@@ -0,0 +1,53 @@
+@layer base {
+	input[type='text'],
+	input[type='password'],
+	input[type='number'],
+	select {
+		border-radius: 4px;
+		background-color: var(--secondary-background);
+		padding: 0 1rem;
+		width: 100%;
+		min-height: 3rem;
+		color: var(--foreground);
+	}
+
+	input[type='text'],
+	input[type='password'],
+	input[type='number'] {
+		padding: 0 16px;
+	}
+
+	input[type='checkbox'] {
+		display: inline-block;
+		position: relative;
+		opacity: 0.5;
+		margin: 3px;
+		border: 2px solid gray;
+		border-radius: 2px;
+		background-color: none;
+		padding: 7px;
+	}
+
+	input[type='checkbox']:checked {
+		opacity: 1;
+		border-width: 0;
+		background-color: var(--primary-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;
+		padding: 9px;
+		color: var(--primary-text);
+	}
+
+	select {
+		background-clip: border-box;
+		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:gray;fill-opacity:0.5' d='M7 10l5 5 5-5z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
+		background-position: calc(100% - 8px) center;
+		background-repeat: no-repeat;
+		background-size: 24px;
+		padding-right: 40px;
+	}
+
+	a {
+		color: dodgerblue;
+	}
+}

src/styles/css/components.css

@@ -49,13 +49,20 @@
 
 	/* Image header */
 	.image-header header {
-		@apply bg-cover pt-56 px-6 pb-2 rounded-t-lg;
+		@apply px-6 pt-56 pb-2 bg-cover rounded-t-lg;
 
 		background-position: 0% 35%;
 	}
 
 	/* Fixed footer */
 	.fixed-footer footer {
-		@apply sticky items-center flex flex-row justify-end bottom-0 h-16 w-full mt-6;
+		@apply sticky bottom-0 flex flex-row items-center justify-end w-full h-16 mt-6;
+	}
+
+	/* Release grid */
+	.release-grid {
+		@apply grid gap-4;
+
+		grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
 	}
 }

src/styles/css/helpers.css

@@ -1,7 +1,18 @@
 .changing-theme {
+	/* Applied to ALL elements when changing theme */
 	transition: all 200ms ease-in-out;
 }
 
 [v-cloak] {
+	/* Attribute removed after that a component finished loading */
 	display: none;
 }
+
+.clickable {
+	cursor: pointer !important;
+}
+
+.coverart {
+	/* ? Why? */
+	background-color: var(--secondary-background);
+}

src/styles/css/normalize.css

@@ -0,0 +1,66 @@
+@layer base {
+	* {
+		box-sizing: border-box;
+		margin: 0;
+		padding: 0;
+	}
+
+	table,
+	caption,
+	tbody,
+	tfoot,
+	thead,
+	tr,
+	th,
+	td {
+		margin: 0;
+		border: 0;
+		padding: 0;
+		vertical-align: baseline;
+		font: inherit;
+		font-size: 100%;
+	}
+
+	table {
+		border-collapse: collapse;
+		border-spacing: 0;
+	}
+
+	/* Taken from Tailwind's Preflight */
+	button,
+	[type='button'],
+	[type='reset'],
+	[type='submit'] {
+		appearance: button;
+	}
+
+	input[type='text'],
+	input[type='password'],
+	input[type='number'],
+	input[type='search'],
+	input[type='checkbox'],
+	select {
+		appearance: none;
+	}
+
+	[type='number']::-webkit-inner-spin-button,
+	[type='number']::-webkit-outer-spin-button {
+		height: auto;
+	}
+
+	button,
+	[role='button'] {
+		cursor: pointer;
+	}
+
+	p {
+		word-break: break-word;
+	}
+
+	*,
+	::before,
+	::after {
+		border-width: 0;
+		border-style: solid;
+	}
+}

src/styles/scss/base/_normalize.scss

@@ -1,64 +0,0 @@
-* {
-	box-sizing: border-box;
-	margin: 0;
-	padding: 0;
-}
-
-table,
-caption,
-tbody,
-tfoot,
-thead,
-tr,
-th,
-td {
-	margin: 0;
-	border: 0;
-	padding: 0;
-	vertical-align: baseline;
-	font: inherit;
-	font-size: 100%;
-}
-
-table {
-	border-collapse: collapse;
-	border-spacing: 0;
-}
-
-/* Taken from Tailwind Preflight */
-button,
-[type='button'],
-[type='reset'],
-[type='submit'] {
-	appearance: button;
-}
-
-input[type='text'],
-input[type='password'],
-input[type='number'],
-input[type='search'],
-input[type='checkbox'],
-select {
-	appearance: none;
-}
-
-[type='number']::-webkit-inner-spin-button,
-[type='number']::-webkit-outer-spin-button {
-	height: auto;
-}
-
-button,
-[role='button'] {
-	cursor: pointer;
-}
-
-p {
-	word-break: break-word;
-}
-
-*,
-::before,
-::after {
-	border-width: 0;
-	border-style: solid;
-}

src/styles/scss/globals/_globals.scss

@@ -1,69 +0,0 @@
-input[type='text'],
-input[type='password'],
-input[type='number'] {
-	appearance: none;
-	margin-bottom: 8px;
-	border: 0px solid black;
-	border-radius: 4px;
-	background-color: var(--secondary-background);
-	padding: 0px 8px;
-	width: calc(100% - 16px);
-	line-height: 36px;
-	color: var(--foreground);
-}
-
-input[type='checkbox'] {
-	appearance: none;
-	display: inline-block;
-	position: relative;
-	opacity: 0.5;
-	margin: 3px;
-	border: 2px solid gray;
-	border-radius: 2px;
-	background-color: none;
-	padding: 7px;
-
-	&:checked {
-		opacity: 1;
-		margin: 3px;
-		border: 0px solid var(--primary-color);
-		border-radius: 2px;
-		background-color: var(--primary-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;
-		padding: 9px;
-		color: var(--primary-text);
-	}
-}
-
-select {
-	appearance: none;
-	margin-bottom: 8px;
-	border: 0px solid black;
-	border-radius: 4px;
-	background-clip: border-box;
-	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-position: calc(100% - 8px) center;
-	background-repeat: no-repeat;
-	background-size: 24px;
-	padding: 0px 40px 0px 8px;
-	width: 100%;
-	line-height: 36px;
-	color: var(--foreground);
-}
-
-@layer base {
-	a {
-		color: dodgerblue;
-	}
-}
-
-.clickable {
-	cursor: pointer !important;
-}
-
-.coverart {
-	// ? Why?
-	background-color: var(--secondary-background);
-}

src/styles/scss/style.scss

@@ -3,12 +3,8 @@
 @import '~tailwindcss/utilities';
 
 @import './base/base';
-@import './base/normalize';
 @import './base/animations';
 
-@import './globals/globals';
 @import './globals/tables';
 
-@import './tabs/release-grid';
-@import './tabs/settings-tab';
 @import './tabs/tabs';

src/styles/scss/tabs/_release-grid.scss

@@ -1,5 +0,0 @@
-.release-grid {
-	@apply gap-4 grid;
-
-	grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
-}

src/styles/scss/tabs/_settings-tab.scss

@@ -1,54 +0,0 @@
-.settings-group {
-	@apply border-t border-grayscale-500;
-}
-
-.settings-group__header {
-	@apply inline-flex items-center py-8 text-2xl;
-
-	i.material-icons {
-		@apply mr-4;
-	}
-}
-
-.settings-container {
-	display: flex;
-
-	&__half {
-		width: 50%;
-	}
-
-	&__third {
-		width: 33%;
-
-		&--only-checkbox {
-			@apply flex flex-col items-start justify-center;
-		}
-	}
-
-	&__half > *,
-	&__third > * {
-		@apply mb-4;
-	}
-}
-
-.with-checkbox {
-	display: flex;
-	align-items: center;
-
-	[type='checkbox'] {
-		cursor: pointer;
-	}
-
-	.checkbox-text {
-		margin-left: 10px;
-		cursor: pointer;
-		user-select: none;
-	}
-}
-
-/* Input group */
-.input-group {
-	.input-group-text {
-		@apply mb-2;
-	}
-}