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

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;
+	}
+}