GUI -- Cleaned up 'muted' instance colors, and CSS for 'offline' instances.

Change-Id: I1ba8118bc77c05356c49205019c9ebec527f8dbf

@@ -121,17 +121,14 @@
 
 
     // --- Ordinal scales for 7 values.
     // --- Ordinal scales for 7 values.
     // TODO: tune colors for light and dark themes
     // TODO: tune colors for light and dark themes
+    // Note: These colors look good on the white background. Still, need to tune for dark.
 
 
-    //                blue       purple     pink       mustard    cyan       green      red
-    //var lightNorm = ['#1f77b4', '#9467bd', '#e377c2', '#bcbd22', '#17becf', '#2ca02c', '#d62728'],
-    //    lightMute = ['#aec7e8', '#c5b0d5', '#f7b6d2', '#dbdb8d', '#9edae5', '#98df8a', '#ff9896'],
-    //    darkNorm = ['#1f77b4', '#9467bd', '#e377c2', '#bcbd22', '#17becf', '#2ca02c', '#d62728'],
-    //    darkMute = ['#aec7e8', '#c5b0d5', '#f7b6d2', '#dbdb8d', '#9edae5', '#98df8a', '#ff9896'];
+    //               blue       brown      purple     sea green  brick red  dark teal  lime
+    var lightNorm = ['#3E5780', '#78533B', '#8A2979', '#018D61', '#CB4D28', '#006D73', '#56AF00'],
+        lightMute = ['#A8B8CC', '#CCB3A8', '#D19FCE', '#96D6BF', '#FFC2BD', '#8FCCCA', '#CAEAA4'],
 
 
-    var lightNorm = ['#3F587F', '#77533D', '#C94E30', '#892D78', '#138C62', '#006D72', '#59AD00'],
-        lightMute = ['#56657C', '#665F57', '#C68C7F', '#876E82', '#68897E', '#4E6F70', '#93AA7B'],
-        darkNorm = ['#3F587F', '#77533D', '#C94E30', '#892D78', '#138C62', '#006D72', '#59AD00'],
-        darkMute = ['#56657C', '#665F57', '#C68C7F', '#876E82', '#68897E', '#4E6F70', '#93AA7B'];
+        darkNorm  = ['#3E5780', '#78533B', '#8A2979', '#018D61', '#CB4D28', '#006D73', '#56AF00'],
+        darkMute  = ['#A8B8CC', '#CCB3A8', '#D19FCE', '#96D6BF', '#FFC2BD', '#8FCCCA', '#CAEAA4'];
 
 
     function cat7() {
     function cat7() {
         var colors = {
         var colors = {

@@ -330,7 +330,7 @@ svg .node.host circle {
 #topo-oibox .online svg rect {
 #topo-oibox .online svg rect {
     opacity: 1;
     opacity: 1;
     fill: #9cf;
     fill: #9cf;
-    stroke: #357;
+    stroke: #555;
 }
 }
 
 
 #topo-oibox svg .glyphIcon {
 #topo-oibox svg .glyphIcon {
@@ -342,7 +342,7 @@ svg .node.host circle {
 }
 }
 
 
 #topo-oibox svg .badgeIcon {
 #topo-oibox svg .badgeIcon {
-    fill: #aaa;
+    fill: #777;
     fill-rule: evenodd;
     fill-rule: evenodd;
 }
 }
 
 
@@ -352,7 +352,7 @@ svg .node.host circle {
 
 
 #topo-oibox svg text {
 #topo-oibox svg text {
     text-anchor: middle;
     text-anchor: middle;
-    fill: #888;
+    fill: #777;
 }
 }
 #topo-oibox .online svg text {
 #topo-oibox .online svg text {
     fill: #eee;
     fill: #eee;