Statistics
| Branch: | Tag: | Revision:

root / snf-cyclades-app / synnefo / ui / new_ui / ui / sass / _overlays.scss @ 75b6a8c9

History | View | Annotate | Download (3.3 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
.body-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
	.reveal-modal {
34
		padding:65px 140px 40px;
35
	    h3 {
36
	        font-size:1em;
37
	    }
38
	    p {
39
			color: white;
40
			text-align: center;
41
			&.message-forimg {
42
				margin-top:132px;
43
				margin-bottom: 35px; // 20px from background icon
44
			}
45
			&.buttons {
46
				a:first-child {
47
					margin-right:25px;
48
				}
49
			}
50
		}
51
		&#start-confirm {
52
			background: $secondary-color url('../images/shutdown.png') no-repeat center 50px;	//55px from top
53
	    }
54
	    &#reboot-confirm {
55
			background: #ff7049 url('../images/restart.png') no-repeat center 50px;
56
		}
57
		&#shutdown-confirm {
58
			background: #ff7049 url('../images/shutdown.png') no-repeat center 50px;	//55px from top
59
		}
60
		&#destroy-vm-confirm {
61
			background: #d7145a url('../images/destroy-vm.png') no-repeat center 46px;	//55px from top
62
		}
63
		&#destroy-network-confirm {
64
			background: #d7145a url('../images/destroy-network-1.png') no-repeat center 50px;	//55px from top
65
		}
66
		&#destroy-disk-confirm {
67
			background: #d7145a url('../images/destroy-disk.png') no-repeat center 50px;	//55px from top
68
		}
69
		&#vm-connect, &.remove {
70
			p {
71
				text-align:left;
72
				color: black;
73
				&.info {
74
					font-style: italic;
75
					font-size:emCalc(13px);
76
					color: #9e9ea1;
77
				}
78
				&.ssh {
79
					text-align: center;
80
					span {
81
						display: inline;
82
						padding: 10px 30px;
83
						background:$secondary-color;
84
						color:#fff;
85
					}
86
				}
87
				&.buttons {
88
					text-align: center;
89
				}
90
			}
91
			.close-reveal-modal {
92
				color: $link-color;
93
				&:hover {
94
					color: $link-color-hover;
95
				}
96
			}
97
		}
98
	}
99
	.overlay-area-custom {
100
		display:none;
101
		position:absolute;
102
		left:0;
103
		right:0;
104
		top:-$bar-height;
105
		width:100%;
106
		height:100%;
107
		background:$overlay-bg-color;
108
		z-index:20;
109
		.overlay-div {
110
			display: none;
111
			z-index:50;
112
			position: relative;
113
			background:#fff;
114
			top:20%;
115
			left:25%;
116
			width:50%;
117
			padding:25px;
118
			.buttons {
119
				a {
120
					margin-right:20px;
121
				}
122
			}
123
			.close {
124
				float:right;
125
				font-size:30px;
126
			}
127
			&.upload-widget {
128
				background:transparent;
129
				padding:45px 0;
130
				width:80%;
131
				left:10%;
132
				border:1px solid white;
133
			}
134
		} // end of .overlay-div
135
}
136

    
137
}
138

    
139
.communication-error {
140
	// display: none;
141
	background-color: $error-color;
142
	color: $wizard-base-font-color;
143
	position: fixed;
144
	bottom: -151px;
145
	left: 0px;
146
	width: 100%;
147
	padding-top: 30px;
148
	padding-bottom: 15px;
149
	z-index: 10;
150
	p {
151
		text-align: center;
152
		line-height: 2em;
153
		margin: 0 auto;
154
		max-width: 800px;
155
		&.buttons {
156
			margin-top:10px;
157
			a:not(:first-child) {
158
				margin-left: 15px;
159
			} 
160
		}
161
	}
162
}
163

    
164
/* Responive ------------------------------------------------ */
165
@media only screen and (max-width: $small-mobile) {
166
}
167

    
168
@media only screen and (max-width: $small-screen) {
169
    .wizard {
170
        .top {
171
            position: static;
172
        }
173
        .middle {
174
            padding-top:0;
175
        }
176
    }
177
    .body-wrapper {
178
        .overlay-area {
179
            top:0;
180
        }
181
    }
182
}