72 lines
2 KiB
SCSS
72 lines
2 KiB
SCSS
.video-js .vjs-control-bar {
|
|
display: none;
|
|
width: 100%;
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 2;
|
|
height: 42px;
|
|
background-color: rgba(0,0,0,.9);
|
|
//@include background-color-with-alpha($primary-background-color, $primary-background-transparency);
|
|
}
|
|
|
|
// Video has started playing
|
|
.vjs-has-started .vjs-cb-header-caption,
|
|
.vjs-has-started .vjs-control-bar {
|
|
@include display-flex;
|
|
visibility: visible;
|
|
opacity: 1;
|
|
|
|
$trans: visibility 0.1s, opacity 0.1s; // Var needed because of comma
|
|
@include transition($trans);
|
|
}
|
|
|
|
// IE 8 hack for media queries
|
|
$ie8screen: "\\0screen";
|
|
|
|
// Video has started playing AND user is inactive
|
|
.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-cb-header-caption,
|
|
.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar {
|
|
// Remain visible for screen reader and keyboard users
|
|
visibility: visible;
|
|
opacity: 0;
|
|
|
|
$trans: visibility 1.0s, opacity 1.0s;
|
|
@include transition($trans);
|
|
|
|
// Make controls hidden in IE8 for now
|
|
@media #{$ie8screen} {
|
|
visibility: hidden;
|
|
}
|
|
}
|
|
.vjs-controls-disabled .vjs-cb-header-caption,
|
|
.vjs-using-native-controls .vjs-cb-header-caption,
|
|
.vjs-error .vjs-cb-header-caption,
|
|
.vjs-controls-disabled .vjs-control-bar,
|
|
.vjs-using-native-controls .vjs-control-bar,
|
|
.vjs-error .vjs-control-bar {
|
|
// !important is ok in this context.
|
|
display: none !important;
|
|
}
|
|
|
|
// Don't hide the control bar if it's audio
|
|
.vjs-audio.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-cb-header-caption,
|
|
.vjs-audio.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
|
|
|
|
// IE8 is flakey with fonts, and you have to change the actual content to force
|
|
// fonts to show/hide properly.
|
|
// - "\9" IE8 hack didn't work for this
|
|
// Found in XP IE8 from http://modern.ie. Does not show up in "IE8 mode" in IE9
|
|
.vjs-user-inactive.vjs-playing .vjs-control-bar :before {
|
|
@media #{$ie8screen} { content: ""; }
|
|
}
|
|
|
|
// IE 8 + 9 Support
|
|
.vjs-has-started.vjs-no-flex .vjs-control-bar {
|
|
display: table;
|
|
}
|