Statistics
| Branch: | Tag: | Revision:

root / ui / static / main.css @ ea3cb4e4

History | View | Annotate | Download (12.6 kB)

1
body {
2
    background:url("../static/header.png") no-repeat scroll top transparent;
3
    background-color: #213d55;
4
        font-family:"Lucida Grande","bitstream vera sans","trebuchet ms",sans-serif,verdana;
5
    margin: 0;
6
}
7

    
8
*:focus {
9
    outline:0 !important;
10
}
11

    
12
h1, h2, h3, h4, h5 {
13
    margin-top: 0em;
14
    margin-bottom: .6em;
15
}
16

    
17
h5 {
18
    font-weight: normal;
19
    margin-bottom: 1em;
20
}
21

    
22
#nefo{
23
    display:none;
24
}
25

    
26
#footer {
27
    text-align:center;
28
    color: #666;
29
    font-size: .5em;
30
    padding:2em;
31
}
32

    
33
#footer a {
34
    color: #EBEBEB;
35
    text-decoration: none;
36
}
37

    
38
/* get rid of those system borders being generated for A tags */
39
a:active {
40
  outline:none;
41
}
42

    
43
/* root element for tabs  */
44
ul.css-tabs {  
45
        margin:-.5em 2em 0 1em !important; 
46
        padding:0;
47
        height:2.2em;
48
}
49

    
50
/* single tab */
51
ul.css-tabs li {  
52
        float:left;         
53
        padding:0; 
54
        margin:-3px 1em 0 0;  
55
        list-style-type:none;        
56
}
57

    
58
/* link inside the tab. uses a background image */
59
ul.css-tabs a { 
60
        float:left;
61
        font-size:1em;
62
        display:block;
63
        padding:.6em 3em 0;        
64
        text-decoration:none;
65
        border:0px solid #213D55;
66
        border-bottom:2px solid #213D55;
67
        height:1.65em;
68
        background-color:#ebebeb;
69
        color:#666666;
70
        position:relative;
71
        outline:0;
72
        -moz-border-radius:1em 1em 0 0;        
73
}
74

    
75
ul.css-tabs a:hover {
76
    color: #3baddb;
77
}
78
        
79
/* selected tab */
80
ul.css-tabs a.current {
81
        background-color:#f7f7f7;
82
    color: #000;
83
        cursor:default;
84
    border-bottom: none;
85
        height:1.8em !important;
86
}
87

    
88
        
89
/* tab pane */
90
.css-panes > div.pane {
91
        display:none;
92
        border:0px solid #666;
93
        padding:15px 20px;
94
        background-color:#f7f7f7;
95
    margin: 0 1em;
96
    -moz-border-radius: 0 1em 1em;
97
}
98

    
99

    
100

    
101
/* CSS3 border radius for various elements. yea - CSS isn't perfect */
102
.rounded, #sheet input, .error {
103
        -webkit-border-radius: 5px;
104
        -moz-border-radius: 5px;
105
        -o-border-radius: 5px;
106
        -khtml-border-radius: 5px;
107
}
108

    
109
/* validation error message */
110
.error {
111
        background-color:#E8FF6D;
112
        padding:4px;
113
        -webkit-box-shadow: #000 0 0 12px;
114
        -moz-box-shadow: #000 0 0 12px;
115
}
116

    
117
/* nested arrow inside error message. It's 100% CSS. No images. */
118
.error em {
119
        border:10px solid;
120
        border-color:#E8FF6D transparent transparent;
121
        bottom:-17px;
122
        display:block;
123
        height:0;
124
        left:10px;
125
        position:absolute;
126
        width:0;
127
}
128

    
129
/* input field that caused validation error */
130
.invalid {
131
        background-color:rgba(221, 233, 255, 0.898) !important;
132
}
133

    
134
#create {
135
    -moz-border-radius: .5em;
136
    background-color: #f49c1a;
137
    border: 2px solid #F7F7F7;
138
    color: #f4f4f4;
