Statistics
| Branch: | Tag: | Revision:

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

History | View | Annotate | Download (3.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:200px 140px 40px;
100
	h3 {
101
        font-size:1em;
102
    }
103
    p {
104
		color: #fff;
105
		text-align: center;
106
		&.message-forimg {
107
			margin-top: 132px;
108
			margin-bottom: 35px; // 20px from background icon
109
		}
110
		&.buttons {
111
			a:first-child {
112
				margin-right:25px;
113
			}
114
		}
115
	}
116
	.close-reveal-modal {
117
		color: #fff;
118
		&:hover {
119
			color: $gray-0;
120
		}
121
	}
122
	&#modal-start {
123
		background: $secondary-color url('../images/shutdown.png') no-repeat center 50px;
124
    }
125
    &#modal-reboot {
126
		background: #ff7049 url('../images/restart.png') no-repeat center 50px;
127
	}
128
	&#modal-shutdown {
129
		background: #ff7049 url('../images/shutdown.png') no-repeat center 50px;
130
	}
131
	&#modal-destroy {
132
		background: #d7145a url('../images/destroy-vm.png') no-repeat center 46px;
133
	}
134
	&#destroy-network-confirm {
135
		background: #d7145a url('../images/destroy-network-1.png') no-repeat center 50px;
136
	}
137
	&#destroy-disk-confirm {
138
		background: #d7145a url('../images/destroy-disk.png') no-repeat center 50px;
139
	}
140
	&#modal-connect, &.remove {
141
		padding-top:40px;
142
		p {
143
			text-align:left;
144
			color: black;
145
			&.info {
146
				font-style: italic;
147
				font-size:emCalc(13px);
148
				color: #9e9ea1;
149
			}
150
			&.ssh {
151
				text-align: center;
152
				span {
153
					display: inline;
154
					padding: 10px 30px;
155
					background:$secondary-color;
156
					color:#fff;
157
				}
158
			}
159
			&.buttons {
160
				text-align: center;
161
			}
162
		}
163
		.close-reveal-modal {
164
			color: $link-color;
165
			&:hover {
166
				color: $link-color-hover;
167
			}
168
		}
169
	}
170
}
171

    
172
/* Responive ------------------------------------------------ */
173
@media only screen and (max-width: $small-mobile) {
174
}
175

    
176
@media only screen and (max-width: $small-screen) {
177
    .wizard {
178
        .top {
179
            position: static;
180
        }
181
        .middle {
182
            padding-top:0;
183
        }
184
    }
185
    .body-wrapper {
186
        .overlay-area {
187
            top:0;
188
        }
189
    }
190
}