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

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