|
1 |
|
2 @import "colors.less"; |
|
3 |
|
4 /** |
|
5 * Messages boxes |
|
6 */ |
|
7 |
|
8 .MessageBox { |
|
9 width: 100%; |
|
10 height: 100%; |
|
11 position: fixed; |
|
12 top: 0; |
|
13 left: 0; |
|
14 background: rgba(80, 80, 80, .7); |
|
15 z-index: 100000; |
|
16 |
|
17 @media screen and (max-width:450px) and (max-width:767px) { |
|
18 width: 100%; |
|
19 height: 100%; |
|
20 position: fixed; |
|
21 top: 0; |
|
22 left: 0; |
|
23 background: rgba(80, 80, 80, .7); |
|
24 z-index: 100000; |
|
25 } |
|
26 } |
|
27 |
|
28 .MessageBoxContainer { |
|
29 top: 35%; |
|
30 color: #fff; |
|
31 position: relative; |
|
32 width: 100%; |
|
33 background-color: @messageBgColor; |
|
34 padding: 20px; |
|
35 |
|
36 &.info { |
|
37 width: 60%; |
|
38 left: 20%; |
|
39 background-color: rgba(255, 255, 255, 0.9); |
|
40 color: @textColor; |
|
41 } |
|
42 |
|
43 @media screen and (max-width:450px) and (max-width:767px) { |
|
44 top: 25%; |
|
45 color: #fff; |
|
46 position: relative; |
|
47 width: 100%; |
|
48 background-color: @messageBgColor; |
|
49 } |
|
50 |
|
51 input, |
|
52 select { |
|
53 width: 50%; |
|
54 padding: 5px; |
|
55 |
|
56 @media screen and (max-width:450px) and (max-width:767px) { |
|
57 width: 50%; |
|
58 padding: 5px; |
|
59 } |
|
60 } |
|
61 } |
|
62 |
|
63 .MessageBoxMiddle { |
|
64 position: relative; |
|
65 left: 20%; |
|
66 width: 60%; |
|
67 |
|
68 @media screen and (max-width:450px) and (max-width:767px) { |
|
69 position: relative; |
|
70 left: 0; |
|
71 width: 100%; |
|
72 padding: 3px; |
|
73 } |
|
74 .MsgTitle { |
|
75 letter-spacing: -1px; |
|
76 font-size: 24px; |
|
77 font-weight: 300; |
|
78 |
|
79 @media screen and (max-width:450px) and (max-width:767px) { |
|
80 font-size: 22px; |
|
81 } |
|
82 } |
|
83 .pText { |
|
84 font-style: 30px; |
|
85 } |
|
86 @media screen and (max-width:450px) and (max-width:767px) { |
|
87 font-style: 10px; |
|
88 } |
|
89 } |
|
90 |
|
91 .MessageBoxButtonSection { |
|
92 width: 100%; |
|
93 height: 30px; |
|
94 text-align: right; |
|
95 |
|
96 @media screen and (max-width:450px) and (max-width:767px) { |
|
97 width: 100%; |
|
98 height: 30px; |
|
99 } |
|
100 button { |
|
101 margin-right: 7px; |
|
102 padding-left: 15px; |
|
103 padding-right: 15px; |
|
104 font-size: 14px; |
|
105 font-weight: 700; |
|
106 |
|
107 @media screen and (max-width:450px) and (max-width:767px) { |
|
108 float: right; |
|
109 margin-right: 5px; |
|
110 padding-left: 15px; |
|
111 padding-right: 15px; |
|
112 } |
|
113 } |
|
114 } |
|
115 |
|
116 .LoadingBoxContainer { |
|
117 top: 20%; |
|
118 color: #fff; |
|
119 position: relative; |
|
120 width: 100%; |
|
121 background-color: @messageBgColor; |
|
122 |
|
123 .MsgTitle { |
|
124 font-size: 26px; |
|
125 } |
|
126 .pText { |
|
127 font-style: 30px; |
|
128 } |
|
129 } |
|
130 |
|
131 .LoadingBoxMiddle { |
|
132 position: relative; |
|
133 left: 20%; |
|
134 width: 50%; |
|
135 padding: 10px; |
|
136 } |
|
137 |
|
138 #LoadingPoints { |
|
139 position: absolute; |
|
140 } |
|
141 |
|
142 #divMiniIcons { |
|
143 position: fixed; |
|
144 width: 415px; |
|
145 right: 10px; |
|
146 bottom: 180px; |
|
147 z-index: 9999; |
|
148 float: right; |
|
149 |
|
150 .cajita { |
|
151 text-align: center; |
|
152 vertical-align: middle; |
|
153 padding: 4px 6px; |
|
154 color: #FFF; |
|
155 float: right; |
|
156 cursor: pointer; |
|
157 display: block; |
|
158 background-color: red; |
|
159 font-size: 17px; |
|
160 margin-left: 4px; |
|
161 margin-top: 5px; |
|
162 |
|
163 &:active { |
|
164 top: 1px; |
|
165 left: 1px; |
|
166 position: relative; |
|
167 } |
|
168 } |
|
169 } |
|
170 |
|
171 #divSmallBoxes { |
|
172 position: fixed; |
|
173 right: 0; |
|
174 top: 0; |
|
175 z-index: 9999; |
|
176 |
|
177 @media screen and (max-width:450px) and (max-width:767px) { |
|
178 position: fixed; |
|
179 width: 90%; |
|
180 right: 0; |
|
181 top: 0; |
|
182 } |
|
183 } |
|
184 |
|
185 .BigBox { |
|
186 position: fixed; |
|
187 right: 10px; |
|
188 bottom: 10px; |
|
189 background-color: #004d60; |
|
190 padding: 10px 10px 5px; |
|
191 width: 390px; |
|
192 height: 150px; |
|
193 color: #fff; |
|
194 z-index: 99999; |
|
195 box-sizing: content-box; |
|
196 -webkit-box-sizing: content-box; |
|
197 -moz-box-sizing: content-box; |
|
198 border-left: 5px solid rgba(0, 0, 0, .15); |
|
199 overflow: hidden; |
|
200 |
|
201 span { |
|
202 font-size: 17px; |
|
203 font-weight: 300; |
|
204 letter-spacing: -1px; |
|
205 padding: 5px 0!important; |
|
206 display: block; |
|
207 } |
|
208 p { |
|
209 font-size: 13px; |
|
210 margin-top: 10px; |
|
211 } |
|
212 |
|
213 @media screen and (max-width:450px) and (max-width:767px) { |
|
214 width: 88%; |
|
215 } |
|
216 .bigboxicon { |
|
217 font-size: 30px; |
|
218 text-align: left; |
|
219 position: absolute; |
|
220 top: 120px; |
|
221 left: 6px; |
|
222 z-index: 0; |
|
223 } |
|
224 .bigboxnumber { |
|
225 width: 100%; |
|
226 text-align: right; |
|
227 font-size: 25px; |
|
228 } |
|
229 } |
|
230 |
|
231 .SmallBox { |
|
232 position: absolute; |
|
233 right: 5px; |
|
234 top: 20px; |
|
235 width: 420px; |
|
236 color: #fff; |
|
237 z-index: 9999; |
|
238 overflow: hidden; |
|
239 border: 1px solid transparent; |
|
240 |
|
241 @media screen and (max-width:450px) and (max-width:767px) { |
|
242 width: 95%; |
|
243 } |
|
244 &:hover { |
|
245 border: 1px solid #fff; |
|
246 cursor: pointer; |
|
247 |
|
248 @media screen and (max-width:450px) and (max-width:767px) { |
|
249 -webkit-box-shadow: 0 0 10px #888; |
|
250 box-shadow: 0 0 10px #888; |
|
251 cursor: pointer; |
|
252 } |
|
253 } |
|
254 .foto { |
|
255 font-size: 30px; |
|
256 position: absolute; |
|
257 left: 20px; |
|
258 } |
|
259 .textoFull { |
|
260 width: 93%; |
|
261 float: left; |
|
262 padding-left: 20px; |
|
263 |
|
264 @media screen and (max-width:450px) and (max-width:767px) { |
|
265 width: 93%; |
|
266 float: left; |
|
267 padding-left: 20px; |
|
268 } |
|
269 } |
|
270 .textoFoto { |
|
271 width: 78%; |
|
272 margin: 3px 20px 3px 80px; |
|
273 float: left; |
|
274 |
|
275 @media screen and (max-width:450px) and (max-width:767px) { |
|
276 width: 55%; |
|
277 margin: 3px 20px 3px 80px; |
|
278 float: left; |
|
279 } |
|
280 } |
|
281 span { |
|
282 font-size: 17px; |
|
283 font-weight: 300; |
|
284 letter-spacing: -1px; |
|
285 display: block; |
|
286 margin: 4px 0; |
|
287 |
|
288 @media screen and (max-width:450px) and (max-width:767px) { |
|
289 font-size: 16px; |
|
290 } |
|
291 } |
|
292 p { |
|
293 font-size: 13px; |
|
294 margin-top: 2px; |
|
295 |
|
296 @media screen and (max-width:450px) and (max-width:767px) { |
|
297 font-size: 12px; |
|
298 margin-top: 2px; |
|
299 } |
|
300 } |
|
301 } |
|
302 |
|
303 .btnClose { |
|
304 position: absolute; |
|
305 right: 10px; |
|
306 height: 16px; |
|
307 width: 15px; |
|
308 cursor: pointer; |
|
309 font-size: 18px; |
|
310 opacity: .5; |
|
311 display: block; |
|
312 top: 15px; |
|
313 |
|
314 &:hover { |
|
315 opacity: 1; |
|
316 } |
|
317 } |
|
318 |
|
319 .miniPic { |
|
320 position: absolute; |
|
321 bottom: 8px; |
|
322 right: 9px; |
|
323 } |
|
324 |
|
325 .miniIcon { |
|
326 height: 100%; |
|
327 font-size: 20px; |
|
328 } |