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.
5 @color_border: rgb(42, 42, 42); // 42 42 42
6 @color_header: rgb(68, 68, 74); // 68 68 74
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.
18 @color_dialogue_main_text: rgb(249,249,249);
19 @color_dialogue_sub_text: rgb(146,146,146);
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);
26 /*************************
27 Vars/Mixins for Widgets
30 * Color variables' name: @color_<widget name>_<identifier>
31 * Color values: Use rgb() or rgba()
32 *************************/
35 /***************************************************************************
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 */
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 */
93 /***************************************************************************
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);
103 /***************************************************************************
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 */
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 */
122 /***************************************************************************
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);
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;
140 color: @color_button_text_normal;
141 &:hover {color: @color_button_text_press;}
144 /***************************************************************************
145 Date Time picker color set
146 ***************************************************************************/
147 @color_timepicker_selector_color: rgb(0,140,210);
149 /***************************************************************************
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 );
157 /***************************************************************************
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 */
168 /***************************************************************************
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 */
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 */
184 /***************************************************************************
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 */
193 /***************************************************************************
195 ***************************************************************************/
196 @color_controlgroup_btn_border : rgba(37, 37, 37, 1); /* #252525 */
199 /***************************************************************************
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 */
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 */
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 */
219 @color_bar_footer_bg : rgba(31, 31, 31, 1); /* #1F1F1F */
220 @color_bar_footer_btn_bg : rgba(53, 53, 53, 1); /* #353535 */
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 */
230 /***************************************************************************
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);
238 /***************************************************************************
240 ***************************************************************************/
241 @color_smallpopup_bg: rgb(52, 74, 85);
242 @color_smallpopup_text: rgb(249, 249, 249);
245 /***************************************************************************
247 ***************************************************************************/
248 @color_nocontents_text: rgb(81, 78, 76);
251 /***************************************************************************
253 ***************************************************************************/
254 @color_slider_handle_text: rgb(42, 109, 140);