From ec9848091761a06eeda02bc70479c6ba9c609015 Mon Sep 17 00:00:00 2001
From: Oliver-Akins <Tyler.Akins1999@gmail.com>
Date: Mon, 5 Oct 2020 22:46:54 -0600
Subject: [PATCH] Convert all Stylus into CSS and add CSS var def file

---
 src/App.vue                    | 104 +++++++++++++++++----------------
 src/css/colours.css            |  67 +++++++++++++++++++++
 src/views/GameCode.vue         |  54 ++++++++---------
 src/views/JoinHost.vue         |  12 ++--
 src/views/WebsocketTesting.vue |  31 +++-------
 5 files changed, 158 insertions(+), 110 deletions(-)
 create mode 100644 src/css/colours.css

diff --git a/src/App.vue b/src/App.vue
index d5ef9c1..78653d3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -95,88 +95,92 @@ export default {
 }
 </script>
 
-<style lang="stylus">
-@import "theme.styl"
-@import "./css/animations.css"
+<style>
+@import "./css/colours.css";
+@import "./css/animations.css";
 
 html, body, #app {
-	font-family: $fonts
-	font-style: normal
-	overflow: hidden
-	padding: 0
-	margin: 0
+	font-family: var(--fonts);
+	font-style: normal;
+	overflow: hidden;
+	padding: 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
-	color: $main-text-colour
-	height: 100vh
-	width: 100vw
+	background-color: var(--main-background-colour);
+	color: var(--main-text-colour);
+	height: 100vh;
+	width: 100vw;
+}
 
-	div {
-		margin: 0 auto
-	}
+#app > div {
+	margin: 0 auto;
 }
 
 .alert-bar {
-	justify-content: center
-	position: absolute
-	display: flex
-	padding: 3px
-	width: 100vw
-	z-index: 1
-	left: 0
-	top: 0
+	justify-content: center;
+	position: absolute;
+	display: flex;
+	padding: 3px;
+	width: 100vw;
+	z-index: 1;
+	left: 0;
+	top: 0;
 }
 
 .alert-bar.error {
-	background-color: $error-background-colour
-	color: $error-text-colour
+	background-color: var(--error-background-colour);
+	color: var(--error-text-colour);
 }
 .alert-bar.warning {
-	background-color: $warning-background-colour
-	color: $warning-text-colour
+	background-color: var(--warning-background-colour);
+	color: var(--warning-text-colour);
 }
 .alert-bar.info {
-	background-color: $info-background-colour
-	color: $info-text-colour
+	background-color: var(info-background-colour);
+	color: var(info-text-colour);
 }
 
-.input {
-	background-color: $input-background
-	border-radius: $input-border-radius
-	border-color: $input-border-colour
-	border-width: $input-border-width
-	border-style: solid
-	text-align: center
-	padding: 10px 15px
-	color: $input-text
-	outline: none
+input[type="text"], button {
+	background-color: var(--input-background);
+	border-radius: var(--input-border-radius);
+	border-color: var(--input-border-colour);
+	border-width: var(--input-border-width);
+	color: var(--input-text);
+	border-style: solid;
+	text-align: center;
+	padding: 10px 15px;
+	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
-	font-family: $fonts
-	letter-spacing: $input-letter-spacing
+	letter-spacing: var(--input-letter-spacing);
+	font-family: var(--fonts);
 	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>
\ No newline at end of file
diff --git a/src/css/colours.css b/src/css/colours.css
new file mode 100644
index 0000000..436308b
--- /dev/null
+++ b/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);
+	/***********************************************************/
+}
\ No newline at end of file
diff --git a/src/views/GameCode.vue b/src/views/GameCode.vue
index 6caff66..b9bdd5b 100644
--- a/src/views/GameCode.vue
+++ b/src/views/GameCode.vue
@@ -71,40 +71,32 @@ export default {
 }
 </script>
 
-<style lang="stylus">
-@import "../theme.styl"
+<style>
+@import "../css/colours.css";
 
 #game_code_entry {
-	text-align: center
-	margin: 0 auto
-	height: 100vh
-	width: 50vw
-	color: $main-text-colour
-
-	h1, h3 {
-		letter-spacing: $title-letter-spacing
-	}
-
-	p {
-		letter-spacing: $body-letter-spacing
-	}
-
-	@media screen and (max-width: 600px) {
-		width: 90vw
-	}
+	color: var(--main-text-colour);
+	text-align: center;
+	margin: 0 auto;
+	height: 100vh;
+	width: 50vw;
 }
-</style>
-<style lang="stylus" scoped>
-@import "../theme.styl"
 
-#game_code_entry {
-	label {
-		font-size: 1.2em
-	}
-	input[type="text"] {
-		margin-bottom: 10px
-		margin-left: 10px
-		text-align: left
-	}
+#game_code_entry p {
+	letter-spacing: var(--body-letter-spacing);
+}
+
+#game_code_entry label {
+	font-size: 1.2em
+}
+
+#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>
\ No newline at end of file
diff --git a/src/views/JoinHost.vue b/src/views/JoinHost.vue
index a5cb6e9..4d623b4 100644
--- a/src/views/JoinHost.vue
+++ b/src/views/JoinHost.vue
@@ -57,16 +57,16 @@ export default {
 }
 </script>
 
-<style lang="stylus" scoped>
-@import "../theme.styl"
+<style scoped>
+@import "../css/colours.css";
 
 #game_type_choice {
-	text-align: center
-	width: 50vw
+	text-align: center;
+	width: 50vw;
 }
 
 button {
-	width: 100%
-	margin: 5px
+	width: 100%;
+	margin: 5px;
 }
 </style>
\ No newline at end of file
diff --git a/src/views/WebsocketTesting.vue b/src/views/WebsocketTesting.vue
index a320b45..62cbe7c 100644
--- a/src/views/WebsocketTesting.vue
+++ b/src/views/WebsocketTesting.vue
@@ -159,33 +159,18 @@ export default {
 }
 </script>
 
-<style lang="stylus">
-@import "../theme.styl"
+<style scoped>
+@import "../css/colours.css";
 
 #websocket_entry {
-	text-align: center
-	margin: 0 auto
-	height: 100vh
-	width: 100vw
-	color: $main-text-colour
-
-	h1, h3 {
-		letter-spacing: $title-letter-spacing
-	}
-
-	p {
-		letter-spacing: $body-letter-spacing
-	}
-
-	@media screen and (max-width: 600px) {
-		width: 100vw
-	}
+	text-align: center;
+	margin: 0 auto;
+	height: 100vh;
+	width: 100vw;
+	color: var(--main-text-colour);
 }
-</style>
-<style lang="stylus" scoped>
-@import "../theme.styl"
 
 input[type="text"] {
-	margin-bottom: 10px
+	margin-bottom: 10px;
 }
 </style>
\ No newline at end of file