finished writing scss declarations with SASS synthax. Now the repo is a bit lighter

public/index.html

@@ -1139,7 +1139,7 @@ <h3 class="settings-group__header settings-group__header--with-icon">
 
 							<div class="settings-group">
 								<h3 class="settings-group__header settings-group__header--with-icon">
-									<svg id="spotify-icon" enable-background="new 0 0 24 24" viewBox="0 0 24 24"
+									<svg id="spotify_icon" enable-background="new 0 0 24 24" viewBox="0 0 24 24"
 										xmlns="http://www.w3.org/2000/svg">
 										<path
 											d="m12 24c6.624 0 12-5.376 12-12s-5.376-12-12-12-12 5.376-12 12 5.376 12 12 12zm4.872-6.344v.001c-.807 0-3.356-2.828-10.52-1.36-.189.049-.436.126-.576.126-.915 0-1.09-1.369-.106-1.578 3.963-.875 8.013-.798 11.467 1.268.824.526.474 1.543-.265 1.543zm1.303-3.173c-.113-.03-.08.069-.597-.203-3.025-1.79-7.533-2.512-11.545-1.423-.232.063-.358.126-.576.126-1.071 0-1.355-1.611-.188-1.94 4.716-1.325 9.775-.552 13.297 1.543.392.232.547.533.547.953-.005.522-.411.944-.938.944zm-13.627-7.485c4.523-1.324 11.368-.906 15.624 1.578 1.091.629.662 2.22-.498 2.22l-.001-.001c-.252 0-.407-.063-.625-.189-3.443-2.056-9.604-2.549-13.59-1.436-.175.048-.393.125-.625.125-.639 0-1.127-.499-1.127-1.142 0-.657.407-1.029.842-1.155z" />
@@ -1308,7 +1308,7 @@ <h1>{{ title }}</h1>
 							<header
 								:style="{ 'background-image': 'linear-gradient(to bottom, transparent 0%, var(--main-background) 100%), url(\''+image+'\')' }">
 								<h1 class="inline-flex">{{ title }} <i v-if="explicit"
-										class="material-icons explicit_tracklist">explicit</i></h1>
+										class="material-icons explicit_icon explicit_icon--right">explicit</i></h1>
 								<h2 class="inline-flex"><span v-if="metadata">{{ metadata }}</span><span class="right"
 										v-if="release_date">{{ release_date }}</span></h2>
 							</header>

src/styles/scss/_middle-section.scss

@@ -8,6 +8,7 @@
 
 /* Center section */
 $icon-dimension: 2rem;
+$searchbar-height: calc(2rem + 1em);
 
 #search {
 	background-color: var(--secondary-background);
@@ -23,20 +24,12 @@ $icon-dimension: 2rem;
 	.search__icon {
 		width: $icon-dimension;
 		height: $icon-dimension;
-		// cursor: pointer;
 
 		i {
 			font-size: $icon-dimension;
-			transition: color 250ms ease-in-out;
 			color: var(--foreground);
 
-			@include removeSelectionBackground;
+			@include remove-selection-background;
-		}
-
-		&:hover {
-			i {
-				// color: var(--accent-color);
-			}
 		}
 	}
 
@@ -44,8 +37,6 @@ $icon-dimension: 2rem;
 		border: 1px solid var(--foreground);
 	}
 
-	$searchbar-height: calc(2rem + 1em);
-
 	#searchbar {
 		height: $searchbar-height;
 		padding-left: 0.5em;
@@ -74,11 +65,12 @@ $icon-dimension: 2rem;
 
 #content {
 	background-color: var(--main-background);
-	width: calc(100% - 10px);
+	// width: calc(100% - 10px);
+	width: 100%;
 	height: calc(100% - 93px);
 	overflow-y: scroll;
 	overflow-x: hidden;
-	padding-left: 10px;
+	// padding-left: 10px;
 
 	&::-webkit-scrollbar {
 		width: 10px;
@@ -96,60 +88,62 @@ $icon-dimension: 2rem;
 	}
 }
 
+#container {
+	--container-width: 95%;
+
+	@media only screen and (min-width: $small) {
+		--container-width: 85%;
+	}
+
+	@media only screen and (min-width: $medium) {
+		--container-width: 70%;
+	}
+}
+
 #container {
 	margin: 0 auto;
 	max-width: 1280px;
