4 /***************************************************************************
7 ***************************************************************************/
11 background : rgba(248, 246, 239, 1); // #F8F6EF /* Header Background */
12 color: @color_bar_title_text;
13 font-family: Helvetica, Arial, sans-serif;
15 font-size : 28 * @unit_base;
18 color: @color_bar_title_text;
22 > .ui-btn.ui-btn-back {
23 background : transparent;
28 .ui-icon-header-back-btn {
31 right : 13 * @unit_base;
43 min-height : 55 * @unit_base;
46 display: inline-block;
47 color : @color_bar_title_text;
48 min-height : 28 * @unit_base;
49 max-height : 34 * @unit_base; /* temporary UX strange */
50 font-size : 28 * @unit_base;
51 text-overflow: ellipsis;
54 outline: 0 !important;
57 margin: 16*@unit_base 8*@unit_base 5*@unit_base 8*@unit_base;
61 /* header button position : need to press area more... */
63 .ui-btn-inner.ui-btn-icon-only .ui-icon {
70 > .ui-btn.ui-btn-back {
71 right : 13 * @unit_base;
75 display: inline-block;
76 height: 16 * @unit_base;
77 width: 16 * @unit_base;
78 margin-left: 8 * @unit_base;
83 top : 36 * @unit_base;
84 left : 8 * @unit_base;
86 font-size : 12 * @unit_base;
89 height: 16 * @unit_base;
90 width: 16 * @unit_base;
91 margin-left: 8 * @unit_base;
97 top : 16 * @unit_base;
100 height : 34 * @unit_base;
101 width : 34 * @unit_base;
103 background: transparent;
104 color : @color_bar_title_button_text;
107 > .ui-btn.ui-btn-icon_only {
108 -o-border-radius : 0px;
109 -ms-border-radius : 0px;
110 -moz-border-radius : 0px;
111 -webkit-border-radius : 0px;
115 > .ui-btn:nth-child(2) {
116 right : 13 * @unit_base;
119 > .ui-btn:nth-child(3) {
120 right : 56 * @unit_base;
123 > img + h1 + a.ui-btn:nth-child(3) {
124 right : 13 * @unit_base;
127 > img + h1 + a.ui-btn:nth-child(4) {
128 right : 56 * @unit_base;
131 > img + h1 + span.ui-title-text-sub + a.ui-btn:nth-child(4) {
132 right : 11 * @unit_base;
135 > img + h1 + span.ui-title-text-sub + a.ui-btn:nth-child(5) {
136 right : 58 * @unit_base;
139 > .ui-btn.ui-btn-down-s {
140 background : @color_bar_btn_press;
141 color : @color_bar_title_button_text_press;
144 &.ui-title-multiline {
146 min-height : 24 * @unit_base;
147 max-height : 24 * @unit_base; /* temporary UX strange */
148 font-size : 22 * @unit_base;
150 margin: 9*@unit_base 8*@unit_base 22*@unit_base 8*@unit_base;
156 .ui-footer.ui-bar-s {
157 height : 49 * @unit_base;
160 >.ui-btn.ui-btn-back,
161 >[data-icon="naviframe-more"] {
162 background : transparent;
165 width : 56 * @unit_base;
166 height : 49 * @unit_base;
168 -webkit-box-shadow : none /* temp code */
172 [data-icon="naviframe-more"] {
174 left : 0 * @unit_base;
175 top : 0 * @unit_base;
180 .ui-icon-naviframe-more {
181 left : 13 * @unit_base;
182 top : 8 * @unit_base;
188 background: transparent;
192 >[data-role="button"] {
193 font-size : 15 * @unit_base;
195 color : @color_tabbar_btn_normal;
198 [data-role="controlgroup"] {
201 margin-top : 6 * @unit_base; /* temp value */
202 margin-bottom : 6 * @unit_base; /* temp value */
203 padding-left : 58 * @unit_base;
204 padding-right : 58 * @unit_base;
207 [data-role="button"] {
208 background : transparent;
210 min-width : 77 * @unit_base;
212 border-style : solid;
213 border-color : @color_bar_divider_line;
214 border-top-width : 0px;
215 border-bottom-width : 0px;
216 border-left-width : 1px;
217 border-right-width : 1px;
223 margin-left : -4 * @unit_base;
224 margin-right : -5 * @unit_base;
226 &.ui-btn-down-s, .ui-btn-active-s {
228 background : @color_bg;
230 color : @color_bar_title_text;
240 font-size : 17 * @unit_base;
241 color : rgba(58, 58, 58, 1);
245 border-right-width : 0px;
249 border-left-width : 0px;
254 > [data-role="button"]:not([data-icon="naviframe-more"]) {
255 top : 6 * @unit_base;
259 margin-top : 8 * @unit_base;
260 margin-bottom : 8 * @unit_base;
264 /***************************************************************************
265 Content Top calculate
266 ***************************************************************************/
272 /***************************************************************************
273 Content Top calculate
274 ***************************************************************************/
278 border: 1px solid #2a2a2a;
279 background: @color_bg;
283 font-family: Helvetica, Arial, sans-serif;
285 .ui-link-inherit { color: #fff; }
290 &:hover { color: #2489CE; }
291 &:active { color: #2489CE; }
292 &:visited { color: #2489CE; }
299 padding: 1 * @unit_base;
301 .ui-btn-box-s.ui-btn-up-s {
302 .LESSbutton_box_style;
303 .LESSborder-radius-all( 0.3rem );
304 .LESSbutton_text1_style;
307 .ui-ctxpopup .ui-btn-box-s{
310 background: transparent !important;
314 color: white !important;
317 background: @color_ctxbutton_press !important;
321 color: white !important;
322 .LESSborder-radius-all( 0 );
325 background: transparent ! important;
331 .ui-ctxpopup .ui-btn-down-s {
332 background: @color_ctxbutton_press !important;
335 .ui-btn-box-s .ui-btn-inner {
337 border-color: rgb(199, 197, 190);
338 .LESSborder-radius-all( 0.3rem );
339 .LESSbox-boxsizing( border-box );
340 .LESSbutton_inner_box_style;
344 .ui-header .ui-btn-box-s,
345 .ui-footer .ui-btn-box-s,
346 .ui-btn-back.ui-btn-up-s,
347 .ui-btn-back.ui-btn-hover-s,
348 .ui-btn-back.ui-btn-down-s,
349 .ui-popup-container .ui-btn-box-s {
351 .LESSborder-radius-all( 0.9 rem );
354 .ui-btn-box-s.ui-btn-hover-s {
355 .LESSbutton_hover_style;
356 .LESSbutton_text1_style;
359 .ui-btn-box-s.ui-btn-hover-s.ui-btn-corner-circle{
360 .LESScirclebutton_hover_style;
363 .ui-btn-box-s.ui-btn-down-s .ui-btn-inner {
364 .LESSbutton_down_style;
370 font-family: Helvetica, Arial, sans-serif;
371 text-decoration: none;
374 .ui-btn-down-s.ui-btn-corner-circle{
375 .LESScirclebutton_press_style;
379 /* links within "buttons"
380 -----------------------------------------------------------------------------------------------------------*/
383 text-decoration: none !important;
387 /* Active class used as the "on" state across all themes
388 -----------------------------------------------------------------------------------------------------------*/
390 /* button default color for active state */
393 color: @color_button_text_normal;
395 text-decoration: none;
396 background: @color_button_press;
398 //font-family: Helvetica, Arial, sans-serif;
401 color: @color_button_text_normal;
405 /* button inner top highlight
406 -----------------------------------------------------------------------------------------------------------*/
415 /* corner rounding classes
416 -----------------------------------------------------------------------------------------------------------*/
419 .LESSborder-radius-topleft(.3em);
422 .LESSborder-radius-topright(.3em);
425 .LESSborder-radius-bottomleft(.3em);
428 .LESSborder-radius-bottomright(.3em);
431 .LESSborder-radius-topleft(.3em);
432 .LESSborder-radius-topright(.3em);
435 .LESSborder-radius-bottomleft(.3em);
436 .LESSborder-radius-bottomright(.3em);
439 .LESSborder-radius-topright(.3em);
440 .LESSborder-radius-bottomright(.3em);
443 .LESSborder-radius-topleft(.3em);
444 .LESSborder-radius-bottomleft(.3em);
447 //.LESSborder-radius-all(.3em);
450 .LESSborder-radius-all(0);
453 /***************************************************************************
455 ***************************************************************************/
456 .ui-header, .ui-footer {
457 .ui-btn .ui-btn-icon-only .ui-icon {
458 width: 32 * @unit_base;
459 height: 32 * @unit_base;
464 .ui-btn-back .ui-btn-inner .ui-icon-header-back-btn {
465 width: 32 * @unit_base;
466 height: 32 * @unit_base;
468 background-repeat: no-repeat;
469 background-size: 100% 100%;
474 .ui-icon-header-back-btn { background-image: url(images/page/00_icon_Back.png); }
475 .ui-icon-naviframe-more { background-image: url(images/page/00_icon_more.png); }
476 .ui-icon-naviframe-cancel { background-image: url(images/00_icon_cancel.png); } /* FIXME : check ux if it needs to be deprecated... */
477 .ui-icon-naviframe-edit { background-image: url(images/page/00_icon_edit.png); }
478 .ui-icon-naviframe-plus { background-image: url(images/page/00_icon_plus.png); }
481 .ui-btn-down-s, .ui-btn-hover-s {
482 .ui-icon-header-back-btn { background-image: url(images/page/00_icon_Back_press.png); }
483 .ui-icon-naviframe-more { background-image: url(images/page/00_icon_more_press.png); }
484 .ui-icon-naviframe-cancel { background-image: url(images/00_icon_cancel_press.png); } /* FIXME: check ux if it needs to be deprecated.. */
485 .ui-icon-naviframe-edit { background-image: url(images/page/00_icon_edit_press.png); }
486 .ui-icon-naviframe-plus { background-image: url(images/page/00_icon_plus_press.png); }
490 -----------------------------------------------------------------------------------------------------------*/
492 filter: Alpha(Opacity=30);
498 cursor: default !important;
499 pointer-events: none;