Statistics
| Branch: | Tag: | Revision:

root / snf-cyclades-app / synnefo / ui / new_ui / ui / sass / _overlays.scss @ 97cd255d

History | View | Annotate | Download (4.1 kB)

1 ca3c8b6e Athina Bekakou
/*
2 673ea014 Olga Brani
3 15948f00 Olga Brani
Overlays (Todo: clean up)
4 15948f00 Olga Brani
5 15948f00 Olga Brani
*/
6 bb8cc1dc Olga Brani
body.with-overlay {
7 ceaaa3be Olga Brani
	background:$overlay-bg-color;
8 2469dab6 Olga Brani
	.main {
9 2469dab6 Olga Brani
		opacity:0;
10 2469dab6 Olga Brani
	}
11 bb8cc1dc Olga Brani
}
12 673ea014 Olga Brani
13 673ea014 Olga Brani
14 f50cc12b Olga Brani
.body-wrapper {
15 3fba84bf Olga Brani
	position: relative;
16 96e40ea0 Olga Brani
	left:0;
17 96e40ea0 Olga Brani
	top:0;
18 6e73603a Athina Bekakou
	.welcome {
19 3fba84bf Olga Brani
		display:none;
20 17ce081a Olga Brani
		}
21 1fda8642 Olga Brani
	&.no-vm {
22 1fda8642 Olga Brani
		background:url(../images/draw-welcome.png) no-repeat center 50px $secondary-color;
23 1fda8642 Olga Brani
		.welcome {
24 1fda8642 Olga Brani
			display:none;
25 1fda8642 Olga Brani
			color:#fff;
26 1fda8642 Olga Brani
			text-align:center;
27 1fda8642 Olga Brani
			position: relative;
28 1fda8642 Olga Brani
			top:-15px;
29 1fda8642 Olga Brani
			left:75px;
30 1fda8642 Olga Brani
			display:block;
31 3fba84bf Olga Brani
		}
32 1fda8642 Olga Brani
	}
33 1fda8642 Olga Brani
	.reveal-modal {
34 1fda8642 Olga Brani
		padding:65px 140px 40px;
35 1fda8642 Olga Brani
	    h3 {
36 1fda8642 Olga Brani
	        font-size:1em;
37 1fda8642 Olga Brani
	    }
38 1fda8642 Olga Brani
	    p {
39 1fda8642 Olga Brani
			color: white;
40 1fda8642 Olga Brani
			text-align: center;
41 1fda8642 Olga Brani
			&.message-forimg {
42 1fda8642 Olga Brani
				margin-top:132px;
43 1fda8642 Olga Brani
				margin-bottom: 35px; // 20px from background icon
44 1fda8642 Olga Brani
			}
45 1fda8642 Olga Brani
			&.buttons {
46 1fda8642 Olga Brani
				a:first-child {
47 1fda8642 Olga Brani
					margin-right:25px;
48 937c0d49 Athina Bekakou
				}
49 1fda8642 Olga Brani
			}
50 1fda8642 Olga Brani
		}
51 1fda8642 Olga Brani
		&#start-confirm {
52 1fda8642 Olga Brani
			background: $secondary-color url('../images/shutdown.png') no-repeat center 50px;	//55px from top
53 1fda8642 Olga Brani
	    }
54 1fda8642 Olga Brani
	    &#reboot-confirm {
55 1fda8642 Olga Brani
			background: #ff7049 url('../images/restart.png') no-repeat center 50px;
56 1fda8642 Olga Brani
			.btn4 {
57 1fda8642 Olga Brani
			background-color: #ff7049;
58 1fda8642 Olga Brani
			border-color: white;
59 1fda8642 Olga Brani
			&:hover {
60 1fda8642 Olga Brani
					color: #ff7049;
61 1fda8642 Olga Brani
					background-color: white;
62 1fda8642 Olga Brani
					border-color: #ff7049;
63 6e73603a Athina Bekakou
				}
64 f5b4165a Athina Bekakou
			}
65 1fda8642 Olga Brani
		}
66 1fda8642 Olga Brani
		&#shutdown-confirm {
67 1fda8642 Olga Brani
		background: #ff7049 url('../images/shutdown.png') no-repeat center 50px;	//55px from top
68 1fda8642 Olga Brani
			.btn4 {
69 6e73603a Athina Bekakou
				background-color: #ff7049;
70 6e73603a Athina Bekakou
				border-color: white;
71 6e73603a Athina Bekakou
				&:hover {
72 1fda8642 Olga Brani
					color: #ff7049;
73 1fda8642 Olga Brani
					background-color: white;
74 1fda8642 Olga Brani
					border-color: #ff7049;
75 3fba84bf Olga Brani
				}
76 3fba84bf Olga Brani
			}
