CSS colours in one place + small modal dialog fix. (#169)

* Separate modal dialog's background into its own div with own opacity

* Use :root and CSS vars for colours

* An html.zip refresh

3 files changed, 53 insertions, 23 deletions

diff --git a/src/zenserver/frontend/html.zip b/src/zenserver/frontend/html.zip
index ab2383083..11e039bc8 100644
--- a/src/zenserver/frontend/html.zip
+++ b/src/zenserver/frontend/html.zip
diff --git a/src/zenserver/frontend/html/zen.css b/src/zenserver/frontend/html/zen.css
index 7f83c1102..9e6eb8f78 100644
--- a/src/zenserver/frontend/html/zen.css
+++ b/src/zenserver/frontend/html/zen.css
@@ -1,13 +1,30 @@
 /* page --------------------------------------------------------------------- */
 
+:root {
+	--theme_g0:	#000;
+	--theme_g1:	#555;
+	--theme_g2:	#999;
+	--theme_g3:	#f4f4f4;
+	--theme_g4:	#fff;
+
+	--theme_p0:	#069;
+	--theme_p1:	#58b;
+	--theme_p2:	#cce;
+	--theme_p3:	#dde;
+	--theme_p4:	#eef;
+
+	--theme_er:	#fcc;
+}
+
 body, input {
 	font-family:	consolas, monospace;
 	font-size:		11pt;
 }
 
 body {
-	overflow-y:		scroll;
-	margin:			0;
+	overflow-y:			scroll;
+	margin:				0;
+	background-color:	var(--theme_g4);
 }
 
 * {
@@ -29,11 +46,11 @@ body {
 .zen_action, a {
 	all:		unset;
 	cursor:		pointer;
-	color:		#069;
+	color:		var(--theme_p0);
 }
 
 .zen_action:hover, a:hover {
-	text-decoration:	underline #c88;
+	text-decoration:	underline var(--theme_p1);
 }
 
 /* sector ------------------------------------------------------------------- */
@@ -41,7 +58,7 @@ body {
 h1 {
 	font-size:		1.5em;
 	width:			100%;
-	border-bottom:	1px solid #ccc;
+	border-bottom:	1px solid var(--theme_g2);
 }
 
 h2 {
@@ -53,8 +70,8 @@ h3 {
 	font-size:			1.1em;
 	margin:				0em;
 	padding:			0.4em;
-	background-color:	#eef;
-	border-left:		5px solid #cce;
+	background-color:	var(--theme_p4);
+	border-left:		5px solid var(--theme_p2);
 	font-weight:		normal;
 }
 
@@ -71,7 +88,7 @@ h3 {
 .zen_table {
 	display:				grid;
 	grid-template-columns:	max-content repeat(calc(var(--zen_columns) - 1), 1fr);
-	border:					1px solid #aaa;
+	border:					1px solid var(--theme_g2);
 	border-left-style:		none;
 	margin-bottom:			1.2em;
 }
@@ -81,12 +98,12 @@ h3 {
 }
 
 .zen_table > .zen_row:nth-child(odd) > .zen_cell {
-	background-color: #f4f4f4;
+	background-color:	var(--theme_g3);
 }
 
 .zen_table > .zen_row:first-child > .zen_cell {
 	font-weight:		bold;
-	background-color:	#dde;
+	background-color:	var(--theme_p3);
 }
 
 .zen_table > .zen_row > .zen_cell {
@@ -94,7 +111,7 @@ h3 {
 	padding-left:		0.75em;
 	padding-right:		0.75em;
 	align-content:		center;
-	border-left:		1px solid #aaa;
+	border-left:		1px solid var(--theme_g2);
 }
 
 /* toolbar ------------------------------------------------------------------ */
@@ -115,7 +132,7 @@ h3 {
 }
 
 .zen_toolbar > div > .zen_toolbar_sep {
-	color:			#999;
+	color:			var(--theme_g2);
 }
 
 .zen_toolbar > div:last-child {
@@ -139,15 +156,26 @@ h3 {
 	left:				0;
 	width:				100%;
 	height:				100%;
-	background-color:	#0018;
 	display:			flex;
 	justify-content:	center;
 	align-items:		center;
 }
 
+.zen_modal .zen_modal_bg {
+	position:			absolute;
+	z-index:			-1;
+	top:				0;
+	left:				0;
+	width:				100%;
+	height:				100%;
+	background:			var(--theme_g0);
+	opacity:			0.5;
+}
+
 .zen_modal > div {
 	border-radius:		0.5em;
-	background-color:	white;
+	background-color:	var(--theme_g4);
+	opacity:			1.0;
 	width:				35em;
 	padding:			0em 2em 2em 2em;
 }
@@ -158,9 +186,9 @@ h3 {
 
 .zen_modal .zen_modal_title {
 	font-size:			1.2em;
-	border-bottom:		1px solid #ccc;
+	border-bottom:		1px solid var(--theme_g2);
 	padding:			1.2em 0em 0.5em 0em;
-	color:				#444;
+	color:				var(--theme_g1);
 }
 
 .zen_modal .zen_modal_buttons {
@@ -174,13 +202,13 @@ h3 {
 	padding:			1em;
 	align-content:		center;
 	border-radius:		0.3em;
-	background-color:	#dde;
+	background-color:	var(--theme_p3);
 	width:				6em;
 	cursor:				pointer;
 }
 
 .zen_modal .zen_modal_buttons > div:hover {
-	background-color:	#eef;
+	background-color:	var(--theme_p4);
 }
 
 .zen_modal .zen_modal_message {
@@ -216,14 +244,14 @@ h3 {
 	position:			fixed;
 	bottom:				0;
 	z-index:			1;
-	color:				#000;
-	background-color:	#fcc;
+	color:				var(--theme_g0);
+	background-color:	var(--theme_er);
 	padding:			1.0em 2em 2em 2em;
 	width:				100%;
-	border-top:			1px solid black;
+	border-top:			1px solid var(--theme_g0);
 }
 
 #error > pre:nth-child(2) {
 	font-size:	0.8em;
-	color:		#555;
+	color:		var(--theme_g1);
 };
diff --git a/src/zenserver/frontend/html/zen.js b/src/zenserver/frontend/html/zen.js
index 469d2f6f1..6bd74de0c 100644
--- a/src/zenserver/frontend/html/zen.js
+++ b/src/zenserver/frontend/html/zen.js
@@ -183,7 +183,9 @@ class Modal
 	{
 		const body = new Component(document.body);
 		this._root = body.tag().classify("zen_modal");
-		this._root.on("click", () => this._root.destroy());
+
+		const bg = this._root.tag().classify("zen_modal_bg");
+		bg.on("click", () => this._root.destroy());
 
 		const rect = this._root.tag();
 		this._title = rect.tag().classify("zen_modal_title")