BlackGUI: 3rd draft
authorheeju.joo <heeju.joo@samsung.com>
Tue, 9 Apr 2013 09:33:07 +0000 (18:33 +0900)
committerYoumin Ha <youmin.ha@samsung.com>
Wed, 10 Apr 2013 14:59:02 +0000 (23:59 +0900)
Change-Id: I82fe5539fe760d1b4fe6857fcff16a2afa9428f8

Conflicts:

src/themes/tizen/tizen-black/style.less

demos/tizen-winsets/widgets/handler.html
demos/tizen-winsets/widgets/list/virtuallist.html
demos/tizen-winsets/widgets/naviframe/headerandfooter.html
demos/tizen-winsets/widgets/progress.html
demos/tizen-winsets/widgets/tabbar/tabbar.html
src/themes/tizen/common/jquery.mobile.tizen.scrollview.less
src/themes/tizen/common/jquery.mobile.tizen.slider.less
src/themes/tizen/common/jquery.mobile.tizen.tabbar.less
src/themes/tizen/common/jquery.mobile.tizen.toggleswitch.less
src/themes/tizen/tizen-black/style.less
src/themes/tizen/tizen-white/style.less

index 679cce1..651347b 100644 (file)
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <div data-role="page" data-add-back-btn="true">
        <div data-role="header" data-position="fixed">
-               <h1>hANDLER</h1>
+               <h1>HANDLER</h1>
        </div><!-- /header -->
        <div data-role="content" data-scroll="y" data-handler="true">
                <ul data-role="listview">
index 12aaf55..a173d7f 100644 (file)
@@ -4,7 +4,7 @@
        <body>\r
        <div data-role="page" id="list" data-add-back-btn="true">\r
                        <div data-role="header" data-position="fixed">\r
-                               <h1>Virtual list</h1>\r
+                               <h1>VIRTUAL LIST</h1>\r
                        </div>\r
                        <div data-role="content">\r
                                <ul data-role="listview">\r
index 016c718..ff4836e 100644 (file)
@@ -20,7 +20,7 @@
 
        <div data-role="page" id="NavigationbarMain" data-add-back-btn="true">
                <div data-role="header" data-position="fixed">
-                       <h1>Header and footer</h1>
+                       <h1>HEADER AND FOOTER</h1>
                </div>
                <div data-role="content">
                        <div class="content-primary">
index b2b993e..5957e2a 100644 (file)
@@ -26,7 +26,7 @@
                                });
                        </script>
                        <div data-role="header" data-position="fixed">
-                               <h1>Progress</h1>
+                               <h1>PROGRESS</h1>
                        </div>
                        <div data-role="content">
                                <div style="width:100px;height:100px">
index 3b5c5fc..a2cf749 100644 (file)
@@ -20,7 +20,7 @@
 
        <div data-role="page" data-add-back-btn="true">
                <div data-role="header" data-position="fixed">
-                       <h1>tABBAR</h1>
+                       <h1>TABBAR</h1>
                </div>
                <div data-role="content">
                        <div class="content-primary">
