Separating theme from layout for CSS files.
Change-Id: I4c3cec28b30de8026df4298f65ebf6ad92faf68f
diff --git a/web/gui/src/main/webapp/app/view/app/app-theme.css b/web/gui/src/main/webapp/app/view/app/app-theme.css
new file mode 100644
index 0000000..e7e76b9
--- /dev/null
+++ b/web/gui/src/main/webapp/app/view/app/app-theme.css
@@ -0,0 +1,92 @@
+/*
+ * Copyright 2016-present Open Networking Laboratory
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ ONOS GUI -- Applications View (theme) -- CSS file
+ */
+
+.light #app-dialog p {
+ color: darkred;
+}
+.dark #app-dialog p {
+ color: #c55;
+}
+
+.light #app-dialog p.strong {
+ color: red;
+ background-color: #ff0;
+}
+.dark #app-dialog p.strong {
+ color: #c55;
+ background-color: #dd4;
+}
+
+
+.light #app-dialog.floatpanel.dialog {
+ background-color: #fff;
+}
+.dark #app-dialog.floatpanel.dialog {
+ background-color: #444;
+}
+
+.light #application-details-panel.floatpanel {
+ background-color: rgb(229, 234, 237);
+}
+.dark #application-details-panel.floatpanel {
+ background-color: #3A4042;
+}
+
+.light .close-btn svg.embeddedIcon .icon.plus .glyph {
+ fill: #aaa;
+}
+.dark .close-btn svg.embeddedIcon .icon.plus .glyph {
+ fill: #ccc;
+}
+
+#application-details-panel td.label,
+#application-details-panel .app-url i {
+ /* works for both light and dark themes ... */
+ color: #777;
+}
+
+.light #application-details-panel hr {
+ opacity: .5;
+ border-color: #FFF;
+}
+.dark #application-details-panel hr {
+ border-color: #666;
+}
+
+.light #application-details-panel .bottom tr:nth-child(odd) {
+ background-color: #f9f9f9;
+}
+.light #application-details-panel .bottom tr:nth-child(even) {
+ background-color: #EBEDF2;
+}
+.dark #application-details-panel .bottom tr:nth-child(odd) {
+ background-color: #333;
+}
+.dark #application-details-panel .bottom tr:nth-child(even) {
+ background-color: #555;
+}
+
+.light div.dropping {
+ border: solid 3px deepskyblue;
+}
+
+.dark div.dropping {
+ border: solid 3px deepskyblue;
+}
diff --git a/web/gui/src/main/webapp/app/view/app/app.css b/web/gui/src/main/webapp/app/view/app/app.css
index 339689b..f36b745 100644
--- a/web/gui/src/main/webapp/app/view/app/app.css
+++ b/web/gui/src/main/webapp/app/view/app/app.css
@@ -15,7 +15,7 @@
*/
/*
- ONOS GUI -- Applications View -- CSS file
+ ONOS GUI -- Applications View (layout) -- CSS file
*/
#ov-app h2 {
@@ -34,32 +34,10 @@
#app-dialog p {
font-size: 12pt;
}
-.light #app-dialog p {
- color: darkred;
-}
-.dark #app-dialog p {
- color: #c55;
-}
#app-dialog p.strong {
font-weight: bold;
}
-.light #app-dialog p.strong {
- color: red;
- background-color: #ff0;
-}
-.dark #app-dialog p.strong {
- color: #c55;
- background-color: #dd4;
-}
-
-
-.light #app-dialog.floatpanel.dialog {
- background-color: #fff;
-}
-.dark #app-dialog.floatpanel.dialog {
- background-color: #444;
-}
#application-details-panel.floatpanel {
-moz-border-radius: 0;
@@ -67,12 +45,6 @@
z-index: 0;
}
-.light #application-details-panel.floatpanel {
- background-color: rgb(229, 234, 237);
-}
-.dark #application-details-panel.floatpanel {
- background-color: #3A4042;
-}
#application-details-panel .container {
padding: 0 10px;
@@ -84,12 +56,6 @@
top: 0;
cursor: pointer;
}
-.light .close-btn svg.embeddedIcon .icon.plus .glyph {
- fill: #aaa;
-}
-.dark .close-btn svg.embeddedIcon .icon.plus .glyph {
- fill: #ccc;
-}
#application-details-panel .app-icon {
display: inline-block;
@@ -127,8 +93,6 @@
#application-details-panel .app-url i {
font-style: italic;
padding-right: 12px;
- /* works for both light and dark themes ... */
- color: #777;
}
#application-details-panel td.value-bold {
@@ -143,13 +107,6 @@
width: 95%;
margin: 10px auto;
}
-.light #application-details-panel hr {
- opacity: .5;
- border-color: #FFF;
-}
-.dark #application-details-panel hr {
- border-color: #666;
-}
#application-details-panel .bottom table {
border-spacing: 0;
@@ -161,27 +118,8 @@
text-align: left;
}
-.light #application-details-panel .bottom tr:nth-child(odd) {
- background-color: #f9f9f9;
-}
-.light #application-details-panel .bottom tr:nth-child(even) {
- background-color: #EBEDF2;
-}
-.dark #application-details-panel .bottom tr:nth-child(odd) {
- background-color: #333;
-}
-.dark #application-details-panel .bottom tr:nth-child(even) {
- background-color: #555;
-}
.dropping {
}
-.light div.dropping {
- border: solid 3px deepskyblue;
-}
-
-.dark div.dropping {
- border: solid 3px deepskyblue;
-}
diff --git a/web/gui/src/main/webapp/app/view/device/device-theme.css b/web/gui/src/main/webapp/app/view/device/device-theme.css
new file mode 100644
index 0000000..cb134f5
--- /dev/null
+++ b/web/gui/src/main/webapp/app/view/device/device-theme.css
@@ -0,0 +1,94 @@
+/*
+ * Copyright 2016-present Open Networking Laboratory
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ ONOS GUI -- Device View (theme) -- CSS file
+ */
+
+.light #ov-device .current-view use {
+ fill: white;
+}
+.dark #ov-device .current-view use {
+ fill: #304860;
+}
+
+.light #ov-device .current-view rect {
+ fill: deepskyblue;
+}
+.dark #ov-device .current-view rect {
+ fill: #eee;
+}
+
+.light #device-details-panel.floatpanel {
+ background-color: rgb(229, 234, 237);
+}
+.dark #device-details-panel.floatpanel {
+ background-color: #3A4042;
+}
+
+.light .close-btn svg.embeddedIcon .icon.plus .glyph {
+ fill: #aaa;
+}
+.dark .close-btn svg.embeddedIcon .icon.plus .glyph {
+ fill: #ccc;
+}
+
+.light .dev-icon svg.embeddedIcon .glyph {
+ fill: rgb(0, 172, 229);
+}
+.dark .dev-icon svg.embeddedIcon .glyph {
+ fill: #486D91;
+}
+
+#device-details-panel .editable {
+ cursor: pointer;
+ border-bottom: 1px dashed darkgreen;
+}
+
+#device-details-panel td.label {
+ /* works for both light and dark themes ... */
+ color: #777;
+}
+
+.light #device-details-panel hr {
+ opacity: .5;
+ border-color: #FFF;
+}
+.dark #device-details-panel hr {
+ border-color: #666;
+}
+
+.light #device-details-panel .bottom th {
+ background-color: #CCC;
+ /* default text color */
+}
+.dark #device-details-panel .bottom th {
+ background-color: #131313;
+ color: #ccc;
+}
+
+.light #device-details-panel .bottom tr:nth-child(odd) {
+ background-color: #f9f9f9;
+}
+.light #device-details-panel .bottom tr:nth-child(even) {
+ background-color: #EBEDF2;
+}
+.dark #device-details-panel .bottom tr:nth-child(odd) {
+ background-color: #333;
+}
+.dark #device-details-panel .bottom tr:nth-child(even) {
+ background-color: #555;
+}
diff --git a/web/gui/src/main/webapp/app/view/device/device.css b/web/gui/src/main/webapp/app/view/device/device.css
index 01a3b5c..a84286d 100644
--- a/web/gui/src/main/webapp/app/view/device/device.css
+++ b/web/gui/src/main/webapp/app/view/device/device.css
@@ -15,7 +15,7 @@
*/
/*
- ONOS GUI -- Device View -- CSS file
+ ONOS GUI -- Device View (layout) -- CSS file
*/
#ov-device h2 {
@@ -25,19 +25,6 @@
#ov-device div.ctrl-btns {
}
-.light #ov-device .current-view use {
- fill: white;
-}
-.dark #ov-device .current-view use {
- fill: #304860;
-}
-
-.light #ov-device .current-view rect {
- fill: deepskyblue;
-}
-.dark #ov-device .current-view rect {
- fill: #eee;
-}
/* More in generic panel.css */
@@ -47,12 +34,6 @@
z-index: 0;
}
-.light #device-details-panel.floatpanel {
- background-color: rgb(229, 234, 237);
-}
-.dark #device-details-panel.floatpanel {
- background-color: #3A4042;
-}
#device-details-panel .container {
padding: 0 12px;
@@ -64,34 +45,18 @@
top: 0;
cursor: pointer;
}
-.light .close-btn svg.embeddedIcon .icon.plus .glyph {
- fill: #aaa;
-}
-.dark .close-btn svg.embeddedIcon .icon.plus .glyph {
- fill: #ccc;
-}
#device-details-panel .dev-icon {
display: inline-block;
padding: 0 6px 0 0;
vertical-align: middle;
}
-.light .dev-icon svg.embeddedIcon .glyph {
- fill: rgb(0, 172, 229);
-}
-.dark .dev-icon svg.embeddedIcon .glyph {
- fill: #486D91;
-}
#device-details-panel h2 {
display: inline-block;
margin: 8px 0;
}
-#device-details-panel .editable {
- cursor: pointer;
- border-bottom: 1px dashed darkgreen;
-}
#device-details-panel h2 input {
font-size: 1.0em;
@@ -108,8 +73,6 @@
#device-details-panel td.label {
font-style: italic;
padding-right: 12px;
- /* works for both light and dark themes ... */
- color: #777;
}
#device-details-panel .actionBtns div {
@@ -121,13 +84,6 @@
margin: 0 auto;
}
-.light #device-details-panel hr {
- opacity: .5;
- border-color: #FFF;
-}
-.dark #device-details-panel hr {
- border-color: #666;
-}
#device-details-panel .bottom table {
border-spacing: 0;
@@ -137,14 +93,6 @@
letter-spacing: 0.02em;
}
-.light #device-details-panel .bottom th {
- background-color: #CCC;
- /* default text color */
-}
-.dark #device-details-panel .bottom th {
- background-color: #131313;
- color: #ccc;
-}
#device-details-panel .bottom th,
#device-details-panel .bottom td {
@@ -152,15 +100,3 @@
text-align: center;
}
-.light #device-details-panel .bottom tr:nth-child(odd) {
- background-color: #f9f9f9;
-}
-.light #device-details-panel .bottom tr:nth-child(even) {
- background-color: #EBEDF2;
-}
-.dark #device-details-panel .bottom tr:nth-child(odd) {
- background-color: #333;
-}
-.dark #device-details-panel .bottom tr:nth-child(even) {
- background-color: #555;
-}
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
new file mode 100644
index 0000000..f5c1a80
--- /dev/null
+++ b/web/gui/src/main/webapp/app/view/flow/flow-theme.css
@@ -0,0 +1,78 @@
+/*
+ * Copyright 2016-present Open Networking Laboratory
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ ONOS GUI -- Flow View (theme) -- CSS file
+ */
+
+
+.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;
+}
+
+.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;
+}
+.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;
+}
+.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;
+}
+.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;
+}
+
+/* highlighted color */
+.light #ov-flow tr:nth-child(6n + 1).data-change,
+.light #ov-flow tr:nth-child(6n + 2).data-change,
+.light #ov-flow tr:nth-child(6n + 3).data-change,
+.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;
+}
+.dark #ov-flow tr:nth-child(6n + 1).data-change,
+.dark #ov-flow tr:nth-child(6n + 2).data-change,
+.dark #ov-flow tr:nth-child(6n + 3).data-change,
+.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;
+}
+
+#ov-flow td.selector,
+#ov-flow td.treatment {
+ opacity: 0.65;
+}
diff --git a/web/gui/src/main/webapp/app/view/flow/flow.css b/web/gui/src/main/webapp/app/view/flow/flow.css
index 805f4c8..5b59f1b 100644
--- a/web/gui/src/main/webapp/app/view/flow/flow.css
+++ b/web/gui/src/main/webapp/app/view/flow/flow.css
@@ -15,7 +15,7 @@
*/
/*
- ONOS GUI -- Flow View -- CSS file
+ ONOS GUI -- Flow View (layout) -- CSS file
*/
#ov-flow h2 {
@@ -25,59 +25,6 @@
#ov-flow div.ctrl-btns {
}
-.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;
-}
-
-.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;
-}
-.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;
-}
-.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;
-}
-.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;
-}
-
-/* highlighted color */
-.light #ov-flow tr:nth-child(6n + 1).data-change,
-.light #ov-flow tr:nth-child(6n + 2).data-change,
-.light #ov-flow tr:nth-child(6n + 3).data-change,
-.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;
-}
-.dark #ov-flow tr:nth-child(6n + 1).data-change,
-.dark #ov-flow tr:nth-child(6n + 2).data-change,
-.dark #ov-flow tr:nth-child(6n + 3).data-change,
-.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;
-}
-
#ov-flow td {
text-align: center;
}
@@ -88,5 +35,4 @@
#ov-flow td.treatment {
text-align: left;
padding-left: 36px;
- opacity: 0.65;
-}
\ No newline at end of file
+}
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
new file mode 100644
index 0000000..6e41520
--- /dev/null
+++ b/web/gui/src/main/webapp/app/view/group/group-theme.css
@@ -0,0 +1,64 @@
+/*
+ * Copyright 2016-present Open Networking Laboratory
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ 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;
+}
+
+.light #ov-group tr:nth-child(4n + 1),
+.light #ov-group tr:nth-child(4n + 2) {
+ background-color: #eee;
+}
+.light #ov-group tr:nth-child(4n + 3),
+.light #ov-group tr:nth-child(4n) {
+ background-color: #ddd;
+}
+.dark #ov-group tr:nth-child(4n + 1),
+.dark #ov-group tr:nth-child(4n + 2) {
+ background-color: #444;
+}
+.dark #ov-group tr:nth-child(4n + 3),
+.dark #ov-group tr:nth-child(4n) {
+ background-color: #333;
+}
+
+/* highlighted color */
+.light #ov-group tr:nth-child(4n + 1).data-change,
+.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;
+}
+.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;
+}
diff --git a/web/gui/src/main/webapp/app/view/group/group.css b/web/gui/src/main/webapp/app/view/group/group.css
index 01907d4..b158f83 100644
--- a/web/gui/src/main/webapp/app/view/group/group.css
+++ b/web/gui/src/main/webapp/app/view/group/group.css
@@ -15,7 +15,7 @@
*/
/*
- ONOS GUI -- Group View -- CSS file
+ ONOS GUI -- Group View (layout) -- CSS file
*/
#ov-group h2 {
@@ -25,50 +25,7 @@
#ov-group div.ctrl-btns {
}
-.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;
-}
-
-.light #ov-group tr:nth-child(4n + 1),
-.light #ov-group tr:nth-child(4n + 2) {
- background-color: #eee;
-}
-.light #ov-group tr:nth-child(4n + 3),
-.light #ov-group tr:nth-child(4n) {
- background-color: #ddd;
-}
-.dark #ov-group tr:nth-child(4n + 1),
-.dark #ov-group tr:nth-child(4n + 2) {
- background-color: #444;
-}
-.dark #ov-group tr:nth-child(4n + 3),
-.dark #ov-group tr:nth-child(4n) {
- background-color: #333;
-}
-
-/* highlighted color */
-.light #ov-group tr:nth-child(4n + 1).data-change,
-.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;
-}
-.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;
-}
#ov-group td {
text-align: center;
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
new file mode 100644
index 0000000..4d551f1
--- /dev/null
+++ b/web/gui/src/main/webapp/app/view/intent/intent-theme.css
@@ -0,0 +1,62 @@
+/*
+ * Copyright 2016-present Open Networking Laboratory
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ ONOS GUI -- Intent View (theme) -- CSS file
+ */
+
+.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;
+}
+.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;
+}
+.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;
+}
+.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;
+}
+
+.light #ov-intent tr:nth-child(6n + 1).data-change,
+.light #ov-intent tr:nth-child(6n + 2).data-change,
+.light #ov-intent tr:nth-child(6n + 3).data-change,
+.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;
+}
+.dark #ov-intent tr:nth-child(6n + 1).data-change,
+.dark #ov-intent tr:nth-child(6n + 2).data-change,
+.dark #ov-intent tr:nth-child(6n + 3).data-change,
+.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;
+}
+
+#ov-intent td.resources,
+#ov-intent td.details {
+ opacity: 0.65;
+}
diff --git a/web/gui/src/main/webapp/app/view/intent/intent.css b/web/gui/src/main/webapp/app/view/intent/intent.css
index ed002b4..223168f 100644
--- a/web/gui/src/main/webapp/app/view/intent/intent.css
+++ b/web/gui/src/main/webapp/app/view/intent/intent.css
@@ -15,7 +15,7 @@
*/
/*
- ONOS GUI -- Intent View -- CSS file
+ ONOS GUI -- Intent View (layout) -- CSS file
*/
#ov-intent h2 {
@@ -25,46 +25,8 @@
#ov-intent div.ctrl-btns {
}
-.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;
-}
-.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;
-}
-.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;
-}
-.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;
-}
-
-.light #ov-intent tr:nth-child(6n + 1).data-change,
-.light #ov-intent tr:nth-child(6n + 2).data-change,
-.light #ov-intent tr:nth-child(6n + 3).data-change,
-.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;
-}
-.dark #ov-intent tr:nth-child(6n + 1).data-change,
-.dark #ov-intent tr:nth-child(6n + 2).data-change,
-.dark #ov-intent tr:nth-child(6n + 3).data-change,
-.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;
-}
#ov-intent td.resources,
#ov-intent td.details {
padding-left: 36px;
- opacity: 0.65;
}
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
new file mode 100644
index 0000000..211b386
--- /dev/null
+++ b/web/gui/src/main/webapp/app/view/meter/meter-theme.css
@@ -0,0 +1,64 @@
+/*
+ * Copyright 2016-present Open Networking Laboratory
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ 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;
+}
+
+.light #ov-meter tr:nth-child(4n + 1),
+.light #ov-meter tr:nth-child(4n + 2) {
+ background-color: #eee;
+}
+.light #ov-meter tr:nth-child(4n + 3),
+.light #ov-meter tr:nth-child(4n) {
+ background-color: #ddd;
+}
+.dark #ov-meter tr:nth-child(4n + 1),
+.dark #ov-meter tr:nth-child(4n + 2) {
+ background-color: #444;
+}
+.dark #ov-meter tr:nth-child(4n + 3),
+.dark #ov-meter tr:nth-child(4n) {
+ background-color: #333;
+}
+
+/* highlighted color */
+.light #ov-meter tr:nth-child(4n + 1).data-change,
+.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;
+}
+.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;
+}
diff --git a/web/gui/src/main/webapp/app/view/meter/meter.css b/web/gui/src/main/webapp/app/view/meter/meter.css
index ad9a1b1..69b3262 100644
--- a/web/gui/src/main/webapp/app/view/meter/meter.css
+++ b/web/gui/src/main/webapp/app/view/meter/meter.css
@@ -15,7 +15,7 @@
*/
/*
- ONOS GUI -- Meter View -- CSS file
+ ONOS GUI -- Meter View (layout) -- CSS file
*/
#ov-meter h2 {
@@ -25,51 +25,6 @@
#ov-meter div.ctrl-btns {
}
-.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;
-}
-
-.light #ov-meter tr:nth-child(4n + 1),
-.light #ov-meter tr:nth-child(4n + 2) {
- background-color: #eee;
-}
-.light #ov-meter tr:nth-child(4n + 3),
-.light #ov-meter tr:nth-child(4n) {
- background-color: #ddd;
-}
-.dark #ov-meter tr:nth-child(4n + 1),
-.dark #ov-meter tr:nth-child(4n + 2) {
- background-color: #444;
-}
-.dark #ov-meter tr:nth-child(4n + 3),
-.dark #ov-meter tr:nth-child(4n) {
- background-color: #333;
-}
-
-/* highlighted color */
-.light #ov-meter tr:nth-child(4n + 1).data-change,
-.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;
-}
-.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;
-}
-
#ov-meter td {
text-align: center;
}
@@ -80,4 +35,4 @@
text-align: left;
padding-left: 36px;
opacity: 0.65;
-}
\ No newline at end of file
+}
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
new file mode 100644
index 0000000..c01ed13
--- /dev/null
+++ b/web/gui/src/main/webapp/app/view/port/port-theme.css
@@ -0,0 +1,33 @@
+/*
+ * Copyright 2016-present Open Networking Laboratory
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ 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;
+}
diff --git a/web/gui/src/main/webapp/app/view/port/port.css b/web/gui/src/main/webapp/app/view/port/port.css
index 3940cc6..dd4b878 100644
--- a/web/gui/src/main/webapp/app/view/port/port.css
+++ b/web/gui/src/main/webapp/app/view/port/port.css
@@ -15,7 +15,7 @@
*/
/*
- ONOS GUI -- Port View -- CSS file
+ ONOS GUI -- Port View (layout) -- CSS file
*/
#ov-port h2 {
@@ -25,20 +25,6 @@
#ov-port div.ctrl-btns {
}
-.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;
-}
-
#ov-port td {
text-align: center;
}
diff --git a/web/gui/src/main/webapp/app/view/processor/processor-theme.css b/web/gui/src/main/webapp/app/view/processor/processor-theme.css
new file mode 100644
index 0000000..d409d0f
--- /dev/null
+++ b/web/gui/src/main/webapp/app/view/processor/processor-theme.css
@@ -0,0 +1,33 @@
+/*
+ * Copyright 2016-present Open Networking Laboratory
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ ONOS GUI -- Processor View (theme) -- CSS file
+ */
+
+.light #ov-processor .current-view use {
+ fill: white;
+}
+.dark #ov-processor .current-view use {
+ fill: #304860;
+}
+
+.light #ov-processor .current-view rect {
+ fill: deepskyblue;
+}
+.dark #ov-processor .current-view rect {
+ fill: #eee;
+}
diff --git a/web/gui/src/main/webapp/app/view/processor/processor.css b/web/gui/src/main/webapp/app/view/processor/processor.css
index 7301b64..e4f516a 100644
--- a/web/gui/src/main/webapp/app/view/processor/processor.css
+++ b/web/gui/src/main/webapp/app/view/processor/processor.css
@@ -15,7 +15,7 @@
*/
/*
- ONOS GUI -- Processor View -- CSS file
+ ONOS GUI -- Processor View (layout) -- CSS file
*/
#ov-processor h2 {
@@ -26,20 +26,6 @@
width: 40px;
}
-.light #ov-processor .current-view use {
- fill: white;
-}
-.dark #ov-processor .current-view use {
- fill: #304860;
-}
-
-.light #ov-processor .current-view rect {
- fill: deepskyblue;
-}
-.dark #ov-processor .current-view rect {
- fill: #eee;
-}
-
#ov-processor td.number {
text-align: right;
}
diff --git a/web/gui/src/main/webapp/app/view/topo/topo-theme.css b/web/gui/src/main/webapp/app/view/topo/topo-theme.css
new file mode 100644
index 0000000..587fcf6
--- /dev/null
+++ b/web/gui/src/main/webapp/app/view/topo/topo-theme.css
@@ -0,0 +1,607 @@
+/*
+ * Copyright 2016-present Open Networking Laboratory
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ ONOS GUI -- Topology View (theme) -- CSS file
+ */
+
+/* --- Base SVG Layer --- */
+
+.light #ov-topo svg {
+ background-color: #fff;
+}
+.dark #ov-topo svg {
+ background-color: #2b2b2b;
+}
+
+/* --- "No Devices" Layer --- */
+
+.light #ov-topo svg .noDevsBird {
+ fill: #ecd;
+}
+.dark #ov-topo svg .noDevsBird {
+ fill: #683434;
+}
+
+.light #ov-topo svg #topo-noDevsLayer text {
+ fill: #dde;
+}
+.dark #ov-topo svg #topo-noDevsLayer text {
+ fill: #3b3b4f;
+}
+
+/* --- Topo Map --- */
+
+#ov-topo svg #topo-map {
+ stroke-width: 2px;
+ fill: transparent;
+}
+
+.light #ov-topo svg #topo-map {
+ stroke: #ddd;
+}
+.dark #ov-topo svg #topo-map {
+ stroke: #444;
+}
+
+/* --- general topo-panel styling --- */
+
+.light .topo-p svg .glyph {
+ fill: #222;
+}
+.dark .topo-p svg .glyph {
+ fill: #ddd;
+}
+
+.light .topo-p svg .glyph.overlay {
+ fill: #fff;
+}
+.dark .topo-p svg .glyph.overlay {
+ fill: #222;
+}
+
+.light .topo-p h2 {
+ color: black;
+}
+.dark .topo-p h2 {
+ color: #ddd;
+}
+
+.light .topo-p h3 {
+ color: black;
+}
+.dark .topo-p h3 {
+ color: #ddd;
+}
+
+.topo-p td.label {
+ /* works for both light and dark themes ... */
+ color: #777;
+}
+.topo-p td.value {
+}
+
+.light .topo-p hr {
+ background-color: #ccc;
+ color: #ccc;
+}
+.dark .topo-p hr {
+ background-color: #888;
+ color: #888;
+}
+
+/* --- Topo Instance Panel --- */
+
+#topo-p-instance svg rect {
+ stroke-width: 3.5;
+}
+#topo-p-instance .online svg rect {
+ opacity: 1;
+}
+.light #topo-p-instance svg rect {
+ fill: #ccc;
+ stroke: #aaa;
+}
+.light #topo-p-instance .online svg rect {
+ fill: #9cf;
+ stroke: #555;
+}
+.dark #topo-p-instance svg rect {
+ fill: #666;
+ stroke: #222;
+}
+.dark #topo-p-instance .online svg rect {
+ fill: #9cf;
+ stroke: #999;
+}
+
+
+#topo-p-instance svg .glyph {
+ fill: #888;
+ fill-rule: evenodd;
+}
+#topo-p-instance .online svg .glyph {
+ fill: #000;
+}
+
+
+#topo-p-instance svg .badgeIcon {
+ fill-rule: evenodd;
+ opacity: 0.4;
+}
+.light #topo-p-instance svg .badgeIcon {
+ fill: #777;
+}
+.dark #topo-p-instance svg .badgeIcon {
+ fill: #555;
+}
+
+#topo-p-instance .online svg .badgeIcon {
+ opacity: 1.0;
+}
+.light #topo-p-instance .online svg .badgeIcon {
+ fill: #fff;
+}
+.dark #topo-p-instance .online svg .badgeIcon {
+ fill: #fff;
+}
+
+#topo-p-instance svg text {
+ text-anchor: middle;
+ opacity: 0.3;
+}
+#topo-p-instance .online svg text {
+ opacity: 1.0;
+}
+.light #topo-p-instance svg text {
+ fill: #444;
+}
+.light #topo-p-instance .online svg text {
+ fill: #eee;
+}
+.dark #topo-p-instance svg text {
+ fill: #aaa;
+}
+.dark #topo-p-instance .online svg text {
+ fill: #ccc;
+}
+
+#topo-p-instance .onosInst.mastership {
+ opacity: 0.3;
+}
+#topo-p-instance .onosInst.mastership.affinity {
+ opacity: 1.0;
+}
+.light #topo-p-instance .onosInst.mastership.affinity svg rect {
+ filter: url(#blue-glow);
+}
+.dark #topo-p-instance .onosInst.mastership.affinity svg rect {
+ filter: url(#yellow-glow);
+}
+.light.firefox #topo-p-instance .onosInst.mastership.affinity svg rect {
+ filter: url("data:image/svg+xml;utf8, <svg xmlns = \'http://www.w3.org/2000/svg\'><filter x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\" id=\"blue-glow\"><feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.7 0 0 0 1 0 \"></feColorMatrix><feGaussianBlur stdDeviation=\"3\" result=\"coloredBlur\"></feGaussianBlur><feMerge><feMergeNode in=\"coloredBlur\"></feMergeNode><feMergeNode in=\"SourceGraphic\"></feMergeNode></feMerge></filter></svg>#blue-glow");
+}
+.dark.firefox #topo-p-instance .onosInst.mastership.affinity svg rect {
+ filter: url("data:image/svg+xml;utf8, <svg xmlns = \'http://www.w3.org/2000/svg\'><filter x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\" id=\"yellow-glow\"><feColorMatrix type=\"matrix\" values=\"0 0 0 0 1.0 0 0 0 0 1.0 0 0 0 0 0.3 0 0 0 1 0 \"></feColorMatrix><feGaussianBlur stdDeviation=\"3\" result=\"coloredBlur\"></feGaussianBlur><feMerge><feMergeNode in=\"coloredBlur\"></feMergeNode><feMergeNode in=\"SourceGraphic\"></feMergeNode></feMerge></filter></svg>#yellow-glow");
+}
+
+/* --- Topo Nodes --- */
+
+#ov-topo svg .suppressed {
+ opacity: 0.5 !important;
+}
+
+#ov-topo svg .suppressedmax {
+ opacity: 0.2 !important;
+}
+
+.light #ov-topo svg .node.selected rect,
+.light #ov-topo svg .node.selected circle {
+ fill: #f90;
+ filter: url(#blue-glow);
+}
+.dark #ov-topo svg .node.selected rect,
+.dark #ov-topo svg .node.selected circle {
+ fill: #f90;
+ filter: url(#yellow-glow);
+}
+.light.firefox #ov-topo svg .node.selected rect,
+.light.firefox #ov-topo svg .node.selected circle {
+ filter: url("data:image/svg+xml;utf8, <svg xmlns = \'http://www.w3.org/2000/svg\'><filter x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\" id=\"blue-glow\"><feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.7 0 0 0 1 0 \"></feColorMatrix><feGaussianBlur stdDeviation=\"3\" result=\"coloredBlur\"></feGaussianBlur><feMerge><feMergeNode in=\"coloredBlur\"></feMergeNode><feMergeNode in=\"SourceGraphic\"></feMergeNode></feMerge></filter></svg>#blue-glow");
+}
+.dark.firefox #ov-topo svg .node.selected rect,
+.dark.firefox #ov-topo svg .node.selected circle {
+ filter: url("data:image/svg+xml;utf8, <svg xmlns = \'http://www.w3.org/2000/svg\'><filter x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\" id=\"yellow-glow\"><feColorMatrix type=\"matrix\" values=\"0 0 0 0 1.0 0 0 0 0 1.0 0 0 0 0 0.3 0 0 0 1 0 \"></feColorMatrix><feGaussianBlur stdDeviation=\"3\" result=\"coloredBlur\"></feGaussianBlur><feMerge><feMergeNode in=\"coloredBlur\"></feMergeNode><feMergeNode in=\"SourceGraphic\"></feMergeNode></feMerge></filter></svg>#yellow-glow");
+}
+
+/* Device Nodes */
+
+#ov-topo svg .node.device rect {
+ stroke-width: 1.5;
+}
+
+#ov-topo svg .node.device.fixed rect {
+ stroke-width: 1.5;
+}
+.light #ov-topo svg .node.device.fixed rect {
+ stroke: #aaa;
+}
+.dark #ov-topo svg .node.device.fixed rect {
+ stroke: #999;
+}
+
+/* note: device is offline without the 'online' class */
+.light #ov-topo svg .node.device {
+ fill: #777;
+}
+.dark #ov-topo svg .node.device {
+ fill: #555;
+}
+
+.light #ov-topo svg .node.device rect {
+ stroke: #666;
+}
+.light #ov-topo svg .node.device rect {
+ stroke: #999;
+}
+
+.light #ov-topo svg .node.device.online {
+ fill: #6e7fa3;
+}
+.dark #ov-topo svg .node.device.online {
+ fill: #4E5C7F;
+}
+
+/* note: device is offline without the 'online' class */
+#ov-topo svg .node.device text {
+ fill: #bbb;
+ font: 10pt sans-serif;
+}
+
+#ov-topo svg .node.device.online text {
+ fill: white;
+}
+
+#ov-topo svg .node.device .svgIcon rect {
+ fill: #aaa;
+}
+#ov-topo svg .node.device .svgIcon use {
+ fill: #777;
+}
+#ov-topo svg .node.device.selected .svgIcon rect {
+ fill: #f90;
+}
+#ov-topo svg .node.device.online .svgIcon rect {
+ fill: #ccc;
+}
+#ov-topo svg .node.device.online .svgIcon use {
+ fill: #000;
+}
+#ov-topo svg .node.device.online.selected .svgIcon rect {
+ fill: #f90;
+}
+
+/* Badges */
+/* (... works for both light and dark themes...) */
+#ov-topo svg .node .badge circle {
+ stroke: #aaa;
+}
+
+#ov-topo svg .node .badge.badgeInfo circle {
+ fill: #99d;
+}
+
+#ov-topo svg .node .badge.badgeWarn circle {
+ fill: #da2;
+}
+
+#ov-topo svg .node .badge.badgeError circle {
+ fill: #e44;
+}
+
+#ov-topo svg .node .badge use {
+ fill: white !important;
+}
+
+#ov-topo svg .node .badge.badgeInfo use {
+ fill: #448;
+}
+
+#ov-topo svg .node .badge text {
+ fill: white !important;
+}
+
+#ov-topo svg .node .badge.badgeInfo text {
+ fill: #448;
+}
+
+/* Host Nodes */
+
+#ov-topo svg .node.host {
+}
+
+#ov-topo svg .node.host text {
+ stroke: none;
+ font: 9pt sans-serif;
+}
+.light #ov-topo svg .node.host text {
+ fill: #846;
+}
+.dark #ov-topo svg .node.host text {
+ fill: #BB809D;
+}
+
+.light svg .node.host circle {
+ stroke: #000;
+ fill: #edb;
+}
+.dark svg .node.host circle {
+ stroke: #eee;
+ fill: #B2A180;
+}
+
+.light svg .node.host .svgIcon {
+ fill: #444;
+}
+.dark svg .node.host .svgIcon {
+ fill: #222;
+}
+
+/* --- Topo Links --- */
+
+#ov-topo svg .link {
+ opacity: .9;
+}
+
+#ov-topo svg .link.selected,
+#ov-topo svg .link.enhanced {
+ stroke-width: 4.5px;
+}
+.light #ov-topo svg .link.selected,
+.light #ov-topo svg .link.enhanced {
+ filter: url(#blue-glow);
+}
+.dark #ov-topo svg .link.selected,
+.dark #ov-topo svg .link.enhanced {
+ filter: url(#yellow-glow);
+}
+.light.firefox #ov-topo svg .link.selected,
+.light.firefox #ov-topo svg .link.enhanced {
+ filter: url("data:image/svg+xml;utf8, <svg xmlns = \'http://www.w3.org/2000/svg\'><filter x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\" id=\"blue-glow\"><feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.7 0 0 0 1 0 \"></feColorMatrix><feGaussianBlur stdDeviation=\"3\" result=\"coloredBlur\"></feGaussianBlur><feMerge><feMergeNode in=\"coloredBlur\"></feMergeNode><feMergeNode in=\"SourceGraphic\"></feMergeNode></feMerge></filter></svg>#blue-glow");
+}
+.dark.firefox #ov-topo svg .link.selected,
+.dark.firefox #ov-topo svg .link.enhanced {
+ filter: url("data:image/svg+xml;utf8, <svg xmlns = \'http://www.w3.org/2000/svg\'><filter x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\" id=\"yellow-glow\"><feColorMatrix type=\"matrix\" values=\"0 0 0 0 1.0 0 0 0 0 1.0 0 0 0 0 0.3 0 0 0 1 0 \"></feColorMatrix><feGaussianBlur stdDeviation=\"3\" result=\"coloredBlur\"></feGaussianBlur><feMerge><feMergeNode in=\"coloredBlur\"></feMergeNode><feMergeNode in=\"SourceGraphic\"></feMergeNode></feMerge></filter></svg>#yellow-glow");
+
+}
+
+#ov-topo svg .link.inactive {
+ opacity: .5;
+ stroke-dasharray: 8 4;
+}
+/* FIXME: Review for not-permitted links */
+#ov-topo svg .link.not-permitted {
+ stroke: rgb(255,0,0);
+ stroke-width: 5.0;
+ stroke-dasharray: 8 4;
+}
+
+#ov-topo svg .link.secondary {
+ stroke-width: 3px;
+}
+.light #ov-topo svg .link.secondary {
+ stroke: rgba(0,153,51,0.5);
+}
+.dark #ov-topo svg .link.secondary {
+ stroke: rgba(121,231,158,0.5);
+}
+
+/* Port traffic color visualization for Kbps, Mbps, and Gbps */
+
+.light #ov-topo svg .link.secondary.port-traffic-Kbps {
+ stroke: rgb(0,153,51);
+ stroke-width: 5.0;
+}
+.dark #ov-topo svg .link.secondary.port-traffic-Kbps {
+ stroke: rgb(98, 153, 118);
+ stroke-width: 5.0;
+}
+
+.light #ov-topo svg .link.secondary.port-traffic-Mbps {
+ stroke: rgb(128,145,27);
+ stroke-width: 6.5;
+}
+.dark #ov-topo svg .link.secondary.port-traffic-Mbps {
+ stroke: rgb(91, 109, 54);
+ stroke-width: 6.5;
+}
+
+.light #ov-topo svg .link.secondary.port-traffic-Gbps {
+ stroke: rgb(255, 137, 3);
+ stroke-width: 8.0;
+}
+.dark #ov-topo svg .link.secondary.port-traffic-Gbps {
+ stroke: rgb(174, 119, 55);
+ stroke-width: 8.0;
+}
+
+.light #ov-topo svg .link.secondary.port-traffic-Gbps-choked {
+ stroke: rgb(183, 30, 21);
+ stroke-width: 8.0;
+}
+.dark #ov-topo svg .link.secondary.port-traffic-Gbps-choked {
+ stroke: rgb(127, 40, 39);
+ stroke-width: 8.0;
+}
+
+
+
+#ov-topo svg .link.animated {
+ stroke-dasharray: 8 5;
+ animation: ants 5s infinite linear;
+ /* below line will be added via Javascript based on path */
+ /*animation-direction: reverse;*/
+}
+@keyframes ants {
+ from {
+ stroke-dashoffset: 0;
+ }
+ to {
+ stroke-dashoffset: 400;
+ }
+}
+
+#ov-topo svg .link.primary {
+ stroke-width: 4px;
+}
+.light #ov-topo svg .link.primary {
+ stroke: #ffA300;
+}
+.dark #ov-topo svg .link.primary {
+ stroke: #D58E0F;
+}
+
+#ov-topo svg .link.secondary.optical {
+ stroke-width: 4px;
+}
+.light #ov-topo svg .link.secondary.optical {
+ stroke: rgba(128,64,255,0.5);
+}
+.dark #ov-topo svg .link.secondary.optical {
+ stroke: rgba(164,139,215,0.5);
+}
+
+#ov-topo svg .link.primary.optical {
+ stroke-width: 6px;
+}
+.light #ov-topo svg .link.primary.optical {
+ stroke: #74f;
+}
+.dark #ov-topo svg .link.primary.optical {
+ stroke: #7352CD;
+}
+
+/* Link Labels */
+#ov-topo svg .linkLabel rect {
+ stroke: none;
+}
+.light #ov-topo svg .linkLabel rect {
+ fill: #eee;
+}
+.dark #ov-topo svg .linkLabel rect {
+ fill: #555;
+}
+
+.light #ov-topo svg .linkLabel text {
+ fill: #444;
+}
+.dark #ov-topo svg .linkLabel text {
+ fill: #eee;
+}
+
+/* Port Labels */
+
+#ov-topo svg .portLabel rect {
+ stroke: none;
+}
+.light #ov-topo svg .portLabel rect {
+ fill: #eee;
+}
+.dark #ov-topo svg .portLabel rect {
+ fill: #222;
+}
+
+.light #ov-topo svg .portLabel text {
+ fill: #444;
+}
+.dark #ov-topo svg .portLabel text {
+ fill: #eee;
+}
+
+/* Number of Links Labels */
+
+
+.light #ov-topo text.numLinkText {
+ fill: #444;
+}
+.dark #ov-topo text.numLinkText {
+ fill: #eee;
+}
+
+/* ------------------------------------------------- */
+/* Sprite Layer */
+
+.light #ov-topo svg #topo-sprites .gold1 use {
+ stroke: #fda;
+ fill: none;
+}
+.dark #ov-topo svg #topo-sprites .gold1 use {
+ stroke: #541;
+ fill: none;
+}
+.light #ov-topo svg #topo-sprites .gold1 text {
+ fill: #eda;
+}
+.dark #ov-topo svg #topo-sprites .gold1 text {
+ fill: #543;
+}
+
+.light #ov-topo svg #topo-sprites .blue1 use {
+ stroke: #bbd;
+ fill: none;
+}
+.dark #ov-topo svg #topo-sprites .blue1 use {
+ stroke: #445;
+ fill: none;
+}
+.light #ov-topo svg #topo-sprites .blue1 text {
+ fill: #cce;
+}
+.dark #ov-topo svg #topo-sprites .blue1 text {
+ fill: #446;
+}
+
+.light #ov-topo svg #topo-sprites .gray1 use {
+ stroke: #ccc;
+ fill: none;
+}
+.dark #ov-topo svg #topo-sprites .gray1 use {
+ stroke: #333;
+ fill: none;
+}
+.light #ov-topo svg #topo-sprites .gray1 text {
+ fill: #ddd;
+}
+.dark #ov-topo svg #topo-sprites .gray1 text {
+ fill: #444;
+}
+
+/* fills */
+.light #ov-topo svg #topo-sprites use.fill-gray2 {
+ fill: #eee;
+}
+.dark #ov-topo svg #topo-sprites use.fill-gray2 {
+ fill: #444;
+}
+
+.light #ov-topo svg #topo-sprites use.fill-blue2 {
+ fill: #bce;
+}
+.dark #ov-topo svg #topo-sprites use.fill-blue2 {
+ fill: #447;
+}
+
+/* -- MISC -- */
diff --git a/web/gui/src/main/webapp/app/view/topo/topo.css b/web/gui/src/main/webapp/app/view/topo/topo.css
index b3c25ba..5233976 100644
--- a/web/gui/src/main/webapp/app/view/topo/topo.css
+++ b/web/gui/src/main/webapp/app/view/topo/topo.css
@@ -15,7 +15,7 @@
*/
/*
- ONOS GUI -- Topology View -- CSS file
+ ONOS GUI -- Topology View (layout) -- CSS file
*/
/* --- Base SVG Layer --- */
@@ -24,12 +24,6 @@
/* prevents the little cut/copy/paste square that would appear on iPad */
-webkit-user-select: none;
}
-.light #ov-topo svg {
- background-color: #fff;
-}
-.dark #ov-topo svg {
- background-color: #2b2b2b;
-}
/* --- "No Devices" Layer --- */
@@ -38,38 +32,10 @@
visibility: hidden;
}
-.light #ov-topo svg .noDevsBird {
- fill: #ecd;
-}
-.dark #ov-topo svg .noDevsBird {
- fill: #683434;
-}
-
#ov-topo svg #topo-noDevsLayer text {
font-size: 60pt;
font-style: italic;
}
-.light #ov-topo svg #topo-noDevsLayer text {
- fill: #dde;
-}
-.dark #ov-topo svg #topo-noDevsLayer text {
- fill: #3b3b4f;
-}
-
-
-/* --- Topo Map --- */
-
-#ov-topo svg #topo-map {
- stroke-width: 2px;
- fill: transparent;
-}
-
-.light #ov-topo svg #topo-map {
- stroke: #ddd;
-}
-.dark #ov-topo svg #topo-map {
- stroke: #444;
-}
/* --- Topo Summary Panel --- */
@@ -78,6 +44,7 @@
/* Base css from panel.css */
}
+
/* --- Topo Detail Panel --- */
#topo-p-detail {
@@ -117,21 +84,6 @@
height: 42px;
}
-.light .topo-p svg .glyph {
- fill: #222;
-}
-
-.dark .topo-p svg .glyph.overlay {
- fill: #222;
-}
-
-.dark .topo-p svg .glyph {
- fill: #ddd;
-}
-.light .topo-p svg .glyph.overlay {
- fill: #fff;
-}
-
.topo-p h2 {
padding: 0 4px;
@@ -141,12 +93,6 @@
width: 210px;
vertical-align: middle;
}
-.light .topo-p h2 {
- color: black;
-}
-.dark .topo-p h2 {
- color: #ddd;
-}
.topo-p h3 {
padding: 0 4px;
@@ -155,12 +101,6 @@
top: 20px;
left: 50px;
}
-.light .topo-p h3 {
- color: black;
-}
-.dark .topo-p h3 {
- color: #ddd;
-}
.topo-p p, table {
padding: 4px;
@@ -173,8 +113,6 @@
.topo-p td.label {
font-style: italic;
padding-right: 12px;
- /* works for both light and dark themes ... */
- color: #777;
}
.topo-p td.value {
}
@@ -183,14 +121,7 @@
height: 1px;
border: 0;
}
-.light .topo-p hr {
- background-color: #ccc;
- color: #ccc;
-}
-.dark .topo-p hr {
- background-color: #888;
- color: #888;
-}
+
/* --- Topo Instance Panel --- */
@@ -205,79 +136,6 @@
cursor: pointer;
}
-#topo-p-instance svg rect {
- stroke-width: 3.5;
-}
-#topo-p-instance .online svg rect {
- opacity: 1;
-}
-.light #topo-p-instance svg rect {
- fill: #ccc;
- stroke: #aaa;
-}
-.light #topo-p-instance .online svg rect {
- fill: #9cf;
- stroke: #555;
-}
-.dark #topo-p-instance svg rect {
- fill: #666;
- stroke: #222;
-}
-.dark #topo-p-instance .online svg rect {
- fill: #9cf;
- stroke: #999;
-}
-
-
-#topo-p-instance svg .glyph {
- fill: #888;
- fill-rule: evenodd;
-}
-#topo-p-instance .online svg .glyph {
- fill: #000;
-}
-
-#topo-p-instance svg .badgeIcon {
- fill-rule: evenodd;
- opacity: 0.4;
-}
-.light #topo-p-instance svg .badgeIcon {
- fill: #777;
-}
-.dark #topo-p-instance svg .badgeIcon {
- fill: #555;
-}
-
-#topo-p-instance .online svg .badgeIcon {
- opacity: 1.0;
-}
-.light #topo-p-instance .online svg .badgeIcon {
- fill: #fff;
-}
-.dark #topo-p-instance .online svg .badgeIcon {
- fill: #fff;
-}
-
-#topo-p-instance svg text {
- text-anchor: middle;
- opacity: 0.3;
-}
-#topo-p-instance .online svg text {
- opacity: 1.0;
-}
-.light #topo-p-instance svg text {
- fill: #444;
-}
-.light #topo-p-instance .online svg text {
- fill: #eee;
-}
-.dark #topo-p-instance svg text {
- fill: #aaa;
-}
-.dark #topo-p-instance .online svg text {
- fill: #ccc;
-}
-
#topo-p-instance svg text.instTitle {
font-size: 11pt;
font-weight: bold;
@@ -287,25 +145,6 @@
font-style: italic;
}
-#topo-p-instance .onosInst.mastership {
- opacity: 0.3;
-}
-#topo-p-instance .onosInst.mastership.affinity {
- opacity: 1.0;
-}
-.light #topo-p-instance .onosInst.mastership.affinity svg rect {
- filter: url(#blue-glow);
-}
-.dark #topo-p-instance .onosInst.mastership.affinity svg rect {
- filter: url(#yellow-glow);
-}
-.light.firefox #topo-p-instance .onosInst.mastership.affinity svg rect {
- filter: url("data:image/svg+xml;utf8, <svg xmlns = \'http://www.w3.org/2000/svg\'><filter x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\" id=\"blue-glow\"><feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.7 0 0 0 1 0 \"></feColorMatrix><feGaussianBlur stdDeviation=\"3\" result=\"coloredBlur\"></feGaussianBlur><feMerge><feMergeNode in=\"coloredBlur\"></feMergeNode><feMergeNode in=\"SourceGraphic\"></feMergeNode></feMerge></filter></svg>#blue-glow");
-}
-.dark.firefox #topo-p-instance .onosInst.mastership.affinity svg rect {
- filter: url("data:image/svg+xml;utf8, <svg xmlns = \'http://www.w3.org/2000/svg\'><filter x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\" id=\"yellow-glow\"><feColorMatrix type=\"matrix\" values=\"0 0 0 0 1.0 0 0 0 0 1.0 0 0 0 0 0.3 0 0 0 1 0 \"></feColorMatrix><feGaussianBlur stdDeviation=\"3\" result=\"coloredBlur\"></feGaussianBlur><feMerge><feMergeNode in=\"coloredBlur\"></feMergeNode><feMergeNode in=\"SourceGraphic\"></feMergeNode></feMerge></filter></svg>#yellow-glow");
-}
-
/* --- Toolbar --- */
@@ -335,345 +174,33 @@
cursor: pointer;
}
-.light #ov-topo svg .node.selected rect,
-.light #ov-topo svg .node.selected circle {
- fill: #f90;
- filter: url(#blue-glow);
-}
-.dark #ov-topo svg .node.selected rect,
-.dark #ov-topo svg .node.selected circle {
- fill: #f90;
- filter: url(#yellow-glow);
-}
-.light.firefox #ov-topo svg .node.selected rect,
-.light.firefox #ov-topo svg .node.selected circle {
- filter: url("data:image/svg+xml;utf8, <svg xmlns = \'http://www.w3.org/2000/svg\'><filter x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\" id=\"blue-glow\"><feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.7 0 0 0 1 0 \"></feColorMatrix><feGaussianBlur stdDeviation=\"3\" result=\"coloredBlur\"></feGaussianBlur><feMerge><feMergeNode in=\"coloredBlur\"></feMergeNode><feMergeNode in=\"SourceGraphic\"></feMergeNode></feMerge></filter></svg>#blue-glow");
-}
-.dark.firefox #ov-topo svg .node.selected rect,
-.dark.firefox #ov-topo svg .node.selected circle {
- filter: url("data:image/svg+xml;utf8, <svg xmlns = \'http://www.w3.org/2000/svg\'><filter x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\" id=\"yellow-glow\"><feColorMatrix type=\"matrix\" values=\"0 0 0 0 1.0 0 0 0 0 1.0 0 0 0 0 0.3 0 0 0 1 0 \"></feColorMatrix><feGaussianBlur stdDeviation=\"3\" result=\"coloredBlur\"></feGaussianBlur><feMerge><feMergeNode in=\"coloredBlur\"></feMergeNode><feMergeNode in=\"SourceGraphic\"></feMergeNode></feMerge></filter></svg>#yellow-glow");
-}
-
#ov-topo svg .node text {
pointer-events: none;
}
+
/* Device Nodes */
#ov-topo svg .node.device {
}
-#ov-topo svg .node.device rect {
- stroke-width: 1.5;
-}
-
-#ov-topo svg .node.device.fixed rect {
- stroke-width: 1.5;
-}
-.light #ov-topo svg .node.device.fixed rect {
- stroke: #aaa;
-}
-.dark #ov-topo svg .node.device.fixed rect {
- stroke: #999;
-}
-
-/* note: device is offline without the 'online' class */
-.light #ov-topo svg .node.device {
- fill: #777;
-}
-.dark #ov-topo svg .node.device {
- fill: #555;
-}
-
-.light #ov-topo svg .node.device rect {
- stroke: #666;
-}
-.light #ov-topo svg .node.device rect {
- stroke: #999;
-}
-
-.light #ov-topo svg .node.device.online {
- fill: #6e7fa3;
-}
-.dark #ov-topo svg .node.device.online {
- fill: #4E5C7F;
-}
-
-/* note: device is offline without the 'online' class */
-#ov-topo svg .node.device text {
- fill: #bbb;
- font: 10pt sans-serif;
-}
-
-#ov-topo svg .node.device.online text {
- fill: white;
-}
-
-#ov-topo svg .node.device .svgIcon rect {
- fill: #aaa;
-}
-#ov-topo svg .node.device .svgIcon use {
- fill: #777;
-}
-#ov-topo svg .node.device.selected .svgIcon rect {
- fill: #f90;
-}
-#ov-topo svg .node.device.online .svgIcon rect {
- fill: #ccc;
-}
-#ov-topo svg .node.device.online .svgIcon use {
- fill: #000;
-}
-#ov-topo svg .node.device.online.selected .svgIcon rect {
- fill: #f90;
-}
-
-/* Badges */
-/* (... works for both light and dark themes...) */
-#ov-topo svg .node .badge circle {
- stroke: #aaa;
-}
-
-#ov-topo svg .node .badge.badgeInfo circle {
- fill: #99d;
-}
-
-#ov-topo svg .node .badge.badgeWarn circle {
- fill: #da2;
-}
-
-#ov-topo svg .node .badge.badgeError circle {
- fill: #e44;
-}
-
-#ov-topo svg .node .badge use {
- fill: white !important;
-}
-
-#ov-topo svg .node .badge.badgeInfo use {
- fill: #448;
-}
-
-#ov-topo svg .node .badge text {
- fill: white !important;
-}
-
-#ov-topo svg .node .badge.badgeInfo text {
- fill: #448;
-}
-
-/* Host Nodes */
-
-#ov-topo svg .node.host {
-}
-
-#ov-topo svg .node.host text {
- stroke: none;
- font: 9pt sans-serif;
-}
-.light #ov-topo svg .node.host text {
- fill: #846;
-}
-.dark #ov-topo svg .node.host text {
- fill: #BB809D;
-}
-
-.light svg .node.host circle {
- stroke: #000;
- fill: #edb;
-}
-.dark svg .node.host circle {
- stroke: #eee;
- fill: #B2A180;
-}
-
-.light svg .node.host .svgIcon {
- fill: #444;
-}
-.dark svg .node.host .svgIcon {
- fill: #222;
-}
-
-/* --- Topo Links --- */
-
-#ov-topo svg .link {
- opacity: .9;
-}
-
-#ov-topo svg .link.selected,
-#ov-topo svg .link.enhanced {
- stroke-width: 4.5px;
-}
-.light #ov-topo svg .link.selected,
-.light #ov-topo svg .link.enhanced {
- filter: url(#blue-glow);
-}
-.dark #ov-topo svg .link.selected,
-.dark #ov-topo svg .link.enhanced {
- filter: url(#yellow-glow);
-}
-.light.firefox #ov-topo svg .link.selected,
-.light.firefox #ov-topo svg .link.enhanced {
- filter: url("data:image/svg+xml;utf8, <svg xmlns = \'http://www.w3.org/2000/svg\'><filter x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\" id=\"blue-glow\"><feColorMatrix type=\"matrix\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.7 0 0 0 1 0 \"></feColorMatrix><feGaussianBlur stdDeviation=\"3\" result=\"coloredBlur\"></feGaussianBlur><feMerge><feMergeNode in=\"coloredBlur\"></feMergeNode><feMergeNode in=\"SourceGraphic\"></feMergeNode></feMerge></filter></svg>#blue-glow");
-}
-.dark.firefox #ov-topo svg .link.selected,
-.dark.firefox #ov-topo svg .link.enhanced {
- filter: url("data:image/svg+xml;utf8, <svg xmlns = \'http://www.w3.org/2000/svg\'><filter x=\"-50%\" y=\"-50%\" width=\"200%\" height=\"200%\" id=\"yellow-glow\"><feColorMatrix type=\"matrix\" values=\"0 0 0 0 1.0 0 0 0 0 1.0 0 0 0 0 0.3 0 0 0 1 0 \"></feColorMatrix><feGaussianBlur stdDeviation=\"3\" result=\"coloredBlur\"></feGaussianBlur><feMerge><feMergeNode in=\"coloredBlur\"></feMergeNode><feMergeNode in=\"SourceGraphic\"></feMergeNode></feMerge></filter></svg>#yellow-glow");
-
-}
-
-#ov-topo svg .link.inactive {
- opacity: .5;
- stroke-dasharray: 8 4;
-}
-/* FIXME: Review for not-permitted links */
-#ov-topo svg .link.not-permitted {
- stroke: rgb(255,0,0);
- stroke-width: 5.0;
- stroke-dasharray: 8 4;
-}
-
-#ov-topo svg .link.secondary {
- stroke-width: 3px;
-}
-.light #ov-topo svg .link.secondary {
- stroke: rgba(0,153,51,0.5);
-}
-.dark #ov-topo svg .link.secondary {
- stroke: rgba(121,231,158,0.5);
-}
-
-/* Port traffic color visualization for Kbps, Mbps, and Gbps */
-
-.light #ov-topo svg .link.secondary.port-traffic-Kbps {
- stroke: rgb(0,153,51);
- stroke-width: 5.0;
-}
-.dark #ov-topo svg .link.secondary.port-traffic-Kbps {
- stroke: rgb(98, 153, 118);
- stroke-width: 5.0;
-}
-
-.light #ov-topo svg .link.secondary.port-traffic-Mbps {
- stroke: rgb(128,145,27);
- stroke-width: 6.5;
-}
-.dark #ov-topo svg .link.secondary.port-traffic-Mbps {
- stroke: rgb(91, 109, 54);
- stroke-width: 6.5;
-}
-
-.light #ov-topo svg .link.secondary.port-traffic-Gbps {
- stroke: rgb(255, 137, 3);
- stroke-width: 8.0;
-}
-.dark #ov-topo svg .link.secondary.port-traffic-Gbps {
- stroke: rgb(174, 119, 55);
- stroke-width: 8.0;
-}
-
-.light #ov-topo svg .link.secondary.port-traffic-Gbps-choked {
- stroke: rgb(183, 30, 21);
- stroke-width: 8.0;
-}
-.dark #ov-topo svg .link.secondary.port-traffic-Gbps-choked {
- stroke: rgb(127, 40, 39);
- stroke-width: 8.0;
-}
-
-
-#ov-topo svg .link.animated {
- stroke-dasharray: 8 5;
- animation: ants 5s infinite linear;
- /* below line will be added via Javascript based on path */
- /*animation-direction: reverse;*/
-}
-@keyframes ants {
- from {
- stroke-dashoffset: 0;
- }
- to {
- stroke-dashoffset: 400;
- }
-}
-
-#ov-topo svg .link.primary {
- stroke-width: 4px;
-}
-.light #ov-topo svg .link.primary {
- stroke: #ffA300;
-}
-.dark #ov-topo svg .link.primary {
- stroke: #D58E0F;
-}
-
-#ov-topo svg .link.secondary.optical {
- stroke-width: 4px;
-}
-.light #ov-topo svg .link.secondary.optical {
- stroke: rgba(128,64,255,0.5);
-}
-.dark #ov-topo svg .link.secondary.optical {
- stroke: rgba(164,139,215,0.5);
-}
-
-#ov-topo svg .link.primary.optical {
- stroke-width: 6px;
-}
-.light #ov-topo svg .link.primary.optical {
- stroke: #74f;
-}
-.dark #ov-topo svg .link.primary.optical {
- stroke: #7352CD;
-}
/* Link Labels */
-#ov-topo svg .linkLabel rect {
- stroke: none;
-}
-.light #ov-topo svg .linkLabel rect {
- fill: #eee;
-}
-.dark #ov-topo svg .linkLabel rect {
- fill: #555;
-}
-
#ov-topo svg .linkLabel text {
text-anchor: middle;
stroke-width: 0.1;
font-size: 9pt;
}
-.light #ov-topo svg .linkLabel text {
- fill: #444;
-}
-.dark #ov-topo svg .linkLabel text {
- fill: #eee;
-}
+
/* Port Labels */
-#ov-topo svg .portLabel rect {
- stroke: none;
-}
-.light #ov-topo svg .portLabel rect {
- fill: #eee;
-}
-.dark #ov-topo svg .portLabel rect {
- fill: #222;
-}
-
#ov-topo svg .portLabel text {
text-anchor: middle;
stroke-width: 0.1;
font-size: 11pt;
}
-.light #ov-topo svg .portLabel text {
- fill: #444;
-}
-.dark #ov-topo svg .portLabel text {
- fill: #eee;
-}
/* Number of Links Labels */
#ov-topo line.numLinkHash {
@@ -682,20 +209,10 @@
#ov-topo text.numLinkText {
font-size: 15pt;
-}
-
-#ov-topo text.numLinkText {
text-anchor: middle;
}
-.light #ov-topo text.numLinkText {
- fill: #444;
-}
-.dark #ov-topo text.numLinkText {
- fill: #eee;
-}
-/* ------------------------------------------------- */
/* Sprite Layer */
#ov-topo svg #topo-sprites use {
@@ -707,65 +224,8 @@
font-style: italic;
}
-.light #ov-topo svg #topo-sprites .gold1 use {
- stroke: #fda;
- fill: none;
-}
-.dark #ov-topo svg #topo-sprites .gold1 use {
- stroke: #541;
- fill: none;
-}
-.light #ov-topo svg #topo-sprites .gold1 text {
- fill: #eda;
-}
-.dark #ov-topo svg #topo-sprites .gold1 text {
- fill: #543;
-}
-.light #ov-topo svg #topo-sprites .blue1 use {
- stroke: #bbd;
- fill: none;
-}
-.dark #ov-topo svg #topo-sprites .blue1 use {
- stroke: #445;
- fill: none;
-}
-.light #ov-topo svg #topo-sprites .blue1 text {
- fill: #cce;
-}
-.dark #ov-topo svg #topo-sprites .blue1 text {
- fill: #446;
-}
-
-.light #ov-topo svg #topo-sprites .gray1 use {
- stroke: #ccc;
- fill: none;
-}
-.dark #ov-topo svg #topo-sprites .gray1 use {
- stroke: #333;
- fill: none;
-}
-.light #ov-topo svg #topo-sprites .gray1 text {
- fill: #ddd;
-}
-.dark #ov-topo svg #topo-sprites .gray1 text {
- fill: #444;
-}
-
-/* fills */
-.light #ov-topo svg #topo-sprites use.fill-gray2 {
- fill: #eee;
-}
-.dark #ov-topo svg #topo-sprites use.fill-gray2 {
- fill: #444;
-}
-
-.light #ov-topo svg #topo-sprites use.fill-blue2 {
- fill: #bce;
-}
-.dark #ov-topo svg #topo-sprites use.fill-blue2 {
- fill: #447;
-}
+/* -- MISC -- */
.notReady .readyBadge {
visibility: hidden;
@@ -778,4 +238,3 @@
.map-list select {
font-size: 20px;
}
-