ONOS-4359: continued work on theming UI
- cleaning up flow, group, intent, meter, and port views.
Change-Id: I4bbc483f1e63a0fb045dee3e90a293798820f7f6
(cherry picked from commit a565d9d)
diff --git a/web/gui/src/main/webapp/app/view/flow/flow-theme.css b/web/gui/src/main/webapp/app/view/flow/flow-theme.css
index f5c1a80..e589b33 100644
--- a/web/gui/src/main/webapp/app/view/flow/flow-theme.css
+++ b/web/gui/src/main/webapp/app/view/flow/flow-theme.css
@@ -19,39 +19,28 @@
*/
-.light #ov-flow .current-view use {
- fill: white;
-}
-.dark #ov-flow .current-view use {
- fill: #304860;
-}
-
-.light #ov-flow .current-view rect {
- fill: deepskyblue;
-}
-.dark #ov-flow .current-view rect {
- fill: #eee;
-}
-
+/* a "logical" row is made up of 3 "physical" rows -- color as such */
.light #ov-flow tr:nth-child(6n + 1),
.light #ov-flow tr:nth-child(6n + 2),
.light #ov-flow tr:nth-child(6n + 3) {
- background-color: #eee;
+ background-color: #fbfbfb;
}
.light #ov-flow tr:nth-child(6n + 4),
.light #ov-flow tr:nth-child(6n + 5),
.light #ov-flow tr:nth-child(6n) {
- background-color: #ddd;
+ background-color: #f4f4f4;
}
.dark #ov-flow tr:nth-child(6n + 1),
.dark #ov-flow tr:nth-child(6n + 2),
.dark #ov-flow tr:nth-child(6n + 3) {
- background-color: #444;
+ /* TODO: dark theme */
+ background-color: #fbfbfb;
}
.dark #ov-flow tr:nth-child(6n + 4),
.dark #ov-flow tr:nth-child(6n + 5),
.dark #ov-flow tr:nth-child(6n) {
- background-color: #333;
+ /* TODO: dark theme */
+ background-color: #f4f4f4;
}
/* highlighted color */
@@ -61,7 +50,8 @@
.light #ov-flow tr:nth-child(6n + 4).data-change,
.light #ov-flow tr:nth-child(6n + 5).data-change,
.light #ov-flow tr:nth-child(6n).data-change {
- background-color: #FDFFDC;
+ /* TODO: theme */
+ background-color: #fdffdc;
}
.dark #ov-flow tr:nth-child(6n + 1).data-change,
.dark #ov-flow tr:nth-child(6n + 2).data-change,
@@ -69,7 +59,8 @@
.dark #ov-flow tr:nth-child(6n + 4).data-change,
.dark #ov-flow tr:nth-child(6n + 5).data-change,
.dark #ov-flow tr:nth-child(6n).data-change {
- background-color: #5A5600;
+ /* TODO: dark theme */
+ background-color: #fdffdc;
}
#ov-flow td.selector,
diff --git a/web/gui/src/main/webapp/app/view/group/group-theme.css b/web/gui/src/main/webapp/app/view/group/group-theme.css
index 6e41520..c1cd350 100644
--- a/web/gui/src/main/webapp/app/view/group/group-theme.css
+++ b/web/gui/src/main/webapp/app/view/group/group-theme.css
@@ -18,35 +18,25 @@
ONOS GUI -- Group View (theme) -- CSS file
*/
-.light #ov-group .current-view use {
- fill: white;
-}
-.dark #ov-group .current-view use {
- fill: #304860;
-}
-
-.light #ov-group .current-view rect {
- fill: deepskyblue;
-}
-.dark #ov-group .current-view rect {
- fill: #eee;
-}
-
+/* a "logical" row is made up of 2 "physical" rows -- color as such */
.light #ov-group tr:nth-child(4n + 1),
.light #ov-group tr:nth-child(4n + 2) {
- background-color: #eee;
+ background-color: #fbfbfb;
}
.light #ov-group tr:nth-child(4n + 3),
.light #ov-group tr:nth-child(4n) {
- background-color: #ddd;
+ background-color: #f4f4f4;
}
+
.dark #ov-group tr:nth-child(4n + 1),
.dark #ov-group tr:nth-child(4n + 2) {
- background-color: #444;
+ /* TODO: dark theme */
+ background-color: #fbfbfb;
}
.dark #ov-group tr:nth-child(4n + 3),
.dark #ov-group tr:nth-child(4n) {
- background-color: #333;
+ /* TODO: dark theme */
+ background-color: #f4f4f4;
}
/* highlighted color */
@@ -54,11 +44,13 @@
.light #ov-group tr:nth-child(4n + 2).data-change,
.light #ov-group tr:nth-child(4n + 3).data-change,
.light #ov-group tr:nth-child(4n).data-change {
- background-color: #FDFFDC;
+ /* TODO: theme */
+ background-color: #fdffdc;
}
.dark #ov-group tr:nth-child(4n + 1).data-change,
.dark #ov-group tr:nth-child(4n + 2).data-change,
.dark #ov-group tr:nth-child(4n + 3).data-change,
.dark #ov-group tr:nth-child(4n).data-change {
- background-color: #5A5600;
+ /* TODO: dark theme */
+ background-color: #fdffdc;
}
diff --git a/web/gui/src/main/webapp/app/view/intent/intent-theme.css b/web/gui/src/main/webapp/app/view/intent/intent-theme.css
index 4d551f1..1d24109e 100644
--- a/web/gui/src/main/webapp/app/view/intent/intent-theme.css
+++ b/web/gui/src/main/webapp/app/view/intent/intent-theme.css
@@ -18,25 +18,28 @@
ONOS GUI -- Intent View (theme) -- CSS file
*/
+/* a "logical" row is made up of 3 "physical" rows -- color as such */
.light #ov-intent tr:nth-child(6n + 1),
.light #ov-intent tr:nth-child(6n + 2),
.light #ov-intent tr:nth-child(6n + 3) {
- background-color: #eee;
+ background-color: #fbfbfb;
}
.light #ov-intent tr:nth-child(6n + 4),
.light #ov-intent tr:nth-child(6n + 5),
.light #ov-intent tr:nth-child(6n) {
- background-color: #ddd;
+ background-color: #f4f4f4;
}
.dark #ov-intent tr:nth-child(6n + 1),
.dark #ov-intent tr:nth-child(6n + 2),
.dark #ov-intent tr:nth-child(6n + 3) {
- background-color: #444;
+ /* TODO: dark theme */
+ background-color: #fbfbfb;
}
.dark #ov-intent tr:nth-child(6n + 4),
.dark #ov-intent tr:nth-child(6n + 5),
.dark #ov-intent tr:nth-child(6n) {
- background-color: #333;
+ /* TODO: dark theme */
+ background-color: #f4f4f4;
}
.light #ov-intent tr:nth-child(6n + 1).data-change,
@@ -45,7 +48,8 @@
.light #ov-intent tr:nth-child(6n + 4).data-change,
.light #ov-intent tr:nth-child(6n + 5).data-change,
.light #ov-intent tr:nth-child(6n).data-change {
- background-color: #FDFFDC;
+ /* TODO: theme */
+ background-color: #fdffdc;
}
.dark #ov-intent tr:nth-child(6n + 1).data-change,
.dark #ov-intent tr:nth-child(6n + 2).data-change,
@@ -53,7 +57,8 @@
.dark #ov-intent tr:nth-child(6n + 4).data-change,
.dark #ov-intent tr:nth-child(6n + 5).data-change,
.dark #ov-intent tr:nth-child(6n).data-change {
- background-color: #5A5600;
+ /* TODO: dark theme */
+ background-color: #fdffdc;
}
#ov-intent td.resources,
diff --git a/web/gui/src/main/webapp/app/view/meter/meter-theme.css b/web/gui/src/main/webapp/app/view/meter/meter-theme.css
index 211b386..e380aba 100644
--- a/web/gui/src/main/webapp/app/view/meter/meter-theme.css
+++ b/web/gui/src/main/webapp/app/view/meter/meter-theme.css
@@ -18,35 +18,24 @@
ONOS GUI -- Meter View (theme) -- CSS file
*/
-.light #ov-meter .current-view use {
- fill: white;
-}
-.dark #ov-meter .current-view use {
- fill: #304860;
-}
-
-.light #ov-meter .current-view rect {
- fill: deepskyblue;
-}
-.dark #ov-meter .current-view rect {
- fill: #eee;
-}
-
+/* a "logical" row is made up of 2 "physical" rows -- color as such */
.light #ov-meter tr:nth-child(4n + 1),
.light #ov-meter tr:nth-child(4n + 2) {
- background-color: #eee;
+ background-color: #fbfbfb;
}
.light #ov-meter tr:nth-child(4n + 3),
.light #ov-meter tr:nth-child(4n) {
- background-color: #ddd;
+ background-color: #f4f4f4;
}
.dark #ov-meter tr:nth-child(4n + 1),
.dark #ov-meter tr:nth-child(4n + 2) {
- background-color: #444;
+ /* TODO: dark theme */
+ background-color: #fbfbfb;
}
.dark #ov-meter tr:nth-child(4n + 3),
.dark #ov-meter tr:nth-child(4n) {
- background-color: #333;
+ /* TODO: dark theme */
+ background-color: #f4f4f4;
}
/* highlighted color */
@@ -54,11 +43,13 @@
.light #ov-meter tr:nth-child(4n + 2).data-change,
.light #ov-meter tr:nth-child(4n + 3).data-change,
.light #ov-meter tr:nth-child(4n).data-change {
- background-color: #FDFFDC;
+ /* TODO: theme */
+ background-color: #fdffdc;
}
.dark #ov-meter tr:nth-child(4n + 1).data-change,
.dark #ov-meter tr:nth-child(4n + 2).data-change,
.dark #ov-meter tr:nth-child(4n + 3).data-change,
.dark #ov-meter tr:nth-child(4n).data-change {
- background-color: #5A5600;
+ /* TODO: dark theme */
+ background-color: #fdffdc;
}
diff --git a/web/gui/src/main/webapp/app/view/port/port-theme.css b/web/gui/src/main/webapp/app/view/port/port-theme.css
index c01ed13..7fd2126 100644
--- a/web/gui/src/main/webapp/app/view/port/port-theme.css
+++ b/web/gui/src/main/webapp/app/view/port/port-theme.css
@@ -18,16 +18,3 @@
ONOS GUI -- Port View (theme) -- CSS file
*/
-.light #ov-port .current-view use {
- fill: white;
-}
-.dark #ov-port .current-view use {
- fill: #304860;
-}
-
-.light #ov-port .current-view rect {
- fill: deepskyblue;
-}
-.dark #ov-port .current-view rect {
- fill: #eee;
-}