<div class="content" data-role="content">
<ul data-role="listview">
<ul data-role="swipelist">
- <li class="ui-li-1line-leftsub1 ui-li-dialogue">
+ <li class="ui-li-multiline ui-li-dialogue">
<div data-role="button" data-inline="true">Twitter</div>
<div data-role="button" data-inline="true">Twitter</div>
<div data-role="button" data-inline="true">Facebook</div>
<div data-role="button" data-inline="true">Facebook</div>
<div data-role="swipelist-item-cover">
- <div style="display: inline-block;" class="ui-li-text-sub-left">subtext</div>
- <div style="display: inline-block;" class="ui-li-text-main-right">1line-leftsub1</div>
+ 1line-leftsub1
+ <div class="ui-li-text-sub">subtext</div>
</div>
</li>
- <li class="ui-li-1line ui-li-dialogue">
+ <li class="ui-li-dialogue">
<div data-role="button" data-inline="true">Twitter</div>
<div data-role="button" data-inline="true">Twitter</div>
<div data-role="button" data-inline="true">Facebook</div>
<div data-role="button" data-inline="true">Facebook</div>
- <div data-role="swipelist-item-cover">1line
-<!-- <div class="ui-li-text-main">1line</div>-->
+ <div data-role="swipelist-item-cover">
+ 1line
</div>
</li>
- <li class="ui-li-1line-leftsub1 ui-li-dialogue">
+ <li class="ui-li-multiline ui-li-dialogue">
<div data-role="button" data-inline="true">Twitter</div>
<div data-role="button" data-inline="true">Twitter</div>
<div data-role="button" data-inline="true">Facebook</div>
<div data-role="button" data-inline="true">Facebook</div>
<div data-role="swipelist-item-cover">
- <div style="display: inline-block;" class="ui-li-text-sub-left">subtext</div>
- <div style="display: inline-block;" class="ui-li-text-main-right">1line-leftsub1</div>
+ 1line-leftsub1
+ <div class="ui-li-text-sub">subtext</div>
</div>
</li>
- <li class="ui-li-1line ui-li-dialogue">
+ <li class="ui-li-dialogue">
<div data-role="button" data-inline="true">Twitter</div>
<div data-role="button" data-inline="true">Twitter</div>
<div data-role="button" data-inline="true">Facebook</div>
<div data-role="button" data-inline="true">Facebook</div>
<div data-role="swipelist-item-cover">
- <div class="ui-li-text-main">1line</div>
+ 1line
</div>
</li>
- <li class="ui-li-1line-leftsub1 ui-li-dialogue">
+ <li class="ui-li-multiline ui-li-dialogue">
<div data-role="button" data-inline="true">Twitter</div>
<div data-role="button" data-inline="true">Twitter</div>
<div data-role="button" data-inline="true">Facebook</div>
<div data-role="button" data-inline="true">Facebook</div>
<div data-role="swipelist-item-cover">
- <div style="display: inline-block;" class="ui-li-text-sub-left">subtext</div>
- <div style="display: inline-block;" class="ui-li-text-main-right">1line-leftsub1</div>
+ 1line-leftsub1
+ <div class="ui-li-text-sub">subtext</div>
</div>
</li>
- <li class="ui-li-1line ui-li-dialogue">
+ <li class="ui-li-dialogue">
<div data-role="button" data-inline="true">Twitter</div>
<div data-role="button" data-inline="true">Twitter</div>
<div data-role="button" data-inline="true">Facebook</div>
<div data-role="button" data-inline="true">Facebook</div>
<div data-role="swipelist-item-cover">
- <div class="ui-li-text-main">1line</div>
+ 1line
</div>
</li>
- <li class="ui-li-1line-leftsub1 ui-li-dialogue">
+ <li class="ui-li-multiline ui-li-dialogue">
<div data-role="button" data-inline="true">Twitter</div>
<div data-role="button" data-inline="true">Twitter</div>
<div data-role="button" data-inline="true">Facebook</div>
<div data-role="button" data-inline="true">Facebook</div>
<div data-role="swipelist-item-cover">
- <div style="display: inline-block;" class="ui-li-text-sub-left">subtext</div>
- <div style="display: inline-block;" class="ui-li-text-main-right">1line-leftsub1</div>
+ 1line-leftsub1
+ <div class="ui-li-text-sub">subtext</div>
</div>
</li>
- <li class="ui-li-1line ui-li-dialogue">
+ <li class="ui-li-dialogue">
<div data-role="button" data-inline="true">Twitter</div>
<div data-role="button" data-inline="true">Twitter</div>
<div data-role="button" data-inline="true">Facebook</div>
<div data-role="button" data-inline="true">Facebook</div>
<div data-role="swipelist-item-cover">
- <div class="ui-li-text-main">1line</div>
+ 1line
</div>
</li>
- <li class="ui-li-1line-leftsub1 ui-li-dialogue">
+ <li class="ui-li-multiline ui-li-dialogue">
<div data-role="button" data-inline="true">Twitter</div>
<div data-role="button" data-inline="true">Twitter</div>
<div data-role="button" data-inline="true">Facebook</div>
<div data-role="button" data-inline="true">Facebook</div>
<div data-role="swipelist-item-cover">
- <div style="display: inline-block;" class="ui-li-text-sub-left">subtext</div>
- <div style="display: inline-block;" class="ui-li-text-main-right">1line-leftsub1</div>
+ 1line-leftsub1
+ <div class="ui-li-text-sub">subtext</div>
</div>
</li>
- <li class="ui-li-1line ui-li-dialogue">
+ <li class="ui-li-dialogue">
<div data-role="button" data-inline="true">Twitter</div>
<div data-role="button" data-inline="true">Twitter</div>
<div data-role="button" data-inline="true">Facebook</div>
<div data-role="button" data-inline="true">Facebook</div>
<div data-role="swipelist-item-cover">
- <div class="ui-li-text-main">1line</div>
+ 1line
</div>
</li>
</ul>
@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 */
/***************************************************************************
Popup
***************************************************************************/
-@color_popup_info_style: rgba(249, 249, 249, 1);
-@color_popup_basic_style_title: rgba(249, 249, 249, 1);
@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(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_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: black;
+@color_popup_text_font: white;
-@color_popup_buttonbg: rgb(84, 126, 153);
-@color_popup_buttonbg_webkit: -webkit-gradient(linear, left top, left bottom, from(rgb(84, 126, 153)), to(rgb(69, 105, 128)));
-@color_popup_buttonbg_moz: -moz-linear-gradient(top, rgb(84, 126, 153), rgb(69, 105, 128));
+@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(94, 136, 163);
-@color_popup_buttonbg_press: rgb(67, 160, 217);
-@color_popup_buttonbg_press_webkit: -webkit-gradient(linear, left top, left bottom, from(rgb(67, 160, 217)), to(rgb(56, 139, 185)));
-@color_popup_buttonbg_press_moz: -moz-linear-gradient(top, rgb(67, 160, 217), rgb(56, 139, 185));
+@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);
@font_size_popup_info_style: 42 * @unit_base; //1.3125rem; /* 42px */
@font_size_popup_basic_style_title: 38 * @unit_base; //1.1875rem; /* 38px */
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_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(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_press: rgb(42, 137, 194);
@color_button_hover: rgb(161, 171, 177);
@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(67, 160, 217);
-@color_circlebutton_press_webkit: -webkit-gradient(linear, left top, left bottom, from(rgb(67, 160, 217)), to(rgb(56, 139, 185)));
-@color_circlebutton_press_moz: -moz-linear-gradient(top, rgb(67, 160, 217), rgb(56, 139, 185));
+@color_circlebutton_press: rgb(42, 137, 194);
@color_button_EditText: rgb(249, 249, 249);
@color_button_EditTextPress: rgb(249, 249, 249);
@radius_button_switch: 4px;
@radius_button_switch_reed: 2px;
-@color_button_edit: rgb(201, 88, 88);
-@color_button_edit_webkit: -webkit-gradient(linear, left top, left bottom, from(rgb(201, 88, 88)), to(rgb(161, 40, 40)));
-@color_button_edit_moz: -moz_linear-gradient(top, rgb(201, 88, 88), rgb(161, 40, 40));
+@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)));
.LESSbutton_down_style{
background: @color_button_press;
- background: @color_button_press_webkit;
- background: @color_button_press_moz;
color: @color_button_text_white;
}
.LESScirclebutton_press_style{
border-width: 0px;
background: @color_circlebutton_press;
- background: @color_circlebutton_press_webkit;
- background: @color_circlebutton_press_moz;
}
.LESStoggleswitch_on_style{
/***************************************************************************
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: rgb( 105, 151, 173 );
-@color_ctxpopup_timepicker_text_focus: rgb( 249, 249, 249 );
+@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(26, 82, 116, 1); /* #f9f9f9 */
-@color_dayselector_Btn_normal: -webkit-linear-gradient(top, rgb(125,157,178) 0%,rgb(84,121,144) 100%);
-@color_dayselector_Btn_press: -webkit-linear-gradient(top, rgb(59,119,150) 0%,rgb(47,91,117) 100%);
+@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(40, 55, 81, 1);
+@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(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_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);
/***************************************************************************
/***************************************************************************
ControlGroup
***************************************************************************/
-@color_controlgroup_btn_border : rgba(26, 82, 116, 1); /* #252525 */
+@color_controlgroup_btn_border : rgba(0, 0, 0, 0.1); /* #000000 */
/***************************************************************************
@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.4);
+@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(37,51,74) 0%,rgb(26,36,52) 100%);
-@color_controlbar_toolbbar_bg : -webkit-linear-gradient(top, rgb(42,52,69) 0%,rgb(17,24,35) 100%);
-@color_controlbar_bg : -webkit-linear-gradient(top, rgb(156,181,179) 0%,rgb(79,116,141) 100%);
+@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_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);
/***************************************************************************
/***************************************************************************
multimediaview
***************************************************************************/
-@color_multimediaview_bg : rgb(249, 249, 249);
-@color_multimediaview_control_bg : rgba(249, 249, 249, 0.5);
-@color_multimediaview_button_bg : rgb(249, 249, 249);
+@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 widgets
***************************************************************************/
-@color_widgets_title_bg: rgb(235, 239, 241);
-@color_widgets_basic_border: rgb(192, 192, 192);
-@color_widgets_left_border: rgb(108, 168, 199);
+@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;
background-color: @color_widgets_title_bg;
border: 1px solid;
border-top: 6px solid;
- border-color: @color_widgets_basic_border;
+ border-color: @color_widgets_left_border;
}
/***************************************************************************
multibutton entry
***************************************************************************/
-@color_multibuttonentry_bg : rgb(249, 249, 249);
+@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 : #222222;
-@color_multibuttonentry_link : rgb(100, 100, 100);
-@color_multibuttonentry_dim : rgb(128, 128, 128);
+@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);
/***************************************************************************
****************************************************************************
@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 */
/***************************************************************************
Popup
***************************************************************************/
-@color_popup_info_style: rgba(249, 249, 249, 1);
-@color_popup_basic_style_title: rgba(249, 249, 249, 1);
@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_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: rgb( 105, 151, 173 );
-@color_ctxpopup_timepicker_text_focus: rgb( 249, 249, 249 );
+@color_ctxpopup_timepicker_text: rgba( 249, 249, 249, 0.4 );
+@color_ctxpopup_timepicker_text_focus: rgba( 249, 249, 249, 1 );
/***************************************************************************
DaySelector
@color_bar_title_text : rgba(249, 249, 249, 1); /* #F9F9F9 */
@color_bar_title_bg : -webkit-linear-gradient(top, rgb(90,153,186) 0%,rgb(32,84,115) 100%);
-@color_bar_title_btn_border : rgba(0, 0, 0, 0.4);
+@color_bar_title_btn_border : rgba(36, 93, 128, 0.4); /* 00_winset_divider_line.png temp value */
@color_bar_footer_bg : -webkit-linear-gradient(top, rgb(156,181,179) 0%,rgb(79,116,141) 100%);
@color_bar_footer_btn_bg : transparent;
@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_multibuttonentry_bg : rgb(249, 249, 249);
@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_block_bg : rgb(93, 160, 196);
+@color_multibuttonentry_block_border : rgb(88, 150, 184);
+@color_multibuttonentry_press_bg : rgb(40, 106, 145);
+@color_multibuttonentry_press_border : rgb(49, 126, 171);
@color_multibuttonentry_input_text : #222222;
-@color_multibuttonentry_link : rgb(100, 100, 100);
-@color_multibuttonentry_dim : rgb(128, 128, 128);
+@color_multibuttonentry_link_bg : rgb(178, 178, 178);
+@color_multibuttonentry_link : rgb(249, 249, 249);
/***************************************************************************
***************************************************************************/
/***************************************************************************
+ virtualgrid
+***************************************************************************/
+@color_virtualgrid_bg : rgb(255, 255, 255);
+
+/***************************************************************************
****************************************************************************
Layout ( position, padding, margin etc...)
****************************************************************************