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