Statistics
| Branch: | Tag: | Revision:

root / snf-cyclades-app / synnefo / ui / new_ui / ui / sass / _overlays.scss @ 353b022b

History | View | Annotate | Download (22.1 kB)

1
/*
2

    
3
Overlays (Todo: clean up)
4

    
5
*/
6
body.with-overlay {
7
	background:$overlay-bg-color;
8
	.main {
9
		opacity:0;
10
	}
11
}
12

    
13

    
14
.overlay-wrapper {
15
	position: relative;
16
	left:0;
17
	top:0;
18
	.welcome {
19
		display:none;
20
		}
21
		&.no-vm {
22
			background:url(../images/draw-welcome.png) no-repeat center 50px $secondary-color;
23
			.welcome {
24
				display:none;
25
				color:#fff;
26
				text-align:center;
27
				position: relative;
28
				top:-15px;
29
				left:75px;
30
				display:block;
31
			}
32
		}
33

    
34
	.overlay-area-reveal {
35
		.reveal-modal {
36
			padding:65px 140px 40px;
37
		    h3 {
38
		        font-size:1em;
39
		    }
40
		    p {
41
				color: white;
42
				text-align: center;
43
				&.message-forimg {
44
					margin-top:132px;
45
					margin-bottom: 35px; // 20px from background icon
46
				}
47
				&.buttons {
48
					a:first-child {
49
						margin-right:25px;
50
					}
51
				}
52
			}
53
			&#start-confirm {
54
				background: $secondary-color url('../images/shutdown.png') no-repeat center 50px;	//55px from top
55
		    }
56
		    &#reboot-confirm {
57
				background: #ff7049 url('../images/restart.png') no-repeat center 50px;
58
				.btn4 {
59
				background-color: #ff7049;
60
				border-color: white;
61
				&:hover {
62
						color: #ff7049;
63
						background-color: white;
64
						border-color: #ff7049;
65
					}
66
				}
67
			}
68
			&#shutdown-confirm {
69
			background: #ff7049 url('../images/shutdown.png') no-repeat center 50px;	//55px from top
70
				.btn4 {
71
					background-color: #ff7049;
72
					border-color: white;
73
					&:hover {
74
						color: #ff7049;
75
						background-color: white;
76
						border-color: #ff7049;
77
					}
78
				}
79
			}
80
			&#destroy-vm-confirm {
81
			background: #d7145a url('../images/destroy-vm.png') no-repeat center 46px;	//55px from top
82
				.btn4 {
83
					background-color: #d7145a;
84
					border-color: white;
85
					&:hover {
86
						color: #d7145a;
87
						background-color: white;
88
						border-color: #d7145a;
89
					}
90
				}
91
			}
92
			&#destroy-network-confirm {
93
				background: #d7145a url('../images/destroy-network-1.png') no-repeat center 50px;	//55px from top
94
				.btn4 {
95
					background-color: #d7145a;
96
					border-color: white;
97
					&:hover {
98
						color: #d7145a;
99
						background-color: white;
100
						border-color: #d7145a;
101
					}
102
				}
103
			}
104
			&#destroy-disk-confirm {
105
				background: #d7145a url('../images/destroy-disk.png') no-repeat center 50px;	//55px from top
106
				.btn4 {
107
					background-color: #d7145a;
108
					border-color: white;
109
					&:hover {
110
						color: #d7145a;
111
						background-color: white;
112
						border-color: #d7145a;
113
					}
114
				}
115

    
116
			}
117
			&#vm-connect {
118
				p {
119
					text-align:left;
120
					color: black;
121
					&.info {
122
						font-style: italic;
123
						font-size: 0.8125em;
124
						color: #9e9ea1;
125
					}
126
					&.ssh {
127
						text-align: center;
128
						span {
129
							display: inline;
130
						}
131
					}
132
				}
133
				.close-reveal-modal {
134
					color: $link-color;
135
					&:hover {
136
						color: $link-color-hover;
137
					}
138
				}
139
			}
140

    
141
		}
142
	}
143

    
144
	.overlay-area-custom {
145
		display:none;
146
		position:absolute;
147
		left:0;
148
		right:0;
149
		top:-$bar-height;
150
		width:100%;
151
		height:100%;
152
		background:$overlay-bg-color;
153
		z-index:20;
154
		.overlay-div {
155
			display: none;
156
			z-index:50;
157
			position: relative;
158
			background:#fff;
159
			top:20%;
160
			left:25%;
161
			width:50%;
162
			padding:25px;
163
			.buttons {
164
				a {
165
					margin-right:20px;
166
				}
167
			}
168
			.close {
169
				float:right;
170
				font-size:30px;
171
			}
172
			&.upload-widget {
173
				background:transparent;
174
				padding:45px 0;
175
				width:80%;
176
				left:10%;
177
				border:1px solid white;
178
			}
179
			&.wizard {
180
				background:$overlay-bg-color;
181
				padding:0 ;
182
				width:100%;
183
				top:0;
184
				left:0;
185
				position: relative;
186
				color:white;
187
				.top {
188
					background:$overlay-color-top;
189
					height:$bar-menu-height + $bar-submenu-height;
190
					position:fixed;
191
					left:0;
192
					right:0;
193
					bottom:auto;
194
					top:$header-height;
195
					width:100%;
196
					z-index:40;
197
					.numbers {
198
						.row {
199
							max-width: 100%;
200
							padding:0 $header-padding-horizontal;
201
							.close {
202
								color:$primary-color;
203
								&:hover, &:focus {
204
									color:white;
205
								}
206
							}
207
						}
208
						height: $bar-menu-height;
209
						line-height: 50px;
210
						background:$overlay-darker-color;
211
					}
212
					.menus {
213
						height: $bar-submenu-height;
214
						.sub-menu {
215
							display: none;
216
							&[data-step="1"] {
217
								display: block;
218
							}
219
							ul {
220
								margin:0;
221
								padding:0;
222
								list-style: none outside none;
223
								font-size:emCalc(12px);
224
								li {
225
									display: inline;
226
									margin-right:10px;
227
									line-height: $bar-submenu-height;
228
									list-style: none outside none;
229
									a {
230
										color:$body-font-color;
231
										&:hover, &:focus, &.current {
232
											color:white;
233
										}
234
										&.current {
235
											text-decoration: underline;
236
										}
237
										&.disabled {
238
											color: $inactive-color;
239
											cursor: default;
240

    
241
										}
242
									}
243
								}
244
							}
245
						}
246
					}
247
					.nums {
248
						text-align: right;
249
						list-style:none outside none;
250
						margin:0;
251
						height: 50px;
252
						line-height: 50px;
253
						font-size:emCalc(9px);
254
						padding-right:120px;
255
						color:$secondary-color;
256
						li {
257
							list-style:none outside none;
258
							display: inline;
259
							p {
260
								display: none;
261
								position: relative;
262
								top: 1px;
263
								font-size:12px;
264
								margin-left:12px;
265
								strong {
266
									margin-right:5px;
267
								}
268
							}
269
							em {
270
								display: inline-block;
271
								border-radius:50%;
272
								border:1px solid $secondary-color;
273
								width:20px;
274
								height:20px;
275
								line-height: 18px;
276
								margin:0 3px;
277
								text-align: center;
278
								font-style: normal;
279
							}
280
							a {
281
								color:$secondary-color;
282
								display: block;
283
								&:hover {
284
									cursor: default;
285
								}
286
							}
287
							&.current{
288
								float: left;
289
								p {
290
									display: inline-block;
291
								}
292
								em {
293
									font-size:12px;
294
									width:30px;
295
									height:30px;
296
									line-height: 27px;
297
									border-color:$secondary-color;
298
									* {
299
										color:$secondary-color;
300
									}
301
								}
302
							}
303
						}
304
					}
305
				}
306
				.middle {
307
					padding-top:$bar-height+$bar-submenu-height;
308
					.steps {
309
						position:relative;
310
						width:100%;
311
					}
312
					.step {
313
						position: absolute;
314
						top:0;
315
						width:100%;
316
						display:none;
317
						&.current {
318
							display: block;
319
						}
320
						padding:50px 0 50px;
321
						&.step-2 {
322
							// padding-top:30px;
323
							.dropdown {
324
								margin-bottom:40px;
325
							}
326
						}
327
						&.step-3 {
328
							// padding-top: 45px;
329
						}
330
						.os {
331
							li {
332
								display: none;
333
								list-style: none outside none;
334
								font-size:emCalc(12px);
335
								@extend .clearfix;
336
								padding:15px 0;
337
								&:hover,
338
								&.hover {
339
									background:$overlay-darker-color;
340
								}
341
								&.current {
342
									background:white;
343
									color:$overlay-bg-color;
344
									.name-col {
345
										color:$overlay-bg-color;
346
									}
347
									.btn-col {
348
										a {
349
											border-color:$overlay-bg-color;
350
											color:$overlay-bg-color;
351
											&.current {
352
												color:white;
353
												background:$overlay-bg-color;
354
											}
355
										}
356
									}
357
								}
358
								&.system-images {
359
									display: list-item;
360
								}
361
								.img-col {
362
									float:left;
363
									width:50px;
364
									line-height: $btn-height;
365
								}
366
								.name-col {
367
									float: left;
368
									color: $wizard-base-font-color;
369
									width:71%;
370
									padding-right:10px;
371
									line-height: $btn-height;
372
								}
373
								.size-col {
374
									float:left;
375
									width:10%;
376
									line-height: $btn-height;
377
								}
378
								.btn-col {
379
									float:right;
380
									width:10%;
381
									margin-left:10px;
382
									a {
383
										@extend .btn5;
384

    
385
											font-size:1em;
386
										&.current {
387
											color:$overlay-bg-color;
388
										}
389
									}
390
								}
391
								.details {
392
									display: none;
393
									background:darken(white,10%);
394
									padding:22px 0;
395
									margin:20px 6px -9px;
396
									color: $body-font-color;
397
									h3 {
398
										font-size: 1em;
399
										font-weight: normal;
400
										margin-bottom:1em;
401
										padding-left:50px;
402
									}
403
									dl {
404
										margin:0;
405
										padding-left:50px;
406
										@extend .clearfix;
407
										dt {
408
											width: 20%;
409
											float:left;
410
											font-weight:normal;
411
										}
412
										dd {
413
											margin:0 0 5px;
414
										}
415
									}
416
								}
417
							}
418
						}
419
						.flavor {
420
							list-style: none outside none;
421
							li {
422
								list-style:none outside none;
423
								margin-bottom:30px;
424
								.title {
425
									@extend .clearfix;
426
									height:40px;
427
									overflow:hidden;
428
									margin-bottom:emCalc(8px);
429
									color:white;
430
									vertical-align: top;
431
									.icon {
432
										display: block;
433
										width:60px;
434
										font-size:38px;
435
										float: left;
436
									}
437
									h2 {
438
										font-size:emCalc(14px);
439
										span {
440
											font-weight:normal;
441
										}
442
										float:left;
443
										width: 140px;
444
										color:white;
445
										margin-right:60px;
446
										padding-left:emCalc(10px);
447
										em {
448
											display: block;
449
											margin-top:4px;
450
											font-size:11px;
451
											font-style:normal;
452
											font-weight:normal;
453
											white-space: nowrap;
454
										}
455
									}
456
									p {
457
										visibility: hidden;
458
										overflow:hidden;
459
										min-height:40px;
460
										font-size:11px;
461
									}
462
								}
463
								.options-bar {
464
									@extend .clearfix;
465
									.bar {
466
										width:200px;
467
										float:left;
468
										margin-right:60px;
469
										height: 20px;
470
										position: relative;
471
										top:10px;
472
										.wrap {
473
											border:1px solid white;
474
											padding:1px;
475
											height: 100%;
476
											&.disabled-progress-bar {
477
												border-color: $disabled-resource-color;
478
												.container{
479
													.total {
480
														background-color: $disabled-resource-color;
481
													}
482
												}
483
											}
484
											.container {
485
												height: 100%;
486
												.total {
487
													background:$primary-color;
488
													height: 100%;
489
													float:left;
490
													position: relative;
491
													.current {
492
														background:white;
493
														height: 100%;
494
														float:left;
495
													}
496
													span {
497
														position:absolute;
498
														right:10px;
499
														font-size: emCalc(9px);
500
														top:2px;
501
													}
502
													&.low {
503
														span {
504
															right:-30px;
505
															color:white;
506
														}
507
													}
508
												}
509
											}
510

    
511
										}
512
									}
513
									.options {
514
										overflow:hidden;
515
										list-style: none outside none;
516
										li {
517
											list-style: none outside none;
518
											display: inline-block;
519
											margin-right: 10px;
520
											margin-bottom:0;
521
											a {
522
												@extend .btn5;
523
												min-width: 60px;
524
												&.current {
525
													color:$overlay-bg-color;
526
												}
527
												&.disabled {
528
													border-color: $disabled-resource-color;
529
													color: $disabled-resource-color;
530
													&:hover, &:active {
531
														cursor: default;
532
														border-width: 1px;
533
														line-height: 28px;
534

    
535
													}
536
												}
537
											}
538
										}
539
									}
540
								}
541
							}
542
						}
543
						.summary {
544
							padding-bottom:40px;
545
							.row {
546
								.wrap {
547
									max-width: $row-small;
548
									border-top:1px solid white;
549
									padding-top:1em;
550
									// margin-top:1em;
551
								}
552
								&:first-child {
553
									.wrap {
554
										border-top:0 none;
555
										margin-top:0;
556
									}
557
									dl {
558
										dt {
559
											font-weight: bold;
560
										}
561
									}
562
								}
563
							}
564
							h2 {
565
								font-size:1em;
566
								color:white;
567
								margin-bottom:1em;
568
							}
569
							dl {
570
								margin-bottom:0;
571
								span {
572
									width:40px;
573
									display: inline-block;
574
									font-size:20px;
575
								}
576
								dt {
577
									display: inline-block;
578
									width: 42%;
579
									vertical-align: top;
580
									font-weight:600;
581
								}
582
								dd {
583
									display: inline-block;
584
									width:45%;
585
									margin-bottom:1em;
586
								}
587
							}
588
						}
589
						.advanced-conf-step {
590
							color: $wizard-base-font-color;
591
							h2 {
592
								color: $wizard-base-font-color;
593
								font-size: 1em;
594
								margin-bottom: 10px;
595
								line-height: 1;
596
							}
597
							p {
598
								font-size: $wizard-paragraph-font-size;
599
							}
600
			                .snf-checkbox-checked, .snf-checkbox-unchecked {
601
			                    color: $wizard-base-font-color;
602
			                }
603
			                .expand-btn {
604
			                    margin: 50px 0 $step-adv-padding;
605
			                    a {
606
			                        color:$wizard-base-font-color;
607
			                        span {
608
										padding-left:24px;
609
			                        }
610
			                      }
611
			                }
612
			                .adv-main {
613
			                    .vm-name {
614
			                        h2 {
615
			                            color:white;
616
			                            font-size:1em;
617
			                            margin-bottom:0.5em;
618
			                        }
619
			                    }
620
			                }
621
			                .btn5 {
622
			                    &:hover {
623
			                        color:white;
624
			                }
625
			                    &.current, &.current:hover {
626
			                        color:$overlay-bg-color;
627
			                    }
628
			                }
629
			                .advanced-conf-options {
630
			                    display: none;
631
			                    .check {
632
									font-size: 20px;
633
			                    }
634
			                    .area {
635
			                        padding:$step-adv-padding 0;
636
			                        .row {
637
				                        p{
638
											max-width:340px;
639
											margin-bottom: 20px;
640
				                        }
641
			                        }
642
			                        ul {
643
			                            li {
644
			                                position: relative;
645
			                                list-style:none outside none;
646
			                                margin-bottom:7px;
647
			                                &.checkbox {
648
			                                    &:hover {
649
			                                        cursor: pointer;
650
			                                    }
651
			                                }
652
			                                h3 {
653
			                                    width: $conf-area-h-width;
654
			                                    color:white;
655
			                                    font-size:1em;
656
			                                    font-weight: normal;
657
			                                    margin:0 28px 0 0;
658
			                                    display: inline-block;
659
			                                    //&.net-name { width: 9.063em }
660
			                                }
661
			                            }
662
			                        }
663
			                    }
664
			                    .ssh-keys-area {
665
			                        background-color: $ssh-opt-area-color;
666
			                        .btn5 {
667
										margin-top: 3px;
668
			                        }
669

    
670
			                    }
671
			                    .networks-area {
672
			                        background-color: $net-opt-area-color;
673
			                        ul {
674
										position: relative;
675
										margin-bottom:0;
676
			                        }
677
			                        li {
678
			                            .net-icons {
679
			                                padding-right:30px;
680
			                                display: inline-block;
681
			                                width:145px;
682
			                                text-align: right;
683
			                                font-size:30px;
684
			                                margin-bottom: 0;
685
			                                position: relative;
686
			                                span {
687
												position: relative;
688
												&.snf-modem {
689
													top:-1px;
690
			                                    }
691
			                                    &.snf-www {
692
			                                        top:6px;
693
			                                    }
694
			                                    &.snf-network_full {
695
			                                        top:5px;
696
			                                    }
697
			                                    &.temp-line {
698
													position: absolute;
699
													height:1px;
700
													width:13px;
701
													background:white;
702
													bottom:15px;
703
													&.line1 { right:56px; }
704
													&.line2 {
705
														right:97px;
706
														width:10px;
707
													}
708
												}
709
											}
710
										}
711
			                            &.more {
712
			                                background:$net-more-opt-area-color;
713
			                                margin:$step-adv-padding 6px;
714
			                                padding:$step-adv-padding 0;
715
			                                color:#fff;
716
			                                h3 {
717
			                                    color:#fff;
718
			                                    padding-left: 145px;
719
			                                    &:hover {
720
													cursor: pointer;
721
			                                    }
722
			                                }
723
			                                .btn5 {
724
			                                    margin-top:20px;
725
			                                    border-color:#fff;
726
			                                    color:#fff;
727
			                                    margin-left:145px;
728
			                                }
729
			                                .with-checkbox {
730
			                                    a {
731
			                                        span {
732
			                                            color: #fff;
733
			                                        }
734
			                                    }
735
			                                }
736
			                            }
737
			                        }
738

    
739
			                    }
740
			                    .tags-area {
741
			                        background-color: $tag-opt-area-color;
742
			                        .snf-color-picker {
743
			                            display: none;
744
			                        }
745
			                        #picker {
746
			                            position: relative;
747
			                            width: 207px;
748
			                            margin: 30px 5px;
749
			                            display: inline-block;
750
			                        }
751
			                        .btns {
752
			                            margin-top: 77px;
753
			                            margin-bottom: 30px;
754
			                        }
755
			                        .btn5 {
756
			                            margin-right:20px;
757
			                        }
758
			                        .tag-demo {
759
										left:10px;
760
			                        }
761
			                        h3 {
762
			                            width: $conf-area-h-width;
763
			                            color:white;
764
			                            font-size:1em;
765
			                            font-weight: normal;
766
			                            margin:0 28px 0 0;
767
			                            display: inline-block;
768
			                            //&.net-name { width: 9.063em }
769
			                           }
770
			                        .list-header {
771
										position: relative;
772
										left: -14px;
773
										h3 {
774
											margin-right: 35px;
775
										}
776
									}
777
			                    }
778
			                }
779
			            }
780
			        }
781
			    }
782
			    .bottom {
783
			        position: fixed;
784
			        left:0;
785
			        right:0;
786
			        bottom:0;
787
			        border-top:1px solid $overlay-color-top;
788
			        background:$overlay-bg-color;
789
			        .row {
790
			            height: $bar-submenu-height;
791
			            line-height: $bar-submenu-height;
792
			        }
793
			        .nav {
794
			            height: $bar-submenu-height;
795
			            line-height: $bar-submenu-height;
796
			            color:white;
797
			            display: inline-block;
798
			            position: relative;
799
			            font-size: emCalc(12px);
800
			            top:($bar-submenu-height - 30px)/2;
801
			            width: 100px;
802
			            &:hover,
803
			            &:focus {
804
			                @include transition(background, 0ms, ease-out);
805
			            }
806
			            span {
807
			                display: inline-block;
808
			                height: 30px;
809
			                line-height:30px;
810
			                float: left;
811
			                &:hover,
812
			                &:focus {
813
			                    @include transition(background, 0ms, linear);
814
			                }
815
			            }
816
			        }
817
			        .prev {
818
			            float:left;
819
			            height:30px;
820
			            padding-left:18px;
821
			            background:url('../images/nav-edge-lt.png') no-repeat left top;
822
			            span {
823
			                padding-right:10px;
824
			                background:url('../images/nav-lt.png') no-repeat right top;
825
			            }
826
			            &:hover,
827
			            &.active,
828
			            &:focus {
829
			                background-position:left bottom;
830
			                span {
831
			                    background-position:right bottom;
832
			                }
833
			            }
834
			        }
835
			        .next {
836
			            float:right;
837
			            height:30px;
838
			            padding-right:18px;
839
			            background:url('../images/nav-edge-rt.png') no-repeat right top;
840
			            span {
841
			                padding-left:10px;
842
			                background:url('../images/nav-rt.png') no-repeat left top;
843
			                float: right;
844
			            }
845
			            &:hover,
846
			            &.active,
847
			            &:focus {
848
			                background-position:right bottom;
849
			                span {
850
			                    background-position:left bottom;
851
			                    float:right;
852
			                }
853
			            }
854
			        }
855
			    }
856
		} // end of .wizard
857
	} // end of .overlay-div
858
}
859

    
860
}
861

    
862

    
863
/* Responive ------------------------------------------------ */
864
@media only screen and (max-width: $small-mobile) {
865
}
866

    
867
@media only screen and (max-width: $small-screen) {
868
    .wizard {
869
        .top {
870
            position: static;
871
        }
872
        .middle {
873
            padding-top:0;
874
        }
875
    }
876
    .overlay-wrapper {
877
        .overlay-area {
878
            top:0;
879
        }
880
    }
881
}