From 50643036cb4d957348573fa993fec4b0ab0d9e2c Mon Sep 17 00:00:00 2001 From: Yiannis Christodoulou Date: Tue, 23 Sep 2025 09:48:21 +0300 Subject: [PATCH] fix: Cleanup old video-js assets from the old media player --- .../video-js/src/assets/css/VideoPlayer.scss | 1132 ----------- .../src/assets/css/includes/_mixins.scss | 69 - .../assets/css/includes/_theme_variables.scss | 12 - .../src/assets/css/mediacms-player.css | 1662 ----------------- frontend-tools/video-js/src/assets/react.svg | 1 - 5 files changed, 2876 deletions(-) delete mode 100755 frontend-tools/video-js/src/assets/css/VideoPlayer.scss delete mode 100755 frontend-tools/video-js/src/assets/css/includes/_mixins.scss delete mode 100755 frontend-tools/video-js/src/assets/css/includes/_theme_variables.scss delete mode 100644 frontend-tools/video-js/src/assets/css/mediacms-player.css delete mode 100644 frontend-tools/video-js/src/assets/react.svg diff --git a/frontend-tools/video-js/src/assets/css/VideoPlayer.scss b/frontend-tools/video-js/src/assets/css/VideoPlayer.scss deleted file mode 100755 index 825c0e06..00000000 --- a/frontend-tools/video-js/src/assets/css/VideoPlayer.scss +++ /dev/null @@ -1,1132 +0,0 @@ -@use "sass:math"; -@use "./includes/mixins" as *; -@use "./includes/theme_variables" as *; -@import "video.js/dist/video-js.css"; - -@keyframes up-next-circle-countdown { - from { - stroke-dashoffset: 185; - stroke-dasharray: 185; - } - to { - stroke-dashoffset: 0; - stroke-dasharray: 185; - } -} - -@-webkit-keyframes media-slider-reveal { - 0% { - opacity: 0; - } - 100% { - opacity: 1; - } -} - -@keyframes media-slider-reveal { - 0% { - opacity: 0; - } - 100% { - opacity: 1; - } -} - -@-webkit-keyframes media-item-reveal { - 0% { - opacity: 0; - transform: scale(0.2); - } - 100% { - opacity: 1; - transform: scale(1); - } -} - -@keyframes media-item-reveal { - 0% { - opacity: 0; - transform: scale(0.2); - } - 100% { - opacity: 1; - transform: scale(1); - } -} - -.video-player { - position: relative; - height: 100%; -} - -.video-player { - outline-color: rgba(0, 0, 0, 0); - outline-color: transparent; -} - -.video-js.vjs-mediacms { - // Enhanced styling for video player - border-radius: 0 !important; - overflow: hidden !important; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important; - outline: none !important; /* Remove default focus outline */ - - // Focus styles for keyboard controls - &:focus { - box-shadow: - 0 4px 12px rgba(0, 0, 0, 0.15), - 0 0 0 3px rgba(0, 122, 204, 0.3) !important; - } - - video { - outline: none !important; - border-radius: 0 !important; - } - - .vjs-poster { - border-radius: 0 !important; - } - - .vjs-control-bar { - border-bottom-left-radius: 0 !important; - border-bottom-right-radius: 0 !important; - } - - .vjs-corner-layer.vjs-corner-top-left { - z-index: +3; - } - - .vjs-corner-layer.vjs-corner-bottom-right { - bottom: 16px; - } - - .vjs-corner-layer.vjs-corner-top-right { - opacity: 0; - visibility: hidden; - - display: block; - -webkit-animation: media-slider-reveal 0.4s linear; - animation: media-slider-reveal 0.4s linear; - - top: 12px; - left: 12px; - bottom: 48px; - z-index: +3; - } - - .vjs-corner-layer.vjs-corner-bottom-left { - display: none; - -webkit-animation: media-slider-reveal 0.1s linear; - animation: media-slider-reveal 0.1s linear; - - top: 12px; - right: 12px; - z-index: +2; - - .embed-wrap & { - top: 52px; - top: 3.25rem; - } - } - - &.vjs-has-started.vjs-paused .vjs-corner-layer.vjs-corner-bottom-left { - display: block; - } - - .up-next-loader { - position: absolute; - top: -12px; - left: -12px; - right: -12px; - bottom: -48px; - display: block; - background-color: #000; - - .next-media-poster { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - display: block; - opacity: 0.4; - background-position: center; - background-repeat: no-repeat; - background-size: contain; - filter: blur(4px); - } - } - - &.vjs-mediacms-up-next-hidden { - } - - .up-next-loader-inner { - position: relative; - width: 100%; - height: 100%; - display: table; - text-align: center; - line-height: 1.3; - font-family: Roboto, Arial, Helvetica, sans-serif; - - > div { - width: 100%; - height: 100%; - padding: 6px 12px 48px 12px; - display: table-cell; - vertical-align: middle; - } - - .up-next-label { - margin-bottom: 8px; - font-size: 1.184615em; - color: rgba(#fff, 0.7); - } - - .next-media-title { - margin: 0 20px; - padding: 0 0 2px; - font-weight: 500; - font-size: 1.69231em; - color: #eee; - - @include multiline_texts_excerpt( - $font-size: 1.69231em, - $line-height: 1.3, - $lines-to-show: 3, - $bg-color: transparent - ); - - @media screen and (max-width: 688px) { - font-size: 21px; - @include multiline_texts_excerpt( - $font-size: 1.69231em, - $line-height: 1.3, - $lines-to-show: 1, - $bg-color: transparent - ); - } - - @media screen and (max-width: 491px) { - font-size: 19px; - } - } - - .next-media-author { - margin-bottom: 10px; - font-size: 1.1em; - color: #fff; - - @media screen and (max-width: 491px) { - margin-bottom: 5px; - } - } - - .up-next-cancel { - button { - padding: 10px 20px; - font-size: 15.4px; - font-weight: 500; - line-height: 20.02px; - word-spacing: 0; - color: #eee; - outline-width: 0; - border-radius: 2px; - - &:hover { - background-color: rgba(#fff, 0.15); - } - - @media screen and (max-width: 688px) { - padding: 8px 16px; - font-size: 14.3px; - line-height: 18.59px; - } - } - } - - .go-next { - padding: 16px 0; - - @media screen and (max-width: 688px) { - padding: 12px 0; - } - - a { - position: relative; - display: inline-block; - text-decoration: none; - width: 56px; - height: 56px; - line-height: 56px; - overflow: visible; - color: #fff; - border-radius: 50%; - - @media screen and (max-width: 688px) { - width: 48px; - height: 48px; - line-height: 48px; - } - - span { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - display: block; - background-color: #fff; - border-radius: 50%; - opacity: 0.3; - } - - i.material-icons { - margin-top: -1px; - font-size: 2 * 16px; - - @media screen and (max-width: 688px) { - font-size: 2 * 16px; - } - } - } - - svg.radial-timer { - display: none; - position: absolute; - top: -4px; - left: -4px; - width: 64px; - height: 64px; - transform: /*rotateY(-180deg)*/ rotateZ(-90deg); - - circle { - visibility: hidden; - &:first-child { - visibility: visible; - } - - stroke-dasharray: 0; - stroke-dashoffset: 185; - stroke-linecap: square; - stroke-width: 4px; - stroke: white; - fill: none; - animation: up-next-circle-countdown 10s linear forwards; - } - - @media screen and (max-width: 688px) { - width: 56px; - height: 56px; - circle { - stroke-width: 3px; - visibility: visible; - &:first-child { - visibility: hidden; - } - } - } - - @media screen and (max-width: 491px) { - } - } - } - } - - &.vjs-mediacms-canceled-next { - .up-next-loader-inner { - .go-next { - svg.radial-timer { - circle { - display: none; - animation: none; - } - } - } - } - } - - .more-media { - display: block; - font-family: Roboto, Arial, Helvetica, sans-serif; - } - - &.vjs-fullscreen { - .more-media { - font-size: 0.8125em; - } - } - - .more-media-item { - position: relative; - display: inline-block; - - > * { - display: block; - color: #fff; - text-decoration: none; - } - - &.before-more-media-item-load { - opacity: 0; - transform: scale(0.2); - - -webkit-animation: media-item-reveal 0.3s linear forwards; - animation: media-item-reveal 0.3s linear forwards; - - -webkit-animation-delay: calc(var(--n) * 0.075s); - animation-delay: calc(var(--n) * 0.075s); - } - } - - .more-media-item-thumb { - display: block; - background-position: center; - background-size: cover; - } - - .more-media-duration { - position: absolute; - bottom: 0; - right: 0; - padding: 4px; - - > * { - display: inline-block; - padding: 0.181819em; - font-size: 0.84615em; - line-height: 1; - font-weight: 500; - background-color: #000; - border-radius: 2px; - opacity: 0.75; - } - } - - .more-media-item-content { - position: relative; - display: block; - width: 100%; - } - - .more-media-title { - font-weight: 500; - } - - .more-media-meta { - display: block; - font-size: 0.84615em; - line-height: 1.30001; - margin-top: 2px; - - > * ~ * { - &:before { - content: "•"; - content: "\2022"; - margin: 0 4px; - } - } - } - - .more-media-author { - } - - .more-media-views { - } - - /* ================================================== */ - /* ================================================== */ - /* ================================================== */ - - .more-media.full-wrapper { - position: absolute; - top: 4px; - left: 0; - right: 0; - bottom: 4px; - - padding: 1em 1.5em 1.5em; - - .embed-wrap & { - padding: 2em 3em 3em; - } - - &:before { - content: ""; - position: absolute; - top: -100%; - left: -100%; - right: -100%; - bottom: -100%; - display: block; - background-color: rgba(#000, 0.9); - } - - $columns: 1, 2, 3, 4, 5, 6; - $rows: 1, 2, 3, 4, 5, 6; - - @each $c in $columns { - &.grid-col-#{$c} { - .more-media-item { - width: math.div(1, $c) * 100%; - } - } - } - - @each $r in $rows { - &.grid-row-#{$r} { - .more-media-item { - height: math.div(1, $r) * 100%; - } - } - } - - @each $co in $columns { - @each $ro in $rows { - &.grid-col-#{$co}.grid-row-#{$ro} { - .more-media-item { - &:nth-child(n + #{ ( ( $co * $ro ) + 1 ) }) { - display: none; - } - } - } - } - } - - > div { - position: relative; - width: 100%; - height: 100%; - display: block; - - > * { - position: relative; - width: 100%; - height: 100%; - display: block; - } - } - - .more-media-item { - float: left; - - > * { - top: 2px; - left: 2px; - right: 2px; - bottom: 2px; - } - } - } - - .more-media.full-wrapper, - .more-media.inline-slider-small { - .more-media-wrap-title, - .prev-slide, - .next-slide, - .close-more-videos, - .open-more-videos { - display: none; - } - } - - .more-media.inline-slider, - .more-media.inline-slider-small { - position: absolute; - bottom: 4px; - left: 0; - right: 0; - - > div { - position: relative; - - > * { - position: relative; - overflow: hidden; - white-space: nowrap; - -webkit-overflow-scrolling: touch; - scroll-behavior: smooth; - } - } - - .more-media-item { - vertical-align: top; - width: 188px; - } - } - - $slideButtonDim: 40px; - - .more-media.inline-slider { - padding: 12px (0.5 * (12 + $slideButtonDim)) 16px; - background-color: rgba(23, 23, 23, 0.9); - border-radius: 2px; - - .more-media-wrap-title { - position: relative; - display: block; - font-size: 1.076925em; - font-weight: 600; - font-stretch: 100%; - line-height: 1.428574; - margin: 0 0 12px; - color: rgb(238, 238, 238); - } - - .more-media-item { - height: 100px; - - > * { - top: 0; - left: 0; - right: 8px; - bottom: 0; - } - } - - .prev-slide, - .next-slide { - position: absolute; - top: 50%; - margin-top: -0.5 * $slideButtonDim; - font-size: 1.75em; - - button { - width: $slideButtonDim; - height: $slideButtonDim; - line-height: $slideButtonDim; - background-color: #333; - box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2); - } - } - - .prev-slide { - left: -0.5 * $slideButtonDim; - } - - .next-slide { - right: -0.5 * $slideButtonDim; - } - } - - .more-media.inline-slider-small { - > div { - > * { - overflow: auto; - } - } - - .more-media-item { - > * { - margin-right: 10px; - } - } - - .more-media-item-thumb { - position: relative; - height: 100px; - } - - .more-media-item-content { - padding: 10px 0; - } - - .more-media-duration { - > * { - padding: (2.5 * 0.181819em) (2 * 0.181819em); - border-radius: 1px; - } - } - - .more-media-title { - @include multiline_texts_excerpt( - $font-size: 1em, - $line-height: 1.198155, - $lines-to-show: 1, - $bg-color: transparent - ); - } - - .more-media-views { - display: none; - } - } - - .more-media.full-wrapper, - .more-media.inline-slider { - .more-media-item { - > * { - position: absolute; - } - } - - .more-media-item-thumb { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - } - - .more-media-item-content { - height: 100%; - padding: 10px; - background-image: -moz-linear-gradient(top, rgba(#0c0c0c, 0.8) 0, transparent 100px); - background-image: -ms-linear-gradient(top, rgba(#0c0c0c, 0.8) 0, transparent 100px); - background-image: -o-linear-gradient(top, rgba(#0c0c0c, 0.8) 0, transparent 100px); - background-image: -webkit-linear-gradient(top, rgba(#0c0c0c, 0.8) 0, transparent 100px); - background-image: linear-gradient(to bottom, rgba(#0c0c0c, 0.8) 0, transparent 100px); - } - - .more-media-item-content, - .more-media-duration { - opacity: 0; - will-change: opacity; - transition-property: opacity; - transition-duration: 0.3s; - } - - .more-media-item > *:hover { - .more-media-item-content, - .more-media-duration { - opacity: 1; - } - } - - .more-media-title { - @include multiline_texts_excerpt( - $font-size: 1em, - $line-height: 1.198155, - $lines-to-show: 2, - $bg-color: transparent - ); - } - } - - .more-media.inline-slider.hidden-inline-more-media { - right: auto; - padding: 0; - - > div, - .more-media-wrap-title, - .close-more-videos { - display: none; - } - - .open-more-videos { - display: inline-block; - } - } - - .open-more-videos { - display: none; - padding: 0.85714em 1em; - font-size: 1.076925em; - font-weight: 500; - font-stretch: 100%; - line-height: 1.428574; - color: rgb(238, 238, 238); - border: 0; - background: none; - } - - .close-more-videos { - position: absolute; - right: 14px; - top: 0; - padding: 4px; - margin: 8px 4px 8px 8px; - display: inline-block; - font-size: 1.538475em; - font-weight: 500; - line-height: 1; - border: 0; - background: 0; - } - - .more-media { - display: none; - .embed-wrap &, - .media-embed-wrap & { - display: block; - } - } - - &.vjs-ended { - .more-media { - display: block; - } - - .vjs-corner-layer.vjs-corner-bottom-left { - display: block; - } - - &.vjs-mediacms-has-up-next-view { - .more-media, - .vjs-corner-layer.vjs-corner-bottom-left { - visibility: hidden; - } - - .vjs-corner-layer.vjs-corner-top-right { - transition-property: all; - transition-duration: 0.4s; - visibility: visible; - opacity: 1; - - svg.radial-timer { - display: block; - } - } - - &.vjs-mediacms-up-next-hidden { - .more-media, - .vjs-corner-layer.vjs-corner-bottom-left { - visibility: visible; - } - - .vjs-corner-layer.vjs-corner-top-right { - visibility: hidden; - opacity: 0; - } - - svg.radial-timer { - display: none; - } - } - } - } -} - -.video-js.vjs-mediacms { - .vjs-progress-control { - .vjs-progress-holder { - .vjs-play-progress { - background-color: var(--brand-color, var(--default-brand-color)); - - &:before { - color: var(--brand-color, var(--default-brand-color)); - } - } - } - } - - &:hover { - .vjs-big-play-button { - background-color: var(--brand-color, var(--default-brand-color)); - } - } - - &.vjs-subtitles-on .vjs-subtitles-control .vjs-icon-placeholder:after { - background-color: var(--brand-color, var(--default-brand-color)); - } -} - -.video-js.vjs-mediacms.vjs-audio .vjs-poster { - background-size: contain; -} - -/* ################################################## */ -/* ################################################## */ - -.vjs-corner-layer.vjs-corner-top-left { - z-index: +4; -} - -.vjs-corner-layer.vjs-corner-bottom-right { - top: 16px; - - .vjs-visible-share-options & { - z-index: +5; - display: block; - left: 16px; - bottom: 0 !important; - } -} - -button.share-video-btn { - position: absolute; - top: 0; - right: 0; - display: inline-block; - text-align: center; - padding: 0 6px; - - .vjs-has-started.vjs-user-inactive.vjs-playing & { - display: none !important; - } - - i.material-icons { - font-size: 28px; - } - - span { - display: block; - padding: 4px 0 0; - font-size: 14px; - font-weight: normal; - } -} - -.share-options-wrapper { - // z-index:+5; - position: absolute; - top: -16px; - left: -16px; - right: -16px; - bottom: -16px; - display: none; - background-color: rgba(#000, 0.8); - - .vjs-visible-share-options & { - display: block; - } - - .share-options { - // margin-bottom:16px; - display: table; - table-layout: fixed; - width: 100%; - height: 100%; - padding-top: 12px; - - .share-options-inner { - position: relative; - display: block; - display: table-cell; - vertical-align: middle; - text-align: center; - overflow: hidden; - } - - .sh-option { - vertical-align: top; - position: relative; - display: inline-block; - padding-right: 8px; - text-align: center; - - a, - button { - padding: 5px 5px 2px; - margin: 1px 0; - display: block; - text-decoration: none; - color: inherit; - - outline: 0; - border: 0; - background: none; - - > *:first-child { - display: block; - width: 60px; - height: 60px; - line-height: 60px; - margin: 0 auto 8px; - border-radius: 50%; - background-position: center; - background-repeat: no-repeat; - } - - > *:last-child { - font-size: 13px; - line-height: 18px; - overflow: hidden; - } - - .material-icons { - padding: 0; - margin: 0 0 0 1px; - line-height: 1; - font-size: 30px; - overflow: hidden; - color: #fff; - } - - @media screen and (max-width: 1024px) { - > *:first-child { - width: 48px; - height: 48px; - line-height: 48px; - background-size: 24px 24px; - } - - > *:last-child { - font-size: 13px; - line-height: 16px; - } - - .material-icons { - font-size: 24px; - } - } - } - - &:nth-child(n + 3) { - // display:none; - } - - @media screen and (max-width: 767px) { - &:nth-child(n + 6) { - display: none; - } - } - - @media screen and (max-width: 479px) { - &:nth-child(n + 4) { - display: none; - } - } - - @media screen and (max-width: 379px) { - &:nth-child(n + 3) { - display: none; - } - } - - @media screen and (max-width: 279px) { - &:nth-child(n + 2) { - display: none; - } - } - } - - .share-embed-opt { - a, - button { - > *:first-child { - background-color: rgb(244, 244, 244); - } - - .material-icons { - color: rgb(111, 111, 111); - } - } - } - - .share-fb { - a, - button { - > *:first-child { - background-color: rgb(59, 89, 152); - background-image: url("../../../images/social-media-icons/fb-logo.png"); - } - } - } - - .share-tw { - a, - button { - > *:first-child { - background-color: rgb(29, 161, 242); - background-image: url("../../../images/social-media-icons/twitter-logo.png"); - } - } - } - - .share-reddit { - a, - button { - > *:first-child { - background-color: rgb(255, 69, 0); - background-image: url("../../../images/social-media-icons/reddit-logo.png"); - } - } - } - - .share-tumblr { - a, - button { - > *:first-child { - background-color: rgb(53, 70, 92); - background-image: url("../../../images/social-media-icons/tumblr-logo.png"); - } - } - } - - .share-pinterest { - a, - button { - > *:first-child { - background-color: rgb(189, 8, 28); - background-image: url("../../../images/social-media-icons/pinterest-logo.png"); - } - } - } - - .share-vk { - a, - button { - > *:first-child { - background-color: rgb(70, 128, 194); - background-image: url("../../../images/social-media-icons/vk-logo.png"); - } - } - } - - .share-linkedin { - a, - button { - > *:first-child { - background-color: rgb(0, 119, 181); - background-image: url("../../../images/social-media-icons/linkedin-logo.png"); - } - } - } - - .share-mix { - a, - button { - > *:first-child { - background-color: rgb(255, 130, 38); - background-image: url("../../../images/social-media-icons/mix-logo.png"); - } - } - } - - .share-email { - a, - button { - > *:first-child { - background-color: rgb(136, 136, 136); - } - } - } - - .share-whatsapp { - a, - button { - > *:first-child { - background-color: rgb(37, 211, 102); - background-image: url("../../../images/social-media-icons/whatsapp-logo.png"); - } - } - } - - .share-telegram { - a, - button { - > *:first-child { - background-color: rgb(0, 136, 204); - background-position: 11px; - background-image: url("../../../images/social-media-icons/telegram-logo.png"); - } - } - } - - .share-more { - display: inline-block !important; - - @media screen and (min-width: 768px) { - display: none !important; - } - - a, - button { - > *:first-child { - background-color: rgba(#fff, 0.1); - } - } - } - } -} diff --git a/frontend-tools/video-js/src/assets/css/includes/_mixins.scss b/frontend-tools/video-js/src/assets/css/includes/_mixins.scss deleted file mode 100755 index 1d2c0b20..00000000 --- a/frontend-tools/video-js/src/assets/css/includes/_mixins.scss +++ /dev/null @@ -1,69 +0,0 @@ -@use 'sass:math'; - -@mixin multiline_texts_excerpt( - $font-size: 1em, - $line-height: 1.15, - $lines-to-show: 2, - $bg-color: transparent -) { - line-height: $line-height; - overflow: hidden; - text-overflow: ellipsis; - background-color: $bg-color; - - /* Fallback for non-webkit */ - display: block; - max-height: $lines-to-show * $line-height; - - /* Only for non-webkit */ - display: -webkit-box; - -webkit-line-clamp: $lines-to-show; - -webkit-box-orient: vertical; - white-space: normal; -} - -@mixin media_list_row_width($width, $vertSpace: 56) { - width: $width; - - @media (min-width: #{$vertSpace + ( 2 * $width )}px) { - width: #{2 * $width}px; - } - - @media (min-width: #{$vertSpace + ( 3 * $width )}px) { - width: #{3 * $width}px; - } - - @media (min-width: #{$vertSpace + ( 4 * $width )}px) { - width: #{4 * $width}px; - } - - @media (min-width: #{$vertSpace + ( 5 * $width )}px) { - width: #{5 * $width}px; - } - - @media (min-width: #{$vertSpace + ( 7 * $width )}px) { - width: #{6 * $width}px; - } - - .visible-sidebar & { - @media (min-width: #{$vertSpace + ( 2 * $width )}px) { - width: #{1 * $width}px; - } - - @media (min-width: #{$vertSpace + ( 3 * $width )}px) { - width: #{2 * $width}px; - } - - @media (min-width: #{$vertSpace + ( 4 * $width )}px) { - width: #{3 * $width}px; - } - - @media (min-width: #{$vertSpace + ( 5 * $width )}px) { - width: #{4 * $width}px; - } - - @media (min-width: #{$vertSpace + ( 7 * $width )}px) { - width: #{6 * $width}px; - } - } -} diff --git a/frontend-tools/video-js/src/assets/css/includes/_theme_variables.scss b/frontend-tools/video-js/src/assets/css/includes/_theme_variables.scss deleted file mode 100755 index 1bcca446..00000000 --- a/frontend-tools/video-js/src/assets/css/includes/_theme_variables.scss +++ /dev/null @@ -1,12 +0,0 @@ -$theme-color: var(--theme-color, var(--default-theme-color)); - -$color-error-red: rgba(red, 0.8); - -$message-default-color: rgba(#111, 0.9); - -$message-default-bg-color: #e6e6e6; -$message-info-bg-color: #e6e6fa; -$message-error-bg-color: #fae6e6; -$message-success-bg-color: #e6f0e6; - -$message-warning-bg-color: #fafae6; diff --git a/frontend-tools/video-js/src/assets/css/mediacms-player.css b/frontend-tools/video-js/src/assets/css/mediacms-player.css deleted file mode 100644 index a0d929ef..00000000 --- a/frontend-tools/video-js/src/assets/css/mediacms-player.css +++ /dev/null @@ -1,1662 +0,0 @@ -@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; -} diff --git a/frontend-tools/video-js/src/assets/react.svg b/frontend-tools/video-js/src/assets/react.svg deleted file mode 100644 index 6c87de9b..00000000 --- a/frontend-tools/video-js/src/assets/react.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file