Statistics
| Branch: | Tag: | Revision:

root / ui / static / main.css @ 935bb83f

History | View | Annotate | Download (15.7 kB)

1
html, body, div, span, applet, object, iframe,
2
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
3
a, abbr, acronym, address, big, cite, code,
4
del, dfn, em, font, img, ins, kbd, q, s, samp,
5
small, strike, strong, sub, sup, tt, var,
6
b, u, i, center,
7
dl, dt, dd, ol, ul, li,
8
fieldset, form, label, legend,
9
table, caption, tbody, tfoot, thead, tr, th, td {
10
        margin: 0;
11
        padding: 0;
12
        border: 0;
13
        font-size: 100%;
14
        vertical-align: baseline;
15
        background: transparent;
16
    font-family: Verdana, 'PT Sans', sans-serif;
17
}
18

    
19
body {
20
        line-height: 1;
21
    background: url(../static/degrade-background.png) repeat-x scroll 0 0 #C3C3C3;
22
    margin: 0;
23
}
24

    
25
ol, ul {
26
        list-style: none;
27
}
28

    
29
blockquote, q {
30
        quotes: none;
31
}
32

    
33
blockquote:before, blockquote:after,
34
q:before, q:after {
35
        content: '';
36
        content: none;
37
}
38

    
39
/* remember to define focus styles! */
40
:focus {
41
    outline: 1px dotted #87AADE;
42
}
43

    
44
/* remember to highlight inserts somehow! */
45
ins {
46
        text-decoration: none;
47
}
48

    
49
del {
50
        text-decoration: line-through;
51
}
52

    
53
/* tables still need 'cellspacing="0"' in the markup */
54
table {
55
        border-collapse: collapse;
56
        border-spacing: 0;
57
}
58

    
59

    
60
h5 {
61
    font-weight: normal;
62
    font-size: 9pt;
63
    margin-bottom:3px;
64
}
65

    
66
/* root element for tabs  */
67
ul.css-tabs {
68
        margin: 0 0 0 10px; 
69
    padding: 0;
70
        height:31px;
71
    font-size:32px;        
72
    overflow: hidden;         
73
}
74

    
75
ul.css-tabs .secondary {
76
    position:relative;
77
}
78

    
79
/* single tab */
80
ul.css-tabs li {  
81
        float:left;         
82
        padding:0; 
83
        margin: 0 10px 0 0;  
84
        list-style-type:none;        
85
}
86

    
87
/* link inside the tab. uses a background image */
88
ul.css-tabs a { 
89
        float:left;
90
        display:block;
91
        text-decoration:none;
92
        color:#d2d2d2;
93
        position:relative;
94
        outline:0;
95
    padding: 0 9px 0 13px;
96
    top: 9px;
97
}
98

    
99
ul.css-tabs a#machines {
100
    color: #a3bbc5;
101
}
102

    
103
ul.css-tabs a#machines.current {
104
  color: #87aade;
105
}
106

    
107
ul.css-tabs a#disks {
108
    color: #deb358;
109
}
110

    
111
ul.css-tabs a#disks.current {
112
    color: #dea842;
113
}
114

    
115
ul.css-tabs a#images {
116
    color: #9ba97b;
117
}
118

    
119
ul.css-tabs a#images.current {
120
    color: #87a06d;
121
}
122

    
123
ul.css-tabs a#networks {
124
    color: #bc9399;
125
}
126

    
127
ul.css-tabs a#networks.current {
128
  color: #9d6d6a;
129
}
130

    
131
ul.css-tabs a#files {
132
    color: #a3bbc5;
133
}
134

    
135
ul.css-tabs a#files.current {
136
  color: #87aade;
137
}
138

    
139
ul.css-tabs a#desktops {
140
    color: #deb358;
141
}
142

    
143
ul.css-tabs a#desktops.current {
144
    color: #dea842;
145
}
146

    
147
ul.css-tabs a#apps {
148
    color: #9ba97b;
149
}
150

    
151
ul.css-tabs a#apps.current {
152
    color: #87a06d;
153
}
154

    
155
.more-tabs {
156
    float: right;
157
    margin: -15px 50px 0px 0px;
158
}
159

    
160
.more-tabs:hover {
161
    cursor: pointer;
162
}
163
        
164
/* selected tab */
165
ul.css-tabs a.current {
166
        cursor:default;   
167
    top: 2px !important; 
168
}
169

    
170
/* tab pane */
171
div.css-panes {
172
/*    border-top: 10px solid #87aade;
173
    border-bottom: 10px solid #87aade;  */
174
    background: white;
175
}
176

    
177
.css-panes > div.pane {
178
        display:none;
179
        padding:0px 20px;
180
    margin: 0 1em;
181
}
182

    
183
/* CSS3 border radius for various elements. yea - CSS isn't perfect */
184
.rounded, #sheet input, .error {
185
        border-radius: 5px;
186
        -webkit-border-radius: 5px;
187
        -moz-border-radius: 5px;
188
        -o-border-radius: 5px;
189
        -khtml-border-radius: 5px;
190
}
191

    
192
/* validation error message */
193
.error {
194
        background-color:#E8FF6D;
195
        padding:4px;
196
        -webkit-box-shadow: #000 0 0 9pt;
197
        -moz-box-shadow: #000 0 0 9pt;
198
}
199

    
200
/* nested arrow inside error message. It's 100% CSS. No images. */
201
.error em {
202
        border: 10px solid;
203
        border-color: #E8FF6D transparent transparent;
204
        bottom: -17px;
205
        display: block;
206
        height: 0;
207
        left: 10px;
208
        position: absolute;
209
        width: 0;
210
}
211

    
212
/* input field that caused validation error */
213
.invalid {
214
        background-color: rgba(221, 233, 255, 0.898) !important;
215
}
216

    
217
#create {
218
    background-color: #87aade;
219
    color: #000;
220
    cursor: pointer;
221
    display: block;
222
    padding: 6px 24px;
223
    margin: 12px 0 20px -36px;
224
    width: 125px;
225
    text-decoration: none;
226
}
227

    
228
#create:hover {
229
    background-color: #a8c5f1;
230
}
231

    
232
#header .fatborder{
233
    height: 60px;
234
    background: #999;
235
}
236

    
237
div#wrapper {
238
    width: 700px;
239
    margin: 0em auto;
240
}
241

    
242
.modal {
243
    background-color:#fff;
244
    display:none;
245
    width:30em;
246
    height:20em;
247
    padding:1em;
248
    text-align:left;
249
    opacity: 0.9;
250
}
251
        
252
/* scrollable root element */
253
#wizard {        
254
        border:5px solid #87AADE;
255
        font-size:9pt;
256
        height:405px;
257
        width:460px;
258
        margin:0px auto;        
259
        overflow:hidden;
260
        position:relative;
261
}  
262

    
263
/* scrollable items */
264
#wizard .items {
265
        width:20000em;
266
        clear:both;
267
        position:absolute;
268
}
269

    
270
/* validation error message bar. positioned on the top edge */
271
#drawer {
272
        overflow:visible;
273
        position:fixed;
274
        left:0;
275
        top:0;
276
}
277

    
278
/* scrollable items */
279
#wizard .items {
280
        width:20000em;        
281
        clear:both;        
282
        position:absolute;        
283
    display:block;
284
    padding: 0;
285
    margin: 0;
286
    border:none;
287
    background:none;
288
}
289

    
290
/* single item */
291
#wizard .page {        
292
        padding:20px 30px;
293
        width:440px;
294
        float:left;        
295
    display:block;
296
    border:none;
297
    background-color: transparent;
298
}
299

    
300
/* title */
301
#wizard h2 {
302
        font-weight: bold;
303
    font-size: 12pt;
304
    color: #666;
305
}
306

    
307
#wizard li {
308
        margin-bottom:1.2em;
309
}
310

    
311
#wizard .pane li {
312
    margin: 0;
313
}
314

    
315
#wizard label {
316
        font-size:16px;        
317
        display:block;
318
    clear: both;
319
}
320

    
321
#wizard label strong {
322
        color:#789;        
323
        position:relative;
324
        top:-1px;
325
    font-size: 12pt;
326
}
327

    
328
#wizard label em {
329
        font-size:9pt;
