Statistics
| Branch: | Tag: | Revision:

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
}