@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
\r
.ui-multimediaview-fullscreen {\r
position : absolute !important;\r
- z-index : @z_base_header_footer + 100 !important;\r
+ 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
-}\r
-\r
-.ui-multimediaview-control span.ui-stop-icon {\r
- background-image : url(./images/stop.png);\r
-}\r
-\r
-.ui-multimediaview-control span.ui-ff-icon {\r
- background : url(./images/controlbar/01_controlbar_icon_FF.png);\r
-}\r
-\r
-.ui-multimediaview-control span.ui-rew-icon {\r
- background-image : url(./images/controlbar/01_controlbar_icon_REW.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
.ui-multimediaview-control {\r
position : absolute;\r
display : block;\r
- z-index : @z_base_header_footer + 101 !important;\r
+ z-index : @z_base_header_footer + 101 !important;\r
padding : 0;\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 : 0;\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 : 0 * @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 : 20 * @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 : 33 * @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
-}
\ No newline at end of file
+ background : -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#E6E6E6));\r
+ background : -moz-linear-gradient(top, #FFFFFF, #E6E6E6);\r
+ 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