-	width: 90%;
+	width: var(--container-width);
 }
 
 /* The Modal (background) */
 .smallmodal {
-	display: none; /* Hidden by default */
+	display: none;
-	position: fixed; /* Stay in place */
+	position: fixed;
-	z-index: 1250; /* Sit on top */
+	z-index: 1250;
 	left: 0;
 	top: 0;
-	width: 100%; /* Full width */
+	width: 100%;
-	height: 100%; /* Full height */
+	height: 100%;
-	overflow: auto; /* Enable scroll if needed */
+	overflow: auto;
-	background-color: rgb(0, 0, 0); /* Fallback color */
+	background-color: rgb(0, 0, 0);
-	background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
+	background-color: rgba(0, 0, 0, 0.4);
 	animation-duration: 0.3s;
 }
 
 /* Modal Content */
 .smallmodal-content {
-	background-color: none;
+	--modal-content-width: 95%;
+
+	@media only screen and (min-width: $small) {
+		--modal-content-width: 85%;
+	}
+
+	@media only screen and (min-width: $medium) {
+		--modal-content-width: 70%;
+	}
+}
+
+.smallmodal-content {
+	background-color: transparent;
 	margin: auto;
-	width: 30%;
+	width: var(--modal-content-width);
-	align-items: center;
 	position: relative;
 	top: 50%;
 	transform: translateY(-50%);
 
-	& button {
+	button {
 		width: 100%;
 		margin-bottom: 8px;
 	}
 }
-
-@media only screen and (min-width: 601px) {
-	#container,
-	.smallmodal-content {
-		width: 85%;
-	}
-}
-
-@media only screen and (min-width: 993px) {
-	#container,
-	.smallmodal-content {
-		width: 70%;
-	}
-}
-
-@media only screen and (max-width: 600px) {
-	#container,
-	.smallmodal-content {
-		width: 100%;
-	}
-}

src/styles/scss/_progressbar.scss

@@ -48,102 +48,3 @@
 		}
 	}
 }
-
-@-webkit-keyframes indeterminate {
-	0% {
-		left: -35%;
-		right: 100%;
-	}
-	60% {
-		left: 100%;
-		right: -90%;
-	}
-	100% {
-		left: 100%;
-		right: -90%;
-	}
-}
-
-@keyframes indeterminate {
-	0% {
-		left: -35%;
-		right: 100%;
-	}
-	60% {
-		left: 100%;
-		right: -90%;
-	}
-	100% {
-		left: 100%;
-		right: -90%;
-	}
-}
-
-@-webkit-keyframes indeterminate-short {
-	0% {
-		left: -200%;
-		right: 100%;
-	}
-	60% {
-		left: 107%;
-		right: -8%;
-	}
-	100% {
-		left: 107%;
-		right: -8%;
-	}
-}
-
-@keyframes indeterminate-short {
-	0% {
-		left: -200%;
-		right: 100%;
-	}
-	60% {
-		left: 107%;
-		right: -8%;
-	}
-	100% {
-		left: 107%;
-		right: -8%;
-	}
-}
-
-.toast-icon {
-	display: inline-block;
-	margin-right: 8px;
-}
-
-.circle-loader {
-	display: inline-block;
-	border: 2px solid var(--accent-color);
-	border-radius: 50%;
-	border-bottom: 2px solid var(--secondary-background);
-	width: 16px;
-	height: 16px;
-	-webkit-animation: spin 1s linear infinite; /* Safari */
-	animation: spin 1s linear infinite;
-}
-
-.toastify .circle-loader {
-	border-bottom-color: var(--toast-secondary);
-}
-
-/* Safari */
-@-webkit-keyframes spin {
-	0% {
-		-webkit-transform: rotate(0deg);
-	}
-	100% {
-		-webkit-transform: rotate(360deg);
-	}
-}
-
-@keyframes spin {
-	0% {
-		transform: rotate(0deg);
-	}
-	100% {
-		transform: rotate(360deg);
-	}
-}

src/styles/scss/_sidebar.scss

@@ -58,7 +58,7 @@ $sidebar-delay: 75ms;
 			cursor: default;
 		}
 
-		@include removeSelectionBackground;
+		@include remove-selection-background;
 	}
 
 	&:hover {

src/styles/scss/_toasts.scss

@@ -0,0 +1,26 @@
+.toast-icon {
+	display: inline-block;
+	margin-right: 8px;
+}
+
+.circle-loader {
+	display: inline-block;
+	border: 2px solid var(--accent-color);
+	border-radius: 50%;
+	border-bottom: 2px solid var(--secondary-background);
+	width: 16px;
+	height: 16px;
+	animation: spin 1s linear infinite;
+}
+
+.toastify {
+	display: flex;
+	align-items: center;
+	box-shadow: 0 3px 6px -1px rgba(0, 0, 0, 0.12), 0 10px 36px -4px rgba(0, 0, 0, 0.3);
+	background: var(--toast-background);
+	color: var(--toast-text);
+
+	.circle-loader {
+		border-bottom-color: var(--toast-secondary);
+	}
+}

src/styles/scss/_track-preview.scss

@@ -16,9 +16,3 @@
 .preview_playlist_controls {
 	cursor: pointer;
 }
-
-a.single-cover {
-	position: relative;
-	display: inline-block;
-	color: white;
-}

src/styles/scss/base/_animations.scss

@@ -40,23 +40,43 @@
 	}
 }
 
