|
1 /* Accessibility: hide screen reader texts (and prefer "top" for RTL languages). |
|
2 Reference: http://blog.rrwd.nl/2015/04/04/the-screen-reader-text-class-why-and-how/ */ |
|
3 .mejs-offscreen { |
|
4 border: 0; |
|
5 clip: rect( 1px, 1px, 1px, 1px ); |
|
6 -webkit-clip-path: inset( 50% ); |
|
7 clip-path: inset( 50% ); |
|
8 height: 1px; |
|
9 margin: -1px; |
|
10 overflow: hidden; |
|
11 padding: 0; |
|
12 position: absolute; |
|
13 width: 1px; |
|
14 word-wrap: normal; |
|
15 } |
|
16 |
|
17 .mejs-container { |
|
18 background: #000; |
|
19 box-sizing: border-box; |
|
20 font-family: 'Helvetica', Arial, serif; |
|
21 position: relative; |
|
22 text-align: left; |
|
23 text-indent: 0; |
|
24 vertical-align: top; |
|
25 } |
|
26 |
|
27 .mejs-container * { |
|
28 box-sizing: border-box; |
|
29 } |
|
30 |
|
31 /* Hide native play button and control bar from iOS to favor plugin button */ |
|
32 .mejs-container video::-webkit-media-controls, |
|
33 .mejs-container video::-webkit-media-controls-panel, |
|
34 .mejs-container video::-webkit-media-controls-panel-container, |
|
35 .mejs-container video::-webkit-media-controls-start-playback-button { |
|
36 -webkit-appearance: none; |
|
37 display: none !important; |
|
38 } |
|
39 |
|
40 .mejs-fill-container, |
|
41 .mejs-fill-container .mejs-container { |
|
42 height: 100%; |
|
43 width: 100%; |
|
44 } |
|
45 |
|
46 .mejs-fill-container { |
|
47 background: transparent; |
|
48 margin: 0 auto; |
|
49 overflow: hidden; |
|
50 position: relative; |
|
51 } |
|
52 |
|
53 .mejs-container:focus { |
|
54 outline: none; |
|
55 } |
|
56 |
|
57 .mejs-iframe-overlay { |
|
58 height: 100%; |
|
59 position: absolute; |
|
60 width: 100%; |
|
61 } |
|
62 |
|
63 .mejs-embed, |
|
64 .mejs-embed body { |
|
65 background: #000; |
|
66 height: 100%; |
|
67 margin: 0; |
|
68 overflow: hidden; |
|
69 padding: 0; |
|
70 width: 100%; |
|
71 } |
|
72 |
|
73 .mejs-fullscreen { |
|
74 overflow: hidden !important; |
|
75 } |
|
76 |
|
77 .mejs-container-fullscreen { |
|
78 bottom: 0; |
|
79 left: 0; |
|
80 overflow: hidden; |
|
81 position: fixed; |
|
82 right: 0; |
|
83 top: 0; |
|
84 z-index: 1000; |
|
85 } |
|
86 |
|
87 .mejs-container-fullscreen .mejs-mediaelement, |
|
88 .mejs-container-fullscreen video { |
|
89 height: 100% !important; |
|
90 width: 100% !important; |
|
91 } |
|
92 |
|
93 /* Start: LAYERS */ |
|
94 .mejs-background { |
|
95 left: 0; |
|
96 position: absolute; |
|
97 top: 0; |
|
98 } |
|
99 |
|
100 .mejs-mediaelement { |
|
101 height: 100%; |
|
102 left: 0; |
|
103 position: absolute; |
|
104 top: 0; |
|
105 width: 100%; |
|
106 z-index: 0; |
|
107 } |
|
108 |
|
109 .mejs-poster { |
|
110 background-position: 50% 50%; |
|
111 background-repeat: no-repeat; |
|
112 background-size: cover; |
|
113 left: 0; |
|
114 position: absolute; |
|
115 top: 0; |
|
116 z-index: 1; |
|
117 } |
|
118 |
|
119 :root .mejs-poster-img { |
|
120 display: none; |
|
121 } |
|
122 |
|
123 .mejs-poster-img { |
|
124 border: 0; |
|
125 padding: 0; |
|
126 } |
|
127 |
|
128 .mejs-overlay { |
|
129 -webkit-box-align: center; |
|
130 -webkit-align-items: center; |
|
131 -ms-flex-align: center; |
|
132 align-items: center; |
|
133 display: -webkit-box; |
|
134 display: -webkit-flex; |
|
135 display: -ms-flexbox; |
|
136 display: flex; |
|
137 -webkit-box-pack: center; |
|
138 -webkit-justify-content: center; |
|
139 -ms-flex-pack: center; |
|
140 justify-content: center; |
|
141 left: 0; |
|
142 position: absolute; |
|
143 top: 0; |
|
144 } |
|
145 |
|
146 .mejs-layer { |
|
147 z-index: 1; |
|
148 } |
|
149 |
|
150 .mejs-overlay-play { |
|
151 cursor: pointer; |
|
152 } |
|
153 |
|
154 .mejs-overlay-button { |
|
155 background: url('mejs-controls.svg') no-repeat; |
|
156 background-position: 0 -39px; |
|
157 height: 80px; |
|
158 width: 80px; |
|
159 } |
|
160 |
|
161 .mejs-overlay:hover > .mejs-overlay-button { |
|
162 background-position: -80px -39px; |
|
163 } |
|
164 |
|
165 .mejs-overlay-loading { |
|
166 height: 80px; |
|
167 width: 80px; |
|
168 } |
|
169 |
|
170 .mejs-overlay-loading-bg-img { |
|
171 -webkit-animation: mejs-loading-spinner 1s linear infinite; |
|
172 animation: mejs-loading-spinner 1s linear infinite; |
|
173 background: transparent url('mejs-controls.svg') -160px -40px no-repeat; |
|
174 display: block; |
|
175 height: 80px; |
|
176 width: 80px; |
|
177 z-index: 1; |
|
178 } |
|
179 |
|
180 @-webkit-keyframes mejs-loading-spinner { |
|
181 100% { |
|
182 -webkit-transform: rotate(360deg); |
|
183 transform: rotate(360deg); |
|
184 } |
|
185 } |
|
186 |
|
187 @keyframes mejs-loading-spinner { |
|
188 100% { |
|
189 -webkit-transform: rotate(360deg); |
|
190 transform: rotate(360deg); |
|
191 } |
|
192 } |
|
193 |
|
194 /* End: LAYERS */ |
|
195 |
|
196 /* Start: CONTROL BAR */ |
|
197 .mejs-controls { |
|
198 bottom: 0; |
|
199 display: -webkit-box; |
|
200 display: -webkit-flex; |
|
201 display: -ms-flexbox; |
|
202 display: flex; |
|
203 height: 40px; |
|
204 left: 0; |
|
205 list-style-type: none; |
|
206 margin: 0; |
|
207 padding: 0 10px; |
|
208 position: absolute; |
|
209 width: 100%; |
|
210 z-index: 3; |
|
211 } |
|
212 |
|
213 .mejs-controls:not([style*='display: none']) { |
|
214 background: rgba(255, 0, 0, 0.7); |
|
215 background: -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.35)); |
|
216 background: linear-gradient(transparent, rgba(0, 0, 0, 0.35)); |
|
217 } |
|
218 |
|
219 .mejs-button, |
|
220 .mejs-time, |
|
221 .mejs-time-rail { |
|
222 font-size: 10px; |
|
223 height: 40px; |
|
224 line-height: 10px; |
|
225 margin: 0; |
|
226 width: 32px; |
|
227 } |
|
228 |
|
229 .mejs-button > button { |
|
230 background: transparent url('mejs-controls.svg'); |
|
231 border: 0; |
|
232 cursor: pointer; |
|
233 display: block; |
|
234 font-size: 0; |
|
235 height: 20px; |
|
236 line-height: 0; |
|
237 margin: 10px 6px; |
|
238 overflow: hidden; |
|
239 padding: 0; |
|
240 position: absolute; |
|
241 text-decoration: none; |
|
242 width: 20px; |
|
243 } |
|
244 |
|
245 /* :focus for accessibility */ |
|
246 .mejs-button > button:focus { |
|
247 outline: dotted 1px #999; |
|
248 } |
|
249 |
|
250 .mejs-container-keyboard-inactive a, |
|
251 .mejs-container-keyboard-inactive a:focus, |
|
252 .mejs-container-keyboard-inactive button, |
|
253 .mejs-container-keyboard-inactive button:focus, |
|
254 .mejs-container-keyboard-inactive [role=slider], |
|
255 .mejs-container-keyboard-inactive [role=slider]:focus { |
|
256 outline: 0; |
|
257 } |
|
258 |
|
259 /* End: CONTROL BAR */ |
|
260 |
|
261 /* Start: Time (Current / Duration) */ |
|
262 .mejs-time { |
|
263 box-sizing: content-box; |
|
264 color: #fff; |
|
265 font-size: 11px; |
|
266 font-weight: bold; |
|
267 height: 24px; |
|
268 overflow: hidden; |
|
269 padding: 16px 6px 0; |
|
270 text-align: center; |
|
271 width: auto; |
|
272 } |
|
273 |
|
274 /* End: Time (Current / Duration) */ |
|
275 |
|
276 /* Start: Play/Pause/Stop */ |
|
277 .mejs-play > button { |
|
278 background-position: 0 0; |
|
279 } |
|
280 |
|
281 .mejs-pause > button { |
|
282 background-position: -20px 0; |
|
283 } |
|
284 |
|
285 .mejs-replay > button { |
|
286 background-position: -160px 0; |
|
287 } |
|
288 |
|
289 /* End: Play/Pause/Stop */ |
|
290 |
|
291 /* Start: Progress Bar */ |
|
292 .mejs-time-rail { |
|
293 direction: ltr; |
|
294 -webkit-box-flex: 1; |
|
295 -webkit-flex-grow: 1; |
|
296 -ms-flex-positive: 1; |
|
297 flex-grow: 1; |
|
298 height: 40px; |
|
299 margin: 0 10px; |
|
300 padding-top: 10px; |
|
301 position: relative; |
|
302 } |
|
303 |
|
304 .mejs-time-total, |
|
305 .mejs-time-buffering, |
|
306 .mejs-time-loaded, |
|
307 .mejs-time-current, |
|
308 .mejs-time-float, |
|
309 .mejs-time-hovered, |
|
310 .mejs-time-float-current, |
|
311 .mejs-time-float-corner, |
|
312 .mejs-time-marker { |
|
313 border-radius: 2px; |
|
314 cursor: pointer; |
|
315 display: block; |
|
316 height: 10px; |
|
317 position: absolute; |
|
318 } |
|
319 |
|
320 .mejs-time-total { |
|
321 background: rgba(255, 255, 255, 0.3); |
|
322 margin: 5px 0 0; |
|
323 width: 100%; |
|
324 } |
|
325 |
|
326 .mejs-time-buffering { |
|
327 -webkit-animation: buffering-stripes 2s linear infinite; |
|
328 animation: buffering-stripes 2s linear infinite; |
|
329 background: -webkit-linear-gradient(135deg, rgba(255, 255, 255, 0.4) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.4) 75%, transparent 75%, transparent); |
|
330 background: linear-gradient(-45deg, rgba(255, 255, 255, 0.4) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.4) 75%, transparent 75%, transparent); |
|
331 background-size: 15px 15px; |
|
332 width: 100%; |
|
333 } |
|
334 |
|
335 @-webkit-keyframes buffering-stripes { |
|
336 from { |
|
337 background-position: 0 0; |
|
338 } |
|
339 to { |
|
340 background-position: 30px 0; |
|
341 } |
|
342 } |
|
343 |
|
344 @keyframes buffering-stripes { |
|
345 from { |
|
346 background-position: 0 0; |
|
347 } |
|
348 to { |
|
349 background-position: 30px 0; |
|
350 } |
|
351 } |
|
352 |
|
353 .mejs-time-loaded { |
|
354 background: rgba(255, 255, 255, 0.3); |
|
355 } |
|
356 |
|
357 .mejs-time-current, |
|
358 .mejs-time-handle-content { |
|
359 background: rgba(255, 255, 255, 0.9); |
|
360 } |
|
361 |
|
362 .mejs-time-hovered { |
|
363 background: rgba(255, 255, 255, 0.5); |
|
364 z-index: 10; |
|
365 } |
|
366 |
|
367 .mejs-time-hovered.negative { |
|
368 background: rgba(0, 0, 0, 0.2); |
|
369 } |
|
370 |
|
371 .mejs-time-current, |
|
372 .mejs-time-buffering, |
|
373 .mejs-time-loaded, |
|
374 .mejs-time-hovered { |
|
375 left: 0; |
|
376 -webkit-transform: scaleX(0); |
|
377 -ms-transform: scaleX(0); |
|
378 transform: scaleX(0); |
|
379 -webkit-transform-origin: 0 0; |
|
380 -ms-transform-origin: 0 0; |
|
381 transform-origin: 0 0; |
|
382 -webkit-transition: 0.15s ease-in all; |
|
383 transition: 0.15s ease-in all; |
|
384 width: 100%; |
|
385 } |
|
386 |
|
387 .mejs-time-buffering { |
|
388 -webkit-transform: scaleX(1); |
|
389 -ms-transform: scaleX(1); |
|
390 transform: scaleX(1); |
|
391 } |
|
392 |
|
393 .mejs-time-hovered { |
|
394 -webkit-transition: height 0.1s cubic-bezier(0.44, 0, 1, 1); |
|
395 transition: height 0.1s cubic-bezier(0.44, 0, 1, 1); |
|
396 } |
|
397 |
|
398 .mejs-time-hovered.no-hover { |
|
399 -webkit-transform: scaleX(0) !important; |
|
400 -ms-transform: scaleX(0) !important; |
|
401 transform: scaleX(0) !important; |
|
402 } |
|
403 |
|
404 .mejs-time-handle, |
|
405 .mejs-time-handle-content { |
|
406 border: 4px solid transparent; |
|
407 cursor: pointer; |
|
408 left: 0; |
|
409 position: absolute; |
|
410 -webkit-transform: translateX(0); |
|
411 -ms-transform: translateX(0); |
|
412 transform: translateX(0); |
|
413 z-index: 11; |
|
414 } |
|
415 |
|
416 .mejs-time-handle-content { |
|
417 border: 4px solid rgba(255, 255, 255, 0.9); |
|
418 border-radius: 50%; |
|
419 height: 10px; |
|
420 left: -7px; |
|
421 top: -4px; |
|
422 -webkit-transform: scale(0); |
|
423 -ms-transform: scale(0); |
|
424 transform: scale(0); |
|
425 width: 10px; |
|
426 } |
|
427 |
|
428 .mejs-time-rail:hover .mejs-time-handle-content, |
|
429 .mejs-time-rail .mejs-time-handle-content:focus, |
|
430 .mejs-time-rail .mejs-time-handle-content:active { |
|
431 -webkit-transform: scale(1); |
|
432 -ms-transform: scale(1); |
|
433 transform: scale(1); |
|
434 } |
|
435 |
|
436 .mejs-time-float { |
|
437 background: #eee; |
|
438 border: solid 1px #333; |
|
439 bottom: 100%; |
|
440 color: #111; |
|
441 display: none; |
|
442 height: 17px; |
|
443 margin-bottom: 9px; |
|
444 position: absolute; |
|
445 text-align: center; |
|
446 -webkit-transform: translateX(-50%); |
|
447 -ms-transform: translateX(-50%); |
|
448 transform: translateX(-50%); |
|
449 width: 36px; |
|
450 } |
|
451 |
|
452 .mejs-time-float-current { |
|
453 display: block; |
|
454 left: 0; |
|
455 margin: 2px; |
|
456 text-align: center; |
|
457 width: 30px; |
|
458 } |
|
459 |
|
460 .mejs-time-float-corner { |
|
461 border: solid 5px #eee; |
|
462 border-color: #eee transparent transparent; |
|
463 border-radius: 0; |
|
464 display: block; |
|
465 height: 0; |
|
466 left: 50%; |
|
467 line-height: 0; |
|
468 position: absolute; |
|
469 top: 100%; |
|
470 -webkit-transform: translateX(-50%); |
|
471 -ms-transform: translateX(-50%); |
|
472 transform: translateX(-50%); |
|
473 width: 0; |
|
474 } |
|
475 |
|
476 .mejs-long-video .mejs-time-float { |
|
477 margin-left: -23px; |
|
478 width: 64px; |
|
479 } |
|
480 |
|
481 .mejs-long-video .mejs-time-float-current { |
|
482 width: 60px; |
|
483 } |
|
484 |
|
485 .mejs-broadcast { |
|
486 color: #fff; |
|
487 height: 10px; |
|
488 position: absolute; |
|
489 top: 15px; |
|
490 width: 100%; |
|
491 } |
|
492 |
|
493 /* End: Progress Bar */ |
|
494 |
|
495 /* Start: Fullscreen */ |
|
496 .mejs-fullscreen-button > button { |
|
497 background-position: -80px 0; |
|
498 } |
|
499 |
|
500 .mejs-unfullscreen > button { |
|
501 background-position: -100px 0; |
|
502 } |
|
503 |
|
504 /* End: Fullscreen */ |
|
505 |
|
506 /* Start: Mute/Volume */ |
|
507 .mejs-mute > button { |
|
508 background-position: -60px 0; |
|
509 } |
|
510 |
|
511 .mejs-unmute > button { |
|
512 background-position: -40px 0; |
|
513 } |
|
514 |
|
515 .mejs-volume-button { |
|
516 position: relative; |
|
517 } |
|
518 |
|
519 .mejs-volume-button > .mejs-volume-slider { |
|
520 -webkit-backface-visibility: hidden; |
|
521 background: rgba(50, 50, 50, 0.7); |
|
522 border-radius: 0; |
|
523 bottom: 100%; |
|
524 display: none; |
|
525 height: 115px; |
|
526 left: 50%; |
|
527 margin: 0; |
|
528 position: absolute; |
|
529 -webkit-transform: translateX(-50%); |
|
530 -ms-transform: translateX(-50%); |
|
531 transform: translateX(-50%); |
|
532 width: 25px; |
|
533 z-index: 1; |
|
534 } |
|
535 |
|
536 .mejs-volume-button:hover { |
|
537 border-radius: 0 0 4px 4px; |
|
538 } |
|
539 |
|
540 .mejs-volume-total { |
|
541 background: rgba(255, 255, 255, 0.5); |
|
542 height: 100px; |
|
543 left: 50%; |
|
544 margin: 0; |
|
545 position: absolute; |
|
546 top: 8px; |
|
547 -webkit-transform: translateX(-50%); |
|
548 -ms-transform: translateX(-50%); |
|
549 transform: translateX(-50%); |
|
550 width: 2px; |
|
551 } |
|
552 |
|
553 .mejs-volume-current { |
|
554 background: rgba(255, 255, 255, 0.9); |
|
555 left: 0; |
|
556 margin: 0; |
|
557 position: absolute; |
|
558 width: 100%; |
|
559 } |
|
560 |
|
561 .mejs-volume-handle { |
|
562 background: rgba(255, 255, 255, 0.9); |
|
563 border-radius: 1px; |
|
564 cursor: ns-resize; |
|
565 height: 6px; |
|
566 left: 50%; |
|
567 position: absolute; |
|
568 -webkit-transform: translateX(-50%); |
|
569 -ms-transform: translateX(-50%); |
|
570 transform: translateX(-50%); |
|
571 width: 16px; |
|
572 } |
|
573 |
|
574 .mejs-horizontal-volume-slider { |
|
575 display: block; |
|
576 height: 36px; |
|
577 position: relative; |
|
578 vertical-align: middle; |
|
579 width: 56px; |
|
580 } |
|
581 |
|
582 .mejs-horizontal-volume-total { |
|
583 background: rgba(50, 50, 50, 0.8); |
|
584 border-radius: 2px; |
|
585 font-size: 1px; |
|
586 height: 8px; |
|
587 left: 0; |
|
588 margin: 0; |
|
589 padding: 0; |
|
590 position: absolute; |
|
591 top: 16px; |
|
592 width: 50px; |
|
593 } |
|
594 |
|
595 .mejs-horizontal-volume-current { |
|
596 background: rgba(255, 255, 255, 0.8); |
|
597 border-radius: 2px; |
|
598 font-size: 1px; |
|
599 height: 100%; |
|
600 left: 0; |
|
601 margin: 0; |
|
602 padding: 0; |
|
603 position: absolute; |
|
604 top: 0; |
|
605 width: 100%; |
|
606 } |
|
607 |
|
608 .mejs-horizontal-volume-handle { |
|
609 display: none; |
|
610 } |
|
611 |
|
612 /* End: Mute/Volume */ |
|
613 |
|
614 /* Start: Track (Captions and Chapters) */ |
|
615 .mejs-captions-button, |
|
616 .mejs-chapters-button { |
|
617 position: relative; |
|
618 } |
|
619 |
|
620 .mejs-captions-button > button { |
|
621 background-position: -140px 0; |
|
622 } |
|
623 |
|
624 .mejs-chapters-button > button { |
|
625 background-position: -180px 0; |
|
626 } |
|
627 |
|
628 .mejs-captions-button > .mejs-captions-selector, |
|
629 .mejs-chapters-button > .mejs-chapters-selector { |
|
630 background: rgba(50, 50, 50, 0.7); |
|
631 border: solid 1px transparent; |
|
632 border-radius: 0; |
|
633 bottom: 100%; |
|
634 margin-right: -43px; |
|
635 overflow: hidden; |
|
636 padding: 0; |
|
637 position: absolute; |
|
638 right: 50%; |
|
639 visibility: visible; |
|
640 width: 86px; |
|
641 } |
|
642 |
|
643 .mejs-chapters-button > .mejs-chapters-selector { |
|
644 margin-right: -55px; |
|
645 width: 110px; |
|
646 } |
|
647 |
|
648 .mejs-captions-selector-list, |
|
649 .mejs-chapters-selector-list { |
|
650 list-style-type: none !important; |
|
651 margin: 0; |
|
652 overflow: hidden; |
|
653 padding: 0; |
|
654 } |
|
655 |
|
656 .mejs-captions-selector-list-item, |
|
657 .mejs-chapters-selector-list-item { |
|
658 color: #fff; |
|
659 cursor: pointer; |
|
660 display: block; |
|
661 list-style-type: none !important; |
|
662 margin: 0 0 6px; |
|
663 overflow: hidden; |
|
664 padding: 0 10px; |
|
665 } |
|
666 |
|
667 .mejs-captions-selector-list-item:hover, |
|
668 .mejs-chapters-selector-list-item:hover { |
|
669 background-color: rgb(200, 200, 200) !important; |
|
670 background-color: rgba(255, 255, 255, 0.4) !important; |
|
671 } |
|
672 |
|
673 .mejs-captions-selector-input, |
|
674 .mejs-chapters-selector-input { |
|
675 clear: both; |
|
676 float: left; |
|
677 left: -1000px; |
|
678 margin: 3px 3px 0 5px; |
|
679 position: absolute; |
|
680 } |
|
681 |
|
682 .mejs-captions-selector-label, |
|
683 .mejs-chapters-selector-label { |
|
684 cursor: pointer; |
|
685 float: left; |
|
686 font-size: 10px; |
|
687 line-height: 15px; |
|
688 padding: 4px 0 0; |
|
689 } |
|
690 |
|
691 .mejs-captions-selected, |
|
692 .mejs-chapters-selected { |
|
693 color: rgba(33, 248, 248, 1); |
|
694 } |
|
695 |
|
696 .mejs-captions-translations { |
|
697 font-size: 10px; |
|
698 margin: 0 0 5px; |
|
699 } |
|
700 |
|
701 .mejs-captions-layer { |
|
702 bottom: 0; |
|
703 color: #fff; |
|
704 font-size: 16px; |
|
705 left: 0; |
|
706 line-height: 20px; |
|
707 position: absolute; |
|
708 text-align: center; |
|
709 } |
|
710 |
|
711 .mejs-captions-layer a { |
|
712 color: #fff; |
|
713 text-decoration: underline; |
|
714 } |
|
715 |
|
716 .mejs-captions-layer[lang=ar] { |
|
717 font-size: 20px; |
|
718 font-weight: normal; |
|
719 } |
|
720 |
|
721 .mejs-captions-position { |
|
722 bottom: 15px; |
|
723 left: 0; |
|
724 position: absolute; |
|
725 width: 100%; |
|
726 } |
|
727 |
|
728 .mejs-captions-position-hover { |
|
729 bottom: 35px; |
|
730 } |
|
731 |
|
732 .mejs-captions-text, |
|
733 .mejs-captions-text * { |
|
734 background: rgba(20, 20, 20, 0.5); |
|
735 box-shadow: 5px 0 0 rgba(20, 20, 20, 0.5), -5px 0 0 rgba(20, 20, 20, 0.5); |
|
736 padding: 0; |
|
737 white-space: pre-wrap; |
|
738 } |
|
739 |
|
740 .mejs-container.mejs-hide-cues video::-webkit-media-text-track-container { |
|
741 display: none; |
|
742 } |
|
743 |
|
744 /* End: Track (Captions and Chapters) */ |
|
745 |
|
746 /* Start: Error */ |
|
747 .mejs-overlay-error { |
|
748 position: relative; |
|
749 } |
|
750 .mejs-overlay-error > img { |
|
751 left: 0; |
|
752 position: absolute; |
|
753 top: 0; |
|
754 z-index: -1; |
|
755 } |
|
756 .mejs-cannotplay, |
|
757 .mejs-cannotplay a { |
|
758 color: #fff; |
|
759 font-size: 0.8em; |
|
760 } |
|
761 |
|
762 .mejs-cannotplay { |
|
763 position: relative; |
|
764 } |
|
765 |
|
766 .mejs-cannotplay p, |
|
767 .mejs-cannotplay a { |
|
768 display: inline-block; |
|
769 padding: 0 15px; |
|
770 width: 100%; |
|
771 } |
|
772 /* End: Error */ |