commit 1de6601cc1f6d9b9cd868a190156a4d0eef5ac04
author Thomas Vachuska <tom@onlab.us> Thu Oct 30 03:03:30 2014 -0700
committer Thomas Vachuska <tom@onlab.us> Thu Oct 30 03:03:30 2014 -0700
tree 3d5e23a5a94a2073450dc9ffdbb574cd9efc5b40
parent e972ea52fd37712bdc2296014cc4176d55d27cd2

Tweaked GUI files to clean-up the look and feel and to add a few enhancements.
Default for network.js is now to use live data.

web/gui/src/main/webapp/onos.css

diff --git a/web/gui/src/main/webapp/onos.css b/web/gui/src/main/webapp/onos.css
index 06e5b63..3c1fb07 100644
--- a/web/gui/src/main/webapp/onos.css
+++ b/web/gui/src/main/webapp/onos.css
@@ -28,11 +28,17 @@
  * Classes
  */
 
+img#logo {
+    height: 38px;
+    padding-left: 8px;
+    padding-right: 8px;
+}
+
 span.title {
-    color: #37b;
+    color: #369;
     font-size: 14pt;
     font-style: italic;
-    vertical-align: 10px;
+    vertical-align: 12px;
 }
 
 span.radio {
@@ -41,6 +47,8 @@
 }
 
 span.right {
+    padding-top: 8px;
+    padding-right: 16px;
     float: right;
 }
 
@@ -89,14 +97,13 @@
 }
 
 svg .link.host {
-    stroke: #6a6;
-    stroke-dasharray: 3,3;
+    stroke: #666;
+    stroke-width: 1px;
+    Xstroke-dasharray: 3,3;
 }
 
 svg .node.device rect {
-    stroke-width: 3.0px;
-    stroke: white;
-    stroke-dasharray: 2,2;
+    stroke-width: 1.5px;
 
     transition: opacity 250ms;
     -webkit-transition: opacity 250ms;
@@ -104,19 +111,21 @@
 }
 
 svg .node.device.fixed rect {
-    stroke-width: 0;
+    stroke-width: 1.5;
+    stroke: #ccc;
+    Xstroke-dasharray: 4,2;
 }
 
 svg .node.device.roadm rect {
-    fill: #229;
+    fill: #03c;
 }
 
 svg .node.device.switch rect {
-    fill: #55f;
+    fill: #06f;
 }
 
 svg .node.host circle {
-    fill: #898;
+    fill: #c96;
     stroke: #000;
 }
 
@@ -148,7 +157,7 @@
 svg .node.inactive circle,
 svg .node.inactive text,
 svg .node.inactive image {
-    opacity: .05;
+    opacity: .1;
 }
 
 svg .node.inactive.selected rect,
@@ -199,8 +208,9 @@
 #mast {
     height: 36px;
     padding: 4px;
-    background-color: #ccc;
+    background-color: #bbb;
     vertical-align: baseline;
+    box-shadow: 0px 2px 8px #777;
 }
 
 #frame {
@@ -214,19 +224,27 @@
     z-index: 100;
     display: block;
     top: 10%;
-    width: 300px;
-    height: 80%;
-    right: -320px;
+    width: 280px;
+    right: -300px;
     opacity: 0;
-    background-color: rgba(0,0,0,0.5);
+    background-color: rgba(255,255,255,0.5);
+
     padding: 10px;
-    color: white;
+    color: black;
     font-size: 10pt;
+    box-shadow: 2px 2px 16px #777;
 }
 
 #flyout h2 {
     margin: 8px 4px;
-    color: yellow;
+    color: black;
+    vertical-align: middle;
+}
+
+#flyout h2 img {
+    height: 32px;
+    padding-right: 8px;
+    vertical-align: middle;
 }
 
 #flyout p, table {
@@ -235,7 +253,7 @@
 
 #flyout td.label {
     font-style: italic;
-    color: #ccf;
+    color: #777;
     padding-right: 12px;
 }
 
@@ -243,3 +261,10 @@
 
 }
 
+#flyout hr {
+    height: 1px;
+    color: #ccc;
+    background-color: #ccc;
+    border: 0;
+}
+