Export 0.2.1
[platform/framework/web/web-ui-fw.git] / src / themes / tizen / common / jquery.mobile.tizen.multimediaview.less
index c32518c..6e52a85 100755 (executable)
@@ -1,5 +1,7 @@
 @import "config.less";\r
 \r
+@unit_base_multimediaview : @unit_base * 0.5;\r
+\r
 .ui-multimediaview {\r
        background-color : @color_multimediaview_bg;\r
        overflow : hidden;\r
@@ -17,8 +19,8 @@
        z-index : @z_base_header_footer + 100 !important;\r
 }\r
 \r
-.ui-multimediaview-audio {\r
-       background-color : @color_multimediaview_bg !important;\r
+.ui-multimediaview-video {\r
+       background-color : @color_multimediaview_control_bg !important;\r
 }\r
 \r
 .ui-multimediaview-control span {\r
 }\r
 \r
 .ui-multimediaview-control span.ui-play-icon {\r
-       background-image : url(./images/controlbar/01_controlbar_icon_Play.png);\r
+       background-image : url(./images/00_button_play.png);\r
 }\r
 \r
 .ui-multimediaview-control span.ui-pause-icon {\r
-       background-image : url(./images/controlbar/01_controlbar_icon_pause.png);\r
+       background-image : url(./images/00_button_pause.png);\r
 }\r
 \r
 .ui-multimediaview-control span.ui-volume-icon {\r
-       background-image : url(./images/Volume/00_volume_icon.png);\r
+       background-image : url(./images/00_slider_button_volume_02.png);\r
 }\r
 \r
 .ui-multimediaview-control span.ui-mute-icon {\r
-       background-image : url(./images/Volume/00_volume_icon_Mute.png);\r
+       background-image : url(./images/00_slider_button_volume_01.png);\r
 }\r
 \r
 .ui-multimediaview-control span.ui-fullscreen-on {\r
        margin : 0;\r
        outline : 0;\r
        border : 0;\r
-       background-color : @color_multimediaview_control_bg;\r
-       height : 84 * @unit_base;\r
+       height : 84 * @unit_base_multimediaview;\r
 }\r
 \r
 .ui-multimediaview-control span.ui-button {\r
        background-position : center center;\r
        background-size : 80%;\r
        background-repeat : no-repeat;\r
-       width : 74 * @unit_base;\r
-       height : 74 * @unit_base;\r
-       -webkit-border-radius : 6 * @unit_base;\r
-       -moz-border-radius : 6 * @unit_base;\r
-       border-radius : 6 * @unit_base;\r
+       width : 74 * @unit_base_multimediaview;\r
+       height : 74 * @unit_base_multimediaview;\r
+       .LESSborder-radius-all( 6 * @unit_base_multimediaview);\r
        background-color : @color_multimediaview_button_bg;\r
-       margin : 4 * @unit_base;\r
+       margin : 4 * @unit_base_multimediaview;\r
 }\r
 \r
 .ui-multimediaview-control .ui-playpausebutton {\r
 }\r
 \r
 .ui-multimediaview-control .ui-timestamplabel p {\r
-       margin-top : -6 * @unit_base;\r
-       margin-left : 4 * @unit_base;\r
+       margin-top : -6 * @unit_base_multimediaview;\r
+       margin-left : 4 * @unit_base_multimediaview;\r
        padding : 0;\r
        text-align : center;\r
-       font-size : 22 * @unit_base;\r
-       line-height : 28 * @unit_base;\r
+       font-size : 22 * @unit_base_multimediaview;\r
+       line-height : 28 * @unit_base_multimediaview;\r
        text-align : left;\r
 }\r
 \r
 }\r
 \r
 .ui-multimediaview-control .ui-durationlabel p {\r
-       margin-top : -6 * @unit_base;\r
-       margin-right : 4 * @unit_base;\r
+       margin-top : -6 * @unit_base_multimediaview;\r
+       margin-right : 4 * @unit_base_multimediaview;\r
        padding : 0;\r
        text-align : center;\r
-       font-size : 22 * @unit_base;\r
-       line-height : 28 * @unit_base;\r
+       font-size : 22 * @unit_base_multimediaview;\r
+       line-height : 28 * @unit_base_multimediaview;\r
        text-align : right;\r
 }\r
 \r
 .ui-multimediaview-control .ui-seekbar {\r
-       margin-top : 16 * @unit_base;\r
-       padding-left : 4 * @unit_base;\r
-       padding-right : 4 * @unit_base;\r
-       height : 16 * @unit_base;\r
+       margin-top : 16 * @unit_base_multimediaview;\r
+       padding-left : 4 * @unit_base_multimediaview;\r
+       padding-right : 4 * @unit_base_multimediaview;\r
+       height : 16 * @unit_base_multimediaview;\r
        float : left;\r
 }\r
 \r
        margin : 0;\r
        padding : 0;\r
        width : 100%;\r
