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;
157 .ui-btn-footer-right .ui-btn-icon-only .ui-icon {
158 left : 8 * @unit_base;
162 [data-icon="naviframe-more"] {
164 left : 0 * @unit_base;
165 top : 0 * @unit_base;
170 .ui-icon-naviframe-more {
171 left : 13 * @unit_base;
172 top : 8 * @unit_base;
178 background: transparent;
182 [data-role="controlgroup"] {
183 width : 245 * @unit_base; /* temp value */
187 margin-top : 6 * @unit_base; /* temp value */
188 margin-bottom : 6 * @unit_base; /* temp value */
190 [data-role="button"] {
191 background : transparent;
193 width : 77 * @unit_base;
195 border-style : solid;
196 border-color : black;
197 border-top-width : 0px;
198 border-bottom-width : 0px;
199 border-left-width : 1px;
200 border-right-width : 1px;
205 font-size : 17 * @unit_base;
206 color : rgba(58, 58, 58, 1);
210 border-right-width : 0px;
214 border-left-width : 0px;
219 > [data-role="button"]:not([data-icon="naviframe-more"]) {
220 top : 6 * @unit_base;
224 /***************************************************************************
225 Content Top calculate
226 ***************************************************************************/
229 top : 55 * @unit_base;
232 .ui-title-content-normal-height {
233 top : 55 * @unit_base;
236 .ui-title-content-multi-controlbar-height {
237 top : 75 * @unit_base;
240 .ui-title-content-search {
241 top : 111 * @unit_base;
245 /***************************************************************************
246 Content Top calculate
247 ***************************************************************************/
251 border: 1px solid #2a2a2a;
252 background: @color_bg;
256 font-family: Helvetica, Arial, sans-serif;
258 .ui-link-inherit { color: #fff; }
263 &:hover { color: #2489CE; }
264 &:active { color: #2489CE; }
265 &:visited { color: #2489CE; }
274 .ui-btn-box-s.ui-btn-up-s {
275 .LESSbutton_box_style;
276 .LESSborder-radius-all( 0.3rem );
277 .LESSbutton_text1_style;
280 .ui-ctxpopup .ui-btn-box-s{
283 background: transparent !important;
287 color: white !important;
290 background: @color_ctxbutton_press !important;
294 color: white !important;
295 .LESSborder-radius-all( 0 );
299 .ui-ctxpopup .ui-btn-down-s {
300 background: @color_ctxbutton_press !important;
303 .ui-btn-box-s .ui-btn-inner {
305 border-color: rgb(199, 197, 190);
306 .LESSborder-radius-all( 0.3rem );
307 .LESSbox-boxsizing( border-box );
308 .LESSbutton_inner_box_style;
312 .ui-header .ui-btn-box-s,
313 .ui-footer .ui-btn-box-s,
314 .ui-btn-back.ui-btn-up-s,
315 .ui-btn-back.ui-btn-hover-s,
316 .ui-btn-back.ui-btn-down-s,
317 .ui-popup-container .ui-btn-box-s {
319 .LESSborder-radius-all( 0.9 rem );
322 .ui-btn-box-s.ui-btn-hover-s {
323 .LESSbutton_hover_style;
324 .LESSbutton_text1_style;
327 .ui-btn-box-s.ui-btn-hover-s.ui-btn-corner-circle{
328 .LESScirclebutton_hover_style;
331 .ui-btn-box-s.ui-btn-down-s .ui-btn-inner {
332 .LESSbutton_down_style;
338 font-family: Helvetica, Arial, sans-serif;
339 text-decoration: none;
342 .ui-btn-down-s.ui-btn-corner-circle{
343 .LESScirclebutton_press_style;
347 /* links within "buttons"
348 -----------------------------------------------------------------------------------------------------------*/
351 text-decoration: none !important;
355 /* Active class used as the "on" state across all themes
356 -----------------------------------------------------------------------------------------------------------*/
358 /* button default color for active state */
361 color: @color_button_text_normal;
363 text-decoration: none;
364 background: @color_button_press;
366 //font-family: Helvetica, Arial, sans-serif;
369 color: @color_button_text_normal;
373 /* button inner top highlight
374 -----------------------------------------------------------------------------------------------------------*/
383 /* corner rounding classes
384 -----------------------------------------------------------------------------------------------------------*/
387 .LESSborder-radius-topleft(.3em);
390 .LESSborder-radius-topright(.3em);
393 .LESSborder-radius-bottomleft(.3em);
396 .LESSborder-radius-bottomright(.3em);
399 .LESSborder-radius-topleft(.3em);
400 .LESSborder-radius-topright(.3em);
403 .LESSborder-radius-bottomleft(.3em);
404 .LESSborder-radius-bottomright(.3em);
407 .LESSborder-radius-topright(.3em);
408 .LESSborder-radius-bottomright(.3em);
411 .LESSborder-radius-topleft(.3em);
412 .LESSborder-radius-bottomleft(.3em);
415 //.LESSborder-radius-all(.3em);
418 .LESSborder-radius-all(0);
421 /***************************************************************************
423 ***************************************************************************/
424 .ui-header, .ui-footer {
425 .ui-btn .ui-btn-icon-only .ui-icon {
426 width: 32 * @unit_base;
427 height: 32 * @unit_base;
432 .ui-btn-back .ui-btn-inner .ui-icon-header-back-btn {
433 width: 32 * @unit_base;
434 height: 32 * @unit_base;
436 background-repeat: no-repeat;
437 background-size: 100% 100%;
442 .ui-icon-header-back-btn { background-image: url(images/00_icon_Back.png); }
443 .ui-icon-naviframe-more { background-image: url(images/00_icon_more.png); }
444 .ui-icon-naviframe-cancel { background-image: url(images/00_icon_cancel.png); }
445 .ui-icon-naviframe-edit { background-image: url(images/00_icon_edit.png); }
446 .ui-icon-naviframe-plus { background-image: url(images/00_icon_plus.png); }
449 .ui-btn-down-s, .ui-btn-hover-s {
450 .ui-icon-header-back-btn { background-image: url(images/00_icon_Back_press.png); }
451 .ui-icon-naviframe-more { background-image: url(images/00_icon_more_press.png); }
452 .ui-icon-naviframe-cancel { background-image: url(images/00_icon_cancel_press.png); }
453 .ui-icon-naviframe-edit { background-image: url(images/00_icon_edit_press.png); }
454 .ui-icon-naviframe-plus { background-image: url(images/00_icon_plus_press.png); }