330
        color:#666;        
331
        font-style:normal;
332
}
333

    
334
#wizard .text {
335
        width: 94%;
336
        padding: 5px;
337
    margin-top: 10px;
338
        border: 1px solid #ccc;
339
        color: #456;
340
        letter-spacing: 1px;
341
}
342

    
343
#wizard select {
344
        border:1px solid #ccc;
345
        width:94%;        
346
        padding:4px;
347
    display: none;
348
}
349

    
350
#wizard .double label { 
351
        width:50%;
352
        float:left;
353
}
354

    
355
#wizard .double .text {
356
        width:93%;        
357
}
358

    
359
#wizard .clearfix {
360
        clear:left;
361
        padding-top:10px;        
362
}
363

    
364
#wizard .right {
365
        float:right;                
366
}
367

    
368
#wizard .error {
369
        border:1px solid red;                
370
}
371

    
372
#wizard a:hover div.image {
373
    background-color: #999;
374
}
375

    
376
#wizard label a:hover strong {
377
    color: white;
378
}
379

    
380
#wizard div.image span.size {
381
    font-size: 9pt;
382
    color: #666;
383
}
384

    
385
#wizard div.image .radio {
386
    float: right;
387
}
388

    
389
#wizard div.image span.image-id, #wizard div.image span.description {
390
    font-size: 9pt;
391
    color: #666;
392
    font-weight: normal;
393
    display:inline;
394
}
395

    
396
#wizard a:hover div.image span.image-id, #wizard a:hover div.image span.description, #wizard a:hover div.image span.size {
397
    color: white;
398
}
399

    
400
#wizard .cost {
401
    color: #666;
402
    margin-top: 50px;
403
}
404

    
405
#wizard #status {
406
        height: 32px;
407
        background: #999;
408
    padding-left: 15px;
409
}
410

    
411
.page ul {
412
    margin-top: 15px;
413
    height: 280px;
414
    overflow: auto;
415
}
416

    
417
.panes ul.pane {
418
    height: 276px;
419
}
420

    
421
.page ul.tabs {
422
    overflow: hidden;
423
    height: auto;
424
    margin-bottom: 0;
425
    margin-top: -20px;
426
}
427

    
428
.page ul.tabs li {
429
    float: right;
430
    margin: 0 1em;
431
}
432

    
433
#status li {
434
        float:left;
435
        color:#666;
436
        padding:10px 40px;
437
}
438

    
439
#status li.active {
440
        background-color: #87AADE;
441
    font-weight: bold;
442
    color: white;
