src/themes/tizen/tizen-white/style.less

   1 /***************************************************************************
   2                    Body
   3 ***************************************************************************/
   4 @color_bg: rgb(248, 246, 239);                                  /* B011 : Main Background color */
   5 @color_text: rgb(0, 0, 0);                                                      /* B012 : Main font color */
   6
   7 /***************************************************************************
   8                    Naviframe
   9 ***************************************************************************/
  10 @color_bar_title_text : rgba(59, 115, 182, 1);                  /* B042 : title text */
  11 @color_bar_title_button_text : rgba(58, 58, 58, 1);     /* B052L4 : Title text button */
  12 @color_bar_title_button_text_press : rgba(59, 115, 182, 1);     /* B052L5 : Title text button press */
  13 @color_bar_btn_press : rgba(64, 147, 247, 0.1);                 /* B052L1P : Title text button press bg */
  14 @color_bar_divider_line : rgba(178, 177, 174, 1);               /* 00_divider_line.9.png */
  15 @color_bar_naviframe_bg : rgba(248, 246, 239, 1);
  16
  17 /***************************************************************************
  18                    Tabbar
  19 ***************************************************************************/
  20 @color_tabbar_btn_tab_press : -webkit-linear-gradient(top, rgba(210,210,200,1) 0%, rgba(246,248,239,1) 100%); /* B0514P1 : 00_tab_press_ef.9.png */
  21 @color_tabbar_btn_pressed : rgba(59, 115, 182, 1);      /* B052L6P */
  22 @color_tabbar_btn_normal : rgba(153, 153, 153, 1);      /* B052L6 */
  23
  24 /***************************************************************************
  25                    List
  26 ***************************************************************************/
  27 @color_list_bg: rgba(248, 246, 239, 1);                                                         /* B0211 */
  28 @color_list_press : rgba(87, 135, 194, 1);                                              /* B041 */
  29 @color_list_border_bottom: rgba(211, 209, 203, 0.5);    /* B0221 */
  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 */
  36 @color_list_divider_text : rgba(59, 115, 182, 1);                       /* W021L2 */
  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_expanded_bg : rgba(220, 218, 211, 1);
  43
  44 @color_list_bubble_sent_text:   rgb(0, 0, 0);
  45 @color_list_bubble_receive_text:        rgb(255, 255, 255);
  46 @color_list_bubble_sos_text:    rgb(233, 73, 73);
  47 @color_list_bubble_date_text:   rgb(104, 104, 104);
  48 @color_list_bubble_date_bg:             rgba(225, 225, 225, 0);
  49 @color_list_bubble_time_sent_text:      rgb(57, 166, 215);
  50 @color_list_bubble_time_receive_text:   rgb(211, 0, 0);
  51 @color_list_bubble_time_sos_text:       rgb(211, 0, 0);
  52 @color_list_bubble_name_text:   rgb(139, 139, 139);
  53 @color_list_bubble_help_text:   rgb(154, 154, 154);
  54 @color_list_bubble_link_text:   rgb(34, 129, 157);
  55
  56 @list-font-size-main:   22 * @unit_base;
  57 @list-font-size-divider: 16 * @unit_base;       // NOTE: defined in dialogue group
  58
  59 @list-smallicon-size: 17 * @unit_base;
  60 @list-li-padding-horizontal: 8 * @unit_base;
  61
  62 @list-bigicon-size2: 72 * @unit_base;
  63
  64 /***************************************************************************
  65                    Shortcut Scroll
  66 ***************************************************************************/
  67 @color_fastscroll_rollover_bg: rgba(230, 227, 216, 1);          /* B0723 : 00_fast_scroll_rollover_bg.9.png */
  68 @color_fastscroll_rollover_text: rgba(160, 159, 154, 1);        /* B0721 : Rollover text */
  69 @color_fastscroll_popup_bg: rgba(59, 115, 182, 1);              /* B0731 : 00_fast_scroll_popup_bg.png */
  70 @color_fastscroll_popup_shadow: rgba(199, 199, 199, 0.5);
  71 @color_fastscroll_popup_text: rgba(255, 255, 255, 1);           /* B0732 : Scroll popup text */
  72
  73
  74 /***************************************************************************
  75                    SearchBar(forms.textinput)
  76 ***************************************************************************/
  77 @color_searchbar_bg : rgba(248, 246, 239, 1);
  78 @color_searchbar_default_text : rgba(121, 131, 138, 1);         /* Search default text */
  79 @color_searchbar_input_field_bg : rgba(255, 255, 255, 1);       /* W301 : 00_search_edit_field_bg.png */
  80 @color_searchbar_border : rgba(153, 153, 153, 1);
  81
  82
  83 /***************************************************************************
  84                    Popup
  85 ***************************************************************************/
  86 @font_size_popup_info_style: 24 * @unit_base;
  87 @color_popup_text_bg: rgba(248, 246, 239, 1);   /* B061L1 : Popop info */
  88
  89
  90 /***************************************************************************
  91                         Button(connected with other winset)
  92 ***************************************************************************/
  93
  94 @color_button_text_black:       rgb(0, 0, 0);
  95
  96 @color_button_EditText:         rgb(249, 249, 249);
  97 @color_button_EditTextPress:    rgb(61, 61, 61);
  98
  99 @color_button_text_normal:      rgb(58, 58, 58);
 100 @color_button_text_press:       rgb(248, 246, 239);
 101 @color_button_text_white:       rgb(249, 249, 249);
 102
 103 @color_button_normal:           rgb(235, 232, 227);
 104 @color_button_normal_webkit:    -webkit-linear-gradient(top, rgb(235, 232, 227), rgb(234, 231, 226));
 105 @color_button_normal_moz:       -moz-linear-gradient(top, rgb(235, 232, 227), rgb(234, 231, 226));
 106 @color_button_normal_o:         -o-linear-gradient(top, rgb(235, 232, 227), rgb(234, 231, 226));
 107 @color_button_normal_ms:        -ms-linear-gradient(top, rgb(235, 232, 227), rgb(234, 231, 226));
 108 @color_button_press:            rgb(59, 115, 182);
 109
 110 @color_button_inner:            rgb(247, 245, 238);
 111 @color_button_inner_webkit:     -webkit-linear-gradient(top, rgb(250, 247, 242), rgb(248, 245, 240));
 112 @color_button_inner_moz:        -moz-linear-gradient(top, rgb(250, 247, 242), rgb(248, 245, 240));
 113 @color_button_inner_o:          -o-linear-gradient(top, rgb(250, 247, 242), rgb(248, 245, 240));
 114 @color_button_inner_ms:         -ms-linear-gradient(top, rgb(250, 247, 242), rgb(248, 245, 240));
 115
 116 @button_shadow_outer:           0 0 1px 1px rgba(255, 255, 255, 1);
 117 @button_shadow_inner:           none;
 118
 119 @color_button_edit:             rgb(201, 88, 88);
 120 @color_button_edit_webkit:      -webkit-gradient(linear, left top, left bottom, from(rgb(201, 88, 88)), to(rgb(161, 40, 40)));
 121 @color_button_edit_moz:         -moz_linear-gradient(top, rgb(201, 88, 88), rgb(161, 40, 40));
 122 @color_button_inner_border:     rgba(199, 197, 190, 1);
 123 .LESSbutton_box_style{
 124         color: @color_button_text_normal;
 125 }
 126
 127 .LESSbutton_up_style{
 128         background: @color_button_normal;
 129         background: @color_button_normal_webkit;
 130         background: @color_button_normal_moz;
 131         background: @color_button_normal_o;
 132         background: @color_button_normal_ms;
 133 }
 134
 135 .LESSbutton_box_style{
 136         background: @color_button_normal;
 137         background: @color_button_normal_webkit;
 138         background: @color_button_normal_moz;
 139         background: @color_button_normal_o;
 140         background: @color_button_normal_ms;
 141         border: 1px solid;
 142         border-color: rgba(220, 218, 211, 1);
 143         .LESSbox-shadow-line( @button_shadow_outer );
 144 }
 145 .LESSbutton_inner_box_style{
 146         background: @color_button_inner;
 147         background: @color_button_inner_webkit;
 148         background: @color_button_inner_ms;
 149         background: @color_button_inner_o;
 150         background: @color_button_inner_moz;
 151         .LESSbox-shadow-line( @button_shadow_inner );
 152 }
 153 .LESSbutton_inner_pressstyle{
 154         color: @color_button_text_press;
 155 }
 156
 157 .LESSbutton_text1_style{
 158         font-family: @font_family;
 159         font-weight: normal;
 160         font-size: 1.0rem;
 161         font-style:normal;
 162         color: @color_button_text_black;
 163 }
 164
 165 .LESSbutton_hover_style{
 166         color: @color_button_text_normal;
 167 }
 168
 169 .LESSbutton_down_style{
 170         background: @color_button_press;
 171         color: @color_button_text_press;
 172 }
 173
 174 .LESSbutton_edit_style{
 175         background: @color_button_edit;
 176         background: @color_button_edit_webkit;
 177         background: @color_button_edit_moz;
 178 }
 179
 180 /***************************************************************************
 181                         contextual popup
 182 ***************************************************************************/
 183 @color_ctxpopup_text:                   rgb(255, 255, 255);
 184 @color_ctxpopup_background:             rgb(68, 68, 68);
 185 @color_ctxpopup_border_left:            rgb(45, 45, 45);
 186 @color_ctxpopup_border_right:           rgb(91, 91, 91);
 187 @color_ctxpopup_border_top:             rgb(91, 91, 91);
 188 @color_ctxpopup_border_bottom:          rgb(45, 45, 45);
 189
 190 @color_ctxbutton_press:            rgb(59, 115, 182);
 191
 192 @color_ctxpopup_timepicker_text:        rgba( 255, 255, 255, 0.7 );
 193 @color_ctxpopup_timepicker_text_focus:  rgba( 255, 255, 255, 1 );
 194
 195
 196 /***************************************************************************
 197                    Scrollview
 198 ***************************************************************************/
 199 @color_scrollbar:               rgb(198, 196, 190);
 200 @color_scrollview_indicator_start:      rgb(255,255,255);
 201 @color_scrollview_indicator_end:        rgb(128,128,128);
 202
 203 /***************************************************************************
 204                    Date Time picker
 205 ***************************************************************************/
 206 @color_timepicker_selector_color:       rgb(59,115,182);
 207 @font_size_datetime_main_text:              22 * @unit_base;
 208 @font_size_datetime_sub_text:               16 * @unit_base;
 209
 210 /***************************************************************************
 211                    SegmentControl
 212 ***************************************************************************/
 213 @color_segmentcontrol_Seg_text : rgba(58, 58, 58, 1);   /* B052L4 : Title text button */
 214 @color_segmentcontrol_Seg_text_pressed : rgb(59,119,150);
 215
 216 /***************************************************************************
 217                    Popup
 218 ***************************************************************************/
 219 @color_popup_center_progressbar_title:  rgba(153, 153, 153, 1);
 220 @color_popup_title_bg:          rgba(80, 147, 182, 255);        /* popup_title_bg.png */
 221
 222 @color_popup_button_bg:         rgba(248, 246, 239, 1);
 223 @color_popup_font: rgba(248, 246, 239, 1); /* maybe not use only popupwindow*/
 224 @color_popup_text_font:         black;
 225
 226 @color_popup_buttonbg:          rgb(84, 126, 153);
 227 @color_popup_buttonbg_webkit:   -webkit-gradient(linear, left top, left bottom, from(rgb(84, 126, 153)), to(rgb(69, 105, 128)));
 228 @color_popup_buttonbg_moz:      -moz-linear-gradient(top, rgb(84, 126, 153), rgb(69, 105, 128));
 229 @color_popup_buttonbg_ms:       -ms-linear-gradient(top, rgb(84, 126, 153), rgb(69, 105, 128));
 230 @color_popup_buttonbg_o:        -o-linear-gradient(top, rgb(84, 126, 153), rgb(69, 105, 128));
 231 @color_popup_buttontext:        rgb(249, 249, 249);
 232 @color_popup_buttonbg_over:     rgb(94, 136, 163);
 233
 234 @color_popup_buttonbg_press:    rgb(67, 160, 217);
 235 @color_popup_buttonbg_press_webkit:     -webkit-gradient(linear, left top, left bottom, from(rgb(67, 160, 217)), to(rgb(56, 139, 185)));
 236 @color_popup_buttonbg_press_moz:        -moz-linear-gradient(top, rgb(67, 160, 217), rgb(56, 139, 185));
 237 @color_popup_buttonbg_press_ms:         -ms-linear-gradient(top, rgb(67, 160, 217), rgb(56, 139, 185));
 238 @color_popup_buttonbg_press_o:          -o-linear-gradient(top, rgb(67, 160, 217), rgb(56, 139, 185));
 239
 240 @color_popup_scroller_bg:       rgba(248, 246, 239, 1);
 241
 242
 243 @font_size_popup_basic_style_title:             24 * @unit_base; //1.1875rem;   /* 38px */
 244 @font_size_popup_center_progressbar_title:      26 * @unit_base; //0.8125rem;   /* 26px */
 245 @font_size_popup_text_progress_title:           42 * @unit_base; //1.3125rem;   /* 42px */
 246 @font_size_popup_button_text:                   32 * @unit_base; //1.0rem;      /* 32px */
 247
 248 .LESSpopup_button_style{
 249 /*      background: @color_popup_buttonbg;
 250         background: @color_popup_buttonbg_webkit;
 251         background: @color_popup_buttonbg_moz;
 252         background: @color_popup_buttonbg_ms;
 253         background: @color_popup_buttonbg_o;
 254         color: @color_popup_buttontext;*/
 255 }
 256
 257 .LESSpopup_button_hover_style{
 258         background: @color_popup_buttonbg_over;
 259 }
 260
 261 .LESSpopup_button_press_style{
 262         background: @color_popup_buttonbg_press;
 263         background: @color_popup_buttonbg_press_webkit;
 264         background: @color_popup_buttonbg_press_moz;
 265         background: @color_popup_buttonbg_press_ms;
 266         background: @color_popup_buttonbg_press_o;
 267 }
 268
 269 .LESSpopup_padding_style{
 270 }
 271
 272 /***************************************************************************
 273                     Tickernoti
 274 ***************************************************************************/
 275 @color_ticker_bg:                       rgb(68, 68, 68);
 276 @color_ticker_text1:                    rgb(255, 255, 255);
 277 @color_ticker_text2:                    rgb(255, 255, 255);
 278 @color_ticker_btn:                      rgb(64, 64, 64);
 279 @color_ticker_btn_border:               rgb(50, 50, 50);
 280
 281
 282 /***************************************************************************
 283                     Smallpopup
 284 ***************************************************************************/
 285 @color_smallpopup_bg:                   rgb(68, 68, 68);
 286 @color_smallpopup_text:                 rgb(255, 255, 255);
 287
 288 /***************************************************************************
 289                     Slider
 290 ***************************************************************************/
 291 @color_slider_handle_text:              rgb(59, 115, 182);
 292 @color_slider_popup_text:               rgb(249, 249, 249);
 293 @color_slider_left_text:                rgb(128, 128, 128);
 294 @color_slider_right_text:               rgb(128, 128, 128);
 295 @color_slider_label_text:               rgb(0, 0, 0);
 296
 297
 298 /***************************************************************************
 299                     Progress
 300 ***************************************************************************/
 301 @color_progress_bar0:                   rgb(202, 200, 196);
 302 @color_progress_bar1:                   rgb(246, 243, 239);
 303 @color_progress_border:                 rgb(163, 160, 158);
 304 @color_progress_value0:                 rgb(54, 119, 195);
 305 @color_progress_value1:                 rgb(150, 184, 224);
 306 @color_progress_shadow:                 rgb(0, 0, 0);
 307
 308
 309 /***************************************************************************
 310                    Handler
 311 ***************************************************************************/
 312 @color_scrollview_handler_bg : rgba(150, 150, 150, 0.5);
 313
 314
 315 /***************************************************************************
 316                    multimediaview
 317 ***************************************************************************/
 318 @color_multimediaview_bg : rgb(249, 249, 249);
 319 @color_multimediaview_control_bg : rgba(248, 246, 239, 0.5);
 320 @color_multimediaview_button_bg : rgb(248, 246, 239);
 321 @color_multimediaview_timestamp_text : rgb(74, 132, 201);
 322 @color_multimediaview_duration_text : rgb(128, 128, 128);
 323 @color_multimediaview_bar_gray : rgb(203, 200, 197);
 324 @color_multimediaview_bar_active : rgb(74, 132, 201);
 325 @color_multimediaview_bar_handle : rgb(249, 249, 249);
 326 @color_multimediaview_button_border : rgb(186, 185, 180);
 327
 328 .LESSmultimediaview_bar_active_style{
 329         background-color : @color_multimediaview_bar_active;
 330         background-image : -webkit-gradient(linear, left top, left bottom, from(rgb(98, 137, 217)), to(rgb(41, 91, 152)));
 331         background-image : -moz-linear-gradient(top, rgb(98, 137, 217), rgb(41, 91, 152));
 332         background-image : -o-linear-gradient(top, rgb(98, 137, 217), rgb(41, 91, 152));
 333         background-image : -ms-linear-gradient(top, rgb(98, 137, 217), rgb(41, 91, 152));
 334 }
 335
 336 .LESSmultimediaview_bar_handle_style{
 337         background-color : @color_multimediaview_bar_handle;
 338         background-image : -webkit-gradient(linear, left top, left bottom, from(rgb(255, 255, 255)), to(rgb(230, 230, 230)));
 339         background-image : -moz-linear-gradient(top, rgb(255, 255, 255), rgb(230, 230, 230));
 340         background-image : -o-linear-gradient(top, rgb(255, 255, 255), rgb(230, 230, 230));
 341         background-image : -ms-linear-gradient(top, rgb(255, 255, 255), rgb(230, 230, 230));
 342 }
 343
 344
 345 /***************************************************************************
 346                    tokentextarea
 347 ***************************************************************************/
 348 @color_tokentextarea_block_text : rgb(255, 255, 255);
 349 @color_tokentextarea_block_bg : rgb(95, 138, 189);
 350 @color_tokentextarea_press_bg : rgb(54, 89, 132);
 351 @color_tokentextarea_input_text : #222222;
 352 @color_tokentextarea_label_text : rgb(102, 102, 102);
 353
 354 /***************************************************************************
 355                    Splitview
 356 ***************************************************************************/
 357 @color_splitview_spliter_bar : rgb(179, 179, 179);
 358 @color_splitview_spliter_bar_active : rgb(87, 135, 194);