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 { |
28 | stroke-width: 2px; | ||||
29 | stroke: #aaaaaa; | ||||
30 | fill: transparent; | ||||
31 | } | ||||
32 | |||||
Simon Hunt | ac9e24f | 2014-11-12 10:12:21 -0800 | [diff] [blame] | 33 | |
Simon Hunt | 1a9eff9 | 2014-11-07 11:06:34 -0800 | [diff] [blame] | 34 | /* NODES */ |
35 | |||||
Simon Hunt | ac9e24f | 2014-11-12 10:12:21 -0800 | [diff] [blame] | 36 | #topo svg .node { |
Simon Hunt | 99c1384 | 2014-11-06 18:23:12 -0800 | [diff] [blame] | 37 | cursor: pointer; |
38 | } | ||||
39 | |||||
Simon Hunt | ac9e24f | 2014-11-12 10:12:21 -0800 | [diff] [blame] | 40 | #topo svg .node.selected rect, |
41 | #topo svg .node.selected circle { | ||||
42 | filter: url(#blue-glow); | ||||
43 | } | ||||
44 | |||||
45 | /* for debugging */ | ||||
46 | #topo svg .node circle.debug { | ||||
47 | fill: white; | ||||
48 | stroke: red; | ||||
49 | } | ||||
50 | |||||
51 | #topo svg .node text { | ||||
52 | pointer-events: none; | ||||
53 | } | ||||
54 | |||||
55 | /* Device Nodes */ | ||||
56 | |||||
57 | #topo svg .node.device { | ||||
58 | } | ||||
59 | |||||
Simon Hunt | 56d5185 | 2014-11-09 13:03:35 -0800 | [diff] [blame] | 60 | #topo svg .node.device rect { |
Simon Hunt | 1a9eff9 | 2014-11-07 11:06:34 -0800 | [diff] [blame] | 61 | stroke-width: 1.5px; |
62 | } | ||||
63 | |||||
Simon Hunt | 56d5185 | 2014-11-09 13:03:35 -0800 | [diff] [blame] | 64 | #topo svg .node.device.fixed rect { |
Simon Hunt | 99c1384 | 2014-11-06 18:23:12 -0800 | [diff] [blame] | 65 | stroke-width: 1.5; |
66 | stroke: #ccc; | ||||
67 | } | ||||
68 | |||||
Simon Hunt | bb282f5 | 2014-11-10 11:08:19 -0800 | [diff] [blame] | 69 | /* note: device is offline without the 'online' class */ |
70 | #topo svg .node.device { | ||||
71 | fill: #777; | ||||
72 | } | ||||
73 | |||||
74 | #topo svg .node.device.switch.online { | ||||
Simon Hunt | 99c1384 | 2014-11-06 18:23:12 -0800 | [diff] [blame] | 75 | fill: #17f; |
76 | } | ||||
77 | |||||
Simon Hunt | bb282f5 | 2014-11-10 11:08:19 -0800 | [diff] [blame] | 78 | #topo svg .node.device.roadm.online { |
Simon Hunt | c7ee066 | 2014-11-05 16:44:37 -0800 | [diff] [blame] | 79 | fill: #03c; |
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 */ |
Simon Hunt | 7cd48f3 | 2014-11-09 23:42:50 -0800 | [diff] [blame] | 83 | #topo svg .node.device text { |
Simon Hunt | bb282f5 | 2014-11-10 11:08:19 -0800 | [diff] [blame] | 84 | fill: #aaa; |
Simon Hunt | 99c1384 | 2014-11-06 18:23:12 -0800 | [diff] [blame] | 85 | font: 10pt sans-serif; |
Simon Hunt | 99c1384 | 2014-11-06 18:23:12 -0800 | [diff] [blame] | 86 | } |
87 | |||||
Simon Hunt | bb282f5 | 2014-11-10 11:08:19 -0800 | [diff] [blame] | 88 | #topo svg .node.device.online text { |
89 | fill: white; | ||||
90 | } | ||||
91 | |||||
Simon Hunt | ac9e24f | 2014-11-12 10:12:21 -0800 | [diff] [blame] | 92 | |
93 | /* Host Nodes */ | ||||
94 | |||||
95 | #topo svg .node.host { | ||||
96 | fill: #846; | ||||
97 | } | ||||
98 | |||||
Simon Hunt | 7cd48f3 | 2014-11-09 23:42:50 -0800 | [diff] [blame] | 99 | #topo svg .node.host text { |
100 | fill: #846; | ||||
101 | font: 9pt sans-serif; | ||||
Simon Hunt | 7cd48f3 | 2014-11-09 23:42:50 -0800 | [diff] [blame] | 102 | } |
103 | |||||
Simon Hunt | 1a9eff9 | 2014-11-07 11:06:34 -0800 | [diff] [blame] | 104 | |
105 | /* LINKS */ | ||||
106 | |||||
Simon Hunt | 56d5185 | 2014-11-09 13:03:35 -0800 | [diff] [blame] | 107 | #topo svg .link { |
Simon Hunt | 1a9eff9 | 2014-11-07 11:06:34 -0800 | [diff] [blame] | 108 | opacity: .7; |
109 | } | ||||
110 | |||||
Thomas Vachuska | 4830d39 | 2014-11-09 17:09:56 -0800 | [diff] [blame] | 111 | #topo svg .link.showPath { |
112 | stroke: #f00; | ||||
Simon Hunt | 7cd48f3 | 2014-11-09 23:42:50 -0800 | [diff] [blame] | 113 | stroke-width: 6px; |
Thomas Vachuska | 4830d39 | 2014-11-09 17:09:56 -0800 | [diff] [blame] | 114 | } |
115 | |||||
Simon Hunt | 61d0404 | 2014-11-11 17:27:16 -0800 | [diff] [blame] | 116 | |
Simon Hunt | ac9e24f | 2014-11-12 10:12:21 -0800 | [diff] [blame] | 117 | /* Fly-in details pane */ |
Simon Hunt | 61d0404 | 2014-11-11 17:27:16 -0800 | [diff] [blame] | 118 | |
119 | #topo-detail { | ||||
120 | /* gets base CSS from .fpanel in floatPanel.css */ | ||||
121 | } | ||||
122 | |||||
Simon Hunt | 61d0404 | 2014-11-11 17:27:16 -0800 | [diff] [blame] | 123 | #topo-detail h2 { |
124 | margin: 8px 4px; | ||||
125 | color: black; | ||||
126 | vertical-align: middle; | ||||
127 | } | ||||
128 | |||||
129 | #topo-detail h2 img { | ||||
130 | height: 32px; | ||||
131 | padding-right: 8px; | ||||
132 | vertical-align: middle; | ||||
133 | } | ||||
134 | |||||
135 | #topo-detail p, table { | ||||
136 | margin: 4px 4px; | ||||
137 | } | ||||
138 | |||||
139 | #topo-detail td.label { | ||||
140 | font-style: italic; | ||||
141 | color: #777; | ||||
142 | padding-right: 12px; | ||||
143 | } | ||||
144 | |||||
145 | #topo-detail td.value { | ||||
Simon Hunt | 61d0404 | 2014-11-11 17:27:16 -0800 | [diff] [blame] | 146 | } |
147 | |||||
Simon Hunt | b53e068 | 2014-11-12 13:32:01 -0800 | [diff] [blame] | 148 | |
149 | |||||
Simon Hunt | 61d0404 | 2014-11-11 17:27:16 -0800 | [diff] [blame] | 150 | #topo-detail hr { |
151 | height: 1px; | ||||
152 | color: #ccc; | ||||
153 | background-color: #ccc; | ||||
154 | border: 0; | ||||
155 | } | ||||
156 | |||||
Simon Hunt | 0c6d419 | 2014-11-12 12:07:10 -0800 | [diff] [blame] | 157 | /* Web Socket Closed Mask (starts hidden) */ |
158 | |||||
159 | #topo-mask { | ||||
160 | display: none; | ||||
161 | position: absolute; | ||||
162 | top: 0; | ||||
163 | left: 0; | ||||
164 | width: 10000px; | ||||
165 | height: 8000px; | ||||
166 | z-index: 5000; | ||||
167 | background-color: rgba(0,0,0,0.75); | ||||
168 | padding: 60px; | ||||
169 | } | ||||
170 | |||||
171 | #topo-mask p { | ||||
172 | margin: 8px 20px; | ||||
173 | color: #ddd; | ||||
174 | font-size: 14pt; | ||||
175 | font-style: italic; | ||||
176 | } | ||||
177 |