1 @import "config.less";
\r
3 @unit_base_multimediaview : @unit_base * 0.5;
\r
6 background-color : @color_multimediaview_bg;
\r
10 .ui-multimediaview-wrap {
\r
17 .ui-multimediaview-fullscreen {
\r
18 position : absolute !important;
\r
19 z-index : @z_base_header_footer + 100 !important;
\r
22 .ui-multimediaview-video {
\r
23 background-color : @color_multimediaview_control_bg !important;
\r
26 .ui-multimediaview-control span {
\r
27 display : inline-block;
\r
30 .ui-multimediaview-control span.ui-play-icon {
\r
31 background-image : url(./images/00_button_play.png);
\r
34 .ui-multimediaview-control span.ui-pause-icon {
\r
35 background-image : url(./images/00_button_pause.png);
\r
38 .ui-multimediaview-control span.ui-volume-icon {
\r
39 background-image : url(./images/00_slider_button_volume_02.png);
\r
42 .ui-multimediaview-control span.ui-mute-icon {
\r
43 background-image : url(./images/00_slider_button_volume_01.png);
\r
46 .ui-multimediaview-control span.ui-fullscreen-on {
\r
47 background-image : url(./images/00_button_fullscreen_on.png);
\r
50 .ui-multimediaview-control span.ui-fullscreen-off {
\r
51 background-image : url(./images/00_button_fullscreen_off.png);
\r
54 .ui-multimediaview-control {
\r
55 position : absolute;
\r
57 z-index : @z_base_header_footer + 101 !important;
\r
62 height : 84 * @unit_base_multimediaview;
\r
65 .ui-multimediaview-control span.ui-button {
\r
66 background-position : center center;
\r
67 background-size : 80%;
\r
68 background-repeat : no-repeat;
\r
69 width : 74 * @unit_base_multimediaview;
\r
70 height : 74 * @unit_base_multimediaview;
\r
71 .LESSborder-radius-all( 6 * @unit_base_multimediaview);
\r
72 background-color : @color_multimediaview_button_bg;
\r
73 margin : 4 * @unit_base_multimediaview;
\r
76 .ui-multimediaview-control .ui-playpausebutton {
\r
77 background-color : transparent !important;
\r
81 .ui-multimediaview-control .ui-timestamplabel {
\r
82 text-align : center;
\r
83 color : @color_multimediaview_timestamp_text;
\r
87 .ui-multimediaview-control .ui-timestamplabel p {
\r
88 margin-top : -6 * @unit_base_multimediaview;
\r
89 margin-left : 4 * @unit_base_multimediaview;
\r
91 text-align : center;
\r
92 font-size : 22 * @unit_base_multimediaview;
\r
93 line-height : 28 * @unit_base_multimediaview;
\r
97 .ui-multimediaview-control .ui-durationlabel {
\r
98 text-align : center;
\r
99 color : @color_multimediaview_duration_text;
\r
103 .ui-multimediaview-control .ui-durationlabel p {
\r
104 margin-top : -6 * @unit_base_multimediaview;
\r
105 margin-right : 4 * @unit_base_multimediaview;
\r
107 text-align : center;
\r
108 font-size : 22 * @unit_base_multimediaview;
\r
109 line-height : 28 * @unit_base_multimediaview;
\r
110 text-align : right;
\r
113 .ui-multimediaview-control .ui-seekbar {
\r
114 margin-top : 16 * @unit_base_multimediaview;
\r
115 padding-left : 4 * @unit_base_multimediaview;
\r
116 padding-right : 4 * @unit_base_multimediaview;
\r
117 height : 16 * @unit_base_multimediaview;
\r
121 .ui-multimediaview-control .ui-seekbar .ui-duration {
\r
125 height : 16 * @unit_base_multimediaview;
\r
126 background-color : @color_multimediaview_bar_gray;
\r
127 border-radius : 1.5em;
\r
130 .ui-multimediaview-control .ui-seekbar .ui-currenttime {
\r
133 height : 16 * @unit_base_multimediaview;
\r
134 position : absolute;
\r
135 background : -webkit-gradient(linear, left top, left bottom, from(#6298D9), to(#295B98));
\r
136 background : -moz-linear-gradient(top, #6298D9, #295B98);
\r
137 background : -o-linear-gradient(top, #6298D9, #295B98);
\r
138 background : -ms-linear-gradient(top, #6298D9, #295B98);
\r
139 background-color : @color_multimediaview_bar_active;
\r
140 border-radius : 1.5em;
\r
143 .ui-multimediaview-control .ui-volumecontrol {
\r
144 width : 220 * @unit_base_multimediaview;
\r
149 .ui-multimediaview-control .ui-volumecontrol .ui-volumebar {
\r
151 padding-top : 35 * @unit_base_multimediaview;
\r
152 padding-left : 40 * @unit_base_multimediaview;
\r
156 .ui-multimediaview-control .ui-volumecontrol .ui-volumebar .ui-guide {
\r
157 width : 160 * @unit_base_multimediaview;
\r
158 height : 16 * @unit_base_multimediaview;
\r
159 position : absolute;
\r
160 background-color : @color_multimediaview_bar_gray;
\r
161 border-radius : 1.5em;
\r
164 .ui-multimediaview-control .ui-volumecontrol .ui-volumebar .ui-value {
\r
167 height : 16 * @unit_base_multimediaview;
\r
168 position : absolute;
\r
169 background : -webkit-gradient(linear, left top, left bottom, from(#6298D9), to(#295B98));
\r
170 background : -moz-linear-gradient(top, #6298D9, #295B98);
\r
171 background : -o-linear-gradient(top, #6298D9, #295B98);
\r
172 background : -ms-linear-gradient(top, #6298D9, #295B98);
\r
173 background-color : @color_multimediaview_bar_active;
\r
174 border-radius : 1.5em;
\r
177 .ui-multimediaview-control .ui-volumecontrol .ui-volumebar .ui-handler {
\r
180 width : 30 * @unit_base_multimediaview;
\r
181 height : 30 * @unit_base_multimediaview;
\r
182 position : absolute;
\r
183 background-color : @color_multimediaview_bar_handle;
\r
184 background : -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#E6E6E6));
\r
185 background : -moz-linear-gradient(top, #FFFFFF, #E6E6E6);
\r
186 background : -o-linear-gradient(top, #FFFFFF, #E6E6E6);
\r
187 background : -ms-linear-gradient(top, #FFFFFF, #E6E6E6);
\r
188 border : solid 1px @color_multimediaview_button_border;
\r
189 border-radius : 1.5em;
\r