@import "config.less";
+/* Resource color mapping table
+
+@color_popup_title_bg: popup_title_bg.png
+@color_popup_text_bg: popup_bg.png
+@color_popup_button_bg: popup_button_bg.png
+@color_popup_font: Popup title & default
+@color_popup_text_font: Popup text
+
+*/
+
+
@popupwindow-text-padding-vert: 22 * @unit_base;
@popupwindow-text-padding-hori: 16 * @unit_base;
+
.ui-popupwindow-screen {
background: #000000;
opacity: 0;
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- z-index: @z_base_popup;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ z-index: @z_base_popup;
}
.ui-popupwindow {
position: absolute;
z-index: (@z_base_popup + 1) !important;
- background: #536771; //recheck color and change it to var
- color: white; //recheck color and change it to var
+ color: @color_popup_font;
+
+ //FIXME : remove background & padding if there is no padding.
+ .LESSpopup_padding_style;
+ background: @color_popup_text_bg;
+
+ // --------- common style in popup window ------------- //
+ .popup-title {
+ width: 100%;
+ height: 100%;
+ font-size: @font_size_popup_basic_style_title;
+ background: @color_popup_title_bg;
+ p {
+ margin: 0*@unit_base 0*@unit_base;
+ padding: 13*@unit_base 0*@unit_base;
+ }
+ }
- padding: 2*@unit_base 2*@unit_base;
+ .popup-text {
+ width: 100%;
+ color: @color_popup_text_font;
+ font-size: @font_size_popup_info_style;
+ background: @color_popup_text_bg;
+ p {
+ text-align: center;
+ padding: @popupwindow-text-padding-vert @popupwindow-text-padding-hori;
+ }
+ }
+ // ----------------------------------------------------- //
.center_info {
.LESSbox-orient(vertical);
.LESSbox-align(center);
.LESSbox-pack(center);
-
- .popup-text {
- font-size: @font_size_popup_info_style;
- background: @color_popup_text_background;
- width: 100%;
- p {
- text-align: center;
- padding: @popupwindow-text-padding-vert @popupwindow-text-padding-hori;
- }
- }
+
+ // .popup-text
}
.center_title {
-
.LESSdisplaybox();
.LESSbox-orient(vertical);
.LESSbox-align(center);
.LESSbox-pack(center);
- text-align: center;
+ text-align: center;
- .popup-title {
- font-size: @font_size_popup_basic_style_title;
- height: 64*@unit_base;
- p {
- margin: 0*@unit_base 0*@unit_base;
- padding: 13*@unit_base 0*@unit_base;
- }
- }
- .popup-text {
- font-size: @font_size_popup_info_style;
- background: @color_popup_text_background;
- width: 100%;
- p {
- text-align: center;
- padding: @popupwindow-text-padding-vert @popupwindow-text-padding-hori;
- }
- }
+ // .popup-title
+ // .popup-text
}
.center_basic_1btn {
.LESSbox-align(center);
.LESSbox-pack(center);
- text-align: center;
+ text-align: center;
- .popup-text {
- font-size: @font_size_popup_info_style;
- background: @color_popup_text_background;
- width: 100%;
- p {
- text-align: center;
- padding: @popupwindow-text-padding-vert @popupwindow-text-padding-hori;
- }
- }
+ // .popup-text
.popup-button-bg {
font-size: @font_size_popup_button_text;
- background: @color_popup_button_background;
+ background: @color_popup_button_bg;
width: 100%;
padding-top: 11*@unit_base;
padding-bottom: 11*@unit_base;
vertical-align: middle;
-
+
.ui-btn {
width: 402*@unit_base;
height: 74*@unit_base;
.LESSbox-align(center);
.LESSbox-pack(center);
- text-align: center;
+ text-align: center;
- .popup-text {
- font-size: @font_size_popup_info_style;
- background: @color_popup_text_background;
- width: 100%;
- p {
- text-align: center;
- padding: @popupwindow-text-padding-vert @popupwindow-text-padding-hori;
- }
- }
+ // .popup-text
.popup-button-bg {
font-size: @font_size_popup_button_text;
- background: @color_popup_button_background;
+ background: @color_popup_button_bg;
width: 100%;
padding-top: 11*@unit_base;
padding-bottom: 11*@unit_base;
vertical-align: middle;
-
+
.ui-btn {
width: 274*@unit_base;
height: 74*@unit_base;
.LESSbox-align(center);
.LESSbox-pack(center);
- text-align: center;
+ text-align: center;
- .popup-text {
- font-size: @font_size_popup_info_style;
- background: @color_popup_text_background;
- width: 100%;
- p {
- text-align: center;
- padding: @popupwindow-text-padding-vert @popupwindow-text-padding-hori;
- }
- }
+ // .popup-text
.popup-button-bg {
font-size: @font_size_popup_button_text;
- background: @color_popup_button_background;
+ background: @color_popup_button_bg;
width: 100%;
padding-top: 11*@unit_base;
padding-bottom: 11*@unit_base;
text-align: center;
- .popup-title {
- font-size: @font_size_popup_basic_style_title;
- height: 64*@unit_base;
- p {
- margin: 0*@unit_base 0*@unit_base;
- padding: 13*@unit_base 0*@unit_base;
- }
- }
- .popup-text {
- font-size: @font_size_popup_info_style;
- background: @color_popup_text_background;
- width: 100%;
- p {
- text-align: center;
- padding: @popupwindow-text-padding-vert @popupwindow-text-padding-hori;
- }
- }
+ // .popup-title
+ // .popup-text
.popup-button-bg {
font-size: @font_size_popup_button_text;
- background: @color_popup_button_background;
+ background: @color_popup_button_bg;
width: 100%;
padding-top: 11*@unit_base;
padding-bottom: 11*@unit_base;
vertical-align: middle;
-
+
.ui-btn {
width: 402*@unit_base;
height: 74*@unit_base;
text-align: center;
- .popup-title {
- font-size: @font_size_popup_basic_style_title;
- height: 64*@unit_base;
- p {
- margin: 0*@unit_base 0*@unit_base;
- padding: 13*@unit_base 0*@unit_base;
- }
- }
- .popup-text {
- font-size: @font_size_popup_info_style;
- background: @color_popup_text_background;
- width: 100%;
- p {
- text-align: center;
- padding: @popupwindow-text-padding-vert @popupwindow-text-padding-hori;
- }
- }
+ // .popup-title
+ // .popup-text
.popup-button-bg {
font-size: @font_size_popup_button_text;
- background: @color_popup_button_background;
+ background: @color_popup_button_bg;
width: 100%;
padding-top: 11*@unit_base;
padding-bottom: 11*@unit_base;
vertical-align: middle;
-
+
.ui-btn {
width: 274*@unit_base;
height: 74*@unit_base;
.LESSbox-align(center);
.LESSbox-pack(center);
- text-align: center;
+ text-align: center;
- .popup-title {
- font-size: @font_size_popup_basic_style_title;
- height: 64*@unit_base;
- p {
- margin: 0*@unit_base 0*@unit_base;
- padding: 13*@unit_base 0*@unit_base;
- }
- }
- .popup-text {
- font-size: @font_size_popup_info_style;
- background: @color_popup_text_background;
- width: 100%;
- p {
- text-align: center;
- padding: @popupwindow-text-padding-vert @popupwindow-text-padding-hori;
- }
- }
+ // .popup-title
+ // .popup-text
.popup-button-bg {
font-size: @font_size_popup_button_text;
- background: @color_popup_button_background;
+ background: @color_popup_button_bg;
width: 100%;
padding-top: 11*@unit_base;
padding-bottom: 11*@unit_base;
.LESSbox-align(center);
.LESSbox-pack(center);
- text-align: center;
+ text-align: center;
- .popup-text {
- font-size: @font_size_popup_info_style;
- background: @color_popup_text_background;
- width: 100%;
- p {
- text-align: center;
- padding: @popupwindow-text-padding-vert @popupwindow-text-padding-hori;
- }
- }
+ // .popup-text
.popup-button-bg {
font-size: @font_size_popup_button_text;
- background: @color_popup_button_background;
+ background: @color_popup_button_bg;
width: 100%;
padding-top: 1px;
padding-bottom: 16*@unit_base;
vertical-align: middle;
-
+
.ui-btn {
width: 356*@unit_base;
height: 74*@unit_base;
.LESSbox-align(center);
.LESSbox-pack(center);
- text-align: center;
+ text-align: center;
- .popup-text {
- font-size: @font_size_popup_info_style;
- background: @color_popup_text_background;
- width: 100%;
- p {
- text-align: center;
- padding: @popupwindow-text-padding-vert @popupwindow-text-padding-hori;
- }
- }
+ // .popup-text
.popup-check-bg {
font-size: @font_size_popup_info_style;
- background: @color_popup_text_background;
+ background: @color_popup_text_bg;
width: 100%;
padding-top: 0*@unit_base;
padding-bottom: 22*@unit_base;
.ui-checkbox {
.ui-btn {
text-align: center;
- background: @color_popup_text_background;
+ background: @color_popup_text_bg;
border: 0*@unit_base;
.ui-btn-inner {
.popup-button-bg {
font-size: @font_size_popup_button_text;
- background: @color_popup_button_background;
+ background: @color_popup_button_bg;
width: 100%;
padding-top: 11*@unit_base;
padding-bottom: 11*@unit_base;
vertical-align: middle;
-
+
.ui-btn {
width: 274*@unit_base;
height: 74*@unit_base;
text-align: center;
- .popup-title {
- font-size: @font_size_popup_basic_style_title;
- height: 64*@unit_base;
- p {
- margin: 0*@unit_base 0*@unit_base;
- padding: 13*@unit_base 0*@unit_base;
- }
- }
+ // .popup-title
+
.popup-scroller-bg {
width: 100%;
overflow: hidden;
- background: black;
+ background: @color_popup_scroller_bg;
.ui-listview {
height: 512*@unit_base;
}
.popup-button-bg {
font-size: @font_size_popup_button_text;
- background: @color_popup_button_background;
+ background: @color_popup_button_bg;
width: 100%;
padding-top: 11*@unit_base;
padding-bottom: 11*@unit_base;
vertical-align: middle;
-
+
.ui-btn {
width: 402*@unit_base;
height: 74*@unit_base;
}
}
- }
+ }
.center_liststyle_2btn {
.LESSdisplaybox();
text-align: center;
- .popup-title {
- font-size: @font_size_popup_basic_style_title;
- height: 64*@unit_base;
- p {
- margin: 0*@unit_base 0*@unit_base;
- padding: 13*@unit_base 0*@unit_base;
- }
- }
+ // .popup-title
+
.popup-scroller-bg {
width: 100%;
overflow: hidden;
}
.popup-button-bg {
font-size: @font_size_popup_button_text;
- background: @color_popup_button_background;
+ background: @color_popup_button_bg;
width: 100%;
padding-top: 11*@unit_base;
padding-bottom: 11*@unit_base;
vertical-align: middle;
-
+
.ui-btn {
width: 274*@unit_base;
height: 74*@unit_base;
display: inline-block;
}
}
- }
+ }
.center_liststyle_3btn {
.LESSdisplaybox();
text-align: center;
- .popup-title {
- font-size: @font_size_popup_basic_style_title;
- height: 64*@unit_base;
- p {
- margin: 0*@unit_base 0*@unit_base;
- padding: 13*@unit_base 0*@unit_base;
- }
- }
+ // .popup-title
+
.popup-scroller-bg {
width: 100%;
overflow: hidden;
}
.popup-button-bg {
font-size: @font_size_popup_button_text;
- background: @color_popup_button_background;
+ background: @color_popup_button_bg;
width: 100%;
padding-top: 11*@unit_base;
padding-bottom: 11*@unit_base;
vertical-align: middle;
-
+
.ui-btn {
width: 186*@unit_base;
height: 74*@unit_base;
display: inline-block;
}
}
- }
+ }
.center_progressbar {
.popup-text {
font-size: @font_size_popup_center_progressbar_title;
font-color: @color_popup_center_progressbar_title;
- background: @color_popup_text_background;
+ background: @color_popup_text_bg;
width: 100%;
height: 70*@unit_base;
p {
.popup-text-bottom-bg {
font-size: @font_size_popup_center_progressbar_title;
font-color: @color_popup_center_progressbar_title;
- background: @color_popup_text_background;
+ background: @color_popup_text_bg;
width: 100%;
vertical-align: middle;
height: 48*@unit_base;
padding: 0*@unit_base 16*@unit_base 0*@unit_base 16*@unit_base;
text-align: left;
-
+
display: inline-block;
}
.text-right {
.popup-button-bg {
font-size: @font_size_popup_button_text;
- background: @color_popup_button_background;
+ background: @color_popup_button_bg;
width: 100%;
padding-top: 11*@unit_base;
padding-bottom: 11*@unit_base;
vertical-align: middle;
-
+
.ui-btn {
width: 402*@unit_base;
height: 74*@unit_base;
}
.popup-progress-bg {
- background: @color_popup_text_background;
+ background: @color_popup_text_bg;
width: 100%;
height: 100%;
}
}
-
+
.centertext_progressbar {
.LESSdisplaybox();
.popup-text {
font-size: @font_size_popup_center_progressbar_title;
font-color: @color_popup_center_progressbar_title;
- background: @color_popup_text_background;
+ background: @color_popup_text_bg;
width: 100%;
padding-top: 22*@unit_base;
padding-bottom: 16*@unit_base;
.popup-text-bottom-bg {
font-size: @font_size_popup_center_progressbar_title;
font-color: @color_popup_center_progressbar_title;
- background: @color_popup_text_background;
+ background: @color_popup_text_bg;
width: 100%;
vertical-align: middle;
height: 40*@unit_base;
padding: 16*@unit_base 16*@unit_base 22*@unit_base 16*@unit_base;
text-align: left;
-
+
display: inline-block;
}
.text-right {
.popup-button-bg {
font-size: @font_size_popup_button_text;
- background: @color_popup_button_background;
+ background: @color_popup_button_bg;
width: 100%;
padding-top: 11*@unit_base;
padding-bottom: 11*@unit_base;
vertical-align: middle;
-
+
.ui-btn {
width: 402*@unit_base;
height: 74*@unit_base;
}
.popup-progress-bg {
- background: @color_popup_text_background;
+ background: @color_popup_text_bg;
width: 100%;
height: 100%;
}
}
-
+ .ui-btn{
+ .LESSpopup_button_style;
+ }
+ .ui-btn.ui-btn-hover-s{
+ .LESSpopup_button_hover_style;
+ }
+ .ui-btn.ui-btn-down-s{
+ .LESSpopup_button_press_style;
+ }
}
.ui-popupwindow > .ui-volumecontrol {
}
.ui-corner-all {
- -moz-border-radius: 0.3em !important;
- -webkit-border-radius: 0.3em !important;
+ -moz-border-radius: 0.3em !important;
+ -webkit-border-radius: 0.3em !important;
border-radius: 0.3em !important;
}
}
-
-
-
-
.ui-popupwindow-corner-all {
- -moz-border-radius: 0em !important;
- -webkit-border-radius: 0em !important;
+ -moz-border-radius: 0em !important;
+ -webkit-border-radius: 0em !important;
border-radius: 0em !important;
}