@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
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-volume-icon {\r
- background-image : url(./images/00_slider_btn_volume02.png);\r
+ background-image : url(./images/controls/00_slider_button_volume_02.png);\r
}\r
\r
.ui-multimediaview-control span.ui-mute-icon {\r
- background-image : url(./images/00_slider_btn_volume01.png);\r
+ background-image : url(./images/controls/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
- .LESSborder-radius-all( 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
- .LESSborder-radius-all(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
- .LESSborder-radius-all(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
- .LESSborder-radius-all(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
- .LESSborder-radius-all(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
- .LESSborder-radius-all(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
background : -o-linear-gradient(top, #FFFFFF, #E6E6E6);\r
background : -ms-linear-gradient(top, #FFFFFF, #E6E6E6);\r
- border : solid 1px rgb(213, 213, 213);\r
+ border : solid 1px @color_multimediaview_button_border;\r
+ border-radius : 1.5em;\r
}\r