First release
This commit is contained in:
Owen Quinlan
commit
fa6c85266e
2339 changed files with 761050 additions and 0 deletions
268
node_modules/video.js/src/css/components/_volume.scss
generated
vendored
Normal file
268
node_modules/video.js/src/css/components/_volume.scss
generated
vendored
Normal file
|
|
@ -0,0 +1,268 @@
|
|||
.video-js .vjs-mute-control {
|
||||
cursor: pointer;
|
||||
@include flex(none);
|
||||
|
||||
& .vjs-icon-placeholder {
|
||||
@extend .vjs-icon-volume-high;
|
||||
}
|
||||
}
|
||||
|
||||
.video-js .vjs-mute-control.vjs-vol-0 .vjs-icon-placeholder {
|
||||
@extend .vjs-icon-volume-mute;
|
||||
}
|
||||
.video-js .vjs-mute-control.vjs-vol-1 .vjs-icon-placeholder {
|
||||
@extend .vjs-icon-volume-low;
|
||||
}
|
||||
.video-js .vjs-mute-control.vjs-vol-2 .vjs-icon-placeholder {
|
||||
@extend .vjs-icon-volume-mid;
|
||||
}
|
||||
|
||||
.video-js .vjs-volume-control {
|
||||
cursor: pointer;
|
||||
margin-right: 1em;
|
||||
@include display-flex;
|
||||
}
|
||||
.video-js .vjs-volume-control.vjs-volume-horizontal {
|
||||
width: 5em;
|
||||
}
|
||||
|
||||
.video-js .vjs-volume-panel .vjs-volume-control {
|
||||
visibility: visible;
|
||||
opacity: 0;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
margin-left: -1px;
|
||||
}
|
||||
|
||||
.video-js .vjs-volume-panel {
|
||||
&.vjs-hover .vjs-volume-control,
|
||||
&:active .vjs-volume-control,
|
||||
&:focus .vjs-volume-control,
|
||||
& .vjs-volume-control:active,
|
||||
&.vjs-hover .vjs-mute-control ~ .vjs-volume-control,
|
||||
& .vjs-volume-control.vjs-slider-active {
|
||||
&.vjs-volume-horizontal {
|
||||
width: 5em;
|
||||
height: 3em;
|
||||
margin-right: 0;
|
||||
}
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
position: relative;
|
||||
|
||||
&.vjs-volume-vertical {
|
||||
left: -3.5em;
|
||||
@include transition(left 0s);
|
||||
}
|
||||
$transition-property: visibility 0.1s, opacity 0.1s, height 0.1s, width 0.1s, left 0s, top 0s;
|
||||
@include transition($transition-property);
|
||||
}
|
||||
|
||||
&.vjs-volume-panel-horizontal {
|
||||
&.vjs-hover,
|
||||
&:active,
|
||||
&.vjs-slider-active {
|
||||
width: 10em;
|
||||
|
||||
@include transition(width 0.1s);
|
||||
}
|
||||
&.vjs-mute-toggle-only {
|
||||
width: 4em;
|
||||
}
|
||||
}
|
||||
|
||||
@include transition(width 1s);
|
||||
}
|
||||
|
||||
.video-js .vjs-volume-panel .vjs-volume-control.vjs-volume-vertical {
|
||||
height: 8em;
|
||||
width: 3em;
|
||||
left: -3000em;
|
||||
|
||||
$transition-property: visibility 1s, opacity 1s, height 1s 1s, width 1s 1s, left 1s 1s, top 1s 1s;
|
||||
@include transition($transition-property)
|
||||
}
|
||||
|
||||
.video-js .vjs-volume-panel .vjs-volume-control.vjs-volume-horizontal {
|
||||
$transition-property: visibility 1s, opacity 1s, height 1s 1s, width 1s, left 1s 1s, top 1s 1s;
|
||||
@include transition($transition-property)
|
||||
}
|
||||
|
||||
.video-js.vjs-no-flex .vjs-volume-panel .vjs-volume-control.vjs-volume-horizontal {
|
||||
width: 5em;
|
||||
height: 3em;
|
||||
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
position: relative;
|
||||
|
||||
@include transition(none);
|
||||
}
|
||||
|
||||
.video-js.vjs-no-flex .vjs-volume-control.vjs-volume-vertical,
|
||||
.video-js.vjs-no-flex .vjs-volume-panel .vjs-volume-control.vjs-volume-vertical {
|
||||
position: absolute;
|
||||
bottom: 3em;
|
||||
left: 0.5em;
|
||||
}
|
||||
|
||||
.video-js .vjs-volume-panel {
|
||||
@include display-flex;
|
||||
}
|
||||
|
||||
.video-js .vjs-volume-bar {
|
||||
margin: 1.35em 0.45em;
|
||||
}
|
||||
|
||||
.vjs-volume-bar.vjs-slider-horizontal {
|
||||
width: 5em;
|
||||
height: 0.3em;
|
||||
}
|
||||
|
||||
.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: $primary-foreground-color;
|
||||
|
||||
@extend .vjs-icon-circle;
|
||||
|
||||
// Volume handle
|
||||
&:before {
|
||||
position: absolute;
|
||||
font-size: 0.9em; // Doing this to match the handle on play progress.
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.vjs-slider-vertical .vjs-volume-level {
|
||||
width: 0.3em;
|
||||
|
||||
// Volume handle
|
||||
&:before {
|
||||
top: -0.5em;
|
||||
left: -0.3em;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
.vjs-slider-horizontal .vjs-volume-level {
|
||||
height: 0.3em;
|
||||
|
||||
// Volume handle
|
||||
&:before {
|
||||
top: -0.3em;
|
||||
right: -0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.video-js .vjs-volume-panel.vjs-volume-panel-vertical {
|
||||
width: 4em;
|
||||
}
|
||||
|
||||
// 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%;
|
||||
}
|
||||
|
||||
.video-js .vjs-volume-vertical {
|
||||
width: 3em;
|
||||
height: 8em;
|
||||
bottom: 8em;
|
||||
|
||||
@include background-color-with-alpha($primary-background-color, $primary-background-transparency);
|
||||
}
|
||||
|
||||
.video-js .vjs-volume-horizontal .vjs-menu {
|
||||
left: -2em;
|
||||
}
|
||||
|
||||
// .vjs-volume-tooltip
|
||||
//
|
||||
// These elements are displayed above the volume bar.
|
||||
//
|
||||
// By default, they are hidden and only shown when hovering over the volume
|
||||
// control.
|
||||
.video-js .vjs-volume-tooltip {
|
||||
@include background-color-with-alpha(#fff, 0.8);
|
||||
@include border-radius(0.3em);
|
||||
color: #000;
|
||||
float: right;
|
||||
font-family: $text-font-family;
|
||||
font-size: 1em;
|
||||
padding: 6px 8px 8px 8px;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
top: -3.4em;
|
||||
visibility: hidden;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.video-js .vjs-volume-control:hover .vjs-volume-tooltip,
|
||||
.video-js .vjs-volume-control:hover .vjs-progress-holder:focus .vjs-volume-tooltip {
|
||||
display: block;
|
||||
font-size: 1em;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.video-js .vjs-volume-vertical:hover .vjs-volume-tooltip,
|
||||
.video-js .vjs-volume-vertical:hover .vjs-progress-holder:focus .vjs-volume-tooltip {
|
||||
left: 1em;
|
||||
top: -12px;
|
||||
}
|
||||
|
||||
.video-js .vjs-volume-control.disabled:hover .vjs-volume-tooltip {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
// .vjs-mouse-display / MouseVolumeLevelDisplay
|
||||
//
|
||||
// This element tracks the mouse position along the volume control and
|
||||
// includes a tooltip, which displays the volume level.
|
||||
.video-js .vjs-volume-control .vjs-mouse-display {
|
||||
display: none;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background-color: #000;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.video-js .vjs-volume-horizontal .vjs-mouse-display {
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.vjs-no-flex .vjs-volume-control .vjs-mouse-display {
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.video-js .vjs-volume-control:hover .vjs-mouse-display {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.video-js.vjs-user-inactive .vjs-volume-control .vjs-mouse-display {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
$trans: visibility 1.0s, opacity 1.0s;
|
||||
@include transition($trans);
|
||||
}
|
||||
|
||||
.video-js.vjs-user-inactive.vjs-no-flex .vjs-volume-control .vjs-mouse-display {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.vjs-mouse-display .vjs-volume-tooltip {
|
||||
color: #fff;
|
||||
@include background-color-with-alpha(#000, 0.8);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue