GUI -- Reworked Toolbar and button CSS styles for light and dark themes.
Change-Id: Id882d7a22aa89dbc9ac1e82e91bf82da89bdecf1
diff --git a/web/gui/src/main/webapp/app/fw/widget/button.css b/web/gui/src/main/webapp/app/fw/widget/button.css
index 4bcaa85..9ae0359 100644
--- a/web/gui/src/main/webapp/app/fw/widget/button.css
+++ b/web/gui/src/main/webapp/app/fw/widget/button.css
@@ -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;
+}
diff --git a/web/gui/src/main/webapp/app/view/sample/sample.css b/web/gui/src/main/webapp/app/view/sample/sample.css
index 375a564..6787c23 100644
--- a/web/gui/src/main/webapp/app/view/sample/sample.css
+++ b/web/gui/src/main/webapp/app/view/sample/sample.css
@@ -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;
-}
\ No newline at end of file
+}
+
+.light #ov-sample .msg {
+ color: darkorange;
+}
+
+.dark #ov-sample .msg {
+ color: #904e00;
+}
+