-       height : 16 * @unit_base;\r
+       height : 16 * @unit_base_multimediaview;\r
        background-color : @color_multimediaview_bar_gray;\r
-       -webkit-border-radius : 3 * @unit_base;\r
-       -moz-border-radius : 3 * @unit_base;\r
-       border-radius : 3 * @unit_base;\r
+       border-radius : 1.5em;\r
 }\r
 \r
 .ui-multimediaview-control .ui-seekbar .ui-currenttime {\r
        margin : 0;\r
        padding : 0;\r
-       height : 16 * @unit_base;\r
+       height : 16 * @unit_base_multimediaview;\r
        position : absolute;\r
+       background : -webkit-gradient(linear, left top, left bottom, from(#6298D9), to(#295B98));\r
+       background : -moz-linear-gradient(top, #6298D9, #295B98);\r
+       background : -o-linear-gradient(top, #6298D9, #295B98);\r
+       background : -ms-linear-gradient(top, #6298D9, #295B98);\r
        background-color : @color_multimediaview_bar_active;\r
-       -webkit-border-radius : 3 * @unit_base;\r
-       -moz-border-radius : 3 * @unit_base;\r
-       border-radius : 3 * @unit_base;\r
+       border-radius : 1.5em;\r
 }\r
 \r
 .ui-multimediaview-control .ui-volumecontrol {\r
-       width : 220 * @unit_base;\r
+       width : 220 * @unit_base_multimediaview;\r
        height : 100%;\r
        float : left;\r
 }\r
 \r
 .ui-multimediaview-control .ui-volumecontrol .ui-volumebar {\r
        height : 100%;\r
-       padding-top : 35 * @unit_base;\r
-       padding-left : 40 * @unit_base;\r
+       padding-top : 35 * @unit_base_multimediaview;\r
+       padding-left : 40 * @unit_base_multimediaview;\r
        display : block;\r
 }\r
 \r
 .ui-multimediaview-control .ui-volumecontrol .ui-volumebar .ui-guide {\r
-       width : 160 * @unit_base;\r
-       height : 16 * @unit_base;\r
+       width : 160 * @unit_base_multimediaview;\r
+       height : 16 * @unit_base_multimediaview;\r
        position : absolute;\r
-       background-color : white;\r
-       -webkit-border-radius : 3 * @unit_base;\r
-       -moz-border-radius : 3 * @unit_base;\r
-       border-radius : 3 * @unit_base;\r
        background-color : @color_multimediaview_bar_gray;\r
+       border-radius : 1.5em;\r
 }\r
 \r
 .ui-multimediaview-control .ui-volumecontrol .ui-volumebar .ui-value {\r
        margin : 0;\r
        padding : 0;\r
-       height : 16 * @unit_base;\r
+       height : 16 * @unit_base_multimediaview;\r
        position : absolute;\r
-       -webkit-border-radius : 3 * @unit_base;\r
-       -moz-border-radius : 3 * @unit_base;\r
-       border-radius : 3 * @unit_base;\r
+       background : -webkit-gradient(linear, left top, left bottom, from(#6298D9), to(#295B98));\r
+       background : -moz-linear-gradient(top, #6298D9, #295B98);\r
+       background : -o-linear-gradient(top, #6298D9, #295B98);\r
+       background : -ms-linear-gradient(top, #6298D9, #295B98);\r
        background-color : @color_multimediaview_bar_active;\r
+       border-radius : 1.5em;\r
 }\r
 \r
 .ui-multimediaview-control .ui-volumecontrol .ui-volumebar .ui-handler {\r
        margin : 0;\r
        padding : 0;\r
-       width : 30 * @unit_base;\r
-       height : 30 * @unit_base;\r
+       width : 30 * @unit_base_multimediaview;\r
+       height : 30 * @unit_base_multimediaview;\r
        position : absolute;\r
-       -webkit-border-radius : 5 * @unit_base;\r
-       -moz-border-radius : 5 * @unit_base;\r
-       border-radius : 5 * @unit_base;\r
        background-color : @color_multimediaview_bar_handle;\r
        background : -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#E6E6E6));\r
        background : -moz-linear-gradient(top, #FFFFFF, #E6E6E6);\r
-       border : solid 1px rgb(213, 213, 213);\r
-}
\ No newline at end of file
+       background : -o-linear-gradient(top, #FFFFFF, #E6E6E6);\r
+       background : -ms-linear-gradient(top, #FFFFFF, #E6E6E6);\r
+       border : solid 1px @color_multimediaview_button_border;\r
+       border-radius : 1.5em;\r
+}\r