+/* ====== */
+
 @keyframes spin {
-	from {
+	0% {
 		transform: rotate(0deg);
 	}
-
+	100% {
-	to {
 		transform: rotate(360deg);
 	}
 }
 
-// You can find a better name, I have no ideas
+@keyframes indeterminate {
-@keyframes grayscalize {
+	0% {
-	from {
+		left: -35%;
-		filter: grayscale(0);
+		right: 100%;
 	}
-
+	60% {
-	to {
+		left: 100%;
-		filter: grayscale(1);
+		right: -90%;
+	}
+	100% {
+		left: 100%;
+		right: -90%;
+	}
+}
+
+@keyframes indeterminate-short {
+	0% {
+		left: -200%;
+		right: 100%;
+	}
+	60% {
+		left: 107%;
+		right: -8%;
+	}
+	100% {
+		left: 107%;
+		right: -8%;
 	}
 }

src/styles/scss/base/_base.scss

@@ -1,6 +1,4 @@
 html {
-	height: 100vh;
-
 	--main-scroll: hsl(0, 0%, 33%);
 	--panels-scroll: hsl(180, 2%, 17%);
 	--tag-background: hsl(210, 100%, 38%);
@@ -9,8 +7,6 @@ html {
 	--toast-secondary: hsla(0, 0%, 100%, 0.133);
 	--toast-text: hsla(0, 0%, 100%, 0.871);
 	--separator: hsl(0, 0%, 50%);
-
-	--explicit-separator: 0.3125em;
 }
 
 html[data-theme='light'] {
@@ -67,6 +63,10 @@ html[data-theme='purple'] {
 	--table-highlight: hsl(257, 66%, 27%);
 }
 
+html {
+	height: 100vh;
+}
+
 body {
 	margin: 0px;
 	width: 100%;

src/styles/scss/base/_functions.scss

@@ -0,0 +1,17 @@
+// https://css-tricks.com/using-custom-property-stacks-to-tame-the-cascade/
+@function vars($stack...) {
+	$output: null;
+	$close: '';
+	$length: length($stack);
+
+	@each $var in $stack {
+		@if (str-index('#{$var}', '--') == 1) {
+			$var: 'var(#{$var}';
+			$close: '#{$close})';
+		}
+
+		$output: if($output, '#{$output}, #{$var}', $var);
+	}
+
+	@return unquote($output + $close);
+}

src/styles/scss/base/_mixins.scss

@@ -1,4 +1,4 @@
-@mixin removeSelectionBackground {
+@mixin remove-selection-background {
 	&::selection {
 		background: none;
 	}

src/styles/scss/base/_variables.scss

@@ -1 +1,7 @@
+// Breakpoints (@todo change them in more proper values)
+$small: 601px;
+$medium: 993px;
+
+// Static variables (not an oxymoron)
 $sidebar-width: 48px;
+$explicit-separator: 0.3125em;

src/styles/scss/globals/_globals.scss

@@ -32,18 +32,18 @@ input[type='checkbox'] {
 	margin: 3px;
 	display: inline-block;
 	position: relative;
-}
 
-input[type='checkbox']:checked {
+	&:checked {
-	opacity: 1;
+		opacity: 1;
-	background-color: var(--accent-color);
+		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-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;
+		background-position: center center;
-	border: 0px solid var(--accent-color);
+		border: 0px solid var(--accent-color);
-	border-radius: 2px;
+		border-radius: 2px;
-	padding: 9px;
+		padding: 9px;
-	margin: 3px;
+		margin: 3px;
-	color: var(--accent-text);
+		color: var(--accent-text);
+	}
 }
 
 select {
@@ -85,6 +85,31 @@ button {
 	cursor: pointer;
 	transition: transform 50ms ease-in-out, background-color 200ms ease;
 
+	&[disabled] {
+		background-color: var(--secondary-background);
+		color: var(--foreground);
+		opacity: 0.75;
+	}
+
+	&.selective {
+		background-color: var(--main-background);
+		color: var(--foreground);
+
+		&.active {
+			background-color: var(--accent-color);
+			color: var(--accent-text);
+		}
+	}
+
+	&.with_icon {
+		display: flex;
+		align-items: center;
+
+		i {
+			margin-left: 8px;
+		}
+	}
+
 	&:active {
 		background-color: var(--accent-color);
 		transform: scale(0.95);
@@ -96,139 +121,62 @@ button {
 	}
 }
 
-#main_content {
+img {
-	margin-left: $sidebar-width;
+	&.rounded {
-	width: calc(100% - $sidebar-width);
+		border-radius: 5px;
-	height: 100%;
+	}
-	display: flex;
+
+	&.circle {
+		border-radius: 50%;
+	}
 }
 
-img.rounded {
+i {
-	border-radius: 5px;
+	&.disabled {
+		opacity: 0.5;
+		cursor: default;
+	}
+
+	&.explicit_icon {
+		color: hsl(3, 100%, 59%);
+		margin-right: $explicit-separator;
+
+		&.explicit_icon--right {
+			margin-left: $explicit-separator;
+			margin-right: 0px;
+		}
+	}
 }
 
-img.circle {
+span {
-	border-radius: 50%;
+	&.tag {
+		background-color: var(--tag-background);
+		border-radius: 2px;
+		color: var(--tag-text);
+		display: inline-block;
+		font-size: 10px;
+		padding: 3px 6px;
+	}
 }
 
-.coverart {
+a {
-	background-color: var(--secondary-background);
-}
-
-.cover_container {
-	position: relative;
-}
-
-.cover_container .coverart {
-	opacity: 1;
-	display: block;
-	width: 100%;
-	height: auto;
-	transition: 0.5s ease;
-	backface-visibility: hidden;
-}
-
-.cover_container .download_overlay {
-	transition: 0.5s ease;
-	opacity: 0;
-	position: absolute;
-	top: 50%;
-	left: 50%;
-	transform: translate(-50%, -50%);
-	-ms-transform: translate(-50%, -50%);
-	text-align: center;
-}
-
-.cover_container .download_overlay i {
-	background-color: #000000;
-	color: white;
-	border-radius: 50%;
-	padding: 10px;
-	cursor: pointer;
-}
-
-.cover_container:hover .coverart {
-	opacity: 0.75;
-}
-
-.cover_container:hover .download_overlay {
-	opacity: 1;
-}
-
-i.disabled {
-	opacity: 0.5;
-	cursor: default;
-}
-
-i.explicit_icon {
-	color: #ff3b30;
-	margin-right: var(--explicit-separator);
-}
-
-span.tag {
-	background-color: var(--tag-background);
-	border-radius: 2px;
-	color: var(--tag-text);
-	display: inline-block;
-	font-size: 10px;
-	padding: 3px 6px;
-}
-
-a,
-a:visited {
 	color: dodgerblue;
+
+	&.single-cover {
+		position: relative;
+		display: inline-block;
+		color: white;
+	}
+
+	&:visited {
+		color: dodgerblue;
+	}
 }
 
 .clickable {
 	cursor: pointer !important;
 }
 
-.toastify {
-	display: flex;
-	align-items: center;
-	box-shadow: 0 3px 6px -1px rgba(0, 0, 0, 0.12), 0 10px 36px -4px rgba(0, 0, 0, 0.3);
-	background: var(--toast-background);
-	color: var(--toast-text);
-}
-
-.inline-flex {
-	display: flex;
-	align-items: center;
-}
-
-.inline-flex .right {
-	margin-left: auto;
-}
-
-button[disabled] {
-	background-color: var(--secondary-background);
-	color: var(--foreground);
-	opacity: 0.75;
-}
-
-button.selective {
-	background-color: var(--main-background);
-	color: var(--foreground);
-}
-
-button.selective.active {
-	background-color: var(--accent-color);
-	color: var(--accent-text);
-}
-
-button.with_icon {
-	display: flex;
-	align-items: center;
-}
-
-button.with_icon i {
-	margin-left: 8px;
-}
-
-.right {
-	float: right;
-}
-
 .fixed_footer footer {
 	position: sticky;
 	display: flex;
@@ -242,10 +190,6 @@ button.with_icon i {
 	margin-top: 24px;
 }
 
-.tab {
-	margin: 16px 0px;
-}
-
 .fab {
 	width: 56px;
 	height: 56px;
@@ -254,33 +198,27 @@ button.with_icon i {
 	background-color: var(--accent-color);
 	color: var(--accent-text);
 	cursor: pointer;
-}
 
-.fab i {
+	i {
-	font-size: 24px;
+		font-size: 24px;
-	padding: 16px;
+		padding: 16px;
+	}
 }
 
 .with_checkbox {
 	display: flex;
 	align-items: center;
-}
 
-.with_checkbox [type='checkbox'] {
+	[type='checkbox'] {
-	cursor: pointer;
+		cursor: pointer;
-}
+	}
 
-.with_checkbox .checkbox_text {
+	.checkbox_text {
-	margin-left: 10px;
+		margin-left: 10px;
-	cursor: pointer;
+		cursor: pointer;
-}
 
-.with_checkbox .checkbox_text::selection {
+		@include remove-selection-background;
-	background: none;
+	}
-}
-
-.hide {
-	display: none !important;
 }
 
 .loading_placeholder {
@@ -313,3 +251,74 @@ button.with_icon i {
 		z-index: 1000;
 	}
 }
+
+.coverart {
+	background-color: var(--secondary-background);
+}
+
+.cover_container {
+	position: relative;
+
+	.coverart {
+		opacity: 1;
+		display: block;
+		width: 100%;
+		height: auto;
+		transition: 0.5s ease;
+		backface-visibility: hidden;
+	}
+
+	.download_overlay {
+		transition: 0.5s ease;
+		opacity: 0;
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		text-align: center;
+
+		i {
+			background-color: #000000;
+			color: white;
+			border-radius: 50%;
+			padding: 10px;
+			cursor: pointer;
+		}
+	}
+
+	&:hover {
+		.coverart {
+			opacity: 0.75;
+		}
+
+		.download_overlay {
+			opacity: 1;
+		}
+	}
+}
+
+#main_content {
+	margin-left: $sidebar-width;
+	width: calc(100% - $sidebar-width);
+	height: 100%;
+	display: flex;
+}
+
+// @todo Remove
+.inline-flex {
+	display: flex;
+	align-items: center;
+
+	.right {
+		margin-left: auto;
+	}
+}
+
+// @todo Remove
+.right {
+	float: right;
+}
+
+.hide {
+	display: none !important;
+}

src/styles/scss/globals/_tables.scss

@@ -1,10 +1,11 @@
+$vertical-separator: 7px;
+$table-border-radius: 3px;
+
 .table {
 	width: 100%;
 	-webkit-border-horizontal-spacing: 0px;
 	-webkit-border-vertical-spacing: 0px;
 
-	--vertical-separator: 7px;
-
 	tbody {
 		tr:not(.table__row-no-highlight):hover {
 			background: var(--table-highlight);
@@ -55,14 +56,14 @@
 	}
 
 	td {
-		padding: var(--vertical-separator) 10px;
+		padding: $vertical-separator 10px;
 
 		&:first-child {
-			padding: var(--vertical-separator) 10px var(--vertical-separator) 20px;
+			padding: $vertical-separator 10px $vertical-separator 20px;
 		}
 
 		&:last-child {
-			padding: var(--vertical-separator) 20px var(--vertical-separator) 10px;
+			padding: $vertical-separator 20px $vertical-separator 10px;
 		}
 
 		img {
@@ -70,6 +71,85 @@
 		}
 	}
 
+	/* === Tracks Table === */
+	&--tracks {
+		border-collapse: collapse;
+
+		thead {
+			border-bottom: 2px solid var(--table-highlight);
+		}
+
+		th {
+			padding-bottom: 10px;
+			height: 45px;
+		}
+
+		td {
+			height: 35px;
+
+			&.breakline {
+				word-break: break-word;
+			}
+		}
+
+		tr {
+			&:first-child {
+				td {
+					&:first-child {
+						border-top-left-radius: $table-border-radius;
+					}
+
+					&:last-child {
+						border-top-right-radius: $table-border-radius;
+					}
+				}
+			}
+
+			&:last-child {
+				td {
+					&:first-child {
+						border-bottom-left-radius: $table-border-radius;
+					}
+
+					&:last-child {
+						border-bottom-right-radius: $table-border-radius;
+					}
+				}
+			}
+		}
+	}
+
+	/* === Tracklist Table === */
+	&--tracklist {
+		thead {
+			border-bottom: 2px solid var(--table-highlight);
+		}
+
+		th {
+			height: 45px;
+			padding: $vertical-separator 10px;
+
+			&:first-child {
+				padding: $vertical-separator 10px $vertical-separator 20px;
+			}
+
+			&:last-child {
+				padding: $vertical-separator 20px $vertical-separator 10px;
+			}
+		}
+
+		td {
+			height: 35px;
+		}
+	}
+
+	/* === Charts Table === */
+	&--charts {
+		td {
+			height: 35px;
+		}
+	}
+
 	.table__icon {
 		box-sizing: content-box;
 		width: 32px;
@@ -134,95 +214,21 @@
 	}
 }
 
-.track_row > td > img {
+.track_row {
-	width: 32px;
+	> td > img {
-	height: 32px;
+		width: 32px;
-}
+		height: 32px;
-
+	}
-.track_row > td > a > img {
+
-	width: 56px;
+	> td > a > img {
-	height: 56px;
+		width: 56px;
+		height: 56px;
+	}
 }
 
+// @todo Remove
 .top-tracks-position {
 	padding: 12px;
 	text-align: center;
 	cursor: default;
 }
-
-/* === Tracks Table === */
-.table--tracks {
-	border-collapse: collapse;
-
-	--radius: 3px;
-}
-
-.table--tracks thead {
-	border-bottom: 2px solid var(--table-highlight);
-}
-
-.table--tracks th {
-	padding-bottom: 10px;
-	height: 45px;
-}
-
-.table--tracks td {
-	height: 35px;
-}
-
-.table--tracks td.breakline {
-	word-break: break-word;
-}
-
-.table--tracks tr:first-child td:first-child {
-	border-top-left-radius: var(--radius);
-}
-
-.table--tracks tr:first-child td:last-child {
-	border-top-right-radius: var(--radius);
-}
-
-.table--tracks tr:last-child td:first-child {
-	border-bottom-left-radius: var(--radius);
-}
-
-.table--tracks tr:last-child td:last-child {
-	border-bottom-right-radius: var(--radius);
-}
-
-/* === Tracklist Table === */
-
-/* .table--tracklist {} */
-
-.table--tracklist thead {
-	border-bottom: 2px solid var(--table-highlight);
-}
-
-.table--tracklist th {
-	height: 45px;
-	padding: var(--vertical-separator) 10px;
-}
-
-.table--tracklist th:first-child {
-	padding: var(--vertical-separator) 10px var(--vertical-separator) 20px;
-}
-
-.table--tracklist th:last-child {
-	padding: var(--vertical-separator) 20px var(--vertical-separator) 10px;
-}
-
-.table--tracklist td {
-	height: 35px;
-}
-
-.explicit_tracklist {
-	margin-left: var(--explicit-separator);
-}
-
-/* === Charts Table === */
-
-/* .table--charts {} */
-
-.table--charts td {
-	height: 35px;
-}

src/styles/scss/style.scss

@@ -24,3 +24,4 @@
 @import './sidebar';
 @import './stackedTabs';
 @import './track-preview';
+@import './toasts';

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

@@ -1,4 +1,8 @@
-.charts_grid .release .coverart {
+.charts_grid {
-	width: 156px;
+	.release {
-	height: 156px;
+		.coverart {
+			width: 156px;
+			height: 156px;
+		}
+	}
 }

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

@@ -1,23 +1,64 @@
 #download_tab_container {
-	/* width: 300px; */
 	height: 100%;
 	background-color: var(--panels-background);
 	color: var(--panels-text);
 	display: block;
 	flex-direction: column;
+
+	&.tab_hidden {
+		width: 32px;
+
+		#toggle_download_tab {
+			margin-left: 4px;
+
+			&::before {
+				font-family: 'Material Icons';
+				font-style: normal;
+				font-weight: 400;
+				content: 'chevron_left';
+			}
+		}
+
+		#download_tab_drag_handler {
+			display: none;
+		}
+
+		#queue_buttons {
+			opacity: 0;
+			visibility: hidden;
+		}
+
+		#download_list {
+			display: none;
+		}
+
+		#download_tab_label {
+			opacity: 1;
+			visibility: visible;
+		}
+
+		&::after {
+			content: 'downloads';
+			display: flex;
+			align-items: center;
+			text-transform: capitalize;
+			writing-mode: vertical-rl;
+			line-height: 32px;
+		}
+	}
 }
 
 #toggle_download_tab {
 	width: 25px;
 	height: 25px;
 	margin-left: 20px;
-}
 
-#toggle_download_tab::before {
+	&::before {
-	font-family: 'Material Icons';
+		font-family: 'Material Icons';
-	font-style: normal;
+		font-style: normal;
-	font-weight: 400;
+		font-weight: 400;
-	content: 'chevron_right';
+		content: 'chevron_right';
+	}
 }
 
 .download_bar_icon {
@@ -31,167 +72,127 @@
 	height: calc(100% - 32px);
 	padding: 0px 8px 0px 28px;
 	overflow-y: scroll;
+
+	> .download_object {
+		padding-bottom: 8px;
+
+		.download_info {
+			display: flex;
+			align-items: center;
+
+			img {
+				width: 75px;
+				height: 75px;
+				display: inline-block;
+				flex-shrink: 0;
+			}
+
+			.download_line {
+				display: block;
+			}
+
+			.download_slim_separator {
+				display: none;
+			}
+		}
+
+		.download_info_data {
+			width: 100%;
+			margin-left: 8px;
+		}
+
+		.download_info_status {
+			margin-left: 8px;
+			width: 80px;
+		}
+	}
+
+	&.slim {
+		> .download_object {
+			.download_info {
+				display: block;
+
+				img {
+					display: none;
+				}
+
+				.download_line {
+					display: inline-block;
+				}
+
+				.download_slim_separator {
+					display: inline-block;
+				}
+			}
+
+			.download_info_data {
+				width: calc(80% - 16px);
+				display: inline-block;
+				padding-left: 0px;
+			}
+
+			.download_info_status {
+				width: 20%;
+				display: inline-block; // ignored due tu float
+				float: right;
+			}
+		}
+	}
+
+	&::-webkit-scrollbar {
+		width: 10px;
+	}
+
+	&::-webkit-scrollbar-track {
+		background: var(--panels-background);
+	}
+
+	&::-webkit-scrollbar-thumb {
+		background: var(--panels-scroll);
+		border-radius: 4px;
+		width: 6px;
+		padding: 0px 2px;
+	}
 }
 
-#download_list::-webkit-scrollbar {
+.download_object {
-	width: 10px;
+	> .download_bar {
+		display: flex;
+		align-items: center;
+		height: 24px;
+
+		> .queue_icon {
+			cursor: default;
+			margin-left: 8px;
+		}
+
+		> .progress {
+			margin: 0px;
+		}
+	}
 }
 
-#download_list::-webkit-scrollbar-track {
+#download_tab_container {
-	background: var(--panels-background);
+	#queue_buttons {
-}
+		position: absolute;
+		top: 0;
+		right: 0;
+		opacity: 1;
+		visibility: visible;
+		transition: all 250ms ease-in-out;
+	}
 
-#download_list::-webkit-scrollbar-thumb {
+	#download_tab_label {
-	background: var(--panels-scroll);
+		opacity: 0;
-	border-radius: 4px;
+		visibility: hidden;
-	width: 6px;
+		transition: all 250ms ease-in-out;
-	padding: 0px 2px;
+	}
-}
-
-#download_list > .download_object {
-	padding-bottom: 8px;
-}
-
-#download_list > .download_object .download_info {
-	display: flex;
-	align-items: center;
-}
-
-#download_list > .download_object .download_info img {
-	width: 75px;
-	height: 75px;
-	display: inline-block;
-	flex-shrink: 0;
-}
-
-#download_list > .download_object .download_info .download_line {
-	display: block;
-}
-
-#download_list > .download_object .download_info .download_slim_separator {
-	display: none;
-}
-
-#download_list > .download_object .download_info_data {
-	width: 100%;
-	margin-left: 8px;
-}
-
-#download_list > .download_object .download_info_status {
-	margin-left: 8px;
-	width: 80px;
-}
-
-#download_list.slim > .download_object .download_info img {
-	display: none;
-}
-
-#download_list.slim > .download_object .download_info .download_line {
-	display: inline-block;
-}
-
-#download_list.slim > .download_object .download_info .download_slim_separator {
-	display: inline-block;
-}
-
-#download_list.slim > .download_object .download_info_data {
-	width: calc(80% - 16px);
-	display: inline-block;
-	padding-left: 0px;
-}
-
-#download_list.slim > .download_object .download_info_status {
-	width: 20%;
-	display: inline-block;
-	float: right;
-}
-
-#download_list.slim > .download_object .download_info {
-	display: block;
-}
-
-.download_object > .download_bar > .queue_icon {
-	cursor: default;
-	margin-left: 8px;
-}
-
-.download_object > .download_bar {
-	display: flex;
-	align-items: center;
-	height: 24px;
-}
-
-.download_object > .download_bar > .progress {
-	margin: 0px;
-}
-
-#download_tab_container #queue_buttons {
-	position: absolute;
-	top: 0;
-	right: 0;
-	opacity: 1;
-	visibility: visible;
-	transition: all 250ms ease-in-out;
-}
-
-#download_tab_container #download_list {
-	/* width: 300px; */
-}
-
-#download_tab_container #download_tab_label {
-	opacity: 0;
-	visibility: hidden;
-	transition: all 250ms ease-in-out;
 }
 
 #download_tab_drag_handler {
 	width: 15px;
 	height: 100%;
 	position: absolute;
