GUI -- Instance Colors tuned for dark theme.
Change-Id: I173fcf8c8683dbef148d0506e8a9436dc518e0b9
diff --git a/web/gui/src/main/webapp/app/fw/svg/svgUtil.js b/web/gui/src/main/webapp/app/fw/svg/svgUtil.js
index f8e954d..792973e 100644
--- a/web/gui/src/main/webapp/app/fw/svg/svgUtil.js
+++ b/web/gui/src/main/webapp/app/fw/svg/svgUtil.js
@@ -140,9 +140,8 @@
var lightNorm = ['#3E5780', '#78533B', '#CB4D28', '#018D61', '#8A2979', '#006D73', '#56AF00'],
lightMute = ['#A8B8CC', '#CCB3A8', '#FFC2BD', '#96D6BF', '#D19FCE', '#8FCCCA', '#CAEAA4'],
- // let's try slightly brigher colors for dark normal..
- darkNorm = ['#364D7F', '#7F5236', '#A93114', '#018D61', '#7E116D', '#02747A', '#378300'],
- darkMute = ['#1B2645', '#432B1C', '#76220E', '#035433', '#560B4A', '#013A3E', '#2D6D00'];
+ darkNorm = ['#304860', '#664631', '#a8391b', '#00754b', '#77206d', '#005959', '#428700'],
+ darkMute = ['#16203A', '#281810', '#4F1206', '#00331C', '#3D063A', '#002D2D', '#1B4400'];
var colors= {
light: {
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 c313d08..48f60a5 100644
--- a/web/gui/src/main/webapp/app/view/topo/topo.css
+++ b/web/gui/src/main/webapp/app/view/topo/topo.css
@@ -128,15 +128,28 @@
}
#topo-p-instance svg rect {
- fill: #ccc;
- stroke: #aaa;
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;
@@ -147,21 +160,45 @@
}
#topo-p-instance svg .badgeIcon {
- fill: #777;
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;
- fill: #777;
+ 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;