443
}
444

    
445
/* slider root element */
446
.slider {
447
    border: 1px solid #666;
448
    clear: right;
449
    cursor: pointer;
450
    display: block !important;
451
    float: left;
452
    height: 5px;
453
    margin: 20px 0 20px;
454
    position: relative;
455
    width: 330px;
456
}
457

    
458
/* drag handle */
459
.handle {
460
    -moz-box-shadow: 0 0 2px #000000;
461
    background: url("../static/h30.png") repeat-x scroll 0 0 #FFFFFF;
462
    border: 1px solid #000000;
463
    cursor: move;
464
    display: block;
465
    height: 22px;
466
    margin-top: -15px;
467
    position: absolute;
468
    width: 10px;
469
}
470

    
471
/* progress bar (enabled with progress: true) */
472
.progress {
473
        height: 5px; 
474
        background-color: #87AADE;
475
}
476

    
477
/* the input field */
478
.range {
479
        border: 1px inset #ddd;
480
        float: left;
481
        font-size: 12pt;
482
        margin: 10px 0 0 15px;
483
        padding: 3px 0;
484
        text-align: center;
485
        width: 50px;                
486
}
487

    
488
div.machine {
489
    clear: both;
490
    margin: 5px 0 0 -32px;
491
    padding: 3px 4px 0;
492
    width: 523px;
493
    color: #666;
494
    height: 65px;
495
}
496

    
497
.machine a {
498
    color: #3d3d3d;
499
    font-weight: normal;
500
    text-decoration: none;
501
    font-size: 9pt;
502
}
503

    
504
.machine a:hover {
505
    color: #000;
506
    text-decoration: underline;
507
}
508

    
509
.state {
510
    float: right;
511
}
512

    
513
.state div {
514
    text-align: right;
515
    margin-right: 3px;
516
}
517

    
518
div.machine div.actions {
519
    float: right;
520
    width: 70px;
521
    margin:-60px -70px 0 0;
522
    font-weight: normal;
523
}
524

    
525
div.machine div.actions a {
526
    color: transparent;
527
    margin: 0 0 5px 8px;
528
    display: none;
529
}
530

    
531
div.machine div.actions a.more {
532
    margin-top: 18px;
533
}
534

    
535
div.machine div.actions a:hover{
536
    color: black !important;
537
    display: block;
538
}
539

    
540
div.machine div.actions:hover a, .machine:hover .actions a {
541
    color: #3d3d3d;
542
    display: block;
543
}
544

    
545
div.running div.machine a.action-start {
546
    display: none;
547
}
548

    
549
div.terminated div.machine a.action-reboot, div.terminated div.machine a.action-shutdown{
550
    display: none;
551
}
552

    
553
div.terminated div.machine div.actions a.more {
554
    margin-top: 34px;
555
}
556

    
557
.machine:hover {
558
    background-color:#dcdcdc;
559
}
560

    
561
.standard .machine img {
562
    float: left;
563
    margin: 7px 14px 0;
564
}
565

    
566
.list .machine img {
567
    margin: 0;
568
}
569

    
570
div.ip, div.state {
571
    font-size: 9pt;
572
    color: #3d3d3d;
573
}
574

    
575
div.indicator {
576
    width:10px;
577
    height:11px;
578
    margin: 3px -1px;
579
    clear: none;
580
    float:right;
581
}
582

    
583
.view-seperator {
584
    color:#5F8DD3;    
585
}
586

    
587
.running .indicator {
588
    border-top: 2px solid white;
589
    border-bottom: 2px solid white;
590
    border-left: 2px solid white;
591
    border-right: 3px solid white;
592
    background-color: #87AADE;
593
}
594

    
595
.terminated {
596
    margin-bottom: 17px;
597
}
598

    
599
.terminated .machine .state .status {
600
    color: #666;
601
}
602

    
603
.machine:hover div.uptime, .machine:hover a.rename, .machine:hover a.configure {
604
    color: #3d3d3d;
605
}
606

    
607
div.uptime {
608
    clear: both;
609
    color: transparent;
610
    margin-left: 1px;
611
}
612

    
613
div.machine-tabs {
614
    margin-top: 1em;
615
}
616

    
617
span.rename, span.configure {
618
    background-repeat: no-repeat;
619
    color: transparent;
620
    font-size: 9pt;
621
    font-weight: normal;
622
    margin-left: 10px;
623
    padding-left: 10px;
624
    text-align: left;
625
}
626

    
627
a.name:hover span.rename {
628
    color: #3D3D3D;
629
    margin-top: 0.4em;
630
    background-image: url(/static/pencil.png);
631
}
632

    
633

    
634
a.settings:hover span.configure {
635
    color: #3D3D3D;
636
}
637

    
638
button {
639
    background-color: #87AADE;
640
    border: 1px solid #87AADE;
641
    color: #FFFFFF;
642
    cursor: pointer;
643
    padding: 4px 25px;
644
}
645

    
646
button.next:hover {
647
    background-color: #f4b400;
648
    border-color: #f4b400;
649
}
650

    
651
button.prev:hover {
652
    background-color: #a8c5f1;
653
    border-color: #a8c5f1;
654
}
655

    
656
button.next {
657
    background-color: #F49000;
658
    border-color: #F49000;
659
    font-weight: bold;
660
}
661

    
662
button.prev {
663
    margin-left: -19px;
664
}
665

    
666
.image-logo {
667
    float: left;
668
    margin-right: 1em;
669
}
670

    
671
div.image {
672
    padding: 10px;
673
    clear: both;
674
    display: block;
675
}
676

    
677
div#view-select {
678
    float: right;
679
    clear: both;
680
    color: white;
681
    margin-top: -70px;
682
    margin-right: -36px;
683
    font-size: 9pt;
684
    background-color: #87aade;
685
    padding: 5px 10px;
686
}
687

    
688
a#standard, a#list {
689
    text-decoration: none;
690
    font-size: 11pt;
691
}
692

    
693
div#view-select a {
694
    color:#5f8dd3;
695
}
696

    
697
a#list:hover {
698
background: #5f8dd3;
699
}
700

    
701
a#standard:hover{
702
background: #5f8dd3;
703
}
704

    
705
a#standard:active, a#list:active {
706
color:white;
707
}
708

    
709
.activelink {
710
color:white !important;
711
}
712

    
713
div.machine-type {
714
    float: left;
715
    margin: 4px 10px 20px 0;
716
}
717

    
718
#machinesview {
719
    min-height: 270px;
720
}
721

    
722
.list#machinesview {
723
    margin-left: -20px;
724
}
725

    
726
#emptymachineslist {
727
display:none; 
728
color: #A0A0A0;
729
margin-top:100px;
730
}
731

    
732

    
733
div.list label img {
734
    margin: 5px 5px -3px 0;
735
}
736

    
737
div.list label {
738
    color: #3D3D3D;
739
    font-size: 9pt;
740
}
741

    
742
div.list .state {
743
    margin-top: 7px;
744
    margin-right: 10px;
745
}
746

    
747
div.list table tbody {
748
    margin-top: 8px;
749
}
750

    
751
div.list .stopped {
752
    margin-top: 8px;
753
}
754

    
755
/* root element for tabs  */
756
#wizard ul.tabs { 
757
    margin-left: 260px;                          
758
}
759

    
760
#wizard div.panes {
761
    height: 270px;
762
    margin-bottom: 6px;
763
}
764

    
765
/* single tab */
766
#wizard ul.tabs li {  
767
    margin-bottom: 0; 
768
        list-style-type:none;
769
    float: left;        
770
}
771

    
772
/* link inside the tab. uses a background image */
773
#wizard ul.tabs a { 
774
        display:block;
775
        padding: 0.5em;        
776
        text-decoration:none;
777
        color: #999;
778
        position:relative;
779
        top:1px;
780
        outline:0;
781
}
782

    
783
#wizard ul.tabs a:hover {
784
        color: black;
785
    background-color:#F7F7F7;
786
}
787
        
788
/* selected tab */
789
#wizard ul.tabs a.current {
790
        color: white;
791
    background-color: #87AADE;        
792
        cursor: default;
793
}
794

    
795
div.list div.actions {
796
    display: none;
797
    clear: left;
798
    float: right;
799
    margin-right: -20px;
800
    margin-top: 37px;
801
    text-align: right;
802
    width: 150px;
803
}
804

    
805
div.list div.actions a {
806
    clear: left;
807
    color: #D3D3D3;
808
    display: block;
809
    font-size:9pt;
810
    margin-bottom: 2px;
811
}
812

    
813
div.list div.actions a.enabled {
814
    color: #3D3D3D;
815
}
816

    
817
div.list div.actions a.enabled:hover{
818
    cursor: pointer;
819
    color: black;
820
    text-decoration: underline;
821
}
822

    
823
input.machine {
824
    width: 13px;
825
    height: 13px;
826
    top: -1px;
827
    overflow: hidden;
828
}
829

    
830
#error-success, #yes-no {
831
    height: 100px;
832
    border: 5px solid #87AADE;
833
    z-index: 9999;
834
}
835

    
836
#error-success p, #yes-no p, #yes-no button {
837
    margin-top: 15px;
838
}
839

    
840
#error-success strong {
841
    color: #F49C1A;
842
}
843

    
844
#error-success .close {
845
        background-image: url(/static/close.png);
846
        position: absolute;
847
        right: -19px;
848
        top: -20px;
849
        cursor: pointer;
850
        height: 35px;
851
        width: 35px;
852
}
853

    
854
div#user{
855
    float:right;
856
    clear: both;
857
    color: #a0a0a0;
858
    font-size: 9pt;
859
    margin-top: 16px;
860
}
861

    
862
div#user a{
863
    color: #a0a0a0;
864
    text-decoration: none;
865
}
866

    
867
div#user a.current_lang {
868
    color: #d3d3d3;
