// Basic color set @color_bg: rgb(0, 0, 0); @color_bg_sub: rgb(36, 36, 36); // 36 36 36 // TODO: used only in dialog group. Check more. @color_border: rgb(42, 42, 42); // 42 42 42 @color_header: rgb(68, 68, 74); // 68 68 74 @color_scrollbar: rgb(63, 63, 63); @color_text: rgb(249, 249, 249); @color_text_dim: rgb(108, 115, 118); // 108 115 118 @color_text_focus: @color_text; @color_text_sub: rgb(102, 102, 102); // 102 102 102 @color_text_setting: rgb(42, 109, 140); // 42 109 140 @color_text_input: rgb(70, 70, 70); // 70 70 70 @color_text_cursor: @color_text_setting; @color_text_segctrl: rgb(158, 195, 213); // 158 195 213 // TODO: used only in segctrl. Check more. //Dialogue color set @color_dialogue_main_text: rgba(249, 249, 249, 1); @color_dialogue_sub_text: rgb(146,146,146); @color_list_dialogue_bg : rgba(0, 0, 0, 1); @color_dialogue_border_right: rgba(68, 68, 68, 1); //Dialogue Editor color set @color_dialogue_editor_default_text: rgb(70, 70, 70); @color_dialogue_editor_bg: rgb(0, 0, 0); @color_dialogue_editor_border: rgb(37, 52, 78); /************************* Vars/Mixins for Widgets NOTE: * Color variables' name: @color__ * Color values: Use rgb() or rgba() *************************/ /*************************************************************************** List ***************************************************************************/ @color_list_border_bottom: rgb(68, 68, 68); @color_list_main_text_read: rgba(158, 158, 158, 1); @color_list_main_text_unread: rgba(249, 249, 249, 1); @color_list_main_text_focus: rgba(249, 249, 249, 1); @color_list_sub_text_default: rgba(100, 100, 100, 1); @color_list_sub_text_settings: rgba(0, 140, 210, 1); @color_list_sub_text_focus: rgba(249, 249, 249, 1); @color_list_flexible_text_main: rgba(249, 249, 249, 1); @color_list_flexible_text_sub: rgba(149, 149, 149, 1); @color_list_index_list: rgba(164, 164, 164, 1); @color_list_editfield_text: rgba(70, 70, 70, 1); @color_list_editfield_text_cursor: rgba(0, 140, 210, 1); @color_list_multiline_text: rgba(149, 149, 149, 1); @color_list_3line_main_text: rgba(249, 249, 249, 1); @color_list_3line_main_text_read: rgba(249, 249, 249, 1); @color_list_3line_main_text_focus: rgba(249, 249, 249, 1); @color_list_3line_main_text2: rgba(104, 137, 152, 1); @color_list_3line_main_text2_focus: rgba(249, 249, 249, 1); @color_list_converter_style: rgba(249, 249, 249, 1); @color_list_converter_style_focus: rgba(249, 249, 249, 1); @color_list_unread_email: rgba(249, 249, 249, 1); @color_list_contents_text: rgba(210, 210, 210, 1); @color_list_name_text: rgba(129, 129, 129, 1); @color_list_name_text_dim: rgba(0, 140, 210, 1); @color_list_colorbar: rgba(80, 107, 207, 1); //Temp, not defined @color_list_bubble_box_shadow: rgb(78, 78, 78); // Not defined in GUI guide. @color_list_bubble_left_text: rgb(0, 0, 0); @color_list_bubble_left_bg: rgb(217, 230, 237); // Not defined in GUI guide. Picked from image. @color_list_bubble_right_text: rgb(96, 96, 96); @color_list_bubble_right_bg: rgb(217, 217, 217); // Not defined in GUI guide. Picked from image. @color_list_bubble_sos_text: rgb(211, 0, 0); @color_list_bubble_date_text: rgb(128, 128, 128); @color_list_bubble_date_bg: rgba(225, 225, 225, 0); @color_list_bubble_time_text: rgb(57, 166, 215); @color_list_bubble_link_text: rgb(34, 129, 157); @color_list_bubble_failed_text: rgb(211, 0, 0); @color_list_bubble_name_text: rgb(57, 166, 215); @color_list_bubble_help_text: rgb(146, 146, 146); @color_list_divider_bg : -webkit-linear-gradient(top, rgb(73,73,73) 0%,rgb(22,22,22) 100%); @color_list_divider_text : rgb(142, 174, 193); /* #005ea0 */ @color_list_divider_expand_div : rgba(0, 0, 0, 0.5); @color_list_expandable_expanded_bg: rgb(26, 26, 26); @color_list_press : rgba(60, 100, 155, 1); @font_size_list_main_text: 44 * @unit_base; //1.375rem; /* 44 px */ @font_size_list_sub_text: 32 * @unit_base; //1.0rem; /* 32 px */ @font_size_list_flexible_text_main: 48 * @unit_base; //1.5rem; /* 48 px */ @font_size_list_flexible_text_sub: 36 * @unit_base; //1.125rem; /* 36 px */ @font_size_list_index_list: 32 * @unit_base; //1.0rem; /* 32 px */ @font_size_list_editfield_text: 44 * @unit_base; //1.375rem; /* 44 px */ @font_size_list_multiline_text: 32 * @unit_base; //1.0rem; /* 32 px */ @font_size_list_3line_main_text: 42 * @unit_base; //1.3125rem; /* 42 px */ @font_size_list_3line_main_text2: 36 * @unit_base; //1.125rem; /* 36 px */ @font_size_list_converter_style: 40 * @unit_base; //1.3rem; /* 40 px */ @font_size_list_unread_email: 44 * @unit_base; //1.375rem; /* 44 px */ @font_size_list_contents_text: 30 * @unit_base; //0.94rem; /* 30 px */ @font_size_list_name_text: 32 * @unit_base; //1.0rem; /* 32 px */ @style_list_li_dialogue_margin_left: 16 * @unit_base; @style_list_li_dialogue_border_left_width: 10 * @unit_base; @style_list_bubble_date_height: 40 * @unit_base; @style_list_bubble_date_text_align: center; /*************************************************************************** Shortcut Scroll ***************************************************************************/ @color_shortcutscroll_rollover_bg: none; @color_shortcutscroll_rollover_text: rgba(160, 172, 179, 1); @color_shortcutscroll_popup_bg: rgba(229, 229, 229, 1); // 00_fast_scroll_popup_bg.png @color_shortcutscroll_popup_shadow: rgba(199, 199, 199, 0.5); @color_shortcutscroll_popup_text: rgb(42, 137, 194); /*************************************************************************** Popup ***************************************************************************/ @color_popup_center_progressbar_title: rgba(153, 153, 153, 1); @color_popup_text_progress_title: rgba(249, 249, 249, 1); /* TODO : ninepatch popup title */ @color_popup_title_bg: rgba(39, 58, 90, 255); /* popup_title_bg.png */ @color_popup_text_bg: rgba(38, 38, 38, 255); /* popup_bg.png */ @color_popup_button_bg: rgba(56, 56, 56, 255); /* popup_button_bg.png */ @color_popup_font: white; @color_popup_text_font: white; @color_popup_buttonbg: rgb(79, 79, 79); @color_popup_buttonbg_webkit: rgb(79, 79, 79); @color_popup_buttonbg_moz: rgb(79, 79, 79); @color_popup_buttontext: rgb(249, 249, 249); @color_popup_buttonbg_over: rgb(79, 79, 79); /* transparents */ @color_popup_buttonbg_press: rgb(42, 137, 194); @color_popup_buttonbg_press_webkit: rgb(42, 137, 194); @color_popup_buttonbg_press_moz: rgb(42, 137, 194); @color_popup_scroller_bg: rgb(0, 0, 0); @font_size_popup_info_style: 42 * @unit_base; //1.3125rem; /* 42px */ @font_size_popup_basic_style_title: 38 * @unit_base; //1.1875rem; /* 38px */ @font_size_popup_center_progressbar_title: 26 * @unit_base; //0.8125rem; /* 26px */ @font_size_popup_text_progress_title: 42 * @unit_base; //1.3125rem; /* 42px */ @font_size_popup_button_text: 32 * @unit_base; //1.0rem; /* 32px */ .LESSpopup_button_style{ background: @color_popup_buttonbg; background: @color_popup_buttonbg_webkit; background: @color_popup_buttonbg_moz; color: @color_popup_buttontext; } .LESSpopup_button_hover_style{ background: @color_popup_buttonbg_over; } .LESSpopup_button_press_style{ background: @color_popup_buttonbg_press; background: @color_popup_buttonbg_press_webkit; background: @color_popup_buttonbg_press_moz; } .LESSpopup_padding_style{ padding: 2 * @unit_base 2 * @unit_base; } /*************************************************************************** Button ***************************************************************************/ @color_button_normal: rgb(53, 53, 57); @color_button_normal_webkit: -webkit-gradient(linear, left top, left bottom, from(rgb(53, 53, 57)), to(rgb(40, 41, 44))); @color_button_normal_moz: -moz-linear-gradient(top, rgb(53, 53, 57), rgb(40, 41, 44)); @color_button_press: rgb(42, 137, 194); @color_button_hover: rgb(161, 171, 177); @color_button_text_normal: rgb(249, 249, 249); @color_button_text_white: rgb(249, 249, 249); @color_button_text_press: rgb(249, 249, 249); @color_circlebutton_hover: rgb(239, 119, 126); @color_circlebutton_hover_webkit: -webkit-gradient(linear, left top, left bottom, from(rgb(198, 78, 85)), to(rgb(166, 43, 45))); @color_circlebutton_hover_moz: -moz-linear-gradient(top, rgb(198, 78, 85), rgb(166,43,45)); @color_circlebutton_press: rgb(42, 137, 194); @color_button_EditText: rgb(249, 249, 249); @color_button_EditTextPress: rgb(249, 249, 249); @color_button_EditBG: rgb(0, 0, 0); @color_button_EditBGPress: rgb(0, 140, 210); @color_button_switch_BGon: rgb(42, 126, 172); @color_button_switch_BGon_webkit: -webkit-gradient(linear, left top, left bottom, from(rgb(33, 116, 167)), to(rgb(75, 165, 219))); @color_button_switch_BGon_moz: -moz-linear-gradient(top, rgb(33, 116, 167), rgb(75, 165, 219)); @color_button_switch_BGoff: rgb(151, 161, 167); @color_button_switch_BGoff_text_color: rgb(203, 203, 203); @color_button_switch_BGoff_webkit: -webkit-gradient(linear, left top, left bottom, from(rgb(114, 114, 114)), to(rgb(141, 141, 141))); @color_button_switch_BGoff_moz: -moz-linear-gradient(top, rgb(114, 114, 114), rgb(141, 141, 141)); @color_button_switch_BGreed: rgb(253, 253, 253); @color_button_switch_BGreed_webkit: -webkit-gradient(linear, left top, left bottom, from(rgb(253, 253, 253)), to(rgb(231, 231, 231))); @color_button_switch_BGreed_moz: -moz-linear-gradient(top, rgb(253, 253, 253), rgb(231, 231, 231)); @radius_button_switch: 4px; @radius_button_switch_reed: 2px; @color_button_edit: rgb(192, 82, 82); @color_button_edit_webkit: -webkit-gradient(linear, left top, left bottom, from(rgb(192, 82, 82)), to(rgb(162, 40, 40))); @color_button_edit_moz: -moz_linear-gradient(top, rgb(192, 88, 88), rgb(162, 40, 40)); @color_button_edit_press: rgb(147, 24, 24); @color_button_edit_press_webkit: -webkit-gradient(linear, left top, left bottom, from(rgb(147, 24,24)), to(rgb(110, 23, 23))); @color_button_edit_press_moz: -moz-linear-gradient(top, rgb(147, 24, 24), rgb(110, 23, 23)); .LESSbutton_up_style{ background: @color_button_normal; background: @color_button_normal_webkit; background: @color_button_normal_moz; color: @color_button_text_normal; } .LESSbutton_hover_style{ background: @color_button_hover; color: @color_button_text_white; } .LESSbutton_down_style{ background: @color_button_press; color: @color_button_text_white; } .LESSbutton_text1_style{ font-family: @font_family; font-weight: normal; font-size: 1.0rem; font-style:normal; color: @color_button_text_normal; &:hover {color: @color_button_text_press;} } .LESSbutton_box_style{ color: @color_button_text_white; &:hover {color: @color_button_text_white;} } .LESScirclebutton_hover_style{ border-width: 0px; background: @color_circlebutton_hover; background: @color_circlebutton_hover_webkit; backgronnd: @color_circlebutton_hover_moz; } .LESScirclebutton_press_style{ border-width: 0px; background: @color_circlebutton_press; } .LESStoggleswitch_on_style{ background: @color_button_switch_BGon; background: @color_button_switch_BGon_webkit; background: @color_button_switch_BGon_moz; border-radius: @radius_button_switch; -webkit-border-radius: @radius_button_switch; -moz-border-radius: @radius_button_switch; } .LESStoggleswitch_off_style{ color: @color_button_switch_BGoff_text_color; background: @color_button_switch_BGoff; background: @color_button_switch_BGoff_webkit; background: @color_button_switch_BGoff_moz; border-radius: @radius_button_switch; -webkit-border-radius: @radius_button_switch; -moz-border-radius: @radius_button_switch; } .LESStoggleswitch_reed_style{ background: @color_button_switch_BGreed; background: @color_button_switch_BGreed_webkit; background: @color_button_switch_BGreed_moz; border-radius: @radius_button_switch_reed; -webkit-border-radius: @radius_button_switch_reed; -moz-border-radius: @radius_button_switch_reed; } .LESSbutton_edit_style{ background: @color_button_edit; background: @color_button_edit_webkit; background: @color_button_edit_moz; font-weight:bold; color: rgb(249, 249, 249); } .LESSbutton_editpress_style{ background: @color_button_edit_press; background: @color_button_edit_press_webkit; background: @color_button_edit_press_moz; } .LESSbutton_edit_padding{ padding: 0.5em 0.8em; } /*************************************************************************** Date Time picker color set ***************************************************************************/ @color_timepicker_selector_color: rgb(42,137,194); /*************************************************************************** Contextual Popup ***************************************************************************/ @color_ctxpopup_text: rgb(249, 249, 249); @color_ctxpopup_background: rgb(52, 52, 52); @color_ctxpopup_border_left: rgb(39, 39, 39); @color_ctxpopup_border_right: rgb(82, 82, 82); @color_ctxpopup_border_bottom: rgb(89, 89, 89); @color_ctxpopup_timepicker_text: rgba( 249, 249, 249, 0.7 ); @color_ctxpopup_timepicker_text_focus: rgba( 249, 249, 249, 1 ); /*************************************************************************** DaySelector ***************************************************************************/ @color_dayselector_Btn_Sat: rgba(0, 168, 231, 1); /* #00a8e7 */ @color_dayselector_Btn_Sun: rgba(240, 20, 2, 1); /* #f01402 */ @color_dayselector_Btn_Mon_to_Fri: rgba(249, 249, 249, 1); /* #f9f9f9 */ @color_dayselector_Btn_border: rgba(0, 0, 0, 0.1); /* #000000 */ @color_dayselector_Btn_normal: -webkit-linear-gradient(top, rgb(48,65,95) 0%,rgb(30,43,62) 100%); @color_dayselector_Btn_press: -webkit-linear-gradient(top, rgb(71,98,141) 0%,rgb(52,75,112) 100%); /*************************************************************************** OptionHeader ***************************************************************************/ @color_optionheader_Background: rgba(55, 76, 111, 1); @color_optionheader_bt: -webkit-linear-gradient(top, rgb(85,113,160) 0%,rgb(68,95,139) 100%); @color_optionheader_bt_press: -webkit-linear-gradient(top, rgb(42,137,193) 0%,rgb(27,106,153) 100%); @color_optionheader_tab_text: rgba(249, 249, 249, 1); /* #f9f9f9 */ /*************************************************************************** SearchBar(forms.textinput) ***************************************************************************/ @color_searchbar_bg : rgba(47, 53, 64, 1); @color_searchbar_default_text : rgba(68, 93, 111, 1); @color_searchbar_input_field_bg : rgba(0, 0, 0, 1); /*************************************************************************** SegmentControl ***************************************************************************/ @color_segmentcontrol_btn_normal : -webkit-linear-gradient(top, rgb(48,65,95) 0%,rgb(30,43,62) 100%); @color_segmentcontrol_btn_press : -webkit-linear-gradient(top, rgb(71,98,141) 0%,rgb(52,75,112) 100%); @color_segmentcontrol_Seg_text : rgba(249, 249, 249, 1); /* #F9F9F9*/ @color_segmentcontrol_Seg_text_pressed : rgba(249, 249, 249, 1); /* #F9F9F9*/ /*************************************************************************** ControlGroup ***************************************************************************/ @color_controlgroup_btn_border : rgba(0, 0, 0, 0.1); /* #000000 */ /*************************************************************************** Header / Footer NavigationBar / ControlBar ***************************************************************************/ @color_bar_bg : -webkit-linear-gradient(top, rgb(156,181,179) 0%,rgb(79,116,141) 100%); @color_bar_back_btn_press : rgba(26, 82, 116, 0.3); /* #1A5274 */ @color_bar_btn_press : rgba(0, 0, 0, 0.1); @color_bar_btn_bg : transparent; @color_bar_back_btn_bg : transparent; @color_bar_seg_btn_border : rgba(0, 0, 0, 0.1); @color_bar_seg_text_press : rgba(249, 249, 249, 1); @color_bar_seg_text_normal : rgba(249, 249, 249, 1); @color_bar_seg_btn_press : -webkit-linear-gradient(top, rgb(94,120,160) 0%,rgb(61,88,131) 100%); @color_bar_seg_btn_normal : -webkit-linear-gradient(top, rgb(56,80,120) 0%,rgb(39,58,88) 100%); @color_bar_title_text : rgba(249, 249, 249, 1); /* #F9F9F9 */ @color_bar_title_bg : -webkit-linear-gradient(top, rgb(68,88,120) 0%,rgb(24,37,56) 100%); @color_bar_title_btn_border : rgba(0, 0, 0, 0.2); @color_bar_footer_bg : -webkit-linear-gradient(top, rgb(43,54,71) 0%,rgb(17,24,35) 100%); @color_bar_footer_btn_bg : transparent; @color_controlbar_btn_border : rgba(0, 0, 0, 0.1); /* #000000 */ @color_controlbar_tabbbar_bg : -webkit-linear-gradient(top, rgb(43,54,71) 0%,rgb(17,24,35) 100%); @color_controlbar_toolbbar_bg : -webkit-linear-gradient(top, rgb(43,54,71) 0%,rgb(17,24,35) 100%); @color_controlbar_bg : -webkit-linear-gradient(top, rgb(43,54,71) 0%,rgb(17,24,35) 100%); @color_controlbar_btn_text : rgba(249, 249, 249, 1); /* #F9F9F9 */ @color_controlbar_btn_press : -webkit-linear-gradient(top, rgb(60,81,114) 0%,rgb(42,58,85) 100%); @color_border_top : rgba(255, 255, 255, 0.5); @color_border_bottom : rgba(0, 0, 0, 0.5); /*************************************************************************** Tickernoti ***************************************************************************/ @color_ticker_bg: rgb(60, 84, 123); @color_ticker_text1: rgb(249, 249, 249); @color_ticker_text2: rgb(211, 216, 224); @color_ticker_btn: rgb(59, 81, 116); /*************************************************************************** Smallpopup ***************************************************************************/ @color_smallpopup_bg: rgb(76, 81, 88); @color_smallpopup_text: rgb(249, 249, 249); /*************************************************************************** No Contents ***************************************************************************/ @color_nocontents_text: rgb(102, 102, 102); /*************************************************************************** Slider ***************************************************************************/ @color_slider_handle_text: rgb(42, 137, 194); @color_slider_popup_text: rgb(249, 249, 249); /*************************************************************************** Progress ***************************************************************************/ @color_progress_bar0: rgb(178, 178, 178); @color_progress_bar1: rgb(42, 137, 194); /*************************************************************************** Handler ***************************************************************************/ @color_scrollview_handler_bg : rgba(150, 150, 150, 0.5); /*************************************************************************** multimediaview ***************************************************************************/ @color_multimediaview_bg : rgb(0, 0, 0); @color_multimediaview_control_bg : rgba(0, 0, 0, 0.5); @color_multimediaview_button_bg : rgb(36, 36, 36); @color_multimediaview_timestamp_text : rgb(42, 137, 194); @color_multimediaview_duration_text : rgb(128, 128, 128); @color_multimediaview_bar_gray : rgb(178, 178, 178); @color_multimediaview_bar_active : rgb(42, 137, 194); @color_multimediaview_bar_handle : rgb(249, 249, 249); /*************************************************************************** Color widgets ***************************************************************************/ @color_widgets_title_bg: rgb(26, 26, 26); @color_widgets_basic_border: rgb(32, 32, 32); @color_widgets_left_border: rgb(45, 51, 74); .LESScolortitle_background_style{ background-color: @color_widgets_title_bg; border: 1px solid; border-color: @color_widgets_basic_border; border-left: 6px solid; border-left-color: @color_widgets_left_border; } .LESShsvpicker_background_style{ background-color: @color_widgets_title_bg; border: 1px solid; border-color: @color_widgets_basic_border; border-left: 6px solid; border-left-color: @color_widgets_left_border; } .LESSpalette_background_style{ background-color: @color_widgets_title_bg; border: 1px solid; border-top: 6px solid; border-color: @color_widgets_left_border; } /*************************************************************************** multibutton entry ***************************************************************************/ @color_multibuttonentry_bg : rgb(0, 0, 0); @color_multibuttonentry_block_text : rgb(255, 255, 255); @color_multibuttonentry_block_bg : rgb(60, 100, 155); @color_multibuttonentry_block_border : rgb(85, 131, 174); @color_multibuttonentry_press_bg : rgb(41, 137, 194); @color_multibuttonentry_press_border : rgb(93, 187, 244); @color_multibuttonentry_input_text : rgb(255, 255, 255); @color_multibuttonentry_link_bg : rgb(100, 100, 100); @color_multibuttonentry_link : rgb(249, 249, 249); /*************************************************************************** ***************************************************************************/ /*************************************************************************** virtualgrid ***************************************************************************/ @color_virtualgrid_bg : rgb(0, 0, 0); /*************************************************************************** **************************************************************************** Layout ( position, padding, margin etc...) **************************************************************************** ***************************************************************************/ @style-title-font-size : 52 * @unit_base; @style-corner-radius : .3em; @style-title-extended-2btn-width : 688 * @unit_base; @style-title-extended-2btn-radio-width : 343 * @unit_base; @style-title-extended-3btn-width : 688 * @unit_base; @style-title-extended-3btn-radio-width : 229 * @unit_base; @style-title-extended-4btn-width : 688 * @unit_base; @style-title-extended-4btn-radio-width : 171 * @unit_base; @style-back-btn-left : 44 * @unit_base; @style-back-btn-arrow-top : 30 * @unit_base; @style-title-min-height : 62 * @unit_base; @style-title-extended-margin : -30 * @unit_base; /*************************************************************************** Navigation ***************************************************************************/ .LESStitle-diff-style { text-align: left; margin: 19*@unit_base 135*@unit_base 19*@unit_base 16*@unit_base; } .LESSextended-controlgroup-border { border-style : solid; border-width : 1px; border-bottom-width: 2px; border-bottom-color: @color_border_bottom; border-top-color: @color_border_top; border-left-color: @color_bar_seg_btn_border; border-right-color: @color_bar_seg_btn_border; } .LESSback-btn-background { background : none; } .LESSbtn-back { width : 144 * @unit_base; height : 114 * @unit_base; top : 0 * @unit_base; right : 0 * @unit_base; } .LESSbtn-back-inner { width : 144 * @unit_base; height : 114 * @unit_base; } .LESSbtn-arrow-position { left : 20 * @unit_base; top : 30 * @unit_base; } .LESSdialogue-border-style { border-right-style : solid; border-right-color : @color_dialogue_border_right; border-right-width : 1px; } .LESSdialogue-divider { padding-top : 36 * @unit_base; padding-bottom : 10 * @unit_base; padding-left : 10 * @unit_base; margin-left : 16 * @unit_base; margin-right : 16 * @unit_base; background : @color_list_dialogue_bg; font-size : 32 * @unit_base; font-weight : bold; color : @color_dialogue_main_text; }