139
    cursor:pointer;
140
    display:block;
141
    padding: .7em 1em;
142
    width: 8em;
143
    font-weight: bold;
144
    text-decoration: none;
145
}
146

    
147
#create:hover {
148
    background-color:#f29400;
149
    color: white;
150
    border: 2px solid #f29400;
151
}
152

    
153
div#header {
154
    height:152px;
155
    margin-left: -2em;
156
}
157

    
158
div#wrapper {
159
    width: 800px;
160
    margin: 0 auto;
161
}
162

    
163
a.logo {
164
    width: 250px; 
165
}
166

    
167
a.logo h1 {
168
    background:url("../static/cloud.png") no-repeat scroll bottom left transparent ;
169
    height:78px;
170
    color: #b1b3b4;
171
    margin-left: 1em;
172
    margin-top: 0;
173
    padding: .5em 0 0 3.2em;   
174
    line-height: .3em;
175
    font-size: 1.7em; 
176
}
177

    
178
a.logo:hover h1 {
179
    color: #3baddb;
180
}
181
a img {
182
    border: none;
183
}
184

    
185
div#about {
186
    color: white;
187
    padding: .5em 0;
188
    font-size:.7em;
189
    float: right;
190
}    
191

    
192
/* tooltip styling. by default the element to be styled is .tooltip  */
193
.tooltip {
194
        display:none;
195
        background:transparent url(../static/tooltip.png);
196
        font-size:12px;
197
        height:40px;
198
        width:130px;
199
        padding:25px;
200
        color:#fff;        
201

    
202
}
203

    
204
.modal {
205
    background-color:#fff;
206
    display:none;
207
    width:30em;
208
    height:30em;
209
    padding:1em;
210
    text-align:left;
211
    opacity:0.9;
212
}
213
        
214
/* scrollable root element */
215
#wizard {        
216
        background:#fff url(../static/h600.png) repeat scroll 0 0;
217
        border:5px solid #789;
218
        font-size:12px;
219
        height:480px;
220
        margin:0px auto;        
221
        width:500px;
222
        overflow:hidden;
223
        position:relative;
224
        /* rounded corners for modern browsers */
225
        -moz-border-radius:5px;
226
        -webkit-border-radius:5px;
227
}  
228

    
229
/* scrollable items */
230
#wizard .items {
231
        width:20000em;
232
        clear:both;
233
        position:absolute;
234
}
235

    
236
/* single scrollable item called ".page" in this setup */
237
#wizard .page {
238
        padding:20px 30px;
239
        float:left;
240
}
241

    
242
/* validation error message bar. positioned on the top edge */
243
#drawer {
244
        overflow:visible;
245
        position:fixed;
246
        left:0;
247
        top:0;
248
}
249

    
250
/* scrollable items */
251
#wizard .items {
252
        width:20000em;        
253
        clear:both;        
254
        position:absolute;        
255
    display:block;
256
    padding: 0;
257
    margin: 0;
258
    border:none;
259
    background:none;
260
}
261

    
262
/* single item */
263
#wizard .page {        
264
        padding:20px 30px;
265
        width:440px;
266
        float:left;        
267
    display:block;
268
    border:none;
269
    background-color: transparent;
270
}
271

    
272
/* title */
273
#wizard h2 {
274
        font-size:22px;
275
        font-weight:normal;
276
        margin:10px 0 0 0;
277
}
278

    
279
#wizard h2 em {
280
        display:block;
281
        font-size:14px;
282
        color:#666;
283
        font-style:normal;
284
        margin-top:5px;
285
}
286

    
287
/* input fields */
288
#wizard ul {
289
        padding:0px !important;
290
}
291

    
292
#wizard li {
293
        list-style-type:none;
294
        list-style-image:none;
295
        margin-bottom:1.2em;
296
}
297

    
298
#wizard label {
299
        font-size:16px;        
300
        display:block;
301
    clear: both;
302
}
303

    
304
#wizard label strong {
305
        color:#789;        
