blob: 2b07e3322682f4993acd835f770ec2d53c19a73d [file] [log] [blame]
Paul Greyson740bdaf2013-03-18 16:10:48 -07001
Paul Greysond9872392013-03-18 12:04:15 -07002body {
3 background-color: black;
4 color: white;
5 font-family: Helvetica;
6 margin: 0px;
7}
8
Paul Greyson7a300822013-04-09 12:57:49 -07009#contents {
10 visibility: hidden;
11 background-color: black;
12}
13
Paul Greysonc090d142013-04-09 16:59:03 -070014#topologyArea.linking {
Paul Greyson72f18852013-03-27 15:56:11 -070015 cursor: crosshair;
16}
17
Paul Greyson79b8d832013-04-09 09:34:46 -070018
Paul Greysonc090d142013-04-09 16:59:03 -070019#map path {
Paul Greyson79b8d832013-04-09 09:34:46 -070020 fill:none;
Paul Greyson4e348b92013-04-09 21:02:06 -070021 stroke:#333;
Paul Greysonc090d142013-04-09 16:59:03 -070022 stroke-width:2;
Paul Greyson79b8d832013-04-09 09:34:46 -070023}
24
Paul Greyson72f18852013-03-27 15:56:11 -070025.nodrop {
26 cursor: not-allowed;
27}
28
Paul Greysond9872392013-03-18 12:04:15 -070029.status {
30 padding: 1em;
Paul Greysond9872392013-03-18 12:04:15 -070031}
32
Paul Greysonc3e21a02013-03-21 13:56:05 -070033
Paul Greysond9872392013-03-18 12:04:15 -070034.status:last-child {
35 border-right: none;
36}
37
38.status .static {
Paul Greysonc3e21a02013-03-21 13:56:05 -070039 color: #AAA;
Paul Greysond9872392013-03-18 12:04:15 -070040 padding: .25em;
41}
42
43.status .dynamic {
Paul Greysonc3e21a02013-03-21 13:56:05 -070044 color: #FFF;
Paul Greysond9872392013-03-18 12:04:15 -070045 padding: .25em;
46}
47
Paul Greysond20d22e2013-04-09 14:34:53 -070048#status span {
Paul Greysonc3e21a02013-03-21 13:56:05 -070049 font-size: 24px;
50}
51
Paul Greysond9872392013-03-18 12:04:15 -070052.button {
53 padding: 1em;
54 background-color: lightgray;
55 color: black;
Paul Greyson56378ed2013-03-26 23:17:36 -070056 border: 1px solid #AAA;
Paul Greysond9872392013-03-18 12:04:15 -070057}
58
Paul Greysonb367de22013-03-23 11:09:11 -070059#arrow {
60 stroke: none;
Paul Greyson45303ac2013-03-23 16:44:01 -070061 fill: rgba(255, 255, 255, .35);
Paul Greysonb367de22013-03-23 11:09:11 -070062}
63
Paul Greyson952ccb62013-03-18 22:22:08 -070064.header {
65 height: 50px;
66}
67
Paul Greyson56378ed2013-03-26 23:17:36 -070068.selectedFlow {
69 border-bottom: 1px solid #AAA;
70}
71
Paul Greyson71b550d2013-03-28 11:56:19 -070072.selectedFlow:hover {
Paul Greysonaf750bf2013-04-09 23:26:37 -070073 background-color: #222;
Paul Greyson71b550d2013-03-28 11:56:19 -070074}
75
Paul Greyson56378ed2013-03-26 23:17:36 -070076.selectedFlow:last-child {
77 border-bottom: none;
78}
79
Paul Greysonaf750bf2013-04-09 23:26:37 -070080#flowChooser .selectedFlow:hover {
81 background-color: white;
82}
83
Paul Greyson56378ed2013-03-26 23:17:36 -070084#lastUpdated {
85 padding-bottom: 0px;
86}
87
Paul Greysond9872392013-03-18 12:04:15 -070088#right .header {
Paul Greyson952ccb62013-03-18 22:22:08 -070089 font-size: 12px;
90 padding-right: .25em;
91 -webkit-box-sizing: border-box;
Paul Greysond9872392013-03-18 12:04:15 -070092}
93
Paul Greysond1a22d92013-03-19 12:15:19 -070094#selectedFlows {
Paul Greysond20d22e2013-04-09 14:34:53 -070095 border-top: 1px solid #AAA;
Paul Greyson56378ed2013-03-26 23:17:36 -070096 border-bottom: 1px solid #AAA;
Paul Greysond9872392013-03-18 12:04:15 -070097}
98
Paul Greyson127d7fb2013-03-25 23:39:20 -070099.selectedFlow {
100 height: 2em;
101 color: white;
102 background-color: black;
103}
104
Paul Greysone6266b92013-04-09 23:15:27 -0700105.header, #onos {
Paul Greysond20d22e2013-04-09 14:34:53 -0700106 border-bottom: 1px solid #AAA;;
107}
108
Paul Greyson69f8baa2013-04-10 12:16:53 -0700109#onos {
110 background-color: #333;
111}
112
113#cluster-label {
114 font-size: 22px;
115 display: -webkit-box;
116 -webkit-box-align: center;
117 padding-left: .5em;
118 padding-right: .5em;
119 color: #EEE;
120}
121
122#actions {
123 padding-right: .25em;
124 padding-left: .25em;
125 border-left: 1px solid white;
126 display: -webkit-box;
127 -webkit-box-align: center;
128}
129
130#controllers {
131 padding: .25em;
132 background-color: black;
133 margin: .25em;
134 border-radius: 8px;
135}
136
Paul Greyson29aa98d2013-03-28 00:09:31 -0700137#flowChooser .selectedFlow {
138 background-color: rgba(255, 255, 255, .75);
139 color: black;
140}
141
142#flowChooser .flowId {
143 padding-left: 2em;
144}
145
146
Paul Greyson127d7fb2013-03-25 23:39:20 -0700147.selectedFlow.selected {
148 color: black;
149 background-color:#AAA;
150}
151
Paul Greyson421bfcd2013-03-27 22:22:09 -0700152.highlight circle {
Paul Greyson4e6dc3a2013-03-27 11:37:14 -0700153 stroke: rgba(255, 255, 255, .5);
154 stroke-width: 2px;
155}
156
Paul Greyson421bfcd2013-03-27 22:22:09 -0700157#linkVector {
158 fill: none;
159 stroke-width: 1px;
160 stroke: rgba(255, 255, 255, .75);
161 pointer-events: none;
162}
163
Paul Greyson4e6dc3a2013-03-27 11:37:14 -0700164path {
165 pointer-events: none;
166}
167
Paul Greyson127d7fb2013-03-25 23:39:20 -0700168path.flow {
169 fill: none;
Paul Greysonda293172013-04-11 10:28:26 -0700170 stroke-width: 8px;
Paul Greysonacb59412013-03-25 23:48:06 -0700171 stroke: rgba(255, 255, 255, .35);
Paul Greyson127d7fb2013-03-25 23:39:20 -0700172}
173
Paul Greyson71b550d2013-03-28 11:56:19 -0700174path.flow.highlight {
175 stroke-width: 6px;
176 stroke: rgba(255, 255, 255, .75);
177}
178
Paul Greyson127d7fb2013-03-25 23:39:20 -0700179#selectedFlowsHeader {
Paul Greyson56378ed2013-03-26 23:17:36 -0700180 border-top: 1px solid #AAA;
Paul Greyson127d7fb2013-03-25 23:39:20 -0700181}
182
Paul Greyson95db7a12013-04-04 14:57:58 -0700183path.iperfdata {
Paul Greysonda293172013-04-11 10:28:26 -0700184 fill: #ccc;
Paul Greysonbbd708b2013-04-09 22:37:31 -0700185 stroke-width: 1px;
186 stroke: #ccc;
187}
188
189.iperf {
Paul Greysonda293172013-04-11 10:28:26 -0700190 background-color: black;
Paul Greysonbbd708b2013-04-09 22:37:31 -0700191}
192
193#selectedFlowsHeader .iperf {
194 background-color: black;
Paul Greyson95db7a12013-04-04 14:57:58 -0700195}
196
Paul Greyson29aa98d2013-03-28 00:09:31 -0700197#flowChooser {
198 pointer-events: none;
199 background-color: rgba(0, 0, 0, .25);
200}
201
202
Paul Greyson6f918402013-03-28 12:18:30 -0700203.flowId, .srcDPID, .dstDPID, .iperf, #deleteFlow, .deleteFlow {
Paul Greyson127d7fb2013-03-25 23:39:20 -0700204 display: -webkit-box;
205 -webkit-box-pack: center;
206 -webkit-box-align: center;
Paul Greyson45aceb22013-04-09 22:17:03 -0700207 width: 4em;
Paul Greyson127d7fb2013-03-25 23:39:20 -0700208}
209
Paul Greyson8247c3f2013-03-28 00:24:02 -0700210
Paul Greyson29aa98d2013-03-28 00:09:31 -0700211.srcDPID, .dstDPID {
212 width: 12em;
213}
214
215
Paul Greysond43f9512013-04-09 14:46:12 -0700216.srcDPID, .dstDPID, .deleteFlow, #showFlowChooser {
Paul Greyson56378ed2013-03-26 23:17:36 -0700217 border-right: 1px solid #AAA;
Paul Greyson127d7fb2013-03-25 23:39:20 -0700218}
219
Paul Greysonaf750bf2013-04-09 23:26:37 -0700220#showFlowChooser:hover, .deleteFlow:hover {
221 background-color: #444;
222}
223
224#showFlowChooser:active, .deleteFlow:active {
225 background-color: black;
226}
227
Paul Greyson13f02b92013-03-28 11:29:35 -0700228.srcDPID {
229 border-left: 1px solid #AAA;
230}
231
Paul Greyson3e142162013-03-19 13:56:17 -0700232.controller {
233 padding: .25em;
Paul Greyson2913af82013-03-27 14:53:17 -0700234 padding-left: 2.5em;
235 position: relative;
Paul Greysone6266b92013-04-09 23:15:27 -0700236 border: 1px solid #444;
237 color: white;
238 position: relative;
Paul Greyson69f8baa2013-04-10 12:16:53 -0700239 border-radius: 8px;
Paul Greyson2913af82013-03-27 14:53:17 -0700240}
241
Paul Greysone6266b92013-04-09 23:15:27 -0700242.controller:hover {
243 border: 1px solid white;
244}
245
246.action, .controller {
Paul Greyson15e5da22013-04-10 00:16:27 -0700247 font-size: 18px;
Paul Greysone6266b92013-04-09 23:15:27 -0700248}
249
250
Paul Greyson8247c3f2013-03-28 00:24:02 -0700251.black-eye {
Paul Greyson2913af82013-03-27 14:53:17 -0700252 position: absolute;
253 top: 0px;
254 left: 0px;
255 height: 100%;
Paul Greyson29aa98d2013-03-28 00:09:31 -0700256 width: 2.25em;
Paul Greyson8247c3f2013-03-28 00:24:02 -0700257 background-image: url('../assets/black-eye.svg');
258 background-size: auto 100%;
259 background-repeat: no-repeat;
260 background-position: .25em center;
261}
262
263.white-eye {
264 height: 100%;
265 width: 2.25em;
266 background-image: url('../assets/white-eye.svg');
Paul Greyson2913af82013-03-27 14:53:17 -0700267 background-size: auto 100%;
268 background-repeat: no-repeat;
Paul Greysond43f9512013-04-09 14:46:12 -0700269 background-position: .4em center;
Paul Greyson3e142162013-03-19 13:56:17 -0700270}
271
Paul Greyson6f918402013-03-28 12:18:30 -0700272.deleteFlow {
273 height: 100%;
274 background-image: url('../assets/delete.svg');
275 background-size: auto 150%;
276 background-repeat: no-repeat;
277 background-position: center;
278}
279
Paul Greyson952ccb62013-03-18 22:22:08 -0700280#logo {
281 height: 50px;
282}
283
284.edge {
Paul Greyson952ccb62013-03-18 22:22:08 -0700285 stroke: black;
286 stroke-width: 1.5px;
287}
288
Paul Greysonf9edc1a2013-03-19 13:22:06 -0700289.nolabel text {
290 display: none;
291}
292
293text {
294 stroke: none;
295 fill: white;
Paul Greysonda293172013-04-11 10:28:26 -0700296 font-size: 22px;
Paul Greysonf9edc1a2013-03-19 13:22:06 -0700297 pointer-events: none;
298}
299
Paul Greyson45aceb22013-04-09 22:17:03 -0700300text.label {
301 fill: #888;
302}
303
Paul Greysond1a22d92013-03-19 12:15:19 -0700304path {
Paul Greysonde7fad52013-03-19 12:47:32 -0700305 stroke: rgba(255, 255, 255, .25);
Paul Greysonb367de22013-03-23 11:09:11 -0700306 stroke-width: 1.5px;
Paul Greysond1a22d92013-03-19 12:15:19 -0700307}
308
Paul Greyson952ccb62013-03-18 22:22:08 -0700309.aggregation {
Paul Greyson952ccb62013-03-18 22:22:08 -0700310 stroke: black;
311 stroke-width: 2px;
312}
Paul Greysond1a22d92013-03-19 12:15:19 -0700313
314#traceButton {
315 visibility: hidden
316}
Paul Greyson3e142162013-03-19 13:56:17 -0700317
Paul Greyson01a5dff2013-03-19 15:50:14 -0700318.color1-selected .color1,
319.color2-selected .color2,
320.color3-selected .color3,
321.color4-selected .color4,
322.color5-selected .color5,
323.color6-selected .color6,
324.color7-selected .color7,
325.color8-selected .color8,
326.color9-selected .color9,
327.color10-selected .color10,
328.color11-selected .color11,
329.color12-selected .color12 {
330 opacity: 1;
Paul Greyson3f890b62013-03-22 17:39:36 -0700331 pointer-events: auto;
Paul Greyson3e142162013-03-19 13:56:17 -0700332}
333
Paul Greysonc17278a2013-03-23 10:17:12 -0700334.colorInactive {
335 opacity: 1;
336 fill: #444;
337 background-color: #444;
338 color: #222;
339}
340
Paul Greyson01a5dff2013-03-19 15:50:14 -0700341.color1 {
Paul Greyson421bfcd2013-03-27 22:22:09 -0700342 opacity: .15;
Paul Greyson3f890b62013-03-22 17:39:36 -0700343 pointer-events: none;
Paul Greyson3e142162013-03-19 13:56:17 -0700344 fill: #EC0033;
345 background-color: #EC0033;
346}
347
Paul Greyson01a5dff2013-03-19 15:50:14 -0700348.color2 {
Paul Greyson421bfcd2013-03-27 22:22:09 -0700349 opacity: .15;
Paul Greysone6266b92013-04-09 23:15:27 -0700350 pointer-events: none;
Paul Greyson3e142162013-03-19 13:56:17 -0700351 fill: #FFBA00;
352 background-color: #FFBA00;
353}
354
Paul Greyson01a5dff2013-03-19 15:50:14 -0700355.color3 {
Paul Greysonc3e21a02013-03-21 13:56:05 -0700356 opacity: .2;
Paul Greyson3f890b62013-03-22 17:39:36 -0700357 pointer-events: none;
Paul Greyson3e142162013-03-19 13:56:17 -0700358 fill: #3714B0;
359 background-color: #3714B0;
360}
361
Paul Greyson01a5dff2013-03-19 15:50:14 -0700362.color4 {
Paul Greysonc3e21a02013-03-21 13:56:05 -0700363 opacity: .2;
Paul Greyson3f890b62013-03-22 17:39:36 -0700364 pointer-events: none;
Paul Greyson3e142162013-03-19 13:56:17 -0700365 fill: #B12C49;
366 background-color: #B12C49;
367}
368
Paul Greyson01a5dff2013-03-19 15:50:14 -0700369.color5 {
Paul Greysonc3e21a02013-03-21 13:56:05 -0700370 opacity: .2;
Paul Greyson3f890b62013-03-22 17:39:36 -0700371 pointer-events: none;
Paul Greyson3e142162013-03-19 13:56:17 -0700372 fill: #402C84;
373 background-color: #402C84;
374}
375
Paul Greyson01a5dff2013-03-19 15:50:14 -0700376.color6 {
Paul Greysonc3e21a02013-03-21 13:56:05 -0700377 opacity: .2;
Paul Greyson3f890b62013-03-22 17:39:36 -0700378 pointer-events: none;
Paul Greyson3e142162013-03-19 13:56:17 -0700379 fill: #990021;
380 background-color: #990021;
381}
382
Paul Greyson01a5dff2013-03-19 15:50:14 -0700383.color7 {
Paul Greysonc3e21a02013-03-21 13:56:05 -0700384 opacity: .2;
Paul Greyson3f890b62013-03-22 17:39:36 -0700385 pointer-events: none;
Paul Greyson3e142162013-03-19 13:56:17 -0700386 fill: #990021;
Paul Greyson45303ac2013-03-23 16:44:01 -0700387 background-color: #990021;
Paul Greyson3e142162013-03-19 13:56:17 -0700388}
389
Paul Greyson01a5dff2013-03-19 15:50:14 -0700390.color8 {
Paul Greysonc3e21a02013-03-21 13:56:05 -0700391 opacity: .2;
Paul Greyson3f890b62013-03-22 17:39:36 -0700392 pointer-events: none;
Paul Greyson3e142162013-03-19 13:56:17 -0700393 fill: #A67900;
394 background-color: #A67900;
395}
396
Paul Greyson01a5dff2013-03-19 15:50:14 -0700397.color9 {
Paul Greysonc3e21a02013-03-21 13:56:05 -0700398 opacity: .2;
Paul Greysone6266b92013-04-09 23:15:27 -0700399 pointer-events: none;
Paul Greyson3e142162013-03-19 13:56:17 -0700400 fill: #F53D65;
401 background-color: #F53D65;
402}
403
Paul Greyson01a5dff2013-03-19 15:50:14 -0700404.color10 {
Paul Greysonc3e21a02013-03-21 13:56:05 -0700405 opacity: .2;
Paul Greyson3f890b62013-03-22 17:39:36 -0700406 pointer-events: none;
Paul Greyson3e142162013-03-19 13:56:17 -0700407 fill: #1F0772;
408 background-color: #1F0772;
409}
410
Paul Greyson01a5dff2013-03-19 15:50:14 -0700411.color11 {
Paul Greysonc3e21a02013-03-21 13:56:05 -0700412 opacity: .2;
Paul Greyson3f890b62013-03-22 17:39:36 -0700413 pointer-events: none;
Paul Greyson3e142162013-03-19 13:56:17 -0700414 fill: #F56E8B;
415 background-color: #F56E8B;
416}
417
Paul Greyson01a5dff2013-03-19 15:50:14 -0700418.color12 {
Paul Greysonc3e21a02013-03-21 13:56:05 -0700419 opacity: .2;
Paul Greyson3f890b62013-03-22 17:39:36 -0700420 pointer-events: none;
Paul Greyson3e142162013-03-19 13:56:17 -0700421 fill: #6949D7;
422 background-color: #6949D7;
423}
Paul Greyson347fb742013-03-27 13:40:29 -0700424
Paul Greysone6266b92013-04-09 23:15:27 -0700425.action {
426 margin: .25em;
Paul Greyson69f8baa2013-04-10 12:16:53 -0700427 border: 2px solid #AAA;
428 height: 2em;
429 width: 2em;
Paul Greysone6266b92013-04-09 23:15:27 -0700430 background-color: #444;
431 display: -webkit-box;
432 -webkit-box-pack: center;
433 -webkit-box-align: center;
Paul Greyson69f8baa2013-04-10 12:16:53 -0700434 color: #AAA;
435 border-radius: 50%;
436 -webkit-box-sizing: border-box;
Paul Greysone6266b92013-04-09 23:15:27 -0700437}
438
439.action:hover {
Paul Greyson69f8baa2013-04-10 12:16:53 -0700440 border: 2px solid #FFF;
441 color: white;
Paul Greysone6266b92013-04-09 23:15:27 -0700442}
443
444.action:active {
445 background-color: #222;
446}
447
Paul Greyson347fb742013-03-27 13:40:29 -0700448
449@-webkit-keyframes pending {
450 from {
451 opacity: 1.0;
452 }
453 to {
454 opacity: 0.5;
455 }
456}
457
458.pending {
459 -webkit-animation-name: pending;
460 -webkit-animation-duration: .5s;
461 -webkit-animation-direction: alternate;
462 -webkit-animation-timing-function: ease-in-out;
Paul Greysoncb5d30d2013-04-04 02:00:56 -0700463 -webkit-animation-iteration-count: 70;
Paul Greyson347fb742013-03-27 13:40:29 -0700464}
465
Paul Greyson15e5da22013-04-10 00:16:27 -0700466.core path {
467 stroke-width: 1px;
468 stroke: black;
469}
470
Paul Greyson4a73a8b2013-04-10 11:47:25 -0700471.flowCount {
Paul Greysonda293172013-04-11 10:28:26 -0700472 font-size: 24px;
Paul Greyson4a73a8b2013-04-10 11:47:25 -0700473 fill: rgba(255, 255, 255, .75);
474}
475
Paul Greyson28cf92b2013-04-10 13:15:06 -0700476#confirm {
477 display: none;
478 -webkit-transition: opacity .25s;
479 font-size: 20px;
480}
481
482#confirm-background {
483 background-color: black;
484 opacity: .5;
485}
486
487#confirm-prompt {
488 display: -webkit-box;
489 -webkit-box-pack: center;
490 -webkit-box-align: center;
491 -webkit-box-flex: 1.0;
492 text-align: center;
493}
494
495#confirm-buttons {
496 padding: 1em;
497}
498
499#confirm-prompt {
500 margin-top:1em;
501 line-height: 1.5em;
502}
503
504#confirm-panel {
505 position: relative;
506 background-color: #222;
507 border: 2px solid #aaa;
508 border-radius: 12px;
509 width: 20em;
510 padding: 1em;
511}
512
513.confirm-button {
514 padding: .5em;
515 border: 2px solid #aaa;
516 color: #aaa;
517 border-radius: 6px;
518 margin-left: .5em;
519 margin-right: .5em;
520}
521
522.confirm-button:hover{
523 border: 2px solid white;
524 color: white;
525}
526
527.confirm-button:active{
528 background-color: black;
529}
530
Paul Greyson0ad75202013-04-11 12:29:32 -0700531select {
532 margin-top: 1em;
533 -webkit-appearance: none;
534 border-radius: 0px;
535 font-size: 18px;
536 padding: .5em;
537 background-color: black;
538 color: white;
539 border: 1px solid white;
540}
541
542select:after {
543 content: 'a';
544 position: absolute;
545 right: 0px;
546 top: 0px;
547}
548