src/themes/tizen/tizen-gray/color.less

   1 // Basic color set
   2 @color_bg:                              rgb(0, 0, 0);   // 0 0 0
   3 @color_bg_sub:                  rgb(36, 36, 36);        // 36 36 36     // TODO: used only in dialog group. Check more.
   4
   5 @color_border:                  rgb(42, 42, 42);        // 42 42 42
   6 @color_header:                  rgb(68, 68, 74);        // 68 68 74
   7
   8 @color_text:                            rgb(249, 249, 249);     // 249 249 249
   9 @color_text_dim:                        rgb(108, 115, 118);     // 108 115 118
  10 @color_text_focus:              @color_text;
  11 @color_text_sub:                        rgb(102, 102, 102);     // 102 102 102
  12 @color_text_setting:            rgb(42, 109, 140);      // 42 109 140
  13 @color_text_input:              rgb(70, 70, 70);        // 70 70 70
  14 @color_text_cursor:             @color_text_setting;
  15 @color_text_segctrl:            rgb(158, 195, 213);     // 158 195 213  // TODO: used only in segctrl. Check more.
  16
  17 //Dialogue color set
  18 @color_dialogue_main_text:                              rgb(249,249,249);
  19 @color_dialogue_sub_text:                               rgb(146,146,146);
  20
  21 //Dialogue Editor color set
  22 @color_dialogue_editor_default_text:    rgb(70, 70, 70);
  23 @color_dialogue_editor_bg:                              rgb(0, 0, 0);
  24 @color_dialogue_editor_border:                  rgba(68, 68, 68, 255);
  25
  26 /*************************
  27   Vars/Mixins for Widgets
  28
  29   NOTE:
  30     * Color variables' name: @color_<widget name>_<identifier>
  31         * Color values: Use rgb() or rgba()
  32  *************************/
  33
  34
  35 /***************************************************************************
  36                    List
  37 ***************************************************************************/
  38 @color_list_main_text_read:             rgba(158, 158, 158, 1);
  39 @color_list_main_text_unread:   rgba(249, 249, 249, 1);
  40 @color_list_main_text_focus:            rgba(249, 249, 249, 1);
  41 @color_list_sub_text_default:           rgba(100, 100, 100, 1);
  42 @color_list_sub_text_settings:  rgba(0, 140, 210, 1);
  43 @color_list_sub_text_focus:             rgba(249, 249, 249, 1);
  44 @color_list_flexible_text_main: rgba(249, 249, 249, 1);
  45 @color_list_flexible_text_sub:          rgba(149, 149, 149, 1);
  46 @color_list_index_list:                 rgba(164, 164, 164, 1);
  47 @color_list_editfield_text:                     rgba(70, 70, 70, 1);
  48 @color_list_editfield_text_cursor:      rgba(0, 140, 210, 1);
  49 @color_list_multiline_text:             rgba(149, 149, 149, 1);
  50 @color_list_3line_main_text:            rgba(249, 249, 249, 1);
  51 @color_list_3line_main_text_read:       rgba(249, 249, 249, 1);
  52 @color_list_3line_main_text_focus:      rgba(249, 249, 249, 1);
  53 @color_list_3line_main_text2:           rgba(104, 137, 152, 1);
  54 @color_list_3line_main_text2_focus:     rgba(249, 249, 249, 1);
  55 @color_list_converter_style:            rgba(249, 249, 249, 1);
  56 @color_list_converter_style_focus:      rgba(249, 249, 249, 1);
  57 @color_list_unread_email:               rgba(249, 249, 249, 1);
  58 @color_list_contents_text:              rgba(210, 210, 210, 1);
  59 @color_list_name_text:                  rgba(129, 129, 129, 1);
  60 @color_list_name_text_dim:              rgba(0, 140, 210, 1);
  61 @color_list_colorbar:                           rgba(80, 107, 207, 1); //Temp, not defined
  62 @color_list_bubble_box_shadow:  rgb(77, 58, 23);        // Not defined in GUI guide.
  63 @color_list_bubble_left_text:   rgb(0, 0, 0);
  64 @color_list_bubble_left_bg:             rgb(221, 206, 122);     // Not defined in GUI guide. Picked from image.
  65 @color_list_bubble_right_text:  rgb(96, 96, 96);
  66 @color_list_bubble_right_bg:    rgb(194, 209, 218); // Not defined in GUI guide. Picked from image.
  67 @color_list_bubble_sos_text:    rgb(211, 0, 0);
  68 @color_list_bubble_date_text:   rgb(57, 166, 215);
  69 @color_list_bubble_date_bg:             rgb(66, 66, 66);
  70 @color_list_bubble_time_text:   rgb(57, 166, 215);
  71 @color_list_bubble_link_text:   rgb(34, 129, 157);
  72 @color_list_bubble_failed_text: rgb(211, 0, 0);
  73 @color_list_bubble_name_text:   rgb(57, 166, 215);
  74 @color_list_bubble_help_text:   rgb(146, 146, 146);
  75 @color_list_divider_bg :                rgb(66, 66, 66); /* #424242 */
  76 @color_list_divider_text :              rgb(164, 164, 164); /* #a4a4a4 */
  77
  78 @font_size_list_main_text:              44 * @unit_base; //1.375rem;    /* 44 px */
  79 @font_size_list_sub_text:               32 * @unit_base; //1.0rem;      /* 32 px */
  80 @font_size_list_flexible_text_main:     48 * @unit_base; //1.5rem;      /* 48 px */
  81 @font_size_list_flexible_text_sub:      36 * @unit_base; //1.125rem;    /* 36 px */
  82 @font_size_list_index_list:             32 * @unit_base; //1.0rem;      /* 32 px */
  83 @font_size_list_editfield_text:         44 * @unit_base; //1.375rem;    /* 44 px */
  84 @font_size_list_multiline_text:         32 * @unit_base; //1.0rem;      /* 32 px */
  85 @font_size_list_3line_main_text:        42 * @unit_base; //1.3125rem;   /* 42 px */
  86 @font_size_list_3line_main_text2:       36 * @unit_base; //1.125rem;    /* 36 px */
  87 @font_size_list_converter_style:        40 * @unit_base; //1.3rem;      /* 40 px */
  88 @font_size_list_unread_email:           44 * @unit_base; //1.375rem;    /* 44 px */
  89 @font_size_list_contents_text:          30 * @unit_base; //0.94rem;     /* 30 px */
  90 @font_size_list_name_text:              32 * @unit_base; //1.0rem;      /* 32 px */
  91
  92
  93 /***************************************************************************
  94                    Shortcut Scroll
  95 ***************************************************************************/
  96 @color_shortcutscroll_rollover_bg: rgba(68, 68, 68, 0.5); // 00_fast_scroll_rollover_bg.png
  97 @color_shortcutscroll_rollover_text: rgba(180, 180, 180, 0.6);
  98 @color_shortcutscroll_popup_bg: rgba(115, 137, 147, 1); // 00_fast_scroll_popup_bg.png
  99 @color_shortcutscroll_popup_shadow: rgba(199, 199, 199, 0.5);
 100 @color_shortcutscroll_popup_text: rgb(249, 249, 249);
 101
 102
 103 /***************************************************************************
 104                    Popup
 105 ***************************************************************************/
 106 @color_popup_info_style:                rgba(249, 249, 249, 1);
 107 @color_popup_basic_style_title:         rgba(249, 249, 249, 1);
 108 @color_popup_small_popup_info:          rgba(249, 249, 249, 1);
 109 @color_popup_center_progressbar_title:  rgba(153, 153, 153, 1);
 110 @color_popup_text_progress_title:       rgba(249, 249, 249, 1);
 111 @color_popup_text_background:           rgba(33, 60, 73, 1); /* #213c49 */
 112 @color_popup_button_background:         rgba(86, 93, 96, 1); /* #565d60 */
 113
 114 @font_size_popup_info_style:                    42 * @unit_base; //1.3125rem;   /* 42px */
 115 @font_size_popup_basic_style_title:             38 * @unit_base; //1.1875rem;   /* 38px */
 116 @font_size_popup_small_popup_info:              32 * @unit_base; //1.0rem;      /* 32px */
 117 @font_size_popup_center_progressbar_title:      26 * @unit_base; //0.8125rem;   /* 26px */
 118 @font_size_popup_text_progress_title:           42 * @unit_base; //1.3125rem;   /* 42px */
 119 @font_size_popup_button_text:                   32 * @unit_base; //1.0rem;      /* 32px */
 120
 121
 122 /***************************************************************************
 123                     Button
 124 ***************************************************************************/
 125 @color_button_normal:           rgb(59, 59, 59);
 126 @color_button_press:            rgb(0, 140, 210);
 127 @color_button_hover:            rgb(69, 69, 69);
 128 @color_button_text_normal:      rgb(249, 249, 249);
 129 @color_button_text_press:       rgb(249, 249, 249);
 130
 131 @color_button_EditText:         rgb(207, 41, 41);
 132 @color_button_EditTextPress:    rgb(249, 249, 249);
 133 @color_button_EditBG:           rgb(0, 0, 0);
 134 @color_button_EditBGPress:      rgb(0, 140, 210);
 135 .LESSbutton_text1_style{
 136         font-family: @font_family;
 137         font-weight: normal;
 138         font-size: 1.0rem;
 139         font-style:normal;
 140         color: @color_button_text_normal;
 141         &:hover {color: @color_button_text_press;}
 142 }
 143
 144 /***************************************************************************
 145                     Date Time picker color set
 146 ***************************************************************************/
 147 @color_timepicker_selector_color:       rgb(0,140,210);
 148
 149 /***************************************************************************
 150                   Contextual Popup
 151 ***************************************************************************/
 152 @color_ctxpopup_border_left:    rgb(70, 70, 70);
 153 @color_ctxpopup_border_right:   rgb(0, 0, 0);
 154 @color_ctxpopup_timepicker_text:        rgb( 105, 151, 173 );
 155 @color_ctxpopup_timepicker_text_focus:  rgb( 249, 249, 249 );
 156
 157 /***************************************************************************
 158                     DaySelector
 159 ***************************************************************************/
 160 @color_dayselector_Btn_Sat:             rgba(0, 168, 231, 1); /* #00a8e7 */
 161 @color_dayselector_Btn_Sun:             rgba(240, 20, 2, 1); /* #f01402 */
 162 @color_dayselector_Btn_Mon_to_Fri:      rgba(249, 249, 249, 1); /* #f9f9f9 */
 163 @color_dayselector_Btn_border:          rgba(100, 100, 100, 1); /* #646464 */
 164 @color_dayselector_Btn_normal:          rgba(59, 59, 59, 1); /* #3b3b3b */
 165 @color_dayselector_Btn_press:           rgba(0, 140, 210, 1); /* #008cd2 */
 166
 167
 168 /***************************************************************************
 169                     OptionHeader
 170 ***************************************************************************/
 171 @color_optionheader_Background: rgba(72, 72, 72, 1); /* #484848 */
 172 @color_optionheader_bt:         rgba(32, 32, 32, 1); /* #202020 */
 173 @color_optionheader_bt_press:   rgba(35, 132, 182, 1); /* #2384b6 */
 174 @color_optionheader_tab_text:   rgba(249, 249, 249, 1); /* #f9f9f9 */
 175
 176
 177 /***************************************************************************
 178                     SearchBar(forms.textinput)
 179 ***************************************************************************/
 180 @color_searchbar_bg : rgba(36, 36, 36, 1);   /* #242424 */
 181 @color_searchbar_default_text : rgba(130, 130, 130, 1);       /* #828282 */
 182
 183
 184 /***************************************************************************
 185                     SegmentControl
 186 ***************************************************************************/
 187 @color_segmentcontrol_btn_normal : rgba(230, 230, 230, 1); /* #e6e6e6 */
 188 @color_segmentcontrol_btn_press : rgba(61, 61, 61, 1); /* #3d3d3d; */
 189 @color_segmentcontrol_Seg_text : rgba(144, 144, 144, 1); /* #909090 */
 190 @color_segmentcontrol_Seg_text_pressed : rgba(0, 0, 0, 1); /* #000000 */
 191
 192
 193 /***************************************************************************
 194                     ControlGroup
 195 ***************************************************************************/
 196 @color_controlgroup_btn_border : rgba(37, 37, 37, 1); /* #252525 */
 197
 198
 199 /***************************************************************************
 200                     Header / Footer
 201                     NavigationBar / ControlBar
 202 ***************************************************************************/
 203 @color_bar_bg : rgba(31, 31, 31, 1); /* #1F1F1F */
 204 @color_bar_back_btn_press : rgba(10, 140, 210, 1); /* #0a8cd2 */
 205 @color_bar_btn_press : rgba(10, 140, 210, 1); /* #0a8cd2 */
 206 @color_bar_btn_bg : rgba(31, 31, 31, 1); /* #1F1F1F */
 207
 208 @color_bar_seg_btn_border : rgba(43, 43, 43, 1); /* #2B2B2B */
 209 @color_bar_seg_text_press : rgba(0, 0, 0, 1); /* #000000 */
 210 @color_bar_seg_text_normal : rgba(118, 118, 118, 1); /* #767676 */
 211 @color_bar_seg_btn_press : rgba(249, 249, 249, 1); /* #F9F9F9 */
 212 @color_bar_seg_btn_normal : rgba(67, 67, 67, 1); /* #434343 */
 213
 214 @color_bar_title_text : rgba(249, 249, 249, 1); /* #F9F9F9 */
 215 @color_bar_title_bg : rgba(108, 108, 108, 1); /* #6c6c6c */
 216 @color_bar_title_btn_bg : rgba(132, 132, 132, 1); /* #848484 */
 217 @color_bar_title_btn_border : rgba(76, 76, 76, 1); /* #4C4C4C */
 218
 219 @color_bar_footer_bg : rgba(31, 31, 31, 1); /* #1F1F1F */
 220 @color_bar_footer_btn_bg : rgba(53, 53, 53, 1); /* #353535 */
 221
 222 @color_controlbar_btn_border : rgba(42, 42, 42, 1); /* #2A2A2A */
 223 @color_controlbar_tabbbar_bg : rgba(31, 31, 31, 1); /* #1F1F1F */
 224 @color_controlbar_toolbbar_bg : rgba(31, 31, 31, 1); /* #1F1F1F */
 225 @color_controlbar_bg : rgba(31, 31, 31, 1); /* #1F1F1F */
 226 @color_controlbar_btn_text : rgba(249, 249, 249, 1); /* #F9F9F9 */
 227 @color_controlbar_btn_press : rgba(76, 76, 76, 1); /* #4c4c4c */
 228
 229
 230 /***************************************************************************
 231                     Tickernoti
 232 ***************************************************************************/
 233 @color_ticker_bg:                       rgb(108, 108, 108);
 234 @color_ticker_text1:                    rgb(186, 186, 186);
 235 @color_ticker_text2:                    rgb(244, 244, 244);
 236
 237
 238 /***************************************************************************
 239                     Smallpopup
 240 ***************************************************************************/
 241 @color_smallpopup_bg:                   rgb(52, 74, 85);
 242 @color_smallpopup_text:                 rgb(249, 249, 249);
 243
 244
 245 /***************************************************************************
 246                     No Contents
 247 ***************************************************************************/
 248 @color_nocontents_text:                 rgb(81, 78, 76);
 249
 250
 251 /***************************************************************************
 252                     Slider
 253 ***************************************************************************/
 254 @color_slider_handle_text:              rgb(42, 109, 140);
 255
 256
 257