monitoring: improve user interface

- fix buttons
- manage scrolling
- added separators

Change-Id: I327a74d004ec33c41bb5e0dbc913bb02d9848878
Signed-off-by: José Bollo <jose.bollo@iot.bzh>

1 files changed, 32 insertions, 4 deletions

diff --git a/test/monitoring/monitor-demo.css b/test/monitoring/monitor-demo.css
index b14ac1a7..e692eae3 100644
--- a/test/monitoring/monitor-demo.css
+++ b/test/monitoring/monitor-demo.css
@@ -2,7 +2,9 @@
 /* top */
 body {
 	margin: 2px;
-	background: url(content-background-car-wide.png) center/cover;
+	background-image: url(content-background-car-wide.png);
+	background-position: center;
+	background-size: cover;
 	color: cyan;
 	font-family: "Lucida Console", Monaco, monospace;
 }
@@ -39,8 +41,8 @@ body {
 
 
 #params {
-	border: dashed 4px red;
-	padding: 10px;
+	border: dashed 4px #8f8;
+	padding: 30px;
 	margin: 10px;
 	border-radius: 0px 50px;
 }
@@ -192,7 +194,14 @@ body {
 /*******************************************************************/
 /* open / close */
 
-.opclo { width: 10; height: 10; background-size: contain; background-color: cyan; border-radius: 3px; padding: 2px; }
+.opclo {
+	width: 10px;
+	height: 10px;
+	background-size: contain;
+	background-color: cyan;
+	border-radius: 3px;
+	padding: 2px;
+}
 
 .closed > .opclo { background-image: url(down.png); } 
 .opened > .opclo { background-image: url(up.png); }
@@ -208,6 +217,17 @@ body {
 	border-radius: 0px 5px 5px 5px;
 }
 
+.separator {
+	margin: 8px 100px;
+	padding: 0px;
+	height: 2px;
+	background-color: cyan;
+}
+
+.traceevent.opened {
+	background-color: rgba(0,0,0,0.6);
+}
+
 /*
 .traceevent.request, .trace-box.request { background: #ffd: }
 .traceevent.daemon, .trace-box.daemon { background: #fdf; }
@@ -236,6 +256,10 @@ body {
 	font-weight: bolder;
 }
 
+.traceevent.closed:hover {
+	cursor: pointer;
+}
+
 .traceevent.closed:hover .content {
 	margin: 5px;
 	padding: 5px;
@@ -269,6 +293,10 @@ body {
 	padding: 0px;
 }
 
+a:link { color: cyan; }
+a:link:hover, a:active { color: white; }
+a:visited { color: #4d4; }
+
 /*******************************************************************/
 /* json format */