.svg .mejs__controls .mejs__playlist-plugin-button button, .no-svg .mejs__controls .mejs__playlist-plugin-button button { background-image: url("controls-playlist.png"); } .mejs__controls .mejs__show-playlist button, .mejs__controls .mejs__hide-playlist button, .mejs__controls .mejs__prevtrack button, .mejs__controls .mejs__nexttrack button, .mejs__controls .mejs__shuffle-on button, .mejs__controls .mejs__shuffle-off button { background: transparent url("controls-playlist.png") no-repeat; } .mejs__controls .mejs__show-playlist button { /* Show/Hide Playlist */ background-position: -16px -16px; } .mejs__controls .mejs__hide-playlist button { background-position: -16px 0; } .mejs__controls .mejs__prevtrack button { /* Previous Track */ background-position: 0 -16px; } .mejs__controls .mejs__shuffle-on button { /* Shuffle Tracks on/off */ background-position: -32px 0; } .mejs__controls .mejs__shuffle-off button { background-position: -32px -16px; } .mejs__container { display: inline-block; } .mejs__container .mejs__overlay-loading { background-color: transparent; width: 220px; margin: -40px 0 0 -110px; } .mejs__container .mejs__overlay-loading span { width: 220px; background-size: contain; } .mejs__container .mejs__poster { background-size: cover; } .mejs__container .mejs__playlist { position: absolute; left: 0; overflow-y: auto; background-size: 100%; width: 100%; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-size: cover; background-position: 50% 50%; } .mejs__container .mejs__playlist ul { margin: 0 0 30px 0; padding: 0; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .mejs__container .mejs__playlist ul li { margin: 0; padding: 0; height: 44px; cursor: pointer; } .mejs__container .mejs__playlist ul li:before { content: " "; display: block; height: 44px; border-top: 1px solid white; border-bottom: 1px solid black; background-color: rgba(50, 50, 50, 0.7); background-image: url(mep-playlist-icons.png); background-position: right 10px top 100px; background-repeat: no-repeat; } .mejs__container .mejs__playlist ul li:hover:before { background-color: rgba(44, 124, 145, 0.8); background-position: right 10px top -28px; } .mejs__container .mejs__playlist ul li span { position: relative; top: -44px; display: block; padding: 8px 50px 10px 10px; height: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: white; font-size: 14px; line-height: 26px; } .mejs__container.mep-playing .mejs__playlist ul li.current:before { background-position: right 10px top -328px; } .mejs__container.mep-playing .mejs__playlist ul li.current:hover:before { background-position: right 10px top -228px; } .mejs__container.mep-paused .mejs__playlist ul li.current:before { background-position: right 10px top -128px; } /* "slider" playlist */ .mejs__container.mep-slider .mejs__playlist { overflow: hidden; } .mejs__container.mep-slider .mejs__playlist ul { width: 100%; height: 100%; overflow: hidden; white-space: nowrap; margin-bottom: 0 !important; background: radial-gradient(circle, grey, black); } .mejs__container.mep-slider .mejs__playlist ul li { height: 100%; display: inline-block; width: 100%; will-change: transform; transition: -webkit-transform 0.5s ease-in-out; transition: transform 0.5s ease-in-out; background-size: 100%; background-repeat: no-repeat; } .mejs__container.mep-slider .mejs__playlist ul li span { top: 100%; margin-top: -7px; position: absolute; height: 44px; margin-bottom: -44px; display: inline-block; } .mejs__container.mep-slider .mejs__playlist ul li:before { position: absolute; border: none; background-color: transparent; background-image: url(bigplay.png); background-position: right 10px top 0px; top: 50%; left: 50%; width: 100px; height: 100px; margin: -50px 0 0 -50px; opacity: 1; } .mejs__container.mep-slider .mejs__playlist ul li:hover:before { background-position: right 10px top -100px; } .mejs__container.mep-slider.mep-playing .mejs__playlist ul li.current:before { /* should show pause symbol */ background-position: right 10px top -200px; } .mejs__container.mep-slider.mep-playing .mejs__playlist ul li.current:hover:before { /* should show hovered pause symbol */ background-position: right 10px top -300px; } .mejs__container.mep-slider.mep-paused .mejs__playlist ul li.current:before { /* should show play symbol */ background-position: right 10px top -0px; } .mejs__container.mep-slider.mep-paused .mejs__playlist ul li.current:hover:before { /* should show hovered play symbol */ background-position: right 10px top -100px; } .mejs__container.mep-slider .mejs__playlist > a { position: absolute; top: 50%; display: inline-block; height: 100px; width: 100px; opacity: 0.9; cursor: pointer; background: transparent url(bigplay.png) left -400px no-repeat; margin-top: -75px; } .mejs__container.mep-slider .mejs__playlist > a.mep-prev { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .mejs__container.mep-slider .mejs__playlist > a.mep-prev:hover { background-position: left -500px; } .mejs__container.mep-slider .mejs__playlist > a.mep-next { right: 0; background-position: left -600px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .mejs__container.mep-slider .mejs__playlist > a.mep-next:hover { background-position: left -700px; } body.manual-fullscreen { overflow: hidden; } body.manual-fullscreen .mejs__container.manual-fullscreen { position: fixed; top: 0px; bottom: 0px; left: 0px; right: 0px; width: 100%; height: 100%; z-index: 100; } /*# sourceMappingURL=mediaelement-playlist-plugin.css.map */ .mejs__container .mejs__playlist ul li:before { background-color: rgba(50, 50, 50, 0.95); } .mep-playlist.audio_right .mejs__playlist { width: 420px !important; left: 400px; background-image: none !important; } .mep-playlist.audio_bottom .mejs__playlist { top: 220px; position: relative; background-image: none !important; } #player_overlay { position: absolute; cursor: pointer; background-color: rgba(255, 255, 255, 0.8); } #player_overlay.closed { background-color: rgba(255, 255, 255, 0); } #player_overlay.closed img { display: none; } #big_play { width: 80px; position: absolute; left: 50%; top: 50%; margin: -40px 0 0 -40px; /*transform: translate(-50%,-50%);*/ } .audio_right .mejs__playlist.mejs__layer { left: -420px !important; direction: rtl; } .audio_right { margin-left: 420px !important; } .audio_right .mejs { direction: ltr; list-style: none; } .mep-playlist.video_bottom .mejs__playlist { top: 220px; position: relative; background-image: none !important; } .mep-playlist.video_bottom .mejs__playlist.mejs__layer, .mep-playlist.audio_bottom .mejs__playlist.mejs__layer { height: inherit !important; }