306
        position:relative;
307
        top:-1px;
308
}
309

    
310
#wizard label em {
311
        font-size:11px;
312
        color:#666;        
313
        font-style:normal;
314
}
315

    
316
#wizard .text {
317
        width:94%;
318
        padding:5px;
319
        border:1px solid #ccc;
320
        color:#456;
321
        letter-spacing:1px;
322
}
323

    
324
#wizard select {
325
        border:1px solid #ccc;
326
        width:94%;        
327
        padding:4px;
328
    display: none;
329
}
330

    
331
#wizard label span {
332
        color:#b8128f;
333
        font-weight:bold;
334
        position:relative;
335
        top:4px;
336
        font-size:20px;
337
}
338

    
339
#wizard .double label { 
340
        width:50%;
341
        float:left;
342
}
343

    
344
#wizard .double .text {
345
        width:93%;        
346
}
347

    
348
#wizard .clearfix {
349
        clear:left;
350
        padding-top:10px;        
351
}
352

    
353
#wizard .right {
354
        float:right;                
355
}
356

    
357
#wizard .error {
358
        border:1px solid red;                
359
}
360

    
361
#wizard #status {
362
        margin:0px !important;
363
        height:35px;
364
        background:#213d55 url(../static/h30.png) repeat-x;
365
        padding-left:25px !important;
366
        _background:#213d55;
367
}
368

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

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

    
380
#wizard div.image strong {
381
    font-size: 1em;
382
}
383

    
384
#wizard div.image span.size {
385
    font-size:.7em;
386
    color: #666;
387
}
388

    
389
#wizard div.image .radio {
390
    float: right;
391
}
392

    
393
#wizard div.image span.image-id, #wizard div.image span.description {
394
    font-size:.7em;
395
    color: #666;
396
    font-weight: normal;
397
    display:inline;
398
}
399

    
400
#wizard a:hover div.image span.image-id, #wizard a:hover div.image span.description, #wizard a:hover div.image span.size {
401
    color: white;
402
}
403

    
404
#wizard .cost {
405
    color: #666;
406
    margin-top: 4em;
407
}
408

    
409
#status li {
410
        list-style-type:none;
411
        list-style-image:none;
412
        float:left;
413
        color:#fff;
414
        padding:10px 30px;
415
}
416

    
417
#status li.active {
418
        background-color:#F49C1A;
419
        font-weight:normal;                
