- Improvement: Self-hosted dashboard (#181)

Self-hosted dashboard gets oplog entry view and a stats browser

1 files changed, 36 insertions, 5 deletions

diff --git a/src/zenserver/frontend/html/zen.css b/src/zenserver/frontend/html/zen.css
index 9e6eb8f78..d9b983ff6 100644
--- a/src/zenserver/frontend/html/zen.css
+++ b/src/zenserver/frontend/html/zen.css
@@ -27,6 +27,10 @@ body {
 	background-color:	var(--theme_g4);
 }
 
+pre {
+	margin:				0;
+}
+
 * {
 	box-sizing: border-box;
 }
@@ -93,25 +97,33 @@ h3 {
 	margin-bottom:			1.2em;
 }
 
-.zen_table > .zen_row {
+.zen_table > div {
 	display: contents;
 }
 
-.zen_table > .zen_row:nth-child(odd) > .zen_cell {
+.zen_table > div:nth-of-type(odd) {
 	background-color:	var(--theme_g3);
 }
 
-.zen_table > .zen_row:first-child > .zen_cell {
+.zen_table > div:first-of-type {
 	font-weight:		bold;
 	background-color:	var(--theme_p3);
 }
 
-.zen_table > .zen_row > .zen_cell {
+.zen_table > hidden {
+	visibility:			hidden;
+	display:			none;
+}
+
+.zen_table > div > div {
 	padding:			0.3em;
 	padding-left:		0.75em;
 	padding-right:		0.75em;
 	align-content:		center;
 	border-left:		1px solid var(--theme_g2);
+	overflow:			auto;
+	overflow-wrap:		break-word;
+	background-color:	inherit;
 }
 
 /* toolbar ------------------------------------------------------------------ */
@@ -159,6 +171,7 @@ h3 {
 	display:			flex;
 	justify-content:	center;
 	align-items:		center;
+	backdrop-filter:	blur(5px);
 }
 
 .zen_modal .zen_modal_bg {
@@ -169,7 +182,7 @@ h3 {
 	width:				100%;
 	height:				100%;
 	background:			var(--theme_g0);
-	opacity:			0.5;
+	opacity:			0.4;
 }
 
 .zen_modal > div {
@@ -217,6 +230,24 @@ h3 {
 	align-content:		center;
 }
 
+/* crumbs ------------------------------------------------------------------- */
+
+#crumbs {
+	display:		flex;
+	position:		relative;
+	top:			-1em;
+}
+
+#crumbs > div {
+	padding-right:	0.5em;
+}
+
+#crumbs > div:nth-child(odd)::after {
+	content:		":";
+	font-weight:	bolder;
+	color:			var(--theme_p2);
+}
+
 /* branding ----------------------------------------------------------------- */
 
 #branding {