Reverting the theme to light for the demo and switching icons set.
Change-Id: Ic3f7b46ce56100aabc1b7df3370218cbfd94db0c
diff --git a/web/gui/src/main/webapp/topo2.css b/web/gui/src/main/webapp/topo2.css
index 7ee73c6..484cfe7 100644
--- a/web/gui/src/main/webapp/topo2.css
+++ b/web/gui/src/main/webapp/topo2.css
@@ -25,11 +25,14 @@
}
#topo #map {
+ stroke-width: 2px;
+ stroke: #aaaaaa;
fill: transparent;
}
#topo svg .glyph {
+ fill: white;
stroke: none;
}
@@ -65,20 +68,39 @@
#topo svg .node.device.fixed rect {
stroke-width: 1.5;
-}
-
-#topo .node text {
- font-weight: 100;
+ stroke: #ccc;
}
/* note: device is offline without the 'online' class */
+#topo svg .node.device {
+ fill: #777;
+}
+
+#topo svg .node.device.switch.online {
+ fill: #17f;
+}
+
+#topo svg .node.device.roadm.online {
+ fill: #03c;
+}
+
/* note: device is offline without the 'online' class */
#topo svg .node.device text {
+ fill: #aaa;
font: 10pt sans-serif;
}
+#topo svg .node.device.online text {
+ fill: white;
+}
+
+
/* Host Nodes */
+#topo svg .node.host {
+ stroke: #000;
+}
+
#topo svg .node.host text {
fill: #846;
stroke: none;
@@ -86,11 +108,18 @@
}
svg .node.host circle {
- fill: #c96;
+ stroke: #000;
+ fill: #ddd;
}
#topo svg .node.host.bgpSpeaker circle {
- fill: #853;
+ stroke: #000;
+ fill: #ddd;
+}
+
+#topo svg .node.host.router circle {
+ stroke: #000;
+ fill: #ddd;
}
/* LINKS */
@@ -105,23 +134,29 @@
}
#topo svg .link.primary {
+ stroke: #f11;
stroke-width: 6px;
}
#topo svg .link.secondary {
+ stroke: rgba(255,100,100,0.5);
stroke-width: 4px;
}
#topo svg .link.animated {
+ stroke: #f11;
stroke-width: 10px;
stroke-dasharray: 8 8
}
#topo svg .link.primary.optical {
+ stroke: #74f;
stroke-width: 6px;
}
#topo svg .link.secondary.optical {
+ stroke: rgba(128,64,255,0.5);
stroke-width: 4px;
}
#topo svg .link.animated.optical {
+ stroke: #74f;
stroke-width: 10px;
stroke-dasharray: 8 8
}
@@ -177,13 +212,17 @@
cursor: pointer;
width: 50%;
text-align: center;
- border-width: 1px;
- borer-style: solid;
+
+ /* theme specific... */
+ border: 1px solid #ddf;
+ color: #99f;
}
#topo-detail .actionBtn:hover {
- border-width: 1px;
- border-style: solid;
+ /* theme specific... */
+ border: 1px solid #ddf;
+ background: #eef;
+ color: #77d;
}
@@ -207,14 +246,29 @@
height: 80px;
margin: 4px 0;
cursor: pointer;
- border-width: 2px;
- border-style: solid;
+
+ /* theme-related */
+ color: #444;
+ background-color: #ccc;
+ border: 2px solid #aaa;
+}
+
+#topo-oibox .onosInst.online {
+ /* theme-related */
+ color: #113;
+ background-color: #bbf;
+ border: 2px solid #555;
}
#topo-oibox .onosInst .onosTitle {
text-align: center;
font-size: 11pt;
margin-top: 6px;
+ color: #888;
+}
+
+#topo-oibox .onosInst.online .onosTitle {
+ color: black;
}
#topo-oibox .onosInst img {