Statistics
| Branch: | Tag: | Revision:

root / snf-cyclades-app / synnefo / ui / new_ui / ui / sass / _overlays.scss @ 9d514d49

History | View | Annotate | Download (5.2 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
	.overlay-area-custom {
34
		display:none;
35
		position:absolute;
36
		left:0;
37
		right:0;
38
		top:-$bar-height;
39
		width:100%;
40
		height:100%;
41
		background:$overlay-bg-color;
42
		z-index:20;
43
		.overlay-div {
44
			display: none;
45
			z-index:50;
46
			position: relative;
47
			background:#fff;
48
			top:20%;
49
			left:25%;
50
			width:50%;
51
			padding:25px;
52
			.buttons {
53
				a {
54
					margin-right:20px;
55
				}
56
			}
57
			.close {
58
				float:right;
59
				font-size:30px;
60
			}
61
			&.upload-widget {
62
				background:transparent;
63
				padding:45px 0;
64
				width:80%;
65
				left:10%;
66
				border:1px solid white;
67
			}
68
		} // end of .overlay-div
69
}
70

    
71
}
72

    
73
.communication-error {
74
	// display: none;
75
	background-color: $error-color;
76
	color: $wizard-base-font-color;
77
	position: fixed;
78
	bottom: -151px;
79
	left: 0px;
80
	width: 100%;
81
	padding-top: 30px;
82
	padding-bottom: 15px;
83
	z-index: 10;
84
	p {
85
		text-align: center;
86
		line-height: 2em;
87
		margin: 0 auto;
88
		max-width: 800px;
89
		&.buttons {
90
			margin-top:10px;
91
			a:not(:first-child) {
92
				margin-left: 15px;
93
			} 
94
		}
95
	}
96
}
97

    
98
.reveal-modal {
99
	padding-top:40px;
100
	p {
101
		text-align:left;
102
		color: black;
103
		&.info {
104
			font-style: italic;
105
			font-size:emCalc(13px);
106
			color: #9e9ea1;
107
		}
108
		&.ssh {
109
			text-align: center;
110
			span {
111
				display: inline;
112
				padding: 10px 30px;
113
				background:$secondary-color;
114
				color:#fff;
115
			}
116
		}
117
		&.buttons {
118
			text-align: center;
119
			.btn4, .btn4:hover span, .btn4:focus span {
120
				border-color: $body-font-color; 
121
			}
122
			.btn4 span {
123
				color: $body-font-color;
124
			}
125

    
126
		}
127
	}
128
	.close-reveal-modal {
129
		color: $link-color;
130
		&:hover {
131
			color: $link-color-hover;
132
		}
133
	}
134
	
135

    
136
	&#modal-start {
137
		background: $secondary-color url('../images/shutdown.png') no-repeat center 50px;
138
		padding:200px 140px 40px;
139
		h3 {
140
	        font-size:1em;
141
	    }
142
	    p {
143
			color: #fff;
144
			text-align: center;
145
			&.message-forimg {
146
				margin-top: 132px;
147
				margin-bottom: 35px; // 20px from background icon
148
			}
149
			&.buttons {
150
				a:first-child {
151
					margin-right:25px;
152
				}
153
			}
154
		}
155
		.close-reveal-modal {
156
			color: #fff;
157
			&:hover {
158
				color: $gray-0;
159
			}
160
		}
161
    }
162
    &#modal-reboot {
163
		background: #ff7049 url('../images/restart.png') no-repeat center 50px;
164
				padding:200px 140px 40px;
165
		h3 {
166
	        font-size:1em;
167
	    }
168
	    p {
169
			color: #fff;
170
			text-align: center;
171
			&.message-forimg {
172
				margin-top: 132px;
173
				margin-bottom: 35px; // 20px from background icon
174
			}
175
			&.buttons {
176
				a:first-child {
177
					margin-right:25px;
178
				}
179
			}
180
		}
181
		.close-reveal-modal {
182
			color: #fff;
183
			&:hover {
184
				color: $gray-0;
185
			}
186
		}
187
	}
188
	&#modal-shutdown {
189
		background: #ff7049 url('../images/shutdown.png') no-repeat center 50px;
190
				padding:200px 140px 40px;
191
		h3 {
192
	        font-size:1em;
193
	    }
194
	    p {
195
			color: #fff;
196
			text-align: center;
197
			&.message-forimg {
198
				margin-top: 132px;
199
				margin-bottom: 35px; // 20px from background icon
200
			}
201
			&.buttons {
202
				a:first-child {
203
					margin-right:25px;
204
				}
205
			}
206
		}
207
		.close-reveal-modal {
208
			color: #fff;
209
			&:hover {
210
				color: $gray-0;
211
			}
212
		}
213
	}
214
	&#modal-destroy {
215
		background: #d7145a url('../images/destroy-vm.png') no-repeat center 46px;
216
				padding:200px 140px 40px;
217
		h3 {
218
	        font-size:1em;
219
	    }
220
	    p {
221
			color: #fff;
222
			text-align: center;
223
			&.message-forimg {
224
				margin-top: 132px;
225
				margin-bottom: 35px; // 20px from background icon
226
			}
227
			&.buttons {
228
				a:first-child {
229
					margin-right:25px;
230
				}
231
			}
232
		}
233
		.close-reveal-modal {
234
			color: #fff;
235
			&:hover {
236
				color: $gray-0;
237
			}
238
		}
239
	}
240
	&#destroy-network-confirm {
241
		background: #d7145a url('../images/destroy-network-1.png') no-repeat center 50px;
242
				padding:200px 140px 40px;
243
		h3 {
244
	        font-size:1em;
245
	    }
246
	    p {
247
			color: #fff;
248
			text-align: center;
249
			&.message-forimg {
250
				margin-top: 132px;
251
				margin-bottom: 35px; // 20px from background icon
252
			}
253
			&.buttons {
254
				a:first-child {
255
					margin-right:25px;
256
				}
257
			}
258
		}
259
		.close-reveal-modal {
260
			color: #fff;
261
			&:hover {
262
				color: $gray-0;
263
			}
264
		}
265
	}
266
	&#destroy-disk-confirm {
267
		background: #d7145a url('../images/destroy-disk.png') no-repeat center 50px;
268
				padding:200px 140px 40px;
269
		h3 {
270
	        font-size:1em;
271
	    }
272
	    p {
273
			color: #fff;
274
			text-align: center;
275
			&.message-forimg {
276
				margin-top: 132px;
277
				margin-bottom: 35px; // 20px from background icon
278
			}
279
			&.buttons {
280
				a:first-child {
281
					margin-right:25px;
282
				}
283
			}
284
		}
285
		.close-reveal-modal {
286
			color: #fff;
287
			&:hover {
288
				color: $gray-0;
289
			}
290
		}
291
	}
292
	&#modal-connect, &.remove, &#generic {
293
		
294
	}
295
}
296

    
297
/* Responive ------------------------------------------------ */
298
@media only screen and (max-width: $small-mobile) {
299
}
300

    
301
@media only screen and (max-width: $small-screen) {
302
    .wizard {
303
        .top {
304
            position: static;
305
        }
306
        .middle {
307
            padding-top:0;
308
        }
309
    }
310
    .body-wrapper {
311
        .overlay-area {
312
            top:0;
313
        }
314
    }
315
}