root / mupy / static / css / style.css @ 24c4eb33
History | View | Annotate | Download (8.9 kB)
1 |
body{
|
---|---|
2 |
font-family: tahoma,arial,helvetica; |
3 |
font-size: 10pt; |
4 |
margin: 0; |
5 |
overflow-x: hidden; |
6 |
} |
7 |
|
8 |
|
9 |
body.loading:after { |
10 |
content: "Loading..."; |
11 |
display: block; |
12 |
left: 0; |
13 |
right: 0; |
14 |
top: 0; |
15 |
bottom: 0; |
16 |
position: fixed; |
17 |
background: #eeeeee; |
18 |
opacity: 0.5; |
19 |
z-index: 1000; |
20 |
text-align: center; |
21 |
padding: 20% 0; |
22 |
font-size: 30px; |
23 |
font-weight: 800; |
24 |
} |
25 |
|
26 |
#mupy_container{
|
27 |
min-height: 800px; |
28 |
clear: both; |
29 |
content: "."; |
30 |
display: block; |
31 |
} |
32 |
|
33 |
|
34 |
#tabs {
|
35 |
background: none; |
36 |
border: none; |
37 |
background: #eeeeee; |
38 |
padding: 0; |
39 |
margin: 0; |
40 |
} |
41 |
|
42 |
#tabs:after { |
43 |
content:""; |
44 |
display:table; |
45 |
clear:both; |
46 |
} |
47 |
|
48 |
|
49 |
#tabs h4 { |
50 |
text-align: center; |
51 |
padding: 10px 0; |
52 |
color: white; |
53 |
font-weight: 300; |
54 |
} |
55 |
|
56 |
#tabs ul { |
57 |
width: 100%; |
58 |
margin: 0; |
59 |
padding: 0; |
60 |
} |
61 |
|
62 |
#graphs{
|
63 |
list-style-type: none; |
64 |
margin: 0; |
65 |
padding: 0; |
66 |
|
67 |
padding-right: 15px; |
68 |
margin-top: 10px; |
69 |
} |
70 |
|
71 |
.graphs_no_list{
|
72 |
list-style-type: none; |
73 |
margin: 0; |
74 |
padding: 0; |
75 |
display: inline-block; |
76 |
} |
77 |
|
78 |
#graphs_holder{
|
79 |
height: 100%; |
80 |
text-align: center; |
81 |
margin: auto; |
82 |
-moz-box-sizing: border-box; |
83 |
box-sizing: border-box; |
84 |
padding: 0; |
85 |
margin-top: 1%; |
86 |
padding-left: 1%; |
87 |
} |
88 |
|
89 |
.graph_li{
|
90 |
display: inline; |
91 |
margin: 3px 3px 3px 0; |
92 |
padding: 1px; |
93 |
text-align: center; |
94 |
min-height: 410px; |
95 |
} |
96 |
|
97 |
.item.saved_searches.hidden { |
98 |
opacity: 0.3; |
99 |
|
100 |
} |
101 |
|
102 |
#menu .item .menu-content a.loadsearch { |
103 |
display: inline-block; |
104 |
width: 80%; |
105 |
} |
106 |
|
107 |
a.loadsearch ~ label { |
108 |
display: inline-block; |
109 |
width: 10%; |
110 |
} |
111 |
|
112 |
#menu .item a.loadsearch ~ label input ~ .default-search { |
113 |
display: none; |
114 |
} |
115 |
|
116 |
#menu .item a.loadsearch ~ label input:checked ~ .default-search { |
117 |
display: inline-block; |
118 |
} |
119 |
|
120 |
#menu .item a.loadsearch ~ label input:checked ~ .default-search-empty { |
121 |
display: none; |
122 |
} |
123 |
|
124 |
#menu .item a.loadsearch.active { |
125 |
font-weight: 800; |
126 |
} |
127 |
#menu .item .menu-content a.loadsearch:hover { |
128 |
background: white; |
129 |
font-weight: 300; |
130 |
} |
131 |
|
132 |
.graph_blockfloat{
|
133 |
display: inline-block; |
134 |
margin-bottom: 5px; |
135 |
margin-top: 5px; |
136 |
position: relative; |
137 |
text-align: center; |
138 |
} |
139 |
|
140 |
.graph_blockfloat a{ |
141 |
text-decoration: none; |
142 |
color: #1C94C4; |
143 |
} |
144 |
|
145 |
.graph_blockfloat a:hover{ |
146 |
text-decoration: none; |
147 |
color: #C77405; |
148 |
} |
149 |
|
150 |
|
151 |
#deselect{
|
152 |
text-decoration: none; |
153 |
color: #1C94C4; |
154 |
} |
155 |
|
156 |
#save_dialog {
|
157 |
padding: 10px; |
158 |
} |
159 |
|
160 |
#save_dialog:after { |
161 |
content: ""; |
162 |
display: table; |
163 |
clear: both; |
164 |
} |
165 |
|
166 |
#deselect:hover{ |
167 |
text-decoration: none; |
168 |
color: #C77405; |
169 |
} |
170 |
|
171 |
#logout{
|
172 |
text-decoration: none; |
173 |
color: #1C94C4; |
174 |
} |
175 |
|
176 |
#logout:hover{ |
177 |
text-decoration: none; |
178 |
color: #C77405; |
179 |
} |
180 |
|
181 |
#graph_results_menu{
|
182 |
color: #333333; |
183 |
padding: 20px; |
184 |
display: inline-block; |
185 |
width: 100%; |
186 |
background: #eeeeee; |
187 |
border-radius: 20px; |
188 |
-moz-box-sizing: border-box; |
189 |
box-sizing: border-box; |
190 |
} |
191 |
|
192 |
.graph_class{
|
193 |
border: 0px; |
194 |
display: block; |
195 |
} |
196 |
|
197 |
.options_menu{
|
198 |
height: 40px; |
199 |
border-bottom: 1px solid #DDDDDD; |
200 |
} |
201 |
|
202 |
#button_holder{
|
203 |
margin: 5px; |
204 |
} |
205 |
|
206 |
#counted_graphs_holder{
|
207 |
margin: 2px; |
208 |
padding: 5px; |
209 |
} |
210 |
|
211 |
|
212 |
.navbar-inverse {
|
213 |
background: #eeeeee; |
214 |
} |
215 |
|
216 |
.group_title{
|
217 |
color: #727370; |
218 |
} |
219 |
|
220 |
.group_graph_holder{
|
221 |
/*min-height:200px;
|
222 |
border: 1px solid #DDDDDD;
|
223 |
margin: 2px;*/
|
224 |
|
225 |
border-left-width: 0px; border-right-width: 3px; padding-left: 10px; padding-right: 0px; |
226 |
} |
227 |
|
228 |
ul.dynatree-container { |
229 |
height: auto !important; |
230 |
} |
231 |
|
232 |
.errorlist{
|
233 |
color: red; |
234 |
list-style-type: none; |
235 |
} |
236 |
|
237 |
#slider{
|
238 |
width: 300px; |
239 |
margin:auto; |
240 |
} |
241 |
|
242 |
#tabs li { |
243 |
width: 50%; |
244 |
margin: 0 !important; |
245 |
float: left; |
246 |
padding: 0; |
247 |
box-sizing: border-box; |
248 |
list-style: none; |
249 |
text-align: center; |
250 |
font-size: 14px; |
251 |
font-weight: 300; |
252 |
padding: 10px 0; |
253 |
cursor: pointer; |
254 |
} |
255 |
|
256 |
#tabs li.active { |
257 |
background: #E78F08; |
258 |
color: white; |
259 |
} |
260 |
|
261 |
#tabs li.active:hover { |
262 |
background: #E7AF08; |
263 |
} |
264 |
|
265 |
|
266 |
#tabs li:hover { |
267 |
background: #888888; |
268 |
color: white; |
269 |
} |
270 |
|
271 |
|
272 |
#menu .header img { |
273 |
width: 150px; |
274 |
height: auto; |
275 |
display: block; |
276 |
margin: 0 auto; |
277 |
padding: 8px; |
278 |
} |
279 |
|
280 |
#mupy_container {
|
281 |
position: relative; |
282 |
background: white; |
283 |
padding: 20px; |
284 |
} |
285 |
|
286 |
#graph_results_menu > div { |
287 |
padding: 10px; |
288 |
height: auto !important; |
289 |
} |
290 |
|
291 |
#menu-toggle {
|
292 |
display: none; |
293 |
} |
294 |
|
295 |
.menu-toggle {
|
296 |
width: 40px; |
297 |
height: 40px; |
298 |
background: #E78F08; |
299 |
position: absolute; |
300 |
right: -40px; |
301 |
top: 0; |
302 |
z-index: 1000; |
303 |
cursor: pointer; |
304 |
text-align: center; |
305 |
} |
306 |
#menu > .menu-wrapper { |
307 |
position: absolute; |
308 |
overflow: auto; |
309 |
top: 0; |
310 |
left: 0; |
311 |
right: 0; |
312 |
bottom: 168px; |
313 |
} |
314 |
|
315 |
.menu-toggle i { |
316 |
line-height: 40px; |
317 |
vertical-align: middle; |
318 |
position: absolute; |
319 |
display: block; |
320 |
margin: auto; |
321 |
top: 0; |
322 |
bottom: 0; |
323 |
left: 0; |
324 |
right: 0; |
325 |
} |
326 |
|
327 |
.menu-toggle:hover { |
328 |
background: #fbaa2b; |
329 |
color: white; |
330 |
} |
331 |
|
332 |
#menu-toggle:checked ~ .body-wrapper { |
333 |
left: 30%; |
334 |
} |
335 |
|
336 |
#menu-toggle:checked ~ .body-wrapper #menu { |
337 |
left: 0; |
338 |
} |
339 |
|
340 |
#menu-toggle:checked ~ .body-wrapper #menu:after { |
341 |
width: 30%; |
342 |
background: #eeeeee; |
343 |
height: 65px; |
344 |
|
345 |
} |
346 |
|
347 |
#menu {
|
348 |
position: fixed; |
349 |
left: -30%; |
350 |
width: 30%; |
351 |
top: 0; |
352 |
bottom: 0; |
353 |
background: #EEEEEE; |
354 |
z-index: 1000; |
355 |
min-height: 800px; |
356 |
transition: width 0.5s, left 0.5s; |
357 |
webkit-transition: width 0.5s, left 0.5s; |
358 |
border-right: 1px solid #dddddd; |
359 |
|
360 |
} |
361 |
|
362 |
#menu.initial { |
363 |
width: 100%; |
364 |
left: 0; |
365 |
} |
366 |
|
367 |
|
368 |
#menu .item:after { |
369 |
content: ""; |
370 |
display: table; |
371 |
clear: both; |
372 |
} |
373 |
|
374 |
#menu .item .menu-header a { |
375 |
color: white; |
376 |
} |
377 |
|
378 |
#menu .item .menu-content a { |
379 |
display: block; |
380 |
padding: 10px; |
381 |
text-align: center; |
382 |
background: white; |
383 |
color: #222222; |
384 |
} |
385 |
|
386 |
#menu .item .menu-content a:hover { |
387 |
background: #dddddd; |
388 |
} |
389 |
|
390 |
|
391 |
#menu:after { |
392 |
position: fixed; |
393 |
width: 0; |
394 |
content: ""; |
395 |
display: block; |
396 |
top: 0; |
397 |
left: 0; |
398 |
z-index: -1; |
399 |
transition: width 0.5s; |
400 |
-webkit-transition: width 0.5s; |
401 |
} |
402 |
|
403 |
.body-wrapper {
|
404 |
position: relative; |
405 |
left: 0; |
406 |
transition: left 0.5s; |
407 |
-webkit-transition: left 0.5s; |
408 |
} |
409 |
|
410 |
footer {
|
411 |
text-align: center; |
412 |
color: white; |
413 |
background: #888888; |
414 |
padding: 10px; |
415 |
position: absolute; |
416 |
bottom: 0; |
417 |
left: 0; |
418 |
right: 0; |
419 |
} |
420 |
|
421 |
.black {
|
422 |
width: 100px; |
423 |
} |
424 |
|
425 |
.menu-header {
|
426 |
background: #aaaaaa; |
427 |
color: white; |
428 |
font-weight: 300; |
429 |
font-size: 15px; |
430 |
text-transform: uppercase; |
431 |
text-align: center; |
432 |
padding: 10px; |
433 |
cursor: pointer; |
434 |
} |
435 |
|
436 |
|
437 |
.menu-header > span { |
438 |
margin: 0 10px; |
439 |
} |
440 |
|
441 |
|
442 |
#menu .item .menu-header .submit.hidden { |
443 |
opacity: 0.1; |
444 |
} |
445 |
|
446 |
.menu-content {
|
447 |
max-height: 0; |
448 |
overflow: hidden; |
449 |
background: white; |
450 |
-webkit-transition: max-height .5s, margin-left .5s; |
451 |
transition: max-height .5s, margin-left .5s; |
452 |
} |
453 |
|
454 |
.menu-header.active ~ .menu-content { |
455 |
max-height: 4000px; |
456 |
} |
457 |
|
458 |
.menu-header.active, .menu-header:hover { |
459 |
background: #E78F08; |
460 |
} |
461 |
|
462 |
#panes {
|
463 |
background: white; |
464 |
margin: 0; |
465 |
padding: 0; |
466 |
list-style: none; |
467 |
} |
468 |
|
469 |
#panes > li { |
470 |
display: none; |
471 |
} |
472 |
|
473 |
#panes > li .empty { |
474 |
padding: 10px; |
475 |
text-align: center; |
476 |
} |
477 |
|
478 |
#panes > li ul { |
479 |
list-style: none; |
480 |
padding: 0; |
481 |
margin: 0; |
482 |
} |
483 |
|
484 |
#panes > li ul li { |
485 |
text-align: left; |
486 |
padding: 4px 0; |
487 |
} |
488 |
|
489 |
|
490 |
#panes ul { |
491 |
max-height: 0; |
492 |
overflow: hidden; |
493 |
margin-left: 5%; |
494 |
-webkit-transition: max-height .5s, margin-left .5s; |
495 |
transition: max-height .5s, margin-left .5s; |
496 |
} |
497 |
|
498 |
#panes ul li label { |
499 |
display: inline-block; |
500 |
line-height: 10px; |
501 |
margin: 0; |
502 |
cursor: pointer; |
503 |
} |
504 |
|
505 |
|
506 |
#panes ul.active { |
507 |
margin-left: 5%; |
508 |
max-height: 3000px; |
509 |
overflow: auto; |
510 |
} |
511 |
|
512 |
|
513 |
#panes > li ul li label input { |
514 |
display: none; |
515 |
} |
516 |
|
517 |
#panes > li ul li .expand { |
518 |
cursor: pointer; |
519 |
display: inline-block; |
520 |
font-weight: 800; |
521 |
width: 93%; |
522 |
} |
523 |
|
524 |
#panes > li ul li .expand i { |
525 |
margin-left: 5px; |
526 |
} |
527 |
|
528 |
|
529 |
#panes > li ul li .expand .plus, #panes > li ul li .expand.open .minus { |
530 |
display: inline-block; |
531 |
} |
532 |
|
533 |
#panes > li ul li .expand.open .plus, #panes > li ul li .expand .minus { |
534 |
display: none; |
535 |
} |
536 |
|
537 |
|
538 |
#panes > li ul li label .ui-input { |
539 |
margin-right: 10px; |
540 |
font-size: 13px; |
541 |
} |
542 |
|
543 |
#panes > li ul li label .ui-input .unchecked{ |
544 |
color: #aaaaaa; |
545 |
} |
546 |
|
547 |
#panes > li ul li label .ui-input .checked, #panes > li ul li label input:checked ~ .ui-input .unchecked { |
548 |
display: none; |
549 |
} |
550 |
|
551 |
label {
|
552 |
cursor: pointer; |
553 |
} |
554 |
|
555 |
#panes > li ul li label input:checked ~ .ui-input .checked{ |
556 |
display: inline-block; |
557 |
color: #3b68f3; |
558 |
} |
559 |
|
560 |
input[type="radio"] { |
561 |
display: none; |
562 |
} |
563 |
|
564 |
input[type="radio"]:checked ~ .ui-input .checked { |
565 |
display: inline-block; |
566 |
color: #3b68f3; |
567 |
} |
568 |
|
569 |
input[type="radio"] ~ .ui-input .unchecked { |
570 |
display: inline-block; |
571 |
color: #aaaaaa; |
572 |
} |
573 |
|
574 |
input[type="radio"]:checked ~ .ui-input .unchecked, input[type="radio"] ~ .ui-input .checked{ |
575 |
display: none; |
576 |
} |
577 |
|
578 |
|
579 |
#panes > li.active { |
580 |
display: block; |
581 |
} |
582 |
|
583 |
#graphs a { |
584 |
padding: 1%; |
585 |
display: inline-block; |
586 |
box-sizing: "border-box"; |
587 |
} |
588 |
|
589 |
h5 {
|
590 |
text-align: center; |
591 |
} |
592 |
|
593 |
.options {
|
594 |
text-align: center; |
595 |
} |
596 |
|
597 |
textarea {
|
598 |
border: none; |
599 |
border-radius: 0; |
600 |
resize: none; |
601 |
width: 100%; |
602 |
border-bottom: 1px solid silver; |
603 |
margin-bottom: 10px; |
604 |
} |
605 |
|
606 |
|
607 |
.default-search {
|
608 |
color: orange; |
609 |
} |
610 |
|
611 |
|
612 |
.delete {
|
613 |
color: red; |
614 |
cursor: pointer; |
615 |
} |
616 |
|
617 |
.clear-selection {
|
618 |
background: #e73f3f; |
619 |
margin: 0; |
620 |
padding: 10px; |
621 |
float: left; |
622 |
color: white; |
623 |
width: 100%; |
624 |
cursor: pointer; |
625 |
} |
626 |
|
627 |
.profile {
|
628 |
position: absolute; |
629 |
bottom: 0; |
630 |
left: 0; |
631 |
right: 0; |
632 |
margin-bottom: 40px; |
633 |
} |
634 |
|
635 |
|
636 |
.saved_searches {
|
637 |
position: absolute; |
638 |
bottom: 0; |
639 |
left: 0; |
640 |
right: 0; |
641 |
margin-bottom: 124px; |
642 |
color: silver; |
643 |
} |
644 |
|
645 |
|
646 |
.submit-search {
|
647 |
position: absolute; |
648 |
bottom: 0; |
649 |
left: 0; |
650 |
right: 0; |
651 |
margin-bottom: 82px; |
652 |
} |
653 |
|
654 |
.read_only .delete { |
655 |
display: none; |
656 |
} |
657 |
|
658 |
.read_only .item.save { |
659 |
display: none; |
660 |
} |
661 |
|
662 |
.read_only .clear-selection { |
663 |
display: none; |
664 |
} |
665 |
|
666 |
.clear-selection.hidden { |
667 |
display: none; |
668 |
} |