$videoplayer-controls-color: white $videoplayer-background-color: darken($primary, 10%) $videoplayer-progress-bar-height: .5em .video-js .vjs-big-play-button:before, .vjs-control:before, .vjs-modal-dialog position: absolute top: 0 left: 0 width: 100% height: 100% .vjs-big-play-button:before, .vjs-control:before text-align: center .vjs-big-play-button, .vjs-play-control font-family: VideoJS font-weight: normal font-style: normal .vjs-modal-dialog .vjs-modal-dialog-content position: absolute top: 0 left: 0 width: 100% height: 100% @font-face font-family: VideoJS src: url(data:application/font-woff;charset=utf-8;base64,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) format("woff"), url(data:application/x-font-ttf;charset=utf-8;base64,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ATcuAScjBh8BHgEXDgEFMz8BFTMRIwYDJRUnAxyEzZRbCA2rgketCAEBqlRoCglxYwF+IiEOIysBAkswHQEECiQ0AgE+YyIhDiIsAQJLMB4BBQokNAE/YyIhDiIsAQJLMB4BBQokNAEBPvmD7kHhqs0s0gEnjgHJAv0FD2a9gIrADwUFAwPDAlVMZ3MF/pUHwgc1HTyWV325PgsJED+oY3G9TAc1HTyWV325PgsJED+oY3G9TAc1HTyWV325PgsJED+oY3G9UmQBZQMMR/61g/kBAAAAAAAQAMYAAQAAAAAAAQAHAAAAAQAAAAAAAgAHAAcAAQAAAAAAAwAHAA4AAQAAAAAABAAHABUAAQAAAAAABQALABwAAQAAAAAABgAHACcAAQAAAAAACgArAC4AAQAAAAAACwATAFkAAwABBAkAAQAOAGwAAwABBAkAAgAOAHoAAwABBAkAAwAOAIgAAwABBAkABAAOAJYAAwABBAkABQAWAKQAAwABBAkABgAOALoAAwABBAkACgBWAMgAAwABBAkACwAmAR5WaWRlb0pTUmVndWxhclZpZGVvSlNWaWRlb0pTVmVyc2lvbiAxLjBWaWRlb0pTR2VuZXJhdGVkIGJ5IHN2ZzJ0dGYgZnJvbSBGb250ZWxsbyBwcm9qZWN0Lmh0dHA6Ly9mb250ZWxsby5jb20AVgBpAGQAZQBvAEoAUwBSAGUAZwB1AGwAYQByAFYAaQBkAGUAbwBKAFMAVgBpAGQAZQBvAEoAUwBWAGUAcgBzAGkAbwBuACAAMQAuADAAVgBpAGQAZQBvAEoAUwBHAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAHMAdgBnADIAdAB0AGYAIABmAHIAbwBtACAARgBvAG4AdABlAGwAbABvACAAcAByAG8AagBlAGMAdAAuAGgAdAB0AHAAOgAvAC8AZgBvAG4AdABlAGwAbABvAC4AYwBvAG0AAAACAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAB4AAAECAQMBBAEFAQYBBwEIAQkBCgELAQwBDQEOAQ8BEAERARIBEwEUARUBFgEXARgBGQEaARsBHAEdAR4EcGxheQtwbGF5LWNpcmNsZQVwYXVzZQt2b2x1bWUtbXV0ZQp2b2x1bWUtbG93CnZvbHVtZS1taWQLdm9sdW1lLWhpZ2gQZnVsbHNjcmVlbi1lbnRlcg9mdWxsc2NyZWVuLWV4aXQGc3F1YXJlB3NwaW5uZXIJc3VidGl0bGVzCGNhcHRpb25zCGNoYXB0ZXJzBXNoYXJlA2NvZwZjaXJjbGUOY2lyY2xlLW91dGxpbmUTY2lyY2xlLWlubmVyLWNpcmNsZQJoZAZjYW5jZWwGcmVwbGF5CGZhY2Vib29rBWdwbHVzCGxpbmtlZGluB3R3aXR0ZXIGdHVtYmxyCXBpbnRlcmVzdBFhdWRpby1kZXNjcmlwdGlvbgAAAAAA) format("truetype") font-weight: normal font-style: normal .vjs-icon-play font-family: VideoJS font-weight: normal font-style: normal &:before content: '\f101' .video-js .vjs-big-play-button:before, .vjs-play-control:before content: '\f101' .vjs-icon-play-circle font-family: VideoJS font-weight: normal font-style: normal &:before content: '\f102' .vjs-icon-pause, .video-js .vjs-play-control.vjs-playing font-family: VideoJS font-weight: normal font-style: normal .vjs-icon-pause:before, .video-js .vjs-play-control.vjs-playing:before content: '\f103' .vjs-icon-volume-mute font-family: VideoJS font-weight: normal font-style: normal .video-js .vjs-mute-control.vjs-vol-0, .vjs-volume-menu-button.vjs-vol-0 font-family: VideoJS font-weight: normal font-style: normal .vjs-icon-volume-mute:before content: '\f104' .video-js .vjs-mute-control.vjs-vol-0:before, .vjs-volume-menu-button.vjs-vol-0:before content: '\f104' .vjs-icon-volume-low font-family: VideoJS font-weight: normal font-style: normal .video-js .vjs-mute-control.vjs-vol-1, .vjs-volume-menu-button.vjs-vol-1 font-family: VideoJS font-weight: normal font-style: normal .vjs-icon-volume-low:before content: '\f105' .video-js .vjs-mute-control.vjs-vol-1:before, .vjs-volume-menu-button.vjs-vol-1:before content: '\f105' .vjs-icon-volume-mid font-family: VideoJS font-weight: normal font-style: normal .video-js .vjs-mute-control.vjs-vol-2, .vjs-volume-menu-button.vjs-vol-2 font-family: VideoJS font-weight: normal font-style: normal .vjs-icon-volume-mid:before content: '\f106' .video-js .vjs-mute-control.vjs-vol-2:before, .vjs-volume-menu-button.vjs-vol-2:before content: '\f106' .vjs-icon-volume-high font-family: VideoJS font-weight: normal font-style: normal .video-js .vjs-mute-control, .vjs-volume-menu-button font-family: VideoJS font-weight: normal font-style: normal .vjs-icon-volume-high:before content: '\f107' .video-js .vjs-mute-control:before, .vjs-volume-menu-button:before content: '\f107' .vjs-icon-fullscreen-enter, .video-js .vjs-fullscreen-control font-family: VideoJS font-weight: normal font-style: normal .vjs-icon-fullscreen-enter:before, .video-js .vjs-fullscreen-control:before content: '\f108' .vjs-icon-fullscreen-exit, .video-js.vjs-fullscreen .vjs-fullscreen-control font-family: VideoJS font-weight: normal font-style: normal .vjs-icon-fullscreen-exit:before, .video-js.vjs-fullscreen .vjs-fullscreen-control:before content: '\f109' .vjs-icon-square font-family: VideoJS font-weight: normal font-style: normal &:before content: '\f10a' .vjs-icon-spinner font-family: VideoJS font-weight: normal font-style: normal &:before content: '\f10b' .vjs-icon-subtitles, .video-js .vjs-subtitles-button font-family: VideoJS font-weight: normal font-style: normal .vjs-icon-subtitles:before, .video-js .vjs-subtitles-button:before content: '\f10c' .vjs-icon-captions, .video-js .vjs-captions-button font-family: VideoJS font-weight: normal font-style: normal .vjs-icon-captions:before, .video-js .vjs-captions-button:before content: '\f10d' .vjs-icon-chapters, .video-js .vjs-chapters-button font-family: VideoJS font-weight: normal font-style: normal .vjs-icon-chapters:before, .video-js .vjs-chapters-button:before content: '\f10e' .vjs-icon-share font-family: VideoJS font-weight: normal font-style: normal &:before content: '\f10f' .vjs-icon-cog font-family: VideoJS font-weight: normal font-style: normal &:before content: '\f110' .vjs-icon-circle font-family: VideoJS font-weight: normal font-style: normal .vjs-loop-button &:hover &:before opacity: 1 &:before font-family: 'pillar-font' content: '\e864' opacity: .4 font-weight: normal .vjs-control-active box-shadow: inset 0 -3px $videoplayer-controls-color &:before opacity: 1 .video-js .vjs-mouse-display, .vjs-volume-level font-family: VideoJS font-weight: normal font-style: normal .video-js .vjs-mouse-display:before, .vjs-play-progress:before, .vjs-volume-level:before background-color: $videoplayer-controls-color border-radius: 50% content: '' height: 10px width: 10px .vjs-icon-circle-outline font-family: VideoJS font-weight: normal font-style: normal &:before content: '\f112' .vjs-icon-circle-inner-circle font-family: VideoJS font-weight: normal font-style: normal &:before content: '\f113' .vjs-icon-cancel, .video-js .vjs-control.vjs-close-button font-family: VideoJS font-weight: normal font-style: normal .vjs-icon-cancel:before, .video-js .vjs-control.vjs-close-button:before content: '\f115' .vjs-icon-replay font-family: VideoJS font-weight: normal font-style: normal &:before content: '\f116' .vjs-icon-audio-description font-family: VideoJS font-weight: normal font-style: normal &:before content: '\f11d' .video-js display: block vertical-align: top box-sizing: border-box color: $videoplayer-controls-color background-color: black position: relative padding: 0 font-size: 10px line-height: 1 font-weight: normal font-style: normal -webkit-user-select: none -moz-user-select: none -ms-user-select: none user-select: none &:-moz-full-screen position: absolute &:-webkit-full-screen width: 100% !important height: 100% !important * box-sizing: inherit &:before, &:after box-sizing: inherit ul font-family: inherit font-size: inherit line-height: inherit list-style-position: outside margin: 0 &.vjs-fluid, &.vjs-16-9, &.vjs-4-3 width: 100% max-width: 100% height: 0 &.vjs-16-9 padding-top: 56.25% &.vjs-4-3 padding-top: 75% &.vjs-fill width: 100% height: 100% .vjs-tech position: absolute top: 0 left: 0 width: 100% height: 100% body.vjs-full-window padding: 0 margin: 0 height: 100% 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 padding-top: 0 !important &.vjs-user-inactive cursor: none .vjs-hidden display: none !important .video-js .vjs-offscreen height: 1px left: -9999px position: absolute top: 0 width: 1px .vjs-lock-showing display: block !important opacity: 1 visibility: visible .vjs-no-js padding: 20px color: $videoplayer-controls-color background-color: black font-size: 18px font-family: Arial, Helvetica, sans-serif text-align: center width: 300px height: 150px margin: 0px auto a color: #66A8CC &:visited color: #66A8CC .video-js .vjs-big-play-button font-size: 3em line-height: 1.5em height: 1.5em width: 3em display: block position: absolute padding: 0 cursor: pointer opacity: 1 background-color: $videoplayer-background-color -webkit-border-radius: 0.3em -moz-border-radius: 0.3em border-radius: 0.3em -webkit-transition: all 0.4s -moz-transition: all 0.4s -o-transition: all 0.4s transition: all 0.4s top: 50% left: 50% margin-top: -0.75em margin-left: -1.5em .video-js &:hover .vjs-big-play-button, .vjs-big-play-button:focus outline: 0 border-color: $videoplayer-controls-color background-color: #73859f background-color: rgba(115, 133, 159, 0.5) -webkit-transition: all 0s -moz-transition: all 0s -o-transition: all 0s transition: all 0s .vjs-controls-disabled .vjs-big-play-button, .vjs-has-started .vjs-big-play-button, .vjs-using-native-controls .vjs-big-play-button, .vjs-error .vjs-big-play-button display: none .video-js button background: none border: none color: inherit display: inline-block overflow: visible font-size: inherit line-height: inherit text-transform: none text-decoration: none transition: none -webkit-appearance: none -moz-appearance: none appearance: none .vjs-control.vjs-close-button cursor: pointer height: 3em position: absolute right: 0 top: 0.5em z-index: 2 .vjs-menu-button cursor: pointer .vjs-menu .vjs-menu-content display: block padding: 0 margin: 0 overflow: auto .vjs-scrubbing .vjs-menu-button:hover .vjs-menu display: none .vjs-menu li list-style: none margin: 0 padding: 0.2em 0 line-height: 1.8em font-size: 1.1em text-align: center text-transform: lowercase &:focus, &:hover background-color: darken($primary, 20%) &.vjs-selected background-color: $videoplayer-controls-color color: $videoplayer-background-color &:focus, &:hover background-color: $videoplayer-controls-color color: $videoplayer-background-color &.vjs-menu-title text-align: center text-transform: uppercase font-size: 1em line-height: 2em padding: 0 margin: 0 0 0.3em 0 font-weight: bold cursor: default .vjs-menu-button-popup .vjs-menu display: none position: absolute bottom: 0 width: 10em left: -3em height: 0em margin-bottom: 1.5em border-top-color: $videoplayer-background-color .vjs-menu-content background-color: $videoplayer-background-color position: absolute width: 100% bottom: 1.5em max-height: 25em .vjs-workinghover .vjs-menu-button-popup:hover .vjs-menu, .vjs-menu-button-popup .vjs-menu.vjs-lock-showing display: block .video-js .vjs-menu-button-inline -webkit-transition: all 0.4s -moz-transition: all 0.4s -o-transition: all 0.4s transition: all 0.4s overflow: hidden &:before width: 2.222222222em &:hover, &:focus, &.vjs-slider-active width: 12em &.vjs-no-flex .vjs-menu-button-inline width: 12em .vjs-menu-button-inline.vjs-slider-active -webkit-transition: none -moz-transition: none -o-transition: none transition: none .vjs-menu-button-inline .vjs-menu opacity: 0 height: 100% width: auto position: absolute left: 4em top: 0 padding: 0 margin: 0 -webkit-transition: all 0.4s -moz-transition: all 0.4s -o-transition: all 0.4s transition: all 0.4s &:hover .vjs-menu, &:focus .vjs-menu, &.vjs-slider-active .vjs-menu display: block opacity: 1 .vjs-no-flex .vjs-menu-button-inline .vjs-menu display: block opacity: 1 position: relative width: auto &:hover .vjs-menu, &:focus .vjs-menu, &.vjs-slider-active .vjs-menu width: auto .vjs-menu-button-inline .vjs-menu-content width: auto height: 100% margin: 0 overflow: hidden .video-js .vjs-control-bar display: none width: 100% position: absolute bottom: 0 left: 0 right: 0 height: 3.0em background-color: rgba($videoplayer-background-color, .6) transition: background-color 150ms ease-in-out &:hover background-color: $videoplayer-background-color .vjs-has-started .vjs-control-bar display: -webkit-box display: -webkit-flex display: -ms-flexbox display: flex visibility: visible opacity: 1 -webkit-transition: visibility 0.1s, opacity 0.1s -moz-transition: visibility 0.1s, opacity 0.1s -o-transition: visibility 0.1s, opacity 0.1s transition: visibility 0.1s, opacity 0.1s &.vjs-user-inactive.vjs-playing .vjs-control-bar visibility: hidden opacity: 0 -webkit-transition: visibility 1s, opacity .5s -moz-transition: visibility 1s, opacity .5s -o-transition: visibility 1s, opacity .5s transition: visibility 1s, opacity .5s .vjs-controls-disabled .vjs-control-bar, .vjs-using-native-controls .vjs-control-bar, .vjs-error .vjs-control-bar display: none !important .vjs-audio.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar opacity: 1 visibility: visible @media \0screen .vjs-user-inactive.vjs-playing .vjs-control-bar :before content: "" .vjs-has-started.vjs-no-flex .vjs-control-bar display: table .video-js .vjs-control font-weight: bold flex: none height: 100% margin: 0 outline: none padding: 0 position: relative text-align: center width: 4em &:before font-size: 1.8em line-height: 1.67 &:focus:before, &:hover:before, &:focus box-shadow: inset 0 -3px $videoplayer-controls-color .vjs-control-text border: 0 clip: rect(0 0 0 0) height: 1px margin: -1px overflow: hidden padding: 0 position: absolute width: 1px .vjs-custom-control-spacer display: none .vjs-progress-control -webkit-box-flex: auto -moz-box-flex: auto -webkit-flex: auto -ms-flex: auto flex: auto display: -webkit-box display: -webkit-flex display: -ms-flexbox display: flex -webkit-box-align: center -webkit-align-items: center -ms-flex-align: center align-items: center min-width: 4em .vjs-progress-holder -webkit-box-flex: auto -moz-box-flex: auto -webkit-flex: auto -ms-flex: auto flex: auto -webkit-transition: all 0.2s -moz-transition: all 0.2s -o-transition: all 0.2s transition: all 0.2s height: $videoplayer-progress-bar-height .vjs-play-progress position: absolute display: block height: $videoplayer-progress-bar-height margin: 0 padding: 0 width: 0 left: 0 top: 0 .vjs-load-progress position: absolute display: block height: $videoplayer-progress-bar-height margin: 0 padding: 0 width: 0 left: 0 top: 0 div position: absolute display: block height: $videoplayer-progress-bar-height margin: 0 padding: 0 width: 0 left: 0 top: 0 .vjs-mouse-display:before display: none .vjs-play-progress background-color: $videoplayer-controls-color border-radius: 999em &:before position: absolute top: -($videoplayer-progress-bar-height / 2) // halfway the height of the progress bar right: -0.5em &:after display: none position: absolute top: -3.4em right: -1.5em color: black content: attr(data-current-time) padding: 6px 8px 8px 8px background-color: $videoplayer-controls-color &:before, &:after z-index: 1 .vjs-time-tooltip color: $videoplayer-controls-color background-color: $videoplayer-background-color z-index: 1 &:after border-top-color: $videoplayer-background-color !important .vjs-load-progress background-color: darken($videoplayer-background-color, 10%) div background: rgba($videoplayer-controls-color, .33) &.vjs-no-flex .vjs-progress-control width: auto // Little marker when you mouse over .vjs-progress-control .vjs-mouse-display display: none position: absolute .vjs-time-tooltip background-color: $videoplayer-controls-color border-radius: $border-radius color: $videoplayer-background-color font-family: $font-family-base font-size: 1.2em font-weight: bold padding: 5px 8px position: absolute top: -40px z-index: 2 &:after border: thick solid transparent border-top-color: $videoplayer-controls-color bottom: -10px content: ' ' height: 10px left: 50% position: absolute transform: translateX(-50%) width: 2px .vjs-live .vjs-progress-control display: none .vjs-no-flex .vjs-control display: table-cell vertical-align: middle /* If we let the font size grow as much as everything else, the current time tooltip ends up *ginormous. If you'd like to enable the current time tooltip all the time, this should be disabled *to avoid a weird hitch when you roll off the hover. */ .vjs-no-flex .vjs-progress-control .vjs-mouse-display z-index: 0 .video-js .vjs-progress-control:hover .vjs-mouse-display display: block &.vjs-user-inactive .vjs-progress-control .vjs-mouse-display visibility: hidden opacity: 0 -webkit-transition: visibility 1s, opacity .5s -moz-transition: visibility 1s, opacity .5s -o-transition: visibility 1s, opacity .5s transition: visibility 1s, opacity .5s &:after visibility: hidden opacity: 0 -webkit-transition: visibility 1s, opacity .5s -moz-transition: visibility 1s, opacity .5s -o-transition: visibility 1s, opacity .5s transition: visibility 1s, opacity .5s &.vjs-no-flex .vjs-progress-control .vjs-mouse-display display: none &:after display: none .vjs-progress-control .vjs-mouse-display:after color: $videoplayer-controls-color background-color: black background-color: rgba(0, 0, 0, 0.8) .vjs-slider outline: 0 position: relative cursor: pointer padding: 0 margin: 0 0.45em 0 0.45em background-color: rgba(darken($videoplayer-background-color, 10%), .5) .vjs-mute-control, .vjs-volume-menu-button cursor: pointer -webkit-box-flex: none -moz-box-flex: none -webkit-flex: none -ms-flex: none flex: none .vjs-volume-control width: 5em display: -webkit-box display: -webkit-flex display: -ms-flexbox display: flex -webkit-box-align: center -webkit-align-items: center -ms-flex-align: center align-items: center .vjs-volume-bar margin: 1.35em 0.45em .vjs-volume-bar &.vjs-slider-vertical width: 0.3em height: 5em margin: 1.35em auto .vjs-volume-level height: 100% width: 0.3em &:before top: -0.5em left: -0.3em .video-js .vjs-volume-level position: absolute bottom: 0 left: 0 background-color: $videoplayer-controls-color &:before position: absolute font-size: 0.9em .vjs-slider-horizontal .vjs-volume-level height: $videoplayer-progress-bar-height &:before top: -$videoplayer-progress-bar-height right: -0.5em .vjs-menu-button-popup &.vjs-volume-menu-button .vjs-menu display: block width: 0 height: 0 border-top-color: transparent &.vjs-volume-menu-button-vertical .vjs-menu left: 0.5em height: 8em &.vjs-volume-menu-button-horizontal .vjs-menu left: -2em &.vjs-volume-menu-button .vjs-menu-content height: 0 width: 0 overflow-x: hidden overflow-y: hidden .vjs-volume-menu-button-vertical &:hover .vjs-menu-content, &:focus .vjs-menu-content, &.vjs-slider-active .vjs-menu-content, .vjs-lock-showing .vjs-menu-content height: 8em width: 2.9em .vjs-volume-menu-button-horizontal &:hover .vjs-menu-content, &:focus .vjs-menu-content, .vjs-slider-active .vjs-menu-content, .vjs-lock-showing .vjs-menu-content height: 2.9em width: 8em .vjs-volume-menu-button.vjs-menu-button-inline .vjs-menu-content background-color: transparent !important .vjs-poster display: inline-block vertical-align: middle background-repeat: no-repeat background-position: 50% 50% background-size: contain cursor: pointer margin: 0 padding: 0 position: absolute top: 0 right: 0 bottom: 0 left: 0 height: 100% img display: block vertical-align: middle margin: 0 auto max-height: 100% padding: 0 width: 100% .vjs-has-started .vjs-poster display: none .vjs-audio.vjs-has-started .vjs-poster display: block .vjs-controls-disabled .vjs-poster, .vjs-using-native-controls .vjs-poster display: none .video-js .vjs-live-control display: -webkit-box display: -webkit-flex display: -ms-flexbox display: flex -webkit-box-align: flex-start -webkit-align-items: flex-start -ms-flex-align: flex-start align-items: flex-start -webkit-box-flex: auto -moz-box-flex: auto -webkit-flex: auto -ms-flex: auto flex: auto font-size: 1em line-height: 3em .vjs-no-flex .vjs-live-control display: table-cell width: auto text-align: left .video-js .vjs-time-control -webkit-box-flex: none -moz-box-flex: none -webkit-flex: none -ms-flex: none flex: none font-size: 1em line-height: 3em min-width: 2em width: auto padding-left: 1em padding-right: 1em .vjs-live .vjs-time-control, .video-js .vjs-current-time, .vjs-no-flex .vjs-current-time, .video-js .vjs-duration, .vjs-no-flex .vjs-duration display: none .vjs-time-divider display: none line-height: 3em .vjs-live .vjs-time-divider display: none .video-js .vjs-play-control cursor: pointer -webkit-box-flex: none -moz-box-flex: none -webkit-flex: none -ms-flex: none flex: none .vjs-text-track-display position: absolute bottom: 3em left: 0 right: 0 top: 0 pointer-events: none .video-js &.vjs-user-inactive.vjs-playing .vjs-text-track-display bottom: 1em .vjs-text-track font-size: 1.4em text-align: center margin-bottom: 0.1em background-color: black background-color: rgba(0, 0, 0, 0.5) .vjs-subtitles color: $videoplayer-controls-color .vjs-captions color: #fc6 .vjs-tt-cue display: block video::-webkit-media-text-track-display -moz-transform: translateY(-3em) -ms-transform: translateY(-3em) -o-transform: translateY(-3em) -webkit-transform: translateY(-3em) transform: translateY(-3em) .video-js &.vjs-user-inactive.vjs-playing video::-webkit-media-text-track-display -moz-transform: translateY(-1.5em) -ms-transform: translateY(-1.5em) -o-transform: translateY(-1.5em) -webkit-transform: translateY(-1.5em) transform: translateY(-1.5em) .vjs-fullscreen-control cursor: pointer -webkit-box-flex: none -moz-box-flex: none -webkit-flex: none -ms-flex: none flex: none .vjs-playback-rate .vjs-playback-rate-value font-size: 1.25em line-height: 2 position: absolute top: 3px left: 0 width: 100% height: 100% text-align: center .vjs-menu width: 4em left: 0em .vjs-error .vjs-error-display .vjs-modal-dialog-content font-size: 1.4em text-align: center &:before color: $videoplayer-controls-color content: 'X' font-size: 4em left: 0 line-height: 1 margin-top: -0.5em position: absolute text-shadow: 0.05em 0.05em 0.1em black text-align: center top: 50% vertical-align: middle width: 100% .vjs-loading-spinner display: none position: absolute top: 50% left: 50% margin: -25px 0 0 -25px opacity: 0.85 text-align: left border: 6px solid rgba($videoplayer-background-color, .7) box-sizing: border-box background-clip: padding-box width: 50px height: 50px border-radius: 25px .vjs-seeking .vjs-loading-spinner, .vjs-waiting .vjs-loading-spinner display: block .vjs-loading-spinner &:before, &:after content: "" position: absolute margin: -6px box-sizing: inherit width: inherit height: inherit border-radius: inherit opacity: 1 border: inherit border-color: transparent border-top-color: $videoplayer-controls-color .vjs-seeking .vjs-loading-spinner &:before, &:after -webkit-animation: vjs-spinner-spin 1.1s cubic-bezier(0.6, 0.2, 0, 0.8) infinite, vjs-spinner-fade 1.1s linear infinite animation: vjs-spinner-spin 1.1s cubic-bezier(0.6, 0.2, 0, 0.8) infinite, vjs-spinner-fade 1.1s linear infinite .vjs-waiting .vjs-loading-spinner &:before, &:after -webkit-animation: vjs-spinner-spin 1.1s cubic-bezier(0.6, 0.2, 0, 0.8) infinite, vjs-spinner-fade 1.1s linear infinite animation: vjs-spinner-spin 1.1s cubic-bezier(0.6, 0.2, 0, 0.8) infinite, vjs-spinner-fade 1.1s linear infinite .vjs-seeking .vjs-loading-spinner:before, .vjs-waiting .vjs-loading-spinner:before border-top-color: $videoplayer-controls-color .vjs-seeking .vjs-loading-spinner:after, .vjs-waiting .vjs-loading-spinner:after border-top-color: $videoplayer-controls-color -webkit-animation-delay: 0.44s animation-delay: 0.44s @keyframes vjs-spinner-spin 100% transform: rotate(360deg) @-webkit-keyframes vjs-spinner-spin 100% -webkit-transform: rotate(360deg) @keyframes vjs-spinner-fade 0% border-top-color: #73859f 20% border-top-color: #73859f 35% border-top-color: $videoplayer-controls-color 60% border-top-color: #73859f 100% border-top-color: #73859f @-webkit-keyframes vjs-spinner-fade 0% border-top-color: #73859f 20% border-top-color: #73859f 35% border-top-color: $videoplayer-controls-color 60% border-top-color: #73859f 100% border-top-color: #73859f .vjs-chapters-button .vjs-menu ul width: 24em .video-js &.vjs-layout-tiny:not(.vjs-fullscreen) .vjs-custom-control-spacer -webkit-box-flex: auto -moz-box-flex: auto -webkit-flex: auto -ms-flex: auto flex: auto &.vjs-no-flex .vjs-custom-control-spacer width: auto .vjs-current-time, .vjs-time-divider, .vjs-duration, .vjs-remaining-time, .vjs-playback-rate, .vjs-progress-control, .vjs-mute-control, .vjs-volume-control, .vjs-volume-menu-button, .vjs-chapters-button, .vjs-captions-button, .vjs-subtitles-button display: none &.vjs-layout-x-small:not(.vjs-fullscreen) .vjs-current-time, .vjs-time-divider, .vjs-duration, .vjs-remaining-time, .vjs-playback-rate, .vjs-mute-control, .vjs-volume-control, .vjs-volume-menu-button, .vjs-chapters-button, .vjs-captions-button, .vjs-subtitles-button display: none &.vjs-layout-small:not(.vjs-fullscreen) .vjs-current-time, .vjs-time-divider, .vjs-duration, .vjs-remaining-time, .vjs-playback-rate, .vjs-mute-control, .vjs-volume-control, .vjs-chapters-button, .vjs-captions-button, .vjs-subtitles-button display: none .vjs-caption-settings position: relative top: 1em background-color: $videoplayer-background-color background-color: rgba(43, 51, 63, 0.75) color: $videoplayer-controls-color margin: 0 auto padding: 0.5em height: 15em font-size: 12px width: 40em .vjs-tracksettings top: 0 bottom: 2em left: 0 right: 0 position: absolute overflow: auto .vjs-tracksettings-colors, .vjs-tracksettings-font float: left .vjs-tracksettings-colors:after, .vjs-tracksettings-font:after clear: both .vjs-tracksettings-controls &:after clear: both position: absolute bottom: 1em right: 1em .vjs-tracksetting margin: 5px padding: 3px min-height: 40px label display: block width: 100px margin-bottom: 5px span display: inline margin-left: 5px > div margin-bottom: 5px min-height: 20px &:last-child margin-bottom: 0 padding-bottom: 0 min-height: 0 label > input margin-right: 10px input[type="button"] width: 40px height: 40px .video-js .vjs-modal-dialog background: rgba(0, 0, 0, 0.8) background: -webkit-linear-gradient(-90deg, rgba(0, 0, 0, 0.8), rgba(255, 255, 255, 0)) background: linear-gradient(180deg, rgba(0, 0, 0, 0.8), rgba(255, 255, 255, 0)) .vjs-modal-dialog .vjs-modal-dialog-content font-size: 1.2em line-height: 1.5 padding: 20px 24px z-index: 1 .video-js .vjs-volume-vertical width: 3em height: 8em bottom: 8em background-color: #2B333F background-color: $videoplayer-background-color .vjs-volume-panel display: -webkit-box display: -webkit-flex display: -ms-flexbox display: flex -webkit-transition: width .5s -moz-transition: width .5s -ms-transition: width .5s -o-transition: width .5s transition: width .5s &:hover .vjs-volume-control, &:active .vjs-volume-control, &:focus .vjs-volume-control visibility: visible opacity: 1 position: relative -webkit-transition: visibility 0.1s, opacity 0.1s, height 0.1s, width 0.1s, left 0s, top 0s -moz-transition: visibility 0.1s, opacity 0.1s, height 0.1s, width 0.1s, left 0s, top 0s -ms-transition: visibility 0.1s, opacity 0.1s, height 0.1s, width 0.1s, left 0s, top 0s -o-transition: visibility 0.1s, opacity 0.1s, height 0.1s, width 0.1s, left 0s, top 0s transition: visibility 0.1s, opacity 0.1s, height 0.1s, width 0.1s, left 0s, top 0s .vjs-volume-control visibility: visible opacity: 0 width: 1px height: 1px margin-left: -1px &:hover, &:active, &:focus visibility: visible opacity: 1 position: relative -webkit-transition: visibility 0.1s, opacity 0.1s, height 0.1s, width 0.1s, left 0s, top 0s -moz-transition: visibility 0.1s, opacity 0.1s, height 0.1s, width 0.1s, left 0s, top 0s -ms-transition: visibility 0.1s, opacity 0.1s, height 0.1s, width 0.1s, left 0s, top 0s -o-transition: visibility 0.1s, opacity 0.1s, height 0.1s, width 0.1s, left 0s, top 0s transition: visibility 0.1s, opacity 0.1s, height 0.1s, width 0.1s, left 0s, top 0s .vjs-mute-control &:hover ~ .vjs-volume-control, &:active ~ .vjs-volume-control, &:focus ~ .vjs-volume-control visibility: visible opacity: 1 position: relative -webkit-transition: visibility 0.1s, opacity 0.1s, height 0.1s, width 0.1s, left 0s, top 0s -moz-transition: visibility 0.1s, opacity 0.1s, height 0.1s, width 0.1s, left 0s, top 0s -ms-transition: visibility 0.1s, opacity 0.1s, height 0.1s, width 0.1s, left 0s, top 0s -o-transition: visibility 0.1s, opacity 0.1s, height 0.1s, width 0.1s, left 0s, top 0s transition: visibility 0.1s, opacity 0.1s, height 0.1s, width 0.1s, left 0s, top 0s .vjs-volume-control.vjs-slider-active visibility: visible opacity: 1 position: relative -webkit-transition: visibility 0.1s, opacity 0.1s, height 0.1s, width 0.1s, left 0s, top 0s -moz-transition: visibility 0.1s, opacity 0.1s, height 0.1s, width 0.1s, left 0s, top 0s -ms-transition: visibility 0.1s, opacity 0.1s, height 0.1s, width 0.1s, left 0s, top 0s -o-transition: visibility 0.1s, opacity 0.1s, height 0.1s, width 0.1s, left 0s, top 0s transition: visibility 0.1s, opacity 0.1s, height 0.1s, width 0.1s, left 0s, top 0s &:hover .vjs-volume-control.vjs-volume-horizontal, &:active .vjs-volume-control.vjs-volume-horizontal, &:focus .vjs-volume-control.vjs-volume-horizontal width: 5em height: 3em .vjs-volume-control &:hover.vjs-volume-horizontal, &:active.vjs-volume-horizontal, &:focus.vjs-volume-horizontal width: 5em height: 3em .vjs-mute-control &:hover ~ .vjs-volume-control.vjs-volume-horizontal, &:active ~ .vjs-volume-control.vjs-volume-horizontal, &:focus ~ .vjs-volume-control.vjs-volume-horizontal width: 5em height: 3em .vjs-volume-control.vjs-slider-active.vjs-volume-horizontal width: 5em height: 3em &.vjs-volume-panel-horizontal &:hover, &:focus, &:active, &.vjs-slider-active width: 9em -webkit-transition: width 0.1s -moz-transition: width 0.1s -ms-transition: width 0.1s -o-transition: width 0.1s transition: width 0.1s .vjs-volume-control &.vjs-volume-vertical height: 8em width: 3em left: -3.5em -webkit-transition: visibility 1s, opacity .5s, height 1s 1s, width 1s 1s, left 1s 1s, top 1s 1s -moz-transition: visibility 1s, opacity .5s, height 1s 1s, width 1s 1s, left 1s 1s, top 1s 1s -ms-transition: visibility 1s, opacity .5s, height 1s 1s, width 1s 1s, left 1s 1s, top 1s 1s -o-transition: visibility 1s, opacity .5s, height 1s 1s, width 1s 1s, left 1s 1s, top 1s 1s transition: visibility 1s, opacity .5s, height 1s 1s, width 1s 1s, left 1s 1s, top 1s 1s &.vjs-volume-horizontal -webkit-transition: visibility 1s, opacity .5s, height 1s 1s, width 1s, left 1s 1s, top 1s 1s -moz-transition: visibility 1s, opacity .5s, height 1s 1s, width 1s, left 1s 1s, top 1s 1s -ms-transition: visibility 1s, opacity .5s, height 1s 1s, width 1s, left 1s 1s, top 1s 1s -o-transition: visibility 1s, opacity .5s, height 1s 1s, width 1s, left 1s 1s, top 1s 1s transition: visibility 1s, opacity .5s, height 1s 1s, width 1s, left 1s 1s, top 1s 1s &.vjs-no-flex .vjs-volume-panel .vjs-volume-control.vjs-volume-horizontal width: 5em height: 3em visibility: visible opacity: 1 position: relative -webkit-transition: none -moz-transition: none -ms-transition: none -o-transition: none transition: none .vjs-volume-control.vjs-volume-vertical, .vjs-volume-panel .vjs-volume-control.vjs-volume-vertical position: absolute bottom: 3em left: 0.5em