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 */ |
Simon Hunt | f2520df | 2015-06-10 10:42:01 -0700 | [diff] [blame^] | 85 | top: 320px; |
Simon Hunt | 08f841d0 | 2015-02-10 14:39:20 -0800 | [diff] [blame] | 86 | } |
Bri Prebilic Cole | d874546 | 2015-06-01 16:08:57 -0700 | [diff] [blame] | 87 | html[data-platform='iPad'] #topo-p-detail { |
Simon Hunt | f2520df | 2015-06-10 10:42:01 -0700 | [diff] [blame^] | 88 | top: 336px; |
Bri Prebilic Cole | d874546 | 2015-06-01 16:08:57 -0700 | [diff] [blame] | 89 | } |
Simon Hunt | 08f841d0 | 2015-02-10 14:39:20 -0800 | [diff] [blame] | 90 | |
Bri Prebilic Cole | f5e48b1 | 2015-04-21 14:52:36 -0700 | [diff] [blame] | 91 | #topo-p-detail .actionBtns .actionBtn { |
| 92 | display: inline-block; |
| 93 | } |
| 94 | #topo-p-detail .actionBtns .actionBtn svg { |
| 95 | width: 30px; |
| 96 | height: 30px; |
| 97 | } |
| 98 | |
Simon Hunt | 08f841d0 | 2015-02-10 14:39:20 -0800 | [diff] [blame] | 99 | /* --- general topo-panel styling --- */ |
| 100 | |
Bri Prebilic Cole | 8d3de3d | 2015-05-15 16:02:59 -0700 | [diff] [blame] | 101 | .topo-p div.header div.icon { |
| 102 | vertical-align: middle; |
| 103 | display: inline-block; |
| 104 | } |
Bri Prebilic Cole | 684bcb7 | 2015-05-11 12:00:24 -0700 | [diff] [blame] | 105 | .topo-p div.body { |
| 106 | overflow-y: scroll; |
| 107 | } |
| 108 | |
Bri Prebilic Cole | 0a6ffb6 | 2015-06-04 09:32:12 -0700 | [diff] [blame] | 109 | .topo-p div.body::-webkit-scrollbar { |
| 110 | display: none; |
| 111 | } |
| 112 | |
Simon Hunt | 08f841d0 | 2015-02-10 14:39:20 -0800 | [diff] [blame] | 113 | .topo-p svg { |
Simon Hunt | 626d210 | 2015-01-29 11:54:50 -0800 | [diff] [blame] | 114 | display: inline-block; |
| 115 | width: 42px; |
| 116 | height: 42px; |
| 117 | } |
| 118 | |
Simon Hunt | 08f841d0 | 2015-02-10 14:39:20 -0800 | [diff] [blame] | 119 | .light .topo-p svg .glyph { |
| 120 | fill: #222; |
| 121 | } |
| 122 | |
| 123 | .dark .topo-p svg .glyph.overlay { |
| 124 | fill: #222; |
| 125 | } |
| 126 | |
| 127 | .dark .topo-p svg .glyph { |
| 128 | fill: #ddd; |
| 129 | } |
| 130 | .light .topo-p svg .glyph.overlay { |
| 131 | fill: #fff; |
| 132 | } |
| 133 | |
| 134 | |
| 135 | .topo-p h2 { |
Bri Prebilic Cole | 684bcb7 | 2015-05-11 12:00:24 -0700 | [diff] [blame] | 136 | padding: 0 4px; |
| 137 | margin: 0; |
Bri Prebilic Cole | 8d3de3d | 2015-05-15 16:02:59 -0700 | [diff] [blame] | 138 | word-break: break-all; |
| 139 | display: inline-block; |
| 140 | width: 210px; |
| 141 | vertical-align: middle; |
Simon Hunt | 626d210 | 2015-01-29 11:54:50 -0800 | [diff] [blame] | 142 | } |
Simon Hunt | 08f841d0 | 2015-02-10 14:39:20 -0800 | [diff] [blame] | 143 | .light .topo-p h2 { |
Simon Hunt | 626d210 | 2015-01-29 11:54:50 -0800 | [diff] [blame] | 144 | color: black; |
| 145 | } |
Simon Hunt | 08f841d0 | 2015-02-10 14:39:20 -0800 | [diff] [blame] | 146 | .dark .topo-p h2 { |
Simon Hunt | 626d210 | 2015-01-29 11:54:50 -0800 | [diff] [blame] | 147 | color: #ddd; |
| 148 | } |
| 149 | |
Simon Hunt | 08f841d0 | 2015-02-10 14:39:20 -0800 | [diff] [blame] | 150 | .topo-p h3 { |
Bri Prebilic Cole | 684bcb7 | 2015-05-11 12:00:24 -0700 | [diff] [blame] | 151 | padding: 0 4px; |
| 152 | margin: 0; |
Bri Prebilic Cole | 8d3de3d | 2015-05-15 16:02:59 -0700 | [diff] [blame] | 153 | word-break: break-all; |
Simon Hunt | 626d210 | 2015-01-29 11:54:50 -0800 | [diff] [blame] | 154 | top: 20px; |
| 155 | left: 50px; |
| 156 | } |
Simon Hunt | 08f841d0 | 2015-02-10 14:39:20 -0800 | [diff] [blame] | 157 | .light .topo-p h3 { |
Simon Hunt | 626d210 | 2015-01-29 11:54:50 -0800 | [diff] [blame] | 158 | color: black; |
| 159 | } |
Simon Hunt | 08f841d0 | 2015-02-10 14:39:20 -0800 | [diff] [blame] | 160 | .dark .topo-p h3 { |
Simon Hunt | 626d210 | 2015-01-29 11:54:50 -0800 | [diff] [blame] | 161 | color: #ddd; |
| 162 | } |
| 163 | |
Simon Hunt | 08f841d0 | 2015-02-10 14:39:20 -0800 | [diff] [blame] | 164 | .topo-p p, table { |
Bri Prebilic Cole | 684bcb7 | 2015-05-11 12:00:24 -0700 | [diff] [blame] | 165 | padding: 4px; |
| 166 | margin: 0; |
Simon Hunt | 626d210 | 2015-01-29 11:54:50 -0800 | [diff] [blame] | 167 | } |
| 168 | |
Bri Prebilic Cole | 684bcb7 | 2015-05-11 12:00:24 -0700 | [diff] [blame] | 169 | .topo-p td { |
Bri Prebilic Cole | 8d3de3d | 2015-05-15 16:02:59 -0700 | [diff] [blame] | 170 | word-break: break-all; |
Bri Prebilic Cole | 684bcb7 | 2015-05-11 12:00:24 -0700 | [diff] [blame] | 171 | } |
Simon Hunt | 08f841d0 | 2015-02-10 14:39:20 -0800 | [diff] [blame] | 172 | .topo-p td.label { |
Simon Hunt | 626d210 | 2015-01-29 11:54:50 -0800 | [diff] [blame] | 173 | font-style: italic; |
| 174 | padding-right: 12px; |
| 175 | /* works for both light and dark themes ... */ |
| 176 | color: #777; |
| 177 | } |
Simon Hunt | 08f841d0 | 2015-02-10 14:39:20 -0800 | [diff] [blame] | 178 | .topo-p td.value { |
Simon Hunt | 626d210 | 2015-01-29 11:54:50 -0800 | [diff] [blame] | 179 | } |
| 180 | |
Simon Hunt | 08f841d0 | 2015-02-10 14:39:20 -0800 | [diff] [blame] | 181 | .topo-p hr { |
Simon Hunt | 626d210 | 2015-01-29 11:54:50 -0800 | [diff] [blame] | 182 | height: 1px; |
| 183 | border: 0; |
| 184 | } |
Simon Hunt | 08f841d0 | 2015-02-10 14:39:20 -0800 | [diff] [blame] | 185 | .light .topo-p hr { |
Simon Hunt | 626d210 | 2015-01-29 11:54:50 -0800 | [diff] [blame] | 186 | background-color: #ccc; |
| 187 | color: #ccc; |
| 188 | } |
Simon Hunt | 08f841d0 | 2015-02-10 14:39:20 -0800 | [diff] [blame] | 189 | .dark .topo-p hr { |
Simon Hunt | 626d210 | 2015-01-29 11:54:50 -0800 | [diff] [blame] | 190 | background-color: #888; |
| 191 | color: #888; |
| 192 | } |
Simon Hunt | 4b66859 | 2015-01-29 17:33:53 -0800 | [diff] [blame] | 193 | |
Simon Hunt | 4b66859 | 2015-01-29 17:33:53 -0800 | [diff] [blame] | 194 | /* --- Topo Instance Panel --- */ |
| 195 | |
| 196 | #topo-p-instance { |
| 197 | height: 100px; |
| 198 | } |
| 199 | |
| 200 | #topo-p-instance div.onosInst { |
| 201 | display: inline-block; |
| 202 | width: 170px; |
| 203 | height: 85px; |
| 204 | cursor: pointer; |
| 205 | } |
| 206 | |
| 207 | #topo-p-instance svg rect { |
Simon Hunt | 4b66859 | 2015-01-29 17:33:53 -0800 | [diff] [blame] | 208 | stroke-width: 3.5; |
| 209 | } |
| 210 | #topo-p-instance .online svg rect { |
| 211 | opacity: 1; |
Simon Hunt | a57d681 | 2015-02-02 18:34:04 -0800 | [diff] [blame] | 212 | } |
| 213 | .light #topo-p-instance svg rect { |
| 214 | fill: #ccc; |
| 215 | stroke: #aaa; |
| 216 | } |
| 217 | .light #topo-p-instance .online svg rect { |
Simon Hunt | 4b66859 | 2015-01-29 17:33:53 -0800 | [diff] [blame] | 218 | fill: #9cf; |
| 219 | stroke: #555; |
| 220 | } |
Simon Hunt | a57d681 | 2015-02-02 18:34:04 -0800 | [diff] [blame] | 221 | .dark #topo-p-instance svg rect { |
| 222 | fill: #666; |
| 223 | stroke: #222; |
| 224 | } |
| 225 | .dark #topo-p-instance .online svg rect { |
| 226 | fill: #9cf; |
| 227 | stroke: #999; |
| 228 | } |
| 229 | |
Simon Hunt | 4b66859 | 2015-01-29 17:33:53 -0800 | [diff] [blame] | 230 | |
| 231 | #topo-p-instance svg .glyph { |
| 232 | fill: #888; |
| 233 | fill-rule: evenodd; |
| 234 | } |
| 235 | #topo-p-instance .online svg .glyph { |
| 236 | fill: #000; |
| 237 | } |
| 238 | |
| 239 | #topo-p-instance svg .badgeIcon { |
Simon Hunt | 4b66859 | 2015-01-29 17:33:53 -0800 | [diff] [blame] | 240 | fill-rule: evenodd; |
Simon Hunt | a57d681 | 2015-02-02 18:34:04 -0800 | [diff] [blame] | 241 | opacity: 0.4; |
| 242 | } |
| 243 | .light #topo-p-instance svg .badgeIcon { |
| 244 | fill: #777; |
| 245 | } |
| 246 | .dark #topo-p-instance svg .badgeIcon { |
| 247 | fill: #555; |
Simon Hunt | 4b66859 | 2015-01-29 17:33:53 -0800 | [diff] [blame] | 248 | } |
| 249 | |
| 250 | #topo-p-instance .online svg .badgeIcon { |
Simon Hunt | a57d681 | 2015-02-02 18:34:04 -0800 | [diff] [blame] | 251 | opacity: 1.0; |
| 252 | } |
| 253 | .light #topo-p-instance .online svg .badgeIcon { |
| 254 | fill: #fff; |
| 255 | } |
| 256 | .dark #topo-p-instance .online svg .badgeIcon { |
Simon Hunt | 4b66859 | 2015-01-29 17:33:53 -0800 | [diff] [blame] | 257 | fill: #fff; |
| 258 | } |
| 259 | |
| 260 | #topo-p-instance svg text { |
| 261 | text-anchor: middle; |
Simon Hunt | a57d681 | 2015-02-02 18:34:04 -0800 | [diff] [blame] | 262 | opacity: 0.3; |
Simon Hunt | 4b66859 | 2015-01-29 17:33:53 -0800 | [diff] [blame] | 263 | } |
| 264 | #topo-p-instance .online svg text { |
Simon Hunt | a57d681 | 2015-02-02 18:34:04 -0800 | [diff] [blame] | 265 | opacity: 1.0; |
| 266 | } |
| 267 | .light #topo-p-instance svg text { |
| 268 | fill: #444; |
| 269 | } |
| 270 | .light #topo-p-instance .online svg text { |
Simon Hunt | 4b66859 | 2015-01-29 17:33:53 -0800 | [diff] [blame] | 271 | fill: #eee; |
| 272 | } |
Simon Hunt | a57d681 | 2015-02-02 18:34:04 -0800 | [diff] [blame] | 273 | .dark #topo-p-instance svg text { |
| 274 | fill: #aaa; |
| 275 | } |
| 276 | .dark #topo-p-instance .online svg text { |
| 277 | fill: #ccc; |
| 278 | } |
Simon Hunt | 4b66859 | 2015-01-29 17:33:53 -0800 | [diff] [blame] | 279 | |
| 280 | #topo-p-instance svg text.instTitle { |
| 281 | font-size: 11pt; |
| 282 | font-weight: bold; |
| 283 | } |
| 284 | #topo-p-instance svg text.instLabel { |
| 285 | font-size: 9pt; |
| 286 | font-style: italic; |
| 287 | } |
| 288 | |
| 289 | #topo-p-instance .onosInst.mastership { |
| 290 | opacity: 0.3; |
| 291 | } |
| 292 | #topo-p-instance .onosInst.mastership.affinity { |
| 293 | opacity: 1.0; |
| 294 | } |
Simon Hunt | 0ee2868 | 2015-02-12 20:48:11 -0800 | [diff] [blame] | 295 | .light #topo-p-instance .onosInst.mastership.affinity svg rect { |
| 296 | filter: url(#blue-glow); |
| 297 | } |
| 298 | .dark #topo-p-instance .onosInst.mastership.affinity svg rect { |
| 299 | filter: url(#yellow-glow); |
Simon Hunt | 4b66859 | 2015-01-29 17:33:53 -0800 | [diff] [blame] | 300 | } |
Simon Hunt | ac4c6f7 | 2015-02-03 19:50:53 -0800 | [diff] [blame] | 301 | |
| 302 | |
| 303 | /* --- Topo Nodes --- */ |
| 304 | |
Simon Hunt | a142dd2 | 2015-02-12 22:07:51 -0800 | [diff] [blame] | 305 | #ov-topo svg .suppressed { |
| 306 | opacity: 0.2 !important; |
| 307 | } |
| 308 | |
Simon Hunt | ac4c6f7 | 2015-02-03 19:50:53 -0800 | [diff] [blame] | 309 | #ov-topo svg .node { |
| 310 | cursor: pointer; |
| 311 | } |
| 312 | |
Simon Hunt | 0ee2868 | 2015-02-12 20:48:11 -0800 | [diff] [blame] | 313 | .light #ov-topo svg .node.selected rect, |
| 314 | .light #ov-topo svg .node.selected circle { |
Simon Hunt | ac4c6f7 | 2015-02-03 19:50:53 -0800 | [diff] [blame] | 315 | fill: #f90; |
Simon Hunt | 0ee2868 | 2015-02-12 20:48:11 -0800 | [diff] [blame] | 316 | filter: url(#blue-glow); |
| 317 | } |
| 318 | .dark #ov-topo svg .node.selected rect, |
| 319 | .dark #ov-topo svg .node.selected circle { |
| 320 | fill: #f90; |
| 321 | filter: url(#yellow-glow); |
Simon Hunt | ac4c6f7 | 2015-02-03 19:50:53 -0800 | [diff] [blame] | 322 | } |
| 323 | |
| 324 | #ov-topo svg .node text { |
| 325 | pointer-events: none; |
| 326 | } |
| 327 | |
| 328 | /* Device Nodes */ |
| 329 | |
| 330 | #ov-topo svg .node.device { |
| 331 | } |
| 332 | |
| 333 | #ov-topo svg .node.device rect { |
| 334 | stroke-width: 1.5; |
| 335 | } |
| 336 | |
| 337 | #ov-topo svg .node.device.fixed rect { |
| 338 | stroke-width: 1.5; |
Simon Hunt | 78c10bf | 2015-02-03 21:18:20 -0800 | [diff] [blame] | 339 | } |
| 340 | .light #ov-topo svg .node.device.fixed rect { |
| 341 | stroke: #aaa; |
| 342 | } |
| 343 | .dark #ov-topo svg .node.device.fixed rect { |
Simon Hunt | 1c36711 | 2015-02-05 18:02:46 -0800 | [diff] [blame] | 344 | stroke: #999; |
Simon Hunt | ac4c6f7 | 2015-02-03 19:50:53 -0800 | [diff] [blame] | 345 | } |
| 346 | |
| 347 | /* note: device is offline without the 'online' class */ |
Simon Hunt | 1c36711 | 2015-02-05 18:02:46 -0800 | [diff] [blame] | 348 | .light #ov-topo svg .node.device { |
Simon Hunt | ac4c6f7 | 2015-02-03 19:50:53 -0800 | [diff] [blame] | 349 | fill: #777; |
| 350 | } |
Simon Hunt | 1c36711 | 2015-02-05 18:02:46 -0800 | [diff] [blame] | 351 | .dark #ov-topo svg .node.device { |
| 352 | fill: #555; |
| 353 | } |
Simon Hunt | ac4c6f7 | 2015-02-03 19:50:53 -0800 | [diff] [blame] | 354 | |
Simon Hunt | 1c36711 | 2015-02-05 18:02:46 -0800 | [diff] [blame] | 355 | .light #ov-topo svg .node.device rect { |
| 356 | stroke: #666; |
| 357 | } |
| 358 | .light #ov-topo svg .node.device rect { |
| 359 | stroke: #999; |
| 360 | } |
| 361 | |
| 362 | .light #ov-topo svg .node.device.online { |
Simon Hunt | ac4c6f7 | 2015-02-03 19:50:53 -0800 | [diff] [blame] | 363 | fill: #6e7fa3; |
| 364 | } |
Simon Hunt | 1c36711 | 2015-02-05 18:02:46 -0800 | [diff] [blame] | 365 | .dark #ov-topo svg .node.device.online { |
| 366 | fill: #4E5C7F; |
| 367 | } |
Simon Hunt | ac4c6f7 | 2015-02-03 19:50:53 -0800 | [diff] [blame] | 368 | |
| 369 | /* note: device is offline without the 'online' class */ |
| 370 | #ov-topo svg .node.device text { |
| 371 | fill: #bbb; |
| 372 | font: 10pt sans-serif; |
| 373 | } |
| 374 | |
| 375 | #ov-topo svg .node.device.online text { |
| 376 | fill: white; |
| 377 | } |
| 378 | |
| 379 | #ov-topo svg .node.device .svgIcon rect { |
| 380 | fill: #aaa; |
| 381 | } |
| 382 | #ov-topo svg .node.device .svgIcon use { |
| 383 | fill: #777; |
| 384 | } |
| 385 | #ov-topo svg .node.device.selected .svgIcon rect { |
| 386 | fill: #f90; |
| 387 | } |
| 388 | #ov-topo svg .node.device.online .svgIcon rect { |
| 389 | fill: #ccc; |
| 390 | } |
| 391 | #ov-topo svg .node.device.online .svgIcon use { |
| 392 | fill: #000; |
| 393 | } |
| 394 | #ov-topo svg .node.device.online.selected .svgIcon rect { |
| 395 | fill: #f90; |
| 396 | } |
| 397 | |
| 398 | |
| 399 | /* Host Nodes */ |
| 400 | |
| 401 | #ov-topo svg .node.host { |
Simon Hunt | ac4c6f7 | 2015-02-03 19:50:53 -0800 | [diff] [blame] | 402 | } |
| 403 | |
| 404 | #ov-topo svg .node.host text { |
Simon Hunt | ac4c6f7 | 2015-02-03 19:50:53 -0800 | [diff] [blame] | 405 | stroke: none; |
| 406 | font: 9pt sans-serif; |
| 407 | } |
Simon Hunt | 1894d79 | 2015-02-04 17:09:20 -0800 | [diff] [blame] | 408 | .light #ov-topo svg .node.host text { |
| 409 | fill: #846; |
| 410 | } |
| 411 | .dark #ov-topo svg .node.host text { |
| 412 | fill: #BB809D; |
| 413 | } |
Simon Hunt | ac4c6f7 | 2015-02-03 19:50:53 -0800 | [diff] [blame] | 414 | |
Simon Hunt | 1894d79 | 2015-02-04 17:09:20 -0800 | [diff] [blame] | 415 | .light svg .node.host circle { |
Simon Hunt | ac4c6f7 | 2015-02-03 19:50:53 -0800 | [diff] [blame] | 416 | stroke: #000; |
| 417 | fill: #edb; |
| 418 | } |
Simon Hunt | 1894d79 | 2015-02-04 17:09:20 -0800 | [diff] [blame] | 419 | .dark svg .node.host circle { |
| 420 | stroke: #eee; |
| 421 | fill: #B2A180; |
| 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 | .light svg .node.host .svgIcon { |
| 425 | fill: #444; |
| 426 | } |
| 427 | .dark svg .node.host .svgIcon { |
| 428 | fill: #222; |
| 429 | } |
Simon Hunt | ac4c6f7 | 2015-02-03 19:50:53 -0800 | [diff] [blame] | 430 | |
Simon Hunt | 1894d79 | 2015-02-04 17:09:20 -0800 | [diff] [blame] | 431 | /* --- Topo Links --- */ |
Simon Hunt | ac4c6f7 | 2015-02-03 19:50:53 -0800 | [diff] [blame] | 432 | |
Simon Hunt | 1894d79 | 2015-02-04 17:09:20 -0800 | [diff] [blame] | 433 | #ov-topo svg .link { |
| 434 | opacity: .9; |
| 435 | } |
| 436 | |
Simon Hunt | 0c6b2d3 | 2015-03-26 17:46:29 -0700 | [diff] [blame] | 437 | #ov-topo svg .link.selected, |
| 438 | #ov-topo svg .link.enhanced { |
| 439 | stroke-width: 4.5px; |
| 440 | } |
| 441 | .light #ov-topo svg .link.selected, |
Simon Hunt | d526412 | 2015-02-25 10:17:43 -0800 | [diff] [blame] | 442 | .light #ov-topo svg .link.enhanced { |
| 443 | filter: url(#blue-glow); |
| 444 | } |
Simon Hunt | 0c6b2d3 | 2015-03-26 17:46:29 -0700 | [diff] [blame] | 445 | .dark #ov-topo svg .link.selected, |
Simon Hunt | d526412 | 2015-02-25 10:17:43 -0800 | [diff] [blame] | 446 | .dark #ov-topo svg .link.enhanced { |
| 447 | filter: url(#yellow-glow); |
| 448 | } |
| 449 | |
Simon Hunt | 1894d79 | 2015-02-04 17:09:20 -0800 | [diff] [blame] | 450 | #ov-topo svg .link.inactive { |
| 451 | opacity: .5; |
| 452 | stroke-dasharray: 8 4; |
| 453 | } |
| 454 | |
| 455 | #ov-topo svg .link.secondary { |
| 456 | stroke-width: 3px; |
| 457 | } |
| 458 | .light #ov-topo svg .link.secondary { |
| 459 | stroke: rgba(0,153,51,0.5); |
| 460 | } |
| 461 | .dark #ov-topo svg .link.secondary { |
| 462 | stroke: rgba(121,231,158,0.5); |
| 463 | } |
| 464 | |
Srikanth Vavilapalli | 6720b81 | 2015-06-08 19:23:24 -0700 | [diff] [blame] | 465 | /* Port traffic color visualization for Kbps, Mbps, and Gbps */ |
Simon Hunt | 9664137 | 2015-06-02 15:53:25 -0700 | [diff] [blame] | 466 | |
Srikanth Vavilapalli | 6720b81 | 2015-06-08 19:23:24 -0700 | [diff] [blame] | 467 | .light #ov-topo svg .link.secondary.port-traffic-Kbps { |
Simon Hunt | 9664137 | 2015-06-02 15:53:25 -0700 | [diff] [blame] | 468 | stroke: rgb(0,153,51); |
| 469 | stroke-width: 5.0; |
| 470 | } |
Srikanth Vavilapalli | 6720b81 | 2015-06-08 19:23:24 -0700 | [diff] [blame] | 471 | .dark #ov-topo svg .link.secondary.port-traffic-Kbps { |
Simon Hunt | 9664137 | 2015-06-02 15:53:25 -0700 | [diff] [blame] | 472 | stroke: rgb(98, 153, 118); |
| 473 | stroke-width: 5.0; |
| 474 | } |
| 475 | |
Srikanth Vavilapalli | 6720b81 | 2015-06-08 19:23:24 -0700 | [diff] [blame] | 476 | .light #ov-topo svg .link.secondary.port-traffic-Mbps { |
Simon Hunt | 9664137 | 2015-06-02 15:53:25 -0700 | [diff] [blame] | 477 | stroke: rgb(128,145,27); |
| 478 | stroke-width: 6.5; |
| 479 | } |
Srikanth Vavilapalli | 6720b81 | 2015-06-08 19:23:24 -0700 | [diff] [blame] | 480 | .dark #ov-topo svg .link.secondary.port-traffic-Mbps { |
Simon Hunt | 9664137 | 2015-06-02 15:53:25 -0700 | [diff] [blame] | 481 | stroke: rgb(91, 109, 54); |
| 482 | stroke-width: 6.5; |
| 483 | } |
| 484 | |
Srikanth Vavilapalli | 6720b81 | 2015-06-08 19:23:24 -0700 | [diff] [blame] | 485 | .light #ov-topo svg .link.secondary.port-traffic-Gbps { |
Simon Hunt | 9664137 | 2015-06-02 15:53:25 -0700 | [diff] [blame] | 486 | stroke: rgb(255, 137, 3); |
| 487 | stroke-width: 8.0; |
| 488 | } |
Srikanth Vavilapalli | 6720b81 | 2015-06-08 19:23:24 -0700 | [diff] [blame] | 489 | .dark #ov-topo svg .link.secondary.port-traffic-Gbps { |
Simon Hunt | 9664137 | 2015-06-02 15:53:25 -0700 | [diff] [blame] | 490 | stroke: rgb(174, 119, 55); |
| 491 | stroke-width: 8.0; |
| 492 | } |
| 493 | |
Srikanth Vavilapalli | 6720b81 | 2015-06-08 19:23:24 -0700 | [diff] [blame] | 494 | .light #ov-topo svg .link.secondary.port-traffic-Gbps-choked { |
Simon Hunt | 9664137 | 2015-06-02 15:53:25 -0700 | [diff] [blame] | 495 | stroke: rgb(183, 30, 21); |
| 496 | stroke-width: 8.0; |
| 497 | } |
Srikanth Vavilapalli | 6720b81 | 2015-06-08 19:23:24 -0700 | [diff] [blame] | 498 | .dark #ov-topo svg .link.secondary.port-traffic-Gbps-choked { |
Simon Hunt | 9664137 | 2015-06-02 15:53:25 -0700 | [diff] [blame] | 499 | stroke: rgb(127, 40, 39); |
| 500 | stroke-width: 8.0; |
| 501 | } |
| 502 | |
| 503 | |
Simon Hunt | 1894d79 | 2015-02-04 17:09:20 -0800 | [diff] [blame] | 504 | #ov-topo svg .link.primary { |
| 505 | stroke-width: 4px; |
| 506 | } |
| 507 | .light #ov-topo svg .link.primary { |
| 508 | stroke: #ffA300; |
| 509 | } |
| 510 | .dark #ov-topo svg .link.primary { |
| 511 | stroke: #D58E0F; |
| 512 | } |
| 513 | |
Simon Hunt | 1894d79 | 2015-02-04 17:09:20 -0800 | [diff] [blame] | 514 | #ov-topo svg .link.secondary.optical { |
| 515 | stroke-width: 4px; |
| 516 | } |
| 517 | .light #ov-topo svg .link.secondary.optical { |
| 518 | stroke: rgba(128,64,255,0.5); |
| 519 | } |
| 520 | .dark #ov-topo svg .link.secondary.optical { |
| 521 | stroke: rgba(164,139,215,0.5); |
| 522 | } |
| 523 | |
| 524 | #ov-topo svg .link.primary.optical { |
| 525 | stroke-width: 6px; |
| 526 | } |
| 527 | .light #ov-topo svg .link.primary.optical { |
| 528 | stroke: #74f; |
| 529 | } |
| 530 | .dark #ov-topo svg .link.primary.optical { |
| 531 | stroke: #7352CD; |
| 532 | } |
| 533 | |
Simon Hunt | 1a5301e | 2015-02-25 15:31:25 -0800 | [diff] [blame] | 534 | /* Link Labels */ |
| 535 | |
Simon Hunt | 1894d79 | 2015-02-04 17:09:20 -0800 | [diff] [blame] | 536 | #ov-topo svg .linkLabel rect { |
| 537 | stroke: none; |
| 538 | } |
| 539 | .light #ov-topo svg .linkLabel rect { |
| 540 | fill: #eee; |
| 541 | } |
| 542 | .dark #ov-topo svg .linkLabel rect { |
Simon Hunt | 8eb4d3a | 2015-02-23 18:23:29 -0800 | [diff] [blame] | 543 | fill: #555; |
Simon Hunt | 1894d79 | 2015-02-04 17:09:20 -0800 | [diff] [blame] | 544 | } |
| 545 | |
| 546 | #ov-topo svg .linkLabel text { |
| 547 | text-anchor: middle; |
| 548 | stroke-width: 0.1; |
| 549 | font-size: 9pt; |
| 550 | } |
| 551 | .light #ov-topo svg .linkLabel text { |
Simon Hunt | 8eb4d3a | 2015-02-23 18:23:29 -0800 | [diff] [blame] | 552 | fill: #444; |
Simon Hunt | 1894d79 | 2015-02-04 17:09:20 -0800 | [diff] [blame] | 553 | } |
| 554 | .dark #ov-topo svg .linkLabel text { |
Simon Hunt | 8eb4d3a | 2015-02-23 18:23:29 -0800 | [diff] [blame] | 555 | fill: #eee; |
Simon Hunt | 1894d79 | 2015-02-04 17:09:20 -0800 | [diff] [blame] | 556 | } |
Simon Hunt | eb0fa05 | 2015-02-17 19:20:28 -0800 | [diff] [blame] | 557 | |
Simon Hunt | 1a5301e | 2015-02-25 15:31:25 -0800 | [diff] [blame] | 558 | /* Port Labels */ |
| 559 | |
| 560 | #ov-topo svg .portLabel rect { |
| 561 | stroke: none; |
| 562 | } |
| 563 | .light #ov-topo svg .portLabel rect { |
| 564 | fill: #eee; |
| 565 | } |
| 566 | .dark #ov-topo svg .portLabel rect { |
Simon Hunt | 969b3c9 | 2015-02-25 18:11:31 -0800 | [diff] [blame] | 567 | fill: #222; |
Simon Hunt | 1a5301e | 2015-02-25 15:31:25 -0800 | [diff] [blame] | 568 | } |
| 569 | |
| 570 | #ov-topo svg .portLabel text { |
| 571 | text-anchor: middle; |
| 572 | stroke-width: 0.1; |
Simon Hunt | 969b3c9 | 2015-02-25 18:11:31 -0800 | [diff] [blame] | 573 | font-size: 11pt; |
Simon Hunt | 1a5301e | 2015-02-25 15:31:25 -0800 | [diff] [blame] | 574 | } |
| 575 | .light #ov-topo svg .portLabel text { |
| 576 | fill: #444; |
| 577 | } |
| 578 | .dark #ov-topo svg .portLabel text { |
| 579 | fill: #eee; |
| 580 | } |
| 581 | |
Simon Hunt | abf66d9 | 2015-04-15 12:57:31 -0700 | [diff] [blame] | 582 | /* ------------------------------------------------- */ |
Simon Hunt | 2052e5d | 2015-04-13 17:40:44 -0700 | [diff] [blame] | 583 | /* Sprite Layer */ |
| 584 | |
Simon Hunt | abf66d9 | 2015-04-15 12:57:31 -0700 | [diff] [blame] | 585 | #ov-topo svg #topo-sprites use { |
Simon Hunt | b2c4cc8 | 2015-04-15 17:16:28 -0700 | [diff] [blame] | 586 | stroke-width: 2; |
Simon Hunt | abf66d9 | 2015-04-15 12:57:31 -0700 | [diff] [blame] | 587 | } |
Simon Hunt | 2052e5d | 2015-04-13 17:40:44 -0700 | [diff] [blame] | 588 | #ov-topo svg #topo-sprites text { |
| 589 | text-anchor: middle; |
Simon Hunt | b2c4cc8 | 2015-04-15 17:16:28 -0700 | [diff] [blame] | 590 | font-size: 20pt; |
Simon Hunt | 2052e5d | 2015-04-13 17:40:44 -0700 | [diff] [blame] | 591 | font-style: italic; |
| 592 | } |
| 593 | |
Simon Hunt | abf66d9 | 2015-04-15 12:57:31 -0700 | [diff] [blame] | 594 | .light #ov-topo svg #topo-sprites .gold1 use { |
Simon Hunt | 017a7c3 | 2015-04-15 19:23:27 -0700 | [diff] [blame] | 595 | stroke: #fda; |
Simon Hunt | 2052e5d | 2015-04-13 17:40:44 -0700 | [diff] [blame] | 596 | fill: none; |
| 597 | } |
Simon Hunt | abf66d9 | 2015-04-15 12:57:31 -0700 | [diff] [blame] | 598 | .dark #ov-topo svg #topo-sprites .gold1 use { |
Simon Hunt | 2052e5d | 2015-04-13 17:40:44 -0700 | [diff] [blame] | 599 | stroke: #541; |
| 600 | fill: none; |
| 601 | } |
Simon Hunt | abf66d9 | 2015-04-15 12:57:31 -0700 | [diff] [blame] | 602 | .light #ov-topo svg #topo-sprites .gold1 text { |
Simon Hunt | 2052e5d | 2015-04-13 17:40:44 -0700 | [diff] [blame] | 603 | fill: #eda; |
| 604 | } |
Simon Hunt | abf66d9 | 2015-04-15 12:57:31 -0700 | [diff] [blame] | 605 | .dark #ov-topo svg #topo-sprites .gold1 text { |
Simon Hunt | 2052e5d | 2015-04-13 17:40:44 -0700 | [diff] [blame] | 606 | fill: #543; |
| 607 | } |
| 608 | |
Simon Hunt | abf66d9 | 2015-04-15 12:57:31 -0700 | [diff] [blame] | 609 | .light #ov-topo svg #topo-sprites .blue1 use { |
Simon Hunt | 2052e5d | 2015-04-13 17:40:44 -0700 | [diff] [blame] | 610 | stroke: #bbd; |
Simon Hunt | 2052e5d | 2015-04-13 17:40:44 -0700 | [diff] [blame] | 611 | fill: none; |
| 612 | } |
Simon Hunt | abf66d9 | 2015-04-15 12:57:31 -0700 | [diff] [blame] | 613 | .dark #ov-topo svg #topo-sprites .blue1 use { |
Simon Hunt | 2052e5d | 2015-04-13 17:40:44 -0700 | [diff] [blame] | 614 | stroke: #445; |
Simon Hunt | 2052e5d | 2015-04-13 17:40:44 -0700 | [diff] [blame] | 615 | fill: none; |
| 616 | } |
Simon Hunt | abf66d9 | 2015-04-15 12:57:31 -0700 | [diff] [blame] | 617 | .light #ov-topo svg #topo-sprites .blue1 text { |
Simon Hunt | 2052e5d | 2015-04-13 17:40:44 -0700 | [diff] [blame] | 618 | fill: #cce; |
| 619 | } |
Simon Hunt | abf66d9 | 2015-04-15 12:57:31 -0700 | [diff] [blame] | 620 | .dark #ov-topo svg #topo-sprites .blue1 text { |
Simon Hunt | 2052e5d | 2015-04-13 17:40:44 -0700 | [diff] [blame] | 621 | fill: #446; |
| 622 | } |
Simon Hunt | abf66d9 | 2015-04-15 12:57:31 -0700 | [diff] [blame] | 623 | |
| 624 | .light #ov-topo svg #topo-sprites .gray1 use { |
Simon Hunt | b2c4cc8 | 2015-04-15 17:16:28 -0700 | [diff] [blame] | 625 | stroke: #ccc; |
Simon Hunt | abf66d9 | 2015-04-15 12:57:31 -0700 | [diff] [blame] | 626 | fill: none; |
| 627 | } |
| 628 | .dark #ov-topo svg #topo-sprites .gray1 use { |
| 629 | stroke: #333; |
| 630 | fill: none; |
| 631 | } |
| 632 | .light #ov-topo svg #topo-sprites .gray1 text { |
Simon Hunt | b2c4cc8 | 2015-04-15 17:16:28 -0700 | [diff] [blame] | 633 | fill: #ddd; |
Simon Hunt | abf66d9 | 2015-04-15 12:57:31 -0700 | [diff] [blame] | 634 | } |
| 635 | .dark #ov-topo svg #topo-sprites .gray1 text { |
| 636 | fill: #444; |
| 637 | } |
| 638 | |
Simon Hunt | 7f62f7c | 2015-05-11 17:38:02 -0700 | [diff] [blame] | 639 | /* fills */ |
| 640 | .light #ov-topo svg #topo-sprites use.fill-gray2 { |
| 641 | fill: #eee; |
| 642 | } |
| 643 | .dark #ov-topo svg #topo-sprites use.fill-gray2 { |
| 644 | fill: #444; |
| 645 | } |
| 646 | |
| 647 | .light #ov-topo svg #topo-sprites use.fill-blue2 { |
| 648 | fill: #bce; |
| 649 | } |
| 650 | .dark #ov-topo svg #topo-sprites use.fill-blue2 { |
| 651 | fill: #447; |
| 652 | } |
| 653 | |