Statistics
| Branch: | Tag: | Revision:

root / ui.pyramid / src / synnefo / static / main.css @ d12e4bad

History | View | Annotate | Download (12.4 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
    margin-top: 1em;
143
    width: 8em;
144
    font-weight: bold;
145
    text-decoration: none;
146
}
147

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

    
154
div#header {
155
    height:152px;
156
}
157

    
158
div#wrapper {
159
    width: 990px;
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: .9em 5em;
188
    font-size:.7em;
189
    float: right;
190
    width: 63%;
191
}    
192

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

    
203
}
204

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    
492
.instance a:hover {
493
    color: black;
494
}
495

    
496
.state {
497
    float: right;
498
    width: 15%;
499
}
500

    
501
.actions {
502
    float: right;
503
    width: 15%;
504
    margin: -1.5em -9em 0 0;
505
    height: 70px;
506
}
507

    
508
.actions a {
509
    color: transparent;
510
}
511

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

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

    
521
.actions:hover a,.instance:hover .actions a {
522
    color: #666;
523
}
524

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

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

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

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

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

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

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

    
565
div.instance-tabs {
566
    margin-top: 1em;
567
}
568

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

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

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

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

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

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

    
612
}
613

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

    
619
button.prev {
620

    
621
}
622

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

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

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

    
640
.panes ul.pane {
641
    height: 268px;
642
}
643

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

    
650
.page ul.tabs li {
651
    float: right;
652
    margin: 0 1em;
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 #2C597E;
664
    height: 200px;
665
}
666

    
667
div.active, div.stopped {
668
    margin-left: -1em;
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: #666;
681
    font-size: 0.8em;
682
}
683

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

    
688
#wizard strong.sliders {
689
    color: #ADA9A5;
690
}
691

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

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

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

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

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

    
738
div.inactive div.state {
739
    margin-right: 2.5em;
740
}
741

    
742
div.inactive {
743
    opacity: .6;
744
}
745

    
746
div.list div.actions {
747
    clear: left;
748
    float: right;
749
    margin-right: 4em;
750
    margin-top: 1em;
751
    text-align: right;
752
}
753

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

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

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

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