GUI -- Instance Colors tuned for dark theme.
Change-Id: I173fcf8c8683dbef148d0506e8a9436dc518e0b9
Showing
2 changed files
with
43 additions
and
7 deletions
... | @@ -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; | ... | ... |
-
Please register or login to post a comment