420
}
421

    
422
/* slider root element */
423
.slider {
424
    -moz-border-radius: 5px 5px 5px 5px;
425
    -moz-box-shadow: 0 0 8px #000000 inset;
426
    background: url("../static/h30.png") repeat-x scroll 0 0 #3C72E6;
427
    border: 1px solid #333333;
428
    clear: right;
429
    cursor: pointer;
430
    display: block !important;
431
    float: left;
432
    height: 3px;
433
    margin-top: 10px;
434
    padding: 0.1em !important;
435
    position: relative;
436
    width: 330px;
437
}
438

    
439
/* progress bar (enabled with progress: true) */
440
.progress {
441
        height:9px; 
442
        background-color:#C5FF00; 
443
        display:none;
444
        opacity:0.6;
445
}
446

    
447
/* drag handle */
448
.handle {
449
    -moz-border-radius: 14px 14px 14px 14px;
450
    -moz-box-shadow: 0 0 2px #000000;
451
    background: url("../static/h30.png") repeat-x scroll 0 0 #FFFFFF;
452
    border: 1px solid #000000;
453
    cursor: move;
454
    display: block;
455
    height: 22px;
456
    margin-top: -11px;
457
    position: absolute;
458
    width: 10px;
459
}
460

    
461
/* the input field */
462
.range {
463
        border:1px inset #ddd;
464
        float:left;
465
        font-size:16px;
466
        margin:0 0 0 15px;
467
        padding:3px 0;
468
        text-align:center;
469
        width:50px;
470
        -moz-border-radius:5px; 
471
        -webkit-border-radius:5px;                 
472
}
473

    
474
.instance {
475
    clear: both;
476
    padding: .7em 1em .7em 1em;
477
    width: 70%;
478
    border: 1px dashed transparent;
479
    color: #666;
480
    height: 70px;
481
}
482

    
483
.instance a {
484
    color: #666;
485
    font-weight: normal;
486
    text-decoration: none;
487
    font-size: .8em;
488
}
489

    
490
.instance a:hover {
491
    color: black;
492
}
493

    
494
.state {
495
    float: right;
496
    width: 15%;
497
}
498

    
499
.actions {
500
    float: right;
501
    width: 15%;
502
    margin-right: -7em;
503
    height: 70px;
504
}
505

    
506
.actions a {
507
    color: transparent;
508
}
509

    
510
a.action, a.more {
511
    margin:.5em;
512
    display:block;
513
}
514

    
515
a.action:hover, a.more:hover {
516
    color: black !important;
517
}
518

    
519
.actions:hover a,.instance:hover .actions a {
520
    color: #666;
521
}
522

    
523
.instance:hover {
524
    border: 1px dotted transparent;
525
    background-color:#EBEBEB;
526
    color: black;
527
}
528

    
529
.instance img {
530
    float: left;
531
    margin: 0em 2em 0 1em;
532
}
533

    
534
div.ip, div.state {
535
    font-size: 0.7em;
536
    color: #666;
537
    margin-top: 0.5em;
538
}
539

    
540
div.indicator {
541
    width:1em;
542
    height:.6em;
543
    margin: .3em -.1em .5em;
544
    clear: none;
545
    float:left;
546
}
547

    
548
.running .indicator {
549
    border:2px solid white;
550
    background-color: #05b00d;
551
}    
552

    
553
.instance:hover div.uptime, .instance:hover a.rename, .instance:hover a.configure {
554
    color: #666;
555
}
556

    
557
div.uptime {
558
    clear: both;
559
    color:transparent;
560
    margin-left:1px;
561
}
562

    
563
div.instance-tabs {
564
    margin-top: 1em;
565
}
566

    
567
span.rename, span.configure {
568
    background-repeat: no-repeat;
569
    font-size: 11px;
570
    color: transparent;
571
    font-weight: normal;
572
    margin-left: 2em;
573
    padding-left: 1.5em;
574
    text-align: left;
575
}
576

    
577
a.name:hover span.rename {
578
    color: #213D55;
579
    margin-top: 0.4em;
580
    background-image: url(/static/pencil.png);
581
}
582

    
583
a.ip:hover span.configure {
584
    color: #213D55;
585
    background-image: url(/static/pencil.png);
586
}
587

    
588
a.storage:hover span.configure {
589
    color: #213D55;
590
    background-image: url(/static/pencil.png);
591
}
592

    
593
.terminated {
594
    opacity: .8;
595
}
596

    
597
#ubuntu {
598
    height:50px;
599
    background: url(../static/ubuntu.png) no-repeat 0 0;
600
    padding-left: 50px;
