@font-face { font-family: MediaCmsVideoJsIcons; src: url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAAT4AAsAAAAACMQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADsAAABUIIslek9TLzIAAAFEAAAAPAAAAFY6l0dNY21hcAAAAYAAAABqAAABxPJEI45nbHlmAAAB7AAAANIAAAG4T61UQGhlYWQAAALAAAAALgAAADYZHmTsaGhlYQAAAvAAAAAYAAAAJABcADlobXR4AAADCAAAAA4AAAAgAVAAAGxvY2EAAAMYAAAAEgAAABIBvAEqbWF4cAAAAywAAAAfAAAAIAEVAExuYW1lAAADTAAAAUkAAAKmImr7xXBvc3QAAASYAAAAXwAAAIf4no6XeJxjYGRgYOBiMGCwY2BycfMJYeDLSSzJY5BiYGGAAJA8MpsxJzM9kYEDxgPKsYBpDiBmg4gCACY7BUgAeJxjYGTQYpzAwMrAwCDHoAgk2aC0OAMTAw8DkGBlZsAKAtJcUxgcPjJ+ZGcwAHJZwCQDAyOIAADEDQVjeJztkUEKxEAIBGsyZoSwT1n2QTnlkP/DvGBi6z4jQrXYiIcW2IEefAODdtFQneG29DtH+sYvd0z+9LVCmzRmS91i1+LiwGMcvPVJvf+TK7EiM9wK1HuhX0wrlOrcC/1pjgJ1L/AHpD8V1QAAeJyNkFtvwjAMhe2Y9aJGgFja8gCCNZAweKNcHtC0//+vOAlBDGlIJNEn28cnikOKwtqRpxF9Ep1tl83ZNBfen3744HJ77N1MYd0wc0qZEAFTA+fdb9/0d0rpEAFjDSdH/4JW9AG3z9uzX4jWUn5FJn2Z9LxFg5GyFL2KTPqW1g//pJBqKuPIpDvsKuo+XoEuJ1V1P/ZPjG5JM31jJk+//05l6/7Y1ybbcedQOkFq6vZF/fEDExkMhDljjhg+pxt8augEhshVKBcB6inD467W0Bp+AAB4nGNgZGBgAOJNl8rq4vltvjJwMxgARRjuvJp8Gplm0GbQBJIcDEwgDgBWfAr7AAB4nGNgZGBgMGBggJPaDIwMqIADAA4RAJZ4nGNgAAID3BgAE9ABUQAAAAAAAAAgAEAAUABgAHAAigDcAAB4nGNgZGBg4GBwYGBmAAEmIOYCQgaG/2A+AwAPpwFiAHicjZJNasJAGIbf1J9ShVJo6aabWYlQSNSldCcoCnbhIvuYTDSSZMJkFDxE79Bz9AClJ+hxSl+nsym4cAKT53u+n4RkANzhEx5Oy8OD3U/rCteM/rhBenLcJAeOW+hi4rhN/+q4g2esHXdxjzdO8Jo3NH28O77CLb4cN+i/HTfJP45bePR6jtvoey+OOwi9xHEXPe9jKZMsmhR1mCVSLep5rMp6JTf7PNLnUudcKHWdqVIM/cG59EyWUkdGJmJ9FPVhMzImFalWhZiq0sg8V6LSaidj42+NqcZBkDrvx6rAEhIJMkT8XgVqhOSETmHBaI6YVJJWdBvskbNSX9x1aV1Ip3nPbCwwhI/Bxd0zutJOiGBsj+BfPnKvceBbj2gNUsYpaxRnCUxt76k656VoKpvb0cT0Pra2q8KYpypg5/963z69+AXA8YLbAAAAeJx9x0kKgDAQBdHuOIPDSXKoaL4akERiOxxfceHSWhQ8UvRfyYoTTjnjnAsuuaLaYjT7IvpwOGuZYQTxRefN4aaHuscYIprPHpekNnhkwxI2tO+tHswqLniiGzpGHqcA) format("woff"); font-weight: normal; font-style: normal; } .vjs-icon-default-view { font-family: MediaCmsVideoJsIcons; font-weight: normal; font-style: normal; } .vjs-icon-default-view:before { content: "\f101"; } .vjs-icon-theater-view { font-family: MediaCmsVideoJsIcons; font-weight: normal; font-style: normal; } .vjs-icon-theater-view:before { content: "\f102"; } .vjs-icon-navigate-before { font-family: MediaCmsVideoJsIcons; font-weight: normal; font-style: normal; } .vjs-icon-navigate-before:before { content: "\f103"; } .vjs-icon-navigate-next { font-family: MediaCmsVideoJsIcons; font-weight: normal; font-style: normal; } .vjs-icon-navigate-next:before { content: "\f104"; } .vjs-icon-done { font-family: MediaCmsVideoJsIcons; font-weight: normal; font-style: normal; } .vjs-icon-done:before { content: "\f105"; } .vjs-icon-close { font-family: MediaCmsVideoJsIcons; font-weight: normal; font-style: normal; } .vjs-icon-close:before { content: "\f106"; } .vjs-icon-closed-caption { font-family: MediaCmsVideoJsIcons; font-weight: normal; font-style: normal; } .vjs-icon-closed-caption:before { content: "\f107"; } /* BIG PLAY BUTTON */ /* COLORS */ /* @note: Keep in colors 6-digits hex format. */ /* FONT SIZE */ /* DIMENSIONS */ /* SPACES */ /* ANIMATIONS */ /* FUNCTIONS */ /*@function calc_($expression) { @return $expression; }*/ /* ANIMATION KEYFRAMES */ @keyframes onHoverFullscreenToggle { 50% { font-size: 14px; margin-top: -1px; } 100% { font-size: 13px; margin-top: 0; } } @-webkit-keyframes onHoverFullscreenToggle { 50% { font-size: 14px; margin-top: -1px; } 100% { font-size: 13px; margin-top: 0; } } @keyframes onFullscreenHoverFullscreenToggle { 50% { font-size: 15px; margin-top: 1px; } 100% { font-size: 16px; margin-top: 0; } } @-webkit-keyframes onFullscreenHoverFullscreenToggle { 50% { font-size: 15px; margin-top: 1px; } 100% { font-size: 16px; margin-top: 0; } } @keyframes onDisplayingActionAnimation { 0% { transform: scale(0.5); } 10% { opacity: 1; } 100% { opacity: 0; transform: scale(1.05); } } @-webkit-keyframes onDisplayingActionAnimation { 0% { transform: scale(0.5); } 10% { opacity: 1; } 100% { opacity: 0; transform: scale(1.05); } } @-webkit-keyframes spinner-linear-spin { to { -webkit-transform: rotate(360deg); } } @keyframes spinner-linear-spin { to { transform: rotate(360deg); } } @-webkit-keyframes spinner-ease-spin { 12.5% { -webkit-transform: rotate(135deg); } 25% { -webkit-transform: rotate(270deg); } 37.5% { -webkit-transform: rotate(405deg); } 50% { -webkit-transform: rotate(540deg); } 62.5% { -webkit-transform: rotate(675deg); } 75% { -webkit-transform: rotate(810deg); } 87.5% { -webkit-transform: rotate(945deg); } to { -webkit-transform: rotate(1080deg); } } @keyframes spinner-ease-spin { 12.5% { transform: rotate(135deg); } 25% { transform: rotate(270deg); } 37.5% { transform: rotate(405deg); } 50% { transform: rotate(540deg); } 62.5% { transform: rotate(675deg); } 75% { transform: rotate(810deg); } 87.5% { transform: rotate(945deg); } to { transform: rotate(1080deg); } } @-webkit-keyframes spinner-left-spin { 0% { -webkit-transform: rotate(130deg); } 50% { -webkit-transform: rotate(-5deg); } to { -webkit-transform: rotate(130deg); } } @keyframes spinner-left-spin { 0% { transform: rotate(130deg); } 50% { transform: rotate(-5deg); } to { transform: rotate(130deg); } } @-webkit-keyframes spinner-right-spin { 0% { -webkit-transform: rotate(-130deg); } 50% { -webkit-transform: rotate(5deg); } to { -webkit-transform: rotate(-130deg); } } @keyframes spinner-right-spin { 0% { transform: rotate(-130deg); } 50% { transform: rotate(5deg); } to { transform: rotate(-130deg); } } @keyframes showPreviewThumb { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes showPreviewThumb { 0% { opacity: 0; } 100% { opacity: 1; } } /* MediaCmsVideoJsIcons FONT ICONS */ .video-js.vjs-mediacms .vjs-subtitles-control .vjs-icon-placeholder { font-family: MediaCmsVideoJsIcons; font-weight: normal; font-style: normal; } .video-js.vjs-mediacms .vjs-subtitles-control .vjs-icon-placeholder:before { content: '\f107'; } .video-js.vjs-mediacms .vjs-theater-mode-control .vjs-icon-placeholder { font-family: MediaCmsVideoJsIcons; font-weight: normal; font-style: normal; } .video-js.vjs-mediacms .vjs-theater-mode-control .vjs-icon-placeholder:before { content: '\f101'; } .video-js.vjs-mediacms .vjs-theater-mode .vjs-theater-mode-control .vjs-icon-placeholder:before { content: '\f102'; } .video-js.vjs-mediacms { font-size: 13px; color: #ffffff; width: 100%; height: 100%; overflow: hidden; outline-color: rgba(0, 0, 0, 0); outline-color: transparent; /* Doesn't work properly in Safari browser.*/ /*&.vjs-loading-video { video { opacity: 0; visibility: hidden; } }*/ } .video-js.vjs-mediacms video { width: 100%; height: 100%; max-width: 100%; max-height: 100%; outline-color: rgba(0, 0, 0, 0); outline-color: transparent; } .video-js.vjs-mediacms.vjs-native-dimensions video { width: auto; height: auto; } .video-js.vjs-mediacms.vjs-error .vjs-error-display { display: table; color: #eeeeee; text-shadow: 0.05em 0.05em 0.1em #000; } .video-js.vjs-mediacms.vjs-error .vjs-error-display:before, .video-js.vjs-mediacms.vjs-error .vjs-error-display:after { position: absolute; top: 50%; left: 0.25em; display: block; width: 52px; height: 52px; line-height: 52px; margin-top: -26px; text-align: center; font-size: 3em; } .video-js.vjs-mediacms.vjs-error .vjs-error-display:before { content: ''; border-radius: 50%; border: 4px solid #fff; } .video-js.vjs-mediacms.vjs-error .vjs-error-display:after { content: '!'; } .video-js.vjs-mediacms.vjs-error .vjs-error-display .vjs-modal-dialog-content { position: relative; display: table-cell; vertical-align: middle; text-align: initial; padding: 16px 1em 16px 80px; font-size: 1.384615em; word-break: break-all; } .video-js.vjs-mediacms .vjs-left-controls, .video-js.vjs-mediacms .vjs-right-controls { position: relative; width: auto; display: inline-block; height: 36px; overflow: hidden; } .video-js.vjs-mediacms .vjs-right-controls { float: right; } .video-js.vjs-mediacms button { /* link: https://hackernoon.com/removing-that-ugly-focus-ring-and-keeping-it-too-6c8727fefcd2 */ } .video-js.vjs-mediacms .vjs-subtitles-control { cursor: pointer; } .video-js.vjs-mediacms.vjs-subtitles-on .vjs-subtitles-control .vjs-icon-placeholder:after { content: ''; display: block; position: absolute; width: 45%; left: 27.5%; height: 0.18em; bottom: 50%; margin-bottom: -1em; background-color: #009933; } .video-js.vjs-mediacms.vjs-subtitles-on.vjs-fullscreen .vjs-subtitles-control .vjs-icon-placeholder:after { width: 42%; left: 29%; } .video-js.vjs-mediacms .vjs-text-track-cue > * { color: #fff !important; fill: #fff; background-color: #080808 !important; background-color: rgba(8, 8, 8, 0.75) !important; font-family: Roboto, 'Arial Unicode Ms', Arial, Helvetica, Verdana, 'PT Sans Caption', sans-serif !important; } .video-js.vjs-mediacms .vjs-settings-control { font-size: 1.375em; cursor: pointer; } .video-js.vjs-mediacms .vjs-settings-panel { position: absolute; bottom: 30px; right: 0; width: 23.75em; min-width: 210px; display: none; font-size: 0.8125em; z-index: +1; /*display:block; opacity: 0; height:0; visibility: hidden; @include transition( opacity 0.25s cubic-bezier(0.0,0.0,0.2,1) ); will-change:height;*/ } .video-js.vjs-mediacms .vjs-settings-panel .vjs-setting-panel-title > [role='button'] { position: relative; } .video-js.vjs-mediacms .vjs-settings-panel .vjs-setting-panel-title > [role='button']:focus { outline-color: #fff; outline-style: solid; outline-width: 1px; } .video-js.vjs-mediacms .vjs-settings-panel:focus { outline: 0; } .video-js.vjs-mediacms .vjs-settings-panel.vjs-visible-panel { display: block; /*opacity: 1; visibility: visible; height:auto;*/ } .video-js.vjs-mediacms .vjs-settings-panel .vjs-settings-panel-inner { display: block; margin: 0 0 1em; padding: 0.5em 0; border-radius: 0.2em; background-color: rgba(28, 28, 28, 0.9); text-shadow: 0 0 2px rgba(0, 0, 0, 0.5); max-height: 210px; max-height: 50vh; overflow: auto; } .video-js.vjs-mediacms .vjs-settings-panel .vjs-setting-panel-title { color: #eee; padding-bottom: 0.25em; margin-bottom: 0.5em; border-bottom: 1px solid rgba(255, 255, 255, 0.2); } .video-js.vjs-mediacms .vjs-settings-panel .vjs-setting-panel-title > *:first-child { display: inline-block; padding: 0.75em 1em; font-size: 118%; font-weight: 500; } .video-js.vjs-mediacms .vjs-settings-panel .vjs-setting-panel-title > *:first-child[role='button'] { padding: 0.5em 1em 0.5em 0; margin-left: 0.75em; margin-bottom: 0.25em 0.25em 0.5em; } .video-js.vjs-mediacms .vjs-settings-panel .vjs-setting-panel-title.vjs-settings-back > *:first-child { cursor: pointer; } .video-js.vjs-mediacms .vjs-settings-panel .vjs-setting-panel-title.vjs-settings-back > *:first-child:before { content: '\f103'; font-family: 'MediaCmsVideoJsIcons'; font-size: 1.25em; vertical-align: text-bottom; padding-right: 0.5em; } .video-js.vjs-mediacms .vjs-settings-panel .vjs-settings-menu { display: table; width: 100%; } .video-js.vjs-mediacms .vjs-settings-panel .vjs-settings-menu-item { position: relative; display: table-row; width: 100%; cursor: pointer; height: 3em; } .video-js.vjs-mediacms .vjs-settings-panel .vjs-settings-menu-item:hover, .video-js.vjs-mediacms .vjs-settings-panel .vjs-settings-menu-item:focus { outline: 0; background-color: rgba(255, 255, 255, 0.1); } .video-js.vjs-mediacms .vjs-settings-panel .vjs-settings-menu-item.vjs-selected-quality, .video-js.vjs-mediacms .vjs-settings-panel .vjs-settings-menu-item.vjs-selected-speed { position: relative; } .video-js.vjs-mediacms .vjs-settings-panel .vjs-settings-menu-item.vjs-selected-quality .vjs-setting-menu-item-content:after, .video-js.vjs-mediacms .vjs-settings-panel .vjs-settings-menu-item.vjs-selected-speed .vjs-setting-menu-item-content:after { content: '\f104'; font-family: 'MediaCmsVideoJsIcons'; font-size: 1.25em; font-weight: normal; vertical-align: text-bottom; padding-left: 0.5em; } .video-js.vjs-mediacms .vjs-settings-panel .vjs-settings-menu-item.vjs-selected-quality .vjs-setting-menu-item-content .auto-resolution-title, .video-js.vjs-mediacms .vjs-settings-panel .vjs-settings-menu-item.vjs-selected-speed .vjs-setting-menu-item-content .auto-resolution-title { font-weight: lighter; color: #eeeeee; } .video-js.vjs-mediacms .vjs-settings-panel .vjs-setting-menu-item-label, .video-js.vjs-mediacms .vjs-settings-panel .vjs-setting-menu-item-content { display: table-cell; vertical-align: middle; padding: 0 1em; line-height: 1; font-size: 118%; } .video-js.vjs-mediacms .vjs-settings-panel .vjs-setting-menu-item-label { font-weight: 500; } .video-js.vjs-mediacms .vjs-settings-panel .vjs-setting-menu-item-content { text-align: right; font-weight: 700; } .video-js.vjs-mediacms .vjs-settings-panel .vjs-setting-menu-item-content.auto-resolution { font-size: 109%; font-weight: 400; } .video-js.vjs-mediacms .vjs-settings-panel.vjs-playback-speed-panel, .video-js.vjs-mediacms .vjs-settings-panel.vjs-resolutions-panel, .video-js.vjs-mediacms .vjs-settings-panel.vjs-subtitles-panel { z-index: +1; } .video-js.vjs-mediacms .vjs-settings-panel.vjs-playback-speed-panel .vjs-settings-menu-item .vjs-setting-menu-item-content, .video-js.vjs-mediacms .vjs-settings-panel.vjs-resolutions-panel .vjs-settings-menu-item .vjs-setting-menu-item-content, .video-js.vjs-mediacms .vjs-settings-panel.vjs-subtitles-panel .vjs-settings-menu-item .vjs-setting-menu-item-content { text-align: left; padding-left: 2.75em; } .video-js.vjs-mediacms .vjs-settings-panel.vjs-playback-speed-panel .vjs-settings-menu-item.vjs-selected-menu-item .vjs-setting-menu-item-content, .video-js.vjs-mediacms .vjs-settings-panel.vjs-resolutions-panel .vjs-settings-menu-item.vjs-selected-menu-item .vjs-setting-menu-item-content, .video-js.vjs-mediacms .vjs-settings-panel.vjs-subtitles-panel .vjs-settings-menu-item.vjs-selected-menu-item .vjs-setting-menu-item-content { position: relative; padding-left: 0.75em; } .video-js.vjs-mediacms .vjs-settings-panel.vjs-playback-speed-panel .vjs-settings-menu-item.vjs-selected-menu-item .vjs-setting-menu-item-content:before, .video-js.vjs-mediacms .vjs-settings-panel.vjs-resolutions-panel .vjs-settings-menu-item.vjs-selected-menu-item .vjs-setting-menu-item-content:before, .video-js.vjs-mediacms .vjs-settings-panel.vjs-subtitles-panel .vjs-settings-menu-item.vjs-selected-menu-item .vjs-setting-menu-item-content:before { content: '\f105'; font-family: 'MediaCmsVideoJsIcons'; font-size: 1.25em; line-height: 0.75; padding-right: 0.5em; float: left; } .video-js.vjs-mediacms .vjs-button.vjs-play-control, .video-js.vjs-mediacms .vjs-button.vjs-next-button, .video-js.vjs-mediacms .vjs-button.vjs-previous-button { overflow: hidden; cursor: pointer; } .video-js.vjs-mediacms .vjs-button.vjs-next-button, .video-js.vjs-mediacms .vjs-button.vjs-previous-button { font-family: VideoJS; font-weight: 400; font-style: normal; } .video-js.vjs-mediacms .vjs-button.vjs-next-button .vjs-icon-placeholder:before { content: '\f11f'; } .video-js.vjs-mediacms .vjs-button.vjs-previous-button .vjs-icon-placeholder:before { content: '\f120'; } .video-js.vjs-mediacms .vjs-big-play-button { width: 2.65em; height: 1.49062em; line-height: 1.49062em; font-size: 2.5em; outline: 0; border: 0; border-radius: 0.15em; background-color: #000000; background-color: rgba(0, 0, 0, 0.7); transition-duration: 0.2s; top: 50%; left: 50%; margin-left: -1.325em; margin-top: -0.74531em; } .video-js.vjs-mediacms.vjs-changing-resolution .vjs-big-play-button { display: none; } .video-js.vjs-mediacms .vjs-bottom-bg { position: absolute; bottom: 0; left: -12px; right: -12px; height: 36px; display: block; pointer-events: none; background: rgba(0, 0, 0, 0.1); background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 100%); background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0.55))); background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 100%); background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 100%); background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 100%); background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 100%); } .video-js.vjs-mediacms .vjs-control-bar { z-index: +4; width: auto; left: 12px; right: 12px; background: none; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); } .video-js.vjs-mediacms .vjs-control-bar .vjs-button:focus { outline-width: 0; } .video-js.vjs-mediacms .vjs-control-bar .vjs-button[key-focus]:focus:after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: block; border-radius: 1px; border: 2px solid rgba(255, 255, 255, 0.75); } .video-js.vjs-mediacms .vjs-control-bar .vjs-button .vjs-icon-placeholder:before { margin-top: -2px; } .video-js.vjs-mediacms .vjs-menu-button .vjs-menu-content { background-color: #000000; background-color: rgba(0, 0, 0, 0.7); } .video-js.vjs-mediacms .vjs-slider { background-color: #ffffff; background-color: rgba(255, 255, 255, 0.25); } .video-js.vjs-mediacms .vjs-slider:focus { text-shadow: none; box-shadow: none; } .video-js.vjs-mediacms .vjs-slider-bar { background: rgba(255, 255, 255, 0.25); } .video-js.vjs-mediacms .vjs-slider-bar.vjs-play-progress { background-color: #ffffff; } .video-js.vjs-mediacms .vjs-load-progress { background: none; } .video-js.vjs-mediacms .vjs-load-progress div { background-color: #ffffff; background-color: rgba(255, 255, 255, 0.25); } .video-js.vjs-mediacms .vjs-volume-level { background: #ffffff; } .video-js.vjs-mediacms .vjs-volume-level:before { line-height: 1; top: -4px; font-size: 12px; } .video-js.vjs-mediacms .vjs-time-divider, .video-js.vjs-mediacms .vjs-duration, .video-js.vjs-mediacms .vjs-current-time, .video-js.vjs-mediacms.vjs-no-flex .vjs-duration, .video-js.vjs-mediacms.vjs-no-flex .vjs-current-time { display: block; } .video-js.vjs-mediacms .vjs-current-time { margin-left: 0.45em; } .video-js.vjs-mediacms .vjs-control { display: inline-block; float: left; padding: 0; min-width: 0; width: 36px; line-height: 34px; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); } .video-js.vjs-mediacms .vjs-control:focus:before, .video-js.vjs-mediacms .vjs-control:hover:before, .video-js.vjs-mediacms .vjs-control:focus { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); } .video-js.vjs-mediacms .vjs-control.vjs-mute-control.vjs-vol-1 .vjs-icon-placeholder:before { margin-left: -0.17em; } .video-js.vjs-mediacms .vjs-control.vjs-mute-control.vjs-vol-2 .vjs-icon-placeholder:before { margin-left: -0.08em; } .video-js.vjs-mediacms .vjs-control.vjs-disabled.vjs-picture-in-picture-control { display: none; } .video-js.vjs-mediacms .vjs-progress-control { position: absolute; top: -0.3em; left: 0; display: block; flex: none; width: 100%; height: auto; z-index: +1; padding-top: 29px; height: 30px; -webkit-tap-highlight-color: transparent; -moz-tap-highlight-color: transparent; -o-tap-highlight-color: transparent; tap-highlight-color: transparent; } .video-js.vjs-mediacms .vjs-progress-control .vjs-play-progress .vjs-time-tooltip, .video-js.vjs-mediacms .vjs-progress-control .vjs-mouse-display .vjs-time-tooltip { line-height: 1; font-size: 11px; font-weight: 600; height: auto; padding: 8px 12px; border-radius: 2px; } .video-js.vjs-mediacms .vjs-progress-control .vjs-progress-holder { height: 0.3em; margin: 0; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05); } .video-js.vjs-mediacms .vjs-progress-control .vjs-progress-holder:focus { outline-width: 0; } .video-js.vjs-mediacms .vjs-progress-control .vjs-progress-holder[key-focus]:focus:after { content: ''; position: absolute; top: -3px; left: -3px; right: -3px; bottom: -3px; display: block; border-radius: 1px; border: 2px solid rgba(255, 255, 255, 0.75); } .video-js.vjs-mediacms .vjs-progress-control .vjs-progress-holder .vjs-play-progress { line-height: 1em; } .video-js.vjs-mediacms .vjs-progress-control .vjs-progress-holder .vjs-play-progress:before { top: 50%; margin-top: -0.5em; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); } .video-js.vjs-mediacms .vjs-progress-control .vjs-play-progress:before { font-size: 1em; display: none; } .video-js.vjs-mediacms .vjs-progress-control:hover .vjs-play-progress:before, .video-js.vjs-mediacms .vjs-progress-control .vjs-progress-holder:focus .vjs-play-progress:before { display: block; } .video-js.vjs-mediacms .vjs-progress-control:hover .vjs-progress-holder, .video-js.vjs-mediacms .vjs-progress-control .vjs-progress-holder:focus { font-size: 1.2875em; } .video-js.vjs-mediacms .vjs-progress-control:hover .vjs-play-progress .vjs-time-tooltip, .video-js.vjs-mediacms .vjs-progress-control:hover .vjs-progress-holder:focus .vjs-play-progress .vjs-time-tooltip { display: none; } .video-js.vjs-mediacms .vjs-time-control { display: inline-block; float: left; min-width: 0; height: 36px; line-height: 34px; width: auto; padding: 1px 0 0; text-align: center; font-size: 0.975em; } .video-js.vjs-mediacms .vjs-time-control.vjs-time-divider { min-width: 1em; text-align: center; } .video-js.vjs-mediacms .vjs-fullscreen-control { overflow: hidden; cursor: pointer; } .video-js.vjs-mediacms .vjs-fullscreen-control:hover { animation-duration: 0.4s; animation-name: onHoverFullscreenToggle; } .video-js.vjs-mediacms .vjs-theater-mode-control { overflow: hidden; cursor: pointer; } .video-js.vjs-mediacms .vjs-volume-panel.vjs-volume-panel-horizontal { min-width: 36px; width: 0; overflow: hidden; } .video-js.vjs-mediacms .vjs-volume-panel.vjs-volume-panel-horizontal:hover, .video-js.vjs-mediacms .vjs-volume-panel.vjs-volume-panel-horizontal:active, .video-js.vjs-mediacms .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active { width: 9em; transition: all 0s; } .video-js.vjs-mediacms .vjs-volume-panel .vjs-volume-control { position: absolute; top: 0; left: 36px; height: 36px; width: 0; visibility: visible; opacity: 1; } .video-js.vjs-mediacms .vjs-volume-panel .vjs-volume-control.vjs-volume-horizontal { margin-left: 0.45em; margin-right: 0.45em; transition: all 0s; } .video-js.vjs-mediacms .vjs-volume-panel:hover .vjs-volume-control.vjs-volume-horizontal, .video-js.vjs-mediacms .vjs-volume-panel:active .vjs-volume-control.vjs-volume-horizontal, .video-js.vjs-mediacms .vjs-volume-panel:focus .vjs-volume-control.vjs-volume-horizontal, .video-js.vjs-mediacms .vjs-volume-panel .vjs-volume-control:hover.vjs-volume-horizontal, .video-js.vjs-mediacms .vjs-volume-panel .vjs-volume-control:active.vjs-volume-horizontal, .video-js.vjs-mediacms .vjs-volume-panel .vjs-mute-control:hover ~ .vjs-volume-control.vjs-volume-horizontal, .video-js.vjs-mediacms .vjs-volume-panel .vjs-volume-control.vjs-slider-active.vjs-volume-horizontal { position: absolute; width: 5.5em; height: 36px; } .video-js.vjs-mediacms .vjs-volume-panel .vjs-volume-bar:focus { outline-width: 0; } .video-js.vjs-mediacms .vjs-volume-panel .vjs-volume-bar[key-focus]:focus:after { content: ''; position: absolute; top: -1em; left: -0.5em; right: -0.5em; bottom: -1em; display: block; border-radius: 1px; border: 2px solid rgba(255, 255, 255, 0.75); } .video-js.vjs-mediacms .vjs-volume-panel .vjs-volume-bar.vjs-slider-horizontal { margin: 16.5px 0.45em 16.5px 0; } .video-js.vjs-mediacms .vjs-volume-panel .vjs-volume-bar.vjs-slider-horizontal, .video-js.vjs-mediacms .vjs-volume-panel .vjs-volume-bar.vjs-slider-horizontal .vjs-volume-level { height: 3px; } .video-js.vjs-mediacms .vjs-volume-panel.vjs-volume-panel-horizontal, .video-js.vjs-mediacms .vjs-volume-panel.vjs-volume-panel-horizontal:hover { transition: width 0.35s linear; /* transition: width 0s linear; */ } .video-js.vjs-mediacms .vjs-volume-panel .vjs-volume-control.vjs-volume-horizontal, .video-js.vjs-mediacms .vjs-volume-panel:hover .vjs-volume-control.vjs-volume-horizontal, .video-js.vjs-mediacms .vjs-volume-panel:active .vjs-volume-control.vjs-volume-horizontal, .video-js.vjs-mediacms .vjs-volume-panel:focus .vjs-volume-control.vjs-volume-horizontal, .video-js.vjs-mediacms .vjs-volume-panel .vjs-volume-control:hover.vjs-volume-horizontal, .video-js.vjs-mediacms .vjs-volume-panel .vjs-volume-control:active.vjs-volume-horizontal, .video-js.vjs-mediacms .vjs-volume-panel .vjs-mute-control:hover ~ .vjs-volume-control.vjs-volume-horizontal, .video-js.vjs-mediacms .vjs-volume-panel .vjs-volume-control.vjs-slider-active.vjs-volume-horizontal { transition: width 0.2s linear; transition-delay: 0.15s; /* transition: width 0s linear; transition-delay: 0s; */ } .video-js.vjs-mediacms .vjs-actions-anim { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; position: absolute; top: 50%; left: 50%; width: 7.375em; height: 7.375em; line-height: 7.375em; margin-top: -3.6875em; margin-left: -3.6875em; display: block; text-align: center; border-radius: 50%; color: #eee; background-color: rgba(0, 0, 0, 0.25); visibility: hidden; opacity: 0; } .video-js.vjs-mediacms .vjs-actions-anim span { display: block; } .video-js.vjs-mediacms .vjs-actions-anim span:after { content: ''; font-family: VideoJS; font-weight: normal; font-style: normal; font-size: 42px; } .video-js.vjs-mediacms .vjs-actions-anim.just-paused span:after { content: '\f103'; } .video-js.vjs-mediacms .vjs-actions-anim.started-playing span:after { content: '\f101'; } .video-js.vjs-mediacms .vjs-actions-anim.volume-high span:after { content: '\f107'; } .video-js.vjs-mediacms .vjs-actions-anim.volume-mid span:after { content: '\f106'; } .video-js.vjs-mediacms .vjs-actions-anim.volume-low span:after { content: '\f105'; } .video-js.vjs-mediacms .vjs-actions-anim.volume-mute span:after { content: '\f104'; } .video-js.vjs-mediacms .vjs-actions-anim.moving-backward span:after { content: '\f116'; } .video-js.vjs-mediacms .vjs-actions-anim.moving-forward span { transform: scale(-1, 1); } .video-js.vjs-mediacms .vjs-actions-anim.moving-forward span:after { content: '\f116'; } .video-js.vjs-mediacms .vjs-actions-anim.moving-backward:before, .video-js.vjs-mediacms .vjs-actions-anim.moving-forward:before { content: '5'; position: absolute; top: 2px; left: 0; right: 0; bottom: 0; display: block; font-size: 10px; font-weight: 700; font-family: Arial, sans-serif; } .video-js.vjs-mediacms .vjs-actions-anim.play_previous span:after { content: '\f120'; } .video-js.vjs-mediacms .vjs-actions-anim.play_next span:after { content: '\f11f'; } .video-js.vjs-mediacms .vjs-corner-layer { position: absolute; display: block; z-index: +1; } .video-js.vjs-mediacms .vjs-corner-layer.vjs-corner-top-left, .video-js.vjs-mediacms .vjs-corner-layer.vjs-corner-top-right { top: 12px; } .video-js.vjs-mediacms .vjs-corner-layer.vjs-corner-bottom-left, .video-js.vjs-mediacms .vjs-corner-layer.vjs-corner-bottom-right { bottom: 12px; transition-duration: 0.1s; transition-property: bottom; } .video-js.vjs-mediacms .vjs-corner-layer.vjs-corner-top-left, .video-js.vjs-mediacms .vjs-corner-layer.vjs-corner-bottom-left { left: 12px; } .video-js.vjs-mediacms .vjs-corner-layer.vjs-corner-top-right, .video-js.vjs-mediacms .vjs-corner-layer.vjs-corner-bottom-right { right: 12px; } .video-js.vjs-mediacms.vjs-fullscreen-change .vjs-volume-panel.vjs-volume-panel-horizontal, .video-js.vjs-mediacms.vjs-fullscreen-change .vjs-volume-panel.vjs-volume-panel-horizontal:hover { transition: width 0s linear; } .video-js.vjs-mediacms.vjs-fullscreen-change .vjs-volume-panel .vjs-volume-control.vjs-volume-horizontal, .video-js.vjs-mediacms.vjs-fullscreen-change .vjs-volume-panel:hover .vjs-volume-control.vjs-volume-horizontal, .video-js.vjs-mediacms.vjs-fullscreen-change .vjs-volume-panel:active .vjs-volume-control.vjs-volume-horizontal, .video-js.vjs-mediacms.vjs-fullscreen-change .vjs-volume-panel:focus .vjs-volume-control.vjs-volume-horizontal, .video-js.vjs-mediacms.vjs-fullscreen-change .vjs-volume-panel .vjs-volume-control:hover.vjs-volume-horizontal, .video-js.vjs-mediacms.vjs-fullscreen-change .vjs-volume-panel .vjs-volume-control:active.vjs-volume-horizontal, .video-js.vjs-mediacms.vjs-fullscreen-change .vjs-volume-panel .vjs-mute-control:hover ~ .vjs-volume-control.vjs-volume-horizontal, .video-js.vjs-mediacms.vjs-fullscreen-change .vjs-volume-panel .vjs-volume-control.vjs-slider-active.vjs-volume-horizontal { transition: width 0s linear; transition-delay: 0s; } .video-js.vjs-mediacms.vjs-has-started .vjs-control-bar, .video-js.vjs-mediacms.vjs-changing-resolution .vjs-control-bar { display: block; height: 66px; padding-top: 30px; transition-duration: 0.1s; transition-property: transform, opacity, visibility; } .video-js.vjs-mediacms.vjs-has-started .vjs-actions-anim.active-anim, .video-js.vjs-mediacms.vjs-changing-resolution .vjs-actions-anim.active-anim { visibility: visible; animation-duration: 0.75s; animation-name: onDisplayingActionAnimation; } .video-js.vjs-mediacms.vjs-has-started .vjs-corner-layer.vjs-corner-bottom-left, .video-js.vjs-mediacms.vjs-has-started .vjs-corner-layer.vjs-corner-bottom-right, .video-js.vjs-mediacms.vjs-changing-resolution .vjs-corner-layer.vjs-corner-bottom-left, .video-js.vjs-mediacms.vjs-changing-resolution .vjs-corner-layer.vjs-corner-bottom-right { bottom: 48px; } .video-js.vjs-mediacms.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-corner-layer.vjs-corner-bottom-left, .video-js.vjs-mediacms.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-corner-layer.vjs-corner-bottom-right, .video-js.vjs-mediacms.vjs-changing-resolution.vjs-user-inactive.vjs-playing .vjs-corner-layer.vjs-corner-bottom-left, .video-js.vjs-mediacms.vjs-changing-resolution.vjs-user-inactive.vjs-playing .vjs-corner-layer.vjs-corner-bottom-right { bottom: 12px; } .video-js.vjs-mediacms.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar, .video-js.vjs-mediacms.vjs-changing-resolution.vjs-user-inactive.vjs-playing .vjs-control-bar { transform: translate(0px, 36px); } .video-js.vjs-mediacms.vjs-fullscreen { font-size: 16px; } .video-js.vjs-mediacms.vjs-fullscreen .vjs-left-controls, .video-js.vjs-mediacms.vjs-fullscreen .vjs-right-controls { height: 52px; } .video-js.vjs-mediacms.vjs-fullscreen .vjs-theater-mode-control { display: none; } .video-js.vjs-mediacms.vjs-fullscreen .vjs-bottom-bg { height: 52px; } .video-js.vjs-mediacms.vjs-fullscreen .vjs-settings-panel { bottom: 45px; } .video-js.vjs-mediacms.vjs-fullscreen .vjs-control { width: 52px; } .video-js.vjs-mediacms.vjs-fullscreen .vjs-time-control { width: auto; } .video-js.vjs-mediacms.vjs-fullscreen .vjs-control, .video-js.vjs-mediacms.vjs-fullscreen .vjs-time-control { height: 52px; line-height: 50px; } .video-js.vjs-mediacms.vjs-fullscreen .vjs-progress-control.vjs-control { width: 100%; height: auto; } .video-js.vjs-mediacms.vjs-fullscreen .vjs-control-bar .vjs-button .vjs-icon-placeholder:before { margin-top: 2px; } .video-js.vjs-mediacms.vjs-fullscreen .vjs-control-bar .vjs-button.vjs-fullscreen-control .vjs-icon-placeholder:before { font-size: 2em; line-height: 1.5; } .video-js.vjs-mediacms.vjs-fullscreen .vjs-volume-level:before { top: -5px; font-size: 14px; } .video-js.vjs-mediacms.vjs-fullscreen .vjs-fullscreen-control:hover { animation-name: onFullscreenHoverFullscreenToggle; } .video-js.vjs-mediacms.vjs-fullscreen .vjs-play-progress .vjs-time-tooltip, .video-js.vjs-mediacms.vjs-fullscreen .vjs-mouse-display .vjs-time-tooltip { font-size: 12px; } .video-js.vjs-mediacms.vjs-fullscreen .vjs-volume-panel .vjs-volume-bar.vjs-slider-horizontal { margin: 23.5px 0.45em 23.5px 0; } .video-js.vjs-mediacms.vjs-fullscreen .vjs-volume-panel .vjs-volume-bar.vjs-slider-horizontal, .video-js.vjs-mediacms.vjs-fullscreen .vjs-volume-panel .vjs-volume-bar.vjs-slider-horizontal .vjs-volume-level { height: 5px; } .video-js.vjs-mediacms.vjs-fullscreen .vjs-volume-panel.vjs-volume-panel-horizontal { min-width: 52px; } .video-js.vjs-mediacms.vjs-fullscreen .vjs-volume-panel.vjs-volume-panel-horizontal:hover, .video-js.vjs-mediacms.vjs-fullscreen .vjs-volume-panel.vjs-volume-panel-horizontal:active, .video-js.vjs-mediacms.vjs-fullscreen .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active { width: 10em; transition: all 0s; } .video-js.vjs-mediacms.vjs-fullscreen .vjs-volume-panel .vjs-volume-control { left: 52px; height: 36px; } .video-js.vjs-mediacms.vjs-fullscreen .vjs-volume-panel .vjs-volume-control, .video-js.vjs-mediacms.vjs-fullscreen .vjs-volume-panel:hover .vjs-volume-control.vjs-volume-horizontal, .video-js.vjs-mediacms.vjs-fullscreen .vjs-volume-panel:active .vjs-volume-control.vjs-volume-horizontal, .video-js.vjs-mediacms.vjs-fullscreen .vjs-volume-panel:focus .vjs-volume-control.vjs-volume-horizontal, .video-js.vjs-mediacms.vjs-fullscreen .vjs-volume-panel .vjs-volume-control:hover.vjs-volume-horizontal, .video-js.vjs-mediacms.vjs-fullscreen .vjs-volume-panel .vjs-volume-control:active.vjs-volume-horizontal, .video-js.vjs-mediacms.vjs-fullscreen .vjs-volume-panel .vjs-mute-control:hover ~ .vjs-volume-control.vjs-volume-horizontal, .video-js.vjs-mediacms.vjs-fullscreen .vjs-volume-panel .vjs-volume-control.vjs-slider-active.vjs-volume-horizontal { height: 52px; } .video-js.vjs-mediacms.vjs-fullscreen .vjs-volume-panel.vjs-volume-panel-horizontal, .video-js.vjs-mediacms.vjs-fullscreen .vjs-volume-panel.vjs-volume-panel-horizontal:hover { transition: width 0.3s linear; } .video-js.vjs-mediacms.vjs-fullscreen .vjs-volume-panel .vjs-volume-control.vjs-volume-horizontal, .video-js.vjs-mediacms.vjs-fullscreen .vjs-volume-panel:hover .vjs-volume-control.vjs-volume-horizontal, .video-js.vjs-mediacms.vjs-fullscreen .vjs-volume-panel:active .vjs-volume-control.vjs-volume-horizontal, .video-js.vjs-mediacms.vjs-fullscreen .vjs-volume-panel:focus .vjs-volume-control.vjs-volume-horizontal, .video-js.vjs-mediacms.vjs-fullscreen .vjs-volume-panel .vjs-volume-control:hover.vjs-volume-horizontal, .video-js.vjs-mediacms.vjs-fullscreen .vjs-volume-panel .vjs-volume-control:active.vjs-volume-horizontal, .video-js.vjs-mediacms.vjs-fullscreen .vjs-volume-panel .vjs-mute-control:hover ~ .vjs-volume-control.vjs-volume-horizontal, .video-js.vjs-mediacms.vjs-fullscreen .vjs-volume-panel .vjs-volume-control.vjs-slider-active.vjs-volume-horizontal { transition: width 0.2s linear; transition-delay: 0.1s; } .video-js.vjs-mediacms.vjs-fullscreen.vjs-fullscreen-change .vjs-volume-panel.vjs-volume-panel-horizontal, .video-js.vjs-mediacms.vjs-fullscreen.vjs-fullscreen-change .vjs-volume-panel.vjs-volume-panel-horizontal:hover { transition: width 0s linear; } .video-js.vjs-mediacms.vjs-fullscreen.vjs-fullscreen-change .vjs-volume-panel .vjs-volume-control.vjs-volume-horizontal, .video-js.vjs-mediacms.vjs-fullscreen.vjs-fullscreen-change .vjs-volume-panel:hover .vjs-volume-control.vjs-volume-horizontal, .video-js.vjs-mediacms.vjs-fullscreen.vjs-fullscreen-change .vjs-volume-panel:active .vjs-volume-control.vjs-volume-horizontal, .video-js.vjs-mediacms.vjs-fullscreen.vjs-fullscreen-change .vjs-volume-panel:focus .vjs-volume-control.vjs-volume-horizontal, .video-js.vjs-mediacms.vjs-fullscreen.vjs-fullscreen-change .vjs-volume-panel .vjs-volume-control:hover.vjs-volume-horizontal, .video-js.vjs-mediacms.vjs-fullscreen.vjs-fullscreen-change .vjs-volume-panel .vjs-volume-control:active.vjs-volume-horizontal, .video-js.vjs-mediacms.vjs-fullscreen.vjs-fullscreen-change .vjs-volume-panel .vjs-mute-control:hover ~ .vjs-volume-control.vjs-volume-horizontal, .video-js.vjs-mediacms.vjs-fullscreen.vjs-fullscreen-change .vjs-volume-panel .vjs-volume-control.vjs-slider-active.vjs-volume-horizontal { transition: width 0s linear; transition-delay: 0s; } .video-js.vjs-mediacms.vjs-fullscreen .vjs-corner-layer.vjs-corner-bottom-left, .video-js.vjs-mediacms.vjs-fullscreen .vjs-corner-layer.vjs-corner-bottom-right { bottom: 64px; } .video-js.vjs-mediacms.vjs-has-started.vjs-fullscreen .vjs-control-bar, .video-js.vjs-mediacms.vjs-changing-resolution.vjs-fullscreen .vjs-control-bar { height: 82px; } .video-js.vjs-mediacms.vjs-has-started.vjs-fullscreen.vjs-user-inactive.vjs-playing .vjs-control-bar, .video-js.vjs-mediacms.vjs-changing-resolution.vjs-fullscreen.vjs-user-inactive.vjs-playing .vjs-control-bar { transform: translate(0px, 52px); } .video-js.vjs-mediacms.vjs-enabled-touch-controls .vjs-touch-controls { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); touch-action: none; pointer-events: none; z-index: +2; position: absolute; display: block; top: 0; left: 0; right: 0; bottom: 0; width: 100%; background-color: rgba(0, 0, 0, 0.6); visibility: hidden; opacity: 0; transition-timing-function: linear; transition-duration: 0.1s; transition-property: opacity, visibility; } .video-js.vjs-mediacms.vjs-enabled-touch-controls .vjs-touch-controls button { pointer-events: auto; display: inline-block; width: auto; height: auto; line-height: 1; float: none; margin: 1rem; font-size: 2.625em; width: 56px; height: 56px; line-height: 56px; outline: 0; border-radius: 50%; } .video-js.vjs-mediacms.vjs-enabled-touch-controls .vjs-touch-controls > * { position: absolute; display: block; top: 50%; left: 0; margin-top: -44px; display: table; width: 100%; } .video-js.vjs-mediacms.vjs-enabled-touch-controls .vjs-touch-controls > * > * { display: table-cell; text-align: center; vertical-align: middle; } .video-js.vjs-mediacms.vjs-enabled-touch-controls .vjs-touch-controls .vjs-touch-previous-button { text-align: right; } .video-js.vjs-mediacms.vjs-enabled-touch-controls .vjs-touch-controls .vjs-touch-play-button { width: 10.5em; text-align: center; } .video-js.vjs-mediacms.vjs-enabled-touch-controls .vjs-touch-controls .vjs-touch-play-button button { font-size: 56px; } .video-js.vjs-mediacms.vjs-enabled-touch-controls .vjs-touch-controls .vjs-touch-next-button { text-align: left; } .video-js.vjs-mediacms.vjs-enabled-touch-controls .vjs-touch-controls .vjs-touch-hidden-button * { visibility: hidden; opacity: 0; } .video-js.vjs-mediacms.vjs-enabled-touch-controls .vjs-touch-controls .vjs-touch-disabled-button * { color: #404040; color: rgba(255, 255, 255, 0.25); cursor: disabled; } .video-js.vjs-mediacms.vjs-enabled-touch-controls.vjs-seeking .vjs-actions-anim, .video-js.vjs-mediacms.vjs-enabled-touch-controls.vjs-waiting .vjs-actions-anim, .video-js.vjs-mediacms.vjs-enabled-touch-controls.vjs-touch-enabled .vjs-actions-anim { display: none; } .video-js.vjs-mediacms.vjs-enabled-touch-controls.vjs-touch-enabled .vjs-play-control, .video-js.vjs-mediacms.vjs-enabled-touch-controls.vjs-touch-enabled .vjs-next-button, .video-js.vjs-mediacms.vjs-enabled-touch-controls.vjs-touch-enabled .vjs-previous-button { display: none; } .video-js.vjs-mediacms.vjs-enabled-touch-controls.vjs-touch-enabled.vjs-has-started.vjs-playing.vjs-user-active .vjs-touch-controls, .video-js.vjs-mediacms.vjs-enabled-touch-controls.vjs-touch-enabled.vjs-has-started.vjs-paused .vjs-touch-controls { visibility: visible; opacity: 1; } .video-js.vjs-mediacms.vjs-enabled-touch-controls.vjs-touch-enabled.vjs-playing .vjs-icon-play:before { content: '\f103'; } .video-js.vjs-mediacms.vjs-enabled-touch-controls.vjs-touch-enabled.vjs-ended .more-media.full-wrapper { visibility: hidden; } .video-js.vjs-mediacms.vjs-enabled-touch-controls.vjs-touch-enabled.vjs-ended .vjs-icon-play:before { content: '\f116'; } .video-js.vjs-mediacms { padding-top: 50%; } .video-js.vjs-mediacms video[poster] { object-fit: fill; } .video-js.vjs-mediacms .vjs-progress-control .vjs-progress-holder .vjs-play-progress { background-color: #009933; } .video-js.vjs-mediacms .vjs-progress-control .vjs-progress-holder .vjs-play-progress:before { color: #009933; } .video-js.vjs-mediacms .vjs-poster { background-size: cover; } .video-js.vjs-mediacms.vjs-changing-resolution .vjs-poster { display: none; } .video-js.vjs-mediacms .vjs-corner-layer.vjs-corner-top-left, .video-js.vjs-mediacms .vjs-corner-layer.vjs-corner-top-right { top: 16px; } .video-js.vjs-mediacms .vjs-corner-layer.vjs-corner-top-left { max-width: 80%; } .video-js.vjs-mediacms .vjs-corner-layer .title-link, .video-js.vjs-mediacms .vjs-corner-layer .user-thumb-link { outline: 0; transition-duration: 0.1s; transition-property: opacity, visibility; } .video-js.vjs-mediacms .vjs-corner-layer .title-link { display: inline-block; font-size: 16px; font-stretch: 100%; text-decoration: none; text-shadow: 0 0 2px rgba(0, 0, 0, 0.5); line-height: 23.4px; overflow: hidden; text-overflow: ellipsis; background-color: transparent; /* Fallback for non-webkit */ display: block; max-height: 46.8px; /* Only for non-webkit */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; /*@-moz-document url-prefix() { position: relative; padding-right: $font-size * 1.1; overflow: hidden; &:before { background-color: $bg-color; bottom: 0; position: absolute; right: 0; float: right; text-align:right; content: '\2026'; width: $font-size * 1.1; } &:after { content: ''; position: absolute; height: 100%; width: 100%; z-index: +1; background: $bg-color; } }*/ color: #eee; } .video-js.vjs-mediacms .vjs-corner-layer .title-link:hover { color: #fff; } @media screen and (min-width: 768px) { .video-js.vjs-mediacms .vjs-corner-layer .title-link { font-size: 18px; } } .video-js.vjs-mediacms .vjs-corner-layer .user-thumb-link { position: relative; display: block; width: 36px; height: 36px; overflow: hidden; border-radius: 50%; margin-bottom: 4px; background-size: cover; background-position: center; background-repeat: no-repeat; } .video-js.vjs-mediacms .vjs-corner-layer .media-links-top-left { display: block; } .video-js.vjs-mediacms .vjs-corner-layer .media-links-top-left .title-link { padding-left: 48px; padding-top: 7px; } .video-js.vjs-mediacms .vjs-corner-layer .media-links-top-left .user-thumb-link { position: absolute; top: 0; left: 0; display: inline-block; } .video-js.vjs-mediacms.vjs-fullscreen .vjs-corner-layer .title-link { font-size: 16px; } @media screen and (min-width: 768px) { .video-js.vjs-mediacms.vjs-fullscreen .vjs-corner-layer .title-link { font-size: 18px; } } @media screen and (min-width: 992px) { .video-js.vjs-mediacms.vjs-fullscreen .vjs-corner-layer .title-link { font-size: 20px; } } @media screen and (min-width: 1040px) { .video-js.vjs-mediacms.vjs-fullscreen .vjs-corner-layer .title-link { font-size: 22px; } } .video-js.vjs-mediacms.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-corner-layer .title-link, .video-js.vjs-mediacms.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-corner-layer .user-thumb-link { opacity: 0; visibility: hidden; } .video-js.vjs-mediacms:hover .vjs-big-play-button { background-color: #009933; } /* @-webkit-keyframes vjs-poster-reveal { 0%{ opacity:0; } 40%{ opacity:0; } 100%{ opacity:1; } } @keyframes vjs-poster-reveal { 0%{ opacity:0; } 40%{ opacity:0; } 100%{ opacity:1; } } */ .video-js.vjs-mediacms .vjs-progress-control .vjs-mouse-display .vjs-time-tooltip, .video-js.vjs-mediacms .vjs-preview-thumb .vjs-preview-thumb-time-display { font-size: 0.776699em; font-weight: 500; line-height: 1; } .video-js.vjs-mediacms .vjs-progress-control .vjs-mouse-display .vjs-time-tooltip, .video-js.vjs-mediacms .vjs-preview-thumb .vjs-preview-thumb-time-display > * { padding: 0.5em 0.65em 0.4em; color: rgba(255, 255, 255, 0.9); background-color: rgba(28, 28, 28, 0.95); border-radius: 2px; } .video-js.vjs-mediacms .vjs-progress-control .vjs-mouse-display { background-color: rgba(28, 28, 28, 0.9); } .video-js.vjs-mediacms .vjs-progress-control .vjs-mouse-display .vjs-time-tooltip { top: auto; bottom: 0.5em; } .video-js.vjs-mediacms .vjs-preview-thumb { display: none; } .video-js.vjs-mediacms.vjs-enabled-preview-thumb .vjs-preview-thumb { position: relative; opacity: 0; visibility: hidden; display: block; } .video-js.vjs-mediacms.vjs-enabled-preview-thumb .vjs-preview-thumb .vjs-preview-thumb-inner { position: absolute; bottom: 1em; left: -80px; width: 160px; height: 120px; overflow: hidden; background-position: center 0; background-size: cover; background-color: rgba(28, 28, 28, 0.9); border: 2px solid rgba(28, 28, 28, 0.9); border-radius: 1px; } .video-js.vjs-mediacms.vjs-enabled-preview-thumb .vjs-preview-thumb .vjs-preview-thumb-time-display { position: absolute; bottom: -2px; left: 0; width: 100%; line-height: 1; font-size: 1em; font-weight: 600; display: inline-block; } .video-js.vjs-mediacms.vjs-enabled-preview-thumb .vjs-preview-thumb .vjs-preview-thumb-time-display > * { display: inline-block; padding: 0.5em 0.65em 0.45em; } .video-js.vjs-mediacms.vjs-enabled-preview-thumb .vjs-progress-control.andrd-active .vjs-preview-thumb, .video-js.vjs-mediacms.vjs-enabled-preview-thumb .vjs-progress-control:hover .vjs-preview-thumb, .video-js.vjs-mediacms.vjs-enabled-preview-thumb .vjs-progress-control:active .vjs-preview-thumb { visibility: visible; animation-name: showPreviewThumb; animation-duration: 0.2s; animation-timing-function: ease-out; animation-delay: 0.1s; animation-direction: alternate; animation-fill-mode: forwards; } .video-js.vjs-mediacms.vjs-enabled-preview-thumb.vjs-user-inactive .vjs-progress-control .vjs-preview-thumb { opacity: 0; visibility: hidden; -webkit-transition: visibility 1s linear, opacity 1s linear; -moz-transition: visibility 1s linear, opacity 1s linear; -o-transition: visibility 1s linear, opacity 1s linear; transition: visibility 1s linear, opacity 1s linear; } .video-js.vjs-mediacms.vjs-enabled-preview-thumb.vjs-touch-enabled .vjs-preview-thumb { display: none; } .video-js.vjs-mediacms .vjs-loading-spinner { width: 64px; height: 64px; margin: -32px 0 0 -32px; border: 0; border-radius: 0; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; -webkit-animation-delay: 0.44s; animation-delay: 0.44s; } .video-js.vjs-mediacms .vjs-loading-spinner:after, .video-js.vjs-mediacms .vjs-loading-spinner:before { display: none; } .video-js.vjs-mediacms .vjs-loading-spinner .spinner { z-index: +1; position: absolute; left: 50%; top: 50%; width: 100%; margin-left: -32px; pointer-events: none; background-color: #eee; } .video-js.vjs-mediacms .vjs-loading-spinner .spinner-container { pointer-events: none; position: absolute; width: 100%; top: 50%; left: 50%; margin-top: -50%; margin-left: -50%; padding-bottom: 100%; animation: spinner-linear-spin 1568.23529647ms linear infinite; -webkit-animation: spinner-linear-spin 1568.23529647ms linear infinite; } .video-js.vjs-mediacms .vjs-loading-spinner .spinner-rotator { position: absolute; width: 100%; height: 100%; -webkit-animation: spinner-ease-spin 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; animation: spinner-ease-spin 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; } .video-js.vjs-mediacms .vjs-loading-spinner .spinner-left, .video-js.vjs-mediacms .vjs-loading-spinner .spinner-right { position: absolute; top: 0; bottom: 0; overflow: hidden; } .video-js.vjs-mediacms .vjs-loading-spinner .spinner-circle { position: absolute; width: 200%; height: 100%; box-sizing: border-box; border-radius: 50%; border-style: solid; border-width: 6px; border-color: #eee #eee transparent; } .video-js.vjs-mediacms .vjs-loading-spinner .spinner-left { left: 0; right: 49%; } .video-js.vjs-mediacms .vjs-loading-spinner .spinner-left .spinner-circle { left: 0; right: -100%; border-right-color: transparent; -webkit-animation: spinner-left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; animation: spinner-left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; } .video-js.vjs-mediacms .vjs-loading-spinner .spinner-right { left: 49%; right: 0; } .video-js.vjs-mediacms .vjs-loading-spinner .spinner-right .spinner-circle { left: -100%; right: 0; border-left-color: transparent; -webkit-animation: spinner-right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both; animation: spinner-right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1 1) infinite both; } .video-js.vjs-mediacms.vjs-fullscreen .vjs-loading-spinner { width: 96px; height: 96px; margin: -48px 0 0 -48px; } .video-js.vjs-mediacms.vjs-fullscreen .vjs-loading-spinner .spinner { margin-left: -48px; } .video-js.vjs-mediacms.vjs-fullscreen .vjs-loading-spinner .spinner-circle { border-width: 9px; } .video-js.vjs-mediacms.vjs-error .vjs-loading-spinner { display: none; }