Last active
December 5, 2017 18:25
-
-
Save jbrechtel/614d11ac3fc497d9d04bd3c374ab5746 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* utilities */ | |
.pull-left { | |
float: left; | |
} | |
.sr-only { | |
position: absolute !important; | |
clip: rect(1px, 1px, 1px, 1px); | |
padding: 0 !important; | |
border: 0 !important; | |
height: 1px !important; | |
width: 1px !important; | |
overflow: hidden; | |
} | |
.hide { | |
display: none; | |
} | |
.show-inline { | |
display: inline-block; | |
} | |
/* containers */ | |
.px-video-img-captions-container * { | |
box-sizing: border-box; | |
} | |
.px-video-img-captions-container { | |
position: relative; | |
} | |
/* progress indicator */ | |
.px-video-progress { | |
width: 100%; | |
height: 10px; | |
} | |
.px-video-progress[value] { | |
/* Reset the default appearance */ | |
-webkit-appearance: none; | |
border: none; | |
} | |
.px-video-progress[value]::-webkit-progress-bar { | |
background-color: #E6E6E6; | |
} | |
.px-video-progress[value]::-webkit-progress-value { | |
background-color: #009CDF; | |
} | |
/* time */ | |
.px-video-time { | |
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; | |
float: right; | |
margin-top: 2px; | |
font-size: 14px; | |
} | |
/* caption area */ | |
.px-video-captions { | |
position: absolute; | |
top: 0; | |
left: 0; | |
width: 100%; | |
padding: .5em; | |
min-height: 2.5em; | |
background-color: #000; | |
color: #fff; | |
font-size: 1.1em; | |
text-align: center; | |
opacity: 0.75; | |
} | |
/* buttons */ | |
.px-video-controls button { | |
border: 1px #fff solid; | |
background: transparent; | |
padding: 0; | |
margin: 0 5px; | |
width: 25px; | |
height: 20px; | |
overflow: hidden; | |
background: no-repeat require('../node_modules/accessible-html5-video-player/../images/px-video-sprite.png'); | |
} | |
.px-video-controls button:focus { | |
border: 1px #999 dotted; | |
outline: none; | |
} | |
.px-video-controls button { | |
cursor: pointer; | |
} | |
/* restart button */ | |
.px-video-controls button.px-video-restart { | |
background-position: -6px -333px; | |
margin-left: 0; | |
} | |
.px-video-controls button.px-video-restart:hover, | |
.px-video-controls button.px-video-restart:focus { | |
background-position: -6px -297px; | |
} | |
/* rewind button */ | |
.px-video-controls button.px-video-rewind { | |
background-position: -6px -189px; | |
} | |
.px-video-controls button.px-video-rewind:hover, | |
.px-video-controls button.px-video-rewind:focus { | |
background-position: -6px -153px; | |
} | |
/* play button */ | |
.px-video-controls button.px-video-play { | |
background-position: -6px -45px; | |
} | |
.px-video-controls button.px-video-play:hover, | |
.px-video-controls button.px-video-play:focus { | |
background-position: -6px -9px; | |
} | |
/* pause button */ | |
.px-video-controls button.px-video-pause { | |
background-position: -6px -117px; | |
} | |
.px-video-controls button.px-video-pause:hover, | |
.px-video-controls button.px-video-pause:focus { | |
background-position: -6px -81px; | |
} | |
/* forward button */ | |
.px-video-controls button.px-video-forward { | |
background-position: -6px -261px; | |
} | |
.px-video-controls button.px-video-forward:hover, | |
.px-video-controls button.px-video-forward:focus { | |
background-position: -6px -225px; | |
} | |
.px-video-fullscreen-btn-container label { | |
display: inline-block; | |
width: 25px; | |
height: 20px; | |
margin-left: 10px; | |
background: no-repeat require('../node_modules/accessible-html5-video-player/../images/px-video-sprite.png'); | |
background-position: -6px -907px; | |
} | |
.px-video-fullscreen-btn-container input[type="checkbox"]:focus+label { | |
outline: 1px #999 dotted; | |
background-position: -6px -943px; | |
} | |
.px-video-fullscreen-btn-container input[type="checkbox"]:hover+label { | |
background-position: -6px -943px; | |
cursor: pointer; | |
} | |
.px-video-fullscreen-btn-container input[type="checkbox"]:focus+label { | |
outline: 1px #999 dotted; | |
background-position: -6px -943px; | |
} | |
.px-video-fullscreen-btn-container input[type="checkbox"]:checked+label { | |
background-position: -6px -979px; | |
} | |
.px-video-fullscreen-btn-container input[type="checkbox"]:checked:hover+label { | |
background-position: -6px -1015px; | |
} | |
/* captions button */ | |
.px-video-captions-btn-container label { | |
display: inline-block; | |
width: 25px; | |
height: 20px; | |
margin-left: 10px; | |
background: no-repeat require('../node_modules/accessible-html5-video-player/../images/px-video-sprite.png'); | |
background-position: -6px -835px; | |
} | |
.px-video-captions-btn-container input[type="checkbox"]:focus+label { | |
outline: 1px #999 dotted; | |
background-position: -6px -799px; | |
} | |
.px-video-captions-btn-container input[type="checkbox"]:hover+label { | |
background-position: -6px -799px; | |
cursor: pointer; | |
} | |
.px-video-captions-btn-container input[type="checkbox"]:focus+label { | |
outline: 1px #999 dotted; | |
background-position: -6px -799px; | |
} | |
.px-video-captions-btn-container input[type="checkbox"]:checked+label { | |
background-position: -6px -871px; | |
} | |
/* mute button */ | |
.px-video-mute-btn-container label { | |
display: inline-block; | |
width: 25px; | |
height: 20px; | |
margin-left: 240px; | |
margin-top: 2px; | |
background: no-repeat require('../node_modules/accessible-html5-video-player/../images/px-video-sprite.png'); | |
background-position: -6px -476px; | |
} | |
.px-video-mute-btn-container input[type="checkbox"]:focus+label { | |
outline: 1px #999 dotted; | |
background-position: -6px -440px; | |
} | |
.px-video-mute-btn-container input[type="checkbox"]:hover+label { | |
background-position: -6px -440px; | |
cursor: pointer; | |
} | |
.px-video-mute-btn-container input[type="checkbox"]:focus+label { | |
outline: 1px #999 dotted; | |
background-position: -6px -440px; | |
} | |
/* checked state of mute button */ | |
.px-video-mute-btn-container input[type="checkbox"]:checked+label { | |
background-position: -6px -692px; | |
} | |
.px-video-mute-btn-container input[type="checkbox"]:checked:hover+label, | |
.px-video-mute-btn-container input[type="checkbox"]:checked:focus+label { | |
background-position: -6px -656px; | |
} | |
/* volume range input */ | |
.px-video-controls input[type='range'] { | |
-webkit-appearance: none; | |
height: 6px; | |
width: 100px; | |
margin-top: 8px; | |
background-color: #E6E6E6; | |
outline:none; | |
} | |
.px-video-controls input[type='range']:focus::-webkit-slider-thumb { | |
outline: 1px #999 dotted; | |
} | |
.px-video-controls input[type='range']::-moz-range-track { | |
-moz-appearance: none; | |
height: 6px; | |
background-color: #E6E6E6; | |
border: none; | |
} | |
.px-video-controls input[type='range']::-webkit-slider-thumb { | |
-webkit-appearance: none !important; | |
height: 10px; | |
width: 6px; | |
background-color: #666; | |
} | |
.px-video-controls input[type='range']::-moz-range-thumb { | |
height: 12px; | |
width: 8px; | |
background-color: #666; | |
} | |
/* fixing display for IE10+ */ | |
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { | |
.px-video-controls input[type='range'] { | |
position: relative; | |
padding: 0; | |
height: 8px; | |
top: -3px; | |
} | |
.px-video-time { | |
margin-top: 4px; | |
} | |
.px-video-captions { | |
padding: 8px; | |
min-height: 36px; | |
} | |
} | |
.px-video-container.fullscreen { | |
position: fixed; | |
top: 0; | |
bottom: 0; | |
left: 0; | |
right: 0; | |
-webkit-cursor-visibility: auto-hide; | |
} | |
/* Fullscreen styles */ | |
/* style applied through js */ | |
.px-video-controls.js-fullscreen-controls { | |
position: absolute; | |
bottom: 0; | |
width: 100%; | |
z-index: 940; | |
background: white; | |
} | |
.px-video-captions.js-fullscreen-captions { | |
min-height: 3.5em; | |
font-size: 2.5em; | |
padding: 1em; | |
} | |
.px-timetip { | |
padding: 5px 10px; | |
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; | |
font-size: 14px; | |
background: rgba(0,0,0,0.83); | |
border-radius: 3px; | |
color: #fff; | |
width: auto; | |
} | |
.px-timetip:after { | |
top: 100%; | |
left: 50%; | |
border: solid transparent; | |
content: " "; | |
height: 0; | |
width: 0; | |
position: absolute; | |
pointer-events: none; | |
border-color: rgba(43, 43, 43, 0); | |
border-top-color: #2b2b2b; | |
border-width: 10px; | |
margin-left: -10px; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment