619 lines
11 KiB
Plaintext
619 lines
11 KiB
Plaintext
// ==========================================================================
|
|
// HTML5 Media Player
|
|
// ==========================================================================
|
|
|
|
// Variables
|
|
// -------------------------------
|
|
// Colors
|
|
@base-color: #2E3C44;
|
|
@green: #1ABC9C;
|
|
@red: #D44334;
|
|
@blue: #3498DB;
|
|
|
|
// Grays
|
|
@gray-dark: #343f4a;
|
|
@gray: #565d64;
|
|
@gray-light: #6f7e86;
|
|
@gray-lighter: #859093;
|
|
@gray-lightest: #cbd0d3;
|
|
@gray-light-mega: #dadfe2;
|
|
@off-white: #f9fafb;
|
|
|
|
// Controls
|
|
@control-color: @gray-lightest;
|
|
@control-color-active: @blue;
|
|
@control-spacing: 10px;
|
|
|
|
|
|
// BORDER-BOX ALL THE THINGS! (http://paulirish.com/2012/box-sizing-border-box-ftw/)
|
|
// -------------------------------
|
|
.player,
|
|
.player *,
|
|
.player *::after,
|
|
.player *::before {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
// Utility classes & mixins
|
|
// -------------------------------
|
|
.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;
|
|
}
|
|
// Contain floats: nicolasgallagher.com/micro-clearfix-hack/
|
|
.clearfix() {
|
|
zoom: 1;
|
|
&:before,
|
|
&:after { content: ""; display: table; }
|
|
&:after { clear: both; }
|
|
}
|
|
|
|
// Base
|
|
.player {
|
|
position: relative;
|
|
max-width: 100%;
|
|
overflow: hidden; // For the controls
|
|
background: #000;
|
|
|
|
// For video
|
|
&-video {
|
|
position: relative;
|
|
}
|
|
|
|
&:fullscreen {
|
|
height: 100%;
|
|
width: 100%;
|
|
|
|
.player-video {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 0;
|
|
right: 0;
|
|
transform: translateY(-50%);
|
|
}
|
|
.controls {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
|
|
.icon-exit-fullscreen {
|
|
display: block;
|
|
|
|
& + svg {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
video {
|
|
width: 100%;
|
|
height: auto;
|
|
vertical-align: middle;
|
|
}
|
|
svg {
|
|
width: 18px;
|
|
height: 18px;
|
|
}
|
|
.px-video-captions {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
padding: 20px;
|
|
min-height: 2.5em;
|
|
//background-color: #000;
|
|
color: #fff;
|
|
font-size: 24px;
|
|
text-shadow: 0 1px 1px rgba(0,0,0, .75);
|
|
text-align: center;
|
|
//opacity: 0.75;
|
|
|
|
-webkit-font-smoothing: antialiased;
|
|
font-weight: 500;
|
|
}
|
|
.controls {
|
|
.clearfix();
|
|
position: relative;
|
|
//position: absolute;
|
|
//bottom: 0;
|
|
//left: 0;
|
|
//right: 0;
|
|
padding: (@control-spacing * 2) @control-spacing @control-spacing;
|
|
//background: rgba(red(@gray-dark), green(@gray-dark), blue(@gray-dark), .9);
|
|
background: @gray-dark;
|
|
//transition: transform .3s ease;
|
|
line-height: 1;
|
|
|
|
button {
|
|
border: 0;
|
|
background: transparent;
|
|
overflow: hidden;
|
|
}
|
|
label,
|
|
button {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
margin: 0 2px;
|
|
padding: (@control-spacing / 2) @control-spacing;
|
|
color: @control-color;
|
|
transition: background .3s ease;
|
|
border-radius: 3px;
|
|
|
|
svg {
|
|
display: block;
|
|
fill: currentColor;
|
|
transition: fill .3s ease;
|
|
}
|
|
&:focus {
|
|
outline: 0;
|
|
}
|
|
&:hover {
|
|
background: @control-color-active;
|
|
}
|
|
&:hover svg,
|
|
&:focus svg {
|
|
fill: #fff;
|
|
}
|
|
}
|
|
.icon-exit-fullscreen {
|
|
display: none;
|
|
}
|
|
.px-video-time {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
margin-left: @control-spacing;
|
|
color: #fff;
|
|
font-weight: 600;
|
|
font-size: 14px;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
}
|
|
progress {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
width: 100%;
|
|
height: @control-spacing;
|
|
margin: 0;
|
|
vertical-align: top;
|
|
|
|
&[value] {
|
|
/* Reset the default appearance */
|
|
-webkit-appearance: none;
|
|
border: none;
|
|
background: @gray;
|
|
cursor: pointer;
|
|
|
|
&::-webkit-progress-bar {
|
|
background: @gray;
|
|
}
|
|
|
|
// The value
|
|
&::-webkit-progress-value {
|
|
background: @control-color-active;
|
|
}
|
|
&::-moz-progress-bar {
|
|
background: @control-color-active;
|
|
}
|
|
}
|
|
}
|
|
.play-controls {
|
|
float: left;
|
|
}
|
|
.sound-controls {
|
|
float: right;
|
|
}
|
|
/*&.playing .controls {
|
|
transform: translateY(100%);
|
|
}*/
|
|
|
|
.controls .px-video-pause,
|
|
&.playing .controls .px-video-play {
|
|
display: none;
|
|
}
|
|
&.playing .controls .px-video-pause {
|
|
display: inline-block;
|
|
}
|
|
|
|
/* volume range input */
|
|
input[type='range'] {
|
|
-webkit-appearance: none;
|
|
height: 6px;
|
|
width: 100px;
|
|
margin-right: @control-spacing;
|
|
background: @gray;
|
|
outline: 0;
|
|
border-radius: 10px;
|
|
|
|
&:focus::-webkit-slider-thumb {
|
|
//outline: 1px #999 dotted;
|
|
background: @control-color-active;
|
|
}
|
|
&::-moz-range-track {
|
|
-moz-appearance: none;
|
|
height: 6px;
|
|
background: @gray;
|
|
border: none;
|
|
border-radius: 10px;
|
|
}
|
|
&::-webkit-slider-thumb {
|
|
-webkit-appearance: none !important;
|
|
height: 12px;
|
|
width: 12px;
|
|
background: @control-color;
|
|
border-radius: 100%;
|
|
transition: background .3s ease;
|
|
}
|
|
&::-moz-range-thumb {
|
|
height: 12px;
|
|
width: 12px;
|
|
background: @control-color;
|
|
border-radius: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
/* containers */
|
|
|
|
/* progress indicator */
|
|
.px-video-progress {
|
|
|
|
|
|
}
|
|
|
|
/* time */
|
|
/*.px-video-time {
|
|
float: right;
|
|
margin-top: 2px;
|
|
font-size: 14px;
|
|
}*/
|
|
|
|
/* caption area */
|
|
|
|
|
|
/* buttons */
|
|
.px-video-controls button {
|
|
|
|
//background: no-repeat url('../images/px-video-sprite.png');
|
|
}
|
|
.px-video-controls button:focus {
|
|
//border: 1px #999 dotted;
|
|
//outline: none;
|
|
}
|
|
.px-video-controls button {
|
|
//cursor: pointer;
|
|
}
|
|
|
|
/* captions button */
|
|
.px-video-captions-btn-container label {
|
|
display: inline-block;
|
|
width: 25px;
|
|
height: 20px;
|
|
margin-left: 25px;
|
|
background: no-repeat url('../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 url('../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;
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
}
|
|
|
|
/*.media {
|
|
position: relative;
|
|
overflow: hidden;
|
|
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
|
|
video {
|
|
width: 100%;
|
|
|
|
&::-webkit-media-controls {
|
|
display:none !important;
|
|
}
|
|
}
|
|
&.stopped,
|
|
&.paused {
|
|
.overlay-play {
|
|
display: block;
|
|
}
|
|
.media-controls {
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
}
|
|
}
|
|
.media-controls {
|
|
height: 50px;
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 2;
|
|
|
|
.translate3d(0, 100%, 0);
|
|
.transition-transform(.5s);
|
|
|
|
background-color: @base-color;
|
|
color: #fff;
|
|
.font-size(15);
|
|
-webkit-font-smoothing: antialiased;
|
|
font-weight: 600;
|
|
.user-select(none);
|
|
|
|
button {
|
|
display: inline-block;
|
|
padding: 8px 15px;
|
|
margin: 0;
|
|
|
|
-webkit-appearance: none;
|
|
background: none;
|
|
border: none;
|
|
color: #fff;
|
|
.font-size(24);
|
|
|
|
.transition();
|
|
|
|
&:focus {
|
|
outline: none;
|
|
}
|
|
|
|
&:hover,
|
|
&:focus {
|
|
text-shadow: 0 0 15px @green;
|
|
}
|
|
}
|
|
|
|
.progress {
|
|
position: relative;
|
|
.border-radius(10px);
|
|
height: 10px;
|
|
background: lighten(@base-color, 10%);
|
|
|
|
div {
|
|
position: absolute;
|
|
z-index: 1;
|
|
left: 0;
|
|
.border-radius(10px);
|
|
height: 10px;
|
|
min-width: 10px; // So it doesn't look strange at 0%
|
|
|
|
&.progress-played,
|
|
&.progress-volume {
|
|
background: @green;
|
|
z-index: 2;
|
|
}
|
|
&.progress-buffered {
|
|
background: lighten(@base-color, 20%);
|
|
}
|
|
}
|
|
&.vertical-progress {
|
|
margin: 0 auto;
|
|
width: 10px;
|
|
height: auto;
|
|
min-height: 100px;
|
|
|
|
div {
|
|
bottom: 0;
|
|
width: 10px;
|
|
height: auto;
|
|
min-height: 10px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.popover {
|
|
display: none;
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: 100%;
|
|
margin-bottom: 10px;
|
|
|
|
background: @base-color;
|
|
.border-radius(4px);
|
|
|
|
-webkit-animation: pop-upwards 160ms forwards linear;
|
|
-moz-animation: pop-upwards 160ms forwards linear;
|
|
-ms-animation: pop-upwards 160ms forwards linear;
|
|
-o-animation: pop-upwards 160ms forwards linear;
|
|
animation: pop-upwards 160ms forwards linear;
|
|
|
|
.transition();
|
|
|
|
// Psuedo bits
|
|
&::before {
|
|
position: absolute;
|
|
bottom: -7px;
|
|
left: 50%;
|
|
margin-left: -7px;
|
|
width: 0;
|
|
height: 0;
|
|
border-right: 7px solid transparent;
|
|
border-top: 7px solid @base-color;
|
|
border-left: 7px solid transparent;
|
|
content: '';
|
|
z-index: 1;
|
|
}
|
|
}
|
|
.has-popover:focus,
|
|
.has-popover:hover {
|
|
.popover {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.popover-volume {
|
|
width: 54px;
|
|
padding: 15px 5px 8px;
|
|
margin-left: -27px;
|
|
|
|
text-align: center;
|
|
|
|
.progress {
|
|
height: 120px;
|
|
margin-bottom: 5px;
|
|
}
|
|
}
|
|
|
|
// Layout
|
|
.play,
|
|
.progress-play,
|
|
.volume,
|
|
.time,
|
|
.fullscreen {
|
|
position: absolute;
|
|
top: 0;
|
|
}
|
|
.play {
|
|
left: 10px;
|
|
}
|
|
.progress-play {
|
|
left: 70px;
|
|
right: 240px;
|
|
margin-top: 20px;
|
|
}
|
|
.time {
|
|
right: 120px;
|
|
width: 100px;
|
|
text-align: center;
|
|
line-height: 1;
|
|
padding-top: 17px;
|
|
}
|
|
.volume {
|
|
right: 60px;
|
|
}
|
|
.fullscreen {
|
|
right: 10px;
|
|
}
|
|
|
|
@media only screen
|
|
and (max-width: 480px) {
|
|
.time-seperator,
|
|
.time-total {
|
|
display: none;
|
|
}
|
|
.time {
|
|
width: 50px;
|
|
right: 70px;
|
|
}
|
|
.fullscreen {
|
|
display: none;
|
|
}
|
|
.volume {
|
|
right: 10px;
|
|
}
|
|
.progress-play {
|
|
right: 140px;
|
|
}
|
|
}
|
|
@media only screen
|
|
and (max-width: 320px) {
|
|
.time {
|
|
display: none;
|
|
}
|
|
.progress-play {
|
|
right: 70px;
|
|
}
|
|
}
|
|
}
|
|
.media-pause .mejs-overlay-play {
|
|
background: rgba(0,0,0, .1);
|
|
}
|
|
.overlay {
|
|
display: none;
|
|
position: absolute;
|
|
z-index: 1;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
background: rgba(0,0,0, .1);
|
|
}
|
|
.overlay-play > span {
|
|
display: block;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 60px;
|
|
height: 60px;
|
|
line-height: 1.5;
|
|
margin: -34px 0 0 -34px !important;
|
|
text-align: center;
|
|
background: rgba(red(@base-color), green(@base-color), blue(@base-color), .8);
|
|
border: 4px solid #fff;
|
|
color: #fff;
|
|
.border-radius(50%);
|
|
@shadow: 0 1px 5px rgba(0,0,0, .25), inset 0 1px 1px rgba(0,0,0,.25);
|
|
.box-shadow(@shadow);
|
|
.font-size(34);
|
|
}*/ |