Statistics
| Branch: | Tag: | Revision:

root / ui / src / synnefo / static / main.css @ 5ce739d1

History | View | Annotate | Download (11.5 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
:focus {
44
  -moz-outline-style:none;
45
}
46

    
47
/* root element for tabs  */
48
ul.css-tabs {  
49
        margin:-.5em 2em 0 1em !important; 
50
        padding:0;
51
        height:2.2em;
52
}
53

    
54
/* single tab */
55
ul.css-tabs li {  
56
        float:left;         
57
        padding:0; 
58
        margin:-3px 1em 0 0;  
59
        list-style-type:none;        
60
}
61

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

    
79
ul.css-tabs a:hover {
80
    color: #3baddb;
81
}
82
        
83
/* selected tab */
84
ul.css-tabs a.current {
85
        background-color:#f7f7f7;
86
        border-bottom:2px solid #f7f7f7;        
87
    color: #000;
88
        cursor:default;
89
}
90

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

    
103

    
104

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

    
114
/* validation error message */
115
.error {
116
        background-color:#E8FF6D;
117
        padding:4px;
118
        -webkit-box-shadow: #000 0 0 12px;
119
        -moz-box-shadow: #000 0 0 12px;
120
}
121

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

    
134
/* input field that caused validation error */
135
.invalid {
136
        background-color:rgba(221, 233, 255, 0.898) !important;
137
}
138

    
139
#create {
140
    -moz-border-radius: .5em;
141
    background-color: #f49c1a;
142
    border: 2px solid #F7F7F7;
143
    color: #f4f4f4;
144
    cursor:pointer;
145
    display:block;
146
    padding: .7em 1.5em;
147
    margin-top: 1em;
148
    width: 7em;
149
    font-weight: bold;
150
    text-decoration: none;
151
}
152

    
153
#create:hover {
154
    background-color:#f29400;
155
    color: white;
156
    border: 2px solid #f29400;
157
}
158

    
159
div#header {
160
    height:152px;
161
}
162

    
163
div#wrapper {
164
    width: 990px;
165
    margin: 0 auto;
166
}
167

    
168
a.logo {
169
    width: 250px; 
170
}
171

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

    
183
a.logo:hover h1 {
184
    color: #3baddb;
185
}
186
a img {
187
    border: none;
188
}
189

    
190
div#about {
191
    color: white;
192
    padding: .9em 5em;
193
    font-size:.7em;
194
    float: right;
195
    width: 63%;
196
}    
197

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

    
208
}
209

    
210
.modal {
211
    background-color:#fff;
212
    display:none;
213
    width:30em;
214
    height:30em;
215
    padding:1em;
216
    text-align:left;
217
    opacity:0.9;
218
}
219
        
220
/* the root element for scrollable */
221
#wizard {
222
        overflow:hidden;
223
        position:relative;
224
}
225

    
226
/* scrollable items */
227
#wizard .items {
228
        width:20000em;
229
        clear:both;
230
        position:absolute;
231
}
232

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

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

    
247
/* scrollable root element */
248
#wizard {        
249
        background:#fff url(../static/h600.png) repeat scroll 0 0;
250
        border:5px solid #789;
251
        font-size:12px;
252
        height:480px;
253
        margin:0px auto;        
254
        width:500px;
255
        overflow:hidden;
256
        position:relative;
257
        
258
        /* rounded corners for modern browsers */
259
        -moz-border-radius:5px;
260
        -webkit-border-radius:5px;
261
}  
262

    
263
/* scrollable items */
264
#wizard .items {
265
        width:20000em;        
266
        clear:both;        
267
        position:absolute;        
268
    display:block;
269
    padding: 0;
270
    margin: 0;
271
    border:none;
272
    background:none;
273
}
274

    
275
/* single item */
276
#wizard .page {        
277
        padding:20px 30px;
278
        width:440px;
279
        float:left;        
280
    display:block;
281
    border:none;
282
    background-color: transparent;
283
}
284

    
285
/* title */
286
#wizard h2 {
287
        font-size:22px;
288
        font-weight:normal;
289
        margin:10px 0 0 0;
290
}
291

    
292
#wizard h2 em {
293
        display:block;
294
        font-size:14px;
295
        color:#666;
296
        font-style:normal;
297
        margin-top:5px;
298
}
299

    
300
/* input fields */
301
#wizard ul {
302
        padding:0px !important;
303
}
304

    
305
#wizard li {
306
        list-style-type:none;
307
        list-style-image:none;
308
        margin-bottom:1.2em;
309
}
310

    
311
#wizard label {
312
        font-size:16px;        
313
        display:block;
314
    clear: both;
315
}
316

    
317
#wizard label strong {
318
        color:#789;        
319
        position:relative;
320
        top:-1px;
