blob: 560719034edd0c6acd7fc5c95845470a2f83f082 [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 Greyson72f18852013-03-27 15:56:11 -07009#topology.linking {
10 cursor: crosshair;
11}
12
13.nodrop {
14 cursor: not-allowed;
15}
16
Paul Greysond9872392013-03-18 12:04:15 -070017.status {
18 padding: 1em;
Paul Greysond9872392013-03-18 12:04:15 -070019}
20
Paul Greysonc3e21a02013-03-21 13:56:05 -070021
Paul Greysond9872392013-03-18 12:04:15 -070022.status:last-child {
23 border-right: none;
24}
25
26.status .static {
Paul Greysonc3e21a02013-03-21 13:56:05 -070027 color: #AAA;
Paul Greysond9872392013-03-18 12:04:15 -070028 padding: .25em;
29}
30
31.status .dynamic {
Paul Greysonc3e21a02013-03-21 13:56:05 -070032 color: #FFF;
Paul Greysond9872392013-03-18 12:04:15 -070033 padding: .25em;
34}
35
Paul Greysonc3e21a02013-03-21 13:56:05 -070036#status.top span {
37 font-size: 24px;
38}
39
Paul Greysond9872392013-03-18 12:04:15 -070040.button {
41 padding: 1em;
42 background-color: lightgray;
43 color: black;
Paul Greyson56378ed2013-03-26 23:17:36 -070044 border: 1px solid #AAA;
Paul Greysond9872392013-03-18 12:04:15 -070045}
46
Paul Greysonb367de22013-03-23 11:09:11 -070047#arrow {
48 stroke: none;
Paul Greyson45303ac2013-03-23 16:44:01 -070049 fill: rgba(255, 255, 255, .35);
Paul Greysonb367de22013-03-23 11:09:11 -070050}
51
Paul Greyson952ccb62013-03-18 22:22:08 -070052.header {
53 height: 50px;
54}
55
Paul Greyson56378ed2013-03-26 23:17:36 -070056#topology {
57 border-top: 1px solid #AAA;
58}
59
60.selectedFlow {
61 border-bottom: 1px solid #AAA;
62}
63
64.selectedFlow:last-child {
65 border-bottom: none;
66}
67
68#lastUpdated {
69 padding-bottom: 0px;
70}
71
72#controllers .header {
73 -webkit-box-pack: center;
74 border-bottom: 1px solid #AAA;
75}
76
Paul Greysond9872392013-03-18 12:04:15 -070077
78#right .header {
Paul Greyson952ccb62013-03-18 22:22:08 -070079 font-size: 12px;
80 padding-right: .25em;
81 -webkit-box-sizing: border-box;
Paul Greysond9872392013-03-18 12:04:15 -070082}
83
Paul Greysond1a22d92013-03-19 12:15:19 -070084#controllers, #selectedFlows {
Paul Greyson56378ed2013-03-26 23:17:36 -070085 border-top: 1px solid #AAA;
Paul Greysond9872392013-03-18 12:04:15 -070086}
87
Paul Greysond1a22d92013-03-19 12:15:19 -070088#selectedFlows {
Paul Greyson56378ed2013-03-26 23:17:36 -070089 border-bottom: 1px solid #AAA;
Paul Greysond9872392013-03-18 12:04:15 -070090}
91
Paul Greyson127d7fb2013-03-25 23:39:20 -070092.selectedFlow {
93 height: 2em;
94 color: white;
95 background-color: black;
96}
97
Paul Greyson29aa98d2013-03-28 00:09:31 -070098#flowChooser .selectedFlow {
99 background-color: rgba(255, 255, 255, .75);
100 color: black;
101}
102
103#flowChooser .flowId {
104 padding-left: 2em;
105}
106
107
Paul Greyson127d7fb2013-03-25 23:39:20 -0700108.selectedFlow.selected {
109 color: black;
110 background-color:#AAA;
111}
112
Paul Greyson421bfcd2013-03-27 22:22:09 -0700113.highlight circle {
Paul Greyson4e6dc3a2013-03-27 11:37:14 -0700114 stroke: rgba(255, 255, 255, .5);
115 stroke-width: 2px;
116}
117
Paul Greyson421bfcd2013-03-27 22:22:09 -0700118#linkVector {
119 fill: none;
120 stroke-width: 1px;
121 stroke: rgba(255, 255, 255, .75);
122 pointer-events: none;
123}
124
Paul Greyson4e6dc3a2013-03-27 11:37:14 -0700125path {
126 pointer-events: none;
127}
128
Paul Greyson127d7fb2013-03-25 23:39:20 -0700129path.flow {
130 fill: none;
Paul Greyson421bfcd2013-03-27 22:22:09 -0700131 stroke-width: 5px;
Paul Greysonacb59412013-03-25 23:48:06 -0700132 stroke: rgba(255, 255, 255, .35);
Paul Greyson127d7fb2013-03-25 23:39:20 -0700133}
134
135#selectedFlowsHeader {
Paul Greyson56378ed2013-03-26 23:17:36 -0700136 border-top: 1px solid #AAA;
Paul Greyson127d7fb2013-03-25 23:39:20 -0700137}
138
Paul Greyson29aa98d2013-03-28 00:09:31 -0700139#flowChooser {
140 pointer-events: none;
141 background-color: rgba(0, 0, 0, .25);
142}
143
144
145.flowId, .srcDPID, .dstDPID, .iperf {
Paul Greyson127d7fb2013-03-25 23:39:20 -0700146 display: -webkit-box;
147 -webkit-box-pack: center;
148 -webkit-box-align: center;
Paul Greyson8247c3f2013-03-28 00:24:02 -0700149 width: 3em;
Paul Greyson127d7fb2013-03-25 23:39:20 -0700150}
151
Paul Greyson8247c3f2013-03-28 00:24:02 -0700152
Paul Greyson29aa98d2013-03-28 00:09:31 -0700153.srcDPID, .dstDPID {
154 width: 12em;
155}
156
157
Paul Greyson13f02b92013-03-28 11:29:35 -0700158.srcDPID, .dstDPID {
Paul Greyson56378ed2013-03-26 23:17:36 -0700159 border-right: 1px solid #AAA;
Paul Greyson127d7fb2013-03-25 23:39:20 -0700160}
161
Paul Greyson13f02b92013-03-28 11:29:35 -0700162.srcDPID {
163 border-left: 1px solid #AAA;
164}
165
Paul Greyson127d7fb2013-03-25 23:39:20 -0700166
Paul Greysond1a22d92013-03-19 12:15:19 -0700167#controllers {
Paul Greyson56378ed2013-03-26 23:17:36 -0700168 border-right: 1px solid #AAA;
Paul Greysond1a22d92013-03-19 12:15:19 -0700169}
170
Paul Greyson3e142162013-03-19 13:56:17 -0700171.controller {
172 padding: .25em;
Paul Greyson2913af82013-03-27 14:53:17 -0700173 padding-left: 2.5em;
174 position: relative;
175}
176
Paul Greyson8247c3f2013-03-28 00:24:02 -0700177.black-eye {
Paul Greyson2913af82013-03-27 14:53:17 -0700178 position: absolute;
179 top: 0px;
180 left: 0px;
181 height: 100%;
Paul Greyson29aa98d2013-03-28 00:09:31 -0700182 width: 2.25em;
Paul Greyson8247c3f2013-03-28 00:24:02 -0700183 background-image: url('../assets/black-eye.svg');
184 background-size: auto 100%;
185 background-repeat: no-repeat;
186 background-position: .25em center;
187}
188
189.white-eye {
190 height: 100%;
191 width: 2.25em;
192 background-image: url('../assets/white-eye.svg');
Paul Greyson2913af82013-03-27 14:53:17 -0700193 background-size: auto 100%;
194 background-repeat: no-repeat;
195 background-position: .25em center;
Paul Greyson3e142162013-03-19 13:56:17 -0700196}
197
Paul Greyson952ccb62013-03-18 22:22:08 -0700198#logo {
199 height: 50px;
200}
201
202.edge {
Paul Greyson952ccb62013-03-18 22:22:08 -0700203 stroke: black;
204 stroke-width: 1.5px;
205}
206
Paul Greysonf9edc1a2013-03-19 13:22:06 -0700207.nolabel text {
208 display: none;
209}
210
211text {
212 stroke: none;
213 fill: white;
Paul Greyson968d1b42013-03-23 16:58:41 -0700214 font-size: 16px;
Paul Greysonf9edc1a2013-03-19 13:22:06 -0700215 pointer-events: none;
216}
217
Paul Greysond1a22d92013-03-19 12:15:19 -0700218path {
Paul Greysonde7fad52013-03-19 12:47:32 -0700219 stroke: rgba(255, 255, 255, .25);
Paul Greysonb367de22013-03-23 11:09:11 -0700220 stroke-width: 1.5px;
Paul Greysond1a22d92013-03-19 12:15:19 -0700221}
222
Paul Greyson952ccb62013-03-18 22:22:08 -0700223.aggregation {
Paul Greyson952ccb62013-03-18 22:22:08 -0700224 stroke: black;
225 stroke-width: 2px;
226}
Paul Greysond1a22d92013-03-19 12:15:19 -0700227
228#traceButton {
229 visibility: hidden
230}
Paul Greyson3e142162013-03-19 13:56:17 -0700231
Paul Greyson01a5dff2013-03-19 15:50:14 -0700232.color1-selected .color1,
233.color2-selected .color2,
234.color3-selected .color3,
235.color4-selected .color4,
236.color5-selected .color5,
237.color6-selected .color6,
238.color7-selected .color7,
239.color8-selected .color8,
240.color9-selected .color9,
241.color10-selected .color10,
242.color11-selected .color11,
243.color12-selected .color12 {
244 opacity: 1;
Paul Greyson3f890b62013-03-22 17:39:36 -0700245 pointer-events: auto;
Paul Greyson3e142162013-03-19 13:56:17 -0700246}
247
Paul Greysonc17278a2013-03-23 10:17:12 -0700248.colorInactive {
249 opacity: 1;
250 fill: #444;
251 background-color: #444;
252 color: #222;
253}
254
Paul Greyson01a5dff2013-03-19 15:50:14 -0700255.color1 {
Paul Greyson421bfcd2013-03-27 22:22:09 -0700256 opacity: .15;
Paul Greyson3f890b62013-03-22 17:39:36 -0700257 pointer-events: none;
Paul Greyson3e142162013-03-19 13:56:17 -0700258 fill: #EC0033;
259 background-color: #EC0033;
260}
261
Paul Greyson01a5dff2013-03-19 15:50:14 -0700262.color2 {
Paul Greyson421bfcd2013-03-27 22:22:09 -0700263 opacity: .15;
Paul Greyson3e142162013-03-19 13:56:17 -0700264 fill: #FFBA00;
265 background-color: #FFBA00;
266}
267
Paul Greyson01a5dff2013-03-19 15:50:14 -0700268.color3 {
Paul Greysonc3e21a02013-03-21 13:56:05 -0700269 opacity: .2;
Paul Greyson3f890b62013-03-22 17:39:36 -0700270 pointer-events: none;
Paul Greyson3e142162013-03-19 13:56:17 -0700271 fill: #3714B0;
272 background-color: #3714B0;
273}
274
Paul Greyson01a5dff2013-03-19 15:50:14 -0700275.color4 {
Paul Greysonc3e21a02013-03-21 13:56:05 -0700276 opacity: .2;
Paul Greyson3f890b62013-03-22 17:39:36 -0700277 pointer-events: none;
Paul Greyson3e142162013-03-19 13:56:17 -0700278 fill: #B12C49;
279 background-color: #B12C49;
280}
281
Paul Greyson01a5dff2013-03-19 15:50:14 -0700282.color5 {
Paul Greysonc3e21a02013-03-21 13:56:05 -0700283 opacity: .2;
Paul Greyson3f890b62013-03-22 17:39:36 -0700284 pointer-events: none;
Paul Greyson3e142162013-03-19 13:56:17 -0700285 fill: #402C84;
286 background-color: #402C84;
287}
288
Paul Greyson01a5dff2013-03-19 15:50:14 -0700289.color6 {
Paul Greysonc3e21a02013-03-21 13:56:05 -0700290 opacity: .2;
Paul Greyson3f890b62013-03-22 17:39:36 -0700291 pointer-events: none;
Paul Greyson3e142162013-03-19 13:56:17 -0700292 fill: #990021;
293 background-color: #990021;
294}
295
Paul Greyson01a5dff2013-03-19 15:50:14 -0700296.color7 {
Paul Greysonc3e21a02013-03-21 13:56:05 -0700297 opacity: .2;
Paul Greyson3f890b62013-03-22 17:39:36 -0700298 pointer-events: none;
Paul Greyson3e142162013-03-19 13:56:17 -0700299 fill: #990021;
Paul Greyson45303ac2013-03-23 16:44:01 -0700300 background-color: #990021;
Paul Greyson3e142162013-03-19 13:56:17 -0700301}
302
Paul Greyson01a5dff2013-03-19 15:50:14 -0700303.color8 {
Paul Greysonc3e21a02013-03-21 13:56:05 -0700304 opacity: .2;
Paul Greyson3f890b62013-03-22 17:39:36 -0700305 pointer-events: none;
Paul Greyson3e142162013-03-19 13:56:17 -0700306 fill: #A67900;
307 background-color: #A67900;
308}
309
Paul Greyson01a5dff2013-03-19 15:50:14 -0700310.color9 {
Paul Greysonc3e21a02013-03-21 13:56:05 -0700311 opacity: .2;
Paul Greyson3e142162013-03-19 13:56:17 -0700312 fill: #F53D65;
313 background-color: #F53D65;
314}
315
Paul Greyson01a5dff2013-03-19 15:50:14 -0700316.color10 {
Paul Greysonc3e21a02013-03-21 13:56:05 -0700317 opacity: .2;
Paul Greyson3f890b62013-03-22 17:39:36 -0700318 pointer-events: none;
Paul Greyson3e142162013-03-19 13:56:17 -0700319 fill: #1F0772;
320 background-color: #1F0772;
321}
322
Paul Greyson01a5dff2013-03-19 15:50:14 -0700323.color11 {
Paul Greysonc3e21a02013-03-21 13:56:05 -0700324 opacity: .2;
Paul Greyson3f890b62013-03-22 17:39:36 -0700325 pointer-events: none;
Paul Greyson3e142162013-03-19 13:56:17 -0700326 fill: #F56E8B;
327 background-color: #F56E8B;
328}
329
Paul Greyson01a5dff2013-03-19 15:50:14 -0700330.color12 {
Paul Greysonc3e21a02013-03-21 13:56:05 -0700331 opacity: .2;
Paul Greyson3f890b62013-03-22 17:39:36 -0700332 pointer-events: none;
Paul Greyson3e142162013-03-19 13:56:17 -0700333 fill: #6949D7;
334 background-color: #6949D7;
335}
Paul Greyson347fb742013-03-27 13:40:29 -0700336
337
338@-webkit-keyframes pending {
339 from {
340 opacity: 1.0;
341 }
342 to {
343 opacity: 0.5;
344 }
345}
346
347.pending {
348 -webkit-animation-name: pending;
349 -webkit-animation-duration: .5s;
350 -webkit-animation-direction: alternate;
351 -webkit-animation-timing-function: ease-in-out;
Paul Greyson40c8a592013-03-27 14:10:33 -0700352 -webkit-animation-iteration-count: 24;
Paul Greyson347fb742013-03-27 13:40:29 -0700353}
354