Statistics
| Branch: | Tag: | Revision:

root / ui / static / alt-main.css @ cc7c5902

History | View | Annotate | Download (11.7 kB)

1
body {
2
    background:#fff url(../static/degrade-background.png) repeat scroll 0 0;
3
        font-family:"Lucida Grande","bitstream vera sans","trebuchet ms",sans-serif,verdana;
4
    margin: 0;
5
}
6

    
7
h1, h2, h3, h4, h5 {
8
    margin-top: 0em;
9
    margin-bottom: .6em;
10
}
11

    
12
h5 {
13
    font-weight: normal;
14
    margin-bottom: 1em;
15
}
16

    
17
#footer {
18
    text-align:center;
19
    color: #666;
20
    font-size: .5em;
21
    padding:2em;
22
}
23

    
24
/* get rid of those system borders being generated for A tags */
25
a:active {
26
  outline:none;
27
}
28

    
29
*:focus {
30
    outline:0 !important;
31
}
32

    
33
/* root element for tabs  */
34
ul.css-tabs {
35
        margin: 0; 
36
    padding: 0;
37
        height:1.5em;
38
    font-size:2em;        
39
    overflow: hidden;         
40
}
41

    
42
/* single tab */
43
ul.css-tabs li {  
44
        float:left;         
45
        padding:0; 
46
        margin: 0;  
47
        list-style-type:none;        
48
}
49

    
50
/* link inside the tab. uses a background image */
51
ul.css-tabs a { 
52
        float:left;
53
        font-size:1em;
54
        display:block;
55
        padding:.6em 1em 0;        
56
        text-decoration:none;
57
        height:1.5em;
58
        color:#d2d2d2;
59
        position:relative;
60
        outline:0;
61
    margin-top:0.15em
62
}
63

    
64
ul.css-tabs a:hover {
65
    margin-top:0em
66
}
67
        
68
/* selected tab */
69
ul.css-tabs a.current {
70
    color: #87aade;
71
        cursor:default;
72
    margin-top:0em
73
}
74

    
75
/* tab pane */
76
div.css-panes {
77
    border-top: 10px solid #87aade;  
78
    background: white;
79
}
80

    
81
.css-panes > div.pane {
82
        display:none;
83
        padding:15px 20px;
84
    margin: 0 1em;
85
    -moz-border-radius: 0 1em 1em;
86
}
87

    
88
/* CSS3 border radius for various elements. yea - CSS isn't perfect */
89
.rounded, #sheet input, .error {
90
        border-radius: 5px;
91
        -webkit-border-radius: 5px;
92
        -moz-border-radius: 5px;
93
        -o-border-radius: 5px;
94
        -khtml-border-radius: 5px;
95
}
96

    
97
/* validation error message */
98
.error {
99
        background-color:#E8FF6D;
100
        padding:4px;
101
        -webkit-box-shadow: #000 0 0 12px;
102
        -moz-box-shadow: #000 0 0 12px;
103
}
104

    
105
/* nested arrow inside error message. It's 100% CSS. No images. */
106
.error em {
107
        border: 10px solid;
108
        border-color: #E8FF6D transparent transparent;
109
        bottom: -17px;
110
        display: block;
111
        height: 0;
112
        left: 10px;
113
        position: absolute;
114
        width: 0;
115
}
116

    
117
/* input field that caused validation error */
118
.invalid {
119
        background-color: rgba(221, 233, 255, 0.898) !important;
120
}
121

    
122
#create {
123
    background-color: #87aade;
124
    color: #162d50;
125
    cursor: pointer;
126
    display: block;
127
    padding: 0.7em .4em 0.7em 2.2em;
128
    margin-top: 1em;
129
    width: 7.9em;
130
    text-decoration: none;
131
    margin-left: -2.3em;
132
}
133

    
134
#create:hover {
135
    color: white;
136
}
137

    
138
div#header {
139
    height: 60px;
140
    background: #999;
141
}
142

    
143
div#wrapper {
144
    width: 990px;
145
    margin: 0em auto;
146
}
147

    
148
a.logo {
149
    width: 250px; 
150
}
151

    
152
a.logo h1 {
153
    display: none;
154
}
155

    
156
a.logo:hover h1 {
157
    color: #3baddb;
158
}
159
a img {
160
    border: none;
161
}
162

    
163
div#about {
164
    display:none;
