/* thx to http://icomoon.io */ @import "_icons"; @font-face { font-family: 'jme'; src: url('jme.eot'); } @font-face { font-family: 'jme'; src: url(data:application/font-woff;charset=utf-8;base64,d09GRk9UVE8AAA5sAAoAAAAADiQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABDRkYgAAAA9AAACq0AAAqt29xKpU9TLzIAAAukAAAAYAAAAGAIIvzPY21hcAAADAQAAABMAAAATBpVzHBnYXNwAAAMUAAAAAgAAAAIAAAAEGhlYWQAAAxYAAAANgAAADb/1ko1aGhlYQAADJAAAAAkAAAAJAQCAh9obXR4AAAMtAAAAHgAAAB4NSAB521heHAAAA0sAAAABgAAAAYAHlAAbmFtZQAADTQAAAEVAAABFQcRlmFwb3N0AAAOTAAAACAAAAAgAAMAAAEABAQAAQEBBGptZQABAgABADr4HAL4GwP4GAQeCgAZU/+Lix4KABlT/4uLDAeLa/i0+HQFHQAAAQAPHQAAAQURHQAAAAkdAAAKpBIAHwEBBAcJCw4TGB0iJywxNjtARUpPVFleY2htcnd8gYaLkGptZWptZXUwdTF1MjB1RTYwMHVFNjAxdUU2MDJ1RTYwM3VFNjA0dUU2MDV1RTYwNnVFNjA3dUU2MDh1RTYwOXVFNjBBdUU2MEJ1RTYwQ3VFNjBEdUU2MEV1RTYwRnVFNjEwdUU2MTF1RTYxMnVFNjEzdUU2MTR1RTYxNXVFNjE2dUU2MTd1RTYxOHVFNjE5AAACAYkAHAAeAgABAAQABwAKAA0BJAGCAZ8BuwHiAgoCngLwA1EDvgPMA+oEsAU6BZEFuQYFBoAHcwe1B/sIaQikCMgJJQlf/JQO/JQO/JQO+5QO+IL4ABX7f7sFiYuJi4mLCPt/WwWDioWEi4MIi/uyBYuDkYWTiQj3f1wFjYqNi42MCPd/ugWTjZGRi5MIi/eyBYuThZKDjAj7o/twFXtncnlpi1KLZbqLz4vQsbnEi6yLpXqbaYyIi4iKiIqIiYiIighvfwWFiISOiJGHlIOVfot2i3xyi2eLZ5pyoIuai5KajZGNj42NjoyOjY+LjokIp38FjoqNiYyIjYeLiImICPd/ixV6Z3J5aYtTi2W6i8+L0LG5w4uti6R6m2mNiIuIioiJiImIiIoIcH8FhIiEjoiRh5SDlX6Ldot9cotni2eZcqCLmouSmo6RjI+NjY+Mjo2Oi4+JCKZ/BY6KjomMiIyHi4iKiAgO+En4KRVduUuoRIv7AosuRmYqCMd0BabU0r/di8CLu3auaAhDQ/dUi4v3VEBABftJ/AkVVotboGiuCNPT+1SLi/tU1tYFuV3LbtKL9wKL6NCw7AhPogVwQkRXOYsIDvgU+DQVi/wUS4uL90T7NPs0i/f09zT7NIv3RAUO9xSrFYv4FMuLi/tE9zT3NIv79Ps09zSL+0QFDvh1+FUVi/tLRdI2NmG14OBE0QVF+7sVNzbRRftLi4v3S9FF4N8FDvd491gVi/tLRdE2N2G13+BF0QX4SPdnFTc20UX7S4uL90vRReDfBQ74lPdEFYvrQpcFiJSHlIeUCLbHR89PYAWCj4KPgo4If9Qri39CBYKIgoeChwhPtkdHtk8Fh4KHgoiCCEJ/iyvVfwWOgo6Cj4MIYE7PR8i2BZOHlIiUiAiXQeuLl9UFlI6UjpOPCMhgz89gyAWPk46UjpQI1ZcF+5R7FWiLbqiLrouuqKiui66LqG6LaItobm5oiwgOi/h0FfcUi4v7FPsUiwX3VOsV99SLi0v71IsF+1QrFfcUi4v7FPsUiwX3VOsV99SLi0v71IsF+1QrFfcUi4v7FPsUiwX3VOsV99SLi0v71IsFDveU+HQV+yGL+wf7B4v7IYv7IfcH+wf3IYv3IYv3B/cHi/chi/ch+wf3B/shiwiL/GQV+weLLuiL9weL9wfo6PcHi/cHi+gui/sHi/sHLi77B4sIS/fUFfdU+wT7VPsEBQ73lPh0Ffshi/sH+weL+yGL+yH3B/sH9yGL9yGL9wf3B4v3IYv3IfsH9wf7IYsIi/xkFfsHiy7oi/cHi/cH6Oj3B4v3B4voLov7B4v7By4u+weLCCv3xBXLi4v7VEuLBfcU91QVy4uL+1RLiwUOyfhdFfgY+338GPt9BQ6i+F0V91aLi/xm+1aLBfek+GYV91aLi/xm+1aLBQ6r+FGeFYWLhY2GkIKUi5uUlLe3o8WLyYvJc8Vft4KUi5uUlJSUm4uUgsBWqEWLQItAbkVWVgiGhoWJhYsINrgVhYuEjoePgZWLmpWUzM2L9UrNgZSLmpWVlJSai5WCtGKhVYtRi1F1VWJihoeFiIWLCDa4FYSLhY6HkIGUi5qVlLO0i81jtIGUi5qVlJSVmouUgcdQiytPUIeGhYiFiwhB9+AVmJiVhot5CIv8MgWLeYGHfpcI+w33DTuLi/dU24v3DfcNBQ73/MsVhYuEjoePgZWLmpWUzM2L9UrNgZSLmpWVlJSai5WCtGKhVYtRi1F1VWJihoeFiIWLCDa4FYSLhY6HkIGUi5qVlLO0i81jtIGUi5qVlJSVmouUgcdQiytPUIeGhYiFiwhB9+AVmJiVhot5CIv8MgWLeYGHfpcI+w33DTuLi/dU24v3DfcNBQ73p/cBFYSLhY6HkIGUi5qVlLO0i81jtIGUi5qVlJSVmouUgcdQiytPUIeGhYiFiwhB9+AVmJiVhot5CIv8MgWLeYGHfpcI+w33DTuLi/dU24v3DfcNBQ73XfhNFZiYlYaLeQiL/DIFi3mBh36XCPsN9w07i4v3VNuL9w33DQUO9134TRWYmJWGi3kIi/wyBYt5gYd+lwj7DfcNO4uL91Tbi/cN9w0F96v7oxWLYWGLVcFVVWGLi7XBwVXBi7W1i8FVwcG1i4thVVUFDvhE9xQVdIt3gnx8CPtr9gWMj4uQi4+Lj4uQio8I92v2BZp8n4Kii7eLr6+Lt4u3Z69fi1+LZ2eLX4uHi4aMhwj7ayAFfJp3lHSLX4tnZ4tfi1+vZ7eLoouflJqaCPdrIAWKh4uGi4eLX69nt4u3i6+vi7eLt2evX4sIDviU93QViqyErX6pfap4pnOic6JvnW2XbJdqkWuKa4pqhG5+bX5xeXR0dXN6cH9ugG2Fa4xsCIxskWuYb5hunXGhdqF2pnqngKiAqoWpjKmMqZGnl6eYpJyfoaCgm6WWppGckJ2NnAiMi4uLjIudi5mai5yLjIuMi4wIi4sFWDYVf3B6c3d3dnhye3CBcYBuhm+Mb4xvkXGWcZd0m3ifeJ98o4GlgaSGp4ymjKaRppakCJajmqKfnZ6eopmklaOUppCliqWKpYajgKKAoXydeZx4mXWUc5R0kHGKcgiLiwWLiouKi4qLe5d9nIqHeYZ6hHsIDvhU+HQV/FSLi/yU+JSLi/hUS8sF+1RLFcuLi/sUS4uL9xQF91T8FBX8FIuL+BSri4v7NPe0i4v3NLCLpnCL+/kFDvh/+CQVQ5U7kTiLOIs7hUOBflWDUItMi0yTUJhV04Hbhd6L3ovbkdOVmMGTxovKi8qDxn7BCPu/+6QVi/dU9zQr+zQrBQ73VMsV99SLi0v71IsFi/eUFffUi4tL+9SLBYv3lBX31IuLS/vUiwUr6xWL+xRri4vra4uLqwWr+5sVi3LLi4trK4uL1Mupi6RLi4ur64uLQgWL+wsVi/s0K4uLq8uLi6tLi4ury4uLq0uLi6sFDov4dBWL/JT4lIuL+JT8lIsF+HT8dBX8VIuL+FT4VIuL/FQFK/gEFfs0+zQr60tL9zT7NPd093RLywUOi/h0FYv8lPiUi4v4lPyUiwX4dPx0FfxUi4v4VPhUi4v8VAUO9930FSL1i/chy4uL+wfiNQX7C/fdFfshi/sH+weL+yGL+yH3B/sH9yGL9yGL9wf3B4v3IYv3IfsH9wf7IYsIi/xUFSGLNeGL9Yv14eH1i/WL4TWLIYshNTUhiwgOy/d0FfcU9xRLi/sU+xT3FPsUy4sF91T3lBVLi/cU+xT7FPsUy4v3FPcUBfuE91QVO/wUu4vb+BQFDviUFPiUFYsMCgAAAAADAgABkAAFAAABTAFmAAAARwFMAWYAAAD1ABkAhAAAAAAAAAAAAAAAAAAAAAEQAAAAAAAAAAAAAAAAAAAAAEAAAOYZAeD/4P/gAeAAIAAAAAEAAAAAAAAAAAAAACAAAAAAAAIAAAADAAAAFAADAAEAAAAUAAQAOAAAAAoACAACAAIAAQAg5hn//f//AAAAAAAg5gD//f//AAH/4xoEAAMAAQAAAAAAAAAAAAAAAQAB//8ADwABAAAAAQAAAnhtIV8PPPUACwIAAAAAAM9LhLwAAAAAz0uEvAAA/+ACIAHgAAAACAACAAAAAAAAAAEAAAHg/+AAAAIgAAAAAAIgAAEAAAAAAAAAAAAAAAAAAAAeAAAAAAAAAAAAAAAAAQAAAAIAAAQCAAAAAgAAoAIAAIACAAAfAgAAHwIAAAACAAAAAgAAAAIAAAACAAA+AgAAFwIgAAACAAAAAgAAAAIAAAACAAAAAgAAAAIAABACAAAAAgAAAAIAACACAAAAAgAAAAIAAAACAAAAAABQAAAeAAAAAAAOAK4AAQAAAAAAAQAGAAAAAQAAAAAAAgAOACsAAQAAAAAAAwAGABwAAQAAAAAABAAGADkAAQAAAAAABQAWAAYAAQAAAAAABgADACIAAQAAAAAACgAoAD8AAwABBAkAAQAGAAAAAwABBAkAAgAOACsAAwABBAkAAwAGABwAAwABBAkABAAGADkAAwABBAkABQAWAAYAAwABBAkABgAGACUAAwABBAkACgAoAD8AagBtAGUAVgBlAHIAcwBpAG8AbgAgADEALgAwAGoAbQBlam1lAGoAbQBlAFIAZQBnAHUAbABhAHIAagBtAGUARwBlAG4AZQByAGEAdABlAGQAIABiAHkAIABJAGMAbwBNAG8AbwBuAAAAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=) format('woff'), url('jme.ttf') format('truetype'); font-weight: normal; font-style: normal; } %clearfix { zoom: 1; &:before, &:after { display: table; clear: both; content: ' '; } } $browser-context: 16; // Default @function em($pixels, $context: $browser-context) { @return #{$pixels/$context}em } @-webkit-keyframes jmespin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes jmespin { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .jme-controlbar { display: table; width: 100%; } .jme-cb-box { display: table-row; > div { display: table-cell; padding: em(3.5); vertical-align: middle; } .progress-container { width: 100%; } .mute-container { padding-right: em(1); } .volume-container { padding-left: em(1); } } [data-playersizes~="xs"] > .jme-controlbar { padding-top: em(4); .time-slider { position: absolute; top: em(-2); left: 0; right: 0; } .progress-container { width: auto; &:before { content: "/"; } } .duration-container { width: 100%; } } [data-playersize="xx-small"] > .jme-controlbar { .progress-container:before { content: ""; } .duration-display, .volume-container { display: none; } } .mediaplayer { position: relative; display: block; width: 512px; font-size: 16px; video { display: block; width: 100%; height: auto; } } .audioplayer .media-controls .fullscreen-container { display: none; } .mediaplayer { button { overflow: visible; -webkit-appearance: none; background: none; padding: 0; border: 0; font-size: inherit; outline: none; } button::-moz-focus-inner { padding: 0; border: 0; } > .jme-media-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; font-size: 400%; color: #f6f6f6; text-align: center; background: url(../styles/transparent.png)\9; &:before { content: '\0020'; position: absolute; display: block; width: 1em; height: 1em; top: 50%; left: 50%; margin: -0.5em 0 0 -0.5em; background: url(../styles/transparent.png)\9; text-shadow: 0 0 0.5em rgba(0, 0, 0, 0.5); } } &[data-playersize="x-large"] > .jme-media-overlay { font-size: 550%; } &[data-playersize="large"] > .jme-media-overlay { font-size: 450%; } &[data-playersize="small"] > .jme-media-overlay { font-size: 350%; } &[data-playersize="x-small"] > .jme-media-overlay { font-size: 300%; } &[data-playersize="xx-small"] > .jme-media-overlay { font-size: 240%; } &[data-state="idle"] { cursor: pointer; } &.initial-state { > .jme-media-overlay { @extend %icon-play-circle; background-position: 1px 1px; } &.has-ytposter.no-backgroundsize > .jme-media-overlay:before { content: ""; background-position: 2px 2px; } } &.ended-state { cursor: pointer; > .jme-media-overlay { @extend %icon-loop; background-position: 3px 3px; } } //remove as soon as possible: https://code.google.com/p/gdata-issues/issues/detail?id=5415 &.yt-video.has-yt-bug.initial-state { > .jme-media-overlay, > .ws-poster, > .jme-controlbar { pointer-events: none; } .fullscreen-container, .playlist-container, .subtitle-container, .mediaconfig-container { pointer-events: auto; } } &[data-state="waiting"] { cursor: default; > .jme-media-overlay { @extend %icon-spinner; background-position: 4px 4px; &:before { -webkit-animation-name: jmespin; -webkit-animation-iteration-count: infinite; -webkit-animation-duration: 1100ms; -webkit-animation-timing-function: linear; animation-name: jmespin; animation-iteration-count: infinite; animation-duration: 1100ms; animation-timing-function: linear; background-position: 5px 5px; } } } &[data-state="playing"][data-useractivity="false"] .jme-controlbar { opacity: 0; visibility: hidden; } .cue-display span.cue-wrapper { transition: bottom 300ms; bottom: 0; } &[data-state="playing"][data-useractivity="false"] .cue-display span.cue-wrapper { bottom: -35px; } .ws-poster { display: none; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #000 no-repeat center; background-size: contain; } &.initial-state .ws-poster, &.ended-state .ws-poster { display: block; } &.no-poster .ws-poster, &.no-backgroundsize div.ws-poster { display: none; } > .jme-controlbar { position: absolute; left: 0; right: 0; bottom: 0; width: auto; cursor: default; outline: none; background: #333; background: rgba(0, 0, 0, 0.6); color: #e1e1e1; transition: all 300ms; button { display: inline-block; color: inherit; width: em(24); height: em(24); cursor: pointer; text-align: center; transition: color 400ms; &:hover, &:focus { color: #fefefe; } &:active { color: #fff; } &[disabled] { color: #ccc; cursor: default; cursor: not-allowed; } } } .currenttime-display, .duration-display, .time-select { font-size: 81.3%; font-family: sans-serif; margin-top: 0.03em; } button.play-pause { @extend %icon-play; &.state-playing { @extend %icon-pause; } } .mute-unmute { @extend %icon-volume-high; } &[data-volume="medium"] .mute-unmute { @extend %icon-volume-medium; } &[data-volume="low"] .mute-unmute { @extend %icon-volume-low; } &[data-volume="no"] .mute-unmute { @extend %icon-volume-mute; } .state-unmute.mute-unmute { @extend %icon-volume-mute2; } .playlist-container { display: none; } .playlist-box, .playlist-button-container, &.has-playlist .playlist-container { display: table-cell; } .playlist-prev { @extend %icon-previous; } .playlist-next { @extend %icon-next; } .no-volume-api { .volume-container, .mute-container { padding: 0; } .mute-unmute, .volume-slider { display: none; } } .chapters-container { display: none; } &.has-chapter-tracks .chapters-container { display: table-cell; } .captions { @extend %icon-cc; } .chapters { @extend %icon-olist; } .captions[role="checkbox"] { color: #999; &[aria-checked="true"] { color: inherit; } } &[data-tracks="0"] .subtitle-container { display: none; } &[data-tracks="1"] { .captions[aria-haspopup], .subtitle-menu { display: none; } } &[data-tracks="many"] .captions[role="checkbox"] { display: none; } .mediamenu-wrapper { position: relative; zoom: 1; } .mediamenu { position: absolute; bottom: em(28); margin-bottom: 3px; width: 400px; right: em(-10); visibility: hidden; h5 { font-size: 100%; margin: em(5) 0; padding: 0; } ul, li {margin: 0; padding: 0;list-style: none;} li > ul { margin-left: 10px; } button { position: relative; display: block; zoom: 1; width: 100%; text-align: left; height: auto; padding: 2px; font-size: 81.3%; } > div { position: relative; zoom: 1; visibility: hidden; float: right; padding: em(5); background: #333; background: rgba(0, 0, 0, 0.6); opacity: 0; transform: translateY(-3%); transition: all 200ms; > .media-submenu { margin: em(5) 0; padding: em(5) 0; border-top: em(1) solid #eee; border-top: em(1) solid rgba(255, 255, 255, 0.4); &:first-child { margin-top: 0; border-top: none; } } iframe { visibility: inherit !important; } } &.visible-menu > div { visibility: visible; opacity: 1; transform: translateY(0); } } .subtitle-menu { button { @extend %icon-checkbox-unchecked; &:before { display: inline-block; vertical-align: middle; padding: 0 5px 0 0; } &[aria-checked="true"] { @extend %icon-checkbox-checked; } } } .mediaconfig-container { display: none; } &.has-config-menu .mediaconfig-container { display: table-cell; } .mediaconfigmenu { @extend %icon-config; } .fullscreen { @extend %icon-expand; &.state-exitfullscreen { @extend %icon-contract; } } .buffer-progress { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; } .buffer-progress-indicator { cursor: pointer; height: 100%; background: #bbb; background: rgba(255, 255, 255, 0.2); } .media-range { position: relative; zoom: 1; height: em(7); border: 1px solid #999; border-color: rgba(255, 255, 255, 0.4); outline: none; } .ws-range-progress, .ws-range-track, .ws-range-thumb, .time-select { position: absolute; display: block; } .time-select { display: inline-block; overflow: hidden; text-align: center; visibility: hidden; opacity: 0; transition: 400ms opacity, 400ms visibility; background: #333; background: rgba(0, 0, 0, 0.6); color: #eee; bottom: em(20); margin: 0 0 4px 0; padding: em(4) em(2) em(2); min-width: 2.8em; &.show-time-select { opacity: 1; visibility: visible; } } /* .mediachapter-bar { position: absolute; top: 0; left: 0; right: 0; bottom: 0; padding: 0; margin: 0; list-style: none; ul, li { position: relative; padding: 0; margin: 0; height: 100%; float: left; list-style: none; } ul { width: 100%; } li { background: rgba(255, 255, 255, 0.2); } span { display: none; } } */ .ws-range-track { top: 0; left: 0; bottom: 0; } .ws-range-progress { -moz-box-sizing: content-box; box-sizing: content-box; cursor: pointer; background: #e1e1e1; background: rgba(255, 255, 255, 0.3); left: 0; height: 100%; } .ws-range-thumb { cursor: pointer; width: em(9); height: em(9); background: #f1f1f1; background: rgba(255, 255, 255, 0.9); } [aria-disabled="true"] .ws-range-thumb { cursor: default; } .ws-focus .ws-range-thumb { background: #fff; } .time-slider { .ws-range-thumb { width: em(12); } } .volume-slider { width: 60px; } &[data-playersize="medium"] .volume-slider { width: 80px; } &[data-playersize="large"] .volume-slider { width: 110px; } &[data-playersize="x-large"] .volume-slider { width: 130px; } &.state-muted .volume-slider { .ws-range-progress { width: 0 !important; } .ws-range-thumb { left: 0 !important; } } .ws-a11y-focus { outline: 1px dotted #eee; outline: 1px dotted rgba(255, 255, 255, 0.8); &:hover { outline: none; } } } .has-media-fullscreen { overflow: hidden; } .player-fullscreen { position: fixed !important; z-index: 999999; background: #000; } .mediaplayer[data-useractivity="false"][data-state="playing"].player-fullscreen { &, .jme-media-overlay, .cue-display { cursor: none !important; } } .media-fullscreen, .player-fullscreen .polyfill-mediaelement, .player-fullscreen { top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; height: 100% !important; max-width: none !important; padding: 0 !important; margin: 0 !important; } .media-fullscreen { position: relative; }