Simon Hunt

GUI -- Instance Colors tuned for dark theme.

Change-Id: I173fcf8c8683dbef148d0506e8a9436dc518e0b9
...@@ -140,9 +140,8 @@ ...@@ -140,9 +140,8 @@
140 var lightNorm = ['#3E5780', '#78533B', '#CB4D28', '#018D61', '#8A2979', '#006D73', '#56AF00'], 140 var lightNorm = ['#3E5780', '#78533B', '#CB4D28', '#018D61', '#8A2979', '#006D73', '#56AF00'],
141 lightMute = ['#A8B8CC', '#CCB3A8', '#FFC2BD', '#96D6BF', '#D19FCE', '#8FCCCA', '#CAEAA4'], 141 lightMute = ['#A8B8CC', '#CCB3A8', '#FFC2BD', '#96D6BF', '#D19FCE', '#8FCCCA', '#CAEAA4'],
142 142
143 - // let's try slightly brigher colors for dark normal.. 143 + darkNorm = ['#304860', '#664631', '#a8391b', '#00754b', '#77206d', '#005959', '#428700'],
144 - darkNorm = ['#364D7F', '#7F5236', '#A93114', '#018D61', '#7E116D', '#02747A', '#378300'], 144 + darkMute = ['#16203A', '#281810', '#4F1206', '#00331C', '#3D063A', '#002D2D', '#1B4400'];
145 - darkMute = ['#1B2645', '#432B1C', '#76220E', '#035433', '#560B4A', '#013A3E', '#2D6D00'];
146 145
147 var colors= { 146 var colors= {
148 light: { 147 light: {
......
...@@ -128,15 +128,28 @@ ...@@ -128,15 +128,28 @@
128 } 128 }
129 129
130 #topo-p-instance svg rect { 130 #topo-p-instance svg rect {
131 - fill: #ccc;
132 - stroke: #aaa;
133 stroke-width: 3.5; 131 stroke-width: 3.5;
134 } 132 }
135 #topo-p-instance .online svg rect { 133 #topo-p-instance .online svg rect {
136 opacity: 1; 134 opacity: 1;
135 +}
136 +.light #topo-p-instance svg rect {
137 + fill: #ccc;
138 + stroke: #aaa;
139 +}
140 +.light #topo-p-instance .online svg rect {
137 fill: #9cf; 141 fill: #9cf;
138 stroke: #555; 142 stroke: #555;
139 } 143 }
144 +.dark #topo-p-instance svg rect {
145 + fill: #666;
146 + stroke: #222;
147 +}
148 +.dark #topo-p-instance .online svg rect {
149 + fill: #9cf;
150 + stroke: #999;
151 +}
152 +
140 153
141 #topo-p-instance svg .glyph { 154 #topo-p-instance svg .glyph {
142 fill: #888; 155 fill: #888;
...@@ -147,21 +160,45 @@ ...@@ -147,21 +160,45 @@
147 } 160 }
148 161
149 #topo-p-instance svg .badgeIcon { 162 #topo-p-instance svg .badgeIcon {
150 - fill: #777;
151 fill-rule: evenodd; 163 fill-rule: evenodd;
164 + opacity: 0.4;
165 +}
166 +.light #topo-p-instance svg .badgeIcon {
167 + fill: #777;
168 +}
169 +.dark #topo-p-instance svg .badgeIcon {
170 + fill: #555;
152 } 171 }
153 172
154 #topo-p-instance .online svg .badgeIcon { 173 #topo-p-instance .online svg .badgeIcon {
174 + opacity: 1.0;
175 +}
176 +.light #topo-p-instance .online svg .badgeIcon {
177 + fill: #fff;
178 +}
179 +.dark #topo-p-instance .online svg .badgeIcon {
155 fill: #fff; 180 fill: #fff;
156 } 181 }
157 182
158 #topo-p-instance svg text { 183 #topo-p-instance svg text {
159 text-anchor: middle; 184 text-anchor: middle;
160 - fill: #777; 185 + opacity: 0.3;
161 } 186 }
162 #topo-p-instance .online svg text { 187 #topo-p-instance .online svg text {
188 + opacity: 1.0;
189 +}
190 +.light #topo-p-instance svg text {
191 + fill: #444;
192 +}
193 +.light #topo-p-instance .online svg text {
163 fill: #eee; 194 fill: #eee;
164 } 195 }
196 +.dark #topo-p-instance svg text {
197 + fill: #aaa;
198 +}
199 +.dark #topo-p-instance .online svg text {
200 + fill: #ccc;
201 +}
165 202
166 #topo-p-instance svg text.instTitle { 203 #topo-p-instance svg text.instTitle {
167 font-size: 11pt; 204 font-size: 11pt;
......