3 /* Resource color mapping table
5 @color_popup_title_bg: popup_title_bg.png
6 @color_popup_text_bg: popup_bg.png
7 @color_popup_button_bg: popup_button_bg.png
8 @color_popup_font: Popup title & default
9 @color_popup_text_font: Popup text
14 @popup-text-padding-vert: 22 * @unit_base;
15 @popup-text-padding-hori: 16 * @unit_base;
26 z-index: @z_base_popup;
32 color: @color_popup_font;
33 z-index: (@z_base_popup + 1) !important;
34 background: @color_popup_text_bg;
40 // --------- common style in popup ------------- //
44 font-size: @font_size_popup_basic_style_title;
45 background: @color_popup_title_bg;
49 color: @color_popup_font;
50 margin: 0*@unit_base 0*@unit_base;
51 padding: 13*@unit_base 0*@unit_base;
55 margin-top: @popup-text-padding-vert;
56 margin-bottom: @popup-text-padding-vert;
57 color: @color_popup_text_font;
58 font-size: @font_size_popup_info_style;
59 background: @color_popup_text_bg;
63 // ----------------------------------------------------- //
68 .LESSbox-orient(vertical);
69 .LESSbox-align(center);
70 .LESSbox-pack(center);
77 .LESSbox-orient(vertical);
78 .LESSbox-align(center);
79 .LESSbox-pack(center);
90 .LESSbox-orient(vertical);
91 .LESSbox-align(center);
92 .LESSbox-pack(center);
99 font-size: @font_size_popup_button_text;
100 background: @color_popup_button_bg;
102 padding-top: 11*@unit_base;
103 padding-bottom: 11*@unit_base;
104 vertical-align: middle;
107 width: 402*@unit_base;
108 height: 74*@unit_base;
117 .LESSbox-orient(vertical);
118 .LESSbox-align(center);
119 .LESSbox-pack(center);
125 .ui-popup-button-bg {
126 font-size: @font_size_popup_button_text;
127 background: @color_popup_button_bg;
129 padding-top: 11*@unit_base;
130 padding-bottom: 11*@unit_base;
131 vertical-align: middle;
134 width: 274*@unit_base;
135 height: 74*@unit_base;
136 margin-top: 0*@unit_base;
137 margin-bottom: 0*@unit_base;
138 margin-left: 5*@unit_base;
139 margin-right: 5*@unit_base;
141 display: inline-block;
148 .LESSbox-orient(vertical);
149 .LESSbox-align(center);
150 .LESSbox-pack(center);
156 .ui-popup-button-bg {
157 font-size: @font_size_popup_button_text;
158 background: @color_popup_button_bg;
160 padding-top: 11*@unit_base;
161 padding-bottom: 11*@unit_base;
162 vertical-align: middle;
165 width: 186*@unit_base;
166 height: 74*@unit_base;
167 margin-top: 0*@unit_base;
168 margin-bottom: 0*@unit_base;
169 margin-left: 5*@unit_base;
170 margin-right: 5*@unit_base;
172 display: inline-block;
179 .LESSbox-orient(vertical);
180 .LESSbox-align(center);
181 .LESSbox-pack(center);
188 .ui-popup-button-bg {
189 font-size: @font_size_popup_button_text;
190 background: @color_popup_button_bg;
192 padding-top: 11*@unit_base;
193 padding-bottom: 11*@unit_base;
194 vertical-align: middle;
197 width: 402*@unit_base;
198 height: 74*@unit_base;
207 .LESSbox-orient(vertical);
208 .LESSbox-align(center);
209 .LESSbox-pack(center);
216 .ui-popup-button-bg {
217 font-size: @font_size_popup_button_text;
218 background: @color_popup_button_bg;
220 padding-top: 11*@unit_base;
221 padding-bottom: 11*@unit_base;
222 vertical-align: middle;
225 width: 274*@unit_base;
226 height: 74*@unit_base;
227 margin-top: 0*@unit_base;
228 margin-bottom: 0*@unit_base;
229 margin-left: 5*@unit_base;
230 margin-right: 5*@unit_base;
232 display: inline-block;
239 .LESSbox-orient(vertical);
240 .LESSbox-align(center);
241 .LESSbox-pack(center);
248 .ui-popup-button-bg {
249 font-size: @font_size_popup_button_text;
250 background: @color_popup_button_bg;
252 padding-top: 11*@unit_base;
253 padding-bottom: 11*@unit_base;
254 vertical-align: middle;
257 width: 186*@unit_base;
258 height: 74*@unit_base;
259 margin-top: 0*@unit_base;
260 margin-bottom: 0*@unit_base;
261 margin-left: 5*@unit_base;
262 margin-right: 5*@unit_base;
264 display: inline-block;
268 .center_button_vertical {
271 .LESSbox-orient(vertical);
272 .LESSbox-align(center);
273 .LESSbox-pack(center);
279 .ui-popup-button-bg {
280 font-size: @font_size_popup_button_text;
281 background: @color_popup_button_bg;
284 padding-bottom: 16*@unit_base;
285 vertical-align: middle;
288 width: 356*@unit_base;
289 height: 74*@unit_base;
290 margin-top: 16*@unit_base;
291 margin-bottom: 0*@unit_base;
300 .LESSbox-orient(vertical);
301 .LESSbox-align(center);
302 .LESSbox-pack(center);
309 font-size: @font_size_popup_info_style;
310 background: @color_popup_text_bg;
312 padding-top: 0*@unit_base;
313 padding-bottom: 22*@unit_base;
314 vertical-align: middle;
319 background: @color_popup_text_bg;
320 border: 0*@unit_base;
323 border: 0*@unit_base;
329 .ui-popup-button-bg {
330 font-size: @font_size_popup_button_text;
331 background: @color_popup_button_bg;
333 padding-top: 11*@unit_base;
334 padding-bottom: 11*@unit_base;
335 vertical-align: middle;
338 width: 274*@unit_base;
339 height: 74*@unit_base;
340 margin-top: 0*@unit_base;
341 margin-bottom: 0*@unit_base;
342 margin-left: 5*@unit_base;
343 margin-right: 5*@unit_base;
345 display: inline-block;
349 .center_liststyle_1btn {
352 .LESSbox-orient(vertical);
353 .LESSbox-align(center);
354 .LESSbox-pack(center);
360 .ui-popup-scroller-bg {
363 background: @color_popup_scroller_bg;
364 height: 512*@unit_base;
366 .ui-popup-button-bg {
367 font-size: @font_size_popup_button_text;
368 background: @color_popup_button_bg;
370 padding-top: 11*@unit_base;
371 padding-bottom: 11*@unit_base;
372 vertical-align: middle;
375 width: 402*@unit_base;
376 height: 74*@unit_base;
382 .center_liststyle_2btn {
385 .LESSbox-orient(vertical);
386 .LESSbox-align(center);
387 .LESSbox-pack(center);
393 .ui-popup-scroller-bg {
396 background: @color_popup_scroller_bg;
397 height: 512*@unit_base;
399 .ui-popup-button-bg {
400 font-size: @font_size_popup_button_text;
401 background: @color_popup_button_bg;
403 padding-top: 11*@unit_base;
404 padding-bottom: 11*@unit_base;
405 vertical-align: middle;
408 width: 274*@unit_base;
409 height: 74*@unit_base;
410 margin-top: 0*@unit_base;
411 margin-bottom: 0*@unit_base;
412 margin-left: 5*@unit_base;
413 margin-right: 5*@unit_base;
415 display: inline-block;
419 .center_liststyle_3btn {
422 .LESSbox-orient(vertical);
423 .LESSbox-align(center);
424 .LESSbox-pack(center);
430 .ui-popup-scroller-bg {
433 background: @color_popup_scroller_bg;
434 height: 512*@unit_base;
436 .ui-popup-button-bg {
437 font-size: @font_size_popup_button_text;
438 background: @color_popup_button_bg;
440 padding-top: 11*@unit_base;
441 padding-bottom: 11*@unit_base;
442 vertical-align: middle;
445 width: 186*@unit_base;
446 height: 74*@unit_base;
447 margin-top: 0*@unit_base;
448 margin-bottom: 0*@unit_base;
449 margin-left: 5*@unit_base;
450 margin-right: 5*@unit_base;
452 display: inline-block;
457 .center_progressbar {
460 .LESSbox-orient(vertical);
461 .LESSbox-align(center);
462 .LESSbox-pack(center);
467 font-size: @font_size_popup_center_progressbar_title;
468 font-color: @color_popup_center_progressbar_title;
469 background: @color_popup_text_bg;
471 height: 70*@unit_base;
475 padding: 22*@unit_base 16*@unit_base 0*@unit_base 16*@unit_base;
479 .ui-popup-text-bottom-bg {
480 font-size: @font_size_popup_center_progressbar_title;
481 font-color: @color_popup_center_progressbar_title;
482 background: @color_popup_text_bg;
484 vertical-align: middle;
488 height: 48*@unit_base;
489 padding: 0*@unit_base 16*@unit_base 0*@unit_base 16*@unit_base;
492 display: inline-block;
496 height: 48*@unit_base;
497 padding: 0*@unit_base 16*@unit_base 0*@unit_base 16*@unit_base;
500 display: inline-block;
505 .ui-popup-button-bg {
506 font-size: @font_size_popup_button_text;
507 background: @color_popup_button_bg;
509 padding-top: 11*@unit_base;
510 padding-bottom: 11*@unit_base;
511 vertical-align: middle;
514 width: 402*@unit_base;
515 height: 74*@unit_base;
521 .ui-popup-progress-bg {
522 background: @color_popup_text_bg;
528 .centertext_progressbar {
531 .LESSbox-orient(vertical);
532 .LESSbox-align(center);
533 .LESSbox-pack(center);
538 font-size: @font_size_popup_center_progressbar_title;
539 font-color: @color_popup_center_progressbar_title;
540 background: @color_popup_text_bg;
542 padding-top: 22*@unit_base;
543 padding-bottom: 16*@unit_base;
549 .ui-popup-text-bottom-bg {
550 font-size: @font_size_popup_center_progressbar_title;
551 font-color: @color_popup_center_progressbar_title;
552 background: @color_popup_text_bg;
554 vertical-align: middle;
558 height: 40*@unit_base;
559 padding: 16*@unit_base 16*@unit_base 22*@unit_base 16*@unit_base;
562 display: inline-block;
566 height: 40*@unit_base;
567 padding: 16*@unit_base 16*@unit_base 22*@unit_base 16*@unit_base;
570 display: inline-block;
575 .ui-popup-button-bg {
576 font-size: @font_size_popup_button_text;
577 background: @color_popup_button_bg;
579 padding-top: 11*@unit_base;
580 padding-bottom: 11*@unit_base;
581 vertical-align: middle;
584 width: 402*@unit_base;
585 height: 74*@unit_base;
591 .ui-popup-progress-bg {
592 background: @color_popup_text_bg;
598 .LESSpopup_button_style;
600 .ui-btn.ui-btn-hover-s{
601 .LESSpopup_button_hover_style;
603 .ui-btn.ui-btn-down-s{
604 .LESSpopup_button_press_style;