index adf14ee..8b90007 100644 (file)
@@ -90,8 +90,8 @@
        background: -webkit-gradient(linear,
                                left bottom,
                                left top,
-                               color-stop(0, rgb(255,255,255)),
-                               color-stop(1, rgb(128,128,128)));
+                               color-stop(0, @color_scrollview_indicator_start),
+                               color-stop(1, @color_scrollview_indicator_end));
 }
 
 .ui-overflow-indicator-bottom {
        background: -webkit-gradient(linear,
                                left bottom,
                                left top,
-                               color-stop(0, rgb(128,128,128)),
-                               color-stop(1, rgb(255,255,255)));
+                               color-stop(0, @color_scrollview_indicator_end),
+                               color-stop(1, @color_scrollview_indicator_start));
 }
 
 /*
index 81addc7..f45227b 100644 (file)
@@ -87,7 +87,7 @@ select.ui-slider-switch {
        height: 37 * @unit_base;
 
        text-align: center;
-       color: rgb(100, 100, 100);
+       color: @color_slider_left_text;
 }
 
 .ui-slider-right-text {
@@ -97,7 +97,7 @@ select.ui-slider-switch {
        height: 37 * @unit_base;
 
        text-align: center;
-       color: rgb(100, 100, 100);
+       color: @color_slider_right_text;
 }
 
 div.ui-slider:not(.ui-toggle-switch) {
@@ -112,7 +112,7 @@ div.ui-slider:not(.ui-toggle-switch) {
        border: 1px;
        border-style: solid;
        border-color: @color_progress_border;
-       .LESSbox-shadow(1px, -1px, 1px, @color_progress_border);
+       .LESSbox-shadow(1px, 1px, 0px, @color_progress_shadow);
        background-color: @color_progress_bar0;
 
        .ui-btn {
index cb4b9ad..69119f0 100644 (file)
@@ -22,7 +22,7 @@
                .ui-btn-inner {
                        padding-top : 0px;
                        padding-bottom : 0px;
-                       border-left : 1px solid;
+                       border-left : 2px solid;
                        border-color : @color_bar_divider_line;
                        border-radius : 0px;
                        -0-border-radius : 0px;
index c6f5ceb..346c08a 100644 (file)
@@ -55,6 +55,8 @@ div.ui-slider.ui-slider-switch:not(.ui-toggle-switch) {
        a.ui-slider-handle {
                position : absolute;
                background : rgba(255, 255, 255, 1);
+               background-image : -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 50, from(rgb(249, 249, 249)), to(rgb(50, 50, 50)));
+               -webkit-box-shadow : 0 1px 2px rgba(0, 0, 0, .2);
                top : 50%;
                margin : 1px 0 0 -15 * @unit_base;
                border-radius : 15 * @unit_base;
@@ -87,7 +89,7 @@ div.ui-slider.ui-slider-switch:not(.ui-toggle-switch) {
                }
                &.ui-slider-label-b {
                        right : 0px;
-                       color : black;
+                       color : @color_slider_label_text;
                        z-index : 0;
                        text-indent : 1.5em;
                }
index fc58e30..fdb3097 100644 (file)
@@ -1,5 +1,5 @@
 /***************************************************************************
-                   Body
+                  Body
 ***************************************************************************/
 @color_bg: rgb(32, 35, 39);                                    /* B011 : Main Background color */
 @color_text: rgb(249, 249, 249);                               /* B012 : Main font color */
@@ -11,7 +11,7 @@
 @color_bar_title_button_text : rgba(58, 58, 58, 1);    /* B052L4 : Title text button */
 @color_bar_title_button_text_press : rgba(59, 115, 182, 1);    /* B052L5 : Title text button press */
 @color_bar_btn_press : rgba(64, 147, 247, 0.1);                        /* B052L1P : Title text button press bg */
-@color_bar_divider_line : rgba(91, 91, 91, 1);         /* 00_divider_line.9.png */
+@color_bar_divider_line : rgba(59, 62, 64, 1);         /* 00_divider_line.9.png */
 @color_bar_naviframe_bg : rgba(32, 35, 39, 1);
 /***************************************************************************
                    Tabbar
@@ -26,7 +26,7 @@
 @color_list_bg:        rgba(32, 35, 39, 1);                                                            /* B0211 */
 @color_list_press : rgba(87, 135, 194, 1);                                             /* B041 */
 @color_list_border_bottom: rgba(45, 45, 45, 0.5);      /* B0221 */
-@color_list_main_text_focus: rgba(215, 215, 215, 1);
+@color_list_main_text_focus: rgba(255, 255, 255, 1);
 @color_list_main_text_unfocus: rgba(215, 215, 215, 1);
 @color_list_sub_text_default: rgba(128, 128, 128, 1);
 
@@ -36,7 +36,7 @@
 
 @color_list_dialogue_bg : rgba(42, 45, 48, 1);
 @color_dialogue_main_text: rgba(59, 115, 182, 1);
-@color_dialogue_border_right: rgba(142, 154, 163, 1);
+@color_dialogue_border_right: rgba(12, 15, 20, 1);
 
 @color_list_expanded_bg : rgba(220, 218, 211, 1);
 
                         Button(connected with other winset)
 ***************************************************************************/
 
-@color_button_text_black:      rgb(249, 249, 249);
+@color_button_text_black:      rgb(186, 186, 186);
 
 @color_button_EditText:         rgb(249, 249, 249);
 @color_button_EditTextPress:    rgb(61, 61, 61);
 
 @color_button_text_normal:      rgb(58, 58, 58);
