Export 0.1.62
[platform/framework/web/web-ui-fw.git] / src / themes / tizen / tizen-white / style.less
1 /******************************************************************************************************/
2 /**************** Define ColorCode Here    ************* Start ****************************************/
3 /******************************************************************************************************/
4
5
6
7 /***************** Naviframe **********************************/
8 @color_bar_title_text : rgba(59, 115, 182, 1); /* #3b73b6 */ /* title text */
9 @color_bar_btn_press : rgba(0, 0, 0, 0.1);
10
11 /***************** Controlbar *********************************/
12 @color_controlbar_btn_press : -webkit-linear-gradient(top,  rgba(169,165,151,1) 0%,rgba(246,248,239,1) 100%);
13
14 /***************** Body ***************************************/
15 @color_bg: rgb(248, 246, 239); // #F8F6EF // Main Background color
16 @color_text: rgb(0, 0, 0);      // 0 0 0
17 @color_text_sub:                        rgb(102, 102, 102);     // 102 102 102
18 @color_text_setting:            rgb(42, 109, 140);      // 42 109 140
19
20 /***************** List ***************************************/
21 @color_list_bg:                                                         rgba(248, 246, 239, 1);                         /* B0211        : List bg color                 */
22 @color_list_press :                                             rgba(87, 135, 194, 1);                          /* B041         : List Press color      */
23 @color_list_border_bottom:              rgba(211, 209, 203, 0.5);                       /* B0221        : 1px line Code                 */
24 @color_list_main_text_focus:            rgba(249, 249, 249, 1);
25 @color_list_main_text_unfocus:          rgba(0, 0, 0, 1);
26 @color_list_sub_text_default: rgba(100, 100, 100, 1);
27
28
29 @color_list_divider_expand_div : rgba(0, 0, 0, 0.5);
30 @color_list_divider_bg : rgba(248, 246, 239, 1);                                                /* W021L1 : Index BG                                    */
31 @color_list_divider_text : rgba(59, 115, 182, 1);                                               /* W021L2 : Index bar                                   */
32
33 @color_list_dialogue_bg : rgba(239, 237, 229, 1);
34 @color_dialogue_main_text: rgba(59, 115, 182, 1);
35 @color_dialogue_border_right: rgba(142, 154, 163, 1);
36
37 @color_list_expandable_expanded_bg:     rgb(215, 225, 232);
38 @color_list_expanded_bg : rgba(220, 218, 211, 1);
39
40 @color_list_bubble_sent_text:   rgb(0, 0, 0);
41 @color_list_bubble_receive_text:        rgb(255, 255, 255);
42 @color_list_bubble_sos_text:    rgb(233, 73, 73);
43 @color_list_bubble_date_text:   rgb(104, 104, 104);
44 @color_list_bubble_date_bg:             rgba(225, 225, 225, 0);
45 @color_list_bubble_time_sent_text:      rgb(57, 166, 215);
46 @color_list_bubble_time_receive_text:   rgb(211, 0, 0);
47 @color_list_bubble_time_sos_text:       rgb(211, 0, 0);
48 @color_list_bubble_name_text:   rgb(139, 139, 139);
49 @color_list_bubble_help_text:   rgb(154, 154, 154);
50 @color_list_bubble_link_text:   rgb(34, 129, 157);
51
52
53 /****************** Shortcut Scroll *************************/
54 @color_shortcutscroll_rollover_bg: rgba(230, 227, 216, 1);              /* B0723 : 00_fast_scroll_rollover_bg.9.png */
55 @color_shortcutscroll_rollover_text: rgba(160, 159, 154, 1);    /* B0721 : Rollover text */
56 @color_shortcutscroll_popup_bg: rgba(59, 115, 182, 1);                          /* B0731 : 00_fast_scroll_popup_bg.png */
57 @color_shortcutscroll_popup_shadow: rgba(199, 199, 199, 0.5);
58 @color_shortcutscroll_popup_text: rgba(255, 255, 255, 1);                       /* B0732 : Scroll popup text */
59
60 /***************** SearchBar(forms.textinput) *****************/
61 @color_searchbar_bg : rgba(248, 246, 239, 1);
62 @color_searchbar_default_text : rgba(121, 131, 138, 1); /* Search default text */
63 @color_searchbar_input_field_bg : rgba(255, 255, 255, 1); /* W301 : 00_search_edit_field_bg.png */
64
65 /***************** Popup **************************************/
66 @font_size_popup_info_style: 24 * @unit_base;
67 @color_popup_text_bg: rgba(248, 246, 239, 1);                                                           /* B061L1 : Popop info                                  */
68
69
70 /***************** Button *************************************/
71
72 @color_button_EditText:         rgb(61, 61, 61);
73 @color_button_EditTextPress:    rgb(61, 61, 61);
74
75 @color_button_text_normal:      rgb(54, 49, 51);
76 @color_button_text_press:       rgb(248, 246, 239);
77
78 @color_button_normal:           rgb(235, 232, 227);
79 @color_button_normal_webkit:    -webkit-linear-gradient(top, rgb(235, 232, 227), rgb(234, 231, 226));
80 @color_button_normal_moz:       -moz-linear-gradient(top, rgb(235, 232, 227), rgb(234, 231, 226));
81 @color_button_normal_o:         -o-linear-gradient(top, rgb(235, 232, 227), rgb(234, 231, 226));
82 @color_button_normal_ms:        -ms-linear-gradient(top, rgb(235, 232, 227), rgb(234, 231, 226));
83 @color_button_press:            rgb(59, 115, 182);
84
85 @color_button_inner:            rgb(247, 245, 238);
86 @color_button_inner_webkit:     -webkit-linear-gradient(top, rgb(250, 247, 242), rgb(248, 245, 240));
87 @color_button_inner_moz:        -moz-linear-gradient(top, rgb(250, 247, 242), rgb(248, 245, 240));
88 @color_button_inner_o:          -o-linear-gradient(top, rgb(250, 247, 242), rgb(248, 245, 240));
89 @color_button_inner_ms:         -ms-linear-gradient(top, rgb(250, 247, 242), rgb(248, 245, 240));
90
91 @button_shadow_outer:              0 0 1px 1px rgba(255, 255, 255, 1);
92 @button_shadow_inner:           inset 0 0 3px rgba(255, 255, 255, 1);
93
94 .LESSbutton_box_style{
95         color: @color_button_text_normal;
96 }
97
98 .LESSbutton_up_style{
99         background: @color_button_normal;
100         background: @color_button_normal_webkit;
101         background: @color_button_normal_moz;
102         background: @color_button_normal_o;
103         background: @color_button_normal_ms;
104 }
105
106 .LESSbutton_box_style{
107         background: @color_button_normal;
108         background: @color_button_normal_webkit;
109         background: @color_button_normal_moz;
110         background: @color_button_normal_o;
111         background: @color_button_normal_ms;
112         border: 1px solid;
113         border-color: rgba(220, 218, 211, 1);
114         .LESSbox-shadow-line( @button_shadow_outer );
115 }
116 .LESSbutton_inner_box_style{
117         background: @color_button_inner;
118         background: @color_button_inner_webkit;
119         background: @color_button_inner_ms;
120         background: @color_button_inner_o;
121         background: @color_button_inner_moz;
122         .LESSbox-shadow-line( @button_shadow_inner );
123 }
124 .LESSbutton_inner_pressstyle{
125         color: @color_button_text_press;
126 }
127
128 .LESSbutton_text1_style{
129         font-family: @font_family;
130         font-weight: normal;
131         font-size: 1.0rem;
132         font-style:normal;
133         color: @color_button_text_black;
134 }
135
136 .LESSbutton_hover_style{
137         color: @color_button_text_normal;
138 }
139
140 .LESSbutton_down_style{
141         background: @color_button_press;
142         color: @color_button_text_press;
143 }
144
145 /***************** Datetime picker ****************************/
146
147 @font_size_datetime_main_text:              22 * @unit_base;
148 @font_size_datetime_sub_text:               16 * @unit_base;
149 /***************************************************************************
150                         contextual popup
151  ***************************************************************************/
152 @color_ctxpopup_text:                   rgb(255, 255, 255);
153 @color_ctxpopup_background:             rgb(68, 68, 68);
154 @color_ctxpopup_border_left:            rgb(91, 91, 91);
155 @color_ctxpopup_border_right:           rgb(45, 45, 45);
156 @color_ctxpopup_border_top:             rgb(91, 91, 91);
157 @color_ctxpopup_border_bottom:          rgb(45, 45, 45);
158
159 @color_ctxbutton_press:            rgb(59, 115, 182);
160
161 @color_ctxpopup_timepicker_text:        rgba( 249, 249, 249, 0.4 );
162 @color_ctxpopup_timepicker_text_focus:  rgba( 249, 249, 249, 1 );
163
164 /******************************************************************************************************/
165 /**************** Define ColorCode Here    ************* End ****************************************/
166 /******************************************************************************************************/
167
168
169
170
171
172
173
174
175
176 /************************** old color code  ******************************/
177
178 // Basic color set
179
180 @color_bg_sub:                  rgb(36, 36, 36);        // 36 36 36     // TODO: used only in dialog group. Check more.
181
182 @color_border:                  rgb(42, 42, 42);        // 42 42 42
183 @color_header:                  rgb(68, 68, 74);        // 68 68 74
184
185 @color_scrollbar:               rgb(198, 196, 190);
186
187
188 @color_text_dim:                        rgb(108, 115, 118);     // 108 115 118
189 @color_text_focus:              @color_text;
190
191 @color_text_input:              rgb(70, 70, 70);        // 70 70 70
192 @color_text_cursor:             @color_text_setting;
193 @color_text_segctrl:            rgb(158, 195, 213);     // 158 195 213  // TODO: used only in segctrl. Check more.
194
195 //Dialogue color set
196
197 @color_dialogue_sub_text:                               rgb(146,146,146);
198
199
200 //Dialogue Editor color set
201 @color_dialogue_editor_default_text:    rgb(70, 70, 70);
202 @color_dialogue_editor_bg:                              rgb(0, 0, 0);
203 @color_dialogue_editor_border:                  rgb(108, 168, 199);     
204 /*************************
205   Vars/Mixins for Widgets
206
207   NOTE:
208     * Color variables' name: @color_<widget name>_<identifier>
209         * Color values: Use rgb() or rgba()
210  *************************/
211
212
213 /***************************************************************************
214                    List 
215 ***************************************************************************/
216
217
218 @color_list_main_text_read:             rgba(158, 158, 158, 1);
219 @color_list_main_text_unread:   rgba(249, 249, 249, 1);
220
221 @color_list_sub_text_settings:  rgba(0, 140, 210, 1);
222 @color_list_sub_text_focus:             rgba(249, 249, 249, 1);
223 @color_list_flexible_text_main: rgba(249, 249, 249, 1);
224 @color_list_flexible_text_sub:          rgba(149, 149, 149, 1);
225 @color_list_index_list:                 rgba(164, 164, 164, 1);
226 @color_list_editfield_text:                     rgba(70, 70, 70, 1);
227 @color_list_editfield_text_cursor:      rgba(0, 140, 210, 1);
228 @color_list_multiline_text:             rgba(149, 149, 149, 1);
229 @color_list_3line_main_text:            rgba(249, 249, 249, 1);
230 @color_list_3line_main_text_read:       rgba(249, 249, 249, 1);
231 @color_list_3line_main_text_focus:      rgba(249, 249, 249, 1);
232 @color_list_3line_main_text2:           rgba(104, 137, 152, 1);
233 @color_list_3line_main_text2_focus:     rgba(249, 249, 249, 1);
234 @color_list_converter_style:            rgba(249, 249, 249, 1);
235 @color_list_converter_style_focus:      rgba(249, 249, 249, 1);
236 @color_list_unread_email:               rgba(249, 249, 249, 1);
237 @color_list_contents_text:              rgba(210, 210, 210, 1);
238 @color_list_name_text:                  rgba(129, 129, 129, 1);
239 @color_list_name_text_dim:              rgba(0, 140, 210, 1);
240 @color_list_colorbar:                           rgba(80, 107, 207, 1); //Temp, not defined
241
242
243
244
245
246
247 @font_size_list_main_text:              44 * @unit_base; //1.375rem;    /* 44 px */
248 @font_size_list_sub_text:               32 * @unit_base; //1.0rem;      /* 32 px */
249 @font_size_list_flexible_text_main:     48 * @unit_base; //1.5rem;      /* 48 px */
250 @font_size_list_flexible_text_sub:      36 * @unit_base; //1.125rem;    /* 36 px */
251 @font_size_list_index_list:             32 * @unit_base; //1.0rem;      /* 32 px */
252 @font_size_list_editfield_text:         44 * @unit_base; //1.375rem;    /* 44 px */
253 @font_size_list_multiline_text:         32 * @unit_base; //1.0rem;      /* 32 px */
254 @font_size_list_3line_main_text:        42 * @unit_base; //1.3125rem;   /* 42 px */
255 @font_size_list_3line_main_text2:       36 * @unit_base; //1.125rem;    /* 36 px */
256 @font_size_list_converter_style:        40 * @unit_base; //1.3rem;      /* 40 px */
257 @font_size_list_unread_email:           44 * @unit_base; //1.375rem;    /* 44 px */
258 @font_size_list_contents_text:          30 * @unit_base; //0.94rem;     /* 30 px */
259 @font_size_list_name_text:              32 * @unit_base; //1.0rem;      /* 32 px */
260
261 @style_list_li_dialogue_border_left_width: 10 * @unit_base;
262 @style_list_bubble_date_height: 40 * @unit_base;
263 @style_list_bubble_date_text_align:     center;
264
265
266
267
268 /***************************************************************************
269                    Popup
270 ***************************************************************************/
271 @color_popup_center_progressbar_title:  rgba(153, 153, 153, 1);
272 @color_popup_text_progress_title:       rgba(249, 249, 249, 1);
273 /* TODO : ninepatch popup title */
274 @color_popup_title_bg:          rgba(80, 147, 182, 255);        /* popup_title_bg.png */
275
276 @color_popup_button_bg:         rgba(248, 246, 239, 1);
277 @color_popup_font: rgba(248, 246, 239, 1); /* maybe not use only popupwindow*/
278 @color_popup_text_font:         black;
279
280 @color_popup_buttonbg:          rgb(84, 126, 153);
281 @color_popup_buttonbg_webkit:   -webkit-gradient(linear, left top, left bottom, from(rgb(84, 126, 153)), to(rgb(69, 105, 128)));
282 @color_popup_buttonbg_moz:      -moz-linear-gradient(top, rgb(84, 126, 153), rgb(69, 105, 128));
283 @color_popup_buttonbg_ms:       -ms-linear-gradient(top, rgb(84, 126, 153), rgb(69, 105, 128));
284 @color_popup_buttonbg_o:        -o-linear-gradient(top, rgb(84, 126, 153), rgb(69, 105, 128));
285 @color_popup_buttontext:        rgb(249, 249, 249);
286 @color_popup_buttonbg_over:     rgb(94, 136, 163);
287 @color_popup_buttonbg_press:    rgb(67, 160, 217);
288 @color_popup_buttonbg_press_webkit:     -webkit-gradient(linear, left top, left bottom, from(rgb(67, 160, 217)), to(rgb(56, 139, 185)));
289 @color_popup_buttonbg_press_moz:        -moz-linear-gradient(top, rgb(67, 160, 217), rgb(56, 139, 185));
290 @color_popup_buttonbg_press_ms:         -ms-linear-gradient(top, rgb(67, 160, 217), rgb(56, 139, 185));
291 @color_popup_buttonbg_press_o:          -o-linear-gradient(top, rgb(67, 160, 217), rgb(56, 139, 185));
292
293 @color_popup_scroller_bg:       rgba(248, 246, 239, 1);
294
295
296 @font_size_popup_basic_style_title:             24 * @unit_base; //1.1875rem;   /* 38px */
297 @font_size_popup_center_progressbar_title:      26 * @unit_base; //0.8125rem;   /* 26px */
298 @font_size_popup_text_progress_title:           42 * @unit_base; //1.3125rem;   /* 42px */
299 @font_size_popup_button_text:                   32 * @unit_base; //1.0rem;      /* 32px */
300
301 .LESSpopup_button_style{
302 /*      background: @color_popup_buttonbg;
303         background: @color_popup_buttonbg_webkit;
304         background: @color_popup_buttonbg_moz;
305         background: @color_popup_buttonbg_ms;
306         background: @color_popup_buttonbg_o;
307         color: @color_popup_buttontext;*/
308 }
309
310 .LESSpopup_button_hover_style{
311         background: @color_popup_buttonbg_over;
312 }
313
314 .LESSpopup_button_press_style{
315         background: @color_popup_buttonbg_press;
316         background: @color_popup_buttonbg_press_webkit;
317         background: @color_popup_buttonbg_press_moz;
318         background: @color_popup_buttonbg_press_ms;
319         background: @color_popup_buttonbg_press_o;
320 }
321
322 .LESSpopup_padding_style{
323 }
324
325 /***************************************************************************
326                     Button
327 ***************************************************************************/
328
329 @color_button_press_webkit:     -webkit-gradient(linear, left top, left bottom, from(rgb(67, 160, 217)), to(rgb(56, 139, 185)));
330 @color_button_press_moz:        -moz-linear-gradient(top, rgb(67, 160, 217), rgb(56, 139, 185));
331
332 @color_button_hover:            rgb(161, 171, 177);
333
334 @color_button_text_black:       rgb(0, 0, 0);
335 @color_button_text_white:       rgb(249, 249, 249);
336 @color_button_text_press:       rgb(249, 249, 249);
337
338 @color_circlebutton_hover:              rgb(239, 119, 126);
339 @color_circlebutton_hover_webkit:       -webkit-gradient(linear, left top, left bottom, from(rgb(198, 78, 85)), to(rgb(166, 43, 45)));
340 @color_circlebutton_hover_moz:          -moz-linear-gradient(top, rgb(198, 78, 85), rgb(166,43,45));
341 @color_circlebutton_press:              rgb(67, 160, 217);
342 @color_circlebutton_press_webkit:       -webkit-gradient(linear, left top, left bottom, from(rgb(67, 160, 217)), to(rgb(56, 139, 185)));
343 @color_circlebutton_press_moz:          -moz-linear-gradient(top, rgb(67, 160, 217), rgb(56, 139, 185));
344
345 @color_button_EditText:         rgb(249, 249, 249);
346 @color_button_EditTextPress:    rgb(249, 249, 249);
347 @color_button_EditBG:           rgb(0, 0, 0);
348 @color_button_EditBGPress:      rgb(0, 140, 210);
349
350 @color_button_switch_BGon:              rgb(42, 126, 172);
351 @color_button_switch_BGon_webkit:       -webkit-gradient(linear, left top, left bottom, from(rgb(33, 116, 167)), to(rgb(75, 165, 219)));
352 @color_button_switch_BGon_moz:          -moz-linear-gradient(top, rgb(33, 116, 167), rgb(75, 165, 219));
353 @color_button_switch_BGoff:             rgb(151, 161, 167);
354 @color_button_switch_BGoff_text_color:  rgb(203, 203, 203);
355 @color_button_switch_BGoff_webkit:      -webkit-gradient(linear, left top, left bottom, from(rgb(114, 114, 114)), to(rgb(141, 141, 141)));
356 @color_button_switch_BGoff_moz:         -moz-linear-gradient(top, rgb(114, 114, 114), rgb(141, 141, 141));
357 @color_button_switch_BGreed:            rgb(253, 253, 253);
358 @color_button_switch_BGreed_webkit:     -webkit-gradient(linear, left top, left bottom, from(rgb(253, 253, 253)), to(rgb(231, 231, 231)));
359 @color_button_switch_BGreed_moz:        -moz-linear-gradient(top, rgb(253, 253, 253), rgb(231, 231, 231));
360
361 @radius_button_switch: 4px;
362 @radius_button_switch_reed: 2px;
363
364 @color_button_edit:                     rgb(201, 88, 88);
365 @color_button_edit_webkit:              -webkit-gradient(linear, left top, left bottom, from(rgb(201, 88, 88)), to(rgb(161, 40, 40)));
366 @color_button_edit_moz:                 -moz_linear-gradient(top, rgb(201, 88, 88), rgb(161, 40, 40));
367
368 @color_button_edit_press:               rgb(147, 24, 24);
369 @color_button_edit_press_webkit:        -webkit-gradient(linear, left top, left bottom, from(rgb(147, 24,24)), to(rgb(110, 23, 23)));
370 @color_button_edit_press_moz:           -moz-linear-gradient(top, rgb(147, 24, 24), rgb(110, 23, 23));
371
372
373 .LESSbutton_text1_style{
374         font-family: @font_family;
375         font-weight: normal;
376         font-size: 1.0rem;
377         font-style:normal;
378         color: @color_button_text_black;
379         &:hover {color: @color_button_text_black;}
380 }
381
382 .LESScirclebutton_hover_style{
383         border-width: 0px;
384         background: @color_circlebutton_hover;
385         background: @color_circlebutton_hover_webkit;
386         backgronnd: @color_circlebutton_hover_moz;
387 }
388
389 .LESScirclebutton_press_style{
390         border-width: 0px;
391         background: @color_circlebutton_press;
392         background: @color_circlebutton_press_webkit;
393         background: @color_circlebutton_press_moz;
394 }
395
396 .LESStoggleswitch_on_style{
397         background: @color_button_switch_BGon;
398         background: @color_button_switch_BGon_webkit;
399         background: @color_button_switch_BGon_moz;
400         border-radius: @radius_button_switch;
401         -webkit-border-radius: @radius_button_switch;
402         -moz-border-radius: @radius_button_switch;
403 }
404
405 .LESStoggleswitch_off_style{
406         color: @color_button_switch_BGoff_text_color;
407         background: @color_button_switch_BGoff;
408         background: @color_button_switch_BGoff_webkit;
409         background: @color_button_switch_BGoff_moz;
410         border-radius: @radius_button_switch;
411         -webkit-border-radius: @radius_button_switch;
412         -moz-border-radius: @radius_button_switch;
413 }
414
415 .LESStoggleswitch_reed_style{
416         background: @color_button_switch_BGreed;
417         background: @color_button_switch_BGreed_webkit;
418         background: @color_button_switch_BGreed_moz;
419         border-radius: @radius_button_switch_reed;
420         -webkit-border-radius: @radius_button_switch_reed;
421         -moz-border-radius: @radius_button_switch_reed;
422 }
423
424 .LESSbutton_edit_style{
425         background: @color_button_edit;
426         background: @color_button_edit_webkit;
427         background: @color_button_edit_moz;
428         color: rgb(249, 249, 249);
429 }
430
431 .LESSbutton_editpress_style{
432         background: @color_button_edit_press;
433         background: @color_button_edit_press_webkit;
434         background: @color_button_edit_press_moz;
435 }
436
437 .LESSbutton_edit_padding{
438         padding: 0.5em 0.8em;
439 }
440
441 /***************************************************************************
442                     Date Time picker color set
443 ***************************************************************************/
444 @color_timepicker_selector_color:       rgb(42,137,194);
445
446
447 /***************************************************************************
448                     DaySelector
449 ***************************************************************************/
450 @color_dayselector_Btn_Sat:             rgba(0, 168, 231, 1); /* #00a8e7 */
451 @color_dayselector_Btn_Sun:             rgba(240, 20, 2, 1); /* #f01402 */
452 @color_dayselector_Btn_Mon_to_Fri:      rgba(249, 249, 249, 1); /* #f9f9f9 */   
453 @color_dayselector_Btn_border:          rgba(26, 82, 116, 1); /* #f9f9f9 */     
454
455 @color_dayselector_Btn_normal_start:    rgb(126, 157, 178);
456 @color_dayselector_Btn_normal_end:      rgb(84,121,144);
457
458 @color_dayselector_Btn_press_start:     rgb(59,119,150);
459 @color_dayselector_Btn_press_end:       rgb(47,91,117);
460
461
462 .LESSDayselectorButtonNormal{
463         .LESSbackground-with-gradient(top, @color_dayselector_Btn_normal_start, @color_dayselector_Btn_normal_end);
464 }
465
466 .LESSDayaselectorButtonPress{
467         .LESSbackground-with-gradient(top, @color_dayselector_Btn_press_start, @color_dayselector_Btn_press_end);
468 }
469
470
471 /***************************************************************************
472                     OptionHeader
473 ***************************************************************************/
474 @color_optionheader_Background: rgba(26, 82, 116, 1); 
475 @color_optionheader_bt:         -webkit-linear-gradient(top,  rgb(56,112,141) 0%,rgb(36,93,128) 100%);
476 @color_optionheader_bt_press:   -webkit-linear-gradient(top,  rgb(74,164,218) 0%,rgb(43,138,195) 100%);
477 @color_optionheader_tab_text:   rgba(249, 249, 249, 1); /* #f9f9f9 */
478
479
480
481
482 /***************************************************************************
483                     SegmentControl
484 ***************************************************************************/
485 @color_segmentcontrol_btn_normal : rgb(125,157,178);
486 @color_segmentcontrol_btn_normal_start : rgb(125,157,178);
487 @color_segmentcontrol_btn_normal_end : rgb(84,121,144);
488
489 @color_segmentcontrol_btn_press : rgb(59,119,150);
490 @color_segmentcontrol_btn_press_start : rgb(59,119,150);
491 @color_segmentcontrol_btn_press_end : rgb(47,91,117);
492
493 @color_segmentcontrol_Seg_text : rgba(249, 249, 249, 1); /* #F9F9F9*/
494 @color_segmentcontrol_Seg_text_pressed : rgba(249, 249, 249, 1); /* #F9F9F9*/
495
496
497 /* delete */
498 /*
499 .LESSSegmentControlBtnBackground
500 {
501         .LESSbackground-with-gradient(top, @color_segmentcontrol_btn_normal_start, @color_segmentcontrol_btn_normal_end);
502 }
503
504 .LESSSegmentControlBtnPressBackground
505 {
506         .LESSbackground-with-gradient(top, @color_segmentcontrol_btn_press_start, @color_segmentcontrol_btn_press_end);
507 }
508 */
509
510 /***************************************************************************
511                     ControlGroup
512 ***************************************************************************/
513 @color_controlgroup_btn_border : rgba(26, 82, 116, 1); /* #252525 */
514
515
516 /***************************************************************************
517                     Header / Footer 
518                     NavigationBar / ControlBar
519 ***************************************************************************/
520 @color_bar_bg : rgb(156, 181, 179);
521 @color_bar_bg_start : rgb(156, 181, 179);
522 @color_bar_bg_end : rgb(79,116,141);
523
524 @color_bar_back_btn_press : rgba(26, 82, 116, 0.3); /* #1A5274 */
525
526 @color_bar_btn_bg : transparent;
527 @color_bar_back_btn_bg : transparent;
528
529 @color_bar_seg_btn_border : rgba(0, 0, 0, 0.1);
530 @color_bar_seg_text_press : rgba(249, 249, 249, 1); 
531 @color_bar_seg_text_normal : rgba(249, 249, 249, 1); 
532 @color_bar_seg_btn_press : -webkit-linear-gradient(top,  rgb(61,120,151) 0%,rgb(48,91,118) 100%);
533 @color_bar_seg_btn_normal : -webkit-linear-gradient(top,  rgb(127,159,181) 0%,rgb(70,108,133) 100%);
534
535 @color_bar_title_bg : rgb(90, 153, 186);
536 @color_bar_title_bg_start : rgb(90, 153, 186);
537 @color_bar_title_bg_end : rgb(32, 84, 115);
538
539 @color_bar_title_btn_border : rgba(36, 93, 128, 0.4); /* 00_winset_divider_line.png  temp value */
540
541 @color_bar_footer_bg : -webkit-linear-gradient(top,  rgb(156,181,179) 0%,rgb(79,116,141) 100%);
542 @color_bar_footer_btn_bg : transparent;
543
544 @color_controlbar_btn_border : rgba(0, 0, 0, 0.1); /* #000000 */
545 @color_controlbar_tabbbar_bg : transparent;
546 @color_controlbar_toolbbar_bg : transparent;
547 @color_controlbar_bg : transparent;
548
549 @color_controlbar_btn_text : rgba(249, 249, 249, 1); /* #F9F9F9 */
550
551
552 @color_border_top : rgba(255, 255, 255, 0.5);
553 @color_border_bottom : rgba(0, 0, 0, 0.5);
554
555 .LESSHeaderFooterBackground
556 {
557         .LESSbackground-with-gradient(top, @color_bar_bg_start, @color_bar_bg_end);
558 }
559
560 .LESSColorBarTitleBackground
561 {
562         background : rgb(248, 246, 239); // #F8F6EF /* Header Background */
563 }
564
565 /***************************************************************************
566                     Tickernoti
567 ***************************************************************************/
568 @color_ticker_bg:                       rgb(68, 68, 68);
569 @color_ticker_text1:                    rgb(255, 255, 255);
570 @color_ticker_text2:                    rgb(255, 255, 255);
571 @color_ticker_btn:                      rgb(64, 64, 64);
572 @color_ticker_btn_border:               rgb(50, 50, 50);
573
574
575 /***************************************************************************
576                     Smallpopup
577 ***************************************************************************/
578 @color_smallpopup_bg:                   rgb(68, 68, 68);
579 @color_smallpopup_text:                 rgb(255, 255, 255);
580
581
582 /***************************************************************************
583                     No Contents
584 ***************************************************************************/
585 @color_nocontents_text:                 rgb(128, 128, 128);
586
587
588 /***************************************************************************
589                     Slider
590 ***************************************************************************/
591 @color_slider_handle_text:              rgb(59, 115, 182);
592 @color_slider_popup_text:               rgb(249, 249, 249);
593
594
595 /***************************************************************************
596                     Progress
597 ***************************************************************************/
598 @color_progress_bar0:                   rgb(226, 223, 219);
599 @color_progress_bar1:                   rgb(54, 119, 195);
600
601
602 /***************************************************************************
603                    Handler
604 ***************************************************************************/
605 @color_scrollview_handler_bg : rgba(150, 150, 150, 0.5);
606
607 /***************************************************************************
608                    multimediaview
609 ***************************************************************************/
610 @color_multimediaview_bg : rgb(249, 249, 249);
611 @color_multimediaview_control_bg : rgba(249, 249, 249, 0.5);
612 @color_multimediaview_button_bg : rgb(249, 249, 249);
613 @color_multimediaview_timestamp_text : rgb(42, 137, 194);
614 @color_multimediaview_duration_text : rgb(128, 128, 128);
615 @color_multimediaview_bar_gray : rgb(178, 178, 178);
616 @color_multimediaview_bar_active : rgb(42, 137, 194);
617 @color_multimediaview_bar_handle : rgb(249, 249, 249);
618
619 /***************************************************************************
620                    Color widgets
621 ***************************************************************************/
622 @color_widgets_title_bg: rgb(235, 239, 241);
623 @color_widgets_basic_border: rgb(192, 192, 192);
624 @color_widgets_left_border: rgb(108, 168, 199);
625
626 .LESScolortitle_background_style{
627         background-color: @color_widgets_title_bg;
628         border: 1px solid;
629         border-color: @color_widgets_basic_border;
630         border-left: 6px solid;
631         border-left-color: @color_widgets_left_border;
632 }
633
634 .LESShsvpicker_background_style{
635         background-color: @color_widgets_title_bg;
636         border: 1px solid;
637         border-color: @color_widgets_basic_border;
638         border-left: 6px solid;
639         border-left-color: @color_widgets_left_border;
640 }
641
642 .LESSpalette_background_style{
643         background-color: @color_widgets_title_bg;
644         border: 1px solid;
645         border-top: 6px solid;
646         border-color: @color_widgets_basic_border;
647 }
648
649
650 /***************************************************************************
651                    multibutton entry
652 ***************************************************************************/
653 @color_multibuttonentry_bg : rgb(249, 249, 249);
654 @color_multibuttonentry_block_text : rgb(255, 255, 255);
655 @color_multibuttonentry_block_bg : rgb(93, 160, 196);
656 @color_multibuttonentry_block_border : rgb(88, 150, 184);
657 @color_multibuttonentry_press_bg : rgb(40, 106, 145);
658 @color_multibuttonentry_press_border : rgb(49, 126, 171);
659 @color_multibuttonentry_input_text : #222222;
660 @color_multibuttonentry_link_bg : rgb(178, 178, 178);
661 @color_multibuttonentry_link : rgb(249, 249, 249);
662
663 /***************************************************************************
664 ***************************************************************************/
665
666 /***************************************************************************
667                   virtualgrid
668 ***************************************************************************/
669 @color_virtualgrid_bg : rgb(255, 255, 255);
670
671 /***************************************************************************
672 ****************************************************************************
673                                                                         Layout ( position, padding, margin etc...)
674 ****************************************************************************
675 ***************************************************************************/
676 @style-title-font-size : 28 * @unit_base;
677
678 @style-title-extended-2btn-width : 688 * @unit_base;
679 @style-title-extended-2btn-radio-width : 343 * @unit_base;
680 @style-title-extended-3btn-width : 688 * @unit_base;
681 @style-title-extended-3btn-radio-width : 229 * @unit_base;
682 @style-title-extended-4btn-width : 688 * @unit_base;
683 @style-title-extended-4btn-radio-width : 171 * @unit_base;
684
685 @style-back-btn-left : 44 * @unit_base;
686 @style-back-btn-arrow-top : 30 * @unit_base;
687
688 @style-title-min-height : 30 * @unit_base;
689 @style-title-extended-margin : -30 * @unit_base;
690 /***************************************************************************
691                                                                         Navigation
692 ***************************************************************************/
693
694 .LESStitle-diff-style {
695         text-align: left;
696         margin: 20*@unit_base 8*@unit_base 12*@unit_base 8*@unit_base;
697 }
698
699 .LESSextended-controlgroup-border {
700         border-style : solid;
701         border-width : 1px;
702         border-bottom-width: 2px;
703
704         border-bottom-color: @color_border_bottom;
705         border-top-color: @color_border_top;
706         border-left-color: @color_bar_seg_btn_border;
707         border-right-color: @color_bar_seg_btn_border;
708 }
709
710 .LESSback-btn-background {
711         background : none;
712 }
713
714 .LESSbtn-back {
715         width : 144 * @unit_base;
716         height : 114 * @unit_base;
717         top : 0 * @unit_base;
718         right : 0 * @unit_base;
719 }
720
721 .LESSbtn-back-inner {
722         width : 144 * @unit_base;
723         height : 114 * @unit_base;
724 }