77 1fda8642 Olga Brani
		}
78 1fda8642 Olga Brani
		&#destroy-vm-confirm {
79 1fda8642 Olga Brani
		background: #d7145a url('../images/destroy-vm.png') no-repeat center 46px;	//55px from top
80 1fda8642 Olga Brani
			.btn4 {
81 1fda8642 Olga Brani
				background-color: #d7145a;
82 1fda8642 Olga Brani
				border-color: white;
83 1fda8642 Olga Brani
				&:hover {
84 1fda8642 Olga Brani
					color: #d7145a;
85 1fda8642 Olga Brani
					background-color: white;
86 1fda8642 Olga Brani
					border-color: #d7145a;
87 3fba84bf Olga Brani
				}
88 6e73603a Athina Bekakou
			}
89 1fda8642 Olga Brani
		}
90 1fda8642 Olga Brani
		&#destroy-network-confirm {
91 1fda8642 Olga Brani
			background: #d7145a url('../images/destroy-network-1.png') no-repeat center 50px;	//55px from top
92 1fda8642 Olga Brani
			.btn4 {
93 1fda8642 Olga Brani
				background-color: #d7145a;
94 1fda8642 Olga Brani
				border-color: white;
95 1fda8642 Olga Brani
				&:hover {
96 1fda8642 Olga Brani
					color: #d7145a;
97 1fda8642 Olga Brani
					background-color: white;
98 1fda8642 Olga Brani
					border-color: #d7145a;
99 3fba84bf Olga Brani
				}
100 6e73603a Athina Bekakou
			}
101 1fda8642 Olga Brani
		}
102 1fda8642 Olga Brani
		&#destroy-disk-confirm {
103 1fda8642 Olga Brani
			background: #d7145a url('../images/destroy-disk.png') no-repeat center 50px;	//55px from top
104 1fda8642 Olga Brani
			.btn4 {
105 1fda8642 Olga Brani
				background-color: #d7145a;
106 1fda8642 Olga Brani
				border-color: white;
107 1fda8642 Olga Brani
				&:hover {
108 1fda8642 Olga Brani
					color: #d7145a;
109 1fda8642 Olga Brani
					background-color: white;
110 1fda8642 Olga Brani
					border-color: #d7145a;
111 3fba84bf Olga Brani
				}
112 6e73603a Athina Bekakou
			}
113 6e73603a Athina Bekakou
114 1fda8642 Olga Brani
		}
115 112e5dd2 Athina Bekakou
		&#vm-connect, &.remove {
116 1fda8642 Olga Brani
			p {
117 1fda8642 Olga Brani
				text-align:left;
118 1fda8642 Olga Brani
				color: black;
119 1fda8642 Olga Brani
				&.info {
120 1fda8642 Olga Brani
					font-style: italic;
121 261ac841 Olga Brani
					font-size:emCalc(13px);
122 1fda8642 Olga Brani
					color: #9e9ea1;
123 4e7c16f1 Olga Brani
				}
124 1fda8642 Olga Brani
				&.ssh {
125 1fda8642 Olga Brani
					text-align: center;
126 1fda8642 Olga Brani
					span {
127 1fda8642 Olga Brani
						display: inline;
128 261ac841 Olga Brani
						padding: 10px 30px;
129 261ac841 Olga Brani
						background:$secondary-color;
130 261ac841 Olga Brani
						color:#fff;
131 353b022b Olga Brani
					}
132 353b022b Olga Brani
				}
133 112e5dd2 Athina Bekakou
				&.buttons {
134 112e5dd2 Athina Bekakou
					text-align: center;
135 112e5dd2 Athina Bekakou
				}
136 3fba84bf Olga Brani
			}
137 1fda8642 Olga Brani
			.close-reveal-modal {
138 1fda8642 Olga Brani
				color: $link-color;
139 1fda8642 Olga Brani
				&:hover {
140 1fda8642 Olga Brani
					color: $link-color-hover;
141 1fda8642 Olga Brani
				}
142 1fda8642 Olga Brani
			}
143 3fba84bf Olga Brani
		}
144 3fba84bf Olga Brani
	}