-	background-color: #333;
+	background-color: hsl(0, 0%, 20%);
 	cursor: ew-resize;
 }
-
-/* ===== Hidden tab styles ===== */
-#download_tab_container.tab_hidden {
-	width: 32px;
-}
-
-#download_tab_container.tab_hidden #toggle_download_tab {
-	margin-left: 4px;
-}
-
-#download_tab_container.tab_hidden #download_tab_drag_handler {
-	display: none;
-}
-
-#download_tab_container.tab_hidden #toggle_download_tab::before {
-	font-family: 'Material Icons';
-	font-style: normal;
-	font-weight: 400;
-	content: 'chevron_left';
-}
-
-#download_tab_container.tab_hidden::after {
-	content: 'downloads';
-	display: flex;
-	align-items: center;
-	text-transform: capitalize;
-	writing-mode: vertical-rl;
-	line-height: 32px;
-}
-
-#download_tab_container.tab_hidden #queue_buttons {
-	opacity: 0;
-	visibility: hidden;
-}
-
-#download_tab_container.tab_hidden #download_list {
-	display: none;
-}
-
-#download_tab_container.tab_hidden #download_tab_label {
-	/* display: inline; */
-	opacity: 1;
-	visibility: visible;
-}

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

@@ -1,7 +1,3 @@
-.favorites_tablinks.active {
-	color: var(--accent-text);
-}
-
 .reload-button {
 	&.reload-button--inline {
 		display: inline-block;

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

@@ -1,11 +1,20 @@
-#main_search .search_section {
+#main_search {
-	float: none;
+	.search_section {
-	padding-top: 20px;
+		float: none;
-	padding-bottom: 20px;
+		padding-top: 20px;
-}
+		padding-bottom: 20px;
 
-#main_search .search_section:not(:first-child) {
+		&:not(:first-child) {
-	border-top: 1px solid var(--separator);
+			border-top: 1px solid var(--separator);
+		}
+	}
+
+	.top_result_header {
+		display: block;
+		cursor: default;
+		font-size: 2rem;
+		text-align: center;
+	}
 }
 
 .search_header {
@@ -13,94 +22,83 @@
 	cursor: pointer;
 	font-size: 1.75rem;
 	margin-bottom: 25px;
-}
 