165
}    
166

    
167
#nefo {
168
    background: url("../static/nefo.png") no-repeat;
169
    margin: 3em 0 -0.2em 0;
170
}
171

    
172
/* tooltip styling. by default the element to be styled is .tooltip  */
173
.tooltip {
174
        display:none;
175
    color: transparent; 
176
}
177

    
178
.modal {
179
    background-color:#fff;
180
    display:none;
181
    width:30em;
182
    height:20em;
183
    padding:1em;
184
    text-align:left;
185
    opacity:0.9;
186
}
187
        
188
/* scrollable root element */
189
#wizard {        
190
        border:5px solid #87AADE;
191
        font-size:12px;
192
        height:480px;
193
        margin:0px auto;        
194
        width:500px;
195
        overflow:hidden;
196
        position:relative;
197
        /* rounded corners for modern browsers */
198
        -moz-border-radius:5px;
199
        -webkit-border-radius:5px;
200
}  
201

    
202
/* scrollable items */
203
#wizard .items {
204
        width:20000em;
205
        clear:both;
206
        position:absolute;
207
}
208

    
209
/* single scrollable item called ".page" in this setup */
210
#wizard .page {
211
        padding:20px 30px;
212
        float:left;
213
}
214

    
215
/* validation error message bar. positioned on the top edge */
216
#drawer {
217
        overflow:visible;
218
        position:fixed;
219
        left:0;
220
        top:0;
221
}
222

    
223
/* scrollable items */
224
#wizard .items {
225
        width:20000em;        
226
        clear:both;        
227
        position:absolute;        
228
    display:block;
229
    padding: 0;
230
    margin: 0;
231
    border:none;
232
    background:none;
233
}
234

    
235
/* single item */
236
#wizard .page {        
237
        padding:20px 30px;
238
        width:440px;
239
        float:left;        
240
    display:block;
241
    border:none;
242
    background-color: transparent;
243
}
244

    
245
/* title */
246
#wizard h2 {
247
        font-size:22px;
248
        font-weight:normal;
249
        margin:10px 0 0 0;
250
}
251

    
252
#wizard h2 em {
253
        display:block;
254
        font-size:14px;
255
        color:#666;
256
        font-style:normal;
257
        margin-top:5px;
258
}
259

    
260
/* input fields */
261
#wizard ul {
262
        padding:0px !important;
263
}
264

    
265
#wizard li {
266
        list-style-type:none;
267
        list-style-image:none;
268
        margin-bottom:1.2em;
269
}
270

    
271
#wizard label {
272
        font-size:16px;        
273
        display:block;
274
    clear: both;
275
}
276

    
277
#wizard label strong {
278
        color:#789;        
279
        position:relative;
280
        top:-1px;
281
}
282

    
283
#wizard label em {
284
        font-size:11px;
285
        color:#666;        
286
        font-style:normal;
287
}
288

    
289
#wizard .text {
290
        width:94%;
291
        padding:5px;
292
        border:1px solid #ccc;
293
        color:#456;
294
        letter-spacing:1px;
295
}
296

    
297
#wizard select {
298
        border:1px solid #ccc;
299
        width:94%;        
300
        padding:4px;
301
    display: none;
302
}
303

    
304
#wizard label span {
305
        color:#b8128f;
306
        font-weight:bold;
307
        position:relative;
308
        top:4px;
309
        font-size:20px;
310
}
311

    
312
#wizard .double label { 
313
        width:50%;
314
        float:left;
315
}
316

    
317
#wizard .double .text {
318
        width:93%;        
319
}
320

    
321
#wizard .clearfix {
322
        clear:left;
323
        padding-top:10px;        
324
}
325

    
326
#wizard .right {
327
        float:right;                
328
}
329

    
330
#wizard .error {
331
        border:1px solid red;                
332
}
333

    
334
#wizard a:hover div.image {
335
    background-color: #999;
336
}
337
#wizard a:hover div.image img {
338
    background-color: #999;
339
}
340

    
341
#wizard label a:hover strong {
342
    color: white;
343
}
344

    
345
#wizard div.image strong {
346
    font-size: 1em;
347
}
348

    
349
#wizard div.image span.size {
350
    font-size: 0.8em;
351
    color: #666;
352
}
353

    
354
#wizard div.image .radio {
355
    float: right;
356
}
357

    
358
#wizard div.image span.image-id, #wizard div.image span.description {
359
    font-size: 0.8em;
360
    color: #666;
361
    font-weight: normal;
362
    display:inline;
363
}
364

    
365
#wizard a:hover div.image span.image-id, #wizard a:hover div.image span.description, #wizard a:hover div.image span.size {
366
    color: white;
367
}
368

    
369
#wizard .cost {
370
    color: #666;
371
    margin-top: 5em;
372
    font-size: .8em;
373
}
374

    
375
#wizard #status {
376
        margin: 0px !important;
377
        height: 35px;
378
        background: #999;
379
        padding-left: 25px !important;
380
}
381

    
382
.page ul {
383
    height: 280px;
384
    overflow: auto;
385
    margin-bottom: 2em;
386
}
387

    
388
.page ul.tabs {
389
    overflow: hidden;
390
}
391

    
392
.panes ul.pane {
393
    height: 268px;
394
}
395

    
396
.page ul.tabs {
397
    height: auto;
398
    margin-bottom: 0em;
399
    margin-top: -1.37em;
400
}
401

    
402
.page ul.tabs li {
403
    float: right;
404
    margin: 0 1em;
405
}
406

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

    
415
#status li.active {
416
        background-color: #87AADE;
417
    font-weight: bold;
418
    color: white;
419
}
420

    
421
/* slider root element */
422
.slider {
423
    -moz-border-radius: 5px 5px 5px 5px;
424
    background-color: #87AADE;
425
    border: 1px solid #666;
426
    clear: right;
427
    cursor: pointer;
428
    display: block !important;
429
    float: left;
430
    height: 3px;
431
    margin-top: 10px;
432
    margin-bottom: 2em;
433
    padding: 0.1em !important;
434
    position: relative;
435
    width: 330px;
436
}
437

    
438
/* drag handle */
439
.handle {
440
    -moz-border-radius: 14px 14px 14px 14px;
441
    -moz-box-shadow: 0 0 2px #000000;
442
    background: url("../static/h30.png") repeat-x scroll 0 0 #FFFFFF;
443
    border: 1px solid #000000;
444
    cursor: move;
445
    display: block;
446
    height: 22px;
447
    margin-top: -11px;
448
    position: absolute;
449
    width: 10px;
450
}
451

    
452
/* progress bar (enabled with progress: true) */
453
.progress {
454
        height:9px; 
455
        background-color:#C5FF00; 
456
        display:none;
457
        opacity:0.6;
458
}
459

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

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

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

    
490
.instance a:hover {
491
    color: #162d50;
492
}
493

    
494
.state {
495
    float: right;
496
    width: 15%;
497
    margin-top: .4em;
498
}
499

    
500

    
501
.actions {
502
    float: right;
503
    width: 20%;
504
    margin: -1.5em -10em 0 0;
505
    font-weight: normal;
506
    padding-left: 2em;
507
    height: 70px;
508
}
509

    
510
.actions a {
511
    color: transparent;
512
}
513

    
514
a.action{
515
    margin: .5em;
516
    display: block;
517
}
518

    
519
a.more {
520
    margin: 4.1em 0.5em 0.5em;
521
    display: block;
522
}
523

    
524
a.action:hover, a.more:hover {
525
    color: black !important;
526
}
527

    
528

    
529
.actions:hover a,.instance:hover .actions a {
530
    color: #666;
531
}
532

    
533
.instance:hover {
534
    border: 1px dotted transparent;
535
    background-color:#c6c6c6;
536
    color: black;
537
}
538

    
539
.instance img {
540
    float: left;
541
    margin: 0em 2em 0 1em;
542
}
543

    
544
div.ip, div.state {
545
    font-size:.7em;
546
    color: #6892D2;
547
}
548

    
549
div.indicator {
550
    width:1em;
551
    height:.6em;
552
    margin: .3em -.1em .5em;
553
    clear: none;
554
    float:left;
555
}
556

    
557
.running .indicator {
558
    border:2px solid white;
559
    background-color: #86a9dd;
560
}    
561

    
562

    
563
.instance:hover div.uptime, .instance:hover a.rename, .instance:hover a.configure {
564
    color: #6892D2;
565
}
566

    
567
div.uptime {
568
    clear: both;
569
    color: transparent;
570
    margin-left: 1px;
571
}
572

    
573
div.instance-tabs {
574
    margin-top: 1em;
575
}
576
div.instance-tabs a{
577

    
578
}
579

    
580
span.rename, span.configure {
581
    background-repeat: no-repeat;
582
    color: transparent;
583
    font-size: 11px;
584
    font-weight: normal;
585
    margin-left: 2em;
586
    padding-left: 2em;
587
    text-align: left;
588
}
589

    
590
a.name:hover span.rename {
591
    color: #213D55;
592
    margin-top: 0.4em;
593
    background-image: url(/static/pencil.png);
594
}
595

    
596
a.ip:hover span.configure {
597
    color: #213D55;
598
    background-image: url(/static/pencil.png);
599
}
600

    
601
a.storage:hover span.configure {
602
    color: #213D55;
603
    background-image: url(/static/pencil.png);
604
}
605

    
606
#ubuntu {
607
    height:50px;