-@color_button_text_press:       rgb(248, 246, 239);
+@color_button_text_press:       rgb(255, 255, 255);
 @color_button_text_white:       rgb(249, 249, 249);
 
 @color_button_normal:           rgb(32, 35, 39);
                    Scrollview
 ***************************************************************************/
 @color_scrollbar:              rgb(57, 59, 65);
-
+@color_scrollview_indicator_start:     rgb(186,186,186);
+@color_scrollview_indicator_end:       rgb(32,35,39);
 
 /***************************************************************************
                    Date Time picker
 @color_popup_center_progressbar_title: rgba(153, 153, 153, 1);
 @color_popup_title_bg:         rgba(80, 147, 182, 255);        /* popup_title_bg.png */
 
-@color_popup_button_bg:                rgba(248, 246, 239, 1);
+@color_popup_button_bg:                rgba(42, 45, 48, 1);
 @color_popup_font: rgba(248, 246, 239, 1); /* maybe not use only popupwindow*/
 @color_popup_text_font:                rgba(249, 249, 249, 1);
 
 /***************************************************************************
                     Slider
 ***************************************************************************/
-@color_slider_handle_text:             rgb(59, 115, 182);
+@color_slider_handle_text:             rgb(255, 255, 255);
 @color_slider_popup_text:              rgb(249, 249, 249);
+@color_slider_left_text:               rgb(186, 186, 186);
+@color_slider_right_text:              rgb(186, 186, 186);
+@color_slider_label_text:              rgb(255, 255, 255);
 
 
 /***************************************************************************
 ***************************************************************************/
 @color_progress_bar0:                  rgb(0, 0, 0);
 @color_progress_bar1:                  rgb(29, 31, 34);
-@color_progress_border:                rgb(29, 31, 34);
+@color_progress_border:                        rgb(29, 31, 34);
 @color_progress_value0:                        rgb(54, 119, 195);
 @color_progress_value1:                        rgb(29, 31, 34);
+@color_progress_shadow:                        rgb(255, 255, 255);
 
 
 /***************************************************************************
 @color_tokentextarea_block_bg : rgb(95, 138, 189);
 @color_tokentextarea_press_bg : rgb(54, 89, 132);
 @color_tokentextarea_input_text : #222222;
-@color_tokentextarea_label_text : rgb(102, 102, 102);
+@color_tokentextarea_label_text : rgb(128, 128, 128);
 
 /***************************************************************************
                    Splitview
index 3fdddfe..d042436 100644 (file)
@@ -11,7 +11,7 @@
 @color_bar_title_button_text : rgba(58, 58, 58, 1);    /* B052L4 : Title text button */
 @color_bar_title_button_text_press : rgba(59, 115, 182, 1);    /* B052L5 : Title text button press */
 @color_bar_btn_press : rgba(64, 147, 247, 0.1);                        /* B052L1P : Title text button press bg */
-@color_bar_divider_line : rgba(192, 192, 192, 1);              /* 00_divider_line.9.png */
+@color_bar_divider_line : rgba(178, 177, 174, 1);              /* 00_divider_line.9.png */
 @color_bar_naviframe_bg : rgba(248, 246, 239, 1);
 
 /***************************************************************************
                    Scrollview
 ***************************************************************************/
 @color_scrollbar:              rgb(198, 196, 190);
-
+@color_scrollview_indicator_start:      rgb(255,255,255);
+@color_scrollview_indicator_end:        rgb(128,128,128);
 
 /***************************************************************************
                    Date Time picker
 ***************************************************************************/
 @color_slider_handle_text:             rgb(59, 115, 182);
 @color_slider_popup_text:              rgb(249, 249, 249);
+@color_slider_left_text:               rgb(128, 128, 128);
+@color_slider_right_text:              rgb(128, 128, 128);
+@color_slider_label_text:              rgb(0, 0, 0);
 
 
 /***************************************************************************
 ***************************************************************************/
 @color_progress_bar0:                  rgb(202, 200, 196);
 @color_progress_bar1:                  rgb(246, 243, 239);
-@color_progress_border:                rgb(163, 160, 158);
+@color_progress_border:                        rgb(163, 160, 158);
 @color_progress_value0:                        rgb(54, 119, 195);
 @color_progress_value1:                        rgb(150, 184, 224);
+@color_progress_shadow:                        rgb(0, 0, 0);
 
 
 /***************************************************************************