Simon Hunt | ef31fb2 | 2014-12-19 13:16:44 -0800 | [diff] [blame] | 1 | /* |
Simon Hunt | 8ead3a2 | 2015-01-06 11:00:15 -0800 | [diff] [blame] | 2 | * Copyright 2014,2015 Open Networking Laboratory |
Simon Hunt | ef31fb2 | 2014-12-19 13:16:44 -0800 | [diff] [blame] | 3 | * |
| 4 | * Licensed under the Apache License, Version 2.0 (the "License"); |
| 5 | * you may not use this file except in compliance with the License. |
| 6 | * You may obtain a copy of the License at |
| 7 | * |
| 8 | * http://www.apache.org/licenses/LICENSE-2.0 |
| 9 | * |
| 10 | * Unless required by applicable law or agreed to in writing, software |
| 11 | * distributed under the License is distributed on an "AS IS" BASIS, |
| 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| 13 | * See the License for the specific language governing permissions and |
| 14 | * limitations under the License. |
| 15 | */ |
| 16 | |
| 17 | /* |
| 18 | ONOS GUI -- Topology View -- CSS file |
Simon Hunt | ef31fb2 | 2014-12-19 13:16:44 -0800 | [diff] [blame] | 19 | */ |
| 20 | |
Simon Hunt | 7c8ab8d | 2015-02-03 15:05:15 -0800 | [diff] [blame] | 21 | /* --- Base SVG Layer --- */ |
Simon Hunt | 626d210 | 2015-01-29 11:54:50 -0800 | [diff] [blame] | 22 | |
Simon Hunt | d552ee9 | 2015-04-02 17:06:35 -0700 | [diff] [blame] | 23 | #ov-topo svg { |
| 24 | /* prevents the little cut/copy/paste square that would appear on iPad */ |
| 25 | -webkit-user-select: none; |
| 26 | } |
Simon Hunt | 5ee36e0 | 2015-01-15 10:33:20 -0800 | [diff] [blame] | 27 | .light #ov-topo svg { |
Simon Hunt | 426bd86 | 2015-01-14 16:48:41 -0800 | [diff] [blame] | 28 | background-color: #fff; |
Simon Hunt | 6cc5369 | 2015-01-07 11:33:45 -0800 | [diff] [blame] | 29 | } |
Simon Hunt | 5ee36e0 | 2015-01-15 10:33:20 -0800 | [diff] [blame] | 30 | .dark #ov-topo svg { |
| 31 | background-color: #2b2b2b; |
| 32 | } |
Simon Hunt | 426bd86 | 2015-01-14 16:48:41 -0800 | [diff] [blame] | 33 | |
Simon Hunt | 7c8ab8d | 2015-02-03 15:05:15 -0800 | [diff] [blame] | 34 | |
| 35 | /* --- "No Devices" Layer --- */ |
| 36 | |
| 37 | #ov-topo svg #topo-noDevsLayer { |
| 38 | visibility: hidden; |
| 39 | } |
| 40 | |
| 41 | .light #ov-topo svg .noDevsBird { |
| 42 | fill: #ecd; |
| 43 | } |
| 44 | .dark #ov-topo svg .noDevsBird { |
| 45 | fill: #683434; |
| 46 | } |
| 47 | |
| 48 | #ov-topo svg #topo-noDevsLayer text { |
| 49 | font-size: 60pt; |
| 50 | font-style: italic; |
| 51 | } |
| 52 | .light #ov-topo svg #topo-noDevsLayer text { |
| 53 | fill: #dde; |
| 54 | } |
| 55 | .dark #ov-topo svg #topo-noDevsLayer text { |
| 56 | fill: #3b3b4f; |
| 57 | } |
| 58 | |
| 59 | |
| 60 | /* --- Topo Map --- */ |
| 61 | |
Simon Hunt | 426bd86 | 2015-01-14 16:48:41 -0800 | [diff] [blame] | 62 | #ov-topo svg #topo-map { |
| 63 | stroke-width: 2px; |
Simon Hunt | 426bd86 | 2015-01-14 16:48:41 -0800 | [diff] [blame] | 64 | fill: transparent; |
Simon Hunt | 5ee36e0 | 2015-01-15 10:33:20 -0800 | [diff] [blame] | 65 | } |
| 66 | |
| 67 | .light #ov-topo svg #topo-map { |
Simon Hunt | 445e815 | 2015-02-06 13:00:12 -0800 | [diff] [blame] | 68 | stroke: #eee; |
Simon Hunt | 5ee36e0 | 2015-01-15 10:33:20 -0800 | [diff] [blame] | 69 | } |
| 70 | .dark #ov-topo svg #topo-map { |
| 71 | stroke: #444; |
| 72 | } |
Simon Hunt | 626d210 | 2015-01-29 11:54:50 -0800 | [diff] [blame] | 73 | |
| 74 | |
Simon Hunt | 4b66859 | 2015-01-29 17:33:53 -0800 | [diff] [blame] | 75 | /* --- Topo Summary Panel --- */ |
Simon Hunt | 626d210 | 2015-01-29 11:54:50 -0800 | [diff] [blame] | 76 | |
| 77 | #topo-p-summary { |
| 78 | /* Base css from panel.css */ |
Simon Hunt | 626d210 | 2015-01-29 11:54:50 -0800 | [diff] [blame] | 79 | } |
| 80 | |
Simon Hunt | 08f841d0 | 2015-02-10 14:39:20 -0800 | [diff] [blame] | 81 | /* --- Topo Detail Panel --- */ |
| 82 | |
| 83 | #topo-p-detail { |
| 84 | /* Base css from panel.css */ |
Bri Prebilic Cole | 684bcb7 | 2015-05-11 12:00:24 -0700 | [diff] [blame] | 85 | top: 310px; |
Simon Hunt | 08f841d0 | 2015-02-10 14:39:20 -0800 | [diff] [blame] | 86 | } |
| 87 | |
Bri Prebilic Cole | f5e48b1 | 2015-04-21 14:52:36 -0700 | [diff] [blame] | 88 | #topo-p-detail .actionBtns .actionBtn { |
| 89 | display: inline-block; |
| 90 | } |
| 91 | #topo-p-detail .actionBtns .actionBtn svg { |
| 92 | width: 30px; |
| 93 | height: 30px; |
| 94 | } |
| 95 | |
Simon Hunt | 08f841d0 | 2015-02-10 14:39:20 -0800 | [diff] [blame] | 96 | /* --- general topo-panel styling --- */ |
| 97 | |
Bri Prebilic Cole | 8d3de3d | 2015-05-15 16:02:59 -0700 | [diff] [blame] | 98 | .topo-p div.header div.icon { |
| 99 | vertical-align: middle; |
| 100 | display: inline-block; |
| 101 | } |
Bri Prebilic Cole | 684bcb7 | 2015-05-11 12:00:24 -0700 | [diff] [blame] | 102 | .topo-p div.body { |
| 103 | overflow-y: scroll; |
| 104 | } |
| 105 | |
Simon Hunt | 08f841d0 | 2015-02-10 14:39:20 -0800 | [diff] [blame] | 106 | .topo-p svg { |
Simon Hunt | 626d210 | 2015-01-29 11:54:50 -0800 | [diff] [blame] | 107 | display: inline-block; |
| 108 | width: 42px; |
| 109 | height: 42px; |
| 110 | } |
| 111 | |
Simon Hunt | 08f841d0 | 2015-02-10 14:39:20 -0800 | [diff] [blame] | 112 | .light .topo-p svg .glyph { |
| 113 | fill: #222; |
| 114 | } |
| 115 | |
| 116 | .dark .topo-p svg .glyph.overlay { |
| 117 | fill: #222; |
| 118 | } |
| 119 | |
| 120 | .dark .topo-p svg .glyph { |
| 121 | fill: #ddd; |
| 122 | } |
| 123 | .light .topo-p svg .glyph.overlay { |
| 124 | fill: #fff; |
| 125 | } |
| 126 | |
| 127 | |
| 128 | .topo-p h2 { |
Bri Prebilic Cole | 684bcb7 | 2015-05-11 12:00:24 -0700 | [diff] [blame] | 129 | padding: 0 4px; |
| 130 | margin: 0; |
Bri Prebilic Cole | 8d3de3d | 2015-05-15 16:02:59 -0700 | [diff] [blame] | 131 | word-break: break-all; |
| 132 | display: inline-block; |
| 133 | width: 210px; |
| 134 | vertical-align: middle; |
Simon Hunt | 626d210 | 2015-01-29 11:54:50 -0800 | [diff] [blame] | 135 | } |
Simon Hunt | 08f841d0 | 2015-02-10 14:39:20 -0800 | [diff] [blame] | 136 | .light .topo-p h2 { |
Simon Hunt | 626d210 | 2015-01-29 11:54:50 -0800 | [diff] [blame] | 137 | color: black; |
| 138 | } |
Simon Hunt | 08f841d0 | 2015-02-10 14:39:20 -0800 | [diff] [blame] | 139 | .dark .topo-p h2 { |
Simon Hunt | 626d210 | 2015-01-29 11:54:50 -0800 | [diff] [blame] | 140 | color: #ddd; |
| 141 | } |
| 142 | |
Simon Hunt | 08f841d0 | 2015-02-10 14:39:20 -0800 | [diff] [blame] | 143 | .topo-p h3 { |
Bri Prebilic Cole | 684bcb7 | 2015-05-11 12:00:24 -0700 | [diff] [blame] | 144 | padding: 0 4px; |
| 145 | margin: 0; |
Bri Prebilic Cole | 8d3de3d | 2015-05-15 16:02:59 -0700 | [diff] [blame] | 146 | word-break: break-all; |
Simon Hunt | 626d210 | 2015-01-29 11:54:50 -0800 | [diff] [blame] | 147 | top: 20px; |
| 148 | left: 50px; |
| 149 | } |
Simon Hunt | 08f841d0 | 2015-02-10 14:39:20 -0800 | [diff] [blame] | 150 | .light .topo-p h3 { |
Simon Hunt | 626d210 | 2015-01-29 11:54:50 -0800 | [diff] [blame] | 151 | color: black; |
| 152 | } |
Simon Hunt | 08f841d0 | 2015-02-10 14:39:20 -0800 | [diff] [blame] | 153 | .dark .topo-p h3 { |
Simon Hunt | 626d210 | 2015-01-29 11:54:50 -0800 | [diff] [blame] | 154 | color: #ddd; |
| 155 | } |
| 156 | |
Simon Hunt | 08f841d0 | 2015-02-10 14:39:20 -0800 | [diff] [blame] | 157 | .topo-p p, table { |
Bri Prebilic Cole | 684bcb7 | 2015-05-11 12:00:24 -0700 | [diff] [blame] | 158 | padding: 4px; |
| 159 | margin: 0; |
Simon Hunt | 626d210 | 2015-01-29 11:54:50 -0800 | [diff] [blame] | 160 | } |
| 161 | |
Bri Prebilic Cole | 684bcb7 | 2015-05-11 12:00:24 -0700 | [diff] [blame] | 162 | .topo-p td { |
Bri Prebilic Cole | 8d3de3d | 2015-05-15 16:02:59 -0700 | [diff] [blame] | 163 | word-break: break-all; |
Bri Prebilic Cole | 684bcb7 | 2015-05-11 12:00:24 -0700 | [diff] [blame] | 164 | } |
Simon Hunt | 08f841d0 | 2015-02-10 14:39:20 -0800 | [diff] [blame] | 165 | .topo-p td.label { |
Simon Hunt | 626d210 | 2015-01-29 11:54:50 -0800 | [diff] [blame] | 166 | font-style: italic; |
| 167 | padding-right: 12px; |
| 168 | /* works for both light and dark themes ... */ |
| 169 | color: #777; |
| 170 | } |
Simon Hunt | 08f841d0 | 2015-02-10 14:39:20 -0800 | [diff] [blame] | 171 | .topo-p td.value { |
Simon Hunt | 626d210 | 2015-01-29 11:54:50 -0800 | [diff] [blame] | 172 | } |
| 173 | |
Simon Hunt | 08f841d0 | 2015-02-10 14:39:20 -0800 | [diff] [blame] | 174 | .topo-p hr { |
Simon Hunt | 626d210 | 2015-01-29 11:54:50 -0800 | [diff] [blame] | 175 | height: 1px; |
| 176 | border: 0; |
| 177 | } |
Simon Hunt | 08f841d0 | 2015-02-10 14:39:20 -0800 | [diff] [blame] | 178 | .light .topo-p hr { |
Simon Hunt | 626d210 | 2015-01-29 11:54:50 -0800 | [diff] [blame] | 179 | background-color: #ccc; |
| 180 | color: #ccc; |
| 181 | } |
Simon Hunt | 08f841d0 | 2015-02-10 14:39:20 -0800 | [diff] [blame] | 182 | .dark .topo-p hr { |
Simon Hunt | 626d210 | 2015-01-29 11:54:50 -0800 | [diff] [blame] | 183 | background-color: #888; |
| 184 | color: #888; |
| 185 | } |
Simon Hunt | 4b66859 | 2015-01-29 17:33:53 -0800 | [diff] [blame] | 186 | |
Simon Hunt | 4b66859 | 2015-01-29 17:33:53 -0800 | [diff] [blame] | 187 | /* --- Topo Instance Panel --- */ |
| 188 | |
| 189 | #topo-p-instance { |
| 190 | height: 100px; |
| 191 | } |
| 192 | |
| 193 | #topo-p-instance div.onosInst { |
| 194 | display: inline-block; |
| 195 | width: 170px; |
| 196 | height: 85px; |
| 197 | cursor: pointer; |
| 198 | } |
| 199 | |
| 200 | #topo-p-instance svg rect { |
Simon Hunt | 4b66859 | 2015-01-29 17:33:53 -0800 | [diff] [blame] | 201 | stroke-width: 3.5; |
| 202 | } |
| 203 | #topo-p-instance .online svg rect { |
| 204 | opacity: 1; |
Simon Hunt | a57d681 | 2015-02-02 18:34:04 -0800 | [diff] [blame] | 205 | } |
| 206 | .light #topo-p-instance svg rect { |
| 207 | fill: #ccc; |
| 208 | stroke: #aaa; |
| 209 | } |
| 210 | .light #topo-p-instance .online svg rect { |
Simon Hunt | 4b66859 | 2015-01-29 17:33:53 -0800 | [diff] [blame] | 211 | fill: #9cf; |
| 212 | stroke: #555; |
| 213 | } |
Simon Hunt | a57d681 | 2015-02-02 18:34:04 -0800 | [diff] [blame] | 214 | .dark #topo-p-instance svg rect { |
| 215 | fill: #666; |
| 216 | stroke: #222; |
| 217 | } |
| 218 | .dark #topo-p-instance .online svg rect { |
| 219 | fill: #9cf; |
| 220 | stroke: #999; |
| 221 | } |
| 222 | |
Simon Hunt | 4b66859 | 2015-01-29 17:33:53 -0800 | [diff] [blame] | 223 | |
| 224 | #topo-p-instance svg .glyph { |
| 225 | fill: #888; |
| 226 | fill-rule: evenodd; |
| 227 | } |
| 228 | #topo-p-instance .online svg .glyph { |
| 229 | fill: #000; |
| 230 | } |
| 231 | |
| 232 | #topo-p-instance svg .badgeIcon { |
Simon Hunt | 4b66859 | 2015-01-29 17:33:53 -0800 | [diff] [blame] | 233 | fill-rule: evenodd; |
Simon Hunt | a57d681 | 2015-02-02 18:34:04 -0800 | [diff] [blame] | 234 | opacity: 0.4; |
| 235 | } |
| 236 | .light #topo-p-instance svg .badgeIcon { |
| 237 | fill: #777; |
| 238 | } |
| 239 | .dark #topo-p-instance svg .badgeIcon { |
| 240 | fill: #555; |
Simon Hunt | 4b66859 | 2015-01-29 17:33:53 -0800 | [diff] [blame] | 241 | } |
| 242 | |
| 243 | #topo-p-instance .online svg .badgeIcon { |
Simon Hunt | a57d681 | 2015-02-02 18:34:04 -0800 | [diff] [blame] | 244 | opacity: 1.0; |
| 245 | } |
| 246 | .light #topo-p-instance .online svg .badgeIcon { |
| 247 | fill: #fff; |
| 248 | } |
| 249 | .dark #topo-p-instance .online svg .badgeIcon { |
Simon Hunt | 4b66859 | 2015-01-29 17:33:53 -0800 | [diff] [blame] | 250 | fill: #fff; |
| 251 | } |
| 252 | |
| 253 | #topo-p-instance svg text { |
| 254 | text-anchor: middle; |
Simon Hunt | a57d681 | 2015-02-02 18:34:04 -0800 | [diff] [blame] | 255 | opacity: 0.3; |
Simon Hunt | 4b66859 | 2015-01-29 17:33:53 -0800 | [diff] [blame] | 256 | } |
| 257 | #topo-p-instance .online svg text { |
Simon Hunt | a57d681 | 2015-02-02 18:34:04 -0800 | [diff] [blame] | 258 | opacity: 1.0; |
| 259 | } |
| 260 | .light #topo-p-instance svg text { |
| 261 | fill: #444; |
| 262 | } |
| 263 | .light #topo-p-instance .online svg text { |
Simon Hunt | 4b66859 | 2015-01-29 17:33:53 -0800 | [diff] [blame] | 264 | fill: #eee; |
| 265 | } |
Simon Hunt | a57d681 | 2015-02-02 18:34:04 -0800 | [diff] [blame] | 266 | .dark #topo-p-instance svg text { |
| 267 | fill: #aaa; |
| 268 | } |
| 269 | .dark #topo-p-instance .online svg text { |
| 270 | fill: #ccc; |
| 271 | } |
Simon Hunt | 4b66859 | 2015-01-29 17:33:53 -0800 | [diff] [blame] | 272 | |
| 273 | #topo-p-instance svg text.instTitle { |
| 274 | font-size: 11pt; |
| 275 | font-weight: bold; |
| 276 | } |
| 277 | #topo-p-instance svg text.instLabel { |
| 278 | font-size: 9pt; |
| 279 | font-style: italic; |
| 280 | } |
| 281 | |
| 282 | #topo-p-instance .onosInst.mastership { |
| 283 | opacity: 0.3; |
| 284 | } |
| 285 | #topo-p-instance .onosInst.mastership.affinity { |
| 286 | opacity: 1.0; |
| 287 | } |
Simon Hunt | 0ee2868 | 2015-02-12 20:48:11 -0800 | [diff] [blame] | 288 | .light #topo-p-instance .onosInst.mastership.affinity svg rect { |
| 289 | filter: url(#blue-glow); |
| 290 | } |
| 291 | .dark #topo-p-instance .onosInst.mastership.affinity svg rect { |
| 292 | filter: url(#yellow-glow); |
Simon Hunt | 4b66859 | 2015-01-29 17:33:53 -0800 | [diff] [blame] | 293 | } |
Simon Hunt | ac4c6f7 | 2015-02-03 19:50:53 -0800 | [diff] [blame] | 294 | |
| 295 | |
| 296 | /* --- Topo Nodes --- */ |
| 297 | |
Simon Hunt | a142dd2 | 2015-02-12 22:07:51 -0800 | [diff] [blame] | 298 | #ov-topo svg .suppressed { |
| 299 | opacity: 0.2 !important; |
| 300 | } |
| 301 | |
Simon Hunt | ac4c6f7 | 2015-02-03 19:50:53 -0800 | [diff] [blame] | 302 | #ov-topo svg .node { |
| 303 | cursor: pointer; |
| 304 | } |
| 305 | |
Simon Hunt | 0ee2868 | 2015-02-12 20:48:11 -0800 | [diff] [blame] | 306 | .light #ov-topo svg .node.selected rect, |
| 307 | .light #ov-topo svg .node.selected circle { |
Simon Hunt | ac4c6f7 | 2015-02-03 19:50:53 -0800 | [diff] [blame] | 308 | fill: #f90; |
Simon Hunt | 0ee2868 | 2015-02-12 20:48:11 -0800 | [diff] [blame] | 309 | filter: url(#blue-glow); |
| 310 | } |
| 311 | .dark #ov-topo svg .node.selected rect, |
| 312 | .dark #ov-topo svg .node.selected circle { |
| 313 | fill: #f90; |
| 314 | filter: url(#yellow-glow); |
Simon Hunt | ac4c6f7 | 2015-02-03 19:50:53 -0800 | [diff] [blame] | 315 | } |
| 316 | |
| 317 | #ov-topo svg .node text { |
| 318 | pointer-events: none; |
| 319 | } |
| 320 | |
| 321 | /* Device Nodes */ |
| 322 | |
| 323 | #ov-topo svg .node.device { |
| 324 | } |
| 325 | |
| 326 | #ov-topo svg .node.device rect { |
| 327 | stroke-width: 1.5; |
| 328 | } |
| 329 | |
| 330 | #ov-topo svg .node.device.fixed rect { |
| 331 | stroke-width: 1.5; |
Simon Hunt | 78c10bf | 2015-02-03 21:18:20 -0800 | [diff] [blame] | 332 | } |
| 333 | .light #ov-topo svg .node.device.fixed rect { |
| 334 | stroke: #aaa; |
| 335 | } |
| 336 | .dark #ov-topo svg .node.device.fixed rect { |
Simon Hunt | 1c36711 | 2015-02-05 18:02:46 -0800 | [diff] [blame] | 337 | stroke: #999; |
Simon Hunt | ac4c6f7 | 2015-02-03 19:50:53 -0800 | [diff] [blame] | 338 | } |
| 339 | |
| 340 | /* note: device is offline without the 'online' class */ |
Simon Hunt | 1c36711 | 2015-02-05 18:02:46 -0800 | [diff] [blame] | 341 | .light #ov-topo svg .node.device { |
Simon Hunt | ac4c6f7 | 2015-02-03 19:50:53 -0800 | [diff] [blame] | 342 | fill: #777; |
| 343 | } |
Simon Hunt | 1c36711 | 2015-02-05 18:02:46 -0800 | [diff] [blame] | 344 | .dark #ov-topo svg .node.device { |
| 345 | fill: #555; |
| 346 | } |
Simon Hunt | ac4c6f7 | 2015-02-03 19:50:53 -0800 | [diff] [blame] | 347 | |
Simon Hunt | 1c36711 | 2015-02-05 18:02:46 -0800 | [diff] [blame] | 348 | .light #ov-topo svg .node.device rect { |
| 349 | stroke: #666; |
| 350 | } |
| 351 | .light #ov-topo svg .node.device rect { |
| 352 | stroke: #999; |
| 353 | } |
| 354 | |
| 355 | .light #ov-topo svg .node.device.online { |
Simon Hunt | ac4c6f7 | 2015-02-03 19:50:53 -0800 | [diff] [blame] | 356 | fill: #6e7fa3; |
| 357 | } |
Simon Hunt | 1c36711 | 2015-02-05 18:02:46 -0800 | [diff] [blame] | 358 | .dark #ov-topo svg .node.device.online { |
| 359 | fill: #4E5C7F; |
| 360 | } |
Simon Hunt | ac4c6f7 | 2015-02-03 19:50:53 -0800 | [diff] [blame] | 361 | |
| 362 | /* note: device is offline without the 'online' class */ |
| 363 | #ov-topo svg .node.device text { |
| 364 | fill: #bbb; |
| 365 | font: 10pt sans-serif; |
| 366 | } |
| 367 | |
| 368 | #ov-topo svg .node.device.online text { |
| 369 | fill: white; |
| 370 | } |
| 371 | |
| 372 | #ov-topo svg .node.device .svgIcon rect { |
| 373 | fill: #aaa; |
| 374 | } |
| 375 | #ov-topo svg .node.device .svgIcon use { |
| 376 | fill: #777; |
| 377 | } |
| 378 | #ov-topo svg .node.device.selected .svgIcon rect { |
| 379 | fill: #f90; |
| 380 | } |
| 381 | #ov-topo svg .node.device.online .svgIcon rect { |
| 382 | fill: #ccc; |
| 383 | } |
| 384 | #ov-topo svg .node.device.online .svgIcon use { |
| 385 | fill: #000; |
| 386 | } |
| 387 | #ov-topo svg .node.device.online.selected .svgIcon rect { |
| 388 | fill: #f90; |
| 389 | } |
| 390 | |
| 391 | |
| 392 | /* Host Nodes */ |
| 393 | |
| 394 | #ov-topo svg .node.host { |
Simon Hunt | ac4c6f7 | 2015-02-03 19:50:53 -0800 | [diff] [blame] | 395 | } |
| 396 | |
| 397 | #ov-topo svg .node.host text { |
Simon Hunt | ac4c6f7 | 2015-02-03 19:50:53 -0800 | [diff] [blame] | 398 | stroke: none; |
| 399 | font: 9pt sans-serif; |
| 400 | } |
Simon Hunt | 1894d79 | 2015-02-04 17:09:20 -0800 | [diff] [blame] | 401 | .light #ov-topo svg .node.host text { |
| 402 | fill: #846; |
| 403 | } |
| 404 | .dark #ov-topo svg .node.host text { |
| 405 | fill: #BB809D; |
| 406 | } |
Simon Hunt | ac4c6f7 | 2015-02-03 19:50:53 -0800 | [diff] [blame] | 407 | |
Simon Hunt | 1894d79 | 2015-02-04 17:09:20 -0800 | [diff] [blame] | 408 | .light svg .node.host circle { |
Simon Hunt | ac4c6f7 | 2015-02-03 19:50:53 -0800 | [diff] [blame] | 409 | stroke: #000; |
| 410 | fill: #edb; |
| 411 | } |
Simon Hunt | 1894d79 | 2015-02-04 17:09:20 -0800 | [diff] [blame] | 412 | .dark svg .node.host circle { |
| 413 | stroke: #eee; |
| 414 | fill: #B2A180; |
| 415 | } |
Simon Hunt | ac4c6f7 | 2015-02-03 19:50:53 -0800 | [diff] [blame] | 416 | |
Simon Hunt | 1894d79 | 2015-02-04 17:09:20 -0800 | [diff] [blame] | 417 | .light svg .node.host .svgIcon { |
| 418 | fill: #444; |
| 419 | } |
| 420 | .dark svg .node.host .svgIcon { |
| 421 | fill: #222; |
| 422 | } |
Simon Hunt | ac4c6f7 | 2015-02-03 19:50:53 -0800 | [diff] [blame] | 423 | |
Simon Hunt | 1894d79 | 2015-02-04 17:09:20 -0800 | [diff] [blame] | 424 | /* --- Topo Links --- */ |
Simon Hunt | ac4c6f7 | 2015-02-03 19:50:53 -0800 | [diff] [blame] | 425 | |
Simon Hunt | 1894d79 | 2015-02-04 17:09:20 -0800 | [diff] [blame] | 426 | #ov-topo svg .link { |
| 427 | opacity: .9; |
| 428 | } |
| 429 | |
Simon Hunt | 0c6b2d3 | 2015-03-26 17:46:29 -0700 | [diff] [blame] | 430 | #ov-topo svg .link.selected, |
| 431 | #ov-topo svg .link.enhanced { |
| 432 | stroke-width: 4.5px; |
| 433 | } |
| 434 | .light #ov-topo svg .link.selected, |
Simon Hunt | d526412 | 2015-02-25 10:17:43 -0800 | [diff] [blame] | 435 | .light #ov-topo svg .link.enhanced { |
| 436 | filter: url(#blue-glow); |
| 437 | } |
Simon Hunt | 0c6b2d3 | 2015-03-26 17:46:29 -0700 | [diff] [blame] | 438 | .dark #ov-topo svg .link.selected, |
Simon Hunt | d526412 | 2015-02-25 10:17:43 -0800 | [diff] [blame] | 439 | .dark #ov-topo svg .link.enhanced { |
| 440 | filter: url(#yellow-glow); |
| 441 | } |
| 442 | |
Simon Hunt | 1894d79 | 2015-02-04 17:09:20 -0800 | [diff] [blame] | 443 | #ov-topo svg .link.inactive { |
| 444 | opacity: .5; |
| 445 | stroke-dasharray: 8 4; |
| 446 | } |
| 447 | |
| 448 | #ov-topo svg .link.secondary { |
| 449 | stroke-width: 3px; |
| 450 | } |
| 451 | .light #ov-topo svg .link.secondary { |
| 452 | stroke: rgba(0,153,51,0.5); |
| 453 | } |
| 454 | .dark #ov-topo svg .link.secondary { |
| 455 | stroke: rgba(121,231,158,0.5); |
| 456 | } |
| 457 | |
| 458 | #ov-topo svg .link.primary { |
| 459 | stroke-width: 4px; |
| 460 | } |
| 461 | .light #ov-topo svg .link.primary { |
| 462 | stroke: #ffA300; |
| 463 | } |
| 464 | .dark #ov-topo svg .link.primary { |
| 465 | stroke: #D58E0F; |
| 466 | } |
| 467 | |
Simon Hunt | 1894d79 | 2015-02-04 17:09:20 -0800 | [diff] [blame] | 468 | #ov-topo svg .link.secondary.optical { |
| 469 | stroke-width: 4px; |
| 470 | } |
| 471 | .light #ov-topo svg .link.secondary.optical { |
| 472 | stroke: rgba(128,64,255,0.5); |
| 473 | } |
| 474 | .dark #ov-topo svg .link.secondary.optical { |
| 475 | stroke: rgba(164,139,215,0.5); |
| 476 | } |
| 477 | |
| 478 | #ov-topo svg .link.primary.optical { |
| 479 | stroke-width: 6px; |
| 480 | } |
| 481 | .light #ov-topo svg .link.primary.optical { |
| 482 | stroke: #74f; |
| 483 | } |
| 484 | .dark #ov-topo svg .link.primary.optical { |
| 485 | stroke: #7352CD; |
| 486 | } |
| 487 | |
Simon Hunt | 1a5301e | 2015-02-25 15:31:25 -0800 | [diff] [blame] | 488 | /* Link Labels */ |
| 489 | |
Simon Hunt | 1894d79 | 2015-02-04 17:09:20 -0800 | [diff] [blame] | 490 | #ov-topo svg .linkLabel rect { |
| 491 | stroke: none; |
| 492 | } |
| 493 | .light #ov-topo svg .linkLabel rect { |
| 494 | fill: #eee; |
| 495 | } |
| 496 | .dark #ov-topo svg .linkLabel rect { |
Simon Hunt | 8eb4d3a | 2015-02-23 18:23:29 -0800 | [diff] [blame] | 497 | fill: #555; |
Simon Hunt | 1894d79 | 2015-02-04 17:09:20 -0800 | [diff] [blame] | 498 | } |
| 499 | |
| 500 | #ov-topo svg .linkLabel text { |
| 501 | text-anchor: middle; |
| 502 | stroke-width: 0.1; |
| 503 | font-size: 9pt; |
| 504 | } |
| 505 | .light #ov-topo svg .linkLabel text { |
Simon Hunt | 8eb4d3a | 2015-02-23 18:23:29 -0800 | [diff] [blame] | 506 | fill: #444; |
Simon Hunt | 1894d79 | 2015-02-04 17:09:20 -0800 | [diff] [blame] | 507 | } |
| 508 | .dark #ov-topo svg .linkLabel text { |
Simon Hunt | 8eb4d3a | 2015-02-23 18:23:29 -0800 | [diff] [blame] | 509 | fill: #eee; |
Simon Hunt | 1894d79 | 2015-02-04 17:09:20 -0800 | [diff] [blame] | 510 | } |
Simon Hunt | eb0fa05 | 2015-02-17 19:20:28 -0800 | [diff] [blame] | 511 | |
Simon Hunt | 1a5301e | 2015-02-25 15:31:25 -0800 | [diff] [blame] | 512 | /* Port Labels */ |
| 513 | |
| 514 | #ov-topo svg .portLabel rect { |
| 515 | stroke: none; |
| 516 | } |
| 517 | .light #ov-topo svg .portLabel rect { |
| 518 | fill: #eee; |
| 519 | } |
| 520 | .dark #ov-topo svg .portLabel rect { |
Simon Hunt | 969b3c9 | 2015-02-25 18:11:31 -0800 | [diff] [blame] | 521 | fill: #222; |
Simon Hunt | 1a5301e | 2015-02-25 15:31:25 -0800 | [diff] [blame] | 522 | } |
| 523 | |
| 524 | #ov-topo svg .portLabel text { |
| 525 | text-anchor: middle; |
| 526 | stroke-width: 0.1; |
Simon Hunt | 969b3c9 | 2015-02-25 18:11:31 -0800 | [diff] [blame] | 527 | font-size: 11pt; |
Simon Hunt | 1a5301e | 2015-02-25 15:31:25 -0800 | [diff] [blame] | 528 | } |
| 529 | .light #ov-topo svg .portLabel text { |
| 530 | fill: #444; |
| 531 | } |
| 532 | .dark #ov-topo svg .portLabel text { |
| 533 | fill: #eee; |
| 534 | } |
| 535 | |
Simon Hunt | abf66d9 | 2015-04-15 12:57:31 -0700 | [diff] [blame] | 536 | /* ------------------------------------------------- */ |
Simon Hunt | 2052e5d | 2015-04-13 17:40:44 -0700 | [diff] [blame] | 537 | /* Sprite Layer */ |
| 538 | |
Simon Hunt | abf66d9 | 2015-04-15 12:57:31 -0700 | [diff] [blame] | 539 | #ov-topo svg #topo-sprites use { |
Simon Hunt | b2c4cc8 | 2015-04-15 17:16:28 -0700 | [diff] [blame] | 540 | stroke-width: 2; |
Simon Hunt | abf66d9 | 2015-04-15 12:57:31 -0700 | [diff] [blame] | 541 | } |
Simon Hunt | 2052e5d | 2015-04-13 17:40:44 -0700 | [diff] [blame] | 542 | #ov-topo svg #topo-sprites text { |
| 543 | text-anchor: middle; |
Simon Hunt | b2c4cc8 | 2015-04-15 17:16:28 -0700 | [diff] [blame] | 544 | font-size: 20pt; |
Simon Hunt | 2052e5d | 2015-04-13 17:40:44 -0700 | [diff] [blame] | 545 | font-style: italic; |
| 546 | } |
| 547 | |
Simon Hunt | abf66d9 | 2015-04-15 12:57:31 -0700 | [diff] [blame] | 548 | .light #ov-topo svg #topo-sprites .gold1 use { |
Simon Hunt | 017a7c3 | 2015-04-15 19:23:27 -0700 | [diff] [blame] | 549 | stroke: #fda; |
Simon Hunt | 2052e5d | 2015-04-13 17:40:44 -0700 | [diff] [blame] | 550 | fill: none; |
| 551 | } |
Simon Hunt | abf66d9 | 2015-04-15 12:57:31 -0700 | [diff] [blame] | 552 | .dark #ov-topo svg #topo-sprites .gold1 use { |
Simon Hunt | 2052e5d | 2015-04-13 17:40:44 -0700 | [diff] [blame] | 553 | stroke: #541; |
| 554 | fill: none; |
| 555 | } |
Simon Hunt | abf66d9 | 2015-04-15 12:57:31 -0700 | [diff] [blame] | 556 | .light #ov-topo svg #topo-sprites .gold1 text { |
Simon Hunt | 2052e5d | 2015-04-13 17:40:44 -0700 | [diff] [blame] | 557 | fill: #eda; |
| 558 | } |
Simon Hunt | abf66d9 | 2015-04-15 12:57:31 -0700 | [diff] [blame] | 559 | .dark #ov-topo svg #topo-sprites .gold1 text { |
Simon Hunt | 2052e5d | 2015-04-13 17:40:44 -0700 | [diff] [blame] | 560 | fill: #543; |
| 561 | } |
| 562 | |
Simon Hunt | abf66d9 | 2015-04-15 12:57:31 -0700 | [diff] [blame] | 563 | .light #ov-topo svg #topo-sprites .blue1 use { |
Simon Hunt | 2052e5d | 2015-04-13 17:40:44 -0700 | [diff] [blame] | 564 | stroke: #bbd; |
Simon Hunt | 2052e5d | 2015-04-13 17:40:44 -0700 | [diff] [blame] | 565 | fill: none; |
| 566 | } |
Simon Hunt | abf66d9 | 2015-04-15 12:57:31 -0700 | [diff] [blame] | 567 | .dark #ov-topo svg #topo-sprites .blue1 use { |
Simon Hunt | 2052e5d | 2015-04-13 17:40:44 -0700 | [diff] [blame] | 568 | stroke: #445; |
Simon Hunt | 2052e5d | 2015-04-13 17:40:44 -0700 | [diff] [blame] | 569 | fill: none; |
| 570 | } |
Simon Hunt | abf66d9 | 2015-04-15 12:57:31 -0700 | [diff] [blame] | 571 | .light #ov-topo svg #topo-sprites .blue1 text { |
Simon Hunt | 2052e5d | 2015-04-13 17:40:44 -0700 | [diff] [blame] | 572 | fill: #cce; |
| 573 | } |
Simon Hunt | abf66d9 | 2015-04-15 12:57:31 -0700 | [diff] [blame] | 574 | .dark #ov-topo svg #topo-sprites .blue1 text { |
Simon Hunt | 2052e5d | 2015-04-13 17:40:44 -0700 | [diff] [blame] | 575 | fill: #446; |
| 576 | } |
Simon Hunt | abf66d9 | 2015-04-15 12:57:31 -0700 | [diff] [blame] | 577 | |
| 578 | .light #ov-topo svg #topo-sprites .gray1 use { |
Simon Hunt | b2c4cc8 | 2015-04-15 17:16:28 -0700 | [diff] [blame] | 579 | stroke: #ccc; |
Simon Hunt | abf66d9 | 2015-04-15 12:57:31 -0700 | [diff] [blame] | 580 | fill: none; |
| 581 | } |
| 582 | .dark #ov-topo svg #topo-sprites .gray1 use { |
| 583 | stroke: #333; |
| 584 | fill: none; |
| 585 | } |
| 586 | .light #ov-topo svg #topo-sprites .gray1 text { |
Simon Hunt | b2c4cc8 | 2015-04-15 17:16:28 -0700 | [diff] [blame] | 587 | fill: #ddd; |
Simon Hunt | abf66d9 | 2015-04-15 12:57:31 -0700 | [diff] [blame] | 588 | } |
| 589 | .dark #ov-topo svg #topo-sprites .gray1 text { |
| 590 | fill: #444; |
| 591 | } |
| 592 | |
Simon Hunt | 7f62f7c | 2015-05-11 17:38:02 -0700 | [diff] [blame] | 593 | /* fills */ |
| 594 | .light #ov-topo svg #topo-sprites use.fill-gray2 { |
| 595 | fill: #eee; |
| 596 | } |
| 597 | .dark #ov-topo svg #topo-sprites use.fill-gray2 { |
| 598 | fill: #444; |
| 599 | } |
| 600 | |
| 601 | .light #ov-topo svg #topo-sprites use.fill-blue2 { |
| 602 | fill: #bce; |
| 603 | } |
| 604 | .dark #ov-topo svg #topo-sprites use.fill-blue2 { |
| 605 | fill: #447; |
| 606 | } |
| 607 | |