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 { |
Paul Greyson | 6cb8ca0 | 2014-11-12 18:09:02 -0800 | [diff] [blame] | 28 | fill: transparent; |
29 | } | ||||
30 | |||||
Simon Hunt | ac9e24f | 2014-11-12 10:12:21 -0800 | [diff] [blame] | 31 | |
Simon Hunt | 7fa116d | 2014-11-17 14:16:55 -0800 | [diff] [blame] | 32 | #topo svg .glyph { |
Simon Hunt | 7fa116d | 2014-11-17 14:16:55 -0800 | [diff] [blame] | 33 | stroke: none; |
34 | } | ||||
35 | |||||
Simon Hunt | 1a9eff9 | 2014-11-07 11:06:34 -0800 | [diff] [blame] | 36 | /* NODES */ |
37 | |||||
Simon Hunt | ac9e24f | 2014-11-12 10:12:21 -0800 | [diff] [blame] | 38 | #topo svg .node { |
Simon Hunt | 99c1384 | 2014-11-06 18:23:12 -0800 | [diff] [blame] | 39 | cursor: pointer; |
40 | } | ||||
41 | |||||
Simon Hunt | ac9e24f | 2014-11-12 10:12:21 -0800 | [diff] [blame] | 42 | #topo svg .node.selected rect, |
43 | #topo svg .node.selected circle { | ||||
44 | filter: url(#blue-glow); | ||||
45 | } | ||||
46 | |||||
47 | /* for debugging */ | ||||
48 | #topo svg .node circle.debug { | ||||
49 | fill: white; | ||||
50 | stroke: red; | ||||
51 | } | ||||
52 | |||||
53 | #topo svg .node text { | ||||
54 | pointer-events: none; | ||||
55 | } | ||||
56 | |||||
57 | /* Device Nodes */ | ||||
58 | |||||
59 | #topo svg .node.device { | ||||
60 | } | ||||
61 | |||||
Simon Hunt | 56d5185 | 2014-11-09 13:03:35 -0800 | [diff] [blame] | 62 | #topo svg .node.device rect { |
Simon Hunt | 1a9eff9 | 2014-11-07 11:06:34 -0800 | [diff] [blame] | 63 | stroke-width: 1.5px; |
64 | } | ||||
65 | |||||
Simon Hunt | 56d5185 | 2014-11-09 13:03:35 -0800 | [diff] [blame] | 66 | #topo svg .node.device.fixed rect { |
Simon Hunt | 99c1384 | 2014-11-06 18:23:12 -0800 | [diff] [blame] | 67 | stroke-width: 1.5; |
Paul Greyson | 29cd58f | 2014-11-18 13:14:57 -0800 | [diff] [blame^] | 68 | } |
69 | |||||
70 | #topo .node text { | ||||
71 | font-weight: 100; | ||||
Simon Hunt | 99c1384 | 2014-11-06 18:23:12 -0800 | [diff] [blame] | 72 | } |
73 | |||||
Simon Hunt | bb282f5 | 2014-11-10 11:08:19 -0800 | [diff] [blame] | 74 | /* note: device is offline without the 'online' class */ |
Simon Hunt | bb282f5 | 2014-11-10 11:08:19 -0800 | [diff] [blame] | 75 | /* note: device is offline without the 'online' class */ |
Simon Hunt | 7cd48f3 | 2014-11-09 23:42:50 -0800 | [diff] [blame] | 76 | #topo svg .node.device text { |
Simon Hunt | 99c1384 | 2014-11-06 18:23:12 -0800 | [diff] [blame] | 77 | font: 10pt sans-serif; |
Simon Hunt | 99c1384 | 2014-11-06 18:23:12 -0800 | [diff] [blame] | 78 | } |
79 | |||||
Simon Hunt | ac9e24f | 2014-11-12 10:12:21 -0800 | [diff] [blame] | 80 | /* Host Nodes */ |
81 | |||||
Simon Hunt | 7cd48f3 | 2014-11-09 23:42:50 -0800 | [diff] [blame] | 82 | #topo svg .node.host text { |
83 | fill: #846; | ||||
Simon Hunt | 7fa116d | 2014-11-17 14:16:55 -0800 | [diff] [blame] | 84 | stroke: none; |
Simon Hunt | 7cd48f3 | 2014-11-09 23:42:50 -0800 | [diff] [blame] | 85 | font: 9pt sans-serif; |
Simon Hunt | 7cd48f3 | 2014-11-09 23:42:50 -0800 | [diff] [blame] | 86 | } |
87 | |||||
Simon Hunt | 7fa116d | 2014-11-17 14:16:55 -0800 | [diff] [blame] | 88 | svg .node.host circle { |
89 | fill: #c96; | ||||
90 | } | ||||
91 | |||||
92 | #topo svg .node.host.bgpSpeaker circle { | ||||
93 | fill: #853; | ||||
94 | } | ||||
Simon Hunt | 1a9eff9 | 2014-11-07 11:06:34 -0800 | [diff] [blame] | 95 | |
96 | /* LINKS */ | ||||
97 | |||||
Simon Hunt | 56d5185 | 2014-11-09 13:03:35 -0800 | [diff] [blame] | 98 | #topo svg .link { |
Simon Hunt | 1a9eff9 | 2014-11-07 11:06:34 -0800 | [diff] [blame] | 99 | opacity: .7; |
100 | } | ||||
101 | |||||
Thomas Vachuska | e4cebaf | 2014-11-15 18:49:34 -0800 | [diff] [blame] | 102 | #topo svg .link.inactive { |
103 | opacity: .2; | ||||
104 | stroke-dasharray: 8 4; | ||||
105 | } | ||||
106 | |||||
Simon Hunt | a255a2c | 2014-11-13 22:29:35 -0800 | [diff] [blame] | 107 | #topo svg .link.primary { |
Simon Hunt | 7cd48f3 | 2014-11-09 23:42:50 -0800 | [diff] [blame] | 108 | stroke-width: 6px; |
Thomas Vachuska | 4830d39 | 2014-11-09 17:09:56 -0800 | [diff] [blame] | 109 | } |
Simon Hunt | a255a2c | 2014-11-13 22:29:35 -0800 | [diff] [blame] | 110 | #topo svg .link.secondary { |
Simon Hunt | a255a2c | 2014-11-13 22:29:35 -0800 | [diff] [blame] | 111 | stroke-width: 4px; |
112 | } | ||||
113 | #topo svg .link.animated { | ||||
Simon Hunt | a255a2c | 2014-11-13 22:29:35 -0800 | [diff] [blame] | 114 | stroke-width: 10px; |
115 | stroke-dasharray: 8 8 | ||||
116 | } | ||||
117 | |||||
118 | #topo svg .link.primary.optical { | ||||
Simon Hunt | a255a2c | 2014-11-13 22:29:35 -0800 | [diff] [blame] | 119 | stroke-width: 6px; |
120 | } | ||||
121 | #topo svg .link.secondary.optical { | ||||
Simon Hunt | a255a2c | 2014-11-13 22:29:35 -0800 | [diff] [blame] | 122 | stroke-width: 4px; |
123 | } | ||||
124 | #topo svg .link.animated.optical { | ||||
Simon Hunt | a255a2c | 2014-11-13 22:29:35 -0800 | [diff] [blame] | 125 | stroke-width: 10px; |
126 | stroke-dasharray: 8 8 | ||||
127 | } | ||||
Thomas Vachuska | 4830d39 | 2014-11-09 17:09:56 -0800 | [diff] [blame] | 128 | |
Simon Hunt | e2575b6 | 2014-11-18 15:25:53 -0800 | [diff] [blame] | 129 | #topo svg .linkLabel rect { |
130 | fill: #eef; | ||||
131 | stroke: blue; | ||||
132 | stroke-width: 0.3; | ||||
133 | } | ||||
134 | #topo svg .linkLabel text { | ||||
135 | text-anchor: middle; | ||||
136 | fill: #a13d11; | ||||
137 | stroke: none; | ||||
138 | font-size: 8pt; | ||||
139 | } | ||||
Simon Hunt | 61d0404 | 2014-11-11 17:27:16 -0800 | [diff] [blame] | 140 | |
Simon Hunt | ac9e24f | 2014-11-12 10:12:21 -0800 | [diff] [blame] | 141 | /* Fly-in details pane */ |
Simon Hunt | 61d0404 | 2014-11-11 17:27:16 -0800 | [diff] [blame] | 142 | |
143 | #topo-detail { | ||||
144 | /* gets base CSS from .fpanel in floatPanel.css */ | ||||
145 | } | ||||
146 | |||||
Simon Hunt | 61d0404 | 2014-11-11 17:27:16 -0800 | [diff] [blame] | 147 | #topo-detail h2 { |
148 | margin: 8px 4px; | ||||
149 | color: black; | ||||
150 | vertical-align: middle; | ||||
151 | } | ||||
152 | |||||
153 | #topo-detail h2 img { | ||||
154 | height: 32px; | ||||
155 | padding-right: 8px; | ||||
156 | vertical-align: middle; | ||||
157 | } | ||||
158 | |||||
159 | #topo-detail p, table { | ||||
160 | margin: 4px 4px; | ||||
161 | } | ||||
162 | |||||
163 | #topo-detail td.label { | ||||
164 | font-style: italic; | ||||
165 | color: #777; | ||||
166 | padding-right: 12px; | ||||
167 | } | ||||
168 | |||||
169 | #topo-detail td.value { | ||||
Simon Hunt | 61d0404 | 2014-11-11 17:27:16 -0800 | [diff] [blame] | 170 | } |
171 | |||||
Simon Hunt | b53e068 | 2014-11-12 13:32:01 -0800 | [diff] [blame] | 172 | |
Simon Hunt | d72bc70 | 2014-11-13 18:38:04 -0800 | [diff] [blame] | 173 | #topo-detail .actionBtn { |
174 | margin: 6px 12px; | ||||
175 | padding: 2px 6px; | ||||
176 | font-size: 9pt; | ||||
177 | cursor: pointer; | ||||
178 | width: 50%; | ||||
179 | text-align: center; | ||||
Paul Greyson | 29cd58f | 2014-11-18 13:14:57 -0800 | [diff] [blame^] | 180 | border-width: 1px; |
181 | borer-style: solid; | ||||
Simon Hunt | d72bc70 | 2014-11-13 18:38:04 -0800 | [diff] [blame] | 182 | } |
183 | |||||
184 | #topo-detail .actionBtn:hover { | ||||
Paul Greyson | 29cd58f | 2014-11-18 13:14:57 -0800 | [diff] [blame^] | 185 | border-width: 1px; |
186 | border-style: solid; | ||||
Simon Hunt | d72bc70 | 2014-11-13 18:38:04 -0800 | [diff] [blame] | 187 | } |
188 | |||||
Simon Hunt | b53e068 | 2014-11-12 13:32:01 -0800 | [diff] [blame] | 189 | |
Simon Hunt | 61d0404 | 2014-11-11 17:27:16 -0800 | [diff] [blame] | 190 | #topo-detail hr { |
191 | height: 1px; | ||||
192 | color: #ccc; | ||||
193 | background-color: #ccc; | ||||
194 | border: 0; | ||||
195 | } | ||||
196 | |||||
Simon Hunt | a5e8914 | 2014-11-14 07:00:33 -0800 | [diff] [blame] | 197 | /* ONOS instance stuff */ |
198 | |||||
199 | #topo-oibox { | ||||
200 | width: 80px; | ||||
201 | } | ||||
202 | |||||
203 | #topo-oibox .onosInst { | ||||
Simon Hunt | 9c15eca | 2014-11-15 18:37:59 -0800 | [diff] [blame] | 204 | position: relative; |
Simon Hunt | a5e8914 | 2014-11-14 07:00:33 -0800 | [diff] [blame] | 205 | width: 80%; |
206 | left: 10%; | ||||
Simon Hunt | 9c15eca | 2014-11-15 18:37:59 -0800 | [diff] [blame] | 207 | height: 80px; |
208 | margin: 4px 0; | ||||
Simon Hunt | a5e8914 | 2014-11-14 07:00:33 -0800 | [diff] [blame] | 209 | cursor: pointer; |
Paul Greyson | 29cd58f | 2014-11-18 13:14:57 -0800 | [diff] [blame^] | 210 | border-width: 2px; |
211 | border-style: solid; | ||||
Simon Hunt | a5e8914 | 2014-11-14 07:00:33 -0800 | [diff] [blame] | 212 | } |
213 | |||||
Simon Hunt | 9c15eca | 2014-11-15 18:37:59 -0800 | [diff] [blame] | 214 | #topo-oibox .onosInst .onosTitle { |
215 | text-align: center; | ||||
216 | font-size: 11pt; | ||||
217 | margin-top: 6px; | ||||
Simon Hunt | 9c15eca | 2014-11-15 18:37:59 -0800 | [diff] [blame] | 218 | } |
219 | |||||
220 | #topo-oibox .onosInst img { | ||||
221 | opacity: 0.5; | ||||
222 | } | ||||
223 | |||||
224 | #topo-oibox .onosInst.online img { | ||||
225 | opacity: 1.0; | ||||
226 | } | ||||
227 | |||||
228 | #topo-oibox .onosInst img.ui { | ||||
229 | opacity: 1; | ||||
230 | position: absolute; | ||||
231 | top: 3px; | ||||
232 | right: 3px; | ||||
233 | width: 20px; | ||||
234 | height: 20px; | ||||
235 | } | ||||
236 | |||||
Simon Hunt | 9462e8c | 2014-11-14 17:28:09 -0800 | [diff] [blame] | 237 | #topo-oibox .onosInst.mastership { |
238 | opacity: 0.3; | ||||
239 | } | ||||
240 | #topo-oibox .onosInst.mastership.affinity { | ||||
241 | opacity: 1.0; | ||||
Simon Hunt | 7fa116d | 2014-11-17 14:16:55 -0800 | [diff] [blame] | 242 | box-shadow: 0 2px 8px #33e; |
Simon Hunt | 9462e8c | 2014-11-14 17:28:09 -0800 | [diff] [blame] | 243 | } |
244 | |||||
245 | |||||
246 | #topo svg .suppressed { | ||||
Simon Hunt | a5e8914 | 2014-11-14 07:00:33 -0800 | [diff] [blame] | 247 | opacity: 0.2; |
248 | } | ||||
249 | |||||
Simon Hunt | 0c6d419 | 2014-11-12 12:07:10 -0800 | [diff] [blame] | 250 | /* Web Socket Closed Mask (starts hidden) */ |
251 | |||||
252 | #topo-mask { | ||||
253 | display: none; | ||||
254 | position: absolute; | ||||
255 | top: 0; | ||||
256 | left: 0; | ||||
257 | width: 10000px; | ||||
258 | height: 8000px; | ||||
259 | z-index: 5000; | ||||
260 | background-color: rgba(0,0,0,0.75); | ||||
261 | padding: 60px; | ||||
262 | } | ||||
263 | |||||
264 | #topo-mask p { | ||||
265 | margin: 8px 20px; | ||||
266 | color: #ddd; | ||||
267 | font-size: 14pt; | ||||
268 | font-style: italic; | ||||
269 | } | ||||
270 |