-.search_header:not(.top_result_header) {
+	&:not(.top_result_header) {
-	transition: color 200ms ease-in-out;
+		transition: color 200ms ease-in-out;
-}
 
-.search_header:not(.top_result_header):hover {
+		&:hover {
-	color: var(--accent-color);
+			color: var(--accent-color);
-}
+		}
-
+	}
-/* Tab links */
-
-.search_tablinks.active {
-	color: var(--foreground-inverted);
 }
 
 /* Top Result */
-#main_search .top_result_header {
-	display: block;
-	cursor: default;
-	font-size: 2rem;
-	text-align: center;
-}
-
 .top_result {
 	display: flex;
 	align-items: center;
 	flex-direction: column;
-}
 
-.top_result > .cover_container {
+	> .cover_container {
-	width: 156px;
+		width: 156px;
-	height: 156px;
+		height: 156px;
-}
+	}
 
-.top_result .info_box {
+	.info_box {
-	display: flex;
+		display: flex;
-	flex-direction: column;
+		flex-direction: column;
-	justify-content: center;
+		justify-content: center;
-	align-items: center;
+		align-items: center;
-	margin-top: 15px;
+		margin-top: 15px;
-}
 
-.top_result .info_box .primary-text,
+		.primary-text,
-.top_result .info_box .secondary-text {
+		.secondary-text {
-	font-size: 18px;
+			font-size: 18px;
-	text-align: center;
+			text-align: center;
-}
+		}
 
-.top_result .info_box .primary-text {
+		.primary-text {
-	margin-bottom: 5px;
+			margin-bottom: 5px;
-}
+		}
 
-.top_result .info_box .secondary-text {
+		.secondary-text {
-	margin-bottom: 10px;
+			margin-bottom: 10px;
-}
+		}
 
-.top_result .info_box .tag {
+		.tag {
-	width: 40px;
+			width: 40px;
-	text-align: center;
+			text-align: center;
+		}
+	}
 }
 
 /* Releases */
