Convert all Stylus into CSS and add CSS var def file

src/App.vue

@@ -95,88 +95,92 @@ export default {
 }
 </script>
 
-<style lang="stylus">
+<style>
-@import "theme.styl"
+@import "./css/colours.css";
-@import "./css/animations.css"
+@import "./css/animations.css";
 
 html, body, #app {
-	font-family: $fonts
+	font-family: var(--fonts);
-	font-style: normal
+	font-style: normal;
-	overflow: hidden
+	overflow: hidden;
-	padding: 0
+	padding: 0;
-	margin: 0
+	margin: 0;
+}
+
+h1, h2, h3 {
+	letter-spacing: var(--title-letter-spacing);
+}
+
+p {
+	letter-spacing: var(--body-letter-spacing);
 }
 
 #app {
-	background-color: $main-background-colour
+	background-color: var(--main-background-colour);
-	color: $main-text-colour
+	color: var(--main-text-colour);
-	height: 100vh
+	height: 100vh;
-	width: 100vw
+	width: 100vw;
+}
 
-	div {
+#app > div {
-		margin: 0 auto
+	margin: 0 auto;
-	}
 }
 
 .alert-bar {
-	justify-content: center
+	justify-content: center;
-	position: absolute
+	position: absolute;
-	display: flex
+	display: flex;
-	padding: 3px
+	padding: 3px;
-	width: 100vw
+	width: 100vw;
-	z-index: 1
+	z-index: 1;
-	left: 0
+	left: 0;
-	top: 0
+	top: 0;
 }
 
 .alert-bar.error {
-	background-color: $error-background-colour
+	background-color: var(--error-background-colour);
-	color: $error-text-colour
+	color: var(--error-text-colour);
 }
 .alert-bar.warning {
-	background-color: $warning-background-colour
+	background-color: var(--warning-background-colour);
-	color: $warning-text-colour
+	color: var(--warning-text-colour);
 }
 .alert-bar.info {
-	background-color: $info-background-colour
+	background-color: var(info-background-colour);
-	color: $info-text-colour
+	color: var(info-text-colour);
 }
 
-.input {
+input[type="text"], button {
-	background-color: $input-background
+	background-color: var(--input-background);
-	border-radius: $input-border-radius
+	border-radius: var(--input-border-radius);
-	border-color: $input-border-colour
+	border-color: var(--input-border-colour);
-	border-width: $input-border-width
+	border-width: var(--input-border-width);
-	border-style: solid
+	color: var(--input-text);
-	text-align: center
+	border-style: solid;
-	padding: 10px 15px
+	text-align: center;
-	color: $input-text
+	padding: 10px 15px;
-	outline: none
+	outline: none;
 }
 
-input[type="text"] {
-	@extend .input
-}
 input[type="text"].warning {
-	border-color: $input-border-colour-warning
+	border-color: var(--input-border-colour-warning);
 }
 input[type="text"].error {
-	border-color: $input-border-colour-error
+	border-color: var(--input-border-colour-error);
 }
 input[type="text"]:focus {
-	border-color: $input-border-colour-focus
+	border-color: var(--input-border-colour-focus);
 }
 
 button {
-	@extend .input
+	letter-spacing: var(--input-letter-spacing);
-	font-family: $fonts
+	font-family: var(--fonts);
-	letter-spacing: $input-letter-spacing
 	font-size: 17px
 }
 button:hover {
-	background-color: $input-background-hover
+	background-color: var(--input-background-hover);
 }
 button:active {
-	background-color: $input-background-active
+	background-color: var(--input-background-active);
 }
 </style>

src/css/colours.css

@@ -0,0 +1,67 @@
+/* Import all the fonts and whatnot */
+@import url("https://fonts.googleapis.com/css2?family=Germania+One&display=swap");
+
+:root {
+	--fonts: 'Germania One', sans-serif;
+
+	/* General Colours */
+	--facist-red: #9d5757;
+	--liberal-blue: #6592bc;
+
+	--title-letter-spacing: 2px;
+	--body-letter-spacing: 1px;
+
+	/***********************************************************/
+	/* Card Colours */
+	--main-background-colour: #23272A;
+	--main-text-colour: #99AAB5;
+
+	--card-background-colour: #23272A;
+	--card-text-colour: var(--main-text-colour);;
+
+	--on-card-background-colour: #2C2F33;
+	--on-card-text-colour: var(--main-text-colour);
+	/***********************************************************/
+
+	--error-background-colour: #FF0000;
+	--error-text-colour: white;
+
+	--warning-background-colour: #DBB400;
+	--warning-text-colour: black;
+
+	--info-background-colour: #7289DA;
+	--info-text-colour: black;
+
+	/***********************************************************/
+	/* Styling for inputs (not all input types use all values) */
+
+	/* general */
+	--input-letter-spacing: 1px;
+	--input-border-width: 2px;
+	--input-border-radius: 7px;
+
+	/* background colours */
+	--input-background: var(--on-card-background-colour);
+	--input-background-hover: #424242;
+	--input-background-active: #4a4a4a;
+	--input-background-focus: var(--input-background);
+	--input-background-warning: var(--input-background);
+	--input-background-error: var(--input-background);
+
+	/* font colours */
+	--input-text: var(--main-text-colour);
+	--input-text-hover: var(--input-text);
+	--input-text-active: var(--input-text);
+	--input-text-focus: var(--input-text);
+	--input-text-warning: var(--input-text);
+	--input-text-error: var(--input-text);
+
+	/* border colours */
+	--input-border-colour: transparent;
+	--input-border-colour-hover: transparent;
+	--input-border-colour-active: transparent;
+	--input-border-colour-focus: var(--liberal-blue);
+	--input-border-colour-warning: transparent;
+	--input-border-colour-error: var(--fascist-red);
+	/***********************************************************/
+}

src/views/GameCode.vue

@@ -71,40 +71,32 @@ export default {
 }
 </script>
 
-<style lang="stylus">
+<style>
-@import "../theme.styl"
+@import "../css/colours.css";
 
 #game_code_entry {
-	text-align: center
+	color: var(--main-text-colour);
-	margin: 0 auto
+	text-align: center;
-	height: 100vh
+	margin: 0 auto;
-	width: 50vw
+	height: 100vh;
-	color: $main-text-colour
+	width: 50vw;
-
-	h1, h3 {
-		letter-spacing: $title-letter-spacing
-	}
-
-	p {
-		letter-spacing: $body-letter-spacing
-	}
-
-	@media screen and (max-width: 600px) {
-		width: 90vw
-	}
 }