145 6e73603a Athina Bekakou
	.overlay-area-custom {
146 6e73603a Athina Bekakou
		display:none;
147 6e73603a Athina Bekakou
		position:absolute;
148 6e73603a Athina Bekakou
		left:0;
149 6e73603a Athina Bekakou
		right:0;
150 6e73603a Athina Bekakou
		top:-$bar-height;
151 6e73603a Athina Bekakou
		width:100%;
152 6e73603a Athina Bekakou
		height:100%;
153 ceaaa3be Olga Brani
		background:$overlay-bg-color;
154 6e73603a Athina Bekakou
		z-index:20;
155 6e73603a Athina Bekakou
		.overlay-div {
156 6e73603a Athina Bekakou
			display: none;
157 6e73603a Athina Bekakou
			z-index:50;
158 6e73603a Athina Bekakou
			position: relative;
159 6e73603a Athina Bekakou
			background:#fff;
160 6e73603a Athina Bekakou
			top:20%;
161 6e73603a Athina Bekakou
			left:25%;
162 6e73603a Athina Bekakou
			width:50%;
163 6e73603a Athina Bekakou
			padding:25px;
164 6e73603a Athina Bekakou
			.buttons {
165 6e73603a Athina Bekakou
				a {
166 6e73603a Athina Bekakou
					margin-right:20px;
167 3fba84bf Olga Brani
				}
168 3fba84bf Olga Brani
			}
169 6e73603a Athina Bekakou
			.close {
170 6e73603a Athina Bekakou
				float:right;
171 6e73603a Athina Bekakou
				font-size:30px;
172 e11021ca Athina Bekakou
			}
173 6e73603a Athina Bekakou
			&.upload-widget {
174 6e73603a Athina Bekakou
				background:transparent;
175 6e73603a Athina Bekakou
				padding:45px 0;
176 6e73603a Athina Bekakou
				width:80%;
177 6e73603a Athina Bekakou
				left:10%;
178 6e73603a Athina Bekakou
				border:1px solid white;
179 6e73603a Athina Bekakou
			}
180 3ed3ef88 Athina Bekakou
		} // end of .overlay-div
181 6e73603a Athina Bekakou
}
182 e11021ca Athina Bekakou
183 e5c8c342 Olga Brani
}
184 03bcb595 Olga Brani
185 8e94f2a9 Athina Bekakou
.communication-error {
186 8e94f2a9 Athina Bekakou
	// display: none;
187 8e94f2a9 Athina Bekakou
	background-color: $error-color;
188 8e94f2a9 Athina Bekakou
	color: $wizard-base-font-color;
189 8e94f2a9 Athina Bekakou
	position: fixed;
190 aafd8478 Athina Bekakou
	bottom: -151px;
191 aafd8478 Athina Bekakou
	left: 0px;
192 8e94f2a9 Athina Bekakou
	width: 100%;
193 8e94f2a9 Athina Bekakou
	padding-top: 30px;
194 8e94f2a9 Athina Bekakou
	padding-bottom: 15px;
195 aafd8478 Athina Bekakou
	z-index: 10;
196 8e94f2a9 Athina Bekakou
	p {
197 8e94f2a9 Athina Bekakou
		text-align: center;
198 8e94f2a9 Athina Bekakou
		line-height: 2em;
199 8e94f2a9 Athina Bekakou
		margin: 0 auto;
200 8e94f2a9 Athina Bekakou
		max-width: 800px;
201 8e94f2a9 Athina Bekakou
		&.buttons {
202 8e94f2a9 Athina Bekakou
			margin-top:10px;
203 8e94f2a9 Athina Bekakou
			a:not(:first-child) {
204 8e94f2a9 Athina Bekakou
				margin-left: 15px;
205 8e94f2a9 Athina Bekakou
			} 
206 8e94f2a9 Athina Bekakou
		}
207 8e94f2a9 Athina Bekakou
	}
208 8e94f2a9 Athina Bekakou
}
209 6e73603a Athina Bekakou
210 05689a8e Olga Brani
/* Responive ------------------------------------------------ */
211 05689a8e Olga Brani
@media only screen and (max-width: $small-mobile) {
212 05689a8e Olga Brani
}
213 05689a8e Olga Brani
214 05689a8e Olga Brani
@media only screen and (max-width: $small-screen) {
215 ca3c8b6e Athina Bekakou
    .wizard {
216 ca3c8b6e Athina Bekakou
        .top {
217 ca3c8b6e Athina Bekakou
            position: static;
218 ca3c8b6e Athina Bekakou
        }
219 ca3c8b6e Athina Bekakou
        .middle {
220 ca3c8b6e Athina Bekakou
            padding-top:0;
221 ca3c8b6e Athina Bekakou
        }
222 ca3c8b6e Athina Bekakou
    }
223 f50cc12b Olga Brani
    .body-wrapper {
224 ca3c8b6e Athina Bekakou
        .overlay-area {
225 ca3c8b6e Athina Bekakou
            top:0;
226 ca3c8b6e Athina Bekakou
        }
227 ca3c8b6e Athina Bekakou
    }
228 5bda20fe Olga Brani
}