-.release .primary-text,
+.release {
-.release .secondary-text {
+	.primary-text,
-	margin: 0px;
+	.secondary-text {
-	margin-bottom: 4px;
+		margin: 0px;
-}
+		margin-bottom: 4px;
+	}
 
-.release .secondary-text {
+	.secondary-text {
-	opacity: 0.75;
+		opacity: 0.75;
-	font-size: 14px;
+		font-size: 14px;
-}
 
-.release .secondary-text .material-icons {
+		.material-icons {
-	font-size: 17px !important;
+			font-size: 17px !important;
-	margin-left: 4px;
+			margin-left: 4px;
+		}
+	}
 }
 
 .release_grid {
 	display: grid;
 	grid-template-columns: repeat(auto-fill, minmax(156px, 1fr));
 	grid-gap: 1rem;
-}
 
-.release_grid.firstrow_only {
+	&.firstrow_only {
-	grid-template-rows: 1fr;
+		grid-template-rows: 1fr;
-	grid-auto-rows: 0;
+		grid-auto-rows: 0;
-	grid-row-gap: 0px;
+		grid-row-gap: 0px;
-	overflow-y: hidden;
+		overflow-y: hidden;
+	}
 }

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

@@ -30,13 +30,13 @@
 	width: 48px;
 	margin: 0px 0px 0px 8px;
 	padding: 0px 4px;
+
+	i {
+		padding: 6px 0px;
+	}
 }
 