601
}
602

    
603
button {
604
    -moz-border-radius: 10.2em 10.2em 10.2em 10.2em;
605
    background-color: #31446f;
606
    border-bottom: 0.2em solid #666666;
607
    border-width: 1px 1px 0.2em;
608
    color: #FFFFFF;
609
    cursor: pointer;
610
    font-size: 1em;
611
    line-height: 1;
612
    padding: 0.7em 2em;
613

    
614
}
615

    
616
button.next {
617
    background-color: #f49000;
618
    font-weight: bold;
619
}
620

    
621
button.prev {
622

    
623
}
624

    
625
.image-logo {
626
    float: left;
627
    margin-right: 1em;
628
}
629

    
630
div.image {
631
    padding: 1em;
632
    clear: both;
633
    display: block;
634
}
635

    
636
.page ul {
637
    height: 280px;
638
    overflow: auto;
639
    margin-bottom: 2em;
640
}
641

    
642
.panes ul.pane {
643
    height: 268px;
644
}
645

    
646
.page ul.tabs {
647
    height: auto;
648
    margin-bottom: 0em;
649
    margin-top: -1.5em;
650
}
651

    
652
.page ul.tabs li {
653
    float: right;
654
    margin: 0 1em;
655
}
656

    
657
div.instance-type {
658
    float: left;
659
    margin-bottom: 2em;
660
    margin-right: 1.8em;
661
    margin-top: 1em;
662
}
663

    
664
div.active, div.stopped {
665
    margin-left: -1em;
666
    width: 70%;
667
    padding: 1em;
668
    height: 200px;
669
    margin-top: 1em;
670
}
671

    
672
div.list label img {
673
    margin-right: .5em;
674
    margin-bottom: -0.25em;
675
}
676

    
677
div.list label {
678
    color: #666;
679
    font-size: 0.8em;
680
}
681

    
682
div.list div.running {
683
    margin: 0.5em 0;
684
}
685

    
686
#wizard strong.sliders {
687
    color: #ADA9A5;
688
}
689

    
690
a#list, a#standard {
691
    float: left;
692
    clear: both;
693
    color: #666;
694
    text-decoration: none;
695
    margin-top: -4em;
696
    margin-left: 65em;
697
    font-size: 0.8em
698
}
699

    
700
/* root element for tabs  */
701
#wizard ul.tabs { 
702
    margin-top: -2em;        
703
    margin-left: 21em;         
704
}
705

    
706
/* single tab */
707
#wizard ul.tabs li {  
708
    margin-bottom: 0; 
709
        list-style-type: none;        
710
    float: left;
711
}
712

    
713
/* link inside the tab. uses a background image */
714
#wizard ul.tabs a { 
715
        display:block;
716
        padding: 0.5em;        
717
        text-decoration:none;
718
        color: #999;
719
        position:relative;
720
        top:1px;
721
        outline:0;
722
}
723

    
724
#wizard ul.tabs a:hover {
725
        color: black;
726
    background-color:#F7F7F7;
727
}
728
        
729
/* selected tab */
730
#wizard ul.tabs a.current {
731
        color: white;
732
    background-color: #F49000;        
733
        cursor: default;
734
}
735

    
736
div.inactive div.state {
737
    margin-right: 1.5em;
738
}
739

    
740
div.inactive {
741
    opacity: .6;
742
}
743

    
744
div.list div.actions {
745
    clear: left;
746
    float: right;
747
    margin-right: 2em;
748
    margin-top: 2em;
749
    width: 150px;
750
    text-align: right;
751
}
752

    
753
div.list div.actions a {
754
    clear: left;
755
    color: #666 !important;
756
    display: block;
757
    font-size: .8em;
758
}
759

    
760
input.instance {
761
    width: 13px;
762
    height: 13px;
763
    padding: 0;
764
    margin:0;
765
    vertical-align: bottom;
766
    position: relative;
767
    top: -1px;
768
    *overflow: hidden;
769
}
770

    
771
#misc {
772
        background:#fff url(../static/h600.png) repeat scroll 0 0;
773
        border:5px solid #789;
774
    height: 100px;
775
        margin:0px auto;        
776
        overflow:hidden;
777
        position:relative;
778
        /* rounded corners for modern browsers */
779
        -moz-border-radius:5px;
780
        -webkit-border-radius:5px;
781
}
782

    
783
#misc strong {
784
    color: #F49C1A;
785
}
786

    
787
img.os {
788
    z-index: 1;
789
    margin-left: -40px;
790
    margin-top: 45px;
791
    opacity: .9;
792
}
793

    
794
div#user {
795
    float:right;
796
    color: white;
797
    font-size: 9pt;
798
    margin-top: 6px;
799
    margin-left: 9px;
800
}
801

    
802
div#user a {
803
    color: #a0a0a0;
804
    text-decoration: none;
805
}
806