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 : 19 * @unit_base;
100 height : 32 * @unit_base;
101 width : 32 * @unit_base;
103 background: transparent;
108 > .ui-btn.ui-btn-right:nth-child(2) {
109 right : 11 * @unit_base;
112 > .ui-btn.ui-btn-right:nth-child(3) {
113 right : 58 * @unit_base;
116 > img + h1 + a.ui-btn.ui-btn-right:nth-child(3) {
117 right : 11 * @unit_base;
120 > img + h1 + a.ui-btn.ui-btn-right:nth-child(4) {
121 right : 58 * @unit_base;
124 > img + h1 + span.ui-title-text-sub + a.ui-btn.ui-btn-right:nth-child(4) {
125 right : 11 * @unit_base;
128 > img + h1 + span.ui-title-text-sub + a.ui-btn.ui-btn-right:nth-child(5) {
129 right : 58 * @unit_base;
132 > .ui-btn.ui-btn-down-s {
133 background : @color_bar_btn_press;
134 color : @color_bar_title_text;
137 &.ui-title-multiline {
139 min-height : 24 * @unit_base;
140 max-height : 24 * @unit_base; /* temporary UX strange */
141 font-size : 22 * @unit_base;
143 margin: 9*@unit_base 8*@unit_base 22*@unit_base 8*@unit_base;
149 .ui-footer.ui-bar-s {
150 height : 49 * @unit_base;
153 >.ui-btn.ui-btn-back,
154 >[data-icon="naviframe-more"] {
155 background : transparent;
158 width : 56 * @unit_base;
159 height : 49 * @unit_base;
161 -webkit-box-shadow : none /* temp code */
163 .ui-btn-footer-right .ui-btn-icon-only .ui-icon {
164 left : 8 * @unit_base;
168 [data-icon="naviframe-more"] {
170 left : 0 * @unit_base;
171 top : 0 * @unit_base;
176 .ui-icon-naviframe-more {
177 left : 13 * @unit_base;
178 top : 8 * @unit_base;
184 background: transparent;
189 [data-role="controlgroup"] {
190 width : 245 * @unit_base; /* temp value */
194 margin-top : 6 * @unit_base; /* temp value */
195 margin-bottom : 6 * @unit_base; /* temp value */
197 [data-role="button"] {
198 background : transparent;
200 width : 77 * @unit_base;
202 border-style : solid;
203 border-color : black;
204 border-top-width : 0px;
205 border-bottom-width : 0px;
206 border-left-width : 1px;
207 border-right-width : 1px;
212 font-size : 17 * @unit_base;
213 color : rgba(58, 58, 58, 1);
217 border-right-width : 0px;
221 border-left-width : 0px;
226 > [data-role="button"]:not([data-icon="naviframe-more"]) {
227 top : 6 * @unit_base;
231 /***************************************************************************
232 Content Top calculate
233 ***************************************************************************/
236 top : 55 * @unit_base;
239 .ui-title-content-normal-height {
240 top : 55 * @unit_base;
243 .ui-title-content-multi-controlbar-height {
244 top : 75 * @unit_base;
247 .ui-title-content-search {
248 top : 111 * @unit_base;
252 /***************************************************************************
253 Content Top calculate
254 ***************************************************************************/
258 border: 1px solid #2a2a2a;
259 background: @color_bg;
263 font-family: Helvetica, Arial, sans-serif;
265 .ui-link-inherit { color: #fff; }
270 &:hover { color: #2489CE; }
271 &:active { color: #2489CE; }
272 &:visited { color: #2489CE; }
279 padding: 1 * @unit_base;
281 .ui-btn-box-s.ui-btn-up-s {
282 .LESSbutton_box_style;
283 .LESSborder-radius-all( 0.3rem );
284 .LESSbutton_text1_style;
287 .ui-ctxpopup .ui-btn-box-s{
290 background: transparent !important;
294 color: white !important;
297 background: @color_ctxbutton_press !important;
301 color: white !important;
302 .LESSborder-radius-all( 0 );
305 background: transparent ! important;
311 .ui-ctxpopup .ui-btn-down-s {
312 background: @color_ctxbutton_press !important;
315 .ui-btn-box-s .ui-btn-inner {
317 border-color: rgb(199, 197, 190);
318 .LESSborder-radius-all( 0.3rem );
319 .LESSbox-boxsizing( border-box );
320 .LESSbutton_inner_box_style;
324 .ui-header .ui-btn-box-s,
325 .ui-footer .ui-btn-box-s,
326 .ui-btn-back.ui-btn-up-s,
327 .ui-btn-back.ui-btn-hover-s,
328 .ui-btn-back.ui-btn-down-s,
329 .ui-popup-container .ui-btn-box-s {
331 .LESSborder-radius-all( 0.9 rem );
334 .ui-btn-box-s.ui-btn-hover-s {
335 .LESSbutton_hover_style;
336 .LESSbutton_text1_style;
339 .ui-btn-box-s.ui-btn-hover-s.ui-btn-corner-circle{
340 .LESScirclebutton_hover_style;
343 .ui-btn-box-s.ui-btn-down-s .ui-btn-inner {
344 .LESSbutton_down_style;
350 font-family: Helvetica, Arial, sans-serif;
351 text-decoration: none;
354 .ui-btn-down-s.ui-btn-corner-circle{
355 .LESScirclebutton_press_style;
359 /* links within "buttons"
360 -----------------------------------------------------------------------------------------------------------*/
363 text-decoration: none !important;
367 /* Active class used as the "on" state across all themes
368 -----------------------------------------------------------------------------------------------------------*/
370 /* button default color for active state */
373 color: @color_button_text_normal;
375 text-decoration: none;
376 background: @color_button_press;
378 //font-family: Helvetica, Arial, sans-serif;
381 color: @color_button_text_normal;
385 /* button inner top highlight
386 -----------------------------------------------------------------------------------------------------------*/
395 /* corner rounding classes
396 -----------------------------------------------------------------------------------------------------------*/
399 .LESSborder-radius-topleft(.3em);
402 .LESSborder-radius-topright(.3em);
405 .LESSborder-radius-bottomleft(.3em);
408 .LESSborder-radius-bottomright(.3em);
411 .LESSborder-radius-topleft(.3em);
412 .LESSborder-radius-topright(.3em);
415 .LESSborder-radius-bottomleft(.3em);
416 .LESSborder-radius-bottomright(.3em);
419 .LESSborder-radius-topright(.3em);
420 .LESSborder-radius-bottomright(.3em);
423 .LESSborder-radius-topleft(.3em);
424 .LESSborder-radius-bottomleft(.3em);
427 //.LESSborder-radius-all(.3em);
430 .LESSborder-radius-all(0);
433 /***************************************************************************
435 ***************************************************************************/
436 .ui-header, .ui-footer {
437 .ui-btn .ui-btn-icon-only .ui-icon {
438 width: 32 * @unit_base;
439 height: 32 * @unit_base;
444 .ui-btn-back .ui-btn-inner .ui-icon-header-back-btn {
445 width: 32 * @unit_base;
446 height: 32 * @unit_base;
448 background-repeat: no-repeat;
449 background-size: 100% 100%;
454 .ui-icon-header-back-btn { background-image: url(images/00_icon_Back.png); }
455 .ui-icon-naviframe-more { background-image: url(images/00_icon_more.png); }
456 .ui-icon-naviframe-cancel { background-image: url(images/00_icon_cancel.png); }
457 .ui-icon-naviframe-edit { background-image: url(images/00_icon_edit.png); }
458 .ui-icon-naviframe-plus { background-image: url(images/00_icon_plus.png); }
461 .ui-btn-down-s, .ui-btn-hover-s {
462 .ui-icon-header-back-btn { background-image: url(images/00_icon_Back_press.png); }
463 .ui-icon-naviframe-more { background-image: url(images/00_icon_more_press.png); }
464 .ui-icon-naviframe-cancel { background-image: url(images/00_icon_cancel_press.png); }
465 .ui-icon-naviframe-edit { background-image: url(images/00_icon_edit_press.png); }
466 .ui-icon-naviframe-plus { background-image: url(images/00_icon_plus_press.png); }