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;
106 &.ui-title-tabbar >.ui-btn {
107 // NOTE: there is an issue that when tabbar and button are
108 // used together in the header, the lower part of buttons is
109 // hidden by the tabbar. (N_SE-22253) Although No specification
110 // for this case is found in the GUI guide, this one is added
111 // to resolve this issue.
115 > .ui-btn.ui-btn-icon_only {
116 -o-border-radius : 0px;
117 -ms-border-radius : 0px;
118 -moz-border-radius : 0px;
119 -webkit-border-radius : 0px;
123 > .ui-btn:nth-child(2) {
124 right : 13 * @unit_base;
127 > .ui-btn:nth-child(3) {
128 right : 56 * @unit_base;
131 > img + h1 + .ui-btn:nth-child(3) {
132 right : 13 * @unit_base;
135 > img + h1 + .ui-btn:nth-child(3) + .ui-btn {
136 right : 56 * @unit_base;
139 > img + h1 + span.ui-title-text-sub + .ui-btn:nth-child(4) {
140 right : 11 * @unit_base;
143 > img + h1 + span.ui-title-text-sub + .ui-btn:nth-child(4) + .ui-btn {
144 right : 58 * @unit_base;
147 > .ui-btn.ui-btn-down-s {
148 background : @color_bar_btn_press;
149 color : @color_bar_title_button_text_press;
152 &.ui-title-multiline {
154 min-height : 24 * @unit_base;
155 max-height : 24 * @unit_base; /* temporary UX strange */
156 font-size : 22 * @unit_base;
158 margin: 9*@unit_base 8*@unit_base 22*@unit_base 8*@unit_base;
164 .ui-footer.ui-bar-s {
165 height : 49 * @unit_base;
168 >.ui-btn.ui-btn-back,
169 >[data-icon="naviframe-more"] {
170 background : transparent;
173 width : 56 * @unit_base;
174 height : 49 * @unit_base;
176 -webkit-box-shadow : none /* temp code */
180 [data-icon="naviframe-more"] {
182 left : 0 * @unit_base;
183 top : 0 * @unit_base;
188 .ui-icon-naviframe-more {
189 left : 13 * @unit_base;
190 top : 8 * @unit_base;
196 background: transparent;
200 >[data-role="button"] {
201 font-size : 15 * @unit_base;
203 color : @color_tabbar_btn_normal;
206 [data-role="controlgroup"] {
209 margin-top : 6 * @unit_base; /* temp value */
210 margin-bottom : 6 * @unit_base; /* temp value */
211 padding-left : 58 * @unit_base;
212 padding-right : 58 * @unit_base;
215 [data-role="button"] {
216 background : transparent;
218 border-style : solid;
219 border-color : @color_bar_divider_line;
220 border-top-width : 0px;
221 border-bottom-width : 0px;
222 border-left-width : 0px;
223 border-right-width : 1px;
225 border-top-left-radius : 0px !important;
226 border-top-right-radius : 0px !important;
227 border-bottom-left-radius : 0px !important;
228 border-bottom-right-radius : 0px !important;
233 margin-left : -4 * @unit_base;
234 margin-right : -5 * @unit_base;
236 &.ui-btn-down-s, .ui-btn-active-s {
238 background : @color_bg;
240 color : @color_bar_title_text;
250 font-size : 17 * @unit_base;
251 color : rgba(58, 58, 58, 1);
255 border-right-width : 0px;
259 border-left-width : 0px;
264 > [data-role="button"]:not([data-icon="naviframe-more"]) {
265 top : 6 * @unit_base;
269 margin-top : 8 * @unit_base;
270 margin-bottom : 8 * @unit_base;
272 > h1, h2, h3, h4, h5, h6 {
273 display: inline-block;
277 /***************************************************************************
278 Content Top calculate
279 ***************************************************************************/
285 /***************************************************************************
286 Content Top calculate
287 ***************************************************************************/
291 border: 1px solid #2a2a2a;
292 background: @color_bg;
296 font-family: Helvetica, Arial, sans-serif;
298 .ui-link-inherit { color: #fff; }
303 &:hover { color: #2489CE; }
304 &:active { color: #2489CE; }
305 &:visited { color: #2489CE; }
312 padding: 1 * @unit_base;
314 .ui-btn-box-s.ui-btn-up-s {
315 .LESSbutton_box_style;
316 .LESSborder-radius-all( 0.3rem );
317 .LESSbutton_text1_style;
320 .ui-btn.ui-btn-corner-all .ui-btn-box-s.ui-btn-up-s {
321 .LESSborder-radius-all( 1.2rem );
324 .ui-btn-box-s .ui-btn-inner {
326 border-color: rgb(199, 197, 190);
327 .LESSborder-radius-all( 0.3rem );
328 .LESSbox-boxsizing( border-box );
329 .LESSbutton_inner_box_style;
333 .ui-btn.ui-btn-corner-all.ui-btn-box-s .ui-btn-inner {
334 .LESSborder-radius-all( 1.2rem );
337 .ui-ctxpopup .ui-btn-box-s{
340 background: transparent !important;
344 color: white !important;
347 background: @color_ctxbutton_press !important;
351 color: white !important;
352 .LESSborder-radius-all( 0 );
355 background: transparent ! important;
361 .ui-ctxpopup .ui-btn-down-s {
362 background: @color_ctxbutton_press !important;
365 .ui-header .ui-btn-box-s,
366 .ui-footer .ui-btn-box-s,
367 .ui-btn-back.ui-btn-up-s,
368 .ui-btn-back.ui-btn-hover-s,
369 .ui-btn-back.ui-btn-down-s,
370 .ui-popup-container .ui-btn-box-s {
372 .LESSborder-radius-all( 0.9 rem );
375 .ui-btn-box-s.ui-btn-hover-s {
376 .LESSbutton_hover_style;
377 .LESSbutton_text1_style;
378 .LESSborder-radius-allimportant( 0.3em );
380 .ui-btn-box-s.ui-btn-hover-s.ui-btn-corner-circle {
381 .LESSborder-radius-allimportant( 1em );
383 .ui-btn-box-s.ui-btn-hover-s.ui-btn-corner-all {
384 .LESSborder-radius-allimportant( 1.2em );
386 .ui-btn-box-s.ui-btn-hover-s.ui-btn-round {
387 .LESSborder-radius-allimportant( 1.2em );
389 .ui-btn-box-s.ui-btn-down-s .ui-btn-inner {
390 .LESSbutton_down_style;
396 font-family: Helvetica, Arial, sans-serif;
397 text-decoration: none;
402 /* links within "buttons"
403 -----------------------------------------------------------------------------------------------------------*/
406 text-decoration: none !important;
410 /* Active class used as the "on" state across all themes
411 -----------------------------------------------------------------------------------------------------------*/
413 /* button default color for active state */
416 color: @color_button_text_normal;
418 text-decoration: none;
419 background: @color_button_press;
421 //font-family: Helvetica, Arial, sans-serif;
424 color: @color_button_text_normal;
428 /* button inner top highlight
429 -----------------------------------------------------------------------------------------------------------*/
438 /* corner rounding classes
439 -----------------------------------------------------------------------------------------------------------*/
442 .LESSborder-radius-topleft(.3em);
445 .LESSborder-radius-topright(.3em);
448 .LESSborder-radius-bottomleft(.3em);
451 .LESSborder-radius-bottomright(.3em);
454 .LESSborder-radius-topleft(.3em);
455 .LESSborder-radius-topright(.3em);
458 .LESSborder-radius-bottomleft(.3em);
459 .LESSborder-radius-bottomright(.3em);
462 .LESSborder-radius-topright(.3em);
463 .LESSborder-radius-bottomright(.3em);
466 .LESSborder-radius-topleft(.3em);
467 .LESSborder-radius-bottomleft(.3em);
470 //.LESSborder-radius-all(.3em);
473 .LESSborder-radius-all(0);
476 /***************************************************************************
478 ***************************************************************************/
479 .ui-header, .ui-footer {
480 .ui-btn .ui-btn-icon-only .ui-icon {
481 width: 32 * @unit_base;
482 height: 32 * @unit_base;
487 .ui-btn-back .ui-btn-inner .ui-icon-header-back-btn {
488 width: 32 * @unit_base;
489 height: 32 * @unit_base;
491 background-repeat: no-repeat;
492 background-size: 100% 100%;
497 .ui-icon-header-back-btn { background-image: url(images/page/00_icon_Back.png); }
498 .ui-icon-naviframe-more { background-image: url(images/page/00_icon_more.png); }
499 .ui-icon-naviframe-cancel { background-image: url(images/00_icon_cancel.png); } /* FIXME : check ux if it needs to be deprecated... */
500 .ui-icon-naviframe-edit { background-image: url(images/page/00_icon_edit.png); }
501 .ui-icon-naviframe-plus { background-image: url(images/page/00_icon_plus.png); }
504 .ui-btn-down-s, .ui-btn-hover-s {
505 .ui-icon-header-back-btn { background-image: url(images/page/00_icon_Back_press.png); }
506 .ui-icon-naviframe-more { background-image: url(images/page/00_icon_more_press.png); }
507 .ui-icon-naviframe-cancel { background-image: url(images/00_icon_cancel_press.png); } /* FIXME: check ux if it needs to be deprecated.. */
508 .ui-icon-naviframe-edit { background-image: url(images/page/00_icon_edit_press.png); }
509 .ui-icon-naviframe-plus { background-image: url(images/page/00_icon_plus_press.png); }
513 -----------------------------------------------------------------------------------------------------------*/
515 filter: Alpha(Opacity=30);
521 cursor: default !important;
522 pointer-events: none;