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/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>