css magic so errors and loading look similiar

2 files changed, 9 insertions, 13 deletions

diff --git a/webAO/client.css b/webAO/client.css
index ae9de3b..c3bff7e 100644
--- a/webAO/client.css
+++ b/webAO/client.css
@@ -36,25 +36,21 @@ img {
 	}
 }
 
-.error {
+#client_error {
 	position: absolute;
-	width: 50vw;
-	height: 25vh;
+	display: flex;
+	flex-direction: column;
 	top: 50%;
 	left: 50%;
 	margin-right: -50%;
 	transform: translate(-50%, -50%);
-	display: flex;
-	margin: 0 auto;
 	justify-content: center;
-	align-content: center;
 	align-items: center;
-	text-align: center;
-	background: #4e0e00;
+	background: #a00;
 	color: white;
-	font-size: x-large;
+	font-size: large;
 	animation: error_blink 3s ease-in-out infinite;
-	z-index: 3;
+	z-index: 100;
 }
 
 #client_loading {
@@ -69,7 +65,7 @@ img {
 	align-items: center;
 	background: black;
 	color: lightgreen;
-	font-size: 2em;
+	font-size: large;
 	z-index: 100;
 }
 
diff --git a/webAO/client.js b/webAO/client.js
index 3a501bf..b913139 100644
--- a/webAO/client.js
+++ b/webAO/client.js
@@ -400,7 +400,7 @@ class Client extends EventEmitter {
 	onClose(e) {
 		console.error(`The connection was closed: ${e.reason} (${e.code})`);
 		if (e.code !== 1001) {
-			document.getElementById("client_error").style.display = "block";
+			document.getElementById("client_error").style.display = "flex";
 			document.getElementById("client_loading").style.display = "none";
 			document.getElementById("error_id").textContent = e.code;
 			this.cleanup();
@@ -430,7 +430,7 @@ class Client extends EventEmitter {
 	 */
 	onError(e) {
 		console.error(`A network error occurred: ${e.reason} (${e.code})`);
-		document.getElementById("client_error").style.display = "block";
+		document.getElementById("client_error").style.display = "flex";
 		document.getElementById("client_loading").style.display = "none";
 		document.getElementById("error_id").textContent = e.code;
 		this.cleanup();