321
}
322

    
323
#wizard label em {
324
        font-size:11px;
325
        color:#666;        
326
        font-style:normal;
327
}
328

    
329
#wizard .text {
330
        width:94%;
331
        padding:5px;
332
        border:1px solid #ccc;
333
        color:#456;
334
        letter-spacing:1px;
335
}
336

    
337
#wizard select {
338
        border:1px solid #ccc;
339
        width:94%;        
340
        padding:4px;
341
    display: none;
342
}
343

    
344
#wizard label span {
345
        color:#b8128f;
346
        font-weight:bold;
347
        position:relative;
348
        top:4px;
349
        font-size:20px;
350
}
351

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

    
357
#wizard .double .text {
358
        width:93%;        
359
}
360

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

    
366
#wizard .right {
367
        float:right;                
368
}
369

    
370
#wizard .error {
371
        border:1px solid red;                
372
}
373

    
374
#wizard #status {
375
        margin:0px !important;
376
        height:35px;
377
        background:#213d55 url(../static/h30.png) repeat-x;
378
        padding-left:25px !important;
379
        _background:#213d55;
380
}
381

    
382
#status li {
383
        list-style-type:none;
384
        list-style-image:none;
385
        float:left;
386
        color:#fff;
387
        padding:10px 30px;
388
}
389

    
390
#status li.active {
391
        background-color:#F49C1A;
392
        font-weight:normal;                
393
}
394

    
395
/* slider root element */
396
.slider { 
397
    display: block !important;
398
        background:#3C72E6 url(../static/h30.png) repeat-x 0 0; 
399
        height:9px; 
400
        position:relative; 
401
        cursor:pointer;
402
        border:1px solid #333;
403
        width:300px;
404
        float:left; 
405
        clear:right;
406
        margin-top:10px;
407
        -moz-border-radius:5px; 
408
        -webkit-border-radius:5px; 
409
        -moz-box-shadow:inset 0 0 8px #000;
410
    padding: .1em !important;
411
    margin-bottom: 2em;
412
}
413

    
414
/* progress bar (enabled with progress: true) */
415
.progress {
416
        height:9px; 
417
        background-color:#C5FF00; 
418
        display:none;
419
        opacity:0.6;
420
}
421

    
422
/* drag handle */
423
.handle { 
424
        background:#fff url(../static/h30.png) repeat-x 0 0; 
425
        height:10px;
426
        width:10px;
427
        position:absolute; 
428
        display:block; 
429
        margin-top:1px;
430
        border:1px solid #000;
431
        cursor:move;
432
        -moz-box-shadow:0 0 6px #000;
433
        -webkit-box-shadow:0 0 6px #000;
434
        -moz-border-radius:14px;
435
        -webkit-border-radius:14px; 
436

    
437
}
438

    
439
/* the input field */
440
.range {
441
        border:1px inset #ddd;
442
        float:left;
443
        font-size:16px;
444
        margin:0 0 0 15px;
445
        padding:3px 0;
446
        text-align:center;
447
        width:50px;
448
        -moz-border-radius:5px; 
449
        -webkit-border-radius:5px;                 
450
}
451

    
452

    
453
.instance {
454
    clear: both;
455
    margin: 1em 0;
456
    padding: 1em 2em 1em 1em;
457
    width: 70%;
458
    border: 1px dashed transparent;
459
    color: #666;
460
    height: 70px;
461
}
462

    
463
.instance a {
464
    color: #666;
465
    font-weight: normal;
466
    text-decoration: none;
467
    font-size: .8em;
468
}
469

    
470
.instance a:hover {
471
    color: black;
472
}
473

    
474
.state {
475
    float: right;
476
    width: 15%;
477
    margin-top: .4em;
478
    padding-bottom:2em;
479
}
480

    
481

    
482
.actions {
483
    float: right;
484
    width: 15%;
485
    margin: -1.5em -9em 0 0;
486
    height: 70px;
487
}
488

    
489
.actions a {
490
    color: transparent;
491
}
492

    
493
a.action, a.more {
494
    margin:.5em;
495
    display:block;
496
}
497

    
498
a.action:hover, a.more:hover {
499
    color: black !important;
500
}
501

    
502

    
503
.actions:hover a,.instance:hover .actions a {
504
    color: #666;
505
}
506

    
507
.instance:hover {
508
    border: 1px dotted transparent;
509
    background-color:#EBEBEB;
510
    color: black;
511
}
512

    
513
.instance img {
514
    float: left;
515
    margin: 0em 2em 0 1em;
516
}
517

    
518
div.ip, div.state {
519
    font-size:.7em;
520
}
521

    
522
div.indicator {
523
    width:1em;
524
    height:.6em;
525
    margin: .3em -.1em .5em;
526
    clear: none;
527
    float:left;
528
}
529

    
530
.running .indicator {
531
    border:2px solid white;
532
    background-color: #05b00d;
533
}    
534

    
535

    
536
.instance:hover div.uptime, .instance:hover a.rename, .instance:hover a.configure {
537
    color: #666;
538
}
539

    
540
div.uptime {
541
    clear: both;
542
    color:transparent;
543
    margin-left:1px;
544
}
545

    
546
div.instance-tabs {
547
    margin-top: 1em;
548
}
549
div.instance-tabs a{
550

    
551
}
552

    
553
span.rename, span.configure {
554
    background-repeat: no-repeat;
555
    font-size: 11px;
556
    color: transparent;
557
    font-weight: normal;
558
    margin-left: 2em;
559
    padding-left: 2em;
560
    text-align: left;
561
}
562

    
563
a.name:hover span.rename {
564
    color: #213D55;
565
    margin-top: 0.4em;
566
    background-image: url(/static/pencil.png);
567
}
568

    
569
a.ip:hover span.configure {
570
    color: #213D55;
571
    background-image: url(/static/pencil.png);
572
}
573

    
574
a.storage:hover span.configure {
575
    color: #213D55;
576
    background-image: url(/static/pencil.png);
577
}
578

    
579
#ubuntu {
580
    height:50px;
