chore(global scss): Global styles added and variables location changed

scss files now stored in frontend/scss

frontend/App.vue

@@ -111,182 +111,3 @@ export default {
 	}
 };
 </script>
-
-<style lang="scss">
-@import "styles/global.scss";
-
-#toast-container {
-	z-index: 10000 !important;
-}
-
-html {
-	overflow: auto !important;
-}
-
-body {
-	background-color: $light-grey;
-	color: $dark-grey;
-	font-family: "Roboto", Helvetica, Arial, sans-serif;
-}
-
-a {
-	color: $primary-color;
-	text-decoration: none;
-}
-
-.modal-card {
-	margin: 0 !important;
-}
-
-.absolute-a {
-	width: 100%;
-	height: 100%;
-	position: absolute;
-	top: 0;
-	left: 0;
-}
-
-.alert {
-	padding: 20px;
-	color: $white;
-	background-color: $red;
-	position: fixed;
-	top: 50px;
-	right: 50px;
-	font-size: 2em;
-	border-radius: 5px;
-	z-index: 10000000;
-}
-
-.tooltip {
-	position: relative;
-
-	&:after {
-		position: absolute;
-		min-width: 80px;
-		margin-left: -75%;
-		text-align: center;
-		padding: 7.5px 6px;
-		border-radius: 2px;
-		background-color: $dark-grey;
-		font-size: 0.9em;
-		color: $white;
-		content: attr(data-tooltip);
-		opacity: 0;
-		transition: all 0.2s ease-in-out 0.1s;
-		visibility: hidden;
-	}
-
-	&:hover:after {
-		opacity: 1;
-		visibility: visible;
-	}
-}
-
-.tooltip-top {
-	&:after {
-		bottom: 150%;
-	}
-
-	&:hover {
-		&:after {
-			bottom: 120%;
-		}
-	}
-}
-
-.tooltip-bottom {
-	&:after {
-		top: 155%;
-	}
-
-	&:hover {
-		&:after {
-			top: 125%;
-		}
-	}
-}
-
-.tooltip-left {
-	&:after {
-		bottom: -10px;
-		right: 130%;
-		min-width: 100px;
-	}
-
-	&:hover {
-		&:after {
-			right: 110%;
-		}
-	}
-}
-
-.tooltip-right {
-	&:after {
-		bottom: -10px;
-		left: 190%;
-		min-width: 100px;
-	}
-
-	&:hover {
-		&:after {
-			left: 200%;
-		}
-	}
-}
-
-.button:focus,
-.button:active {
-	border-color: #dbdbdb !important;
-}
-.input:focus,
-.input:active {
-	border-color: $primary-color !important;
-}
-button.delete:focus {
-	background-color: rgba(10, 10, 10, 0.3);
-}
-
-.tag {
-	padding-right: 6px !important;
-}
-
-.button {
-	&.is-success {
-		background-color: $green !important;
-
-		&:hover,
-		&:focus {
-			background-color: darken($green, 5%) !important;
-		}
-	}
-	&.is-primary {
-		background-color: $primary-color !important;
-
-		&:hover,
-		&:focus {
-			background-color: darken($primary-color, 5%) !important;
-		}
-	}
-	&.is-danger {
-		background-color: $red !important;
-
-		&:hover,
-		&:focus {
-			background-color: darken($red, 5%) !important;
-		}
-	}
-	&.is-info {
-		background-color: $blue !important;
-
-		&:hover,
-		&:focus {
-			background-color: darken($blue, 5%) !important;
-		}
-	}
-}
-
-.center {
-	text-align: center;
-}
-</style>

frontend/components/404.vue

@@ -10,7 +10,7 @@
 </template>
 
 <style lang="scss" scoped>
