166 lines
3.6 KiB
SCSS
166 lines
3.6 KiB
SCSS
.video-js {
|
|
// display:inline-block would be closer to the video el's display:inline
|
|
// but it results in flash reloading when going into fullscreen [#2205]
|
|
display: block;
|
|
// Make video.js videos align top when next to video elements
|
|
vertical-align: top;
|
|
box-sizing: border-box;
|
|
|
|
color: $primary-foreground-color;
|
|
background-color: #000;
|
|
position: relative;
|
|
padding: 0;
|
|
// Start with 10px for base font size so other dimensions can be em based and
|
|
// easily calculable.
|
|
font-size: 10px;
|
|
line-height: 1;
|
|
|
|
// Provide some basic defaults for fonts
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
// Avoiding helvetica: issue #376
|
|
font-family: $text-font-family;
|
|
|
|
@include user-select(none);
|
|
|
|
// Fix for Firefox 9 fullscreen (only if it is enabled). Not needed when
|
|
// checking fullScreenEnabled.
|
|
&:-moz-full-screen { position: absolute; }
|
|
|
|
&:-webkit-full-screen {
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
}
|
|
}
|
|
|
|
// All elements inherit border-box sizing
|
|
.video-js *,
|
|
.video-js *:before,
|
|
.video-js *:after {
|
|
box-sizing: inherit;
|
|
}
|
|
|
|
// List style reset
|
|
.video-js ul {
|
|
font-family: inherit;
|
|
font-size: inherit;
|
|
line-height: inherit;
|
|
list-style-position: outside;
|
|
|
|
// Important to specify each
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
// Fill the width of the containing element and use padding to create the
|
|
// desired aspect ratio. Default to 16x9 unless another ratio is given.
|
|
@mixin apply-aspect-ratio($width, $height) {
|
|
padding-top: 100% * ($height/$width);
|
|
}
|
|
|
|
// Not including a default AR in vjs-fluid because it would override
|
|
// the user set AR injected into the header.
|
|
.video-js.vjs-fluid,
|
|
.video-js.vjs-16-9,
|
|
.video-js.vjs-4-3 {
|
|
width: 100%;
|
|
max-width: 100%;
|
|
height: 0;
|
|
}
|
|
|
|
.video-js.vjs-16-9 {
|
|
@include apply-aspect-ratio(16, 9);
|
|
}
|
|
|
|
.video-js.vjs-4-3 {
|
|
@include apply-aspect-ratio(4, 3);
|
|
}
|
|
|
|
.video-js.vjs-fill {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
// Playback technology elements expand to the width/height of the containing div
|
|
// <video> or <object>
|
|
.video-js .vjs-tech {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
// Fullscreen Styles
|
|
body.vjs-full-window {
|
|
padding: 0;
|
|
margin: 0;
|
|
height: 100%;
|
|
// Fix for IE6 full-window. http://www.cssplay.co.uk/layouts/fixed.html
|
|
overflow-y: auto;
|
|
}
|
|
.vjs-full-window .video-js.vjs-fullscreen {
|
|
position: fixed;
|
|
overflow: hidden;
|
|
z-index: 1000;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
}
|
|
.video-js.vjs-fullscreen {
|
|
width: 100% !important;
|
|
height: 100% !important;
|
|
// Undo any aspect ratio padding for fluid layouts
|
|
padding-top: 0 !important;
|
|
}
|
|
.video-js.vjs-fullscreen.vjs-user-inactive {
|
|
cursor: none;
|
|
}
|
|
|
|
|
|
// Hide disabled or unsupported controls.
|
|
.vjs-hidden { display: none !important; }
|
|
|
|
.vjs-disabled {
|
|
opacity: 0.5;
|
|
cursor: default;
|
|
}
|
|
|
|
// Visually hidden offscreen, but accessible to screen readers.
|
|
.video-js .vjs-offscreen {
|
|
height: 1px;
|
|
left: -9999px;
|
|
position: absolute;
|
|
top: 0;
|
|
width: 1px;
|
|
}
|
|
|
|
.vjs-lock-showing {
|
|
display: block !important;
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
|
|
// In IE8 w/ no JavaScript (no HTML5 shim), the video tag doesn't register.
|
|
// The .video-js classname on the video tag also isn't considered.
|
|
// This optional paragraph inside the video tag can provide a message to users
|
|
// about what's required to play video.
|
|
.vjs-no-js {
|
|
padding: 20px;
|
|
color: #fff;
|
|
background-color: #000;
|
|
font-size: 18px;
|
|
font-family: $text-font-family;
|
|
text-align: center;
|
|
width: 300px;
|
|
height: 150px;
|
|
margin: 0px auto;
|
|
}
|
|
|
|
.vjs-no-js a,
|
|
.vjs-no-js a:visited {
|
|
color: #66A8CC;
|
|
}
|