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 @popupwindow-text-padding-vert: 22 * @unit_base;
15 @popupwindow-text-padding-hori: 16 * @unit_base;
18 .ui-popupwindow-screen {
26 z-index: @z_base_popup;
32 z-index: (@z_base_popup + 1) !important;
33 color: @color_popup_font;
35 //FIXME : remove background & padding if there is no padding.
36 .LESSpopup_padding_style;
37 background: @color_popup_text_bg;
39 // --------- common style in popup window ------------- //
43 font-size: @font_size_popup_basic_style_title;
44 background: @color_popup_title_bg;
46 margin: 0*@unit_base 0*@unit_base;
47 padding: 13*@unit_base 0*@unit_base;
53 color: @color_popup_text_font;
54 font-size: @font_size_popup_info_style;
55 background: @color_popup_text_bg;
58 padding: @popupwindow-text-padding-vert @popupwindow-text-padding-hori;
61 // ----------------------------------------------------- //
66 .LESSbox-orient(vertical);
67 .LESSbox-align(center);
68 .LESSbox-pack(center);
75 .LESSbox-orient(vertical);
76 .LESSbox-align(center);
77 .LESSbox-pack(center);
88 .LESSbox-orient(vertical);
89 .LESSbox-align(center);
90 .LESSbox-pack(center);
97 font-size: @font_size_popup_button_text;
98 background: @color_popup_button_bg;
100 padding-top: 11*@unit_base;
101 padding-bottom: 11*@unit_base;
102 vertical-align: middle;
105 width: 402*@unit_base;
106 height: 74*@unit_base;
115 .LESSbox-orient(vertical);
116 .LESSbox-align(center);
117 .LESSbox-pack(center);
124 font-size: @font_size_popup_button_text;
125 background: @color_popup_button_bg;
127 padding-top: 11*@unit_base;
128 padding-bottom: 11*@unit_base;
129 vertical-align: middle;
132 width: 274*@unit_base;
133 height: 74*@unit_base;
134 margin-top: 0*@unit_base;
135 margin-bottom: 0*@unit_base;
136 margin-left: 5*@unit_base;
137 margin-right: 5*@unit_base;
139 display: inline-block;
146 .LESSbox-orient(vertical);
147 .LESSbox-align(center);
148 .LESSbox-pack(center);
155 font-size: @font_size_popup_button_text;
156 background: @color_popup_button_bg;
158 padding-top: 11*@unit_base;
159 padding-bottom: 11*@unit_base;
160 vertical-align: middle;
163 width: 186*@unit_base;
164 height: 74*@unit_base;
165 margin-top: 0*@unit_base;
166 margin-bottom: 0*@unit_base;
167 margin-left: 5*@unit_base;
168 margin-right: 5*@unit_base;
170 display: inline-block;
177 .LESSbox-orient(vertical);
178 .LESSbox-align(center);
179 .LESSbox-pack(center);
187 font-size: @font_size_popup_button_text;
188 background: @color_popup_button_bg;
190 padding-top: 11*@unit_base;
191 padding-bottom: 11*@unit_base;
192 vertical-align: middle;
195 width: 402*@unit_base;
196 height: 74*@unit_base;
205 .LESSbox-orient(vertical);
206 .LESSbox-align(center);
207 .LESSbox-pack(center);
215 font-size: @font_size_popup_button_text;
216 background: @color_popup_button_bg;
218 padding-top: 11*@unit_base;
219 padding-bottom: 11*@unit_base;
220 vertical-align: middle;
223 width: 274*@unit_base;
224 height: 74*@unit_base;
225 margin-top: 0*@unit_base;
226 margin-bottom: 0*@unit_base;
227 margin-left: 5*@unit_base;
228 margin-right: 5*@unit_base;
230 display: inline-block;
237 .LESSbox-orient(vertical);
238 .LESSbox-align(center);
239 .LESSbox-pack(center);
247 font-size: @font_size_popup_button_text;
248 background: @color_popup_button_bg;
250 padding-top: 11*@unit_base;
251 padding-bottom: 11*@unit_base;
252 vertical-align: middle;
255 width: 186*@unit_base;
256 height: 74*@unit_base;
257 margin-top: 0*@unit_base;
258 margin-bottom: 0*@unit_base;
259 margin-left: 5*@unit_base;
260 margin-right: 5*@unit_base;
262 display: inline-block;
266 .center_button_vertical {
269 .LESSbox-orient(vertical);
270 .LESSbox-align(center);
271 .LESSbox-pack(center);
278 font-size: @font_size_popup_button_text;
279 background: @color_popup_button_bg;
282 padding-bottom: 16*@unit_base;
283 vertical-align: middle;
286 width: 356*@unit_base;
287 height: 74*@unit_base;
288 margin-top: 16*@unit_base;
289 margin-bottom: 0*@unit_base;
298 .LESSbox-orient(vertical);
299 .LESSbox-align(center);
300 .LESSbox-pack(center);
307 font-size: @font_size_popup_info_style;
308 background: @color_popup_text_bg;
310 padding-top: 0*@unit_base;
311 padding-bottom: 22*@unit_base;
312 vertical-align: middle;
317 background: @color_popup_text_bg;
318 border: 0*@unit_base;
321 border: 0*@unit_base;
328 font-size: @font_size_popup_button_text;
329 background: @color_popup_button_bg;
331 padding-top: 11*@unit_base;
332 padding-bottom: 11*@unit_base;
333 vertical-align: middle;
336 width: 274*@unit_base;
337 height: 74*@unit_base;
338 margin-top: 0*@unit_base;
339 margin-bottom: 0*@unit_base;
340 margin-left: 5*@unit_base;
341 margin-right: 5*@unit_base;
343 display: inline-block;
347 .center_liststyle_1btn {
350 .LESSbox-orient(vertical);
351 .LESSbox-align(center);
352 .LESSbox-pack(center);
361 background: @color_popup_scroller_bg;
362 height: 512*@unit_base;
365 font-size: @font_size_popup_button_text;
366 background: @color_popup_button_bg;
368 padding-top: 11*@unit_base;
369 padding-bottom: 11*@unit_base;
370 vertical-align: middle;
373 width: 402*@unit_base;
374 height: 74*@unit_base;
380 .center_liststyle_2btn {
383 .LESSbox-orient(vertical);
384 .LESSbox-align(center);
385 .LESSbox-pack(center);
394 background: @color_popup_scroller_bg;
395 height: 512*@unit_base;
398 font-size: @font_size_popup_button_text;
399 background: @color_popup_button_bg;
401 padding-top: 11*@unit_base;
402 padding-bottom: 11*@unit_base;
403 vertical-align: middle;
406 width: 274*@unit_base;
407 height: 74*@unit_base;
408 margin-top: 0*@unit_base;
409 margin-bottom: 0*@unit_base;
410 margin-left: 5*@unit_base;
411 margin-right: 5*@unit_base;
413 display: inline-block;
417 .center_liststyle_3btn {
420 .LESSbox-orient(vertical);
421 .LESSbox-align(center);
422 .LESSbox-pack(center);
431 background: @color_popup_scroller_bg;
432 height: 512*@unit_base;
435 font-size: @font_size_popup_button_text;
436 background: @color_popup_button_bg;
438 padding-top: 11*@unit_base;
439 padding-bottom: 11*@unit_base;
440 vertical-align: middle;
443 width: 186*@unit_base;
444 height: 74*@unit_base;
445 margin-top: 0*@unit_base;
446 margin-bottom: 0*@unit_base;
447 margin-left: 5*@unit_base;
448 margin-right: 5*@unit_base;
450 display: inline-block;
455 .center_progressbar {
458 .LESSbox-orient(vertical);
459 .LESSbox-align(center);
460 .LESSbox-pack(center);
465 font-size: @font_size_popup_center_progressbar_title;
466 font-color: @color_popup_center_progressbar_title;
467 background: @color_popup_text_bg;
469 height: 70*@unit_base;
473 padding: 22*@unit_base 16*@unit_base 0*@unit_base 16*@unit_base;
477 .popup-text-bottom-bg {
478 font-size: @font_size_popup_center_progressbar_title;
479 font-color: @color_popup_center_progressbar_title;
480 background: @color_popup_text_bg;
482 vertical-align: middle;
486 height: 48*@unit_base;
487 padding: 0*@unit_base 16*@unit_base 0*@unit_base 16*@unit_base;
490 display: inline-block;
494 height: 48*@unit_base;
495 padding: 0*@unit_base 16*@unit_base 0*@unit_base 16*@unit_base;
498 display: inline-block;
504 font-size: @font_size_popup_button_text;
505 background: @color_popup_button_bg;
507 padding-top: 11*@unit_base;
508 padding-bottom: 11*@unit_base;
509 vertical-align: middle;
512 width: 402*@unit_base;
513 height: 74*@unit_base;
520 background: @color_popup_text_bg;
526 .centertext_progressbar {
529 .LESSbox-orient(vertical);
530 .LESSbox-align(center);
531 .LESSbox-pack(center);
536 font-size: @font_size_popup_center_progressbar_title;
537 font-color: @color_popup_center_progressbar_title;
538 background: @color_popup_text_bg;
540 padding-top: 22*@unit_base;
541 padding-bottom: 16*@unit_base;
547 .popup-text-bottom-bg {
548 font-size: @font_size_popup_center_progressbar_title;
549 font-color: @color_popup_center_progressbar_title;
550 background: @color_popup_text_bg;
552 vertical-align: middle;
556 height: 40*@unit_base;
557 padding: 16*@unit_base 16*@unit_base 22*@unit_base 16*@unit_base;
560 display: inline-block;
564 height: 40*@unit_base;
565 padding: 16*@unit_base 16*@unit_base 22*@unit_base 16*@unit_base;
568 display: inline-block;
574 font-size: @font_size_popup_button_text;
575 background: @color_popup_button_bg;
577 padding-top: 11*@unit_base;
578 padding-bottom: 11*@unit_base;
579 vertical-align: middle;
582 width: 402*@unit_base;
583 height: 74*@unit_base;
590 background: @color_popup_text_bg;
596 .LESSpopup_button_style;
598 .ui-btn.ui-btn-hover-s{
599 .LESSpopup_button_hover_style;
601 .ui-btn.ui-btn-down-s{
602 .LESSpopup_button_press_style;
605 .ui-popupwindow > .ui-volumecontrol {
609 background: rgba(0, 0, 0, 0.666667);
610 width: 416*@unit_base;
611 height: 676*@unit_base;
612 padding-top: 22*@unit_base;
615 font-size: @font_size_popup_info_style;
621 .ui-volumecontrol-icon {
624 height: 128*@unit_base;
625 padding-top: 21*@unit_base;
626 padding-bottom: 21*@unit_base;
627 padding-left: 165*@unit_base;
628 padding-right: 165*@unit_base;
631 .ui-volumecontrol-indicator {
634 height: 420*@unit_base;
635 padding-left: 68*@unit_base;
636 padding-right: 68*@unit_base;
640 -moz-border-radius: 0.3em !important;
641 -webkit-border-radius: 0.3em !important;
642 border-radius: 0.3em !important;
646 .ui-popupwindow-corner-all {
647 -moz-border-radius: 0em !important;
648 -webkit-border-radius: 0em !important;
649 border-radius: 0em !important;