PageRenderTime 41ms CodeModel.GetById 13ms app.highlight 25ms RepoModel.GetById 1ms app.codeStats 0ms

/BlogEngine/BlogEngine.NET/Scripts/mediaelement/mediaelementplayer.css

#
CSS | 381 lines | 307 code | 34 blank | 40 comment | 0 complexity | f5fb0388e582aed90f0675b02dadf0b1 MD5 | raw file
  1/*
  2<div class="mep-container">
  3	<div class="mep-mediaelement">
  4	</div>
  5	<div class="mep-poster" />
  6		<img />
  7	</div>
  8	<div class="mep-overlay"><div class="mep-overlay-message"></div>
  9	</div>
 10	<div class="mep-controls">
 11		<div class="mep-playpause-button mep-play"><span></span></div>
 12		<div class="mep-time-rail">
 13			<span class="mep-time-total">
 14				<span class="mep-time-loaded"></span>
 15				<span class="mep-time-current"></span>
 16				<span class="mep-time-handle"></span>
 17			</span>
 18		</div>
 19		<div class="mep-time">
 20			<span class="mep-currenttime"></span>
 21			<span>|</span>
 22			<span class="mep-duration"></span>
 23		</div>
 24		<div class="mep-volume-button mep-mute">
 25			<span></span>
 26			<div class="mep-volume-slider">
 27				<div class="mep-volume-rail"><div class="mep-volume-handle"></div></div>
 28			</div>
 29		</div>
 30		<div class="mep-fullscreen-button"><span></span></div>
 31	</div>
 32	<div class="mep-clear"></div>
 33</div>
 34*/
 35
 36.mep-container {
 37	position: relative;
 38	background: #000;
 39	font-family: Helvetica, Arial;
 40}
 41
 42.me-cannotplay {	
 43}
 44.me-cannotplay a {
 45	color: #fff;
 46	font-weight: bold;
 47}
 48.me-cannotplay span {
 49	padding: 15px;
 50	display: block;
 51}
 52.mep-container-fullscreen { 
 53	position: fixed; 
 54	left: 0; 
 55	top: 0; 
 56	right: 0; 
 57	bottom: 0; 
 58	overflow: hidden; 
 59}
 60.mep-container-fullscreen .mep-mediaelement,
 61.mep-container-fullscreen video { 	
 62	width: 100%; 
 63	height: 100%; 
 64}
 65.mep-mediaelement {
 66	position: absolute;
 67	top: 0;
 68	left: 0;
 69}
 70.mep-poster {
 71	position: absolute;
 72	top: 0;
 73	left: 0;
 74}
 75.mep-overlay {
 76	position: absolute;
 77	top: 0;
 78	left: 0;
 79	cursor: pointer;
 80}
 81.mep-overlay-button {
 82	position: absolute;
 83	top: 50%;
 84	left: 50%;
 85	width: 100px;
 86	height: 100px;
 87	margin: -50px 0 0 -50px;
 88	background: url(bigplay.png) top left no-repeat;
 89}
 90.mep-overlay:hover .mep-overlay-button{
 91	background-position: 0 -100px ;
 92}
 93.mep-captions-layer {
 94	position: absolute;
 95	bottom: 0;
 96	left: 0;
 97	padding: 0 0 38px 0;
 98	text-align:center;
 99	
100	/*font-weight: bold;*/
101	line-height: 22px;	
102	font-size: 12px;
103	color: #fff;
104}
105.mep-captions-layer  a {
106	color: #fff;
107	text-decoration: underline;
108}
109.mep-captions-layer[lang=ar] {
110	font-size: 20px;
111	font-weight: normal;
112} 
113
114.mep-captions-text {	
115	padding: 3px 5px;
116	
117	background: url(background.png);	
118	background: rgba(0, 0, 0, 0.8);
119
120}
121
122.mep-container .mep-controls {
123	position: absolute;
124	background: none;
125	list-style-type: none;
126	margin: 0;
127	padding: 0;
128	bottom: 0;
129	left: 0;
130	background: url(background.png);	
131	background: rgba(0, 0, 0, 0.7);
132	height: 30px;
133	width: 100%;	
134}
135
136.mep-container .mep-controls  div {
137	list-style-type: none;
138	background-image: none;
139	display: inline-block;
140	float: left;
141	margin: 5px 5px 5px 0;
142	padding: 0;
143	width: 20px;
144	height: 20px;	
145	font-size: 11px;
146	line-height: 11px;	
147	/*
148	background: #999;	
149	background: rgba(100, 100, 100, 0.8);
150	*/
151	
152	-webkit-border-radius: 4px;
153	-moz-border-radius: 4px;
154	border-radius: 4px;		
155	
156	font-family: Helvetica, Arial;
157}
158
159.mep-container .mep-controls div:first-child {
160	margin-left: 5px;	
161}
162
163.mep-container .mep-controls .mep-time {
164	color: #fff;
165	display: block;	
166	width: 80px;
167	height: 17px;
168	padding: 3px 0 0 0 ;
169	overflow: hidden;	
170	text-align: center;
171}
172.mep-container .mep-controls .mep-time span {
173	font-size: 11px;
174	color: #fff;	
175	line-height: 1em;
176	display: inline-block;	
177	
178}
179
180.mep-controls .mep-playpause-button, 
181/*.mep-controls .mep-volume-button, */
182.mep-controls .mep-fullscreen-button {
183	
184}
185.mep-controls .mep-playpause-button span, 
186.mep-controls .mep-volume-button span, 
187.mep-controls .mep-fullscreen-button span,
188.mep-controls .mep-captions-button span {
189	cursor: pointer;
190	display: block;
191	font-size: 0px;
192	line-height: 0;
193	text-decoration: none;
194	margin: 2px;
195	height: 16px;
196	width: 16px;
197	background: transparent url(controls.png) 0 0 no-repeat;	
198}
199
200.mep-controls .mep-play span {
201	background-position:0 0;
202
203}
204.mep-controls .mep-pause span {
205	background-position:0 -16px;
206}
207.mep-controls .mep-time-rail {
208	width: 200px;
209}
210.mep-controls .mep-time-rail span {
211	display: block;
212	position: absolute;
213	width: 180px;
214	height: 10px;
215	-webkit-border-radius: 2px;
216	-moz-border-radius: 2px;
217	border-radius: 2px;	
218	cursor: pointer;	
219}
220.mep-controls .mep-time-rail .mep-time-total {
221	margin: 5px;
222	background: #333;
223	background: rgba(50,50,50,50.8);	
224}
225.mep-controls .mep-time-rail .mep-time-loaded {
226	background: #3caac8;
227	background: rgba(60,170,200,0.8);
228}
229.mep-controls .mep-time-rail .mep-time-current {
230	background: #fff;
231	background: rgba(255,255,255,0.8);
232}
233
234.mep-controls .mep-time-rail .mep-time-handle {
235	display: block;
236	position: absolute;
237	margin: 0;
238	width: 10px;
239	background: #fff;
240	-webkit-border-radius: 5px;
241	-moz-border-radius: 5px;
242	border-radius: 5px;	
243	cursor: pointer;	
244	display: none;
245}
246
247
248.mep-controls .mep-fullscreen-button span {
249	background-position:-32px 0;
250}
251
252.mep-controls .mep-unfullscreen span {
253	background-position:-32px -16px;
254}
255
256.mep-controls .mep-volume {
257
258}
259
260.mep-controls .mep-captions-button {
261	position: relative;
262}
263
264.mep-controls .mep-captions-button span {
265	background-position:-48px 0;
266}
267.mep-controls .mep-captions-button .mep-captions-selector {
268	visibility: hidden;
269	position: absolute;
270	bottom: 15px;
271	left: -80px;
272	width: 130px;
273	min-height: 50px;
274	background: url(background.png);
275	background: rgba(0,0,0,0.8);
276	border: solid 1px #fff;
277	padding: 10px;
278	-webkit-border-radius: 0;
279	-moz-border-radius: 0;	
280	border-radius: 0;	
281}
282.mep-controls .mep-captions-button:hover  .mep-captions-selector {
283	visibility: visible;
284}
285
286.mep-controls .mep-captions-button .mep-captions-selector ul {
287	margin: 0;
288	padding: 0;
289	display: block;
290	list-style-type: none !important;
291	overflow: hidden;
292}
293.mep-controls .mep-captions-button .mep-captions-selector ul li{
294	margin: 0 0 6px 0;
295	padding: 0;
296	list-style-type: none !important;
297	display:block;
298	color: #fff;
299	overflow: hidden;
300}
301.mep-controls .mep-captions-button .mep-captions-selector ul li input{
302	clear: both;
303	float: left;
304
305}
306.mep-controls .mep-captions-button .mep-captions-selector ul li label{
307	width: 100px;
308	float: left;
309	padding: 4px 0 0 0;
310	line-height: 15px;	
311}
312
313.mep-controls .mep-captions-button .mep-captions-translations {
314	font-size: 10px;
315	margin: 0 0 5px 0;
316}
317
318.mep-controls .mep-mute span {
319	background-position:-16px -16px;
320}
321
322.mep-controls .mep-unmute span {
323	background-position:-16px 0;
324}
325
326.mep-controls .mep-volume-button {
327	position: relative;
328}
329
330.mep-controls .mep-volume-button .mep-volume-slider {
331	display: none;
332	height: 115px;
333	width: 20px;
334	background: url(background.png);	
335	background: rgba(0, 0, 0, 0.7);
336	-webkit-border-radius: 0;	
337	-moz-border-radius: 0;	
338	border-radius: 0;	
339	top: -115px;	
340	left: 0;
341	z-index: 1;
342	position: absolute;
343	margin: 0;
344}
345.mep-controls .mep-volume-button:hover {
346	-webkit-border-radius: 0 0 4px 4px ;	
347	-moz-border-radius: 0 0 4px 4px ;	
348	border-radius: 0 0 4px 4px ;	
349}
350.mep-controls .mep-volume-button:hover .mep-volume-slider {
351	display: block;
352}
353
354.mep-controls .mep-volume-button .mep-volume-slider .mep-volume-rail {
355	position: absolute;
356	left: 9px;
357	top: 8px;	
358	width: 2px;
359	height: 100px;
360	background: #ddd;	
361	background: rgba(255, 255, 255, 0.8);
362	margin: 0;
363}	
364
365.mep-controls .mep-volume-button .mep-volume-slider .mep-volume-rail .mep-volume-handle {
366	position: absolute;
367	left: -7px;
368	top: -3px;
369	width: 16px;
370	height: 6px;
371	background: #ddd;	
372	background: rgba(255, 255, 255, 0.9);
373	cursor: N-resize;
374	-webkit-border-radius: 1px;	
375	-moz-border-radius: 1px;	
376	border-radius: 1px;	
377	margin: 0;
378}
379.mep-clear {
380	clear: both;
381}