869
}
870

    
871
.seperator {
872
    background-color: #87AADE;
873
    height: 10px;
874
    width: 700px;
875
    margin: 0 0 0 -36px;
876
}
877

    
878
#mini.seperator {
879
    width: 535px;
880
    height: 5px;
881
    margin: 17px 0 17px -36px;
882
    display: none;
883
}
884

    
885
#disks.seperator {
886
    background-color: #dea842;
887
}
888

    
889
#images.seperator {
890
    background-color: #87a06d;
891
}
892

    
893
#networks.seperator {
894
    background-color: #9d6d6a;
895
}
896

    
897
#desktops.seperator {
898
    background-color: #dea842;
899
}
900

    
901
#apps.seperator {
902
    background-color: #87a06d;
903
}
904

    
905
.machine .seperator {
906
    width: 508px;
907
    height: 1px;
908
    margin: 8px 0 0 15px;
909
    background-color: #DCDCDC;
910
}
911

    
912
.machine h5 {
913
    margin: 0px 60px 1px 84px;
914
}
915

    
916
.machine .settings {
917
    margin-top: 22px;
918
}
919

    
920
#spinner {
921
    background: url("../static/progress.gif");
922
    height: 31px;
923
    width: 31px;
924
    margin-left: 298px;
925
    margin-top: 160px; 
926
}
927

    
928
/* tables in list view */
929
div.list div.dataTables_filter,  div.list div.dataTables_filter input{
930
    font-size: 9pt;
931
}
932

    
933
div.list div.dataTables_filter input{
934
    height: 12px;
935
    margin-bottom: 12px;
936
}
937

    
938
div.list table {
939
    width: 515px;
940
    font-size: 9pt;
941
}
942

    
943
div.list table tbody td {
944
        color: #3D3D3D;
945
        padding:6px;
946
        background-color: #FFF;
947
        vertical-align: middle;
948
}
949

    
950
div.list table thead tr th {
951
        background-color: #E6EEEE;
952
        background-image: url(bg.gif);
953
        background-repeat: no-repeat;
954
        background-position: center right;
955
    font-weight: normal; 
956
        border: 1px solid #FFF;
957
        padding: 4px;
958
    text-align: left;
959
    vertical-align: middle;
960
        cursor: pointer;
961
}
962

    
963
div.list table thead .sorting_asc, div.list table thead .sorting_desc {
964
    background-color: #87AADE;
965
}
966

    
967
div.list table thead .sorting_asc {
968
        background-image: url(asc.gif);
969
}
970

    
971
div.list table thead .sorting_desc {
972
        background-image: url(desc.gif);
973
}
974

    
975
div.list table #selection div.expand-icon {
976
        background-image: url(asc.gif);
977
        background-repeat: no-repeat;
978
    position: relative;
979
        cursor: pointer;
980
    width: 15px;
981
    height: 4px;
982
    left: 19px;
983
    top: -11px;
984
}
985

    
986
div.list table thead tr th ul {
987
    background-color: #E6EEEE;
988
    position: absolute;
989
    margin-left: -4px;
990
    display: block;
991
}
992

    
993
div.list table thead tr th ul li {
994
    padding: 5px;
995
}
996

    
997
div.list table thead tr th ul li:hover {
998
    background-color: #87AADE;
999
}
1000

    
1001
div.list table thead tr th ul li a{
1002
    color: black;
1003
    text-decoration: none;
1004
}
1005

    
1006
div.list table thead #os {
1007
    width: 32px !important;
1008
    vertical-align:middle;
1009
}
1010

    
1011
div.list table span.imagetag { 
1012
    display: none;
1013
}
1014

    
1015
div.list table #selection {
1016
        width: 35px !important;
1017
        text-align: left;
1018
    background-image: none;
1019
}
1020

    
1021
div.list table thead #ip {
1022
    width: 100px !important;
1023
}
1024

    
1025
div.list table thead #group {
1026
    width: 60px !important;
1027
}
1028

    
1029
div.list table thead #status {
1030
    width: 70px !important;
1031
}
1032

    
1033
div.list table thead #name {
1034
    width: 200px !important;
1035
}