Statistics
| Branch: | Tag: | Revision:

root / snf-cyclades-app / synnefo / ui / new_ui / ui / sass / _overlays.scss @ 77d5883f

History | View | Annotate | Download (22.6 kB)

1
/*
2

    
3
Overlays (Todo: clean up)
4

    
5
*/
6
body.with-overlay {
7
	background:$overlay-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
		    h3 {
37
		        font-size:1em;
38
		    }
39
		    p {
40
				color: white;
41
				text-align: center;
42
				&.message-forimg {
43
					margin-top:152px;
44
					margin-bottom: 35px; // 20px from background icon
45
				}
46
				&.buttons {
47
					a:first-child {
48
						margin-right:16px;
49
					}
50
				}
51
			}
52
			a {
53
		        &.close-reveal-modal {
54
			        color: white;
55
		            font-size: 18px;
56
		            top: 42px;
57
		            right: 42px;
58
		        }
59
		        &.close-reveal-modal:hover {
60
		            text-decoration: none;
61
		            // color:$secondary-color;
62
		        }
63
		    }
64
		    &#start-confirm {
65
				background: $secondary-color url('../images/shutdown.png') no-repeat center 50px;	//55px from top
66
		    }
67
		    &#reboot-confirm {
68
				background: #ff7049 url('../images/restart.png') no-repeat center 46px;
69
				.btn4 {
70
				background-color: #ff7049;
71
				border-color: white;
72
				&:hover {
73
						color: #ff7049;
74
						background-color: white;
75
						border-color: #ff7049;
76
					}
77
				}
78
			}
79
			&#shutdown-confirm {
80
			background: #ff7049 url('../images/shutdown.png') no-repeat center 50px;	//55px from top
81
				.btn4 {
82
					background-color: #ff7049;
83
					border-color: white;
84
					&:hover {
85
						color: #ff7049;
86
						background-color: white;
87
						border-color: #ff7049;
88
					}
89
				}
90
			}
91
			&#destroy-vm-confirm {
92
			background: #d7145a url('../images/destroy-vm.png') no-repeat center 46px;	//55px from top
93
				.btn4 {
94
					background-color: #d7145a;
95
					border-color: white;
96
					&:hover {
97
						color: #d7145a;
98
						background-color: white;
99
						border-color: #d7145a;
100
					}
101
				}
102
			}
103
			&#destroy-network-confirm {
104
				background: #d7145a url('../images/destroy-network-1.png') no-repeat center 50px;	//55px from top
105
				.btn4 {
106
					background-color: #d7145a;
107
					border-color: white;
108
					&:hover {
109
						color: #d7145a;
110
						background-color: white;
111
						border-color: #d7145a;
112
					}
113
				}
114
			}
115
			&#destroy-disk-confirm {
116
				background: #d7145a url('../images/destroy-disk.png') no-repeat center 50px;	//55px from top
117
				.btn4 {
118
					background-color: #d7145a;
119
					border-color: white;
120
					&:hover {
121
						color: #d7145a;
122
						background-color: white;
123
						border-color: #d7145a;
124
					}
125
				}
126

    
127
			}
128
			&#vm-connect {
129
				p {
130
					color: black;
131
					&.info {
132
						font-style: italic;
133
						font-size: 0.8125em;
134
						color: #9e9ea1;
135
					}
136
				}
137
				a {
138
		        color: $secondary-color;
139
		        &:hover {
140
		            text-decoration: underline;
141
		        }
142
		        &.close-reveal-modal:hover {
143
		            text-decoration: none;
144
		            color:$secondary-color;
145
		        }
146
		    }
147
			}
148

    
149
		}
150
	}
151

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

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

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

    
530
										}
531
									}
532
									.options {
533
										overflow:hidden;
534
										list-style: none outside none;
535
										li {
536
											list-style: none outside none;
537
											display: inline-block;
538
											margin-right: 10px;
539
											margin-bottom:0;
540
											a {
541
												@extend .btn5;
542
												min-width: 60px;
543
												&.current {
544
													color:$overlay-color;
545
												}
546
												&.disabled {
547
													border-color: $disabled-resource-color;
548
													color: $disabled-resource-color;
549
													&:hover, &:active {
550
														cursor: default;
551
														border-width: 1px;
552
														line-height: 28px;
553

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

    
689
			                    }
690
			                    .networks-area {
691
			                        background-color: $net-opt-area-color;
692
			                        ul {
693
										position: relative;
694
										margin-bottom:0;
695
			                        }
696
			                        li {
697
			                            .net-icons {
698
			                                padding-right:30px;
699
			                                display: inline-block;
700
			                                width:145px;
701
			                                text-align: right;
702
			                                font-size:30px;
703
			                                margin-bottom: 0;
704
			                                position: relative;
705
			                                span {
706
												position: relative;
707
												&.snf-modem {
708
													top:-1px;
709
			                                    }
710
			                                    &.snf-www {
711
			                                        top:6px;
712
			                                    }
713
			                                    &.snf-network_full {
714
			                                        top:5px;
715
			                                    }
716
			                                    &.temp-line {
717
													position: absolute;
718
													height:1px;
719
													width:13px;
720
													background:white;
721
													bottom:15px;
722
													&.line1 { right:56px; }
723
													&.line2 {
724
														right:97px;
725
														width:10px;
726
													}
727
												}
728
											}
729
										}
730
			                            &.more {
731
			                                background:$net-more-opt-area-color;
732
			                                margin:$step-adv-padding 0;
733
			                                padding:$step-adv-padding 0;
734
			                                color:$net-opt-area-color;
735
			                                h3 {
736
			                                    color:$net-opt-area-color;
737
			                                    padding-left: 145px;
738
			                                    &:hover {
739
													cursor: pointer;
740
			                                    }
741
			                                }
742
			                                .btn5 {
743
			                                    margin-top:20px;
744
			                                    border-color:$net-opt-area-color;
745
			                                    color:$net-opt-area-color;
746
			                                    margin-left:145px;
747
			                                }
748
			                                .with-checkbox {
749
			                                    a {
750
			                                        span {
751
			                                            color: $net-opt-area-color;
752
			                                        }
753
			                                    }
754
			                                }
755
			                            }
756
			                        }
757

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

    
879
}
880

    
881

    
882
/* Responive ------------------------------------------------ */
883
@media only screen and (max-width: $small-mobile) {
884
}
885

    
886
@media only screen and (max-width: $small-screen) {
887
    .wizard {
888
        .top {
889
            position: static;
890
        }
891
        .middle {
892
            padding-top:0;
893
        }
894
    }
895
    .overlay-wrapper {
896
        .overlay-area {
897
            top:0;
898
        }
899
    }
900
}