refactor: added ability to add global style variables, added primary color for now

frontend/App.vue

@@ -113,6 +113,8 @@ export default {
 </script>
 
 <style lang="scss">
+@import "styles/global.scss";
+
 .center {
 	text-align: center;
 }
@@ -232,7 +234,7 @@ html {
 }
 .input:focus,
 .input:active {
-	border-color: #03a9f4 !important;
+	border-color: $primary-color !important;
 }
 button.delete:focus {
 	background-color: rgba(10, 10, 10, 0.3);

frontend/components/404.vue

@@ -8,6 +8,8 @@
 </template>
 
 <style lang="scss" scoped>
+@import "styles/global.scss";
+
 * {
 	margin: 0;
 	padding: 0;

frontend/components/Admin/EditStation.vue

@@ -464,6 +464,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import "styles/global.scss";
+
 .controls {
 	display: flex;
 

frontend/components/Admin/News.vue

@@ -348,6 +348,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import "styles/global.scss";
+
 .tag:not(:last-child) {
 	margin-right: 5px;
 }
@@ -361,6 +363,6 @@ td {
 }
 
 .card-footer-item {
-	color: #03a9f4;
+	color: $primary-color;
 }
 </style>

frontend/components/Admin/Punishments.vue

@@ -172,6 +172,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import "styles/global.scss";
+
 body {
 	font-family: "Roboto", sans-serif;
 }

frontend/components/Admin/QueueSongs.vue

@@ -212,6 +212,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import "styles/global.scss";
+
 .optionsColumn {
 	width: 140px;
 	button {

frontend/components/Admin/Reports.vue

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

frontend/components/Admin/Songs.vue

@@ -202,6 +202,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import "styles/global.scss";
+
 body {
 	font-family: "Roboto", sans-serif;
 }

frontend/components/Admin/Stations.vue

@@ -329,6 +329,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import "styles/global.scss";
+
 .tag {
 	margin-top: 5px;
 	&:not(:last-child) {

frontend/components/Admin/Statistics.vue

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

frontend/components/Admin/Users.vue

@@ -105,6 +105,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import "styles/global.scss";
+
 body {
 	font-family: "Roboto", sans-serif;
 }

frontend/components/MainFooter.vue

@@ -82,6 +82,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import "styles/global.scss";
+
 .content a:not(.button) {
 	border: 0;
 }
@@ -123,15 +125,15 @@ export default {
 
 	.footerLinks {
 		:not(:last-child) {
-			border-right: solid 1px #03a9f4;
+			border-right: solid 1px $primary-color;
 		}
 		a {
 			padding: 0 5px;
 			font-size: 18px;
-			color: #03a9f4;
+			color: $primary-color;
 		}
 		a:hover {
-			color: #03a9f4;
+			color: $primary-color;
 			text-decoration: underline;
 		}
 	}

frontend/components/MainHeader.vue

@@ -108,8 +108,10 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import "styles/global.scss";
+
 .nav {
-	background-color: #03a9f4;
+	background-color: $primary-color;
 	height: 64px;
 	border-radius: 0% 0% 33% 33% / 0% 0% 7% 7%;
 

frontend/components/Modals/AddSongToPlaylist.vue

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

frontend/components/Modals/AddSongToQueue.vue

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

frontend/components/Modals/EditNews.vue

@@ -201,6 +201,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import "styles/global.scss";
+
 input[type="range"] {
 	-webkit-appearance: none;
 	width: 100%;
@@ -227,7 +229,7 @@ input[type="range"]::-webkit-slider-thumb {
 	height: 19px;
 	width: 19px;
 	border-radius: 15px;
-	background: #03a9f4;
+	background: $primary-color;
 	cursor: pointer;
 	-webkit-appearance: none;
 	margin-top: -6.5px;
@@ -249,7 +251,7 @@ input[type="range"]::-moz-range-thumb {
 	height: 19px;
 	width: 19px;
 	border-radius: 15px;
-	background: #03a9f4;
+	background: $primary-color;
 	cursor: pointer;
 	-webkit-appearance: none;
 	margin-top: -6.5px;
@@ -284,7 +286,7 @@ input[type="range"]::-ms-thumb {
 	height: 15px;
 	width: 15px;
 	border-radius: 15px;
-	background: #03a9f4;
+	background: $primary-color;
 	cursor: pointer;
 	-webkit-appearance: none;
 	margin-top: 1.5px;

frontend/components/Modals/EditSong.vue

@@ -702,6 +702,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import "styles/global.scss";
+
 input[type="range"] {
 	-webkit-appearance: none;
 	width: 100%;
@@ -728,7 +730,7 @@ input[type="range"]::-webkit-slider-thumb {
 	height: 19px;
 	width: 19px;
 	border-radius: 15px;
-	background: #03a9f4;
+	background: $primary-color;
 	cursor: pointer;
 	-webkit-appearance: none;
 	margin-top: -6.5px;
@@ -750,7 +752,7 @@ input[type="range"]::-moz-range-thumb {
 	height: 19px;
 	width: 19px;
 	border-radius: 15px;
-	background: #03a9f4;
+	background: $primary-color;
 	cursor: pointer;
 	-webkit-appearance: none;
 	margin-top: -6.5px;
@@ -785,7 +787,7 @@ input[type="range"]::-ms-thumb {
 	height: 15px;
 	width: 15px;
 	border-radius: 15px;
-	background: #03a9f4;
+	background: $primary-color;
 	cursor: pointer;
 	-webkit-appearance: none;
 	margin-top: 1.5px;

frontend/components/Modals/EditStation.vue

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

frontend/components/Modals/EditUser.vue

@@ -215,6 +215,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import "styles/global.scss";
+
 .save-changes {
 	color: #fff;
 }

frontend/components/Modals/IssuesModal.vue

@@ -96,6 +96,8 @@ export default {
 </script>
 
 <style lang="scss">
+@import "styles/global.scss";
+
 .back-to-song {
 	display: flex;
 	margin-bottom: 20px;

frontend/components/Modals/Login.vue

@@ -114,6 +114,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import "styles/global.scss";
+
 .button.is-github {
 	background-color: #333;
 	color: #fff !important;

frontend/components/Modals/MobileAlert.vue

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

frontend/components/Modals/Playlists/Create.vue

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

frontend/components/Modals/Playlists/Edit.vue

@@ -373,6 +373,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import "styles/global.scss";
+
 .menu {
 	padding: 0 20px;
 }

frontend/components/Modals/Register.vue

@@ -145,6 +145,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import "styles/global.scss";
+
 .button.is-github {
 	background-color: #333;
 	color: #fff !important;
@@ -171,6 +173,8 @@ a {
 </style>
 
 <style lang="scss">
+@import "styles/global.scss";
+
 .grecaptcha-badge {
 	z-index: 2000;
 }

frontend/components/Modals/Report.vue

@@ -266,6 +266,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import "styles/global.scss";
+
 h6 {
 	margin-bottom: 15px;
 }
@@ -303,6 +305,6 @@ h6 {
 }
 
 .is-highlight-active {
-	border: 3px #03a9f4 solid;
+	border: 3px $primary-color solid;
 }
 </style>

frontend/components/Modals/WhatIsNew.vue

@@ -129,6 +129,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import "styles/global.scss";
+
 .modal-card-head {
 	border-bottom: none;
 	background-color: ghostwhite;

frontend/components/Sidebars/Playlist.vue

@@ -134,6 +134,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import "styles/global.scss";
+
 .sidebar {
 	position: fixed;
 	z-index: 1;

frontend/components/Sidebars/SongsList.vue

@@ -182,6 +182,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import "styles/global.scss";
+
 .sidebar {
 	position: fixed;
 	z-index: 1;

frontend/components/Sidebars/UsersList.vue

@@ -22,6 +22,8 @@
 </template>
 
 <style lang="scss" scoped>
+@import "styles/global.scss";
+
 .sidebar {
 	position: fixed;
 	z-index: 1;

frontend/components/Station/CommunityHeader.vue

@@ -249,8 +249,10 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import "styles/global.scss";
+
 .nav {
-	background-color: #03a9f4;
+	background-color: $primary-color;
 	line-height: 64px;
 	border-radius: 0% 0% 33% 33% / 0% 0% 7% 7%;
 
@@ -337,7 +339,7 @@ a.nav-item.is-tab:hover {
 .nav-center {
 	display: flex;
 	align-items: center;
-	color: #03a9f4;
+	color: $primary-color;
 	font-size: 22px;
 	position: absolute;
 	margin: auto;
@@ -347,7 +349,7 @@ a.nav-item.is-tab:hover {
 }
 
 .nav-right.is-active .nav-item {
-	background: #03a9f4;
+	background: $primary-color;
 	border: 0;
 }
 
@@ -358,7 +360,7 @@ a.nav-item.is-tab:hover {
 	left: 0;
 	width: 64px;
 	height: 100vh;
-	background-color: #03a9f4;
+	background-color: $primary-color;
 	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16),
 		0 2px 10px 0 rgba(0, 0, 0, 0.12);
 

frontend/components/Station/OfficialHeader.vue

@@ -262,8 +262,10 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import "styles/global.scss";
+
 .nav {
-	background-color: #03a9f4;
+	background-color: $primary-color;
 	line-height: 64px;
 	border-radius: 0% 0% 33% 33% / 0% 0% 7% 7%;
 
@@ -350,7 +352,7 @@ a.nav-item.is-tab:hover {
 .nav-center {
 	display: flex;
 	align-items: center;
-	color: #03a9f4;
+	color: $primary-color;
 	font-size: 22px;
 	position: absolute;
 	margin: auto;
@@ -360,7 +362,7 @@ a.nav-item.is-tab:hover {
 }
 
 .nav-right.is-active .nav-item {
-	background: #03a9f4;
+	background: $primary-color;
 	border: 0;
 }
 
@@ -375,7 +377,7 @@ a.nav-item.is-tab:hover {
 	left: 0;
 	width: 64px;
 	height: 100vh;
-	background-color: #03a9f4;
+	background-color: $primary-color;
 	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16),
 		0 2px 10px 0 rgba(0, 0, 0, 0.12);
 

frontend/components/Station/Station.vue

@@ -1237,6 +1237,8 @@ export default {
 </script>
 
 <style lang="scss">
+@import "styles/global.scss";
+
 .player-can-not-autoplay {
 	position: absolute;
 	width: 100%;
@@ -1263,7 +1265,7 @@ export default {
 }
 
 .no-song {
-	color: #03a9f4;
+	color: $primary-color;
 	text-align: center;
 }
 
@@ -1456,7 +1458,7 @@ export default {
 		height: 19px;
 		width: 19px;
 		border-radius: 15px;
-		background: #03a9f4;
+		background: $primary-color;
 		cursor: pointer;
 		-webkit-appearance: none;
 		margin-top: -6.5px;
@@ -1478,7 +1480,7 @@ export default {
 		height: 19px;
 		width: 19px;
 		border-radius: 15px;
-		background: #03a9f4;
+		background: $primary-color;
 		cursor: pointer;
 		-webkit-appearance: none;
 		margin-top: -6.5px;
@@ -1513,7 +1515,7 @@ export default {
 		height: 15px;
 		width: 15px;
 		border-radius: 15px;
-		background: #03a9f4;
+		background: $primary-color;
 		cursor: pointer;
 		-webkit-appearance: none;
 		margin-top: 1.5px;
@@ -1667,7 +1669,7 @@ h6 {
 }
 
 .light-blue {
-	background-color: #03a9f4 !important;
+	background-color: $primary-color !important;
 }
 
 .white {
@@ -1719,7 +1721,7 @@ h6 {
 .progress {
 	width: 50px;
 	animation: rotate 0.8s infinite linear;
-	border: 8px solid #03a9f4;
+	border: 8px solid $primary-color;
 	border-right-color: transparent;
 	height: 50px;
 	position: absolute;

frontend/components/User/ResetPassword.vue

@@ -139,6 +139,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import "styles/global.scss";
+
 .container {
 	padding: 25px;
 }

frontend/components/User/Settings.vue

@@ -350,6 +350,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import "styles/global.scss";
+
 .container {
 	padding: 25px;
 }

frontend/components/User/Show.vue

@@ -123,6 +123,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import "styles/global.scss";
+
 .container {
 	padding: 25px;
 }

frontend/components/pages/About.vue

@@ -77,6 +77,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import "styles/global.scss";
+
 .card {
 	margin-top: 50px;
 }

frontend/components/pages/Admin.vue

@@ -168,6 +168,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import "styles/global.scss";
+
 .tabs {
 	background-color: #ffffff;
 	.queueSongs {
@@ -175,8 +177,8 @@ export default {
 		border-color: #00d1b2;
 	}
 	.songs {
-		color: #03a9f4;
-		border-color: #03a9f4;
+		color: $primary-color;
+		border-color: $primary-color;
 	}
 	.stations {
 		color: #90298c;

frontend/components/pages/Banned.vue

@@ -27,6 +27,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import "styles/global.scss";
+
 .container {
 	display: flex;
 	justify-content: center;

frontend/components/pages/Home.vue

@@ -283,6 +283,8 @@ export default {
 </script>
 
 <style lang="scss">
+@import "styles/global.scss";
+
 * {
 	box-sizing: border-box;
 }
@@ -338,7 +340,7 @@ html {
 
 	.official {
 		font-size: 18px;
-		color: #03a9f4;
+		color: $primary-color;
 		position: relative;
 		top: -5px;
 
@@ -354,10 +356,10 @@ html {
 		font-size: 15px;
 
 		.host {
-			color: #03a9f4;
+			color: $primary-color;
 
 			a {
-				color: #03a9f4;
+				color: $primary-color;
 			}
 		}
 	}
@@ -425,7 +427,7 @@ html {
 }
 
 .community-button:hover {
-	color: #03a9f4;
+	color: $primary-color;
 }
 
 .station-privacy {

frontend/components/pages/News.vue

@@ -122,6 +122,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import "styles/global.scss";
+
 .card {
 	margin-top: 50px;
 }

frontend/components/pages/Team.vue

@@ -202,6 +202,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@import "styles/global.scss";
+
 li a {
 	color: dodgerblue;
 	border-bottom: 0 !important;

frontend/styles/global.scss

@@ -0,0 +1,4 @@
+$primary-color: #03a9f4;
+
+
+

frontend/webpack.dev.js

@@ -12,7 +12,8 @@ module.exports = merge(common, {
 	},
 	resolve: {
 		alias: {
-			vue: "vue/dist/vue.js"
+			vue: "vue/dist/vue.js",
+			styles: "styles"
 		}
 	},
 	devServer: {

frontend/webpack.prod.js

@@ -9,7 +9,8 @@ module.exports = merge(common, {
 	},
 	resolve: {
 		alias: {
-			vue: "vue/dist/vue.min.js"
+			vue: "vue/dist/vue.min.js",
+			styles: "styles"
 		}
 	}
 });