GUI -- Reworked Toolbar and button CSS styles for light and dark themes.

Change-Id: Id882d7a22aa89dbc9ac1e82e91bf82da89bdecf1

@@ -41,21 +41,38 @@
 }
 
 /* Selected button color */
-.light .button svg.embeddedIcon,
-.light .toggleButton.selected svg.embeddedIcon,
-.light .radioButton.selected svg.embeddedIcon {
+.light .button svg.embeddedIcon .icon rect,
+.light .toggleButton.selected svg.embeddedIcon .icon rect,
+.light .radioButton.selected svg.embeddedIcon .icon rect {
     fill: #838383;
 }
+
+.light .button:hover svg.embeddedIcon .icon rect,
+.light .toggleButton.selected:hover svg.embeddedIcon .icon rect
+/* NOTE: selected radio button should NOT have hover highlight */
+{
+    fill: #444444;
+}
+
 .light .button svg.embeddedIcon .glyph,
 .light .toggleButton.selected svg.embeddedIcon .glyph,
 .light .radioButton.selected svg.embeddedIcon .glyph {
     fill: white;
 }
-.dark .button svg.embeddedIcon,
-.dark .toggleButton.selected svg.embeddedIcon,
-.dark .radioButton.selected svg.embeddedIcon{
+
+.dark .button svg.embeddedIcon .icon rect,
+.dark .toggleButton.selected svg.embeddedIcon .icon rect,
+.dark .radioButton.selected svg.embeddedIcon .icon rect {
     fill: #151515;
 }
+
+.dark .button:hover svg.embeddedIcon .icon rect,
+.dark .toggleButton.selected:hover svg.embeddedIcon .icon rect
+/* NOTE: selected radio button should NOT have hover highlight */
+{
+    fill: #444;
+}
+
 .dark .button svg.embeddedIcon .glyph,
 .dark .toggleButton.selected svg.embeddedIcon .glyph,
 .dark .radioButton.selected svg.embeddedIcon .glyph {
@@ -63,19 +80,41 @@
 }
 
 /* Unselected button color */
-.light .toggleButton svg.embeddedIcon,
-.light .radioButton svg.embeddedIcon {
+.light .toggleButton svg.embeddedIcon .icon rect,
+.light .radioButton svg.embeddedIcon .icon rect {
     fill: #eee;
 }
+
+.light .toggleButton:hover svg.embeddedIcon .icon rect,
+.light .radioButton:hover:not(.selected) svg.embeddedIcon .icon rect {
+    fill: #ccc;
+}
+
 .light .toggleButton svg.embeddedIcon .glyph,
 .light .radioButton svg.embeddedIcon .glyph {
     fill: #bbb;
 }
-.dark .toggleButton svg.embeddedIcon,
-.dark .radioButton svg.embeddedIcon {
+.light .toggleButton:hover:not(.selected) svg.embeddedIcon .glyph,
+.light .radioButton:hover:not(.selected) svg.embeddedIcon .glyph {
+    fill: #999;
+}
+
+.dark .toggleButton svg.embeddedIcon .icon rect,
+.dark .radioButton svg.embeddedIcon .icon rect {
     fill: #303030;
 }
+
+.dark .toggleButton:hover:not(.selected) svg.embeddedIcon .icon rect,
+.dark .radioButton:hover:not(.selected) svg.embeddedIcon .icon rect {
+    fill: #555;
+}
+
 .dark .toggleButton svg.embeddedIcon .glyph,
 .dark .radioButton svg.embeddedIcon .glyph {
     fill: #565656;
 }
+
+.dark .toggleButton:hover:not(.selected) svg.embeddedIcon .glyph,
+.dark .radioButton:hover:not(.selected) svg.embeddedIcon .glyph {
+    fill: #777;
+}

@@ -18,7 +18,27 @@
  ONOS GUI -- Sample View -- CSS file
  */
 
+.light #ov-sample {
+    color: navy;
+}
+
+.dark #ov-sample {
+    color: #1e5e6f;
+}
+
+.dark a {
+    color: #88c;
+}
+
 #ov-sample .msg {
-    font-style: italic;
     color: darkorange;
 }
+
+.light #ov-sample .msg {
+    color: darkorange;
+}
+
+.dark #ov-sample .msg {
+    color: #904e00;
+}
+