+/******************************************************************************************************/
+/**************** Define ColorCode Here ************* Start ****************************************/
+/******************************************************************************************************/
+
+
+
+/***************** Naviframe **********************************/
+@color_bar_title_text : rgba(59, 115, 182, 1); /* #3b73b6 */ /* title text */
+@color_bar_btn_press : rgba(0, 0, 0, 0.1);
+
+/***************** Body ***************************************/
+@color_bg: rgb(248, 246, 239); // #F8F6EF // Main Background color
+@color_text: rgb(0, 0, 0); // 0 0 0
+@color_text_sub: rgb(102, 102, 102); // 102 102 102
+@color_text_setting: rgb(42, 109, 140); // 42 109 140
+
+/***************** List ***************************************/
+@color_list_bg: rgba(248, 246, 239, 1); /* B0211 : List bg color */
+@color_list_press : rgba(87, 135, 194, 1); /* B041 : List Press color */
+@color_list_border_bottom: rgba(211, 209, 203, 0.5); /* B0221 : 1px line Code */
+@color_list_main_text_focus: rgba(249, 249, 249, 1);
+@color_list_main_text_unfocus: rgba(0, 0, 0, 1);
+@color_list_sub_text_default: rgba(100, 100, 100, 1);
+
+
+@color_list_divider_expand_div : rgba(0, 0, 0, 0.5);
+@color_list_divider_bg : rgba(248, 246, 239, 1); /* W021L1 : Index BG */
+@color_list_divider_text : rgba(59, 115, 182, 1); /* W021L2 : Index bar */
+
+@color_list_dialogue_bg : rgba(239, 237, 229, 1);
+@color_dialogue_main_text: rgba(59, 115, 182, 1);
+@color_dialogue_border_right: rgba(142, 154, 163, 1);
+
+@color_list_expandable_expanded_bg: rgb(215, 225, 232);
+@color_list_expanded_bg : rgba(220, 218, 211, 1);
+
+@color_list_bubble_sent_text: rgb(0, 0, 0);
+@color_list_bubble_receive_text: rgb(255, 255, 255);
+@color_list_bubble_sos_text: rgb(233, 73, 73);
+@color_list_bubble_date_text: rgb(104, 104, 104);
+@color_list_bubble_date_bg: rgba(225, 225, 225, 0);
+@color_list_bubble_time_sent_text: rgb(57, 166, 215);
+@color_list_bubble_time_receive_text: rgb(211, 0, 0);
+@color_list_bubble_time_sos_text: rgb(211, 0, 0);
+@color_list_bubble_name_text: rgb(139, 139, 139);
+@color_list_bubble_help_text: rgb(154, 154, 154);
+@color_list_bubble_link_text: rgb(34, 129, 157);
+
+
+/***************** SearchBar(forms.textinput) *****************/
+@color_searchbar_bg : rgba(248, 246, 239, 1);
+@color_searchbar_default_text : rgba(121, 131, 138, 1); /* Search default text */
+@color_searchbar_input_field_bg : rgba(255, 255, 255, 1); /* W301 : 00_search_edit_field_bg.png */
+
+/***************** Popup **************************************/
+@font_size_popup_info_style: 24 * @unit_base;
+@color_popup_text_bg: rgba(248, 246, 239, 1); /* B061L1 */
+
+
+/***************** Button *************************************/
+
+@color_button_EditText: rgb(61, 61, 61);
+@color_button_EditTextPress: rgb(61, 61, 61);
+
+@color_button_text_normal: rgb(54, 49, 51);
+@color_button_text_press: rgb(248, 246, 239);
+
+@color_button_normal: rgb(235, 232, 227);
+@color_button_normal_webkit: -webkit-linear-gradient(top, rgb(235, 232, 227), rgb(234, 231, 226));
+@color_button_normal_moz: -moz-linear-gradient(top, rgb(235, 232, 227), rgb(234, 231, 226));
+@color_button_normal_o: -o-linear-gradient(top, rgb(235, 232, 227), rgb(234, 231, 226));
+@color_button_normal_ms: -ms-linear-gradient(top, rgb(235, 232, 227), rgb(234, 231, 226));
+@color_button_press: rgb(59, 115, 182);
+
+@color_button_inner: rgb(247, 245, 238);
+@color_button_inner_webkit: -webkit-linear-gradient(top, rgb(250, 247, 242), rgb(248, 245, 240));
+@color_button_inner_moz: -moz-linear-gradient(top, rgb(250, 247, 242), rgb(248, 245, 240));
+@color_button_inner_o: -o-linear-gradient(top, rgb(250, 247, 242), rgb(248, 245, 240));
+@color_button_inner_ms: -ms-linear-gradient(top, rgb(250, 247, 242), rgb(248, 245, 240));
+
+@button_shadow_outer: 0 0 1px 1px rgba(255, 255, 255, 1);
+@button_shadow_inner: inset 0 0 3px rgba(255, 255, 255, 1);
+
+.LESSbutton_box_style{
+ color: @color_button_text_normal;
+}
+
+.LESSbutton_up_style{
+ background: @color_button_normal;
+ background: @color_button_normal_webkit;
+ background: @color_button_normal_moz;
+ background: @color_button_normal_o;
+ background: @color_button_normal_ms;
+}
+
+.LESSbutton_box_style{
+ background: @color_button_normal;
+ background: @color_button_normal_webkit;
+ background: @color_button_normal_moz;
+ background: @color_button_normal_o;
+ background: @color_button_normal_ms;
+ border: 1px solid;
+ border-color: rgba(220, 218, 211, 1);
+ .LESSbox-shadow-line( @button_shadow_outer );
+}
+.LESSbutton_inner_box_style{
+ background: @color_button_inner;
+ background: @color_button_inner_webkit;
+ background: @color_button_inner_ms;
+ background: @color_button_inner_o;
+ background: @color_button_inner_moz;
+ .LESSbox-shadow-line( @button_shadow_inner );
+}
+.LESSbutton_inner_pressstyle{
+ color: @color_button_text_press;
+}
+
+.LESSbutton_text1_style{
+ font-family: @font_family;
+ font-weight: normal;
+ font-size: 1.0rem;
+ font-style:normal;
+ color: @color_button_text_black;
+ &:hover {color: @color_button_text_normal;}
+}
+
+.LESSbutton_hover_style{
+ color: @color_button_text_normal;
+}
+
+.LESSbutton_down_style{
+ background: @color_button_press;
+ color: @color_button_text_press;
+}
+
+/***************** Datetime picker ****************************/
+
+@font_size_datetime_main_text: 22 * @unit_base;
+@font_size_datetime_sub_text: 16 * @unit_base;
+/***************************************************************************
+ contextual popup
+ ***************************************************************************/
+@color_ctxpopup_text: rgb(255, 255, 255);
+@color_ctxpopup_background: rgb(68, 68, 68);
+@color_ctxpopup_border_left: rgb(91, 91, 91);
+@color_ctxpopup_border_right: rgb(45, 45, 45);
+@color_ctxpopup_border_top: rgb(91, 91, 91);
+@color_ctxpopup_border_bottom: rgb(45, 45, 45);
+
+@color_ctxbutton_press: rgb(59, 115, 182);
+
+@color_ctxpopup_timepicker_text: rgba( 249, 249, 249, 0.4 );
+@color_ctxpopup_timepicker_text_focus: rgba( 249, 249, 249, 1 );
+
+/******************************************************************************************************/
+/**************** Define ColorCode Here ************* End ****************************************/
+/******************************************************************************************************/
+
+
+
+
+
+
+
+
+
+/************************** old color code ******************************/
+
// Basic color set
-@color_bg: rgb(249, 249, 249); // 249 249 249
+
@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(218, 218, 218);
+@color_scrollbar: rgb(198, 196, 190);
+
-@color_text: rgb(0, 0, 0); // 0 0 0
@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(92, 151, 187, 1);
+
@color_dialogue_sub_text: rgb(146,146,146);
-@color_list_dialogue_bg : rgba(236, 240, 242, 1);
-@color_dialogue_border_right: rgba(142, 154, 163, 1);
+
//Dialogue Editor color set
@color_dialogue_editor_default_text: rgb(70, 70, 70);
/***************************************************************************
List
***************************************************************************/
-@color_list_main_text_focus: rgba(249, 249, 249, 1);
-@color_list_main_text_unfocus: rgba(0, 0, 0, 1);
-@color_list_border_bottom: rgb(169, 169, 169);
+
@color_list_main_text_read: rgba(158, 158, 158, 1);
@color_list_main_text_unread: 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_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 : rgb(209, 227, 238); /* #d1e3ee */
-@color_list_divider_text : rgb(29, 100, 149);
-@color_list_divider_expand_div : rgba(0, 0, 0, 0.5);
-@color_list_expandable_expanded_bg: rgb(215, 225, 232);
-@color_list_press : rgba(42, 137, 194, 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_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;
-.LESSlistDivider_Background{
- background: @color_list_divider_bg;
-}
/***************************************************************************
Shortcut Scroll
@color_popup_text_progress_title: rgba(249, 249, 249, 1);
/* TODO : ninepatch popup title */
@color_popup_title_bg: rgba(80, 147, 182, 255); /* popup_title_bg.png */
-@color_popup_text_bg: rgba(236, 240, 242, 255); /* popup_bg.png */
-@color_popup_button_bg: rgba(209, 221, 228, 255); /* popup_button_bg.png */
+
+@color_popup_button_bg: rgba(248, 246, 239, 1);
@color_popup_font: white;
@color_popup_text_font: black;
@color_popup_buttonbg_press_ms: -ms-linear-gradient(top, rgb(67, 160, 217), rgb(56, 139, 185));
@color_popup_buttonbg_press_o: -o-linear-gradient(top, rgb(67, 160, 217), rgb(56, 139, 185));
-@color_popup_scroller_bg: rgb(249, 249, 249);
+@color_popup_scroller_bg: rgba(248, 246, 239, 1);
+
-@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_basic_style_title: 24 * @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;
background: @color_popup_buttonbg_webkit;
background: @color_popup_buttonbg_moz;
background: @color_popup_buttonbg_ms;
background: @color_popup_buttonbg_o;
- color: @color_popup_buttontext;
+ color: @color_popup_buttontext;*/
}
.LESSpopup_button_hover_style{
Button
***************************************************************************/
-@color_button_normal: rgb(151, 161, 167);
-@color_button_normal_webkit: -webkit-gradient(linear, left top, left bottom, from(rgb(151, 161, 167)), to(rgb(122, 132, 141)));
-@color_button_normal_moz: -moz-linear-gradient(top, rgb(151, 161, 167), rgb(122, 132, 141));
-
-@color_button_press: rgb(67, 160, 217);
@color_button_press_webkit: -webkit-gradient(linear, left top, left bottom, from(rgb(67, 160, 217)), to(rgb(56, 139, 185)));
@color_button_press_moz: -moz-linear-gradient(top, rgb(67, 160, 217), rgb(56, 139, 185));
@color_button_hover: rgb(161, 171, 177);
-@color_button_text_normal: rgb(249, 249, 249);
@color_button_text_black: rgb(0, 0, 0);
@color_button_text_white: rgb(249, 249, 249);
@color_button_text_press: rgb(249, 249, 249);
@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;
-}
-
-.LESSbutton_hover_style{
- background: @color_button_hover;
- color: @color_button_text_white;
-}
-
-.LESSbutton_down_style{
- background: @color_button_press;
- background: @color_button_press_webkit;
- background: @color_button_press_moz;
- color: @color_button_text_white;
-}
.LESSbutton_text1_style{
font-family: @font_family;
&:hover {color: @color_button_text_black;}
}
-.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_button_edit;
background: @color_button_edit_webkit;
background: @color_button_edit_moz;
- font-weight:bold;
color: rgb(249, 249, 249);
}
***************************************************************************/
@color_timepicker_selector_color: rgb(42,137,194);
-/***************************************************************************
- Contextual Popup
-***************************************************************************/
-@color_ctxpopup_text: rgb(19, 58, 83);
-@color_ctxpopup_background: rgb(219, 229, 239);
-@color_ctxpopup_border_left: rgb(225, 235, 241);
-@color_ctxpopup_border_right: rgb(174, 184, 190);
-@color_ctxpopup_border_bottom: rgb(153, 176, 195);
-@color_ctxpopup_timepicker_text: rgba( 249, 249, 249, 0.4 );
-@color_ctxpopup_timepicker_text_focus: rgba( 249, 249, 249, 1 );
/***************************************************************************
DaySelector
@color_optionheader_tab_text: rgba(249, 249, 249, 1); /* #f9f9f9 */
-/***************************************************************************
- SearchBar(forms.textinput)
-***************************************************************************/
-@color_searchbar_bg : rgba(215, 225, 232, 1); /* #242424 */
-@color_searchbar_default_text : rgba(121, 131, 138, 1); /* #828282 */
-@color_searchbar_input_field_bg : rgba(249, 249, 249, 1); /* #F9F9F9*/
/***************************************************************************
@color_segmentcontrol_Seg_text : rgba(249, 249, 249, 1); /* #F9F9F9*/
@color_segmentcontrol_Seg_text_pressed : rgba(249, 249, 249, 1); /* #F9F9F9*/
+
+/* delete */
+/*
.LESSSegmentControlBtnBackground
{
.LESSbackground-with-gradient(top, @color_segmentcontrol_btn_normal_start, @color_segmentcontrol_btn_normal_end);
{
.LESSbackground-with-gradient(top, @color_segmentcontrol_btn_press_start, @color_segmentcontrol_btn_press_end);
}
+*/
/***************************************************************************
ControlGroup
@color_bar_bg_end : rgb(79,116,141);
@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_press : -webkit-linear-gradient(top, rgb(61,120,151) 0%,rgb(48,91,118) 100%);
@color_bar_seg_btn_normal : -webkit-linear-gradient(top, rgb(127,159,181) 0%,rgb(70,108,133) 100%);
-@color_bar_title_text : rgba(249, 249, 249, 1); /* #F9F9F9 */
-
@color_bar_title_bg : rgb(90, 153, 186);
@color_bar_title_bg_start : rgb(90, 153, 186);
@color_bar_title_bg_end : rgb(32, 84, 115);
@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(156,181,179) 0%,rgb(79,116,141) 100%);
-@color_controlbar_toolbbar_bg : -webkit-linear-gradient(top, rgb(156,181,179) 0%,rgb(79,116,141) 100%);
-@color_controlbar_bg : -webkit-linear-gradient(top, rgb(156,181,179) 0%,rgb(79,116,141) 100%);
+@color_controlbar_tabbbar_bg : transparent;
+@color_controlbar_toolbbar_bg : transparent;
+@color_controlbar_bg : transparent;
+
@color_controlbar_btn_text : rgba(249, 249, 249, 1); /* #F9F9F9 */
@color_controlbar_btn_press : -webkit-linear-gradient(top, rgb(61,121,150) 0%,rgb(48,91,118) 100%);
.LESSColorBarTitleBackground
{
- .LESSbackground-with-gradient(top, @color_bar_title_bg_start, @color_bar_title_bg_end);
+ background : rgb(248, 246, 239); // #F8F6EF /* Header Background */
}
/***************************************************************************
Tickernoti
***************************************************************************/
-@color_ticker_bg: rgb(13, 60, 89);
-@color_ticker_text1: rgb(249, 249, 249);
-@color_ticker_text2: rgb(202, 211, 217);
-@color_ticker_btn: rgb(22, 76, 110);
+@color_ticker_bg: rgb(68, 68, 68);
+@color_ticker_text1: rgb(255, 255, 255);
+@color_ticker_text2: rgb(255, 255, 255);
+@color_ticker_btn: rgb(64, 64, 64);
/***************************************************************************
Smallpopup
***************************************************************************/
-@color_smallpopup_bg: rgb(215, 225, 232);
-@color_smallpopup_text: rgb(77, 77, 77);
+@color_smallpopup_bg: rgb(68, 68, 68);
+@color_smallpopup_text: rgb(255, 255, 255);
/***************************************************************************
No Contents
***************************************************************************/
-@color_nocontents_text: rgb(154, 145, 154);
+@color_nocontents_text: rgb(128, 128, 128);
/***************************************************************************
Slider
***************************************************************************/
-@color_slider_handle_text: rgb(42, 137, 194);
+@color_slider_handle_text: rgb(59, 115, 182);
@color_slider_popup_text: rgb(249, 249, 249);
/***************************************************************************
Progress
***************************************************************************/
-@color_progress_bar0: rgb(178, 178, 178);
-@color_progress_bar1: rgb(42, 137, 194);
+@color_progress_bar0: rgb(226, 223, 219);
+@color_progress_bar1: rgb(54, 119, 195);
/***************************************************************************
Layout ( position, padding, margin etc...)
****************************************************************************
***************************************************************************/
-@style-title-font-size : 52 * @unit_base;
+@style-title-font-size : 28 * @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-back-btn-left : 44 * @unit_base;
@style-back-btn-arrow-top : 30 * @unit_base;
-@style-title-min-height : 62 * @unit_base;
+@style-title-min-height : 30 * @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;
+ margin: 20*@unit_base 8*@unit_base 12*@unit_base 8*@unit_base;
}
.LESSextended-controlgroup-border {
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;
-}
projects / platform / framework / web / web-ui-fw.git / blobdiff