monitoring: improve user interface

[src/app-framework-binder.git] / test / monitoring / monitor-demo.css

diff --git a/test/monitoring/monitor-demo.css b/test/monitoring/monitor-demo.css
index b14ac1a..e692eae 100644 (file)
--- 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 */