-@import "styles/global.scss";
+@import "scss/variables/colors.scss";
 
 * {
 	margin: 0;

frontend/components/Admin/EditStation.vue

@@ -470,7 +470,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "styles/global.scss";
+@import "scss/variables/colors.scss";
 
 .controls {
 	display: flex;

frontend/components/Admin/News.vue

@@ -335,7 +335,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "styles/global.scss";
+@import "scss/variables/colors.scss";
 
 .tag:not(:last-child) {
 	margin-right: 5px;

frontend/components/Admin/Punishments.vue

@@ -176,7 +176,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "styles/global.scss";
+@import "scss/variables/colors.scss";
 
 body {
 	font-family: "Roboto", sans-serif;

frontend/components/Admin/QueueSongs.vue

@@ -213,7 +213,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "styles/global.scss";
+@import "scss/variables/colors.scss";
 
 .optionsColumn {
 	width: 140px;

frontend/components/Admin/Reports.vue

@@ -133,7 +133,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "styles/global.scss";
+@import "scss/variables/colors.scss";
 
 .tag:not(:last-child) {
 	margin-right: 5px;

frontend/components/Admin/Songs.vue

@@ -203,7 +203,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "styles/global.scss";
+@import "scss/variables/colors.scss";
 
 body {
 	font-family: "Roboto", sans-serif;

frontend/components/Admin/Stations.vue

@@ -345,7 +345,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "styles/global.scss";
+@import "scss/variables/colors.scss";
 
 .tag {
 	margin-top: 5px;

frontend/components/Admin/Statistics.vue

@@ -328,7 +328,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "styles/global.scss";
+@import "scss/variables/colors.scss";
 
 body {
 	font-family: "Roboto", sans-serif;

frontend/components/Admin/Users.vue

@@ -106,7 +106,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "styles/global.scss";
+@import "scss/variables/colors.scss";
 
 body {
 	font-family: "Roboto", sans-serif;

frontend/components/MainFooter.vue

@@ -82,7 +82,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "styles/global.scss";
+@import "scss/variables/colors.scss";
 
 .content a:not(.button) {
 	border: 0;

frontend/components/MainHeader.vue

@@ -108,7 +108,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "styles/global.scss";
+@import "scss/variables/colors.scss";
 
 .nav {
 	background-color: $primary-color;

frontend/components/Modals/AddSongToPlaylist.vue

@@ -130,7 +130,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "styles/global.scss";
+@import "scss/variables/colors.scss";
 
 .icon.is-small {
 	margin-right: 10px !important;

frontend/components/Modals/AddSongToQueue.vue

@@ -208,7 +208,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "styles/global.scss";
+@import "scss/variables/colors.scss";
 
 tr td {
 	vertical-align: middle;

frontend/components/Modals/EditNews.vue

@@ -226,7 +226,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "styles/global.scss";
+@import "scss/variables/colors.scss";
 
 input[type="range"] {
 	-webkit-appearance: none;

frontend/components/Modals/EditSong.vue

@@ -1267,7 +1267,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import "styles/global.scss";
+@import "scss/variables/colors.scss";
 
 #genre-helper-container {
 	background-color: white;
@@ -1318,7 +1318,7 @@ export default {
 </style>
 
 <style lang="scss" scoped>
-@import "styles/global.scss";
+@import "scss/variables/colors.scss";
 .modal-card-body > div {
 	display: flex;
 	height: 100%;

frontend/components/Modals/EditStation.vue

@@ -314,7 +314,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "styles/global.scss";
+@import "scss/variables/colors.scss";
 
 .controls {
 	display: flex;

frontend/components/Modals/EditUser.vue

@@ -215,7 +215,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "styles/global.scss";
+@import "scss/variables/colors.scss";
 
 .save-changes {
 	color: $white;

frontend/components/Modals/IssuesModal.vue

@@ -96,7 +96,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import "styles/global.scss";
+@import "scss/variables/colors.scss";
 
 .back-to-song {
 	display: flex;

frontend/components/Modals/Login.vue

@@ -122,7 +122,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "styles/global.scss";
+@import "scss/variables/colors.scss";
 
 .button.is-github {
 	background-color: $dark-grey-2;

frontend/components/Modals/MobileAlert.vue

@@ -47,7 +47,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "styles/global.scss";
+@import "scss/variables/colors.scss";
 
 @media (min-width: 735px) {
 	.modal {

frontend/components/Modals/Playlists/Create.vue

@@ -80,7 +80,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "styles/global.scss";
+@import "scss/variables/colors.scss";
 
 .menu {
 	padding: 0 20px;

frontend/components/Modals/Playlists/Edit.vue

@@ -371,7 +371,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "styles/global.scss";
+@import "scss/variables/colors.scss";
 
 .menu {
 	padding: 0 20px;

frontend/components/Modals/Register.vue

@@ -148,7 +148,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "styles/global.scss";
+@import "scss/variables/colors.scss";
 
 .button.is-github {
 	background-color: $dark-grey-2;
@@ -176,7 +176,7 @@ a {
 </style>
 
 <style lang="scss">
-@import "styles/global.scss";
+@import "scss/variables/colors.scss";
 
 .grecaptcha-badge {
 	z-index: 2000;

frontend/components/Modals/Report.vue

@@ -263,7 +263,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "styles/global.scss";
+@import "scss/variables/colors.scss";
 
 h6 {
 	margin-bottom: 15px;

frontend/components/Modals/WhatIsNew.vue

@@ -131,7 +131,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "styles/global.scss";
+@import "scss/variables/colors.scss";
 
 .modal-card-head {
 	border-bottom: none;

frontend/components/Sidebars/Playlist.vue

@@ -139,7 +139,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "styles/global.scss";
+@import "scss/variables/colors.scss";
 
 .sidebar {
 	position: fixed;

frontend/components/Sidebars/SongsList.vue

@@ -183,7 +183,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "styles/global.scss";
+@import "scss/variables/colors.scss";
 
 .sidebar {
 	position: fixed;

frontend/components/Sidebars/UsersList.vue

@@ -33,7 +33,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "styles/global.scss";
+@import "scss/variables/colors.scss";
 
 .sidebar {
 	position: fixed;

frontend/components/Station/Station.vue

@@ -1234,7 +1234,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import "styles/global.scss";
+@import "scss/variables/colors.scss";
 
 .player-can-not-autoplay {
 	position: absolute;

frontend/components/Station/StationHeader.vue

@@ -275,7 +275,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "styles/global.scss";
+@import "scss/variables/colors.scss";
 
 .nav {
 	background-color: $primary-color;

frontend/components/User/ResetPassword.vue

@@ -140,7 +140,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "styles/global.scss";
+@import "scss/variables/colors.scss";
 
 .container {
 	padding: 25px;

frontend/components/User/Settings.vue

@@ -355,7 +355,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "styles/global.scss";
+@import "scss/variables/colors.scss";
 
 .container {
 	padding: 25px;

frontend/components/User/Show.vue

@@ -125,7 +125,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "styles/global.scss";
+@import "scss/variables/colors.scss";
 
 .container {
 	padding: 25px;

frontend/components/pages/About.vue

@@ -78,7 +78,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "styles/global.scss";
+@import "scss/variables/colors.scss";
 
 .card {
 	margin-top: 50px;

frontend/components/pages/Admin.vue

@@ -159,7 +159,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "styles/global.scss";
+@import "scss/variables/colors.scss";
 
 .tabs {
 	background-color: $white;

frontend/components/pages/Banned.vue

@@ -27,7 +27,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "styles/global.scss";
+@import "scss/variables/colors.scss";
 
 .container {
 	display: flex;

frontend/components/pages/Home.vue

@@ -307,7 +307,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import "styles/global.scss";
+@import "scss/variables/colors.scss";
 
 * {
 	box-sizing: border-box;

frontend/components/pages/News.vue

@@ -125,7 +125,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "styles/global.scss";
+@import "scss/variables/colors.scss";
 
 .card {
 	margin-top: 50px;

frontend/components/pages/Team.vue

@@ -203,7 +203,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "styles/global.scss";
+@import "scss/variables/colors.scss";
 
 li a {
 	color: dodgerblue;

frontend/main.js

@@ -6,6 +6,8 @@ import store from "./store";
 import App from "./App.vue";
 import io from "./io";
 
+import "./scss/global.scss";
+
 const handleMetadata = attrs => {
 	document.title = `Musare | ${attrs.title}`;
 };

frontend/scss/global.scss

@@ -0,0 +1,176 @@
+@import 'variables/colors.scss';
+
+html {
+	overflow: auto !important;
+}
+
+body {
+	background-color: $light-grey;
+	color: $dark-grey;
+	font-family: "Roboto", Helvetica, Arial, sans-serif;
+}
+
+a {
+	color: $primary-color;
+	text-decoration: none;
+}
+
+.modal-card {
+	margin: 0 !important;
+}
+
+.absolute-a {
+	width: 100%;
+	height: 100%;
+	position: absolute;
+	top: 0;
+	left: 0;
+}
+
+.alert {
+	padding: 20px;
+	color: $white;
+	background-color: $red;
+	position: fixed;
+	top: 50px;
+	right: 50px;
+	font-size: 2em;
+	border-radius: 5px;
+	z-index: 10000000;
+}
+
+.tooltip {
+	position: relative;
+
+	&:after {
+		position: absolute;
+		min-width: 80px;
+		margin-left: -75%;
+		text-align: center;
+		padding: 7.5px 6px;
+		border-radius: 2px;
+		background-color: $dark-grey;
+		font-size: 0.9em;
+		color: $white;
+		content: attr(data-tooltip);
+		opacity: 0;
+		transition: all 0.2s ease-in-out 0.1s;
+		visibility: hidden;
+	}
+
+	&:hover:after {
+		opacity: 1;
+		visibility: visible;
+	}
+}
+
+.tooltip-top {
+	&:after {
+		bottom: 150%;
+	}
+
+	&:hover {
+		&:after {
+			bottom: 120%;
+		}
+	}
+}
+
+.tooltip-bottom {
+	&:after {
+		top: 155%;
+	}
+
+	&:hover {
+		&:after {
+			top: 125%;
+		}
+	}
+}
+
+.tooltip-left {
+	&:after {
+		bottom: -10px;
+		right: 130%;
+		min-width: 100px;
+	}
+
+	&:hover {
+		&:after {
+			right: 110%;
+		}
+	}
+}
+
+.tooltip-right {
+	&:after {
+		bottom: -10px;
+		left: 190%;
+		min-width: 100px;
+	}
+
+	&:hover {
+		&:after {
+			left: 200%;
+		}
+	}
+}
+
+.button:focus,
+.button:active {
+	border-color: #dbdbdb !important;
+}
+.input:focus,
+.input:active {
+	border-color: $primary-color !important;
+}
+button.delete:focus {
+	background-color: rgba(10, 10, 10, 0.3);
+}
+
+.tag {
+	padding-right: 6px !important;
+}
+
+.button {
+	&.is-success {
+		background-color: $green !important;
+
+		&:hover,
+		&:focus {
+			background-color: darken($green, 5%) !important;
+		}
+	}
+	&.is-primary {
+		background-color: $primary-color !important;
+
+		&:hover,
+		&:focus {
+			background-color: darken($primary-color, 5%) !important;
+		}
+	}
+	&.is-danger {
+		background-color: $red !important;
+
+		&:hover,
+		&:focus {
+			background-color: darken($red, 5%) !important;
+		}
+	}
+	&.is-info {
+		background-color: $blue !important;
+
+		&:hover,
+		&:focus {
+			background-color: darken($blue, 5%) !important;
+		}
+	}
+}
+
+.center {
+	text-align: center;
+}
+
+#toast-container {
+	z-index: 10000 !important;
+}

frontend/styles/global.scss

@@ -1 +0,0 @@
-@import 'colors.scss';