Re-instating the DARK theme.
Change-Id: Ic499b4991e41747cc9472838397e5e57cd4ad089
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
index 45cc07c..f8754cd 100644
--- a/web/gui/src/main/webapp/app/view/app/app-theme.css
+++ b/web/gui/src/main/webapp/app/view/app/app-theme.css
@@ -19,14 +19,10 @@
*/
/* -- Drag-n-Drop OAR files -- */
-.light div.dropping {
+div.dropping {
border: solid 3px #0095d6;
}
-.dark div.dropping {
- /* TODO: dark theme */
- border: solid 3px #0095d6;
-}
/* -- confirmation dialog -- */
.light #app-dialog p.strong {
@@ -34,55 +30,23 @@
background-color: #ce5b58;
}
-.dark #app-dialog p.strong {
- /* TODO: dark theme */
- color: white;
- background-color: #ce5b58;
-}
-
.light #app-dialog.floatpanel.dialog {
- background-color: #fff;
+ background-color: #ffffff;
}
+/* ========== DARK Theme ========== */
+
+
+.dark .app-title {
+ color: #dddddd;
+}
+
+/* -- confirmation dialog -- */
+.dark #app-dialog p.strong {
+ color: red;
+ background-color: #ecd98e;
+}
.dark #app-dialog.floatpanel.dialog {
- /* TODO: dark theme */
- background-color: #fff;
+ background-color: #282528;
+ color:#ddddee;
}
-
-/* -- details panel -- */
-.light #application-details-panel.floatpanel {
- background-color: white;
-}
-
-.dark #application-details-panel.floatpanel {
- /* TODO: dark theme */
- background-color: white;
-}
-
-.light #application-details-panel hr {
- border: 1px solid #c7c7c0;
-}
-
-.dark #application-details-panel hr {
- /* TODO: dark theme */
- border: 1px solid #c7c7c0;
-}
-
-.light #application-details-panel .bottom tr:nth-child(odd) {
- background-color: #f4f4f4;
-}
-
-.light #application-details-panel .bottom tr:nth-child(even) {
- background-color: #fbfbfb;
-}
-
-.dark #application-details-panel .bottom tr:nth-child(odd) {
- /* TODO: dark theme */
- background-color: #f4f4f4;
-}
-
-.dark #application-details-panel .bottom tr:nth-child(even) {
- /* TODO: dark theme */
- background-color: #fbfbfb;
-}
-
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
index 9005b0c..3aa67d2 100644
--- a/web/gui/src/main/webapp/app/view/device/device-theme.css
+++ b/web/gui/src/main/webapp/app/view/device/device-theme.css
@@ -22,23 +22,14 @@
.light .dev-icon svg.embeddedIcon .icon .glyph {
fill: #0071bd;
}
-.dark .dev-icon svg.embeddedIcon .icon .glyph {
- /* TODO: dark theme */
- fill: #0071bd;
-}
.light #device-details-panel .editable {
border-bottom: 1px dashed #ca504b;
}
-
.light #device-details-panel .bottom th {
background-color: #e5e5e6;
}
-.dark #device-details-panel .bottom th {
- /* TODO: dark theme */
- background-color: #e5e5e6;
-}
.light #device-details-panel .bottom tr:nth-child(odd) {
background-color: #fbfbfb;
@@ -46,11 +37,13 @@
.light #device-details-panel .bottom tr:nth-child(even) {
background-color: #f4f4f4;
}
-.dark #device-details-panel .bottom tr:nth-child(odd) {
- /* TODO: dark theme */
- background-color: #fbfbfb;
+
+/* ========== DARK Theme ========== */
+
+.dark .dev-icon svg.embeddedIcon .icon .glyph {
+ fill: #375b7f;
}
-.dark #device-details-panel .bottom tr:nth-child(even) {
- /* TODO: dark theme */
- background-color: #f4f4f4;
+
+.dark #device-details-panel .editable {
+ border-bottom: 1px dashed #df4f4a;
}
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 e589b33..2b561f9 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
@@ -30,18 +30,6 @@
.light #ov-flow tr:nth-child(6n) {
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) {
- /* 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) {
- /* TODO: dark theme */
- background-color: #f4f4f4;
-}
/* highlighted color */
.light #ov-flow tr:nth-child(6n + 1).data-change,
@@ -50,16 +38,6 @@
.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 {
- /* 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,
-.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 {
- /* TODO: dark theme */
background-color: #fdffdc;
}
@@ -67,3 +45,25 @@
#ov-flow td.treatment {
opacity: 0.65;
}
+
+/* ========== DARK Theme ========== */
+
+.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: #333333;
+}
+.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: #3a3a3a;
+}
+
+.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: #423708;
+}
diff --git a/web/gui/src/main/webapp/app/view/flow/flow.html b/web/gui/src/main/webapp/app/view/flow/flow.html
index eb1e45a..b9fbb5d 100644
--- a/web/gui/src/main/webapp/app/view/flow/flow.html
+++ b/web/gui/src/main/webapp/app/view/flow/flow.html
@@ -56,7 +56,7 @@
</div>
<div class="search">
- <input type="text" ng-model="queryTxt" placeholder="Search Text"/>
+ <input type="text" ng-model="queryTxt" placeholder="Search"/>
<select ng-model="queryBy">
<option value="" disabled>Search By</option>
<option value="$">All Fields</option>
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 c1cd350..bd22c62 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
@@ -28,29 +28,28 @@
background-color: #f4f4f4;
}
-.dark #ov-group tr:nth-child(4n + 1),
-.dark #ov-group tr:nth-child(4n + 2) {
- /* TODO: dark theme */
- background-color: #fbfbfb;
-}
-.dark #ov-group tr:nth-child(4n + 3),
-.dark #ov-group tr:nth-child(4n) {
- /* TODO: dark theme */
- background-color: #f4f4f4;
-}
-
/* 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 {
- /* TODO: theme */
background-color: #fdffdc;
}
+
+/* ========== DARK Theme ========== */
+
+.dark #ov-group tr:nth-child(4n + 1),
+.dark #ov-group tr:nth-child(4n + 2) {
+ background-color: #333333;
+}
+.dark #ov-group tr:nth-child(4n + 3),
+.dark #ov-group tr:nth-child(4n) {
+ background-color: #3a3a3a;
+}
+
.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 {
- /* TODO: dark theme */
- background-color: #fdffdc;
+ background-color: #423708;
}
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 1d24109e..1124a24 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
@@ -29,18 +29,6 @@
.light #ov-intent tr:nth-child(6n) {
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) {
- /* 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) {
- /* TODO: dark theme */
- background-color: #f4f4f4;
-}
.light #ov-intent tr:nth-child(6n + 1).data-change,
.light #ov-intent tr:nth-child(6n + 2).data-change,
@@ -48,16 +36,6 @@
.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 {
- /* 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,
-.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 {
- /* TODO: dark theme */
background-color: #fdffdc;
}
@@ -65,3 +43,25 @@
#ov-intent td.details {
opacity: 0.65;
}
+
+/* ========== DARK Theme ========== */
+
+.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: #333333;
+}
+.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: #3a3a3a;
+}
+
+.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: #423708;
+}
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 e380aba..031cf60 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
@@ -27,29 +27,30 @@
.light #ov-meter tr:nth-child(4n) {
background-color: #f4f4f4;
}
-.dark #ov-meter tr:nth-child(4n + 1),
-.dark #ov-meter tr:nth-child(4n + 2) {
- /* TODO: dark theme */
- background-color: #fbfbfb;
-}
-.dark #ov-meter tr:nth-child(4n + 3),
-.dark #ov-meter tr:nth-child(4n) {
- /* TODO: dark theme */
- background-color: #f4f4f4;
-}
/* 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 {
- /* TODO: theme */
background-color: #fdffdc;
}
+
+
+/* ========== DARK Theme ========== */
+
+.dark #ov-meter tr:nth-child(4n + 1),
+.dark #ov-meter tr:nth-child(4n + 2) {
+ background-color: #333333;
+}
+.dark #ov-meter tr:nth-child(4n + 3),
+.dark #ov-meter tr:nth-child(4n) {
+ background-color: #3a3a3a;
+}
+
.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 {
- /* TODO: dark theme */
- background-color: #fdffdc;
+ background-color: #423708;
}
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
deleted file mode 100644
index d409d0f..0000000
--- a/web/gui/src/main/webapp/app/view/processor/processor-theme.css
+++ /dev/null
@@ -1,33 +0,0 @@
-/*
- * 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/port/port-theme.css b/web/gui/src/main/webapp/app/view/settings/settings-theme.css
similarity index 65%
rename from web/gui/src/main/webapp/app/view/port/port-theme.css
rename to web/gui/src/main/webapp/app/view/settings/settings-theme.css
index 7fd2126..33c05ef 100644
--- a/web/gui/src/main/webapp/app/view/port/port-theme.css
+++ b/web/gui/src/main/webapp/app/view/settings/settings-theme.css
@@ -1,5 +1,5 @@
/*
- * Copyright 2016-present Open Networking Laboratory
+ * Copyright 2017-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.
@@ -15,6 +15,19 @@
*/
/*
- ONOS GUI -- Port View (theme) -- CSS file
+ ONOS GUI -- Settings View (theme) -- CSS file
*/
+
+/* ========== DARK Theme ========== */
+
+/* -- Drag-n-Drop OAR files -- */
+
+.dark .floatpanel .settings-title-1 {
+ color: #dddddd;
+}
+
+.dark .floatpanel .settings-title-2 {
+ color: #eeeeee;
+}
+
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
index 80021d5..768c506 100644
--- a/web/gui/src/main/webapp/app/view/topo/topo-theme.css
+++ b/web/gui/src/main/webapp/app/view/topo/topo-theme.css
@@ -87,6 +87,9 @@
#topo-p-instance .online svg .glyph {
fill: #fff;
}
+.dark #topo-p-instance .online svg .glyph.overlay {
+ fill: #fff;
+}
/* offline */
@@ -253,7 +256,6 @@
opacity: .5;
stroke-dasharray: 8 4;
}
-/* TODO: Review for not-permitted links */
#ov-topo svg .link.not-permitted {
stroke: rgb(255,0,0);
stroke-width: 5.0;
@@ -384,3 +386,256 @@
#ov-topo svg #topo-sprites use.fill-blue2 {
fill: #bce;
}
+
+
+/* ==================================================================== */
+/* From here are the DARK theme styles - mirroring the above styles */
+/* ==================================================================== */
+
+/* --- Base SVG Layer --- */
+
+.dark #ov-topo svg {
+ background-color: #152439;
+}
+
+
+/* --- "No Devices" Layer --- */
+
+.dark #ov-topo svg .noDevsBird {
+ fill: #8f4848;
+}
+
+.dark #ov-topo svg #topo-noDevsLayer text {
+ fill: #445461;
+}
+
+/* --- Topo Map --- */
+
+.dark #ov-topo svg #topo-map {
+ stroke-width: 2px;
+ stroke: #37404d;
+ fill: #212c3a;
+}
+
+/* --- general topo-panel styling --- */
+
+.dark .topo-p {
+ background-color: #2f313c;
+ color: #c2c2b7;
+}
+.dark .topo-p svg {
+ background: #8e1e24;
+}
+
+.dark .topo-p svg .glyph {
+ fill: #c2c2b7;
+}
+
+.dark .topo-p hr {
+ background-color: #616876;
+}
+
+.dark .topo-p div.actionBtn svg use.glyph {
+ fill: #5a7f96;
+}
+
+.dark #topo-p-detail .header svg .glyph {
+ fill: #91292f;
+}
+
+.dark #toolbar-topo-tbar .tbar-row.right {
+ color: #666;
+}
+
+/* --- Topo Instance Panel --- */
+
+.dark #topo-p-instance {
+ background-color: #2f313c;
+ color: #c2c2b7;
+ border: 1px solid #364144;
+
+}
+
+.dark #topo-p-instance svg rect {
+ stroke-width: 0;
+ fill: #525660;
+}
+
+/* body of an instance */
+.dark #topo-p-instance .online svg rect {
+ opacity: 1;
+ fill: #838992;
+}
+
+.dark #topo-p-instance svg .glyph {
+ fill: #ddd;
+}
+.dark #topo-p-instance .online svg .glyph {
+ fill: #fff;
+}
+.dark #topo-p-instance .online svg .glyph.overlay {
+ fill: #c7c7c7;
+}
+
+/* offline */
+.dark #topo-p-instance svg .badgeIcon {
+ opacity: 0.4;
+ fill: #939598;
+}
+
+/* online */
+.dark #topo-p-instance .online svg .badgeIcon {
+ opacity: 1.0;
+ fill: #939598;
+}
+.dark #topo-p-instance .online svg .badgeIcon.bird {
+ fill: #ffffff;
+}
+
+.dark #topo-p-instance svg text {
+ text-anchor: left;
+ opacity: 0.5;
+ fill: #aaa;
+}
+
+.dark #topo-p-instance .online svg text {
+ opacity: 1.0;
+ fill: #fff;
+}
+
+.dark #topo-p-instance .onosInst.mastership {
+ opacity: 0.3;
+}
+.dark #topo-p-instance .onosInst.mastership.affinity {
+ opacity: 1.0;
+}
+.dark #topo-p-instance .onosInst.mastership.affinity svg rect {
+ filter: url(#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=\"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");
+}
+
+/* --- Topo Nodes --- */
+
+/* Device Nodes */
+
+/* note: device without the 'online' class is offline */
+.dark #ov-topo svg .node.device rect {
+ fill: #707070;
+}
+.dark #ov-topo svg .node.device text {
+ fill: #444;
+}
+.dark #ov-topo svg .node.device use {
+ fill: #eee;
+}
+
+.dark #ov-topo svg .node.device.online rect {
+ fill: #525660;
+}
+.dark #ov-topo svg .node.device.online text {
+ fill: #fff;
+}
+.dark #ov-topo svg .node.device.online use {
+ fill: #fff;
+}
+
+.dark #ov-topo svg .node.device.selected rect {
+ stroke-width: 2.0;
+ stroke: #009fdb;
+}
+
+
+/* Host Nodes */
+
+.dark #ov-topo svg .node.host {
+}
+
+.dark #ov-topo svg .node.host text {
+ stroke: none;
+ font: 9pt sans-serif;
+ fill: #ad5781;
+}
+
+.dark #ov-topo svg .node.host circle {
+ stroke: #a3a596;
+ fill: #8f8272;
+}
+.dark #ov-topo svg .node.host.selected .hostIcon > circle {
+ stroke-width: 2.0;
+ stroke: #009fdb;
+}
+
+.dark #ov-topo svg .node.host use {
+ fill: #000;
+}
+
+/* --- Topo Links --- */
+.dark #ov-topo svg .link.not-permitted {
+ stroke: rgb(255, 60, 60);
+}
+
+/* Port traffic color visualization for Kbps, Mbps, and Gbps */
+/* .. values good for both light and dark themes */
+
+/* Primary, Secondary (optical too) colors good for both themes */
+
+/* Link Labels */
+.dark #ov-topo svg .linkLabel rect {
+ fill: #555;
+}
+
+.dark #ov-topo svg .linkLabel text {
+ fill: #eee;
+}
+
+/* Port Labels */
+
+.dark #ov-topo svg .portLabel rect {
+ fill: #222;
+}
+
+.dark #ov-topo svg .portLabel text {
+ fill: #eee;
+}
+
+/* Number of Links Labels */
+
+.dark #ov-topo text.numLinkText {
+ fill: #eee;
+}
+
+
+/* Sprite Layer */
+
+.dark #ov-topo svg #topo-sprites .gold1 use {
+ stroke: #541;
+}
+.dark #ov-topo svg #topo-sprites .gold1 text {
+ fill: #543;
+}
+
+.dark #ov-topo svg #topo-sprites .blue1 use {
+ stroke: #445;
+}
+.dark #ov-topo svg #topo-sprites .blue1 text {
+ fill: #446;
+}
+
+.dark #ov-topo svg #topo-sprites .gray1 use {
+ stroke: #333;
+}
+.dark #ov-topo svg #topo-sprites .gray1 text {
+ fill: #444;
+}
+
+/* fills */
+.dark #ov-topo svg #topo-sprites use.fill-gray2 {
+ fill: #444;
+}
+
+.dark #ov-topo svg #topo-sprites use.fill-blue2 {
+ fill: #447;
+}