Simon Hunt | 195cb38 | 2014-11-03 17:50:51 -0800 | [diff] [blame] | 1 | /* |
| 2 | * Copyright 2014 Open Networking Laboratory |
| 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 |
| 19 | |
| 20 | @author Simon Hunt |
| 21 | */ |
| 22 | |
Simon Hunt | 56d5185 | 2014-11-09 13:03:35 -0800 | [diff] [blame] | 23 | #topo svg #topo-bg { |
Simon Hunt | 142d003 | 2014-11-04 20:13:09 -0800 | [diff] [blame] | 24 | opacity: 0.5; |
| 25 | } |
| 26 | |
Paul Greyson | 6cb8ca0 | 2014-11-12 18:09:02 -0800 | [diff] [blame] | 27 | #topo #map { |
Thomas Vachuska | 8954329 | 2014-11-19 11:28:33 -0800 | [diff] [blame] | 28 | stroke-width: 2px; |
Thomas Vachuska | cd2920c | 2014-11-19 14:49:55 -0800 | [diff] [blame] | 29 | stroke: #eee; |
Paul Greyson | 6cb8ca0 | 2014-11-12 18:09:02 -0800 | [diff] [blame] | 30 | fill: transparent; |
| 31 | } |
| 32 | |
Simon Hunt | c72967b | 2014-11-20 09:21:42 -0800 | [diff] [blame] | 33 | /* TODO: move glyphs into framework */ |
Simon Hunt | ac9e24f | 2014-11-12 10:12:21 -0800 | [diff] [blame] | 34 | |
Simon Hunt | 9590801 | 2014-11-20 10:20:26 -0800 | [diff] [blame] | 35 | #topo-oibox svg .glyphIcon, |
Simon Hunt | c72967b | 2014-11-20 09:21:42 -0800 | [diff] [blame] | 36 | #topo svg .glyphIcon { |
| 37 | fill: black; |
| 38 | stroke: none; |
| 39 | fill-rule: evenodd; |
| 40 | } |
| 41 | #topo svg .glyphIcon rect { |
| 42 | fill: #ddd; |
Simon Hunt | 7fa116d | 2014-11-17 14:16:55 -0800 | [diff] [blame] | 43 | stroke: none; |
| 44 | } |
| 45 | |
Simon Hunt | 1a9eff9 | 2014-11-07 11:06:34 -0800 | [diff] [blame] | 46 | /* NODES */ |
| 47 | |
Simon Hunt | ac9e24f | 2014-11-12 10:12:21 -0800 | [diff] [blame] | 48 | #topo svg .node { |
Simon Hunt | 99c1384 | 2014-11-06 18:23:12 -0800 | [diff] [blame] | 49 | cursor: pointer; |
| 50 | } |
| 51 | |
Simon Hunt | ac9e24f | 2014-11-12 10:12:21 -0800 | [diff] [blame] | 52 | #topo svg .node.selected rect, |
| 53 | #topo svg .node.selected circle { |
Thomas Vachuska | ece59ee | 2014-11-19 19:06:11 -0800 | [diff] [blame] | 54 | fill: #ffA300; |
Simon Hunt | ac9e24f | 2014-11-12 10:12:21 -0800 | [diff] [blame] | 55 | filter: url(#blue-glow); |
| 56 | } |
| 57 | |
| 58 | /* for debugging */ |
| 59 | #topo svg .node circle.debug { |
| 60 | fill: white; |
| 61 | stroke: red; |
| 62 | } |
| 63 | |
| 64 | #topo svg .node text { |
| 65 | pointer-events: none; |
| 66 | } |
| 67 | |
| 68 | /* Device Nodes */ |
| 69 | |
| 70 | #topo svg .node.device { |
| 71 | } |
| 72 | |
Simon Hunt | 56d5185 | 2014-11-09 13:03:35 -0800 | [diff] [blame] | 73 | #topo svg .node.device rect { |
Simon Hunt | 1a9eff9 | 2014-11-07 11:06:34 -0800 | [diff] [blame] | 74 | stroke-width: 1.5px; |
| 75 | } |
| 76 | |
Simon Hunt | 56d5185 | 2014-11-09 13:03:35 -0800 | [diff] [blame] | 77 | #topo svg .node.device.fixed rect { |
Simon Hunt | 99c1384 | 2014-11-06 18:23:12 -0800 | [diff] [blame] | 78 | stroke-width: 1.5; |
Thomas Vachuska | 8954329 | 2014-11-19 11:28:33 -0800 | [diff] [blame] | 79 | stroke: #ccc; |
Simon Hunt | 99c1384 | 2014-11-06 18:23:12 -0800 | [diff] [blame] | 80 | } |
| 81 | |
Simon Hunt | bb282f5 | 2014-11-10 11:08:19 -0800 | [diff] [blame] | 82 | /* note: device is offline without the 'online' class */ |
Thomas Vachuska | 8954329 | 2014-11-19 11:28:33 -0800 | [diff] [blame] | 83 | #topo svg .node.device { |
| 84 | fill: #777; |
| 85 | } |
| 86 | |
| 87 | #topo svg .node.device.switch.online { |
| 88 | fill: #17f; |
| 89 | } |
| 90 | |
| 91 | #topo svg .node.device.roadm.online { |
Thomas Vachuska | ece59ee | 2014-11-19 19:06:11 -0800 | [diff] [blame] | 92 | fill: #335a9a; |
Thomas Vachuska | 8954329 | 2014-11-19 11:28:33 -0800 | [diff] [blame] | 93 | } |
| 94 | |
Simon Hunt | bb282f5 | 2014-11-10 11:08:19 -0800 | [diff] [blame] | 95 | /* note: device is offline without the 'online' class */ |
Simon Hunt | 7cd48f3 | 2014-11-09 23:42:50 -0800 | [diff] [blame] | 96 | #topo svg .node.device text { |
Thomas Vachuska | 8954329 | 2014-11-19 11:28:33 -0800 | [diff] [blame] | 97 | fill: #aaa; |
Simon Hunt | 99c1384 | 2014-11-06 18:23:12 -0800 | [diff] [blame] | 98 | font: 10pt sans-serif; |
Simon Hunt | 99c1384 | 2014-11-06 18:23:12 -0800 | [diff] [blame] | 99 | } |
| 100 | |
Thomas Vachuska | 8954329 | 2014-11-19 11:28:33 -0800 | [diff] [blame] | 101 | #topo svg .node.device.online text { |
| 102 | fill: white; |
| 103 | } |
| 104 | |
| 105 | |
Simon Hunt | ac9e24f | 2014-11-12 10:12:21 -0800 | [diff] [blame] | 106 | /* Host Nodes */ |
| 107 | |
Thomas Vachuska | 8954329 | 2014-11-19 11:28:33 -0800 | [diff] [blame] | 108 | #topo svg .node.host { |
| 109 | stroke: #000; |
| 110 | } |
| 111 | |
Simon Hunt | 7cd48f3 | 2014-11-09 23:42:50 -0800 | [diff] [blame] | 112 | #topo svg .node.host text { |
| 113 | fill: #846; |
Simon Hunt | 7fa116d | 2014-11-17 14:16:55 -0800 | [diff] [blame] | 114 | stroke: none; |
Simon Hunt | 7cd48f3 | 2014-11-09 23:42:50 -0800 | [diff] [blame] | 115 | font: 9pt sans-serif; |
Simon Hunt | 7cd48f3 | 2014-11-09 23:42:50 -0800 | [diff] [blame] | 116 | } |
| 117 | |
Simon Hunt | 7fa116d | 2014-11-17 14:16:55 -0800 | [diff] [blame] | 118 | svg .node.host circle { |
Thomas Vachuska | 8954329 | 2014-11-19 11:28:33 -0800 | [diff] [blame] | 119 | stroke: #000; |
| 120 | fill: #ddd; |
Simon Hunt | 7fa116d | 2014-11-17 14:16:55 -0800 | [diff] [blame] | 121 | } |
| 122 | |
Simon Hunt | 1a9eff9 | 2014-11-07 11:06:34 -0800 | [diff] [blame] | 123 | /* LINKS */ |
| 124 | |
Simon Hunt | 56d5185 | 2014-11-09 13:03:35 -0800 | [diff] [blame] | 125 | #topo svg .link { |
Simon Hunt | 1a9eff9 | 2014-11-07 11:06:34 -0800 | [diff] [blame] | 126 | opacity: .7; |
| 127 | } |
| 128 | |
Thomas Vachuska | e4cebaf | 2014-11-15 18:49:34 -0800 | [diff] [blame] | 129 | #topo svg .link.inactive { |
| 130 | opacity: .2; |
| 131 | stroke-dasharray: 8 4; |
| 132 | } |
| 133 | |
Simon Hunt | a255a2c | 2014-11-13 22:29:35 -0800 | [diff] [blame] | 134 | #topo svg .link.secondary { |
Thomas Vachuska | a3148a7 | 2014-11-19 21:38:35 -0800 | [diff] [blame] | 135 | stroke: rgba(0,153,51,0.5); |
Thomas Vachuska | cd2920c | 2014-11-19 14:49:55 -0800 | [diff] [blame] | 136 | stroke-width: 3px; |
Simon Hunt | a255a2c | 2014-11-13 22:29:35 -0800 | [diff] [blame] | 137 | } |
Thomas Vachuska | 5fedb7a | 2014-11-20 00:55:08 -0800 | [diff] [blame] | 138 | #topo svg .link.primary { |
| 139 | stroke: #ffA300; |
| 140 | stroke-width: 4px; |
| 141 | } |
Simon Hunt | a255a2c | 2014-11-13 22:29:35 -0800 | [diff] [blame] | 142 | #topo svg .link.animated { |
Thomas Vachuska | a3148a7 | 2014-11-19 21:38:35 -0800 | [diff] [blame] | 143 | stroke: #ffA300; |
Simon Hunt | a255a2c | 2014-11-13 22:29:35 -0800 | [diff] [blame] | 144 | } |
| 145 | |
Simon Hunt | a255a2c | 2014-11-13 22:29:35 -0800 | [diff] [blame] | 146 | #topo svg .link.secondary.optical { |
Thomas Vachuska | 8954329 | 2014-11-19 11:28:33 -0800 | [diff] [blame] | 147 | stroke: rgba(128,64,255,0.5); |
Simon Hunt | a255a2c | 2014-11-13 22:29:35 -0800 | [diff] [blame] | 148 | stroke-width: 4px; |
| 149 | } |
Thomas Vachuska | 5fedb7a | 2014-11-20 00:55:08 -0800 | [diff] [blame] | 150 | #topo svg .link.primary.optical { |
| 151 | stroke: #74f; |
| 152 | stroke-width: 6px; |
| 153 | } |
Simon Hunt | a255a2c | 2014-11-13 22:29:35 -0800 | [diff] [blame] | 154 | #topo svg .link.animated.optical { |
Thomas Vachuska | 8954329 | 2014-11-19 11:28:33 -0800 | [diff] [blame] | 155 | stroke: #74f; |
Simon Hunt | a255a2c | 2014-11-13 22:29:35 -0800 | [diff] [blame] | 156 | stroke-width: 10px; |
| 157 | stroke-dasharray: 8 8 |
| 158 | } |
Thomas Vachuska | 4830d39 | 2014-11-09 17:09:56 -0800 | [diff] [blame] | 159 | |
Simon Hunt | e2575b6 | 2014-11-18 15:25:53 -0800 | [diff] [blame] | 160 | #topo svg .linkLabel rect { |
Thomas Vachuska | 20322ff | 2014-11-19 16:22:25 -0800 | [diff] [blame] | 161 | fill: #eee; |
| 162 | stroke: none; |
Simon Hunt | e2575b6 | 2014-11-18 15:25:53 -0800 | [diff] [blame] | 163 | } |
| 164 | #topo svg .linkLabel text { |
| 165 | text-anchor: middle; |
Thomas Vachuska | 20322ff | 2014-11-19 16:22:25 -0800 | [diff] [blame] | 166 | stroke: #777; |
| 167 | stroke-width: 0.1px; |
| 168 | font-size: 9pt; |
Simon Hunt | e2575b6 | 2014-11-18 15:25:53 -0800 | [diff] [blame] | 169 | } |
Simon Hunt | 61d0404 | 2014-11-11 17:27:16 -0800 | [diff] [blame] | 170 | |
Simon Hunt | ac9e24f | 2014-11-12 10:12:21 -0800 | [diff] [blame] | 171 | /* Fly-in details pane */ |
Simon Hunt | 61d0404 | 2014-11-11 17:27:16 -0800 | [diff] [blame] | 172 | |
| 173 | #topo-detail { |
| 174 | /* gets base CSS from .fpanel in floatPanel.css */ |
| 175 | } |
| 176 | |
Simon Hunt | a6a9fe7 | 2014-11-20 11:17:12 -0800 | [diff] [blame] | 177 | #topo-detail svg { |
| 178 | display: inline-block; |
| 179 | width: 42px; |
| 180 | height: 42px; |
Simon Hunt | 61d0404 | 2014-11-11 17:27:16 -0800 | [diff] [blame] | 181 | } |
| 182 | |
Simon Hunt | a6a9fe7 | 2014-11-20 11:17:12 -0800 | [diff] [blame] | 183 | #topo-detail svg .glyphIcon { |
| 184 | fill: black; |
| 185 | stroke: none; |
| 186 | fill-rule: evenodd; |
| 187 | } |
| 188 | |
| 189 | #topo-detail h2 { |
| 190 | position: absolute; |
Simon Hunt | a3dd957 | 2014-11-20 15:22:41 -0800 | [diff] [blame] | 191 | margin: 0px 4px; |
| 192 | top: 20px; |
| 193 | left: 50px; |
| 194 | color: black; |
| 195 | } |
| 196 | |
| 197 | #topo-detail h3 { |
Simon Hunt | a6a9fe7 | 2014-11-20 11:17:12 -0800 | [diff] [blame] | 198 | margin: 0px 4px; |
| 199 | top: 20px; |
| 200 | left: 50px; |
| 201 | color: black; |
Simon Hunt | 61d0404 | 2014-11-11 17:27:16 -0800 | [diff] [blame] | 202 | } |
| 203 | |
| 204 | #topo-detail p, table { |
| 205 | margin: 4px 4px; |
| 206 | } |
| 207 | |
| 208 | #topo-detail td.label { |
| 209 | font-style: italic; |
| 210 | color: #777; |
| 211 | padding-right: 12px; |
| 212 | } |
| 213 | |
| 214 | #topo-detail td.value { |
Simon Hunt | 61d0404 | 2014-11-11 17:27:16 -0800 | [diff] [blame] | 215 | } |
| 216 | |
Simon Hunt | b53e068 | 2014-11-12 13:32:01 -0800 | [diff] [blame] | 217 | |
Simon Hunt | d72bc70 | 2014-11-13 18:38:04 -0800 | [diff] [blame] | 218 | #topo-detail .actionBtn { |
| 219 | margin: 6px 12px; |
| 220 | padding: 2px 6px; |
| 221 | font-size: 9pt; |
| 222 | cursor: pointer; |
| 223 | width: 50%; |
| 224 | text-align: center; |
Thomas Vachuska | 8954329 | 2014-11-19 11:28:33 -0800 | [diff] [blame] | 225 | |
| 226 | /* theme specific... */ |
Thomas Vachuska | 4731f12 | 2014-11-20 04:56:19 -0800 | [diff] [blame] | 227 | border: 2px solid #ddd; |
| 228 | border-radius: 4px; |
| 229 | color: #eee; |
| 230 | background: #888; |
Simon Hunt | d72bc70 | 2014-11-13 18:38:04 -0800 | [diff] [blame] | 231 | } |
| 232 | |
| 233 | #topo-detail .actionBtn:hover { |
Thomas Vachuska | 8954329 | 2014-11-19 11:28:33 -0800 | [diff] [blame] | 234 | /* theme specific... */ |
Thomas Vachuska | 4731f12 | 2014-11-20 04:56:19 -0800 | [diff] [blame] | 235 | border: 2px solid #ddd; |
| 236 | color: #eee; |
| 237 | background: #444; |
Simon Hunt | d72bc70 | 2014-11-13 18:38:04 -0800 | [diff] [blame] | 238 | } |
| 239 | |
Simon Hunt | b53e068 | 2014-11-12 13:32:01 -0800 | [diff] [blame] | 240 | |
Simon Hunt | 61d0404 | 2014-11-11 17:27:16 -0800 | [diff] [blame] | 241 | #topo-detail hr { |
| 242 | height: 1px; |
| 243 | color: #ccc; |
| 244 | background-color: #ccc; |
| 245 | border: 0; |
| 246 | } |
| 247 | |
Simon Hunt | a5e8914 | 2014-11-14 07:00:33 -0800 | [diff] [blame] | 248 | /* ONOS instance stuff */ |
| 249 | |
| 250 | #topo-oibox { |
Simon Hunt | 9b228cb | 2014-11-19 13:18:57 -0800 | [diff] [blame] | 251 | width: 120px; |
Simon Hunt | a5e8914 | 2014-11-14 07:00:33 -0800 | [diff] [blame] | 252 | } |
| 253 | |
| 254 | #topo-oibox .onosInst { |
Simon Hunt | 9c15eca | 2014-11-15 18:37:59 -0800 | [diff] [blame] | 255 | position: relative; |
Simon Hunt | 9b228cb | 2014-11-19 13:18:57 -0800 | [diff] [blame] | 256 | width: 88%; |
| 257 | left: 4%; |
Simon Hunt | 9c15eca | 2014-11-15 18:37:59 -0800 | [diff] [blame] | 258 | height: 80px; |
Simon Hunt | 9b228cb | 2014-11-19 13:18:57 -0800 | [diff] [blame] | 259 | margin: 8px 0; |
Simon Hunt | a5e8914 | 2014-11-14 07:00:33 -0800 | [diff] [blame] | 260 | cursor: pointer; |
Thomas Vachuska | 8954329 | 2014-11-19 11:28:33 -0800 | [diff] [blame] | 261 | |
Simon Hunt | 9b228cb | 2014-11-19 13:18:57 -0800 | [diff] [blame] | 262 | -moz-border-radius: 12px; |
| 263 | border-radius: 12px; |
| 264 | |
Thomas Vachuska | 8954329 | 2014-11-19 11:28:33 -0800 | [diff] [blame] | 265 | /* theme-related */ |
| 266 | color: #444; |
| 267 | background-color: #ccc; |
Simon Hunt | 9b228cb | 2014-11-19 13:18:57 -0800 | [diff] [blame] | 268 | border: 4px solid #aaa; |
Thomas Vachuska | 8954329 | 2014-11-19 11:28:33 -0800 | [diff] [blame] | 269 | } |
| 270 | |
| 271 | #topo-oibox .onosInst.online { |
| 272 | /* theme-related */ |
| 273 | color: #113; |
Simon Hunt | 9b228cb | 2014-11-19 13:18:57 -0800 | [diff] [blame] | 274 | background-color: #9cf; |
| 275 | border: 4px solid #357; |
Simon Hunt | a5e8914 | 2014-11-14 07:00:33 -0800 | [diff] [blame] | 276 | } |
| 277 | |
Simon Hunt | 9c15eca | 2014-11-15 18:37:59 -0800 | [diff] [blame] | 278 | #topo-oibox .onosInst .onosTitle { |
| 279 | text-align: center; |
Simon Hunt | 9b228cb | 2014-11-19 13:18:57 -0800 | [diff] [blame] | 280 | font-size: 10pt; |
Simon Hunt | 9c15eca | 2014-11-15 18:37:59 -0800 | [diff] [blame] | 281 | margin-top: 6px; |
Thomas Vachuska | 8954329 | 2014-11-19 11:28:33 -0800 | [diff] [blame] | 282 | color: #888; |
| 283 | } |
| 284 | |
| 285 | #topo-oibox .onosInst.online .onosTitle { |
| 286 | color: black; |
Simon Hunt | 9c15eca | 2014-11-15 18:37:59 -0800 | [diff] [blame] | 287 | } |
| 288 | |
Simon Hunt | 9590801 | 2014-11-20 10:20:26 -0800 | [diff] [blame] | 289 | #topo-oibox .onosInst svg .glyphIcon { |
Simon Hunt | 9c15eca | 2014-11-15 18:37:59 -0800 | [diff] [blame] | 290 | opacity: 0.5; |
Simon Hunt | 9590801 | 2014-11-20 10:20:26 -0800 | [diff] [blame] | 291 | fill: black; |
| 292 | stroke: none; |
| 293 | fill-rule: evenodd; |
Simon Hunt | 9c15eca | 2014-11-15 18:37:59 -0800 | [diff] [blame] | 294 | } |
Simon Hunt | 9590801 | 2014-11-20 10:20:26 -0800 | [diff] [blame] | 295 | #topo-oibox .onosInst.online svg .glyphIcon { |
| 296 | opacity: 1; |
| 297 | fill: black; |
| 298 | stroke: none; |
| 299 | fill-rule: evenodd; |
| 300 | } |
| 301 | |
Simon Hunt | 9c15eca | 2014-11-15 18:37:59 -0800 | [diff] [blame] | 302 | |
| 303 | #topo-oibox .onosInst.online img { |
| 304 | opacity: 1.0; |
Simon Hunt | fcfb46c | 2014-11-19 12:53:38 -0800 | [diff] [blame] | 305 | padding: 3px; |
Simon Hunt | 9c15eca | 2014-11-15 18:37:59 -0800 | [diff] [blame] | 306 | } |
| 307 | |
| 308 | #topo-oibox .onosInst img.ui { |
| 309 | opacity: 1; |
| 310 | position: absolute; |
| 311 | top: 3px; |
| 312 | right: 3px; |
| 313 | width: 20px; |
| 314 | height: 20px; |
| 315 | } |
| 316 | |
Simon Hunt | 9462e8c | 2014-11-14 17:28:09 -0800 | [diff] [blame] | 317 | #topo-oibox .onosInst.mastership { |
| 318 | opacity: 0.3; |
| 319 | } |
| 320 | #topo-oibox .onosInst.mastership.affinity { |
| 321 | opacity: 1.0; |
Simon Hunt | 7fa116d | 2014-11-17 14:16:55 -0800 | [diff] [blame] | 322 | box-shadow: 0 2px 8px #33e; |
Simon Hunt | 9462e8c | 2014-11-14 17:28:09 -0800 | [diff] [blame] | 323 | } |
| 324 | |
| 325 | |
| 326 | #topo svg .suppressed { |
Simon Hunt | a5e8914 | 2014-11-14 07:00:33 -0800 | [diff] [blame] | 327 | opacity: 0.2; |
| 328 | } |
| 329 | |
Simon Hunt | a6a9fe7 | 2014-11-20 11:17:12 -0800 | [diff] [blame] | 330 | /* Death Mask (starts hidden) */ |
Simon Hunt | 0c6d419 | 2014-11-12 12:07:10 -0800 | [diff] [blame] | 331 | |
| 332 | #topo-mask { |
| 333 | display: none; |
| 334 | position: absolute; |
| 335 | top: 0; |
| 336 | left: 0; |
| 337 | width: 10000px; |
| 338 | height: 8000px; |
| 339 | z-index: 5000; |
| 340 | background-color: rgba(0,0,0,0.75); |
| 341 | padding: 60px; |
| 342 | } |
| 343 | |
| 344 | #topo-mask p { |
| 345 | margin: 8px 20px; |
| 346 | color: #ddd; |
| 347 | font-size: 14pt; |
| 348 | font-style: italic; |
| 349 | } |
| 350 | |