-#settings_btn_copyArl i {
+#spotify_icon {
-	padding: 6px 0px;
-}
-
-#spotify-icon {
 	width: 24px;
 	height: 24px;
 	fill: #1db954;
@@ -51,61 +51,61 @@
 	border-top: 1px solid var(--separator); /* Need less opacity */
 	padding-top: 20px;
 	padding-bottom: 20px;
-}
 
-.settings-group > * {
+	> * {
-	margin-bottom: 15px;
+		margin-bottom: 15px;
+	}
 }
 
 /* Settings group header */
 .settings-group__header {
 	font-size: 1.5rem;
 	margin-bottom: 25px;
-}
 
-.settings-group__header--with-icon {
+	&.settings-group__header--with-icon {
-	display: inline-flex;
+		display: inline-flex;
-	align-items: center;
+		align-items: center;
-}
 
-.settings-group__header--with-icon i.material-icons {
+		i.material-icons {
-	margin-right: 15px;
+			margin-right: 15px;
+		}
+	}
 }
 
 /* Settings container */
 .settings-container {
 	display: flex;
-}
 
-.settings-container__half > *,
+	&__half {
-.settings-container__third > * {
+		width: 50%;
-	margin-bottom: 15px;
+	}
-}
 
-.settings-container__half {
+	&__third {
-	width: 50%;
+		width: 33%;
-}
 
-.settings-container__third {
+		&--only-checkbox {
-	width: 33%;
+			display: flex;
-}
+			flex-direction: column;
+			justify-content: center;
+			align-items: start;
+		}
+	}
 