-</style>
-<style lang="stylus" scoped>
-@import "../theme.styl"
 
-#game_code_entry {
+#game_code_entry p {
-	label {
+	letter-spacing: var(--body-letter-spacing);
-		font-size: 1.2em
+}
-	}
+
-	input[type="text"] {
+#game_code_entry label {
-		margin-bottom: 10px
+	font-size: 1.2em
-		margin-left: 10px
+}
-		text-align: left
+
-	}
+#game_code_entry input[type="text"] {
+	margin-bottom: 10px;
+	margin-left: 10px;
+	text-align: left;
+}
+
+@media screen and (max-width: 600px) {
+	#game_code_entry { width: 90vw; }
 }
 </style>

src/views/JoinHost.vue

@@ -57,16 +57,16 @@ export default {
 }
 </script>
 
-<style lang="stylus" scoped>
+<style scoped>
-@import "../theme.styl"
+@import "../css/colours.css";
 
 #game_type_choice {
-	text-align: center
+	text-align: center;
-	width: 50vw
+	width: 50vw;
 }
 
 button {
-	width: 100%
+	width: 100%;
-	margin: 5px
+	margin: 5px;
 }
 </style>

src/views/WebsocketTesting.vue

@@ -159,33 +159,18 @@ export default {
 }
 </script>
 
-<style lang="stylus">
+<style scoped>
-@import "../theme.styl"
+@import "../css/colours.css";
 
 #websocket_entry {
-	text-align: center
+	text-align: center;
-	margin: 0 auto
+	margin: 0 auto;
-	height: 100vh
+	height: 100vh;
-	width: 100vw
+	width: 100vw;
-	color: $main-text-colour
+	color: var(--main-text-colour);
-
-	h1, h3 {
-		letter-spacing: $title-letter-spacing
-	}
-
-	p {
-		letter-spacing: $body-letter-spacing
-	}
-
-	@media screen and (max-width: 600px) {
-		width: 100vw
-	}
 }
-</style>
-<style lang="stylus" scoped>
-@import "../theme.styl"
 
 input[type="text"] {
-	margin-bottom: 10px
+	margin-bottom: 10px;
 }
 </style>