144 lines
3.3 KiB
SCSS
144 lines
3.3 KiB
SCSS
.video-js .vjs-mute-control,
|
|
.video-js .vjs-volume-menu-button {
|
|
cursor: pointer;
|
|
@include flex(none);
|
|
@extend .vjs-icon-volume-high;
|
|
&:before {
|
|
//font-size: 2em;
|
|
}
|
|
}
|
|
|
|
.video-js .vjs-mute-control.vjs-vol-0,
|
|
.video-js .vjs-volume-menu-button.vjs-vol-0 {
|
|
@extend .vjs-icon-volume-mute;
|
|
}
|
|
.video-js .vjs-mute-control.vjs-vol-1,
|
|
.video-js .vjs-volume-menu-button.vjs-vol-1 {
|
|
@extend .vjs-icon-volume-low;
|
|
&:before {
|
|
//font-size: 2em;
|
|
}
|
|
}
|
|
.video-js .vjs-mute-control.vjs-vol-2,
|
|
.video-js .vjs-volume-menu-button.vjs-vol-2 {
|
|
@extend .vjs-icon-volume-mid;
|
|
&:before {
|
|
//font-size: 2em;
|
|
}
|
|
}
|
|
|
|
.video-js .vjs-volume-control {
|
|
width: 5em;
|
|
@include flex(none);
|
|
@include display-flex(center);
|
|
}
|
|
|
|
.video-js .vjs-volume-bar {
|
|
margin: 1.35em 0.45em;
|
|
}
|
|
|
|
.vjs-volume-bar.vjs-slider-horizontal {
|
|
width: 5em;
|
|
height: 0.4em;
|
|
}
|
|
|
|
.vjs-volume-bar.vjs-slider-vertical {
|
|
width: 0.3em;
|
|
height: 5em;
|
|
margin: 1.35em auto;
|
|
}
|
|
|
|
.video-js .vjs-volume-level {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
|
|
background-color: $progress-color;
|
|
|
|
@extend .vjs-icon-circle;
|
|
|
|
// Volume handle
|
|
&:before {
|
|
position: absolute;
|
|
font-size: 1em; // Doing this to match the handle on play progress.
|
|
color: $primary-foreground-color;
|
|
}
|
|
}
|
|
|
|
.vjs-slider-vertical .vjs-volume-level {
|
|
width: 0.3em;
|
|
|
|
// Volume handle
|
|
&:before {
|
|
top: -0.2em;
|
|
left: -0.3em;
|
|
}
|
|
}
|
|
.vjs-slider-horizontal .vjs-volume-level {
|
|
height: 0.4em;
|
|
|
|
// Volume handle
|
|
&:before {
|
|
top: -0.23em;
|
|
right: -0.5em;
|
|
}
|
|
}
|
|
|
|
// Assumes volume starts at 1.0.
|
|
.vjs-volume-bar.vjs-slider-vertical .vjs-volume-level {
|
|
height: 100%;
|
|
}
|
|
|
|
.vjs-volume-bar.vjs-slider-horizontal .vjs-volume-level {
|
|
width: 100%;
|
|
}
|
|
|
|
// The volume menu button is like menu buttons (captions/subtitles) but works
|
|
// a little differently. It needs to be possible to tab to the volume slider
|
|
// without hitting space bar on the menu button. To do this we're not using
|
|
// display:none to hide the slider menu by default, and instead setting the
|
|
// width and height to zero.
|
|
.vjs-menu-button-popup.vjs-volume-menu-button .vjs-menu {
|
|
display: block;
|
|
width: 0;
|
|
height: 0;
|
|
border-top-color: transparent;
|
|
}
|
|
|
|
.vjs-menu-button-popup.vjs-volume-menu-button-vertical .vjs-menu {
|
|
left: 0.5em;
|
|
height: 8em;
|
|
}
|
|
.vjs-menu-button-popup.vjs-volume-menu-button-horizontal .vjs-menu {
|
|
left: -2em;
|
|
}
|
|
|
|
.vjs-menu-button-popup.vjs-volume-menu-button .vjs-menu-content {
|
|
height: 0;
|
|
width: 0;
|
|
// Avoids unnecessary scrollbars in the menu content. Primarily noticed in Chrome on Linux.
|
|
overflow-x: hidden;
|
|
overflow-y: hidden;
|
|
}
|
|
|
|
.vjs-volume-menu-button-vertical:hover .vjs-menu-content,
|
|
.vjs-volume-menu-button-vertical:focus .vjs-menu-content,
|
|
.vjs-volume-menu-button-vertical.vjs-slider-active .vjs-menu-content,
|
|
.vjs-volume-menu-button-vertical .vjs-lock-showing .vjs-menu-content {
|
|
height: 8em;
|
|
width: 2.9em;
|
|
}
|
|
|
|
.vjs-volume-menu-button-horizontal:hover .vjs-menu-content,
|
|
.vjs-volume-menu-button-horizontal:focus .vjs-menu-content,
|
|
.vjs-volume-menu-button-horizontal .vjs-slider-active .vjs-menu-content,
|
|
.vjs-volume-menu-button-horizontal .vjs-lock-showing .vjs-menu-content {
|
|
height: 2.9em;
|
|
width: 8em;
|
|
}
|
|
|
|
.vjs-volume-menu-button.vjs-menu-button-inline .vjs-menu-content {
|
|
// An inline volume should never have a menu background color.
|
|
// This protects it from external changes to background colors.
|
|
background-color: transparent !important;
|
|
}
|