Create the Modal code / apply styling

web/src/components/Modal.vue

@@ -1,17 +1,45 @@
 <template>
-	<div></div>
+	<transition name="fade" @after-enter="content = true">
+		<div
+			v-if="show"
+			class="modal-container"
+			@click.self.stop="content = false"
+		>
+			<transition name="burst" @after-leave="$emit('close')">
+				<div v-if="content" class="modal">
+					<slot />
+				</div>
+			</transition>
+		</div>
+	</transition>
 </template>
 
 <script>
 export default {
-	name: ``,
+	name: `ModalAnimation`,
-	components: {},
+	props: {
-	computed: {},
+		show: {
-	methods: {},
+			required: true,
+			type: Boolean,
+		},
+	},
+	data() {return {
+		content: false,
+	}},
 }
 </script>
 
 <style>
 @import "css/theme.css";
 @import "css/style.css";
+@import "css/transitions.css";
+
+.modal-container {
+	background-color: var(--modal-background-blur);
+}
+
+.modal {
+	background-color: var(--modal-content-background);
+	color: var(--modal-content-text);
+}
 </style>

web/src/css/theme.css

@@ -48,7 +48,7 @@
 	/* The fill colour of the eyes on the game board */
 	--eye-colour: #000000;
 
-	/* The colour that is used to bring focus towards the modal */
+	/* The colours for the modals */
 	--modal-background-blur: #000;
 	--modal-content-background: var(--background1);
 	--modal-content-text: var(--background1-text);