| /* |
| * Copyright 2014 Open Networking Laboratory |
| * |
| * Licensed under the Apache License, Version 2.0 (the "License"); |
| * you may not use this file except in compliance with the License. |
| * You may obtain a copy of the License at |
| * |
| * http://www.apache.org/licenses/LICENSE-2.0 |
| * |
| * Unless required by applicable law or agreed to in writing, software |
| * distributed under the License is distributed on an "AS IS" BASIS, |
| * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| * See the License for the specific language governing permissions and |
| * limitations under the License. |
| */ |
| |
| /* |
| ONOS GUI -- Topology view -- CSS file |
| |
| @author Simon Hunt |
| */ |
| |
| #topo svg #topo-bg { |
| opacity: 0.5; |
| } |
| |
| |
| /* NODES */ |
| |
| #topo svg .node { |
| cursor: pointer; |
| } |
| |
| #topo svg .node.selected rect, |
| #topo svg .node.selected circle { |
| filter: url(#blue-glow); |
| } |
| |
| /* for debugging */ |
| #topo svg .node circle.debug { |
| fill: white; |
| stroke: red; |
| } |
| |
| #topo svg .node text { |
| pointer-events: none; |
| } |
| |
| /* Device Nodes */ |
| |
| #topo svg .node.device { |
| } |
| |
| #topo svg .node.device rect { |
| stroke-width: 1.5px; |
| } |
| |
| #topo svg .node.device.fixed rect { |
| stroke-width: 1.5; |
| stroke: #ccc; |
| } |
| |
| /* note: device is offline without the 'online' class */ |
| #topo svg .node.device { |
| fill: #777; |
| } |
| |
| #topo svg .node.device.switch.online { |
| fill: #17f; |
| } |
| |
| #topo svg .node.device.roadm.online { |
| fill: #03c; |
| } |
| |
| /* note: device is offline without the 'online' class */ |
| #topo svg .node.device text { |
| fill: #aaa; |
| font: 10pt sans-serif; |
| } |
| |
| #topo svg .node.device.online text { |
| fill: white; |
| } |
| |
| |
| /* Host Nodes */ |
| |
| #topo svg .node.host { |
| fill: #846; |
| } |
| |
| #topo svg .node.host text { |
| fill: #846; |
| font: 9pt sans-serif; |
| } |
| |
| |
| /* LINKS */ |
| |
| #topo svg .link { |
| opacity: .7; |
| } |
| |
| #topo svg .link.showPath { |
| stroke: #f00; |
| stroke-width: 6px; |
| } |
| |
| |
| /* Fly-in details pane */ |
| |
| #topo-detail { |
| /* gets base CSS from .fpanel in floatPanel.css */ |
| } |
| |
| #topo-detail h2 { |
| margin: 8px 4px; |
| color: black; |
| vertical-align: middle; |
| } |
| |
| #topo-detail h2 img { |
| height: 32px; |
| padding-right: 8px; |
| vertical-align: middle; |
| } |
| |
| #topo-detail p, table { |
| margin: 4px 4px; |
| } |
| |
| #topo-detail td.label { |
| font-style: italic; |
| color: #777; |
| padding-right: 12px; |
| } |
| |
| #topo-detail td.value { |
| } |
| |
| #topo-detail hr { |
| height: 1px; |
| color: #ccc; |
| background-color: #ccc; |
| border: 0; |
| } |
| |
| /* Web Socket Closed Mask (starts hidden) */ |
| |
| #topo-mask { |
| display: none; |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 10000px; |
| height: 8000px; |
| z-index: 5000; |
| background-color: rgba(0,0,0,0.75); |
| padding: 60px; |
| } |
| |
| #topo-mask p { |
| margin: 8px 20px; |
| color: #ddd; |
| font-size: 14pt; |
| font-style: italic; |
| } |
| |