Export 0.1.63
[platform/framework/web/web-ui-fw.git] / src / themes / tizen / tizen-white / style.less
1 /***************************************************************************
2                    Body
3 ***************************************************************************/
4 @color_bg: rgb(248, 246, 239); // #F8F6EF // Main Background color
5 @color_text: rgb(0, 0, 0);      // 0 0 0
6 @color_text_sub:                        rgb(102, 102, 102);     // 102 102 102
7 @color_text_setting:            rgb(42, 109, 140);      // 42 109 140
8
9
10 /***************************************************************************
11                    Naviframe
12 ***************************************************************************/
13 @color_bar_title_text : rgba(59, 115, 182, 1); /* #3b73b6 */ /* title text */
14 @color_bar_btn_press : rgba(0, 0, 0, 0.1);
15
16
17 /***************************************************************************
18                    Controlbar
19 ***************************************************************************/
20 @color_controlbar_btn_tab_press : -webkit-linear-gradient(top,  rgba(169,165,151,1) 0%,rgba(246,248,239,1) 100%); /* B0514P1 : 00_tab_press_ef.9.png */
21 @color_controlbar_btn_pressed : rgba(59, 115, 182, 1);          /* B052L6P      : Tab pressed */
22 @color_controlbar_btn_normal : rgba(153, 153, 153, 1);  /* B052L6               : Tab Normal */
23
24 /***************************************************************************
25                    List
26 ***************************************************************************/
27 @color_list_bg:                                                         rgba(248, 246, 239, 1);                         /* B0211        : List bg color                 */
28 @color_list_press :                                             rgba(87, 135, 194, 1);                          /* B041         : List Press color      */
29 @color_list_border_bottom:              rgba(211, 209, 203, 0.5);                       /* B0221        : 1px line Code                 */
30 @color_list_main_text_focus:            rgba(249, 249, 249, 1);
31 @color_list_main_text_unfocus:          rgba(0, 0, 0, 1);
32 @color_list_sub_text_default: rgba(100, 100, 100, 1);
33
34 @color_list_divider_expand_div : rgba(0, 0, 0, 0.5);
35 @color_list_divider_bg : rgba(248, 246, 239, 1);                                                /* W021L1 : Index BG                                    */
36 @color_list_divider_text : rgba(59, 115, 182, 1);                                               /* W021L2 : Index bar                                   */
37
38 @color_list_dialogue_bg : rgba(239, 237, 229, 1);
39 @color_dialogue_main_text: rgba(59, 115, 182, 1);
40 @color_dialogue_border_right: rgba(142, 154, 163, 1);
41
42 @color_list_expandable_expanded_bg:     rgb(215, 225, 232);
43 @color_list_expanded_bg : rgba(220, 218, 211, 1);
44
45 @color_list_bubble_sent_text:   rgb(0, 0, 0);
46 @color_list_bubble_receive_text:        rgb(255, 255, 255);
47 @color_list_bubble_sos_text:    rgb(233, 73, 73);
48 @color_list_bubble_date_text:   rgb(104, 104, 104);
49 @color_list_bubble_date_bg:             rgba(225, 225, 225, 0);
50 @color_list_bubble_time_sent_text:      rgb(57, 166, 215);
51 @color_list_bubble_time_receive_text:   rgb(211, 0, 0);
52 @color_list_bubble_time_sos_text:       rgb(211, 0, 0);
53 @color_list_bubble_name_text:   rgb(139, 139, 139);
54 @color_list_bubble_help_text:   rgb(154, 154, 154);
55 @color_list_bubble_link_text:   rgb(34, 129, 157);
56
57
58 /***************************************************************************
59                    Shortcut Scroll
60 ***************************************************************************/
61 @color_shortcutscroll_rollover_bg: rgba(230, 227, 216, 1);              /* B0723 : 00_fast_scroll_rollover_bg.9.png */
62 @color_shortcutscroll_rollover_text: rgba(160, 159, 154, 1);    /* B0721 : Rollover text */
63 @color_shortcutscroll_popup_bg: rgba(59, 115, 182, 1);                          /* B0731 : 00_fast_scroll_popup_bg.png */
64 @color_shortcutscroll_popup_shadow: rgba(199, 199, 199, 0.5);
65 @color_shortcutscroll_popup_text: rgba(255, 255, 255, 1);                       /* B0732 : Scroll popup text */
66
67
68 /***************************************************************************
69                    SearchBar(forms.textinput)
70 ***************************************************************************/
71 @color_searchbar_bg : rgba(248, 246, 239, 1);
72 @color_searchbar_default_text : rgba(121, 131, 138, 1); /* Search default text */
73 @color_searchbar_input_field_bg : rgba(255, 255, 255, 1); /* W301 : 00_search_edit_field_bg.png */
74
75
76 /***************************************************************************
77                    Popup
78 ***************************************************************************/
79 @font_size_popup_info_style: 24 * @unit_base;
80 @color_popup_text_bg: rgba(248, 246, 239, 1);                                                           /* B061L1 : Popop info                                  */
81
82
83 /***************************************************************************
84                         Button(connected with other winset)
85 ***************************************************************************/
86 @color_button_EditText:         rgb(61, 61, 61);
87 @color_button_EditTextPress:    rgb(61, 61, 61);
88
89 @color_button_text_normal:      rgb(54, 49, 51);
90 @color_button_text_press:       rgb(248, 246, 239);
91
92 @color_button_normal:           rgb(235, 232, 227);
93 @color_button_normal_webkit:    -webkit-linear-gradient(top, rgb(235, 232, 227), rgb(234, 231, 226));
94 @color_button_normal_moz:       -moz-linear-gradient(top, rgb(235, 232, 227), rgb(234, 231, 226));
95 @color_button_normal_o:         -o-linear-gradient(top, rgb(235, 232, 227), rgb(234, 231, 226));
96 @color_button_normal_ms:        -ms-linear-gradient(top, rgb(235, 232, 227), rgb(234, 231, 226));
97 @color_button_press:            rgb(59, 115, 182);
98
99 @color_button_inner:            rgb(247, 245, 238);
100 @color_button_inner_webkit:     -webkit-linear-gradient(top, rgb(250, 247, 242), rgb(248, 245, 240));
101 @color_button_inner_moz:        -moz-linear-gradient(top, rgb(250, 247, 242), rgb(248, 245, 240));
102 @color_button_inner_o:          -o-linear-gradient(top, rgb(250, 247, 242), rgb(248, 245, 240));
103 @color_button_inner_ms:         -ms-linear-gradient(top, rgb(250, 247, 242), rgb(248, 245, 240));
104
105 @button_shadow_outer:              0 0 1px 1px rgba(255, 255, 255, 1);
106 @button_shadow_inner:           none;
107
108 .LESSbutton_box_style{
109         color: @color_button_text_normal;
110 }
111
112 .LESSbutton_up_style{
113         background: @color_button_normal;
114         background: @color_button_normal_webkit;
115         background: @color_button_normal_moz;
116         background: @color_button_normal_o;
117         background: @color_button_normal_ms;
118 }
119
120 .LESSbutton_box_style{
121         background: @color_button_normal;
122         background: @color_button_normal_webkit;
123         background: @color_button_normal_moz;
124         background: @color_button_normal_o;
125         background: @color_button_normal_ms;
126         border: 1px solid;
127         border-color: rgba(220, 218, 211, 1);
128         .LESSbox-shadow-line( @button_shadow_outer );
129 }
130 .LESSbutton_inner_box_style{
131         background: @color_button_inner;
132         background: @color_button_inner_webkit;
133         background: @color_button_inner_ms;
134         background: @color_button_inner_o;
135         background: @color_button_inner_moz;
136         .LESSbox-shadow-line( @button_shadow_inner );
137 }
138 .LESSbutton_inner_pressstyle{
139         color: @color_button_text_press;
140 }
141
142 .LESSbutton_text1_style{
143         font-family: @font_family;
144         font-weight: normal;
145         font-size: 1.0rem;
146         font-style:normal;
147         color: @color_button_text_black;
148 }
149
150 .LESSbutton_hover_style{
151         color: @color_button_text_normal;
152 }
153
154 .LESSbutton_down_style{
155         background: @color_button_press;
156         color: @color_button_text_press;
157 }
158
159
160 /***************************************************************************
161                         contextual popup
162 ***************************************************************************/
163 @color_ctxpopup_text:                   rgb(255, 255, 255);
164 @color_ctxpopup_background:             rgb(68, 68, 68);
165 @color_ctxpopup_border_left:            rgb(91, 91, 91);
166 @color_ctxpopup_border_right:           rgb(45, 45, 45);
167 @color_ctxpopup_border_top:             rgb(91, 91, 91);
168 @color_ctxpopup_border_bottom:          rgb(45, 45, 45);
169
170 @color_ctxbutton_press:            rgb(59, 115, 182);
171
172 @color_ctxpopup_timepicker_text:        rgba( 249, 249, 249, 0.4 );
173 @color_ctxpopup_timepicker_text_focus:  rgba( 249, 249, 249, 1 );
174 @color_bar_back_btn_press : rgba(26, 82, 116, 0.3); /* #1A5274 */
175
176
177 /***************************************************************************
178                    Scrollview
179 ***************************************************************************/
180 @color_scrollbar:               rgb(198, 196, 190);
181
182
183 /***************************************************************************
184                    Date Time picker
185 ***************************************************************************/
186 @color_timepicker_selector_color:       rgb(42,137,194);
187 @font_size_datetime_main_text:              22 * @unit_base;
188 @font_size_datetime_sub_text:               16 * @unit_base;
189
190
191 /***************************************************************************
192                    DaySelector
193 ***************************************************************************/
194 @color_dayselector_Btn_Sat:             rgba(0, 168, 231, 1); /* #00a8e7 */
195 @color_dayselector_Btn_Sun:             rgba(240, 20, 2, 1); /* #f01402 */
196 @color_dayselector_Btn_Mon_to_Fri:      rgba(249, 249, 249, 1); /* #f9f9f9 */   
197 @color_dayselector_Btn_border:          rgba(26, 82, 116, 1); /* #f9f9f9 */     
198
199 @color_dayselector_Btn_normal_start:    rgb(126, 157, 178);
200 @color_dayselector_Btn_normal_end:      rgb(84,121,144);
201
202 @color_dayselector_Btn_press_start:     rgb(59,119,150);
203 @color_dayselector_Btn_press_end:       rgb(47,91,117);
204
205
206 .LESSDayselectorButtonNormal{
207         .LESSbackground-with-gradient(top, @color_dayselector_Btn_normal_start, @color_dayselector_Btn_normal_end);
208 }
209
210 .LESSDayaselectorButtonPress{
211         .LESSbackground-with-gradient(top, @color_dayselector_Btn_press_start, @color_dayselector_Btn_press_end);
212 }
213
214
215 /***************************************************************************
216                    OptionHeader
217 ***************************************************************************/
218 @color_optionheader_Background: rgba(26, 82, 116, 1); 
219 @color_optionheader_bt:         -webkit-linear-gradient(top,  rgb(56,112,141) 0%,rgb(36,93,128) 100%);
220 @color_optionheader_bt_press:   -webkit-linear-gradient(top,  rgb(74,164,218) 0%,rgb(43,138,195) 100%);
221 @color_optionheader_tab_text:   rgba(249, 249, 249, 1); /* #f9f9f9 */
222
223
224 /***************************************************************************
225                    SegmentControl
226 ***************************************************************************/
227 @color_segmentcontrol_btn_normal : rgb(125,157,178);
228 @color_segmentcontrol_btn_normal_start : rgb(125,157,178);
229 @color_segmentcontrol_btn_normal_end : rgb(84,121,144);
230
231 @color_segmentcontrol_btn_press : rgb(59,119,150);
232 @color_segmentcontrol_btn_press_start : rgb(59,119,150);
233 @color_segmentcontrol_btn_press_end : rgb(47,91,117);
234
235 @color_segmentcontrol_Seg_text : rgba(249, 249, 249, 1); /* #F9F9F9*/
236 @color_segmentcontrol_Seg_text_pressed : rgba(249, 249, 249, 1); /* #F9F9F9*/
237
238
239 /***************************************************************************
240                    ControlGroup
241 ***************************************************************************/
242 @color_controlgroup_btn_border : rgba(26, 82, 116, 1); /* #252525 */
243
244
245 /***************************************************************************
246                    Popup
247 ***************************************************************************/
248 @color_popup_center_progressbar_title:  rgba(153, 153, 153, 1);
249 @color_popup_text_progress_title:       rgba(249, 249, 249, 1);
250
251 @color_popup_title_bg:          rgba(80, 147, 182, 255);        /* popup_title_bg.png */
252
253 @color_popup_button_bg:         rgba(248, 246, 239, 1);
254 @color_popup_font: rgba(248, 246, 239, 1); /* maybe not use only popupwindow*/
255 @color_popup_text_font:         black;
256
257 @color_popup_buttonbg:          rgb(84, 126, 153);
258 @color_popup_buttonbg_webkit:   -webkit-gradient(linear, left top, left bottom, from(rgb(84, 126, 153)), to(rgb(69, 105, 128)));
259 @color_popup_buttonbg_moz:      -moz-linear-gradient(top, rgb(84, 126, 153), rgb(69, 105, 128));
260 @color_popup_buttonbg_ms:       -ms-linear-gradient(top, rgb(84, 126, 153), rgb(69, 105, 128));
261 @color_popup_buttonbg_o:        -o-linear-gradient(top, rgb(84, 126, 153), rgb(69, 105, 128));
262 @color_popup_buttontext:        rgb(249, 249, 249);
263 @color_popup_buttonbg_over:     rgb(94, 136, 163);
264
265 @color_popup_buttonbg_press:    rgb(67, 160, 217);
266 @color_popup_buttonbg_press_webkit:     -webkit-gradient(linear, left top, left bottom, from(rgb(67, 160, 217)), to(rgb(56, 139, 185)));
267 @color_popup_buttonbg_press_moz:        -moz-linear-gradient(top, rgb(67, 160, 217), rgb(56, 139, 185));
268 @color_popup_buttonbg_press_ms:         -ms-linear-gradient(top, rgb(67, 160, 217), rgb(56, 139, 185));
269 @color_popup_buttonbg_press_o:          -o-linear-gradient(top, rgb(67, 160, 217), rgb(56, 139, 185));
270
271 @color_popup_scroller_bg:       rgba(248, 246, 239, 1);
272
273
274 @font_size_popup_basic_style_title:             24 * @unit_base; //1.1875rem;   /* 38px */
275 @font_size_popup_center_progressbar_title:      26 * @unit_base; //0.8125rem;   /* 26px */
276 @font_size_popup_text_progress_title:           42 * @unit_base; //1.3125rem;   /* 42px */
277 @font_size_popup_button_text:                   32 * @unit_base; //1.0rem;      /* 32px */
278
279 .LESSpopup_button_style{
280 /*      background: @color_popup_buttonbg;
281         background: @color_popup_buttonbg_webkit;
282         background: @color_popup_buttonbg_moz;
283         background: @color_popup_buttonbg_ms;
284         background: @color_popup_buttonbg_o;
285         color: @color_popup_buttontext;*/
286 }
287
288 .LESSpopup_button_hover_style{
289         background: @color_popup_buttonbg_over;
290 }
291
292 .LESSpopup_button_press_style{
293         background: @color_popup_buttonbg_press;
294         background: @color_popup_buttonbg_press_webkit;
295         background: @color_popup_buttonbg_press_moz;
296         background: @color_popup_buttonbg_press_ms;
297         background: @color_popup_buttonbg_press_o;
298 }
299
300 .LESSpopup_padding_style{
301 }
302
303
304 /***************************************************************************
305                     Button
306 ***************************************************************************/
307
308 @color_button_text_black:       rgb(0, 0, 0);
309 @color_button_text_white:       rgb(249, 249, 249);
310 @color_button_text_press:       rgb(249, 249, 249);
311
312 @color_circlebutton_hover:              rgb(239, 119, 126);
313 @color_circlebutton_hover_webkit:       -webkit-gradient(linear, left top, left bottom, from(rgb(198, 78, 85)), to(rgb(166, 43, 45)));
314 @color_circlebutton_hover_moz:          -moz-linear-gradient(top, rgb(198, 78, 85), rgb(166,43,45));
315 @color_circlebutton_press:              rgb(67, 160, 217);
316 @color_circlebutton_press_webkit:       -webkit-gradient(linear, left top, left bottom, from(rgb(67, 160, 217)), to(rgb(56, 139, 185)));
317 @color_circlebutton_press_moz:          -moz-linear-gradient(top, rgb(67, 160, 217), rgb(56, 139, 185));
318
319
320 @color_button_switch_BGon:              rgb(42, 126, 172);
321 @color_button_switch_BGon_webkit:       -webkit-gradient(linear, left top, left bottom, from(rgb(33, 116, 167)), to(rgb(75, 165, 219)));
322 @color_button_switch_BGon_moz:          -moz-linear-gradient(top, rgb(33, 116, 167), rgb(75, 165, 219));
323 @color_button_switch_BGoff:             rgb(151, 161, 167);
324 @color_button_switch_BGoff_text_color:  rgb(203, 203, 203);
325 @color_button_switch_BGoff_webkit:      -webkit-gradient(linear, left top, left bottom, from(rgb(114, 114, 114)), to(rgb(141, 141, 141)));
326 @color_button_switch_BGoff_moz:         -moz-linear-gradient(top, rgb(114, 114, 114), rgb(141, 141, 141));
327 @color_button_switch_BGreed:            rgb(253, 253, 253);
328 @color_button_switch_BGreed_webkit:     -webkit-gradient(linear, left top, left bottom, from(rgb(253, 253, 253)), to(rgb(231, 231, 231)));
329 @color_button_switch_BGreed_moz:        -moz-linear-gradient(top, rgb(253, 253, 253), rgb(231, 231, 231));
330
331 @radius_button_switch: 4px;
332 @radius_button_switch_reed: 2px;
333
334 @color_button_edit:                     rgb(201, 88, 88);
335 @color_button_edit_webkit:              -webkit-gradient(linear, left top, left bottom, from(rgb(201, 88, 88)), to(rgb(161, 40, 40)));
336 @color_button_edit_moz:                 -moz_linear-gradient(top, rgb(201, 88, 88), rgb(161, 40, 40));
337
338 @color_button_edit_press:               rgb(147, 24, 24);
339 @color_button_edit_press_webkit:        -webkit-gradient(linear, left top, left bottom, from(rgb(147, 24,24)), to(rgb(110, 23, 23)));
340 @color_button_edit_press_moz:           -moz-linear-gradient(top, rgb(147, 24, 24), rgb(110, 23, 23));
341
342
343 .LESStoggleswitch_on_style{
344         background: @color_button_switch_BGon;
345         background: @color_button_switch_BGon_webkit;
346         background: @color_button_switch_BGon_moz;
347         border-radius: @radius_button_switch;
348         -webkit-border-radius: @radius_button_switch;
349         -moz-border-radius: @radius_button_switch;
350 }
351
352 .LESStoggleswitch_off_style{
353         color: @color_button_switch_BGoff_text_color;
354         background: @color_button_switch_BGoff;
355         background: @color_button_switch_BGoff_webkit;
356         background: @color_button_switch_BGoff_moz;
357         border-radius: @radius_button_switch;
358         -webkit-border-radius: @radius_button_switch;
359         -moz-border-radius: @radius_button_switch;
360 }
361
362 .LESStoggleswitch_reed_style{
363         background: @color_button_switch_BGreed;
364         background: @color_button_switch_BGreed_webkit;
365         background: @color_button_switch_BGreed_moz;
366         border-radius: @radius_button_switch_reed;
367         -webkit-border-radius: @radius_button_switch_reed;
368         -moz-border-radius: @radius_button_switch_reed;
369 }
370
371 .LESSbutton_edit_style{
372         background: @color_button_edit;
373         background: @color_button_edit_webkit;
374         background: @color_button_edit_moz;
375         color: rgb(249, 249, 249);
376 }
377
378 .LESSbutton_editpress_style{
379         background: @color_button_edit_press;
380         background: @color_button_edit_press_webkit;
381         background: @color_button_edit_press_moz;
382 }
383
384 .LESSbutton_edit_padding{
385         padding: 0.5em 0.8em;
386 }
387
388
389 /***************************************************************************
390                     Tickernoti
391 ***************************************************************************/
392 @color_ticker_bg:                       rgb(68, 68, 68);
393 @color_ticker_text1:                    rgb(255, 255, 255);
394 @color_ticker_text2:                    rgb(255, 255, 255);
395 @color_ticker_btn:                      rgb(64, 64, 64);
396 @color_ticker_btn_border:               rgb(50, 50, 50);
397
398
399 /***************************************************************************
400                     Smallpopup
401 ***************************************************************************/
402 @color_smallpopup_bg:                   rgb(68, 68, 68);
403 @color_smallpopup_text:                 rgb(255, 255, 255);
404
405
406 /***************************************************************************
407                     No Contents
408 ***************************************************************************/
409 @color_nocontents_text:                 rgb(128, 128, 128);
410
411
412 /***************************************************************************
413                     Slider
414 ***************************************************************************/
415 @color_slider_handle_text:              rgb(59, 115, 182);
416 @color_slider_popup_text:               rgb(249, 249, 249);
417
418
419 /***************************************************************************
420                     Progress
421 ***************************************************************************/
422 @color_progress_bar0:                   rgb(226, 223, 219);
423 @color_progress_bar1:                   rgb(54, 119, 195);
424
425
426 /***************************************************************************
427                    Handler
428 ***************************************************************************/
429 @color_scrollview_handler_bg : rgba(150, 150, 150, 0.5);
430
431
432 /***************************************************************************
433                    multimediaview
434 ***************************************************************************/
435 @color_multimediaview_bg : rgb(249, 249, 249);
436 @color_multimediaview_control_bg : rgba(248, 246, 239, 0.5);
437 @color_multimediaview_button_bg : rgb(248, 246, 239);
438 @color_multimediaview_timestamp_text : rgb(74, 132, 201);
439 @color_multimediaview_duration_text : rgb(128, 128, 128);
440 @color_multimediaview_bar_gray : rgb(203, 200, 197);
441 @color_multimediaview_bar_active : rgb(74, 132, 201);
442 @color_multimediaview_bar_handle : rgb(249, 249, 249);
443 @color_multimediaview_button_border : rgb(186, 185, 180);
444
445
446 /***************************************************************************
447                    Color widgets
448 ***************************************************************************/
449 @color_widgets_title_bg: rgb(235, 239, 241);
450 @color_widgets_basic_border: rgb(192, 192, 192);
451 @color_widgets_left_border: rgb(108, 168, 199);
452
453 .LESScolortitle_background_style{
454         background-color: @color_widgets_title_bg;
455         border: 1px solid;
456         border-color: @color_widgets_basic_border;
457         border-left: 6px solid;
458         border-left-color: @color_widgets_left_border;
459 }
460
461 .LESShsvpicker_background_style{
462         background-color: @color_widgets_title_bg;
463         border: 1px solid;
464         border-color: @color_widgets_basic_border;
465         border-left: 6px solid;
466         border-left-color: @color_widgets_left_border;
467 }
468
469 .LESSpalette_background_style{
470         background-color: @color_widgets_title_bg;
471         border: 1px solid;
472         border-top: 6px solid;
473         border-color: @color_widgets_basic_border;
474 }
475
476
477 /***************************************************************************
478                    multibutton entry
479 ***************************************************************************/
480 @color_multibuttonentry_block_text : rgb(255, 255, 255);
481 @color_multibuttonentry_block_bg : rgb(95, 138, 189);
482 @color_multibuttonentry_press_bg : rgb(54, 89, 132);
483 @color_multibuttonentry_input_text : #222222;
484 @color_multibuttonentry_link : rgb(186, 185, 180);
485 @color_multibuttonentry_label_text : rgb(102, 102, 102);
486
487
488 /***************************************************************************
489 ***************************************************************************/