diff --git a/grunt-settings.yaml b/grunt-settings.yaml index c645fdfbf1678..329e94535aadb 100644 --- a/grunt-settings.yaml +++ b/grunt-settings.yaml @@ -26,7 +26,7 @@ vendors: 'version': '1.12.1' 'dependencies': 'jquery' 'mediaelement': - 'version': '2.23.4' + 'version': '4.1.1' 'dependencies': 'jquery' 'punycode': 'version': '1.4.1' diff --git a/media/vendor/mediaelement/css/background.png b/media/vendor/mediaelement/css/background.png deleted file mode 100644 index fd428412ae26a..0000000000000 Binary files a/media/vendor/mediaelement/css/background.png and /dev/null differ diff --git a/media/vendor/mediaelement/css/bigplay.fw.png b/media/vendor/mediaelement/css/bigplay.fw.png deleted file mode 100644 index 66d0e3cb73cee..0000000000000 Binary files a/media/vendor/mediaelement/css/bigplay.fw.png and /dev/null differ diff --git a/media/vendor/mediaelement/css/bigplay.png b/media/vendor/mediaelement/css/bigplay.png deleted file mode 100644 index 694553e31c387..0000000000000 Binary files a/media/vendor/mediaelement/css/bigplay.png and /dev/null differ diff --git a/media/vendor/mediaelement/css/bigplay.svg b/media/vendor/mediaelement/css/bigplay.svg deleted file mode 100644 index 2b7817005d90d..0000000000000 --- a/media/vendor/mediaelement/css/bigplay.svg +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - - - - - - \ No newline at end of file diff --git a/media/vendor/mediaelement/css/controls-ted.png b/media/vendor/mediaelement/css/controls-ted.png deleted file mode 100644 index 3aac05aa83cb7..0000000000000 Binary files a/media/vendor/mediaelement/css/controls-ted.png and /dev/null differ diff --git a/media/vendor/mediaelement/css/controls-wmp-bg.png b/media/vendor/mediaelement/css/controls-wmp-bg.png deleted file mode 100644 index 89bb9b95602ec..0000000000000 Binary files a/media/vendor/mediaelement/css/controls-wmp-bg.png and /dev/null differ diff --git a/media/vendor/mediaelement/css/controls-wmp.png b/media/vendor/mediaelement/css/controls-wmp.png deleted file mode 100644 index 4775ef5b02faf..0000000000000 Binary files a/media/vendor/mediaelement/css/controls-wmp.png and /dev/null differ diff --git a/media/vendor/mediaelement/css/controls.fw.png b/media/vendor/mediaelement/css/controls.fw.png deleted file mode 100644 index e27682ae10740..0000000000000 Binary files a/media/vendor/mediaelement/css/controls.fw.png and /dev/null differ diff --git a/media/vendor/mediaelement/css/controls.png b/media/vendor/mediaelement/css/controls.png deleted file mode 100644 index f6a857d800b64..0000000000000 Binary files a/media/vendor/mediaelement/css/controls.png and /dev/null differ diff --git a/media/vendor/mediaelement/css/controls.svg b/media/vendor/mediaelement/css/controls.svg deleted file mode 100644 index af3bd41606ae3..0000000000000 --- a/media/vendor/mediaelement/css/controls.svg +++ /dev/null @@ -1 +0,0 @@ - cc \ No newline at end of file diff --git a/media/vendor/mediaelement/css/jumpforward.png b/media/vendor/mediaelement/css/jumpforward.png deleted file mode 100644 index 64d03841e251a..0000000000000 Binary files a/media/vendor/mediaelement/css/jumpforward.png and /dev/null differ diff --git a/media/vendor/mediaelement/css/loading.gif b/media/vendor/mediaelement/css/loading.gif deleted file mode 100644 index 612222be5e474..0000000000000 Binary files a/media/vendor/mediaelement/css/loading.gif and /dev/null differ diff --git a/media/vendor/mediaelement/css/mediaelementplayer-legacy.css b/media/vendor/mediaelement/css/mediaelementplayer-legacy.css new file mode 100644 index 0000000000000..356a965cddbf3 --- /dev/null +++ b/media/vendor/mediaelement/css/mediaelementplayer-legacy.css @@ -0,0 +1,716 @@ +/* Accessibility: hide screen reader texts (and prefer "top" for RTL languages). +Reference: http://blog.rrwd.nl/2015/04/04/the-screen-reader-text-class-why-and-how/ */ +.mejs-offscreen { + clip: rect(1px, 1px, 1px, 1px); /* IE8-IE11 - no support for clip-path */ + clip-path: polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px); + position: absolute !important; + height: 1px; + width: 1px; + overflow: hidden; +} + +.mejs-container { + position: relative; + background: #000; + font-family: "Helvetica", Arial, serif; + text-align: left; + vertical-align: top; + text-indent: 0; + box-sizing: border-box; + min-width: 250px; +} + +.mejs-container .mejs-video { + min-height: 140px; +} + +.mejs-container * { + box-sizing: border-box; +} + +/* Hide native play button from iOS to favor plugin button */ +.mejs-container video::-webkit-media-controls-start-playback-button { + display: none !important; + -webkit-appearance: none; +} + +.mejs-fill-container, +.mejs-fill-container .mejs-container { + width: 100%; + height: 100%; +} + +.mejs-fill-container { + overflow: hidden; + position: relative; + margin: 0 auto; + background: transparent; +} + +.mejs-container:focus { + outline: none; +} + +.mejs-iframe-overlay { + position: absolute; + width: 100%; + height: 100%; +} + +.mejs-embed, +.mejs-embed body { + width: 100%; + height: 100%; + margin: 0; + padding: 0; + background: #000; + overflow: hidden; +} + +.mejs-fullscreen { + overflow: hidden !important; +} + +.mejs-container-fullscreen { + position: fixed; + left: 0; + top: 0; + right: 0; + bottom: 0; + overflow: hidden; + z-index: 1000; +} + +.mejs-container-fullscreen .mejs-mediaelement, +.mejs-container-fullscreen video { + width: 100% !important; + height: 100% !important; +} + +.mejs-clear { + clear: both; +} + +/* Start: LAYERS */ +.mejs-background { + position: absolute; + top: 0; + left: 0; +} + +.mejs-mediaelement { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 0; +} + +.mejs-poster { + position: absolute; + top: 0; + left: 0; + background-size: contain; + background-position: 50% 50%; + background-repeat: no-repeat; + z-index: 1; +} + +:root .mejs-poster-img { + display: none; +} + +.mejs-poster-img { + border: 0; + padding: 0; +} + +.mejs-overlay { + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +.mejs-layer { + z-index: 1; +} + +.mejs-overlay-play { + cursor: pointer; +} + +.mejs-overlay-button { + position: absolute; + top: 50%; + left: 50%; + width: 80px; + height: 80px; + margin: -40px 0 0 -40px; + background: url("mejs-controls.svg") no-repeat; + background-position: 0 -39px; + overflow: hidden; + z-index: 1; +} + +.mejs-overlay:hover > .mejs-overlay-button { + background-position: -80px -39px; +} + +.mejs-overlay-loading { + position: absolute; + top: 50%; + left: 50%; + width: 80px; + height: 80px; + margin: -40px 0 0 -40px; +} + +.mejs-overlay-loading-bg-img { + display: block; + width: 80px; + height: 80px; + background: transparent url("mejs-controls.svg") -160px -40px no-repeat; + -webkit-animation: mejs-loading-spinner 1s linear infinite; + -moz-animation: mejs-loading-spinner 1s linear infinite; + animation: mejs-loading-spinner 1s linear infinite; + z-index: 1; +} + +@-moz-keyframes mejs-loading-spinner { + 100% { + -moz-transform: rotate(360deg); + } +} + +@-webkit-keyframes mejs-loading-spinner { + 100% { + -webkit-transform: rotate(360deg); + } +} + +@keyframes mejs-loading-spinner { + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} + +/* End: LAYERS */ + +/* Start: CONTROL BAR */ +.mejs-controls { + position: absolute; + list-style-type: none; + margin: 0; + padding: 0 10px; + bottom: 0; + left: 0; + height: 40px; + width: 100%; + z-index: 1; +} + +.mejs-controls:not([style*="display: none"]) { + background: rgba(255, 0, 0, 0.7); + background: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.35)); +} + +.mejs-button, +.mejs-time, +.mejs-time-rail { + float: left; + margin: 0; + width: 32px; + height: 40px; + font-size: 10px; + line-height: 10px; +} + +.mejs-button > button { + cursor: pointer; + display: block; + font-size: 0; + line-height: 0; + text-decoration: none; + margin: 10px 6px; + padding: 0; + position: absolute; + height: 20px; + width: 20px; + border: 0; + background: transparent url("mejs-controls.svg"); + overflow: hidden; +} + +/* :focus for accessibility */ +.mejs-button > button:focus { + outline: dotted 1px #999; +} + +.mejs-container-keyboard-inactive a, +.mejs-container-keyboard-inactive a:focus, +.mejs-container-keyboard-inactive button, +.mejs-container-keyboard-inactive button:focus, +.mejs-container-keyboard-inactive [role=slider], +.mejs-container-keyboard-inactive [role=slider]:focus { + outline: 0; +} + +/* End: CONTROL BAR */ + +/* Start: Time (Current / Duration) */ +.mejs-time { + color: #fff; + display: block; + height: 24px; + width: auto; + font-weight: bold; + font-size: 11px; + padding: 16px 6px 0 6px; + overflow: hidden; + text-align: center; + box-sizing: content-box; +} + +/* End: Time (Current / Duration) */ + +/* Start: Play/Pause/Stop */ +.mejs-play > button { + background-position: 0 0; +} + +.mejs-pause > button { + background-position: -20px 0; +} + +.mejs-replay > button { + background-position: -160px 0; +} + +/* End: Play/Pause/Stop */ + +/* Start: Progress Bar */ +.mejs-time-rail { + direction: ltr; + width: 200px; + padding-top: 10px; + height: 40px; + position: relative; + margin: 0 10px; +} + +.mejs-time-total, +.mejs-time-buffering, +.mejs-time-loaded, +.mejs-time-current, +.mejs-time-float, +.mejs-time-hovered, +.mejs-time-float-current, +.mejs-time-float-corner, +.mejs-time-marker { + cursor: pointer; + display: block; + position: absolute; + height: 10px; + border-radius: 2px; +} + +.mejs-time-total { + margin: 5px 0 0 0; + background: rgba(255, 255, 255, 0.3); + width: 100%; +} + +.mejs-time-buffering { + width: 100%; + background: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-size: 15px 15px; + animation: buffering-stripes 2s linear infinite; +} + +@keyframes buffering-stripes { + from { + background-position: 0 0; + } + to { + background-position: 30px 0; + } +} + +.mejs-time-loaded { + background: rgba(255, 255, 255, .3); +} + +.mejs-time-current, .mejs-time-handle-content { + background: rgba(255, 255, 255, 0.9); +} + +.mejs-time-hovered { + background: rgba(255, 255, 255, .5); + z-index: 10; +} + +.mejs-time-hovered.negative { + background: rgba(0, 0, 0, 0.2); +} + +.mejs-time-current, .mejs-time-buffering, .mejs-time-loaded, .mejs-time-hovered { + width: 100%; + left: 0; + -ms-transform-origin: 0 0; + transform-origin: 0 0; + -ms-transform: scaleX(0); + transform: scaleX(0); + transition: .15s ease-in all; +} + +.mejs-time-hovered { + transition: height .1s cubic-bezier(0.44, 0.0, 1, 1); +} + +.mejs-time-hovered.no-hover { + -ms-transform: scaleX(0) !important; + transform: scaleX(0) !important; +} + +.mejs-time-handle, .mejs-time-handle-content { + position: absolute; + cursor: pointer; + width: 10px; + height: 10px; + border: 4px solid transparent; + z-index: 11; + left: 0; + -ms-transform: translateX(0px); + transform: translateX(0px); +} + +.mejs-time-handle-content { + left: -4px; + border: 4px solid rgba(255, 255, 255, 0.9); + -ms-transform: scale(0); + transform: scale(0); + top: -4px; + border-radius: 50%; +} + +.mejs-time-rail:hover .mejs-time-handle-content, .mejs-time-rail .mejs-time-handle-content:focus, .mejs-time-rail .mejs-time-handle-content:active { + -ms-transform: scale(1); + transform: scale(1); +} + +.mejs-time-float { + position: absolute; + display: none; + background: #eee; + width: 36px; + height: 17px; + border: solid 1px #333; + top: -26px; + margin-left: -18px; + text-align: center; + color: #111; +} + +.mejs-time-float-current { + margin: 2px; + width: 30px; + display: block; + text-align: center; + left: 0; +} + +.mejs-time-float-corner { + position: absolute; + display: block; + width: 0; + height: 0; + line-height: 0; + border: solid 5px #eee; + border-color: #eee transparent transparent transparent; + border-radius: 0; + top: 15px; + left: 13px; +} + +.mejs-long-video .mejs-time-float { + width: 64px; + margin-left: -23px; +} + +.mejs-long-video .mejs-time-float-current { + width: 60px; +} + +.mejs-long-video .mejs-time-float-corner { + left: 18px; +} + +.mejs-broadcast { + color: #fff; + position: absolute; + width: 100%; + height: 10px; + top: 15px; +} + +/* End: Progress Bar */ + +/* Start: Fullscreen */ +.mejs-fullscreen-button > button { + background-position: -80px 0; +} + +.mejs-unfullscreen > button { + background-position: -100px 0; +} + +/* End: Fullscreen */ + +/* Start: Mute/Volume */ +.mejs-mute > button { + background-position: -60px 0; +} + +.mejs-unmute > button { + background-position: -40px 0; +} + +.mejs-volume-button { + position: relative; +} + +.mejs-volume-button > .mejs-volume-slider { + display: none; + height: 115px; + width: 25px; + background: rgba(50, 50, 50, 0.7); + border-radius: 0; + top: -115px; + left: 5px; + z-index: 1; + position: absolute; + margin: 0; +} + +.mejs-volume-button:hover { + border-radius: 0 0 4px 4px; +} + +.mejs-volume-total { + position: absolute; + left: 11px; + top: 8px; + width: 2px; + height: 100px; + background: rgba(255, 255, 255, 0.5); + margin: 0; +} + +.mejs-volume-current { + position: absolute; + left: 0; + bottom: 0; + width: 100%; + height: 100%; + background: rgba(255, 255, 255, 0.9); + margin: 0; +} + +.mejs-volume-handle { + position: absolute; + left: 0; + bottom: 100%; + width: 16px; + height: 6px; + margin: 0 0 -3px -7px; + background: rgba(255, 255, 255, 0.9); + cursor: ns-resize; + border-radius: 1px; +} + +.mejs-horizontal-volume-slider { + height: 36px; + width: 56px; + position: relative; + display: block; + float: left; + vertical-align: middle; +} + +.mejs-horizontal-volume-total { + position: absolute; + left: 0; + top: 16px; + width: 50px; + height: 8px; + margin: 0; + padding: 0; + font-size: 1px; + border-radius: 2px; + background: rgba(50, 50, 50, 0.8); +} + +.mejs-horizontal-volume-current { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + margin: 0; + padding: 0; + font-size: 1px; + border-radius: 2px; + background: rgba(255, 255, 255, 0.8); +} + +.mejs-horizontal-volume-handle { + display: none; +} + +/* End: Mute/Volume */ + +/* Start: Track (Captions and Chapters) */ +.mejs-captions-button, .mejs-chapters-button { + position: relative; +} + +.mejs-captions-button > button { + background-position: -140px 0; +} + +.mejs-chapters-button > button { + background-position: -180px 0; +} + +.mejs-captions-button > .mejs-captions-selector, .mejs-chapters-button > .mejs-chapters-selector { + visibility: hidden; + position: absolute; + bottom: 40px; + right: -51px; + width: 85px; + background: rgba(50, 50, 50, 0.7); + border: solid 1px transparent; + padding: 0; + overflow: hidden; + border-radius: 0; +} + +.mejs-chapters-button > .mejs-chapters-selector { + width: 110px; +} + +.mejs-captions-button > .mejs-captions-selector, .mejs-chapters-button > .mejs-chapters-selector { + visibility: visible; +} + +.mejs-captions-selector-list, .mejs-chapters-selector-list { + margin: 0; + padding: 0; + display: block; + list-style-type: none !important; + overflow: hidden; +} + +.mejs-captions-selector-list-item, .mejs-chapters-selector-list-item { + margin: 0 0 6px 0; + padding: 0 10px; + list-style-type: none !important; + display: block; + color: #fff; + overflow: hidden; + cursor: pointer; +} + +.mejs-captions-selector-list-item:hover, .mejs-chapters-selector-list-item:hover { + background-color: rgb(200, 200, 200) !important; + background-color: rgba(255, 255, 255, 0.4) !important; +} + +.mejs-captions-selector-input, .mejs-chapters-selector-input { + clear: both; + float: left; + margin: 3px 3px 0 5px; + position: absolute; + left: -1000px; +} + +.mejs-captions-selector-label, .mejs-chapters-selector-label { + width: 55px; + float: left; + padding: 4px 0 0 0; + line-height: 15px; + font-size: 10px; + cursor: pointer; +} + +.mejs-captions-selected, .mejs-chapters-selected { + color: rgba(33, 248, 248, 1); +} + +.mejs-captions-translations { + font-size: 10px; + margin: 0 0 5px 0; +} + +.mejs-captions-layer { + position: absolute; + bottom: 0; + left: 0; + text-align: center; + line-height: 20px; + font-size: 16px; + color: #fff; +} + +.mejs-captions-layer a { + color: #fff; + text-decoration: underline; +} + +.mejs-captions-layer[lang=ar] { + font-size: 20px; + font-weight: normal; +} + +.mejs-captions-position { + position: absolute; + width: 100%; + bottom: 15px; + left: 0; +} + +.mejs-captions-position-hover { + bottom: 35px; +} + +.mejs-captions-text, .mejs-captions-text * { + padding: 0; + background: rgba(20, 20, 20, 0.5); + white-space: pre-wrap; + box-shadow: 5px 0 0 rgba(20, 20, 20, 0.5), -5px 0 0 rgba(20, 20, 20, 0.5); +} + +.mejs-container.mejs-hide-cues video::-webkit-media-text-track-container { + display: none; +} + +/* End: Track (Captions and Chapters) */ + +/* Start: Error */ +.me_cannotplay a { + font-weight: bold; +} + +.mejs-container .me_cannotplay a { + color: #fff; +} + +.me_cannotplay span { + padding: 15px; + display: block; +} + +/* End: Error */ diff --git a/media/vendor/mediaelement/css/mediaelementplayer-legacy.min.css b/media/vendor/mediaelement/css/mediaelementplayer-legacy.min.css new file mode 100644 index 0000000000000..148f8df5b0048 --- /dev/null +++ b/media/vendor/mediaelement/css/mediaelementplayer-legacy.min.css @@ -0,0 +1 @@ +.mejs-offscreen{clip:rect(1px,1px,1px,1px);-webkit-clip-path:polygon(0 0,0 0,0 0,0 0);clip-path:polygon(0 0,0 0,0 0,0 0);position:absolute!important;height:1px;width:1px;overflow:hidden}.mejs-container{position:relative;background:#000;font-family:Helvetica,Arial,serif;text-align:left;vertical-align:top;text-indent:0;box-sizing:border-box;min-width:250px}.mejs-container .mejs-video{min-height:140px}.mejs-container *{box-sizing:border-box}.mejs-container video::-webkit-media-controls-start-playback-button{display:none!important;-webkit-appearance:none}.mejs-fill-container,.mejs-fill-container .mejs-container{width:100%;height:100%}.mejs-fill-container{overflow:hidden;position:relative;margin:0 auto;background:transparent}.mejs-container:focus{outline:none}.mejs-iframe-overlay{position:absolute;width:100%;height:100%}.mejs-embed,.mejs-embed body{width:100%;height:100%;margin:0;padding:0;background:#000;overflow:hidden}.mejs-fullscreen{overflow:hidden!important}.mejs-container-fullscreen{position:fixed;left:0;top:0;right:0;bottom:0;overflow:hidden;z-index:4}.mejs-container-fullscreen .mejs-mediaelement,.mejs-container-fullscreen video{width:100%!important;height:100%!important}.mejs-clear{clear:both}.mejs-background,.mejs-mediaelement{position:absolute;top:0;left:0}.mejs-mediaelement{width:100%;height:100%;z-index:0}.mejs-poster{position:absolute;top:0;left:0;background-size:contain;background-position:50% 50%;background-repeat:no-repeat;z-index:1}:root .mejs-poster-img{display:none}.mejs-poster-img{border:0;padding:0}.mejs-overlay{position:absolute;top:0;left:0;z-index:1}.mejs-layer{z-index:1}.mejs-overlay-play{cursor:pointer}.mejs-overlay-button{position:absolute;top:50%;left:50%;width:80px;height:80px;margin:-40px 0 0 -40px;background:url(mejs-controls.svg) no-repeat;background-position:0 -39px;overflow:hidden;z-index:1}.mejs-overlay:hover>.mejs-overlay-button{background-position:-80px -39px}.mejs-overlay-loading{position:absolute;top:50%;left:50%;width:80px;height:80px;margin:-40px 0 0 -40px}.mejs-overlay-loading-bg-img{display:block;width:80px;height:80px;background:transparent url(mejs-controls.svg) -160px -40px no-repeat;animation:a 1s linear infinite;z-index:1}@keyframes a{to{transform:rotate(1turn)}}.mejs-controls{position:absolute;list-style-type:none;margin:0;padding:0 10px;bottom:0;left:0;height:40px;width:100%;z-index:1}.mejs-controls:not([style*="display: none"]){background:rgba(255,0,0,.7);background:linear-gradient(transparent,rgba(0,0,0,.35))}.mejs-button,.mejs-time,.mejs-time-rail{float:left;margin:0;width:32px;height:40px;font-size:10px;line-height:10px}.mejs-button>button{cursor:pointer;display:block;font-size:0;line-height:0;text-decoration:none;margin:10px 6px;padding:0;position:absolute;height:20px;width:20px;border:0;background:transparent url(mejs-controls.svg);overflow:hidden}.mejs-button>button:focus{outline:1px dotted #999}.mejs-container-keyboard-inactive [role=slider],.mejs-container-keyboard-inactive [role=slider]:focus,.mejs-container-keyboard-inactive a,.mejs-container-keyboard-inactive a:focus,.mejs-container-keyboard-inactive button,.mejs-container-keyboard-inactive button:focus{outline:0}.mejs-time{color:#fff;display:block;height:24px;width:auto;font-weight:700;font-size:11px;padding:16px 6px 0;overflow:hidden;text-align:center;box-sizing:content-box}.mejs-play>button{background-position:0 0}.mejs-pause>button{background-position:-20px 0}.mejs-replay>button{background-position:-160px 0}.mejs-time-rail{direction:ltr;width:200px;padding-top:10px;height:40px;position:relative;margin:0 10px}.mejs-time-buffering,.mejs-time-current,.mejs-time-float,.mejs-time-float-corner,.mejs-time-float-current,.mejs-time-hovered,.mejs-time-loaded,.mejs-time-marker,.mejs-time-total{cursor:pointer;display:block;position:absolute;height:10px;border-radius:2px}.mejs-time-total{margin:5px 0 0;background:hsla(0,0%,100%,.3);width:100%}.mejs-time-buffering{width:100%;background:linear-gradient(-45deg,hsla(0,0%,100%,.15) 25%,transparent 0,transparent 50%,hsla(0,0%,100%,.15) 0,hsla(0,0%,100%,.15) 75%,transparent 0,transparent);background-size:15px 15px;animation:b 2s linear infinite}@keyframes b{0%{background-position:0 0}to{background-position:30px 0}}.mejs-time-loaded{background:hsla(0,0%,100%,.3)}.mejs-time-current,.mejs-time-handle-content{background:hsla(0,0%,100%,.9)}.mejs-time-hovered{background:hsla(0,0%,100%,.5);z-index:2}.mejs-time-hovered.negative{background:rgba(0,0,0,.2)}.mejs-time-buffering,.mejs-time-current,.mejs-time-hovered,.mejs-time-loaded{width:100%;left:0;-ms-transform-origin:0 0;transform-origin:0 0;-ms-transform:scaleX(0);transform:scaleX(0);transition:all .15s ease-in}.mejs-time-hovered{transition:height .1s cubic-bezier(.44,0,1,1)}.mejs-time-hovered.no-hover{-ms-transform:scaleX(0)!important;transform:scaleX(0)!important}.mejs-time-handle,.mejs-time-handle-content{position:absolute;cursor:pointer;width:10px;height:10px;border:4px solid transparent;z-index:3;left:0;-ms-transform:translateX(0);transform:translateX(0)}.mejs-time-handle-content{left:-4px;border:4px solid hsla(0,0%,100%,.9);-ms-transform:scale(0);transform:scale(0);top:-4px;border-radius:50%}.mejs-time-rail .mejs-time-handle-content:active,.mejs-time-rail .mejs-time-handle-content:focus,.mejs-time-rail:hover .mejs-time-handle-content{-ms-transform:scale(1);transform:scale(1)}.mejs-time-float{position:absolute;display:none;background:#eee;width:36px;height:17px;border:1px solid #333;top:-26px;margin-left:-18px;text-align:center;color:#111}.mejs-time-float-current{margin:2px;width:30px;display:block;text-align:center;left:0}.mejs-time-float-corner{position:absolute;display:block;width:0;height:0;line-height:0;border:5px solid #eee;border-color:#eee transparent transparent;border-radius:0;top:15px;left:13px}.mejs-long-video .mejs-time-float{width:64px;margin-left:-23px}.mejs-long-video .mejs-time-float-current{width:60px}.mejs-long-video .mejs-time-float-corner{left:18px}.mejs-broadcast{color:#fff;position:absolute;width:100%;height:10px;top:15px}.mejs-fullscreen-button>button{background-position:-80px 0}.mejs-unfullscreen>button{background-position:-100px 0}.mejs-mute>button{background-position:-60px 0}.mejs-unmute>button{background-position:-40px 0}.mejs-volume-button{position:relative}.mejs-volume-button>.mejs-volume-slider{display:none;height:115px;width:25px;background:rgba(50,50,50,.7);border-radius:0;top:-115px;left:5px;z-index:1;position:absolute;margin:0}.mejs-volume-button:hover{border-radius:0 0 4px 4px}.mejs-volume-total{position:absolute;left:11px;top:8px;width:2px;height:100px;background:hsla(0,0%,100%,.5);margin:0}.mejs-volume-current{bottom:0;width:100%;height:100%;margin:0}.mejs-volume-current,.mejs-volume-handle{position:absolute;left:0;background:hsla(0,0%,100%,.9)}.mejs-volume-handle{bottom:100%;width:16px;height:6px;margin:0 0 -3px -7px;cursor:ns-resize;border-radius:1px}.mejs-horizontal-volume-slider{height:36px;width:56px;position:relative;display:block;float:left;vertical-align:middle}.mejs-horizontal-volume-total{top:16px;width:50px;height:8px;background:rgba(50,50,50,.8)}.mejs-horizontal-volume-current,.mejs-horizontal-volume-total{position:absolute;left:0;margin:0;padding:0;font-size:1px;border-radius:2px}.mejs-horizontal-volume-current{top:0;width:100%;height:100%;background:hsla(0,0%,100%,.8)}.mejs-horizontal-volume-handle{display:none}.mejs-captions-button,.mejs-chapters-button{position:relative}.mejs-captions-button>button{background-position:-140px 0}.mejs-chapters-button>button{background-position:-180px 0}.mejs-captions-button>.mejs-captions-selector,.mejs-chapters-button>.mejs-chapters-selector{visibility:hidden;position:absolute;bottom:40px;right:-51px;width:85px;background:rgba(50,50,50,.7);border:1px solid transparent;padding:0;overflow:hidden;border-radius:0}.mejs-chapters-button>.mejs-chapters-selector{width:110px}.mejs-captions-button>.mejs-captions-selector,.mejs-chapters-button>.mejs-chapters-selector{visibility:visible}.mejs-captions-selector-list,.mejs-chapters-selector-list{margin:0;padding:0;display:block;list-style-type:none!important;overflow:hidden}.mejs-captions-selector-list-item,.mejs-chapters-selector-list-item{margin:0 0 6px;padding:0 10px;list-style-type:none!important;display:block;color:#fff;overflow:hidden;cursor:pointer}.mejs-captions-selector-list-item:hover,.mejs-chapters-selector-list-item:hover{background-color:#c8c8c8!important;background-color:hsla(0,0%,100%,.4)!important}.mejs-captions-selector-input,.mejs-chapters-selector-input{clear:both;float:left;margin:3px 3px 0 5px;position:absolute;left:-1000px}.mejs-captions-selector-label,.mejs-chapters-selector-label{width:55px;float:left;padding:4px 0 0;line-height:15px;font-size:10px;cursor:pointer}.mejs-captions-selected,.mejs-chapters-selected{color:#21f8f8}.mejs-captions-translations{font-size:10px;margin:0 0 5px}.mejs-captions-layer{position:absolute;bottom:0;left:0;text-align:center;line-height:20px;font-size:16px;color:#fff}.mejs-captions-layer a{color:#fff;text-decoration:underline}.mejs-captions-layer[lang=ar]{font-size:20px;font-weight:400}.mejs-captions-position{position:absolute;width:100%;bottom:15px;left:0}.mejs-captions-position-hover{bottom:35px}.mejs-captions-text,.mejs-captions-text *{padding:0;background:hsla(0,0%,8%,.5);white-space:pre-wrap;box-shadow:5px 0 0 hsla(0,0%,8%,.5),-5px 0 0 hsla(0,0%,8%,.5)}.mejs-container.mejs-hide-cues video::-webkit-media-text-track-container{display:none}.me_cannotplay a{font-weight:700}.mejs-container .me_cannotplay a{color:#fff}.me_cannotplay span{padding:15px;display:block} \ No newline at end of file diff --git a/media/vendor/mediaelement/css/mediaelementplayer.css b/media/vendor/mediaelement/css/mediaelementplayer.css index 8336fd54a0cb1..f9ba4f7972a0e 100644 --- a/media/vendor/mediaelement/css/mediaelementplayer.css +++ b/media/vendor/mediaelement/css/mediaelementplayer.css @@ -1,1007 +1,716 @@ -.mejs-offscreen{ -/* Accessibility: hide screen reader texts (and prefer "top" for RTL languages). Reference: http://blog.rrwd.nl/2015/04/04/the-screen-reader-text-class-why-and-how/ */ - clip: rect(1px 1px 1px 1px); /* IE6, IE7 - no likey commas */ - clip: rect(1px, 1px, 1px, 1px); /* IE8-IE11 - we likey commas, no support for clip-path */ - clip-path: polygon(0px 0px, 0px 0px,0px 0px, 0px 0px); - position: absolute !important; - height: 1px; - width: 1px; - overflow: hidden; +/* Accessibility: hide screen reader texts (and prefer "top" for RTL languages). +Reference: http://blog.rrwd.nl/2015/04/04/the-screen-reader-text-class-why-and-how/ */ +.mejs__offscreen { + clip: rect(1px, 1px, 1px, 1px); /* IE8-IE11 - no support for clip-path */ + clip-path: polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px); + position: absolute !important; + height: 1px; + width: 1px; + overflow: hidden; } -.mejs-container { - position: relative; - background: #000; - font-family: "Helvetica", Arial, serif; - text-align: left; - vertical-align: top; - text-indent: 0; +.mejs__container { + position: relative; + background: #000; + font-family: "Helvetica", Arial, serif; + text-align: left; + vertical-align: top; + text-indent: 0; + box-sizing: border-box; + min-width: 250px; } -.mejs-fill-container,.mejs-fill-container .mejs-container{ - width: 100%; - height: 100%; +.mejs__container .mejs__video { + min-height: 140px; } -.mejs-fill-container{ - overflow: hidden; +.mejs__container * { + box-sizing: border-box; } -.mejs-container:focus { - outline: none; +/* Hide native play button from iOS to favor plugin button */ +.mejs__container video::-webkit-media-controls-start-playback-button { + display: none !important; + -webkit-appearance: none; } -.me-plugin { - position: absolute; +.mejs__fill-container, +.mejs__fill-container .mejs__container { + width: 100%; + height: 100%; } -.mejs-embed, .mejs-embed body { - width: 100%; - height: 100%; - margin: 0; - padding: 0; - background: #000; - overflow: hidden; +.mejs__fill-container { + overflow: hidden; + position: relative; + margin: 0 auto; + background: transparent; } -.mejs-fullscreen { - /* set it to not show scroll bars so 100% will work */ - overflow: hidden !important; +.mejs__container:focus { + outline: none; } -.mejs-container-fullscreen { - position: fixed; - left: 0; - top: 0; - right: 0; - bottom: 0; - overflow: hidden; - z-index: 1000; +.mejs__iframe-overlay { + position: absolute; + width: 100%; + height: 100%; } -.mejs-container-fullscreen .mejs-mediaelement, -.mejs-container-fullscreen video { - width: 100%; - height: 100%; + +.mejs__embed, +.mejs__embed body { + width: 100%; + height: 100%; + margin: 0; + padding: 0; + background: #000; + overflow: hidden; +} + +.mejs__fullscreen { + overflow: hidden !important; } -.mejs-clear { - clear: both; +.mejs__container-fullscreen { + position: fixed; + left: 0; + top: 0; + right: 0; + bottom: 0; + overflow: hidden; + z-index: 1000; +} + +.mejs__container-fullscreen .mejs__mediaelement, +.mejs__container-fullscreen video { + width: 100% !important; + height: 100% !important; +} + +.mejs__clear { + clear: both; } /* Start: LAYERS */ -.mejs-background { - position: absolute; - top: 0; - left: 0; +.mejs__background { + position: absolute; + top: 0; + left: 0; +} + +.mejs__mediaelement { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 0; +} + +.mejs__poster { + position: absolute; + top: 0; + left: 0; + background-size: contain; + background-position: 50% 50%; + background-repeat: no-repeat; + z-index: 1; } -.mejs-mediaelement { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; +:root .mejs__poster-img { + display: none; } -.mejs-poster { - position: absolute; - top: 0; - left: 0; - background-size: contain ; - background-position: 50% 50% ; - background-repeat: no-repeat ; +.mejs__poster-img { + border: 0; + padding: 0; } -:root .mejs-poster img { - display: none ; + +.mejs__overlay { + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +.mejs__layer { + z-index: 1; } -.mejs-poster img { - border: 0; - padding: 0; +.mejs__overlay-play { + cursor: pointer; } -.mejs-overlay { - position: absolute; - top: 0; - left: 0; +.mejs__overlay-button { + position: absolute; + top: 50%; + left: 50%; + width: 80px; + height: 80px; + margin: -40px 0 0 -40px; + background: url("mejs-controls.svg") no-repeat; + background-position: 0 -39px; + overflow: hidden; + z-index: 1; } -.mejs-overlay-play { - cursor: pointer; +.mejs__overlay:hover > .mejs__overlay-button { + background-position: -80px -39px; } -.mejs-overlay-button { - position: absolute; - top: 50%; - left: 50%; - width: 100px; - height: 100px; - margin: -50px 0 0 -50px; - background: url("bigplay.svg") no-repeat; +.mejs__overlay-loading { + position: absolute; + top: 50%; + left: 50%; + width: 80px; + height: 80px; + margin: -40px 0 0 -40px; } -.no-svg .mejs-overlay-button { - background-image: url("bigplay.png"); +.mejs__overlay-loading-bg-img { + display: block; + width: 80px; + height: 80px; + background: transparent url("mejs-controls.svg") -160px -40px no-repeat; + -webkit-animation: mejs-loading-spinner 1s linear infinite; + -moz-animation: mejs-loading-spinner 1s linear infinite; + animation: mejs-loading-spinner 1s linear infinite; + z-index: 1; } -.mejs-overlay:hover .mejs-overlay-button { - background-position: 0 -100px ; +@-moz-keyframes mejs-loading-spinner { + 100% { + -moz-transform: rotate(360deg); + } } -.mejs-overlay-loading { - position: absolute; - top: 50%; - left: 50%; - width: 80px; - height: 80px; - margin: -40px 0 0 -40px; - background: #333; - background: url("background.png"); - background: rgba(0, 0, 0, 0.9); - background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(50,50,50,0.9)), to(rgba(0,0,0,0.9))); - background: -webkit-linear-gradient(top, rgba(50,50,50,0.9), rgba(0,0,0,0.9)); - background: -moz-linear-gradient(top, rgba(50,50,50,0.9), rgba(0,0,0,0.9)); - background: -o-linear-gradient(top, rgba(50,50,50,0.9), rgba(0,0,0,0.9)); - background: -ms-linear-gradient(top, rgba(50,50,50,0.9), rgba(0,0,0,0.9)); - background: linear-gradient(rgba(50,50,50,0.9), rgba(0,0,0,0.9)); +@-webkit-keyframes mejs-loading-spinner { + 100% { + -webkit-transform: rotate(360deg); + } } -.mejs-overlay-loading span { - display: block; - width: 80px; - height: 80px; - background: transparent url("loading.gif") 50% 50% no-repeat; +@keyframes mejs-loading-spinner { + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } } /* End: LAYERS */ /* Start: CONTROL BAR */ -.mejs-container .mejs-controls { - position: absolute; - list-style-type: none; - margin: 0; - padding: 0; - bottom: 0; - left: 0; - background: url("background.png"); - background: rgba(0, 0, 0, 0.7); - background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(50,50,50,0.7)), to(rgba(0,0,0,0.7))); - background: -webkit-linear-gradient(top, rgba(50,50,50,0.7), rgba(0,0,0,0.7)); - background: -moz-linear-gradient(top, rgba(50,50,50,0.7), rgba(0,0,0,0.7)); - background: -o-linear-gradient(top, rgba(50,50,50,0.7), rgba(0,0,0,0.7)); - background: -ms-linear-gradient(top, rgba(50,50,50,0.7), rgba(0,0,0,0.7)); - background: linear-gradient(rgba(50,50,50,0.7), rgba(0,0,0,0.7)); - height: 30px; - width: 100%; -} -.mejs-container .mejs-controls div { - list-style-type: none; - background-image: none; - display: block; - float: left; - margin: 0; - padding: 0; - width: 26px; - height: 26px; - font-size: 11px; - line-height: 11px; - font-family: "Helvetica", Arial, serif; - border: 0; -} - -.mejs-controls .mejs-button button { - cursor: pointer; - display: block; - font-size: 0; - line-height: 0; - text-decoration: none; - margin: 7px 5px; - padding: 0; - position: absolute; - height: 16px; - width: 16px; - border: 0; - background: transparent url("controls.svg") no-repeat; -} - -.no-svg .mejs-controls .mejs-button button { - background-image: url("controls.png"); -} - - /* :focus for accessibility */ -.mejs-controls .mejs-button button:focus { - outline: dotted 1px #999; +.mejs__controls { + position: absolute; + list-style-type: none; + margin: 0; + padding: 0 10px; + bottom: 0; + left: 0; + height: 40px; + width: 100%; + z-index: 1; +} + +.mejs__controls:not([style*="display: none"]) { + background: rgba(255, 0, 0, 0.7); + background: linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.35)); +} + +.mejs__button, +.mejs__time, +.mejs__time-rail { + float: left; + margin: 0; + width: 32px; + height: 40px; + font-size: 10px; + line-height: 10px; +} + +.mejs__button > button { + cursor: pointer; + display: block; + font-size: 0; + line-height: 0; + text-decoration: none; + margin: 10px 6px; + padding: 0; + position: absolute; + height: 20px; + width: 20px; + border: 0; + background: transparent url("mejs-controls.svg"); + overflow: hidden; +} + +/* :focus for accessibility */ +.mejs__button > button:focus { + outline: dotted 1px #999; +} + +.mejs__container-keyboard-inactive a, +.mejs__container-keyboard-inactive a:focus, +.mejs__container-keyboard-inactive button, +.mejs__container-keyboard-inactive button:focus, +.mejs__container-keyboard-inactive [role=slider], +.mejs__container-keyboard-inactive [role=slider]:focus { + outline: 0; } /* End: CONTROL BAR */ /* Start: Time (Current / Duration) */ -.mejs-container .mejs-controls .mejs-time { - color: #fff; - display: block; - height: 17px; - width: auto; - padding: 10px 3px 0 3px ; - overflow: hidden; - text-align: center; - -moz-box-sizing: content-box; - -webkit-box-sizing: content-box; - box-sizing: content-box; -} - -.mejs-container .mejs-controls .mejs-time a { - color: #fff; - font-size: 11px; - line-height: 12px; - display: block; - float: left; - margin: 1px 2px 0 0; - width: auto; +.mejs__time { + color: #fff; + display: block; + height: 24px; + width: auto; + font-weight: bold; + font-size: 11px; + padding: 16px 6px 0 6px; + overflow: hidden; + text-align: center; + box-sizing: content-box; } + /* End: Time (Current / Duration) */ /* Start: Play/Pause/Stop */ -.mejs-controls .mejs-play button { - background-position: 0 0; +.mejs__play > button { + background-position: 0 0; } -.mejs-controls .mejs-pause button { - background-position: 0 -16px; +.mejs__pause > button { + background-position: -20px 0; } -.mejs-controls .mejs-stop button { - background-position: -112px 0; +.mejs__replay > button { + background-position: -160px 0; } -/* Start: Play/Pause/Stop */ + +/* End: Play/Pause/Stop */ /* Start: Progress Bar */ -.mejs-controls div.mejs-time-rail { - direction: ltr; - width: 200px; - padding-top: 5px; -} - -.mejs-controls .mejs-time-rail span, .mejs-controls .mejs-time-rail a { - display: block; - position: absolute; - width: 180px; - height: 10px; - -webkit-border-radius: 2px; - -moz-border-radius: 2px; - border-radius: 2px; - cursor: pointer; -} - -.mejs-controls .mejs-time-rail .mejs-time-total { - margin: 5px; - background: #333; - background: rgba(50,50,50,0.8); - background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(30,30,30,0.8)), to(rgba(60,60,60,0.8))); - background: -webkit-linear-gradient(top, rgba(30,30,30,0.8), rgba(60,60,60,0.8)); - background: -moz-linear-gradient(top, rgba(30,30,30,0.8), rgba(60,60,60,0.8)); - background: -o-linear-gradient(top, rgba(30,30,30,0.8), rgba(60,60,60,0.8)); - background: -ms-linear-gradient(top, rgba(30,30,30,0.8), rgba(60,60,60,0.8)); - background: linear-gradient(rgba(30,30,30,0.8), rgba(60,60,60,0.8)); -} - -.mejs-controls .mejs-time-rail .mejs-time-buffering { - width: 100%; - background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); - background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); - background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); - background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); - background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); - background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); - -webkit-background-size: 15px 15px; - -moz-background-size: 15px 15px; - -o-background-size: 15px 15px; - background-size: 15px 15px; - -webkit-animation: buffering-stripes 2s linear infinite; - -moz-animation: buffering-stripes 2s linear infinite; - -ms-animation: buffering-stripes 2s linear infinite; - -o-animation: buffering-stripes 2s linear infinite; - animation: buffering-stripes 2s linear infinite; -} - -@-webkit-keyframes buffering-stripes { from {background-position: 0 0;} to {background-position: 30px 0;} } -@-moz-keyframes buffering-stripes { from {background-position: 0 0;} to {background-position: 30px 0;} } -@-ms-keyframes buffering-stripes { from {background-position: 0 0;} to {background-position: 30px 0;} } -@-o-keyframes buffering-stripes { from {background-position: 0 0;} to {background-position: 30px 0;} } -@keyframes buffering-stripes { from {background-position: 0 0;} to {background-position: 30px 0;} } - -.mejs-controls .mejs-time-rail .mejs-time-loaded { - background: #3caac8; - background: rgba(60,170,200,0.8); - background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(44,124,145,0.8)), to(rgba(78,183,212,0.8))); - background: -webkit-linear-gradient(top, rgba(44,124,145,0.8), rgba(78,183,212,0.8)); - background: -moz-linear-gradient(top, rgba(44,124,145,0.8), rgba(78,183,212,0.8)); - background: -o-linear-gradient(top, rgba(44,124,145,0.8), rgba(78,183,212,0.8)); - background: -ms-linear-gradient(top, rgba(44,124,145,0.8), rgba(78,183,212,0.8)); - background: linear-gradient(rgba(44,124,145,0.8), rgba(78,183,212,0.8)); - width: 0; -} - -.mejs-controls .mejs-time-rail .mejs-time-current { - background: #fff; - background: rgba(255,255,255,0.8); - background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,0.9)), to(rgba(200,200,200,0.8))); - background: -webkit-linear-gradient(top, rgba(255,255,255,0.9), rgba(200,200,200,0.8)); - background: -moz-linear-gradient(top, rgba(255,255,255,0.9), rgba(200,200,200,0.8)); - background: -o-linear-gradient(top, rgba(255,255,255,0.9), rgba(200,200,200,0.8)); - background: -ms-linear-gradient(top, rgba(255,255,255,0.9), rgba(200,200,200,0.8)); - background: linear-gradient(rgba(255,255,255,0.9), rgba(200,200,200,0.8)); - width: 0; -} - -.mejs-controls .mejs-time-rail .mejs-time-handle { - display: none; - position: absolute; - margin: 0; - width: 10px; - background: #fff; - -webkit-border-radius: 5px; - -moz-border-radius: 5px; - border-radius: 5px; - cursor: pointer; - border: solid 2px #333; - top: -2px; - text-align: center; -} - -.mejs-controls .mejs-time-rail .mejs-time-float { - position: absolute; - display: none; - background: #eee; - width: 36px; - height: 17px; - border: solid 1px #333; - top: -26px; - margin-left: -18px; - text-align: center; - color: #111; -} - -.mejs-controls .mejs-time-rail .mejs-time-float-current { - margin: 2px; - width: 30px; - display: block; - text-align: center; - left: 0; -} - -.mejs-controls .mejs-time-rail .mejs-time-float-corner { - position: absolute; - display: block; - width: 0; - height: 0; - line-height: 0; - border: solid 5px #eee; - border-color: #eee transparent transparent transparent; - -webkit-border-radius: 0; - -moz-border-radius: 0; - border-radius: 0; - top: 15px; - left: 13px; -} - -.mejs-long-video .mejs-controls .mejs-time-rail .mejs-time-float { - width: 48px; -} - -.mejs-long-video .mejs-controls .mejs-time-rail .mejs-time-float-current { - width: 44px; -} - -.mejs-long-video .mejs-controls .mejs-time-rail .mejs-time-float-corner { - left: 18px; -} - -/* -.mejs-controls .mejs-time-rail:hover .mejs-time-handle { - visibility:visible; -} -*/ -/* End: Progress Bar */ +.mejs__time-rail { + direction: ltr; + width: 200px; + padding-top: 10px; + height: 40px; + position: relative; + margin: 0 10px; +} + +.mejs__time-total, +.mejs__time-buffering, +.mejs__time-loaded, +.mejs__time-current, +.mejs__time-float, +.mejs__time-hovered, +.mejs__time-float-current, +.mejs__time-float-corner, +.mejs__time-marker { + cursor: pointer; + display: block; + position: absolute; + height: 10px; + border-radius: 2px; +} -/* Start: Fullscreen */ -.mejs-controls .mejs-fullscreen-button button { - background-position: -32px 0; +.mejs__time-total { + margin: 5px 0 0 0; + background: rgba(255, 255, 255, 0.3); + width: 100%; } -.mejs-controls .mejs-unfullscreen button { - background-position: -32px -16px; +.mejs__time-buffering { + width: 100%; + background: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); + background-size: 15px 15px; + animation: buffering-stripes 2s linear infinite; } -/* End: Fullscreen */ +@keyframes buffering-stripes { + from { + background-position: 0 0; + } + to { + background-position: 30px 0; + } +} -/* Start: Mute/Volume */ -.mejs-controls .mejs-volume-button { -} - -.mejs-controls .mejs-mute button { - background-position: -16px -16px; -} - -.mejs-controls .mejs-unmute button { - background-position: -16px 0; -} - -.mejs-controls .mejs-volume-button { - position: relative; -} - -.mejs-controls .mejs-volume-button .mejs-volume-slider { - display: none; - height: 115px; - width: 25px; - background: url("background.png"); - background: rgba(50, 50, 50, 0.7); - -webkit-border-radius: 0; - -moz-border-radius: 0; - border-radius: 0; - top: -115px; - left: 0; - z-index: 1; - position: absolute; - margin: 0; -} - -.mejs-controls .mejs-volume-button:hover { - -webkit-border-radius: 0 0 4px 4px; - -moz-border-radius: 0 0 4px 4px; - border-radius: 0 0 4px 4px; -} - -/* -.mejs-controls .mejs-volume-button:hover .mejs-volume-slider { - display: block; -} -*/ - -.mejs-controls .mejs-volume-button .mejs-volume-slider .mejs-volume-total { - position: absolute; - left: 11px; - top: 8px; - width: 2px; - height: 100px; - background: #ddd; - background: rgba(255, 255, 255, 0.5); - margin: 0; -} - -.mejs-controls .mejs-volume-button .mejs-volume-slider .mejs-volume-current { - position: absolute; - left: 11px; - top: 8px; - width: 2px; - height: 100px; - background: #ddd; - background: rgba(255, 255, 255, 0.9); - margin: 0; -} - -.mejs-controls .mejs-volume-button .mejs-volume-slider .mejs-volume-handle { - position: absolute; - left: 4px; - top: -3px; - width: 16px; - height: 6px; - background: #ddd; - background: rgba(255, 255, 255, 0.9); - cursor: N-resize; - -webkit-border-radius: 1px; - -moz-border-radius: 1px; - border-radius: 1px; - margin: 0; -} - -/* horizontal version */ -.mejs-controls a.mejs-horizontal-volume-slider { - height: 26px; - width: 56px; - position: relative; - display: block; - float: left; - vertical-align: middle; +.mejs__time-loaded { + background: rgba(255, 255, 255, .3); } -.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total { - position: absolute; - left: 0; - top: 11px; - width: 50px; - height: 8px; - margin: 0; - padding: 0; - font-size: 1px; - -webkit-border-radius: 2px; - -moz-border-radius: 2px; - border-radius: 2px; - background: #333; - background: rgba(50,50,50,0.8); - background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(30,30,30,0.8)), to(rgba(60,60,60,0.8))); - background: -webkit-linear-gradient(top, rgba(30,30,30,0.8), rgba(60,60,60,0.8)); - background: -moz-linear-gradient(top, rgba(30,30,30,0.8), rgba(60,60,60,0.8)); - background: -o-linear-gradient(top, rgba(30,30,30,0.8), rgba(60,60,60,0.8)); - background: -ms-linear-gradient(top, rgba(30,30,30,0.8), rgba(60,60,60,0.8)); - background: linear-gradient(rgba(30,30,30,0.8), rgba(60,60,60,0.8)); -} - -.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current { - position: absolute; - left: 0; - top: 11px; - width: 50px; - height: 8px; - margin: 0; - padding: 0; - font-size: 1px; - -webkit-border-radius: 2px; - -moz-border-radius: 2px; - border-radius: 2px; - background: #fff; - background: rgba(255,255,255,0.8); - background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,0.9)), to(rgba(200,200,200,0.8))); - background: -webkit-linear-gradient(top, rgba(255,255,255,0.9), rgba(200,200,200,0.8)); - background: -moz-linear-gradient(top, rgba(255,255,255,0.9), rgba(200,200,200,0.8)); - background: -o-linear-gradient(top, rgba(255,255,255,0.9), rgba(200,200,200,0.8)); - background: -ms-linear-gradient(top, rgba(255,255,255,0.9), rgba(200,200,200,0.8)); - background: linear-gradient(rgba(255,255,255,0.9), rgba(200,200,200,0.8)); -} - -.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-handle { - display: none; +.mejs__time-current, .mejs__time-handle-content { + background: rgba(255, 255, 255, 0.9); } -/* End: Mute/Volume */ +.mejs__time-hovered { + background: rgba(255, 255, 255, .5); + z-index: 10; +} -/* Start: Track (Captions and Chapters) */ -.mejs-controls .mejs-captions-button { - position: relative; -} - -.mejs-controls .mejs-captions-button button { - background-position: -48px 0; -} -.mejs-controls .mejs-captions-button .mejs-captions-selector { - visibility: hidden; - position: absolute; - bottom: 26px; - right: -51px; - width: 85px; - height: 100px; - background: url("background.png"); - background: rgba(50,50,50,0.7); - border: solid 1px transparent; - padding: 10px 10px 0 10px; - overflow: hidden; - -webkit-border-radius: 0; - -moz-border-radius: 0; - border-radius: 0; -} - -.mejs-controls .mejs-captions-button:hover .mejs-captions-selector { - visibility: visible; -} - -.mejs-controls .mejs-captions-button .mejs-captions-selector ul { - margin: 0; - padding: 0; - display: block; - list-style-type: none !important; - overflow: hidden; -} - -.mejs-controls .mejs-captions-button .mejs-captions-selector ul li { - margin: 0 0 6px 0; - padding: 0; - list-style-type: none !important; - display: block; - color: #fff; - overflow: hidden; -} - -.mejs-controls .mejs-captions-button .mejs-captions-selector ul li input { - clear: both; - float: left; - margin: 3px 3px 0 5px; -} - -.mejs-controls .mejs-captions-button .mejs-captions-selector ul li label { - width: 55px; - float: left; - padding: 4px 0 0 0; - line-height: 15px; - font-family: "Helvetica", Arial, serif; - font-size: 10px; -} - -.mejs-controls .mejs-captions-button .mejs-captions-translations { - font-size: 10px; - margin: 0 0 5px 0; -} - -.mejs-chapters { - position: absolute; - top: 0; - left: 0; - border-right: solid 1px #fff; - width: 10000px; - z-index: 1; -} - -.mejs-chapters .mejs-chapter { - position: absolute; - float: left; - background: #222; - background: rgba(0, 0, 0, 0.7); - background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(50,50,50,0.7)), to(rgba(0,0,0,0.7))); - background: -webkit-linear-gradient(top, rgba(50,50,50,0.7), rgba(0,0,0,0.7)); - background: -moz-linear-gradient(top, rgba(50,50,50,0.7), rgba(0,0,0,0.7)); - background: -o-linear-gradient(top, rgba(50,50,50,0.7), rgba(0,0,0,0.7)); - background: -ms-linear-gradient(top, rgba(50,50,50,0.7), rgba(0,0,0,0.7)); - background: linear-gradient(rgba(50,50,50,0.7), rgba(0,0,0,0.7)); - filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr=#323232,endColorstr=#000000); - overflow: hidden; - border: 0; -} - -.mejs-chapters .mejs-chapter .mejs-chapter-block { - font-size: 11px; - color: #fff; - padding: 5px; - display: block; - border-right: solid 1px #333; - border-bottom: solid 1px #333; - cursor: pointer; -} - -.mejs-chapters .mejs-chapter .mejs-chapter-block-last { - border-right: none; -} - -.mejs-chapters .mejs-chapter .mejs-chapter-block:hover { - background: #666; - background: rgba(102,102,102, 0.7); - background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(102,102,102,0.7)), to(rgba(50,50,50,0.6))); - background: -webkit-linear-gradient(top, rgba(102,102,102,0.7), rgba(50,50,50,0.6)); - background: -moz-linear-gradient(top, rgba(102,102,102,0.7), rgba(50,50,50,0.6)); - background: -o-linear-gradient(top, rgba(102,102,102,0.7), rgba(50,50,50,0.6)); - background: -ms-linear-gradient(top, rgba(102,102,102,0.7), rgba(50,50,50,0.6)); - background: linear-gradient(rgba(102,102,102,0.7), rgba(50,50,50,0.6)); - filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr=#666666,endColorstr=#323232); -} +.mejs__time-hovered.negative { + background: rgba(0, 0, 0, 0.2); +} -.mejs-chapters .mejs-chapter .mejs-chapter-block .ch-title { - font-size: 12px; - font-weight: bold; - display: block; - white-space: nowrap; - text-overflow: ellipsis; - margin: 0 0 3px 0; - line-height: 12px; +.mejs__time-current, .mejs__time-buffering, .mejs__time-loaded, .mejs__time-hovered { + width: 100%; + left: 0; + -ms-transform-origin: 0 0; + transform-origin: 0 0; + -ms-transform: scaleX(0); + transform: scaleX(0); + transition: .15s ease-in all; } -.mejs-chapters .mejs-chapter .mejs-chapter-block .ch-timespan { - font-size: 12px; - line-height: 12px; - margin: 3px 0 4px 0; - display: block; - white-space: nowrap; - text-overflow: ellipsis; +.mejs__time-hovered { + transition: height .1s cubic-bezier(0.44, 0.0, 1, 1); } -.mejs-captions-layer { - position: absolute; - bottom: 0; - left: 0; - text-align:center; - line-height: 20px; - font-size: 16px; - color: #fff; +.mejs__time-hovered.no-hover { + -ms-transform: scaleX(0) !important; + transform: scaleX(0) !important; } -.mejs-captions-layer a { - color: #fff; - text-decoration: underline; +.mejs__time-handle, .mejs__time-handle-content { + position: absolute; + cursor: pointer; + width: 10px; + height: 10px; + border: 4px solid transparent; + z-index: 11; + left: 0; + -ms-transform: translateX(0px); + transform: translateX(0px); } -.mejs-captions-layer[lang=ar] { - font-size: 20px; - font-weight: normal; -} - -.mejs-captions-position { - position: absolute; - width: 100%; - bottom: 15px; - left: 0; -} - -.mejs-captions-position-hover { - bottom: 35px; -} - -.mejs-captions-text { - padding: 0; - background: url("background.png"); - background: rgba(20, 20, 20, 0.5); - white-space: pre-wrap; - -webkit-box-shadow: 5px 0 0 rgba(20, 20, 20, 0.5), -5px 0 0 rgba(20, 20, 20, 0.5); - box-shadow: 5px 0 0 rgba(20, 20, 20, 0.5), -5px 0 0 rgba(20, 20, 20, 0.5); +.mejs__time-handle-content { + left: -4px; + border: 4px solid rgba(255, 255, 255, 0.9); + -ms-transform: scale(0); + transform: scale(0); + top: -4px; + border-radius: 50%; } -/* End: Track (Captions and Chapters) */ -/* Start: Error */ -.me-cannotplay { +.mejs__time-rail:hover .mejs__time-handle-content, .mejs__time-rail .mejs__time-handle-content:focus, .mejs__time-rail .mejs__time-handle-content:active { + -ms-transform: scale(1); + transform: scale(1); } -.me-cannotplay a { - color: #fff; - font-weight: bold; +.mejs__time-float { + position: absolute; + display: none; + background: #eee; + width: 36px; + height: 17px; + border: solid 1px #333; + top: -26px; + margin-left: -18px; + text-align: center; + color: #111; } -.me-cannotplay span { - padding: 15px; - display: block; +.mejs__time-float-current { + margin: 2px; + width: 30px; + display: block; + text-align: center; + left: 0; } -/* End: Error */ +.mejs__time-float-corner { + position: absolute; + display: block; + width: 0; + height: 0; + line-height: 0; + border: solid 5px #eee; + border-color: #eee transparent transparent transparent; + border-radius: 0; + top: 15px; + left: 13px; +} -/* Start: Loop */ -.mejs-controls .mejs-loop-off button { - background-position: -64px -16px; +.mejs__long-video .mejs__time-float { + width: 64px; + margin-left: -23px; } -.mejs-controls .mejs-loop-on button { - background-position: -64px 0; +.mejs__long-video .mejs__time-float-current { + width: 60px; } -/* End: Loop */ +.mejs__long-video .mejs__time-float-corner { + left: 18px; +} -/* Start: backlight */ -.mejs-controls .mejs-backlight-off button { - background-position: -80px -16px; +.mejs__broadcast { + color: #fff; + position: absolute; + width: 100%; + height: 10px; + top: 15px; } -.mejs-controls .mejs-backlight-on button { - background-position: -80px 0; +/* End: Progress Bar */ + +/* Start: Fullscreen */ +.mejs__fullscreen-button > button { + background-position: -80px 0; } -/* End: backlight */ -/* Start: Picture Controls */ -.mejs-controls .mejs-picturecontrols-button { - background-position: -96px 0; +.mejs__unfullscreen > button { + background-position: -100px 0; } -/* End: Picture Controls */ +/* End: Fullscreen */ + +/* Start: Mute/Volume */ +.mejs__mute > button { + background-position: -60px 0; +} -/* context menu */ -.mejs-contextmenu { - position: absolute; - width: 150px; - padding: 10px; - border-radius: 4px; - top: 0; - left: 0; - background: #fff; - border: solid 1px #999; - z-index: 1001; /* make sure it shows on fullscreen */ +.mejs__unmute > button { + background-position: -40px 0; } -.mejs-contextmenu .mejs-contextmenu-separator { - height: 1px; - font-size: 0; - margin: 5px 6px; - background: #333; + +.mejs__volume-button { + position: relative; } -.mejs-contextmenu .mejs-contextmenu-item { - font-family: "Helvetica", Arial, serif; - font-size: 12px; - padding: 4px 6px; - cursor: pointer; - color: #333; +.mejs__volume-button > .mejs__volume-slider { + display: none; + height: 115px; + width: 25px; + background: rgba(50, 50, 50, 0.7); + border-radius: 0; + top: -115px; + left: 5px; + z-index: 1; + position: absolute; + margin: 0; } -.mejs-contextmenu .mejs-contextmenu-item:hover { - background: #2C7C91; - color: #fff; + +.mejs__volume-button:hover { + border-radius: 0 0 4px 4px; } -/* Start: Source Chooser */ -.mejs-controls .mejs-sourcechooser-button { - position: relative; +.mejs__volume-total { + position: absolute; + left: 11px; + top: 8px; + width: 2px; + height: 100px; + background: rgba(255, 255, 255, 0.5); + margin: 0; } -.mejs-controls .mejs-sourcechooser-button button { - background-position: -128px 0; +.mejs__volume-current { + position: absolute; + left: 0; + bottom: 0; + width: 100%; + height: 100%; + background: rgba(255, 255, 255, 0.9); + margin: 0; } -.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector { - position: absolute; - bottom: 26px; - right: -10px; - width: 130px; - height: 100px; - background: url("background.png"); - background: rgba(50,50,50,0.7); - border: solid 1px transparent; - padding: 10px; - overflow: hidden; - -webkit-border-radius: 0; - -moz-border-radius: 0; - border-radius: 0; +.mejs__volume-handle { + position: absolute; + left: 0; + bottom: 100%; + width: 16px; + height: 6px; + margin: 0 0 -3px -7px; + background: rgba(255, 255, 255, 0.9); + cursor: ns-resize; + border-radius: 1px; } -.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul { - margin: 0; - padding: 0; - display: block; - list-style-type: none !important; - overflow: hidden; +.mejs__horizontal-volume-slider { + height: 36px; + width: 56px; + position: relative; + display: block; + float: left; + vertical-align: middle; } -.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul li { - margin: 0 0 6px 0; - padding: 0; - list-style-type: none !important; - display: block; - color: #fff; - overflow: hidden; +.mejs__horizontal-volume-total { + position: absolute; + left: 0; + top: 16px; + width: 50px; + height: 8px; + margin: 0; + padding: 0; + font-size: 1px; + border-radius: 2px; + background: rgba(50, 50, 50, 0.8); } -.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul li input { - clear: both; - float: left; - margin: 3px 3px 0 5px; +.mejs__horizontal-volume-current { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + margin: 0; + padding: 0; + font-size: 1px; + border-radius: 2px; + background: rgba(255, 255, 255, 0.8); } -.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul li label { - width: 100px; - float: left; - padding: 4px 0 0 0; - line-height: 15px; - font-family: "Helvetica", Arial, serif; - font-size: 10px; -} -/* End: Source Chooser */ - -/* Start: Postroll */ -.mejs-postroll-layer { - position: absolute; - bottom: 0; - left: 0; - width: 100%; - height: 100%; - background: url("background.png"); - background: rgba(50,50,50,0.7); - z-index: 1000; - overflow: hidden; -} -.mejs-postroll-layer-content { - width: 100%; - height: 100%; -} -.mejs-postroll-close { - position: absolute; - right: 0; - top: 0; - background: url("background.png"); - background: rgba(50,50,50,0.7); - color: #fff; - padding: 4px; - z-index: 100; - cursor: pointer; +.mejs__horizontal-volume-handle { + display: none; } -/* End: Postroll */ +/* End: Mute/Volume */ -/* Start: Speed */ -div.mejs-speed-button { - width: 46px !important; - position: relative; +/* Start: Track (Captions and Chapters) */ +.mejs__captions-button, .mejs__chapters-button { + position: relative; } -.mejs-controls .mejs-button.mejs-speed-button button { - background: transparent; - width: 36px; - font-size: 11px; - line-height: normal; - color: #ffffff; +.mejs__captions-button > button { + background-position: -140px 0; } -.mejs-controls .mejs-speed-button .mejs-speed-selector { - display: none; - position: absolute; - top: -100px; - left: -10px; - width: 60px; - height: 100px; - background: url("background.png"); - background: rgba(50, 50, 50, 0.7); - border: solid 1px transparent; - padding: 0; - overflow: hidden; - -webkit-border-radius: 0; - -moz-border-radius: 0; - border-radius: 0; +.mejs__chapters-button > button { + background-position: -180px 0; } +.mejs__captions-button > .mejs__captions-selector, .mejs__chapters-button > .mejs__chapters-selector { + visibility: hidden; + position: absolute; + bottom: 40px; + right: -51px; + width: 85px; + background: rgba(50, 50, 50, 0.7); + border: solid 1px transparent; + padding: 0; + overflow: hidden; + border-radius: 0; +} -.mejs-controls .mejs-speed-button:hover > .mejs-speed-selector { - display: block; +.mejs__chapters-button > .mejs__chapters-selector { + width: 110px; } -.mejs-controls .mejs-speed-button .mejs-speed-selector ul li label.mejs-speed-selected { - color: rgba(33, 248, 248, 1); +.mejs__captions-button > .mejs__captions-selector, .mejs__chapters-button > .mejs__chapters-selector { + visibility: visible; } -.mejs-controls .mejs-speed-button .mejs-speed-selector ul { - margin: 0; - padding: 0; - display: block; - list-style-type: none !important; - overflow: hidden; +.mejs__captions-selector-list, .mejs__chapters-selector-list { + margin: 0; + padding: 0; + display: block; + list-style-type: none !important; + overflow: hidden; } -.mejs-controls .mejs-speed-button .mejs-speed-selector ul li { - margin: 0 0 6px 0; - padding: 0 10px; - list-style-type: none !important; - display: block; - color: #fff; - overflow: hidden; +.mejs__captions-selector-list-item, .mejs__chapters-selector-list-item { + margin: 0 0 6px 0; + padding: 0 10px; + list-style-type: none !important; + display: block; + color: #fff; + overflow: hidden; + cursor: pointer; } -.mejs-controls .mejs-speed-button .mejs-speed-selector ul li input { - clear: both; - float: left; - margin: 3px 3px 0 5px; - display: none; +.mejs__captions-selector-list-item:hover, .mejs__chapters-selector-list-item:hover { + background-color: rgb(200, 200, 200) !important; + background-color: rgba(255, 255, 255, 0.4) !important; } -.mejs-controls .mejs-speed-button .mejs-speed-selector ul li label { - width: 60px; - float: left; - padding: 4px 0 0 0; - line-height: 15px; - font-family: "Helvetica", Arial, serif; - font-size: 11px; - color: white; - margin-left: 5px; - cursor: pointer; +.mejs__captions-selector-input, .mejs__chapters-selector-input { + clear: both; + float: left; + margin: 3px 3px 0 5px; + position: absolute; + left: -1000px; } -.mejs-controls .mejs-speed-button .mejs-speed-selector ul li:hover { - background-color: rgb(200, 200, 200) !important; - background-color: rgba(255,255,255,.4) !important; +.mejs__captions-selector-label, .mejs__chapters-selector-label { + width: 55px; + float: left; + padding: 4px 0 0 0; + line-height: 15px; + font-size: 10px; + cursor: pointer; } -/* End: Speed */ -/* Start: Jump Forward */ +.mejs__captions-selected, .mejs__chapters-selected { + color: rgba(33, 248, 248, 1); +} -.mejs-controls .mejs-button.mejs-jump-forward-button { - background: transparent url("jumpforward.png") no-repeat 3px 3px; +.mejs__captions-translations { + font-size: 10px; + margin: 0 0 5px 0; } -.mejs-controls .mejs-button.mejs-jump-forward-button button { - background: transparent; - font-size: 9px; - line-height: normal; - color: #ffffff; + +.mejs__captions-layer { + position: absolute; + bottom: 0; + left: 0; + text-align: center; + line-height: 20px; + font-size: 16px; + color: #fff; } -/* End: Jump Forward */ +.mejs__captions-layer a { + color: #fff; + text-decoration: underline; +} -/* Start: Skip Back */ +.mejs__captions-layer[lang=ar] { + font-size: 20px; + font-weight: normal; +} -.mejs-controls .mejs-button.mejs-skip-back-button { - background: transparent url("skipback.png") no-repeat 3px 3px; +.mejs__captions-position { + position: absolute; + width: 100%; + bottom: 15px; + left: 0; } -.mejs-controls .mejs-button.mejs-skip-back-button button { - background: transparent; - font-size: 9px; - line-height: normal; - color: #ffffff; + +.mejs__captions-position-hover { + bottom: 35px; } -/* End: Skip Back */ +.mejs__captions-text, .mejs__captions-text * { + padding: 0; + background: rgba(20, 20, 20, 0.5); + white-space: pre-wrap; + box-shadow: 5px 0 0 rgba(20, 20, 20, 0.5), -5px 0 0 rgba(20, 20, 20, 0.5); +} +.mejs__container.mejs__hide-cues video::-webkit-media-text-track-container { + display: none; +} + +/* End: Track (Captions and Chapters) */ + +/* Start: Error */ +.me_cannotplay a { + font-weight: bold; +} + +.mejs__container .me_cannotplay a { + color: #fff; +} + +.me_cannotplay span { + padding: 15px; + display: block; +} + +/* End: Error */ diff --git a/media/vendor/mediaelement/css/mediaelementplayer.min.css b/media/vendor/mediaelement/css/mediaelementplayer.min.css index 3959c11ec933a..36dbb3ce5b58b 100644 --- a/media/vendor/mediaelement/css/mediaelementplayer.min.css +++ b/media/vendor/mediaelement/css/mediaelementplayer.min.css @@ -1 +1 @@ -.mejs-offscreen{clip:rect(1px 1px 1px 1px);clip:rect(1px,1px,1px,1px);clip-path:polygon(0px 0,0 0,0 0,0 0);position:absolute!important;height:1px;width:1px;overflow:hidden}.mejs-container{position:relative;background:#000;font-family:Helvetica,Arial,serif;text-align:left;vertical-align:top;text-indent:0}.mejs-fill-container,.mejs-fill-container .mejs-container{width:100%;height:100%}.mejs-fill-container{overflow:hidden}.mejs-container:focus{outline:0}.me-plugin{position:absolute}.mejs-embed,.mejs-embed body{width:100%;height:100%;margin:0;padding:0;background:#000;overflow:hidden}.mejs-fullscreen{overflow:hidden!important}.mejs-container-fullscreen{position:fixed;left:0;top:0;right:0;bottom:0;overflow:hidden;z-index:1000}.mejs-container-fullscreen .mejs-mediaelement,.mejs-container-fullscreen video{width:100%;height:100%}.mejs-clear{clear:both}.mejs-background{position:absolute;top:0;left:0}.mejs-mediaelement{position:absolute;top:0;left:0;width:100%;height:100%}.mejs-poster{position:absolute;top:0;left:0;background-size:contain;background-position:50% 50%;background-repeat:no-repeat}:root .mejs-poster img{display:none}.mejs-poster img{border:0;padding:0}.mejs-overlay{position:absolute;top:0;left:0}.mejs-overlay-play{cursor:pointer}.mejs-overlay-button{position:absolute;top:50%;left:50%;width:100px;height:100px;margin:-50px 0 0 -50px;background:url(bigplay.svg) no-repeat}.no-svg .mejs-overlay-button{background-image:url(bigplay.png)}.mejs-overlay:hover .mejs-overlay-button{background-position:0 -100px}.mejs-overlay-loading{position:absolute;top:50%;left:50%;width:80px;height:80px;margin:-40px 0 0 -40px;background:#333;background:url(background.png);background:rgba(0,0,0,.9);background:-webkit-gradient(linear,0 0,0 100%,from(rgba(50,50,50,.9)),to(rgba(0,0,0,.9)));background:-webkit-linear-gradient(top,rgba(50,50,50,.9),rgba(0,0,0,.9));background:-moz-linear-gradient(top,rgba(50,50,50,.9),rgba(0,0,0,.9));background:-o-linear-gradient(top,rgba(50,50,50,.9),rgba(0,0,0,.9));background:-ms-linear-gradient(top,rgba(50,50,50,.9),rgba(0,0,0,.9));background:linear-gradient(rgba(50,50,50,.9),rgba(0,0,0,.9))}.mejs-overlay-loading span{display:block;width:80px;height:80px;background:transparent url(loading.gif) 50% 50% no-repeat}.mejs-container .mejs-controls{position:absolute;list-style-type:none;margin:0;padding:0;bottom:0;left:0;background:url(background.png);background:rgba(0,0,0,.7);background:-webkit-gradient(linear,0 0,0 100%,from(rgba(50,50,50,.7)),to(rgba(0,0,0,.7)));background:-webkit-linear-gradient(top,rgba(50,50,50,.7),rgba(0,0,0,.7));background:-moz-linear-gradient(top,rgba(50,50,50,.7),rgba(0,0,0,.7));background:-o-linear-gradient(top,rgba(50,50,50,.7),rgba(0,0,0,.7));background:-ms-linear-gradient(top,rgba(50,50,50,.7),rgba(0,0,0,.7));background:linear-gradient(rgba(50,50,50,.7),rgba(0,0,0,.7));height:30px;width:100%}.mejs-container .mejs-controls div{list-style-type:none;background-image:none;display:block;float:left;margin:0;padding:0;width:26px;height:26px;font-size:11px;line-height:11px;font-family:Helvetica,Arial,serif;border:0}.mejs-controls .mejs-button button{cursor:pointer;display:block;font-size:0;line-height:0;text-decoration:none;margin:7px 5px;padding:0;position:absolute;height:16px;width:16px;border:0;background:transparent url(controls.svg) no-repeat}.no-svg .mejs-controls .mejs-button button{background-image:url(controls.png)}.mejs-controls .mejs-button button:focus{outline:dotted 1px #999}.mejs-container .mejs-controls .mejs-time{color:#fff;display:block;height:17px;width:auto;padding:10px 3px 0;overflow:hidden;text-align:center;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}.mejs-container .mejs-controls .mejs-time a{color:#fff;font-size:11px;line-height:12px;display:block;float:left;margin:1px 2px 0 0;width:auto}.mejs-controls .mejs-play button{background-position:0 0}.mejs-controls .mejs-pause button{background-position:0 -16px}.mejs-controls .mejs-stop button{background-position:-112px 0}.mejs-controls div.mejs-time-rail{direction:ltr;width:200px;padding-top:5px}.mejs-controls .mejs-time-rail span,.mejs-controls .mejs-time-rail a{display:block;position:absolute;width:180px;height:10px;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;cursor:pointer}.mejs-controls .mejs-time-rail .mejs-time-total{margin:5px;background:#333;background:rgba(50,50,50,.8);background:-webkit-gradient(linear,0 0,0 100%,from(rgba(30,30,30,.8)),to(rgba(60,60,60,.8)));background:-webkit-linear-gradient(top,rgba(30,30,30,.8),rgba(60,60,60,.8));background:-moz-linear-gradient(top,rgba(30,30,30,.8),rgba(60,60,60,.8));background:-o-linear-gradient(top,rgba(30,30,30,.8),rgba(60,60,60,.8));background:-ms-linear-gradient(top,rgba(30,30,30,.8),rgba(60,60,60,.8));background:linear-gradient(rgba(30,30,30,.8),rgba(60,60,60,.8))}.mejs-controls .mejs-time-rail .mejs-time-buffering{width:100%;background-image:-o-linear-gradient(-45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:-webkit-gradient(linear,0 100%,100% 0,color-stop(0.25,rgba(255,255,255,.15)),color-stop(0.25,transparent),color-stop(0.5,transparent),color-stop(0.5,rgba(255,255,255,.15)),color-stop(0.75,rgba(255,255,255,.15)),color-stop(0.75,transparent),to(transparent));background-image:-webkit-linear-gradient(-45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:-moz-linear-gradient(-45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:-ms-linear-gradient(-45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:linear-gradient(-45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);-webkit-background-size:15px 15px;-moz-background-size:15px 15px;-o-background-size:15px 15px;background-size:15px 15px;-webkit-animation:buffering-stripes 2s linear infinite;-moz-animation:buffering-stripes 2s linear infinite;-ms-animation:buffering-stripes 2s linear infinite;-o-animation:buffering-stripes 2s linear infinite;animation:buffering-stripes 2s linear infinite}@-webkit-keyframes buffering-stripes{from{background-position:0 0}to{background-position:30px 0}}@-moz-keyframes buffering-stripes{from{background-position:0 0}to{background-position:30px 0}}@-ms-keyframes buffering-stripes{from{background-position:0 0}to{background-position:30px 0}}@-o-keyframes buffering-stripes{from{background-position:0 0}to{background-position:30px 0}}@keyframes buffering-stripes{from{background-position:0 0}to{background-position:30px 0}}.mejs-controls .mejs-time-rail .mejs-time-loaded{background:#3caac8;background:rgba(60,170,200,.8);background:-webkit-gradient(linear,0 0,0 100%,from(rgba(44,124,145,.8)),to(rgba(78,183,212,.8)));background:-webkit-linear-gradient(top,rgba(44,124,145,.8),rgba(78,183,212,.8));background:-moz-linear-gradient(top,rgba(44,124,145,.8),rgba(78,183,212,.8));background:-o-linear-gradient(top,rgba(44,124,145,.8),rgba(78,183,212,.8));background:-ms-linear-gradient(top,rgba(44,124,145,.8),rgba(78,183,212,.8));background:linear-gradient(rgba(44,124,145,.8),rgba(78,183,212,.8));width:0}.mejs-controls .mejs-time-rail .mejs-time-current{background:#fff;background:rgba(255,255,255,.8);background:-webkit-gradient(linear,0 0,0 100%,from(rgba(255,255,255,.9)),to(rgba(200,200,200,.8)));background:-webkit-linear-gradient(top,rgba(255,255,255,.9),rgba(200,200,200,.8));background:-moz-linear-gradient(top,rgba(255,255,255,.9),rgba(200,200,200,.8));background:-o-linear-gradient(top,rgba(255,255,255,.9),rgba(200,200,200,.8));background:-ms-linear-gradient(top,rgba(255,255,255,.9),rgba(200,200,200,.8));background:linear-gradient(rgba(255,255,255,.9),rgba(200,200,200,.8));width:0}.mejs-controls .mejs-time-rail .mejs-time-handle{display:none;position:absolute;margin:0;width:10px;background:#fff;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;cursor:pointer;border:solid 2px #333;top:-2px;text-align:center}.mejs-controls .mejs-time-rail .mejs-time-float{position:absolute;display:none;background:#eee;width:36px;height:17px;border:solid 1px #333;top:-26px;margin-left:-18px;text-align:center;color:#111}.mejs-controls .mejs-time-rail .mejs-time-float-current{margin:2px;width:30px;display:block;text-align:center;left:0}.mejs-controls .mejs-time-rail .mejs-time-float-corner{position:absolute;display:block;width:0;height:0;line-height:0;border:solid 5px #eee;border-color:#eee transparent transparent;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;top:15px;left:13px}.mejs-long-video .mejs-controls .mejs-time-rail .mejs-time-float{width:48px}.mejs-long-video .mejs-controls .mejs-time-rail .mejs-time-float-current{width:44px}.mejs-long-video .mejs-controls .mejs-time-rail .mejs-time-float-corner{left:18px}.mejs-controls .mejs-fullscreen-button button{background-position:-32px 0}.mejs-controls .mejs-unfullscreen button{background-position:-32px -16px}.mejs-controls .mejs-volume-button{}.mejs-controls .mejs-mute button{background-position:-16px -16px}.mejs-controls .mejs-unmute button{background-position:-16px 0}.mejs-controls .mejs-volume-button{position:relative}.mejs-controls .mejs-volume-button .mejs-volume-slider{display:none;height:115px;width:25px;background:url(background.png);background:rgba(50,50,50,.7);-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;top:-115px;left:0;z-index:1;position:absolute;margin:0}.mejs-controls .mejs-volume-button:hover{-webkit-border-radius:0 0 4px 4px;-moz-border-radius:0 0 4px 4px;border-radius:0 0 4px 4px}.mejs-controls .mejs-volume-button .mejs-volume-slider .mejs-volume-total{position:absolute;left:11px;top:8px;width:2px;height:100px;background:#ddd;background:rgba(255,255,255,.5);margin:0}.mejs-controls .mejs-volume-button .mejs-volume-slider .mejs-volume-current{position:absolute;left:11px;top:8px;width:2px;height:100px;background:#ddd;background:rgba(255,255,255,.9);margin:0}.mejs-controls .mejs-volume-button .mejs-volume-slider .mejs-volume-handle{position:absolute;left:4px;top:-3px;width:16px;height:6px;background:#ddd;background:rgba(255,255,255,.9);cursor:N-resize;-webkit-border-radius:1px;-moz-border-radius:1px;border-radius:1px;margin:0}.mejs-controls a.mejs-horizontal-volume-slider{height:26px;width:56px;position:relative;display:block;float:left;vertical-align:middle}.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total{position:absolute;left:0;top:11px;width:50px;height:8px;margin:0;padding:0;font-size:1px;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;background:#333;background:rgba(50,50,50,.8);background:-webkit-gradient(linear,0 0,0 100%,from(rgba(30,30,30,.8)),to(rgba(60,60,60,.8)));background:-webkit-linear-gradient(top,rgba(30,30,30,.8),rgba(60,60,60,.8));background:-moz-linear-gradient(top,rgba(30,30,30,.8),rgba(60,60,60,.8));background:-o-linear-gradient(top,rgba(30,30,30,.8),rgba(60,60,60,.8));background:-ms-linear-gradient(top,rgba(30,30,30,.8),rgba(60,60,60,.8));background:linear-gradient(rgba(30,30,30,.8),rgba(60,60,60,.8))}.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current{position:absolute;left:0;top:11px;width:50px;height:8px;margin:0;padding:0;font-size:1px;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;background:#fff;background:rgba(255,255,255,.8);background:-webkit-gradient(linear,0 0,0 100%,from(rgba(255,255,255,.9)),to(rgba(200,200,200,.8)));background:-webkit-linear-gradient(top,rgba(255,255,255,.9),rgba(200,200,200,.8));background:-moz-linear-gradient(top,rgba(255,255,255,.9),rgba(200,200,200,.8));background:-o-linear-gradient(top,rgba(255,255,255,.9),rgba(200,200,200,.8));background:-ms-linear-gradient(top,rgba(255,255,255,.9),rgba(200,200,200,.8));background:linear-gradient(rgba(255,255,255,.9),rgba(200,200,200,.8))}.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-handle{display:none}.mejs-controls .mejs-captions-button{position:relative}.mejs-controls .mejs-captions-button button{background-position:-48px 0}.mejs-controls .mejs-captions-button .mejs-captions-selector{visibility:hidden;position:absolute;bottom:26px;right:-51px;width:85px;height:100px;background:url(background.png);background:rgba(50,50,50,.7);border:solid 1px transparent;padding:10px 10px 0;overflow:hidden;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0}.mejs-controls .mejs-captions-button:hover .mejs-captions-selector{visibility:visible}.mejs-controls .mejs-captions-button .mejs-captions-selector ul{margin:0;padding:0;display:block;list-style-type:none!important;overflow:hidden}.mejs-controls .mejs-captions-button .mejs-captions-selector ul li{margin:0 0 6px;padding:0;list-style-type:none!important;display:block;color:#fff;overflow:hidden}.mejs-controls .mejs-captions-button .mejs-captions-selector ul li input{clear:both;float:left;margin:3px 3px 0 5px}.mejs-controls .mejs-captions-button .mejs-captions-selector ul li label{width:55px;float:left;padding:4px 0 0;line-height:15px;font-family:Helvetica,Arial,serif;font-size:10px}.mejs-controls .mejs-captions-button .mejs-captions-translations{font-size:10px;margin:0 0 5px}.mejs-chapters{position:absolute;top:0;left:0;border-right:solid 1px #fff;width:10000px;z-index:1}.mejs-chapters .mejs-chapter{position:absolute;float:left;background:#222;background:rgba(0,0,0,.7);background:-webkit-gradient(linear,0 0,0 100%,from(rgba(50,50,50,.7)),to(rgba(0,0,0,.7)));background:-webkit-linear-gradient(top,rgba(50,50,50,.7),rgba(0,0,0,.7));background:-moz-linear-gradient(top,rgba(50,50,50,.7),rgba(0,0,0,.7));background:-o-linear-gradient(top,rgba(50,50,50,.7),rgba(0,0,0,.7));background:-ms-linear-gradient(top,rgba(50,50,50,.7),rgba(0,0,0,.7));background:linear-gradient(rgba(50,50,50,.7),rgba(0,0,0,.7));filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr=#323232, endColorstr=#000000);overflow:hidden;border:0}.mejs-chapters .mejs-chapter .mejs-chapter-block{font-size:11px;color:#fff;padding:5px;display:block;border-right:solid 1px #333;border-bottom:solid 1px #333;cursor:pointer}.mejs-chapters .mejs-chapter .mejs-chapter-block-last{border-right:0}.mejs-chapters .mejs-chapter .mejs-chapter-block:hover{background:#666;background:rgba(102,102,102,.7);background:-webkit-gradient(linear,0 0,0 100%,from(rgba(102,102,102,.7)),to(rgba(50,50,50,.6)));background:-webkit-linear-gradient(top,rgba(102,102,102,.7),rgba(50,50,50,.6));background:-moz-linear-gradient(top,rgba(102,102,102,.7),rgba(50,50,50,.6));background:-o-linear-gradient(top,rgba(102,102,102,.7),rgba(50,50,50,.6));background:-ms-linear-gradient(top,rgba(102,102,102,.7),rgba(50,50,50,.6));background:linear-gradient(rgba(102,102,102,.7),rgba(50,50,50,.6));filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr=#666666, endColorstr=#323232)}.mejs-chapters .mejs-chapter .mejs-chapter-block .ch-title{font-size:12px;font-weight:700;display:block;white-space:nowrap;text-overflow:ellipsis;margin:0 0 3px;line-height:12px}.mejs-chapters .mejs-chapter .mejs-chapter-block .ch-timespan{font-size:12px;line-height:12px;margin:3px 0 4px;display:block;white-space:nowrap;text-overflow:ellipsis}.mejs-captions-layer{position:absolute;bottom:0;left:0;text-align:center;line-height:20px;font-size:16px;color:#fff}.mejs-captions-layer a{color:#fff;text-decoration:underline}.mejs-captions-layer[lang=ar]{font-size:20px;font-weight:400}.mejs-captions-position{position:absolute;width:100%;bottom:15px;left:0}.mejs-captions-position-hover{bottom:35px}.mejs-captions-text{padding:0;background:url(background.png);background:rgba(20,20,20,.5);white-space:pre-wrap;-webkit-box-shadow:5px 0 0 rgba(20,20,20,.5),-5px 0 0 rgba(20,20,20,.5);box-shadow:5px 0 0 rgba(20,20,20,.5),-5px 0 0 rgba(20,20,20,.5)}.me-cannotplay{}.me-cannotplay a{color:#fff;font-weight:700}.me-cannotplay span{padding:15px;display:block}.mejs-controls .mejs-loop-off button{background-position:-64px -16px}.mejs-controls .mejs-loop-on button{background-position:-64px 0}.mejs-controls .mejs-backlight-off button{background-position:-80px -16px}.mejs-controls .mejs-backlight-on button{background-position:-80px 0}.mejs-controls .mejs-picturecontrols-button{background-position:-96px 0}.mejs-contextmenu{position:absolute;width:150px;padding:10px;border-radius:4px;top:0;left:0;background:#fff;border:solid 1px #999;z-index:1001}.mejs-contextmenu .mejs-contextmenu-separator{height:1px;font-size:0;margin:5px 6px;background:#333}.mejs-contextmenu .mejs-contextmenu-item{font-family:Helvetica,Arial,serif;font-size:12px;padding:4px 6px;cursor:pointer;color:#333}.mejs-contextmenu .mejs-contextmenu-item:hover{background:#2C7C91;color:#fff}.mejs-controls .mejs-sourcechooser-button{position:relative}.mejs-controls .mejs-sourcechooser-button button{background-position:-128px 0}.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector{position:absolute;bottom:26px;right:-10px;width:130px;height:100px;background:url(background.png);background:rgba(50,50,50,.7);border:solid 1px transparent;padding:10px;overflow:hidden;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0}.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul{margin:0;padding:0;display:block;list-style-type:none!important;overflow:hidden}.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul li{margin:0 0 6px;padding:0;list-style-type:none!important;display:block;color:#fff;overflow:hidden}.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul li input{clear:both;float:left;margin:3px 3px 0 5px}.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul li label{width:100px;float:left;padding:4px 0 0;line-height:15px;font-family:Helvetica,Arial,serif;font-size:10px}.mejs-postroll-layer{position:absolute;bottom:0;left:0;width:100%;height:100%;background:url(background.png);background:rgba(50,50,50,.7);z-index:1000;overflow:hidden}.mejs-postroll-layer-content{width:100%;height:100%}.mejs-postroll-close{position:absolute;right:0;top:0;background:url(background.png);background:rgba(50,50,50,.7);color:#fff;padding:4px;z-index:100;cursor:pointer}div.mejs-speed-button{width:46px!important;position:relative}.mejs-controls .mejs-button.mejs-speed-button button{background:transparent;width:36px;font-size:11px;line-height:normal;color:#fff}.mejs-controls .mejs-speed-button .mejs-speed-selector{display:none;position:absolute;top:-100px;left:-10px;width:60px;height:100px;background:url(background.png);background:rgba(50,50,50,.7);border:solid 1px transparent;padding:0;overflow:hidden;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0}.mejs-controls .mejs-speed-button:hover>.mejs-speed-selector{display:block}.mejs-controls .mejs-speed-button .mejs-speed-selector ul li label.mejs-speed-selected{color:rgba(33,248,248,1)}.mejs-controls .mejs-speed-button .mejs-speed-selector ul{margin:0;padding:0;display:block;list-style-type:none!important;overflow:hidden}.mejs-controls .mejs-speed-button .mejs-speed-selector ul li{margin:0 0 6px;padding:0 10px;list-style-type:none!important;display:block;color:#fff;overflow:hidden}.mejs-controls .mejs-speed-button .mejs-speed-selector ul li input{clear:both;float:left;margin:3px 3px 0 5px;display:none}.mejs-controls .mejs-speed-button .mejs-speed-selector ul li label{width:60px;float:left;padding:4px 0 0;line-height:15px;font-family:Helvetica,Arial,serif;font-size:11px;color:#fff;margin-left:5px;cursor:pointer}.mejs-controls .mejs-speed-button .mejs-speed-selector ul li:hover{background-color:#c8c8c8!important;background-color:rgba(255,255,255,.4)!important}.mejs-controls .mejs-button.mejs-jump-forward-button{background:transparent url(jumpforward.png) no-repeat 3px 3px}.mejs-controls .mejs-button.mejs-jump-forward-button button{background:transparent;font-size:9px;line-height:normal;color:#fff}.mejs-controls .mejs-button.mejs-skip-back-button{background:transparent url(skipback.png) no-repeat 3px 3px}.mejs-controls .mejs-button.mejs-skip-back-button button{background:transparent;font-size:9px;line-height:normal;color:#fff} \ No newline at end of file +.mejs__offscreen{clip:rect(1px,1px,1px,1px);-webkit-clip-path:polygon(0 0,0 0,0 0,0 0);clip-path:polygon(0 0,0 0,0 0,0 0);position:absolute!important;height:1px;width:1px;overflow:hidden}.mejs__container{position:relative;background:#000;font-family:Helvetica,Arial,serif;text-align:left;vertical-align:top;text-indent:0;box-sizing:border-box;min-width:250px}.mejs__container .mejs__video{min-height:140px}.mejs__container *{box-sizing:border-box}.mejs__container video::-webkit-media-controls-start-playback-button{display:none!important;-webkit-appearance:none}.mejs__fill-container,.mejs__fill-container .mejs__container{width:100%;height:100%}.mejs__fill-container{overflow:hidden;position:relative;margin:0 auto;background:transparent}.mejs__container:focus{outline:none}.mejs__iframe-overlay{position:absolute;width:100%;height:100%}.mejs__embed,.mejs__embed body{width:100%;height:100%;margin:0;padding:0;background:#000;overflow:hidden}.mejs__fullscreen{overflow:hidden!important}.mejs__container-fullscreen{position:fixed;left:0;top:0;right:0;bottom:0;overflow:hidden;z-index:4}.mejs__container-fullscreen .mejs__mediaelement,.mejs__container-fullscreen video{width:100%!important;height:100%!important}.mejs__clear{clear:both}.mejs__background,.mejs__mediaelement{position:absolute;top:0;left:0}.mejs__mediaelement{width:100%;height:100%;z-index:0}.mejs__poster{position:absolute;top:0;left:0;background-size:contain;background-position:50% 50%;background-repeat:no-repeat;z-index:1}:root .mejs__poster-img{display:none}.mejs__poster-img{border:0;padding:0}.mejs__overlay{position:absolute;top:0;left:0;z-index:1}.mejs__layer{z-index:1}.mejs__overlay-play{cursor:pointer}.mejs__overlay-button{position:absolute;top:50%;left:50%;width:80px;height:80px;margin:-40px 0 0 -40px;background:url(mejs-controls.svg) no-repeat;background-position:0 -39px;overflow:hidden;z-index:1}.mejs__overlay:hover>.mejs__overlay-button{background-position:-80px -39px}.mejs__overlay-loading{position:absolute;top:50%;left:50%;width:80px;height:80px;margin:-40px 0 0 -40px}.mejs__overlay-loading-bg-img{display:block;width:80px;height:80px;background:transparent url(mejs-controls.svg) -160px -40px no-repeat;animation:a 1s linear infinite;z-index:1}@keyframes a{to{transform:rotate(1turn)}}.mejs__controls{position:absolute;list-style-type:none;margin:0;padding:0 10px;bottom:0;left:0;height:40px;width:100%;z-index:1}.mejs__controls:not([style*="display: none"]){background:rgba(255,0,0,.7);background:linear-gradient(transparent,rgba(0,0,0,.35))}.mejs__button,.mejs__time,.mejs__time-rail{float:left;margin:0;width:32px;height:40px;font-size:10px;line-height:10px}.mejs__button>button{cursor:pointer;display:block;font-size:0;line-height:0;text-decoration:none;margin:10px 6px;padding:0;position:absolute;height:20px;width:20px;border:0;background:transparent url(mejs-controls.svg);overflow:hidden}.mejs__button>button:focus{outline:1px dotted #999}.mejs__container-keyboard-inactive [role=slider],.mejs__container-keyboard-inactive [role=slider]:focus,.mejs__container-keyboard-inactive a,.mejs__container-keyboard-inactive a:focus,.mejs__container-keyboard-inactive button,.mejs__container-keyboard-inactive button:focus{outline:0}.mejs__time{color:#fff;display:block;height:24px;width:auto;font-weight:700;font-size:11px;padding:16px 6px 0;overflow:hidden;text-align:center;box-sizing:content-box}.mejs__play>button{background-position:0 0}.mejs__pause>button{background-position:-20px 0}.mejs__replay>button{background-position:-160px 0}.mejs__time-rail{direction:ltr;width:200px;padding-top:10px;height:40px;position:relative;margin:0 10px}.mejs__time-buffering,.mejs__time-current,.mejs__time-float,.mejs__time-float-corner,.mejs__time-float-current,.mejs__time-hovered,.mejs__time-loaded,.mejs__time-marker,.mejs__time-total{cursor:pointer;display:block;position:absolute;height:10px;border-radius:2px}.mejs__time-total{margin:5px 0 0;background:hsla(0,0%,100%,.3);width:100%}.mejs__time-buffering{width:100%;background:linear-gradient(-45deg,hsla(0,0%,100%,.15) 25%,transparent 0,transparent 50%,hsla(0,0%,100%,.15) 0,hsla(0,0%,100%,.15) 75%,transparent 0,transparent);background-size:15px 15px;animation:b 2s linear infinite}@keyframes b{0%{background-position:0 0}to{background-position:30px 0}}.mejs__time-loaded{background:hsla(0,0%,100%,.3)}.mejs__time-current,.mejs__time-handle-content{background:hsla(0,0%,100%,.9)}.mejs__time-hovered{background:hsla(0,0%,100%,.5);z-index:2}.mejs__time-hovered.negative{background:rgba(0,0,0,.2)}.mejs__time-buffering,.mejs__time-current,.mejs__time-hovered,.mejs__time-loaded{width:100%;left:0;-ms-transform-origin:0 0;transform-origin:0 0;-ms-transform:scaleX(0);transform:scaleX(0);transition:all .15s ease-in}.mejs__time-hovered{transition:height .1s cubic-bezier(.44,0,1,1)}.mejs__time-hovered.no-hover{-ms-transform:scaleX(0)!important;transform:scaleX(0)!important}.mejs__time-handle,.mejs__time-handle-content{position:absolute;cursor:pointer;width:10px;height:10px;border:4px solid transparent;z-index:3;left:0;-ms-transform:translateX(0);transform:translateX(0)}.mejs__time-handle-content{left:-4px;border:4px solid hsla(0,0%,100%,.9);-ms-transform:scale(0);transform:scale(0);top:-4px;border-radius:50%}.mejs__time-rail .mejs__time-handle-content:active,.mejs__time-rail .mejs__time-handle-content:focus,.mejs__time-rail:hover .mejs__time-handle-content{-ms-transform:scale(1);transform:scale(1)}.mejs__time-float{position:absolute;display:none;background:#eee;width:36px;height:17px;border:1px solid #333;top:-26px;margin-left:-18px;text-align:center;color:#111}.mejs__time-float-current{margin:2px;width:30px;display:block;text-align:center;left:0}.mejs__time-float-corner{position:absolute;display:block;width:0;height:0;line-height:0;border:5px solid #eee;border-color:#eee transparent transparent;border-radius:0;top:15px;left:13px}.mejs__long-video .mejs__time-float{width:64px;margin-left:-23px}.mejs__long-video .mejs__time-float-current{width:60px}.mejs__long-video .mejs__time-float-corner{left:18px}.mejs__broadcast{color:#fff;position:absolute;width:100%;height:10px;top:15px}.mejs__fullscreen-button>button{background-position:-80px 0}.mejs__unfullscreen>button{background-position:-100px 0}.mejs__mute>button{background-position:-60px 0}.mejs__unmute>button{background-position:-40px 0}.mejs__volume-button{position:relative}.mejs__volume-button>.mejs__volume-slider{display:none;height:115px;width:25px;background:rgba(50,50,50,.7);border-radius:0;top:-115px;left:5px;z-index:1;position:absolute;margin:0}.mejs__volume-button:hover{border-radius:0 0 4px 4px}.mejs__volume-total{position:absolute;left:11px;top:8px;width:2px;height:100px;background:hsla(0,0%,100%,.5);margin:0}.mejs__volume-current{bottom:0;width:100%;height:100%;margin:0}.mejs__volume-current,.mejs__volume-handle{position:absolute;left:0;background:hsla(0,0%,100%,.9)}.mejs__volume-handle{bottom:100%;width:16px;height:6px;margin:0 0 -3px -7px;cursor:ns-resize;border-radius:1px}.mejs__horizontal-volume-slider{height:36px;width:56px;position:relative;display:block;float:left;vertical-align:middle}.mejs__horizontal-volume-total{top:16px;width:50px;height:8px;background:rgba(50,50,50,.8)}.mejs__horizontal-volume-current,.mejs__horizontal-volume-total{position:absolute;left:0;margin:0;padding:0;font-size:1px;border-radius:2px}.mejs__horizontal-volume-current{top:0;width:100%;height:100%;background:hsla(0,0%,100%,.8)}.mejs__horizontal-volume-handle{display:none}.mejs__captions-button,.mejs__chapters-button{position:relative}.mejs__captions-button>button{background-position:-140px 0}.mejs__chapters-button>button{background-position:-180px 0}.mejs__captions-button>.mejs__captions-selector,.mejs__chapters-button>.mejs__chapters-selector{visibility:hidden;position:absolute;bottom:40px;right:-51px;width:85px;background:rgba(50,50,50,.7);border:1px solid transparent;padding:0;overflow:hidden;border-radius:0}.mejs__chapters-button>.mejs__chapters-selector{width:110px}.mejs__captions-button>.mejs__captions-selector,.mejs__chapters-button>.mejs__chapters-selector{visibility:visible}.mejs__captions-selector-list,.mejs__chapters-selector-list{margin:0;padding:0;display:block;list-style-type:none!important;overflow:hidden}.mejs__captions-selector-list-item,.mejs__chapters-selector-list-item{margin:0 0 6px;padding:0 10px;list-style-type:none!important;display:block;color:#fff;overflow:hidden;cursor:pointer}.mejs__captions-selector-list-item:hover,.mejs__chapters-selector-list-item:hover{background-color:#c8c8c8!important;background-color:hsla(0,0%,100%,.4)!important}.mejs__captions-selector-input,.mejs__chapters-selector-input{clear:both;float:left;margin:3px 3px 0 5px;position:absolute;left:-1000px}.mejs__captions-selector-label,.mejs__chapters-selector-label{width:55px;float:left;padding:4px 0 0;line-height:15px;font-size:10px;cursor:pointer}.mejs__captions-selected,.mejs__chapters-selected{color:#21f8f8}.mejs__captions-translations{font-size:10px;margin:0 0 5px}.mejs__captions-layer{position:absolute;bottom:0;left:0;text-align:center;line-height:20px;font-size:16px;color:#fff}.mejs__captions-layer a{color:#fff;text-decoration:underline}.mejs__captions-layer[lang=ar]{font-size:20px;font-weight:400}.mejs__captions-position{position:absolute;width:100%;bottom:15px;left:0}.mejs__captions-position-hover{bottom:35px}.mejs__captions-text,.mejs__captions-text *{padding:0;background:hsla(0,0%,8%,.5);white-space:pre-wrap;box-shadow:5px 0 0 hsla(0,0%,8%,.5),-5px 0 0 hsla(0,0%,8%,.5)}.mejs__container.mejs__hide-cues video::-webkit-media-text-track-container{display:none}.me_cannotplay a{font-weight:700}.mejs__container .me_cannotplay a{color:#fff}.me_cannotplay span{padding:15px;display:block} \ No newline at end of file diff --git a/media/vendor/mediaelement/css/mejs-controls.png b/media/vendor/mediaelement/css/mejs-controls.png new file mode 100644 index 0000000000000..a8e0fd2770205 Binary files /dev/null and b/media/vendor/mediaelement/css/mejs-controls.png differ diff --git a/media/vendor/mediaelement/css/mejs-controls.svg b/media/vendor/mediaelement/css/mejs-controls.svg new file mode 100644 index 0000000000000..e4db236e54067 --- /dev/null +++ b/media/vendor/mediaelement/css/mejs-controls.svg @@ -0,0 +1,122 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/media/vendor/mediaelement/css/mejs-skins.css b/media/vendor/mediaelement/css/mejs-skins.css deleted file mode 100644 index 5c27cf156fcd0..0000000000000 --- a/media/vendor/mediaelement/css/mejs-skins.css +++ /dev/null @@ -1,289 +0,0 @@ -/* TED player */ -.mejs-container.mejs-ted { - -} -.mejs-ted .mejs-controls { - background: #eee; - height: 65px; -} - -.mejs-ted .mejs-button, -.mejs-ted .mejs-time { - position: absolute; - background: #ddd; -} -.mejs-ted .mejs-controls .mejs-time-rail .mejs-time-total { - background-color: none; - background: url(controls-ted.png) repeat-x 0 -52px; - height: 6px; -} -.mejs-ted .mejs-controls .mejs-time-rail .mejs-time-buffering { - height: 6px; -} -.mejs-ted .mejs-controls .mejs-time-rail .mejs-time-loaded { - background-color: none; - background: url(controls-ted.png) repeat-x 0 -52px; - width: 0; - height: 6px; -} -.mejs-ted .mejs-controls .mejs-time-rail .mejs-time-current { - width: 0; - height: 6px; - background-color: none; - background: url(controls-ted.png) repeat-x 0 -59px; -} -.mejs-ted .mejs-controls .mejs-time-rail .mejs-time-handle { - display: block; - margin: 0; - width: 14px; - height: 21px; - top: -7px; - border: 0; - background: url(controls-ted.png) no-repeat 0 0; -} -.mejs-ted .mejs-controls .mejs-time-rail .mejs-time-float { - display: none; -} -.mejs-ted .mejs-controls .mejs-playpause-button { - top: 29px; - left: 9px; - width: 49px; - height: 28px; -} -.mejs-ted .mejs-controls .mejs-playpause-button button { - width: 49px; - height: 28px; - background: url(controls-ted.png) no-repeat -50px -23px; - margin: 0; - padding: 0; -} -.mejs-ted .mejs-controls .mejs-pause button { - background-position: 0 -23px; -} - -.mejs-ted .mejs-controls .mejs-fullscreen-button { - top: 34px; - right: 9px; - width: 17px; - height: 15px; - background : none; -} -.mejs-ted .mejs-controls .mejs-fullscreen-button button { - width: 19px; - height: 17px; - background: transparent url(controls-ted.png) no-repeat 0 -66px; - margin: 0; - padding: 0; -} -.mejs-ted .mejs-controls .mejs-unfullscreen button { - background: transparent url(controls-ted.png) no-repeat -21px -66px; - margin: 0; - padding: 0; -} -.mejs-ted .mejs-controls .mejs-volume-button { - top: 30px; - right: 35px; - width: 24px; - height: 22px; -} -.mejs-ted .mejs-controls .mejs-mute button { - background: url(controls-ted.png) no-repeat -15px 0; - width: 24px; - height: 22px; - margin: 0; - padding: 0; -} -.mejs-ted .mejs-controls .mejs-unmute button { - background: url(controls-ted.png) no-repeat -40px 0; - width: 24px; - height: 22px; - margin: 0; - padding: 0; -} -.mejs-ted .mejs-controls .mejs-volume-button .mejs-volume-slider { - background: #fff; - border: solid 1px #aaa; - border-width: 1px 1px 0 1px; - width: 22px; - height: 65px; - top: -65px; -} -.mejs-ted .mejs-controls .mejs-volume-button .mejs-volume-total { - background: url(controls-ted.png) repeat-y -41px -66px; - left: 8px; - width: 6px; - height: 50px; -} -.mejs-ted .mejs-controls .mejs-volume-button .mejs-volume-current { - left: 8px; - width: 6px; - background: url(controls-ted.png) repeat-y -48px -66px; - height: 50px; -} - -.mejs-ted .mejs-controls .mejs-volume-button .mejs-volume-handle { - display: none; -} - -.mejs-ted .mejs-controls .mejs-time span { - color: #333; -} -.mejs-ted .mejs-controls .mejs-currenttime-container { - position: absolute; - top: 32px; - right: 100px; - border: solid 1px #999; - background: #fff; - color: #333; - padding-top: 2px; - border-radius: 3px; - color: #333; -} -.mejs-ted .mejs-controls .mejs-duration-container { - - position: absolute; - top: 32px; - right: 65px; - border: solid 1px #999; - background: #fff; - color: #333; - padding-top: 2px; - border-radius: 3px; - color: #333; -} - -.mejs-ted .mejs-controls .mejs-time button{ - color: #333; -} -.mejs-ted .mejs-controls .mejs-captions-button { - display: none; -} -/* END: TED player */ - - -/* WMP player */ -.mejs-container.mejs-wmp { - -} -.mejs-wmp .mejs-controls { - background: transparent url(controls-wmp-bg.png) center 16px no-repeat; - height: 65px; -} - -.mejs-wmp .mejs-button, -.mejs-wmp .mejs-time { - position: absolute; - background: transparent; -} -.mejs-wmp .mejs-controls .mejs-time-rail .mejs-time-total { - background-color: transparent; - border: solid 1px #ccc; - height: 3px; -} -.mejs-wmp .mejs-controls .mejs-time-rail .mejs-time-buffering { - height: 3px; -} -.mejs-wmp .mejs-controls .mejs-time-rail .mejs-time-loaded { - background-color: rgba(255,255,255,0.3); - width: 0; - height: 3px; -} -.mejs-wmp .mejs-controls .mejs-time-rail .mejs-time-current { - width: 0; - height: 1px; - background-color: #014CB6; - border: solid 1px #7FC9FA; - border-width: 1px 0; - border-color: #7FC9FA #fff #619FF2 #fff; -} -.mejs-wmp .mejs-controls .mejs-time-rail .mejs-time-handle { - display: block; - margin: 0; - width: 16px; - height: 9px; - top: -3px; - border: 0; - background: url(controls-wmp.png) no-repeat 0 -80px; -} -.mejs-wmp .mejs-controls .mejs-time-rail .mejs-time-float { - display: none; -} -.mejs-wmp .mejs-controls .mejs-playpause-button { - top: 10px; - left: 50%; - margin: 10px 0 0 -20px; - width: 40px; - height: 40px; - -} -.mejs-wmp .mejs-controls .mejs-playpause-button button { - width: 40px; - height: 40px; - background: url(controls-wmp.png) no-repeat 0 0; - margin: 0; - padding: 0; -} -.mejs-wmp .mejs-controls .mejs-pause button { - background-position: 0 -40px; -} - -.mejs-wmp .mejs-controls .mejs-currenttime-container { - position: absolute; - top: 25px; - left: 50%; - margin-left: -93px; -} -.mejs-wmp .mejs-controls .mejs-duration-container { - position: absolute; - top: 25px; - left: 50%; - margin-left: -58px; -} - - -.mejs-wmp .mejs-controls .mejs-volume-button { - top: 32px; - right: 50%; - margin-right: -55px; - width: 20px; - height: 15px; -} -.mejs-wmp .mejs-controls .mejs-volume-button button { - margin: 0; - padding: 0; - background: url(controls-wmp.png) no-repeat -42px -17px; - width: 20px; - height: 15px; -} -.mejs-wmp .mejs-controls .mejs-unmute button { - margin: 0; - padding: 0; - background: url(controls-wmp.png) no-repeat -42px 0; - width: 20px; - height: 15px; -} -.mejs-wmp .mejs-controls .mejs-volume-button .mejs-volume-slider { - background: rgba(102,102,102,0.6); -} - -.mejs-wmp .mejs-controls .mejs-fullscreen-button { - top: 32px; - right: 50%; - margin-right: -82px; - width: 15px; - height: 14px; -} -.mejs-wmp .mejs-controls .mejs-fullscreen-button button { - margin: 0; - padding: 0; - background: url(controls-wmp.png) no-repeat -63px 0; - width: 15px; - height: 14px; -} -.mejs-wmp .mejs-controls .mejs-captions-button { - display: none; -} -/* END: WMP player */ - - - diff --git a/media/vendor/mediaelement/css/skipback.png b/media/vendor/mediaelement/css/skipback.png deleted file mode 100644 index 04756f966d760..0000000000000 Binary files a/media/vendor/mediaelement/css/skipback.png and /dev/null differ diff --git a/media/vendor/mediaelement/js/flashmediaelement-cdn.swf b/media/vendor/mediaelement/js/flashmediaelement-cdn.swf deleted file mode 100644 index a40d7c988b375..0000000000000 Binary files a/media/vendor/mediaelement/js/flashmediaelement-cdn.swf and /dev/null differ diff --git a/media/vendor/mediaelement/js/flashmediaelement-debug.swf b/media/vendor/mediaelement/js/flashmediaelement-debug.swf deleted file mode 100644 index 74e77a3d59d8e..0000000000000 Binary files a/media/vendor/mediaelement/js/flashmediaelement-debug.swf and /dev/null differ diff --git a/media/vendor/mediaelement/js/flashmediaelement.swf b/media/vendor/mediaelement/js/flashmediaelement.swf deleted file mode 100644 index ff25d19a50743..0000000000000 Binary files a/media/vendor/mediaelement/js/flashmediaelement.swf and /dev/null differ diff --git a/media/vendor/mediaelement/js/mediaelement-and-player.js b/media/vendor/mediaelement/js/mediaelement-and-player.js index bd0416327532e..958b971c7b3a8 100644 --- a/media/vendor/mediaelement/js/mediaelement-and-player.js +++ b/media/vendor/mediaelement/js/mediaelement-and-player.js @@ -1,6655 +1,9292 @@ /*! - * * MediaElement.js - * HTML5