Added basic drag and select behavior to nodes.
Changed base colors and added .pkt and .opt classes to differentiate nodes.
diff --git a/web/gui/src/main/webapp/onos.css b/web/gui/src/main/webapp/onos.css
index 328e109..548ca57 100644
--- a/web/gui/src/main/webapp/onos.css
+++ b/web/gui/src/main/webapp/onos.css
@@ -13,7 +13,7 @@
*/
span.title {
- color: red;
+ color: darkblue;
font-size: 16pt;
font-style: italic;
}
@@ -30,7 +30,7 @@
* === DEBUGGING ======
*/
svg {
- border: 1px dashed red;
+ /*border: 1px dashed red;*/
}
@@ -64,36 +64,45 @@
-moz-transition: opacity 250ms;
}
-.node text {
- fill: #000;
+/*differentiate between packet and optical nodes*/
+svg .node.pkt rect {
+ fill: #77a;
+}
+
+svg .node.opt rect {
+ fill: #7a7;
+}
+
+svg .node text {
+ fill: white;
font: 10px sans-serif;
pointer-events: none;
}
-.node.selected rect {
+svg .node.selected rect {
filter: url(#blue-glow);
}
-.link.inactive,
-.node.inactive rect,
-.node.inactive text {
+svg .link.inactive,
+svg .node.inactive rect,
+svg .node.inactive text {
opacity: .2;
}
-.node.inactive.selected rect,
-.node.inactive.selected text {
+svg .node.inactive.selected rect,
+svg .node.inactive.selected text {
opacity: .6;
}
-.legend {
+svg .legend {
position: fixed;
}
-.legend .category rect {
+svg .legend .category rect {
stroke-width: 1px;
}
-.legend .category text {
+svg .legend .category text {
fill: #000;
font: 10px sans-serif;
pointer-events: none;
@@ -110,15 +119,15 @@
#frame {
width: 100%;
height: 100%;
- background-color: #ffd;
+ background-color: #cdf;
}
#mast {
height: 32px;
- background-color: #dda;
+ background-color: #abe;
vertical-align: baseline;
}
#main {
- background-color: #99b;
+ background-color: #99c;
}