-.settings-container__third--only-checkbox {
+	&__half > *,
-	display: flex;
+	&__third > * {
-	flex-direction: column;
+		margin-bottom: 15px;
-	justify-content: center;
+	}
-	align-items: start;
 }
 
 /* Input group */
 .input_group {
 	margin-bottom: 25px;
-}
 
-.input_group .input_group_text {
+	.input_group_text {
-	margin-bottom: 7px;
+		margin-bottom: 7px;
-}
+	}
 
-.with_checkbox + .input_group {
+	.with_checkbox + & {
-	margin-top: 10px;
+		margin-top: 10px;
+	}
 }

src/styles/scss/tabs/_tabs.scss

@@ -4,28 +4,34 @@
 	display: none;
 }
 
-.main_tabcontent h1 {
+.main_tabcontent {
-	margin-bottom: 12px;
+	h1 {
+		margin-bottom: 12px;
+	}
 }
 
-.tab button {
+.tab {
-	background-color: var(--main-background);
+	margin: 16px 0px;
-	color: var(--foreground);
-}
 
-.tab button.active {
+	button {
-	background-color: var(--accent-color);
+		background-color: var(--main-background);
+		color: var(--foreground);
+
+		&.active {
+			background-color: var(--accent-color);
+		}
+	}
 }
 
 .release {
 	display: inline-block;
 	width: 156px;
-}
 
-.release .cover_container {
+	.cover_container {
-	width: 156px;
+		width: 156px;
-	height: 156px;
+		height: 156px;
-	margin-bottom: 10px;
+		margin-bottom: 10px;
+	}
 }
 
 .section-tabs {