4 /***************************************************************************
7 ***************************************************************************/
11 background : @color_bar_naviframe_bg; /* Header Background */
12 color: @color_bar_title_text;
13 font-family: @font_family;
15 font-size : 28 * @unit_base;
18 color: @color_bar_title_text;
22 > .ui-btn.ui-btn-back,
23 > .ui-btn.ui-btn-footer-down {
24 background : transparent;
29 .ui-icon-header-back-btn {
32 right : 13 * @unit_base;
37 > .ui-btn.ui-btn-footer-down {
52 min-height : 55 * @unit_base;
55 display: inline-block;
56 color : @color_bar_title_text;
57 min-height : 28 * @unit_base;
58 max-height : 34 * @unit_base; /* temporary UX strange */
59 font-size : 28 * @unit_base;
60 font-weight : 500; /* tizen font weight tuning */
61 text-overflow: ellipsis;
64 outline: 0 !important;
67 margin: 16*@unit_base 8*@unit_base 5*@unit_base 8*@unit_base;
71 /* header button position : need to press area more... */
73 >.naviframe-button.ui-btn {
74 .ui-btn-inner.ui-btn-icon-only {
75 .LESSbox-boxsizing( border-box );
83 >.naviframe-button.ui-btn {
84 .ui-btn-inner .ui-icon {
89 >.ui-btn:not(.ui-btn-icon-notext),
90 >.naviframe-button.ui-btn:not(.ui-btn-icon-notext) {
91 .ui-btn-inner.ui-btn-icon-only {
96 >.ui-btn:not(.ui-btn-icon_only),
97 >.naviframe-button.ui-btn:not(.ui-btn-icon_only) {
98 width : 53 * @unit_base;
99 height : 18 * @unit_base;
101 bottom : 10 * @unit_base;
107 > .ui-btn.ui-btn-back,
108 > .ui-btn.ui-btn-footer-down {
109 right : 13 * @unit_base;
110 .ui-icon-header-back-btn {
117 display: inline-block;
118 height: 20 * @unit_base;
119 width: 20 * @unit_base;
120 margin-left: 8 * @unit_base;
121 margin-top : 22 * @unit_base;
126 top : 36 * @unit_base;
127 left : 8 * @unit_base;
129 font-size : 12 * @unit_base;
132 height: 16 * @unit_base;
133 width: 16 * @unit_base;
134 margin-left: 8 * @unit_base;
139 > .naviframe-button.ui-btn {
141 top : 16 * @unit_base;
144 height : 34 * @unit_base;
145 width : 34 * @unit_base;
147 background: transparent;
148 color : @color_bar_title_button_text;
150 &.ui-title-tabbar >.ui-btn {
151 // NOTE: there is an issue that when tabbar and button are
152 // used together in the header, the lower part of buttons is
153 // hidden by the tabbar. (N_SE-22253) Although No specification
154 // for this case is found in the GUI guide, this one is added
155 // to resolve this issue.
159 > .ui-btn.ui-btn-icon_only,
160 > .naviframe-button.ui-btn.ui-btn-icon_only {
161 -o-border-radius : 0px;
162 -ms-border-radius : 0px;
163 -moz-border-radius : 0px;
164 -webkit-border-radius : 0px;
169 right : 11 * @unit_base;
173 right : 56 * @unit_base;
176 > .ui-btn:not(.ui-btn-icon_only):nth-child(2),
177 > .naviframe-button.ui-btn:not(.ui-btn-icon_only):nth-child(2) {
178 right : 7 * @unit_base;
181 > .ui-btn:not(.ui-btn-icon_only):nth-child(3),
182 > .naviframe-button.ui-btn:not(.ui-btn-icon_only):nth-child(3) {
183 right : 62 * @unit_base;
187 padding-left : 24 * @unit_base;
190 > img + h1 + .ui-btn:not(.ui-btn-icon_only):nth-child(3),
191 > img + h1 + .naviframe-button.ui-btn:not(.ui-btn-icon_only):nth-child(3) {
192 right : 7 * @unit_base;
195 > img + h1 + .ui-btn:not(.ui-btn-icon_only):nth-child(3) + .ui-btn:not(.ui-btn-icon_only),
196 > img + h1 + .naviframe-button.ui-btn:not(.ui-btn-icon_only):nth-child(3) + .naviframe-button.ui-btn:not(.ui-btn-icon_only) {
197 right : 62 * @unit_base;
200 > img + h1 + span.ui-title-text-sub + .ui-btn:not(.ui-btn-icon_only):nth-child(4),
201 > img + h1 + span.ui-title-text-sub + .naviframe-button.ui-btn:not(.ui-btn-icon_only):nth-child(4) {
202 right : 7 * @unit_base;
205 > img + h1 + span.ui-title-text-sub + .ui-btn:not(.ui-btn-icon_only):nth-child(4) + .ui-btn:not(.ui-btn-icon_only),
206 > img + h1 + span.ui-title-text-sub + .naviframe-button.ui-btn:not(.ui-btn-icon_only):nth-child(4) + .naviframe-button.ui-btn:not(.ui-btn-icon_only) {
207 right : 62 * @unit_base;
210 > .ui-btn.ui-btn-down-s {
211 background : @color_bar_btn_press;
212 color : @color_bar_title_button_text_press;
215 &.ui-title-multiline {
217 margin-top : 23 * @unit_base;
221 min-height : 24 * @unit_base;
222 max-height : 24 * @unit_base; /* temporary UX strange */
223 font-size : 22 * @unit_base;
225 margin: 9*@unit_base 8*@unit_base 22*@unit_base 8*@unit_base;
227 img + .ui-title + .ui-title-text-sub {
228 left : 33 * @unit_base;
234 .ui-footer.ui-bar-s {
235 height : 49 * @unit_base;
238 >.ui-btn.ui-btn-back,
239 >.ui-btn.ui-btn-footer-down,
240 >[data-icon="naviframe-more"] {
241 background : transparent;
244 width : 56 * @unit_base;
245 height : 49 * @unit_base;
247 -webkit-box-shadow : none /* temp code */
251 >.ui-btn.ui-btn-back,
252 >.ui-btn.ui-btn-footer-down {
256 >.ui-btn.ui-btn-footer-down {
259 right : 13 * @unit_base;
263 [data-icon="naviframe-more"] {
265 left : 0 * @unit_base;
266 top : 0 * @unit_base;
271 .ui-icon-naviframe-more {
272 left : 13 * @unit_base;
273 top : 8 * @unit_base;
279 background: transparent;
283 >[data-role="button"] {
284 font-size : 15 * @unit_base;
286 color : @color_button_text_normal;
289 [data-role="controlgroup"] {
292 margin-top : 6 * @unit_base; /* temp value */
293 margin-bottom : 6 * @unit_base; /* temp value */
294 padding-left : 58 * @unit_base;
295 padding-right : 58 * @unit_base;
298 [data-role="button"] {
299 background : transparent;
301 border-style : solid;
302 border-color : @color_bar_divider_line;
303 border-top-width : 0px;
304 border-bottom-width : 0px;
305 border-left-width : 1px;
306 border-right-width : 1px;
308 .LESSborder-radius-all(0);
313 margin-left : -4 * @unit_base;
314 margin-right : -5 * @unit_base;
316 .LESSborder-radius-all(0);
318 &.ui-btn-down-s, .ui-btn-active-s {
319 .LESSborder-radius-all(0);
321 background : @color_bg;
323 color : @color_bar_title_text;
329 .LESSborder-radius-all(0);
334 font-size : 17 * @unit_base;
335 color : color_button_text_normal;
339 border-right-width : 0px;
343 border-left-width : 0px;
348 > [data-role="button"]:not([data-icon="naviframe-more"]) {
349 top : 6 * @unit_base;
353 margin-top : 8 * @unit_base;
354 margin-bottom : 8 * @unit_base;
356 > h1, h2, h3, h4, h5, h6 {
357 display: inline-block;
361 /***************************************************************************
362 Content Top calculate
363 ***************************************************************************/
369 /***************************************************************************
370 Content Top calculate
371 ***************************************************************************/
375 border: 1px solid #2a2a2a;
376 background: @color_bg;
380 font-family: @font_family;
382 .ui-link-inherit { color: #fff; }
387 &:hover { color: #2489CE; }
388 &:active { color: #2489CE; }
389 &:visited { color: #2489CE; }
396 padding: 1 * @unit_base;
398 .ui-btn-box-s.ui-btn-up-s {
399 .LESSbutton_box_style;
400 .LESSborder-radius-all( 0.3rem );
401 .LESSbutton_text1_style;
404 .ui-btn.ui-btn-corner-all .ui-btn-box-s.ui-btn-up-s {
405 .LESSborder-radius-all( 1.2rem );
408 .ui-btn-box-s .ui-btn-inner {
410 border-color: @color_button_inner_border;
411 .LESSborder-radius-all( 0.3rem );
412 .LESSbox-boxsizing( border-box );
413 .LESSbutton_inner_box_style;
417 .ui-btn.ui-btn-corner-all.ui-btn-box-s .ui-btn-inner {
418 .LESSborder-radius-all( 1.2rem );
421 .ui-ctxpopup .ui-btn-box-s{
424 background: transparent !important;
428 color: white !important;
431 background: @color_ctxbutton_press !important;
435 color: white !important;
436 .LESSborder-radius-all( 0 );
439 background: transparent ! important;
445 .ui-ctxpopup .ui-btn-down-s {
446 background: @color_ctxbutton_press !important;
449 .ui-header .ui-btn-box-s,
450 .ui-footer .ui-btn-box-s,
451 .ui-btn-back.ui-btn-up-s,
452 .ui-btn-back.ui-btn-hover-s,
453 .ui-btn-back.ui-btn-down-s,
454 .ui-btn-footer-down.ui-btn-up-s,
455 .ui-btn-footer-down.ui-btn-hover-s,
456 .ui-btn-footer-down.ui-btn-down-s,
457 .ui-popup-container .ui-btn-box-s {
459 .LESSborder-radius-all( 0.9 rem );
462 .ui-btn-box-s.ui-btn-hover-s {
463 .LESSbutton_hover_style;
464 .LESSbutton_text1_style;
465 .LESSborder-radius-allimportant( 0.3em );
467 .ui-btn-box-s.ui-btn-hover-s.ui-btn-corner-circle {
468 .LESSborder-radius-allimportant( 1em );
470 .ui-btn-box-s.ui-btn-hover-s.ui-btn-corner-all {
471 .LESSborder-radius-allimportant( 1.2em );
473 .ui-btn-box-s.ui-btn-hover-s.ui-btn-round {
474 .LESSborder-radius-allimportant( 1.2em );
476 .ui-btn-box-s.ui-btn-down-s .ui-btn-inner {
477 .LESSbutton_down_style;
483 font-family: @font_family;
484 text-decoration: none;
489 /* links within "buttons"
490 -----------------------------------------------------------------------------------------------------------*/
493 text-decoration: none !important;
497 /* Active class used as the "on" state across all themes
498 -----------------------------------------------------------------------------------------------------------*/
500 /* button default color for active state */
503 color: @color_button_text_normal;
505 text-decoration: none;
506 background: @color_button_press;
510 color: @color_button_text_normal;
514 /* button inner top highlight
515 -----------------------------------------------------------------------------------------------------------*/
524 /* corner rounding classes
525 -----------------------------------------------------------------------------------------------------------*/
528 .LESSborder-radius-topleft(.3em);
531 .LESSborder-radius-topright(.3em);
534 .LESSborder-radius-bottomleft(.3em);
537 .LESSborder-radius-bottomright(.3em);
540 .LESSborder-radius-topleft(.3em);
541 .LESSborder-radius-topright(.3em);
544 .LESSborder-radius-bottomleft(.3em);
545 .LESSborder-radius-bottomright(.3em);
548 .LESSborder-radius-topright(.3em);
549 .LESSborder-radius-bottomright(.3em);
552 .LESSborder-radius-topleft(.3em);
553 .LESSborder-radius-bottomleft(.3em);
556 //.LESSborder-radius-all(.3em);
559 .LESSborder-radius-all(0);
562 /***************************************************************************
564 ***************************************************************************/
565 .ui-header, .ui-footer {
566 .ui-btn .ui-btn-icon-only .ui-icon {
567 width: 32 * @unit_base;
568 height: 32 * @unit_base;
573 .ui-btn-back .ui-btn-inner .ui-icon-header-back-btn,
574 .ui-btn-footer-down .ui-btn-inner .ui-icon {
575 width: 32 * @unit_base;
576 height: 32 * @unit_base;
578 background-repeat: no-repeat;
579 background-size: 100% 100%;
583 .ui-btn-up-s { /* less parsing problem : divide css */
584 .ui-icon-header-back-btn { background-image: url(images/page/00_icon_Back.png); }
585 .ui-icon-naviframe-more { background-image: url(images/page/00_icon_more.png); }
586 .ui-icon-naviframe-cancel { background-image: url(images/00_icon_cancel.png); } /* FIXME : check ux if it needs to be deprecated... */
587 .ui-icon-naviframe-edit { background-image: url(images/page/00_icon_edit.png); }
588 .ui-icon-naviframe-plus { background-image: url(images/page/00_icon_plus.png); }
589 .ui-icon-down { background-image: url(images/controls/button/00_icon_SIP_close_web_web.png); }
593 .ui-icon-header-back-btn { background-image: url(images/page/00_icon_Back.png); }
594 .ui-icon-naviframe-more { background-image: url(images/page/00_icon_more.png); }
595 .ui-icon-naviframe-cancel { background-image: url(images/00_icon_cancel.png); } /* FIXME : check ux if it needs to be deprecated... */
596 .ui-icon-naviframe-edit { background-image: url(images/page/00_icon_edit.png); }
597 .ui-icon-naviframe-plus { background-image: url(images/page/00_icon_plus.png); }
598 .ui-icon-down { background-image: url(images/controls/button/00_icon_SIP_close_web_web.png); }
602 .ui-icon-header-back-btn { background-image: url(images/page/00_icon_Back_press.png); }
603 .ui-icon-naviframe-more { background-image: url(images/page/00_icon_more_press.png); }
604 .ui-icon-naviframe-cancel { background-image: url(images/00_icon_cancel_press.png); } /* FIXME: check ux if it needs to be deprecated.. */
605 .ui-icon-naviframe-edit { background-image: url(images/page/00_icon_edit_press.png); }
606 .ui-icon-naviframe-plus { background-image: url(images/page/00_icon_plus_press.png); }
607 .ui-icon-down { background-image: url(images/controls/button/00_icon_SIP_close_press_web.png); }
611 -----------------------------------------------------------------------------------------------------------*/
613 filter: Alpha(Opacity=30);
619 cursor: default !important;
620 pointer-events: none;
625 /************************************************************************
627 ************************************************************************/
628 @media all and (orientation:landscape) and (device-aspect-ratio : 16/9) {
630 > .ui-btn.ui-btn-back,
631 > .ui-btn.ui-btn-footer-down {
632 .ui-icon-header-back-btn {
633 top : 5 * @unit_base;
639 min-height : 45 * @unit_base;
642 min-height : 25 * @unit_base;
643 max-height : 29 * @unit_base; /* tuning UX guide(title height too large)*/
644 font-size : 25 * @unit_base;
646 margin: 12*@unit_base 8*@unit_base 4*@unit_base 8*@unit_base;/* tuning UX guide(title height too large)*/
649 >.ui-btn:not(.ui-btn-icon_only),
650 >.naviframe-button.ui-btn:not(.ui-btn-icon_only) {
651 width : 53 * @unit_base;
652 height : 18 * @unit_base;
654 bottom : 10 * @unit_base;
657 > .ui-btn.ui-btn-back,
658 > .ui-btn.ui-btn-footer-down {
659 right : 13 * @unit_base;
663 margin-top : 16 * @unit_base;
664 height: 22 * @unit_base;
665 width: 22 * @unit_base;
669 top : 26 * @unit_base;
673 > .naviframe-button.ui-btn {
674 top : 8 * @unit_base;
676 height : 34 * @unit_base;
677 width : 34 * @unit_base;
679 &.ui-title-tabbar >.ui-btn {
683 &.ui-title-multiline {
685 margin-top : 12 * @unit_base;
689 min-height : 21 * @unit_base;
690 max-height : 21 * @unit_base; /* temporary UX strange */
691 font-size : 19 * @unit_base;
692 margin: 5*@unit_base 8*@unit_base 19*@unit_base 8*@unit_base;
699 .ui-footer.ui-bar-s {
700 height : 42 * @unit_base;
701 >.ui-btn.ui-btn-back,
702 >.ui-btn.ui-btn-footer-down,
703 >[data-icon="naviframe-more"] {
705 width : 56 * @unit_base;
706 height : 42 * @unit_base;
709 top : 5 * @unit_base;
713 [data-icon="naviframe-more"] {
714 .ui-icon-naviframe-more {
715 top : 5 * @unit_base;
719 [data-role="controlgroup"] {
720 margin-top : 6 * @unit_base; /* temp value */
721 margin-bottom : 6 * @unit_base; /* temp value */
722 padding-left : 58 * @unit_base;
723 padding-right : 58 * @unit_base;
726 [data-role="button"] {
728 margin-left : -4 * @unit_base;
729 margin-right : -5 * @unit_base;
730 top : -4 * @unit_base;
734 > [data-role="button"]:not([data-icon="naviframe-more"]) {
735 top : 3 * @unit_base;