// ==========================================================================
// HTML5 Media Player
// ==========================================================================
// Variables
// -------------------------------
// Colors
@blue: #3498DB;
@gray-dark: #343f4a;
@gray: #565d64;
@gray-light: #cbd0d3;
@off-white: #d6dadd;
// Font sizes
@font-size-small: 14px;
@font-size-base: 16px;
@font-size-large: ceil((@font-size-base * 1.5));
// Controls
@control-spacing: 10px;
@controls-bg: @gray-dark;
@control-bg-hover: @blue;
@control-color: @gray-light;
@control-color-inactive: @gray;
@control-color-hover: #fff;
// Tooltips
@tooltip-bg: @controls-bg;
@tooltip-color: #fff;
@tooltip-padding: @control-spacing;
@tooltip-arrow-size: 5px;
@tooltip-radius: 3px;
// Progress
@progress-bg: rgba(red(@gray), green(@gray), blue(@gray), .2);
@progress-playing-bg: @blue;
@progress-buffered-bg: rgba(red(@gray), green(@gray), blue(@gray), .25);
@progress-loading-size: 40px;
@progress-loading-bg: rgba(0,0,0, .15);
// Volume
@volume-track-height: 6px;
@volume-track-bg: @gray;
@volume-thumb-height: (@volume-track-height * 2);
@volume-thumb-width: (@volume-track-height * 2);
@volume-thumb-bg: @control-color;
@volume-thumb-bg-focus: @control-bg-hover;
// Breakpoints
@bp-control-split: 560px; // When controls split into left/right
@bp-captions-large: 768px; // When captions jump to the larger font size
// Utility classes & mixins
// -------------------------------
// Screen reader only
.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;
}
// Contain floats: nicolasgallagher.com/micro-clearfix-hack/
.clearfix() {
zoom: 1;
&:before,
&:after { content: ""; display: table; }
&:after { clear: both; }
}
// Tab focus styles
.tab-focus() {
outline: thin dotted #000;
outline-offset: 0;
}
// Animation
// ---------------------------------------
@keyframes progress {
to { background-position: @progress-loading-size 0; }
}
// styling
// ---------------------------------------
.volume-thumb() {
height: @volume-thumb-height;
width: @volume-thumb-width;
background: @volume-thumb-bg;
border: 0;
border-radius: (@volume-thumb-height / 2);
transition: background .3s ease;
cursor: ew-resize;
}
.volume-track() {
height: @volume-track-height;
background: @volume-track-bg;
border: 0;
border-radius: (@volume-track-height / 2);
}
.seek-thumb() {
background: transparent;
border: 0;
width: (@control-spacing * 2);
height: @control-spacing;
}
.seek-track() {
background: none;
border: 0;
}
// Font smoothing
// ---------------------------------------
.font-smoothing(@mode: on) when (@mode = on) {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
.font-smoothing(@mode: on) when (@mode = off) {
-moz-osx-font-smoothing: auto;
-webkit-font-smoothing: subpixel-antialiased;
}
// Styles
// -------------------------------
// Base
.player {
position: relative;
max-width: 100%;
min-width: 290px;
// border-box everything
// http://paulirish.com/2012/box-sizing-border-box-ftw/
&,
*,
*::after,
*::before {
box-sizing: border-box;
}
// For video
&-video-wrapper {
position: relative;
}
video {
width: 100%;
height: auto;
vertical-align: middle;
}
// Captions
&-captions {
display: none;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 20px;
min-height: 2.5em;
color: #fff;
font-size: @font-size-base;
font-weight: 600;
text-shadow:
-1px -1px 0 @gray,
1px -1px 0 @gray,
-1px 1px 0 @gray,
1px 1px 0 @gray;
text-align: center;
.font-smoothing();
@media (min-width: @bp-captions-large) {
font-size: @font-size-large;
}
}
&.captions-active &-captions {
display: block;
}
// Player controls
&-controls {
.clearfix();
.font-smoothing();
position: relative;
padding: @control-spacing;
background: @controls-bg;
line-height: 1;
text-align: center;
// Layout
&-right {
display: block;
margin: @control-spacing auto 0;
}
@media (min-width: @bp-control-split) {
&-left {
float: left;
}
&-right {
float: right;
margin-top: 0;
}
}
input + label,
button {
display: inline-block;
vertical-align: middle;
margin: 0 2px;
padding: (@control-spacing / 2) @control-spacing;
transition: background .3s ease;
border-radius: 3px;
cursor: pointer;
svg {
width: 18px;
height: 18px;
display: block;
fill: currentColor;
transition: fill .3s ease;
}
}
input + label,
.inverted:checked + label {
color: @control-color-inactive;
}
button,
.inverted + label,
input:checked + label {
color: @control-color;
}
button {
border: 0;
background: transparent;
overflow: hidden;
}
// Specificity for overriding .inverted
button:focus,
button:hover,
[type="checkbox"]:focus + label,
[type="checkbox"] + label:hover {
background: @control-bg-hover;
color: @control-color-hover;
}
button:focus,
input:focus + label {
outline: 0;
}
.icon-exit-fullscreen,
.icon-muted,
.icon-captions-on {
display: none;
}
.player-time {
display: inline-block;
vertical-align: middle;
margin-left: @control-spacing;
color: @control-color;
font-weight: 600;
font-size: @font-size-small;
.font-smoothing();
}
// Media duration hidden on small screens
.player-time + .player-time {
display: none;
@media (min-width: @bp-control-split) {
display: inline-block;
}
// Add a slash in before
&::before {
content: "\2044";
margin-right: @control-spacing;
color: darken(@control-color, 30%);
}
}
}
// Tooltips
&-tooltip {
visibility: hidden;
position: absolute;
z-index: 2;
bottom: 100%;
margin-bottom: @tooltip-padding;
padding: @tooltip-padding (@tooltip-padding * 1.5);
opacity: 0;
background: @tooltip-bg;
border-radius: @tooltip-radius;
color: @tooltip-color;
font-size: @font-size-small;
line-height: 1.5;
font-weight: 600;
transform: translate(-50%, (@tooltip-padding * 3));
transition: transform .2s .2s ease, opacity .2s .2s ease;
&::after {
content: "";
display: block;
position: absolute;
left: 50%;
bottom: -@tooltip-arrow-size;
margin-left: -@tooltip-arrow-size;
width: 0;
height: 0;
transition: inherit;
border-style: solid;
border-width: @tooltip-arrow-size @tooltip-arrow-size 0 @tooltip-arrow-size;
border-color: @controls-bg transparent transparent;
}
}
label:hover .player-tooltip,
input:focus + label .player-tooltip,
button:hover .player-tooltip,
button:focus .player-tooltip {
visibility: visible;
opacity: 1;
transform: translate(-50%, 0);
}
label:hover .player-tooltip,
button:hover .player-tooltip {
z-index: 3;
}
// Player progress
//