608
    background: url(../static/ubuntu-logo.png) no-repeat 0 0;
609
    padding-left: 50px;
610
}
611

    
612
button {
613
    -moz-border-radius: 10.2em 10.2em 10.2em 10.2em;
614
    background-color: #87AADE;
615
    border-bottom: 0.2em solid #999;
616
    border-width: 1px 1px 0.2em;
617
    color: #FFFFFF;
618
    cursor: pointer;
619
    font-size: 1em;
620
    line-height: 1;
621
    padding: 0.7em 2em;
622

    
623
}
624

    
625
button.next {
626
    background-color: #f49000;
627
    font-weight: bold;
628
}
629

    
630
button.prev {
631

    
632
}
633

    
634
.image-logo {
635
    float: left;
636
    margin-right: 1em;
637
}
638

    
639
div.image {
640
    padding: 1em;
641
    clear: both;
642
    display: block;
643
}
644

    
645
a#list, a#standard {
646
    float: right;
647
    clear: both;
648
    color: #666;
649
    text-decoration: none;
650
    margin-top: -2em;
651
    margin-right: 5em;
652
    font-size: 0.8em
653
}
654

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

    
662
div.active {
663
    border-bottom: 1em solid #87AADE;
664
    height: 200px;
665
}
666

    
667
div.active, div.stopped {
668
    margin-left: -2.2em;
669
    width: 70%;
670
    padding: 1em;
671
    margin-top: 1em;
672
}
673

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

    
679
div.list label {
680
    color: #87AADE;
681
    font-size:.8em;
682
}
683

    
684
div.list div.running {
685
    margin: .5em 0;
686
}
687

    
688
/* root element for tabs  */
689
#wizard ul.tabs { 
690
    margin-top: -2em;
691
    margin-left: 21em;                          
692
}
693

    
694
/* single tab */
695
#wizard ul.tabs li {  
696
    margin-bottom: 0; 
697
        list-style-type:none;
698
    float: left;        
699
}
700

    
701
/* link inside the tab. uses a background image */
702
#wizard ul.tabs a { 
703
        display:block;
704
        padding: 0.5em;        
705
        text-decoration:none;
706
        color: #999;
707
        position:relative;
708
        top:1px;
709
        outline:0;
710
}
711

    
712
#wizard ul.tabs a:hover {
713
        color: black;
714
    background-color:#F7F7F7;
715
}
716
        
717
/* selected tab */
718
#wizard ul.tabs a.current {
719
        color: white;
720
    background-color: #87AADE;        
721
        cursor: default;
722
}
723

    
724
div.inactive div.state {
725
    margin-right: 2.5em;
726
}
727

    
728
div.inactive {
729
    opacity: .6;
730
}
731

    
732
div.list div.actions {
733
    clear: left;
734
    float: right;
735
    margin-right: 4em;
736
    margin-top: 1em;
737
    text-align: right;
738
}
739

    
740
div.list div.actions a {
741
    clear: left;
742
    color: #666 !important;
743
    display: block;
744
    font-size: .8em;
745
}
746

    
747
input.instance {
748
    width: 13px;
749
    height: 13px;
750
    padding: 0;
751
    margin:0;
752
    vertical-align: bottom;
753
    position: relative;
754
    top: -1px;
755
    *overflow: hidden;
756
}
757

    
758
#misc {
759
    height: 100px;
760
    -moz-border-radius: 5px 5px 5px 5px;
761
    border: 5px solid #87AADE;
762
    margin: 0 auto;
763
    overflow: hidden;
764
    position: relative;
765
}
766

    
767
#misc strong {
768
    color: #F49C1A;
769
}