ONOS-4359: continued work on theming UI

- topo view: fixed node and link selection highlighting.

Change-Id: I48d4ac06989dd98b0b2182fbd45b76eb2ca737b7

@@ -150,16 +150,6 @@
     opacity: 0.2 !important;
     opacity: 0.2 !important;
 }
 }
 
 
-#ov-topo svg .node.selected rect,
-#ov-topo svg .node.selected circle {
-    fill: #f90;
-    filter: url(#blue-glow);
-}
-.firefox #ov-topo svg .node.selected rect,
-.firefox #ov-topo svg .node.selected circle {
-    filter: url("data:image/svg+xml;utf8, <svg xmlns = \'http://www.w3.org/2000/svg\'><filter x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\" id=\"blue-glow\"><feColorMatrix type=\"matrix\" values=\"0 0 0 0  0 0 0 0 0  0 0 0 0 0  0.7 0 0 0 1  0 \"></feColorMatrix><feGaussianBlur stdDeviation=\"3\" result=\"coloredBlur\"></feGaussianBlur><feMerge><feMergeNode in=\"coloredBlur\"></feMergeNode><feMergeNode in=\"SourceGraphic\"></feMergeNode></feMerge></filter></svg>#blue-glow");
-}
-
 /* Device Nodes */
 /* Device Nodes */
 
 
 /* note: device without the 'online' class is offline */
 /* note: device without the 'online' class is offline */
@@ -190,7 +180,8 @@
 
 
 
 
 #ov-topo svg .node.device.selected rect {
 #ov-topo svg .node.device.selected rect {
-    fill: #f90;
+    stroke-width: 2.0;
+    stroke: #009fdb;
 }
 }
 
 
 /* Badges */
 /* Badges */
@@ -238,13 +229,17 @@
     fill: #846;
     fill: #846;
 }
 }
 
 
-svg .node.host circle {
+#ov-topo svg .node.host circle {
     stroke: #a3a596;
     stroke: #a3a596;
     fill: #e0dfd6;
     fill: #e0dfd6;
 }
 }
+#ov-topo svg .node.host.selected circle {
+    stroke-width: 2.0;
+    stroke: #009fdb;
+}
 
 
-svg .node.host .svgIcon {
-    fill: #444;
+#ov-topo svg .node.host use {
+    fill: #3c3a3a;
 }
 }
 
 
 /* --- Topo Links --- */
 /* --- Topo Links --- */
@@ -255,12 +250,8 @@ svg .node.host .svgIcon {
 
 
 #ov-topo svg .link.selected,
 #ov-topo svg .link.selected,
 #ov-topo svg .link.enhanced {
 #ov-topo svg .link.enhanced {
-    stroke-width: 4.5px;
-    filter: url(#blue-glow);
-}
-.firefox #ov-topo svg .link.selected,
-.firefox #ov-topo svg .link.enhanced {
-    filter: url("data:image/svg+xml;utf8, <svg xmlns = \'http://www.w3.org/2000/svg\'><filter x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\" id=\"blue-glow\"><feColorMatrix type=\"matrix\" values=\"0 0 0 0  0 0 0 0 0  0 0 0 0 0  0.7 0 0 0 1  0 \"></feColorMatrix><feGaussianBlur stdDeviation=\"3\" result=\"coloredBlur\"></feGaussianBlur><feMerge><feMergeNode in=\"coloredBlur\"></feMergeNode><feMergeNode in=\"SourceGraphic\"></feMergeNode></feMerge></filter></svg>#blue-glow");
+    stroke-width: 3.5;
+    stroke: #009fdb;
 }
 }
 
 
 #ov-topo svg .link.inactive {
 #ov-topo svg .link.inactive {
@@ -306,7 +297,9 @@ svg .node.host .svgIcon {
 #ov-topo svg .link.animated {
 #ov-topo svg .link.animated {
     stroke-dasharray: 8 5;
     stroke-dasharray: 8 5;
     animation: ants 5s infinite linear;
     animation: ants 5s infinite linear;
-    /* below line will be added via Javascript based on path */
+    /* below line could be added via Javascript, based on path, if we cared
+     * enough about the direction of ant-flow
+     */
     /*animation-direction: reverse;*/
     /*animation-direction: reverse;*/
 }
 }
 @keyframes ants {
 @keyframes ants {
@@ -336,7 +329,7 @@ svg .node.host .svgIcon {
 /* Link Labels */
 /* Link Labels */
 #ov-topo svg .linkLabel rect {
 #ov-topo svg .linkLabel rect {
     stroke: none;
     stroke: none;
-    fill: #eee;
+    fill: #ffffff;
 }
 }
 
 
 #ov-topo svg .linkLabel text {
 #ov-topo svg .linkLabel text {
@@ -346,8 +339,8 @@ svg .node.host .svgIcon {
 /* Port Labels */
 /* Port Labels */
 
 
 #ov-topo svg .portLabel rect {
 #ov-topo svg .portLabel rect {
-    stroke: none;
-    fill: #eee;
+    stroke: #a3a596;
+    fill: #ffffff;
 }
 }
 
 
 #ov-topo svg .portLabel text {
 #ov-topo svg .portLabel text {

@@ -127,7 +127,9 @@
         selectOrder.push(obj.id);
         selectOrder.push(obj.id);
 
 
         n.classed('selected', true);
         n.classed('selected', true);
+        if (n.classed('device')) {
             api.updateDeviceColors(obj);
             api.updateDeviceColors(obj);
+        }
         updateDetail();
         updateDetail();
     }
     }