| /* |
| * 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 CSS file |
| |
| @author Simon Hunt |
| */ |
| |
| body, html { |
| height: 100%; |
| } |
| |
| /* |
| * Classes |
| */ |
| |
| img#logo { |
| height: 38px; |
| padding-left: 8px; |
| padding-right: 8px; |
| } |
| |
| span.title { |
| color: #369; |
| font-size: 14pt; |
| font-style: italic; |
| vertical-align: 12px; |
| } |
| |
| span.radio { |
| color: darkslateblue; |
| font-size: 10pt; |
| } |
| |
| span.right { |
| padding-top: 8px; |
| padding-right: 16px; |
| float: right; |
| } |
| |
| /* |
| * Radio Buttons |
| */ |
| |
| span.radio { |
| margin: 4px 0; |
| border: 1px dotted #222; |
| padding: 1px 6px; |
| color: #eee; |
| cursor: pointer; |
| } |
| |
| span.radio.active { |
| background-color: #bbb; |
| border: 1px solid #eee; |
| padding: 1px 6px; |
| color: #666; |
| font-weight: bold; |
| } |
| |
| /* |
| * === DEBUGGING ====== |
| */ |
| svg { |
| /*border: 1px dashed red;*/ |
| } |
| |
| svg #bg { |
| opacity: 0.5; |
| } |
| |
| |
| /* |
| * Network Graph elements ====================================== |
| */ |
| |
| svg .link { |
| fill: none; |
| stroke: #666; |
| stroke-width: 2.0px; |
| opacity: .7; |
| /*marker-end: url(#end);*/ |
| |
| transition: opacity 250ms; |
| -webkit-transition: opacity 250ms; |
| -moz-transition: opacity 250ms; |
| } |
| |
| svg .link.host { |
| stroke: #666; |
| stroke-width: 1px; |
| Xstroke-dasharray: 3,3; |
| } |
| |
| svg .node.device rect { |
| stroke-width: 1.5px; |
| |
| transition: opacity 250ms; |
| -webkit-transition: opacity 250ms; |
| -moz-transition: opacity 250ms; |
| } |
| |
| svg .node.device.fixed rect { |
| stroke-width: 1.5; |
| stroke: #ccc; |
| Xstroke-dasharray: 4,2; |
| } |
| |
| svg .node.device.roadm rect { |
| fill: #03c; |
| } |
| |
| svg .node.device.switch rect { |
| fill: #06f; |
| } |
| |
| svg .node.host circle { |
| fill: #c96; |
| stroke: #000; |
| } |
| |
| svg .node text { |
| fill: white; |
| font: 10px sans-serif; |
| pointer-events: none; |
| } |
| |
| /* for debugging */ |
| svg .node circle.debug { |
| fill: white; |
| stroke: red; |
| } |
| svg .node rect.debug { |
| fill: yellow; |
| stroke: red; |
| opacity: 0.35; |
| } |
| |
| |
| svg .node.selected rect, |
| svg .node.selected circle { |
| filter: url(#blue-glow); |
| } |
| |
| svg .link.inactive, |
| svg .node.inactive rect, |
| svg .node.inactive circle, |
| svg .node.inactive text, |
| svg .node.inactive image { |
| opacity: .1; |
| } |
| |
| svg .node.inactive.selected rect, |
| svg .node.inactive.selected text, |
| svg .node.inactive.selected image { |
| opacity: .6; |
| } |
| |
| /* |
| * === currently unused =============================================== |
| */ |
| |
| svg marker#end { |
| fill: #666; |
| stroke: #666; |
| stroke-width: 1.5px; |
| } |
| |
| svg .legend { |
| position: fixed; |
| } |
| |
| svg .legend .category rect { |
| stroke-width: 1px; |
| } |
| |
| svg .legend .category text { |
| fill: #000; |
| font: 10px sans-serif; |
| pointer-events: none; |
| } |
| |
| /* |
| * ============================================================= |
| */ |
| |
| /* |
| * Specific structural elements |
| */ |
| |
| /* This is to ensure that the body does not expand to account for the |
| flyout details pane, that is positioned "off screen". |
| */ |
| body { |
| overflow: hidden; |
| } |
| |
| #mast { |
| height: 36px; |
| padding: 4px; |
| background-color: #bbb; |
| vertical-align: baseline; |
| box-shadow: 0px 2px 8px #777; |
| } |
| |
| #frame { |
| width: 100%; |
| height: 100%; |
| background-color: #fff; |
| } |
| |
| #flyout { |
| position: absolute; |
| z-index: 100; |
| display: block; |
| top: 10%; |
| width: 280px; |
| right: -300px; |
| opacity: 0; |
| background-color: rgba(255,255,255,0.8); |
| |
| padding: 10px; |
| color: black; |
| font-size: 10pt; |
| box-shadow: 2px 2px 16px #777; |
| } |
| |
| #flyout h2 { |
| margin: 8px 4px; |
| color: black; |
| vertical-align: middle; |
| } |
| |
| #flyout h2 img { |
| height: 32px; |
| padding-right: 8px; |
| vertical-align: middle; |
| } |
| |
| #flyout p, table { |
| margin: 4px 4px; |
| } |
| |
| #flyout td.label { |
| font-style: italic; |
| color: #777; |
| padding-right: 12px; |
| } |
| |
| #flyout td.value { |
| |
| } |
| |
| #flyout hr { |
| height: 1px; |
| color: #ccc; |
| background-color: #ccc; |
| border: 0; |
| } |
| |