581
    background: url(../static/ubuntu.png) no-repeat 0 0;
582
    padding-left: 50px;
583
}
584

    
585
.slider {
586
    -moz-border-radius: 5px 5px 5px 5px;
587
    -moz-box-shadow: 0 0 8px #000000 inset;
588
    background: url("../static/h30.png") repeat-x scroll 0 0 #3C72E6;
589
    border: 1px solid #333333;
590
    clear: right;
591
    cursor: pointer;
592
    display: block !important;
593
    float: left;
594
    height: 3px;
595
    margin-top: 10px;
596
    padding: 0.1em !important;
597
    position: relative;
598
    width: 330px;
599
}
600

    
601
.handle {
602
    -moz-border-radius: 14px 14px 14px 14px;
603
    -moz-box-shadow: 0 0 2px #000000;
604
    background: url("../static/h30.png") repeat-x scroll 0 0 #FFFFFF;
605
    border: 1px solid #000000;
606
    cursor: move;
607
    display: block;
608
    height: 22px;
609
    margin-top: -11px;
610
    position: absolute;
611
    width: 10px;
612
}
613

    
614
button {
615
    -moz-border-radius: 10.2em 10.2em 10.2em 10.2em;
616
    background-color: #31446f;
617
    border-bottom: 0.2em solid #666666;
618
    border-width: 1px 1px 0.2em;
619
    color: #FFFFFF;
620
    cursor: pointer;
621
    font-size: 1em;
622
    line-height: 1;
623
    padding: 0.7em 2em;
624

    
625
}
626

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

    
632
button.prev {
633

    
634
}
635

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

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

    
647
#wizard a:hover div.image {
648
    background-color: #999;
649
}
650
#wizard a:hover div.image img {
651
    background-color: #999;
652
}
653

    
654
#wizard label a:hover strong {
655
    color: white;
656
}
657

    
658
#wizard div.image strong {
659
    font-size: 1em;
660
}
661

    
662
#wizard div.image span.size {
663
    font-size:.7em;
664
    color: #666;
665
}
666

    
667
#wizard div.image .radio {
668
    float: right;
669
}
670

    
671
#wizard div.image span.image-id, #wizard div.image span.description {
672
    font-size:.7em;
673
    color: #666;
674
    font-weight: normal;
675
    display:inline;
676
}
677

    
678
#wizard a:hover div.image span.image-id, #wizard a:hover div.image span.description, #wizard a:hover div.image span.size {
679
    color: white;
680
}
681

    
682
#wizard .cost {
683
    color: #666;
684
    margin-top: 4em;
685
}
686

    
687
.page ul {
688
    height: 280px;
689
    overflow: auto;
690
    margin-bottom: 2em;
691
}
692

    
693
.page ul.tabs {
694
    height: auto;
695
    margin-bottom: 0em;
696
}
697
.page ul.tabs li {
698
    float: right;
699
    margin: 0 1em;
700
}
701

    
702
div.instance-type {
703
    float: left;
704
    margin-right:1.9em;
705
    margin-bottom: 2em;
706
    margin-top: 1em;
707
}
708

    
709
div.instance-type img {
710
    float:left;
711
}
712

    
713
#wizard strong.sliders {
714
    color: #ADA9A5;
715
}
716

    
717
a#list, a#standard {
718
    float: left;
719
    clear: both;
720
    color: #666;
721
    text-decoration: none;
722
    margin-top: -4em;
723
    margin-left: 65em;
724
    font-size: 0.8em
725
}