From 492911786cb04df921ff62fa07699cf8ccafd60c Mon Sep 17 00:00:00 2001 From: Yiannis Christodoulou Date: Thu, 18 Sep 2025 10:30:48 +0300 Subject: [PATCH] chore: Run prettier for css files --- frontend-tools/video-js/src/VideoJS.css | 1364 ++++++++--- .../src/assets/css/mediacms-player.css | 2099 ++++++++++------- .../overlays/AutoplayCountdownOverlay.css | 61 +- frontend-tools/video-js/src/main.jsx | 2 +- 4 files changed, 2348 insertions(+), 1178 deletions(-) diff --git a/frontend-tools/video-js/src/VideoJS.css b/frontend-tools/video-js/src/VideoJS.css index e5019363..bbe59ff8 100644 --- a/frontend-tools/video-js/src/VideoJS.css +++ b/frontend-tools/video-js/src/VideoJS.css @@ -1,13 +1,15 @@ html { - box-sizing: border-box; + box-sizing: border-box; } -*, *::before, *::after { - box-sizing: inherit; +*, +*::before, +*::after { + box-sizing: inherit; } .playlist-items a { - text-decoration: none!important; + text-decoration: none !important; } .video-js video { @@ -27,9 +29,9 @@ html { display: flex !important; flex-direction: row !important; align-items: center !important; - justify-content: flex-start !important; - padding:0 12px; - height:48px; + justify-content: flex-start !important; + padding: 0 12px; + height: 48px; } .video-container { @@ -72,17 +74,17 @@ html { justify-content: center; align-items: center; z-index: 1000; - padding:0; - height:calc(100% - 46px); - box-sizing: border-box; - padding: 20px; + padding: 0; + height: calc(100% - 46px); + box-sizing: border-box; + padding: 20px; gap: 10px; } .vjs-related-videos-title { color: white; font-size: 24px; - line-height:24px; - padding:0; + line-height: 24px; + padding: 0; margin: 0; text-align: center; font-weight: bold; @@ -97,17 +99,19 @@ html { margin: 0; box-sizing: border-box; justify-items: center; - overflow: hidden; + overflow: hidden; align-self: center; flex-shrink: 0; - height:calc(100% - 44px) ; + height: calc(100% - 44px); } .vjs-related-video-item { position: relative; cursor: pointer; border-radius: 5px; overflow: hidden; - transition: transform 0.2s ease, box-shadow 0.2s ease; + transition: + transform 0.2s ease, + box-shadow 0.2s ease; background: #1a1a1a; border: 1px solid #333; /* aspect-ratio: 16/9; */ @@ -207,10 +211,10 @@ html { pointer-events: auto !important; cursor: pointer !important; } -.video-js.vjs-ended .vjs-control-bar .vjs-control.vjs-volume-control{ +.video-js.vjs-ended .vjs-control-bar .vjs-control.vjs-volume-control { opacity: 0 !important; } -.video-js.vjs-ended .vjs-control-bar .vjs-volume-panel.vjs-hover .vjs-volume-control{ +.video-js.vjs-ended .vjs-control-bar .vjs-volume-panel.vjs-hover .vjs-volume-control { opacity: 1 !important; } .video-js.vjs-ended .vjs-play-control { @@ -233,7 +237,7 @@ html { width: 100%; height: 100%; pointer-events: none; - overflow:hidden; + overflow: hidden; } .vjs-chapter-marker { @@ -292,12 +296,24 @@ html { } } -.video-js .vjs-menu-button:not(.vjs-disabled) .vjs-menu { display: none !important; } +.video-js .vjs-menu-button:not(.vjs-disabled) .vjs-menu { + display: none !important; +} .video-js .vjs-menu-button:not(.vjs-disabled).vjs-lock-showing .vjs-menu, -.video-js .vjs-menu-button:not(.vjs-disabled) .vjs-menu.vjs-lock-showing { display: block !important;} -.video-js .vjs-menu-button:hover .vjs-menu { display: none !important;} -.video-js .vjs-menu-button.vjs-lock-showing:hover .vjs-menu { display: block !important;} -.video-js .vjs-menu.vjs-lock-showing { display: block !important; opacity: 1 !important; visibility: visible !important;} +.video-js .vjs-menu-button:not(.vjs-disabled) .vjs-menu.vjs-lock-showing { + display: block !important; +} +.video-js .vjs-menu-button:hover .vjs-menu { + display: none !important; +} +.video-js .vjs-menu-button.vjs-lock-showing:hover .vjs-menu { + display: block !important; +} +.video-js .vjs-menu.vjs-lock-showing { + display: block !important; + opacity: 1 !important; + visibility: visible !important; +} .video-js.chapters-open .vjs-menu, .video-js.chapters-open .vjs-menu.vjs-lock-showing, .video-js.chapters-open .vjs-hover-display, @@ -308,23 +324,23 @@ html { visibility: hidden !important; } -.video-js .vjs-volume-panel.vjs-hover{ - transition:ease-in-out .5s !important; - width:auto !important; +.video-js .vjs-volume-panel.vjs-hover { + transition: ease-in-out 0.5s !important; + width: auto !important; } .video-js .vjs-captions-button, .video-js .vjs-subs-caps-button { display: none !important; } -.video-js .vjs-subtitles-button .vjs-menu { - display: none !important; +.video-js .vjs-subtitles-button .vjs-menu { + display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } -.video-js .vjs-subtitles-button .vjs-menu.vjs-lock-showing { - display: none !important; +.video-js .vjs-subtitles-button .vjs-menu.vjs-lock-showing { + display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; @@ -340,67 +356,128 @@ html { } .video-js .vjs-text-track-cue { -position: absolute !important; -bottom: 0 !important; -left: 0 !important; -right: 0 !important; -text-align: center !important; -margin: 0 !important; -padding: 0 !important; -background: transparent !important; -border: none !important; -font-size: 1.2em !important; -line-height: 1.4 !important; -color: #ffffff !important; -text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8) !important; -font-family: Arial, sans-serif !important; -font-weight: 600 !important; -white-space: pre-line !important; -word-wrap: break-word !important; -max-width: 90% !important; -margin-left: auto !important; -margin-right: auto !important; -z-index: 11 !important; /* Ensure subtitle text appears on top */ + position: absolute !important; + bottom: 0 !important; + left: 0 !important; + right: 0 !important; + text-align: center !important; + margin: 0 !important; + padding: 0 !important; + background: transparent !important; + border: none !important; + font-size: 1.2em !important; + line-height: 1.4 !important; + color: #ffffff !important; + text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8) !important; + font-family: Arial, sans-serif !important; + font-weight: 600 !important; + white-space: pre-line !important; + word-wrap: break-word !important; + max-width: 90% !important; + margin-left: auto !important; + margin-right: auto !important; + z-index: 11 !important; /* Ensure subtitle text appears on top */ } .video-js .vjs-text-track-cue > div { -background: rgba(0, 0, 0, 0.7) !important; -padding: 8px 12px !important; -border-radius: 4px !important; -display: inline-block !important; -margin: 2px 0 !important; -max-width: 100% !important; -box-sizing: border-box !important; + background: rgba(0, 0, 0, 0.7) !important; + padding: 8px 12px !important; + border-radius: 4px !important; + display: inline-block !important; + margin: 2px 0 !important; + max-width: 100% !important; + box-sizing: border-box !important; } -.video-js.vjs-fullscreen .vjs-text-track-display { bottom: 8em !important;} -.video-js.vjs-fullscreen .vjs-text-track-cue { font-size: 1.4em !important; max-width: 85% !important;} -.video-js.vjs-fullscreen .vjs-text-track-cue > div { padding: 10px 16px !important; font-size: 1em !important;} -.video-js .vjs-subtitles-button .vjs-menu.vjs-lock-showing .vjs-menu-content { display: none !important; visibility: hidden !important; -opacity: 0 !important; pointer-events: none !important;} -.video-js .vjs-chapters-button .vjs-menu { display: none !important; } -.video-js .vjs-chapters-button .vjs-menu.vjs-lock-showing { display: none !important; } -.video-js .vjs-chapters-button .vjs-menu.vjs-lock-showing .vjs-menu-content { display: none !important; } -.video-js .vjs-chapters-button .vjs-menu { display: none !important; visibility: hidden !important; opacity: 0 !important; -pointer-events: none !important;} -.video-js .vjs-subtitles-button { position: relative; cursor: pointer !important; pointer-events: auto !important;} -.video-js button.vjs-subtitles-button { cursor: pointer !important; pointer-events: auto !important; -touch-action: manipulation !important; -webkit-tap-highlight-color: transparent !important;} -.video-js button.vjs-subtitles-button::before { content: ""; position: absolute; left: 50%; transform:translateX(-50%); bottom: 6px; -height: 3px; background: #e1002d; border-radius: 2px; width:0; padding:0; transition: none !important; animation: none !important; --webkit-transition: none !important; -moz-transition: none !important; -o-transition: none !important;} +.video-js.vjs-fullscreen .vjs-text-track-display { + bottom: 8em !important; +} +.video-js.vjs-fullscreen .vjs-text-track-cue { + font-size: 1.4em !important; + max-width: 85% !important; +} +.video-js.vjs-fullscreen .vjs-text-track-cue > div { + padding: 10px 16px !important; + font-size: 1em !important; +} +.video-js .vjs-subtitles-button .vjs-menu.vjs-lock-showing .vjs-menu-content { + display: none !important; + visibility: hidden !important; + opacity: 0 !important; + pointer-events: none !important; +} +.video-js .vjs-chapters-button .vjs-menu { + display: none !important; +} +.video-js .vjs-chapters-button .vjs-menu.vjs-lock-showing { + display: none !important; +} +.video-js .vjs-chapters-button .vjs-menu.vjs-lock-showing .vjs-menu-content { + display: none !important; +} +.video-js .vjs-chapters-button .vjs-menu { + display: none !important; + visibility: hidden !important; + opacity: 0 !important; + pointer-events: none !important; +} +.video-js .vjs-subtitles-button { + position: relative; + cursor: pointer !important; + pointer-events: auto !important; +} +.video-js button.vjs-subtitles-button { + cursor: pointer !important; + pointer-events: auto !important; + touch-action: manipulation !important; + -webkit-tap-highlight-color: transparent !important; +} +.video-js button.vjs-subtitles-button::before { + content: ""; + position: absolute; + left: 50%; + transform: translateX(-50%); + bottom: 6px; + height: 3px; + background: #e1002d; + border-radius: 2px; + width: 0; + padding: 0; + transition: none !important; + animation: none !important; + -webkit-transition: none !important; + -moz-transition: none !important; + -o-transition: none !important; +} -.video-js .vjs-subs-active button.vjs-subtitles-button::before { width:24px; transition: none !important; -animation: none !important; -webkit-transition: none !important; -moz-transition: none !important; -o-transition: none !important;} -.video-js button.vjs-subtitles-button { transition: none !important; animation: none !important; -webkit-transition: none !important; --moz-transition: none !important; -o-transition: none !important;} +.video-js .vjs-subs-active button.vjs-subtitles-button::before { + width: 24px; + transition: none !important; + animation: none !important; + -webkit-transition: none !important; + -moz-transition: none !important; + -o-transition: none !important; +} +.video-js button.vjs-subtitles-button { + transition: none !important; + animation: none !important; + -webkit-transition: none !important; + -moz-transition: none !important; + -o-transition: none !important; +} .video-js .vjs-autoplay-toggle .vjs-hover-display, .video-js .vjs-autoplay-toggle .vjs-tooltip, -.video-js .vjs-autoplay-toggle .vjs-tooltip-text { display: none !important; visibility: hidden !important; -opacity: 0 !important; pointer-events: none !important;} +.video-js .vjs-autoplay-toggle .vjs-tooltip-text { + display: none !important; + visibility: hidden !important; + opacity: 0 !important; + pointer-events: none !important; +} -.video-js .vjs-autoplay-toggle { position: relative;} +.video-js .vjs-autoplay-toggle { + position: relative; +} .video-js .vjs-autoplay-toggle::after { content: attr(title); @@ -417,16 +494,23 @@ opacity: 0 !important; pointer-events: none !important;} pointer-events: none; opacity: 0; visibility: hidden; - transition: opacity 0.2s ease, visibility 0.2s ease; + transition: + opacity 0.2s ease, + visibility 0.2s ease; z-index: 1000; margin-bottom: 8px; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; + font-family: + -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", + "Droid Sans", "Helvetica Neue", sans-serif; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.1); } .video-js .vjs-autoplay-toggle:hover::after, -.video-js .vjs-autoplay-toggle:focus::after { opacity: 1; visibility: visible;} +.video-js .vjs-autoplay-toggle:focus::after { + opacity: 1; + visibility: visible; +} .video-js .vjs-settings-button { cursor: pointer !important; @@ -453,207 +537,656 @@ opacity: 0 !important; pointer-events: none !important;} user-select: none !important; } -.video-js .vjs-settings-button:hover { background-color: rgba(255, 255, 255, 0.1) !important;} -.video-js .vjs-settings-button:focus { outline: 2px solid #fff !important; outline-offset: 2px !important;} +.video-js .vjs-settings-button:hover { + background-color: rgba(255, 255, 255, 0.1) !important; +} +.video-js .vjs-settings-button:focus { + outline: 2px solid #fff !important; + outline-offset: 2px !important; +} -.video-js .vjs-settings-button .vjs-icon-cog { font-size: 18px !important; width: 18px !important; height: 18px !important; -display: flex !important; align-items: center !important; justify-content: center !important;} -.vjs-play-progress { background-color: #019932 !important;} -.vjs-load-progress { background: rgba(255, 255, 255, 0.5) !important;} -.vjs-progress-holder { background: rgba(255, 255, 255, 0.5) !important;} +.video-js .vjs-settings-button .vjs-icon-cog { + font-size: 18px !important; + width: 18px !important; + height: 18px !important; + display: flex !important; + align-items: center !important; + justify-content: center !important; +} +.vjs-play-progress { + background-color: #019932 !important; +} +.vjs-load-progress { + background: rgba(255, 255, 255, 0.5) !important; +} +.vjs-progress-holder { + background: rgba(255, 255, 255, 0.5) !important; +} -.video-js .vjs-progress-control { position: absolute !important; bottom: 46px !important; left: 0 !important; right: 0 !important; -width: 100% !important; height: 0 !important; z-index: 3 !important; padding: 0 !important; margin: 0 auto !important;} -.video-js .vjs-control-bar .vjs-progress-control { display: none !important;} -.video-js .vjs-progress-control.vjs-control { display: block !important;} +.video-js .vjs-progress-control { + position: absolute !important; + bottom: 46px !important; + left: 0 !important; + right: 0 !important; + width: 100% !important; + height: 0 !important; + z-index: 3 !important; + padding: 0 !important; + margin: 0 auto !important; +} +.video-js .vjs-control-bar .vjs-progress-control { + display: none !important; +} +.video-js .vjs-progress-control.vjs-control { + display: block !important; +} .video-js .vjs-control-bar .vjs-icon-placeholder, .video-js .vjs-control-bar .vjs-button .vjs-icon-placeholder, -.video-js .vjs-control-bar [class*="vjs-icon-"] { font-size: 1.5em !important;} +.video-js .vjs-control-bar [class*="vjs-icon-"] { + font-size: 1.5em !important; +} -.vjs-control-bar .custom-remaining-time .vjs-remaining-time-display { font-size: 14px !important; font-weight: 500; line-height: 1; -display: flex; align-items: center; justify-content: center; height: 100%; color: #fff;} -.vjs-mouse-display { z-index: 4 !important;} -.vjs-slider-horizontal { top: -5px;} -.video-js .vjs-spacer-control {flex: 1 !important; min-width: 1px !important; height: 100% !important;} -.video-js .vjs-control-bar .vjs-control { flex: none !important;} -.video-js .vjs-autoplay-toggle { margin-right: 10px !important;} -.video-js .vjs-picture-in-picture-control { margin-left: 6px !important; } -.vjs-seek-indicator { position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; -z-index: 9999 !important; pointer-events: none !important; display: none !important; align-items: center !important; justify-content: center !important; -opacity: 0 !important; visibility: hidden !important; transition: opacity 0.2s ease-in-out !important; } -.vjs-seek-indicator-content { background: transparent !important; flex-direction: column !important; align-items: center !important; -justify-content: center !important;} -.vjs-seek-indicator-icon { position: relative !important; display: flex !important; align-items: center !important; -justify-content: center !important; margin-bottom: 4px !important;} -.seek-icon-container { display: flex !important; flex-direction: column !important; align-items: center !important; -justify-content: center !important; animation: seekPulse 0.3s ease-out !important;} +.vjs-control-bar .custom-remaining-time .vjs-remaining-time-display { + font-size: 14px !important; + font-weight: 500; + line-height: 1; + display: flex; + align-items: center; + justify-content: center; + height: 100%; + color: #fff; +} +.vjs-mouse-display { + z-index: 4 !important; +} +.vjs-slider-horizontal { + top: -5px; +} +.video-js .vjs-spacer-control { + flex: 1 !important; + min-width: 1px !important; + height: 100% !important; +} +.video-js .vjs-control-bar .vjs-control { + flex: none !important; +} +.video-js .vjs-autoplay-toggle { + margin-right: 10px !important; +} +.video-js .vjs-picture-in-picture-control { + margin-left: 6px !important; +} +.vjs-seek-indicator { + position: absolute !important; + top: 50% !important; + left: 50% !important; + transform: translate(-50%, -50%) !important; + z-index: 9999 !important; + pointer-events: none !important; + display: none !important; + align-items: center !important; + justify-content: center !important; + opacity: 0 !important; + visibility: hidden !important; + transition: opacity 0.2s ease-in-out !important; +} +.vjs-seek-indicator-content { + background: transparent !important; + flex-direction: column !important; + align-items: center !important; + justify-content: center !important; +} +.vjs-seek-indicator-icon { + position: relative !important; + display: flex !important; + align-items: center !important; + justify-content: center !important; + margin-bottom: 4px !important; +} +.seek-icon-container { + display: flex !important; + flex-direction: column !important; + align-items: center !important; + justify-content: center !important; + animation: seekPulse 0.3s ease-out !important; +} -.youtube-seek-container { display: flex !important; align-items: center !important; justify-content: center !important; -animation: youtubeSeekPulse 0.3s ease-out !important;} -.youtube-seek-circle { width: 80px !important; height: 80px !important; border-radius: 50% !important; -webkit-border-radius: 50% !important; --moz-border-radius: 50% !important; background: rgba(0, 0, 0, 0.8) !important; backdrop-filter: blur(10px) !important; --webkit-backdrop-filter: blur(10px) !important; display: flex !important; flex-direction: column !important; align-items: center !important; -justify-content: center !important; padding: 0 !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important; -border: 1px solid rgba(255, 255, 255, 0.15) !important; box-sizing: border-box !important; overflow: hidden !important;} +.youtube-seek-container { + display: flex !important; + align-items: center !important; + justify-content: center !important; + animation: youtubeSeekPulse 0.3s ease-out !important; +} +.youtube-seek-circle { + width: 80px !important; + height: 80px !important; + border-radius: 50% !important; + -webkit-border-radius: 50% !important; + -moz-border-radius: 50% !important; + background: rgba(0, 0, 0, 0.8) !important; + backdrop-filter: blur(10px) !important; + -webkit-backdrop-filter: blur(10px) !important; + display: flex !important; + flex-direction: column !important; + align-items: center !important; + justify-content: center !important; + padding: 0 !important; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important; + border: 1px solid rgba(255, 255, 255, 0.15) !important; + box-sizing: border-box !important; + overflow: hidden !important; +} -.youtube-seek-icon {display: flex !important; align-items: center !important; justify-content: center !important; -margin-bottom: 4px !important;} -.youtube-seek-icon svg {filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5)) !important;} -.youtube-seek-time {color: white !important;font-size: 10px !important;font-weight: 500 !important; text-align: center !important; -line-height: 1.2 !important; opacity: 0.9 !important; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;} +.youtube-seek-icon { + display: flex !important; + align-items: center !important; + justify-content: center !important; + margin-bottom: 4px !important; +} +.youtube-seek-icon svg { + filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5)) !important; +} +.youtube-seek-time { + color: white !important; + font-size: 10px !important; + font-weight: 500 !important; + text-align: center !important; + line-height: 1.2 !important; + opacity: 0.9 !important; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; +} @keyframes youtubeSeekPulse { 0% { - transform: scale(0.7); opacity: 0.5; + transform: scale(0.7); + opacity: 0.5; } 50% { - transform: scale(1.05); opacity: 0.9; + transform: scale(1.05); + opacity: 0.9; } 100% { - transform: scale(1); opacity: 1; + transform: scale(1); + opacity: 1; } } -.seek-seconds { color: white !important; font-size: 16px !important; font-weight: bold !important; -text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7) !important; line-height: 1 !important;} -.vjs-seek-indicator-text { color: white !important; font-size: 16px !important; font-weight: 500 !important; -text-align: center !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;} -button{cursor: pointer;} +.seek-seconds { + color: white !important; + font-size: 16px !important; + font-weight: bold !important; + text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7) !important; + line-height: 1 !important; +} +.vjs-seek-indicator-text { + color: white !important; + font-size: 16px !important; + font-weight: 500 !important; + text-align: center !important; + text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important; +} +button { + cursor: pointer; +} -.video-js{ padding:0; height:100% !important; border-radius:12px;} -.video-chapter{ position:absolute; top:auto; bottom:60px; width:min(360px, calc(100% - 20px)); border:1px solid rgba(255, 255, 255, 0.12); border-radius:12px; -height:calc(100% - 80px); background:rgba(18, 18, 18, 0.96); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); overflow:hidden; -box-shadow: 0 12px 30px rgba(0,0,0,0.45); right:10px;} -.chapter-head{ padding:12px 8px 10px 16px; position:sticky; top:0; left:0; background:linear-gradient(180deg, rgba(28,28,28,0.95), rgba(18,18,18,0.95)); -border-bottom:1px solid rgba(255,255,255,0.08); z-index:2; } -.playlist-title{ display:flex; align-items:center; gap:10px; } -.chapter-title{ width: auto; flex: 1; min-width: 0; } -.chapter-title h3{ margin:0; padding:0;} -.chapter-title h3 a{color:#fff; font-size: 18px; line-height: 26px; font-weight: 700; text-decoration: none; -white-space: nowrap; text-overflow: ellipsis; height: 28px; overflow: hidden; display: block;} -.chapter-title p{ margin:4px 0 0; padding:0; color:#fff; font-size:12px; font-weight:400; line-height:15px;} -.chapter-title p a{ color:#fff; font-size:12px; font-weight:400; line-height:15px; text-decoration: none;} +.video-js { + padding: 0; + height: 100% !important; + border-radius: 12px; +} +.video-chapter { + position: absolute; + top: auto; + bottom: 60px; + width: min(360px, calc(100% - 20px)); + border: 1px solid rgba(255, 255, 255, 0.12); + border-radius: 12px; + height: calc(100% - 80px); + background: rgba(18, 18, 18, 0.96); + backdrop-filter: blur(6px); + -webkit-backdrop-filter: blur(6px); + overflow: hidden; + box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45); + right: 10px; +} +.chapter-head { + padding: 12px 8px 10px 16px; + position: sticky; + top: 0; + left: 0; + background: linear-gradient(180deg, rgba(28, 28, 28, 0.95), rgba(18, 18, 18, 0.95)); + border-bottom: 1px solid rgba(255, 255, 255, 0.08); + z-index: 2; +} +.playlist-title { + display: flex; + align-items: center; + gap: 10px; +} +.chapter-title { + width: auto; + flex: 1; + min-width: 0; +} +.chapter-title h3 { + margin: 0; + padding: 0; +} +.chapter-title h3 a { + color: #fff; + font-size: 18px; + line-height: 26px; + font-weight: 700; + text-decoration: none; + white-space: nowrap; + text-overflow: ellipsis; + height: 28px; + overflow: hidden; + display: block; +} +.chapter-title p { + margin: 4px 0 0; + padding: 0; + color: #fff; + font-size: 12px; + font-weight: 400; + line-height: 15px; +} +.chapter-title p a { + color: #fff; + font-size: 12px; + font-weight: 400; + line-height: 15px; + text-decoration: none; +} -.chapter-close{ width:40px; margin-left:auto; display:flex; align-items:center; justify-content:flex-end;} -.chapter-close button{ background:transparent; color:#fff; border: 0; width: 40px; height: 40px; padding: 0; display: flex; -align-items: center; justify-content: center; border-radius:8px;} -.chapter-close button:hover{ background:rgba(255,255,255,0.1);} +.chapter-close { + width: 40px; + margin-left: auto; + display: flex; + align-items: center; + justify-content: flex-end; +} +.chapter-close button { + background: transparent; + color: #fff; + border: 0; + width: 40px; + height: 40px; + padding: 0; + display: flex; + align-items: center; + justify-content: center; + border-radius: 8px; +} +.chapter-close button:hover { + background: rgba(255, 255, 255, 0.1); +} -.settings-header{ display:flex; align-items:center; justify-content:space-between; position:relative;} -.settings-close-btn{ background:transparent; color:#fff; border: 0; width: 32px; height: 32px; padding: 0; display: flex; -align-items: center; justify-content: center; border-radius:6px; cursor:pointer;} -.settings-close-btn:hover{ background:rgba(255,255,255,0.1);} +.settings-header { + display: flex; + align-items: center; + justify-content: space-between; + position: relative; +} +.settings-close-btn { + background: transparent; + color: #fff; + border: 0; + width: 32px; + height: 32px; + padding: 0; + display: flex; + align-items: center; + justify-content: center; + border-radius: 6px; + cursor: pointer; +} +.settings-close-btn:hover { + background: rgba(255, 255, 255, 0.1); +} -.playlist-action-menu{ display:none; justify-content:space-between; gap:10px;} -.playlist-action-menu button{ background:transparent; border: 0; width: 40px; height: 40px; padding: 0; display: flex; -align-items: center; justify-content: center; align-items:center; border-radius:100px; } -.playlist-action-menu button:hover{ background:rgba(0, 0, 0, 0.1);} -.start-action{ display:flex;} +.playlist-action-menu { + display: none; + justify-content: space-between; + gap: 10px; +} +.playlist-action-menu button { + background: transparent; + border: 0; + width: 40px; + height: 40px; + padding: 0; + display: flex; + align-items: center; + justify-content: center; + align-items: center; + border-radius: 100px; +} +.playlist-action-menu button:hover { + background: rgba(0, 0, 0, 0.1); +} +.start-action { + display: flex; +} -.chapter-body{ height:calc(100% - 80px); overflow:auto; } -.chapter-body ul{ margin:0; padding:0;} -.playlist-items a{ padding:12px; display:flex; align-items:center; text-decoration:none; gap:12px; width:100%; box-sizing:border-box; color:#fff;} -.playlist-items a:hover{background:rgba(255,255,255,0.06);} -.playlist-items.selected a{ background:rgba(255,255,255,0.14);} -.playlist-drag-handle{ width:24px; display:flex; justify-content:center; color:#e0e0e0; font-size:12px;} -.thumbnail-meta{ flex:1; min-width:0; padding:0;} -.thumbnail-meta h4{ margin:0 2px 4px 0; font-size:14px; line-height:20px; font-weight:600; overflow:hidden; text-overflow:ellipsis; -color:#fff; white-space:normal; max-height:40px; -webkit-line-clamp: 2; line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical;} -.thumbnail-meta .meta-sub{ display:flex; gap:8px; align-items:center; } -.thumbnail-meta .meta-sub .meta-dynamic{ color:#bdbdbd; font-size:12px; line-height:18px; } -.thumbnail-action button{ border:0; background:transparent; color:#fff; opacity:0;} -.playlist-items a:hover .thumbnail-action button{ opacity:1;} +.chapter-body { + height: calc(100% - 80px); + overflow: auto; + -webkit-overflow-scrolling: touch; + touch-action: pan-y; + overscroll-behavior: contain; + scroll-behavior: smooth; +} +.chapter-body ul { + margin: 0; + padding: 0; +} +.playlist-items a { + padding: 12px; + display: flex; + align-items: center; + text-decoration: none; + gap: 12px; + width: 100%; + box-sizing: border-box; + color: #fff; +} +.playlist-items a:hover { + background: rgba(255, 255, 255, 0.06); +} +.playlist-items.selected a { + background: rgba(255, 255, 255, 0.14); +} +.playlist-drag-handle { + width: 24px; + display: flex; + justify-content: center; + color: #e0e0e0; + font-size: 12px; +} +.thumbnail-meta { + flex: 1; + min-width: 0; + padding: 0; +} +.thumbnail-meta h4 { + margin: 0 2px 4px 0; + font-size: 14px; + line-height: 20px; + font-weight: 600; + overflow: hidden; + text-overflow: ellipsis; + color: #fff; + white-space: normal; + max-height: 40px; + -webkit-line-clamp: 2; + line-clamp: 2; + display: -webkit-box; + -webkit-box-orient: vertical; +} +.thumbnail-meta .meta-sub { + display: flex; + gap: 8px; + align-items: center; +} +.thumbnail-meta .meta-sub .meta-dynamic { + color: #bdbdbd; + font-size: 12px; + line-height: 18px; +} +.thumbnail-action button { + border: 0; + background: transparent; + color: #fff; + opacity: 0; +} +.playlist-items a:hover .thumbnail-action button { + opacity: 1; +} -.chapter-body::-webkit-scrollbar{ width:10px; } -.chapter-body::-webkit-scrollbar-thumb{ background:rgba(255,255,255,0.18); border-radius:8px; } -.chapter-body::-webkit-scrollbar-track{ background:transparent; } +.chapter-body::-webkit-scrollbar { + width: 10px; +} +.chapter-body::-webkit-scrollbar-thumb { + background: rgba(255, 255, 255, 0.18); + border-radius: 8px; +} +.chapter-body::-webkit-scrollbar-track { + background: transparent; +} -.video-js .vjs-control-bar .vjs-spacer-control{ margin-left:auto;} -.video-js .vjs-control-bar .settings-item-svg{ display:flex;} -.video-js .vjs-control-bar .settings-item-svg svg{width:auto !important; height: auto !important; transform:inherit !important;} +/* Improve touch scrolling on mobile */ +@media (max-width: 767px) { + .chapter-body { + -webkit-overflow-scrolling: touch; + touch-action: pan-y; + overscroll-behavior: contain; + } + .chapter-body::-webkit-scrollbar { + width: 0px; + } +} -.video-js div.vjs-control{ width:auto;} +.video-js .vjs-control-bar .vjs-spacer-control { + margin-left: auto; +} +.video-js .vjs-control-bar .settings-item-svg { + display: flex; +} +.video-js .vjs-control-bar .settings-item-svg svg { + width: auto !important; + height: auto !important; + transform: inherit !important; +} + +.video-js div.vjs-control { + width: auto; +} .vjs-chapters-button button.vjs-button, .vjs-subtitles-button button.vjs-button, -.video-js button.vjs-control{ width:48px; height:48px; display:flex; align-items:center; justify-content:center;} -button.vjs-button > .vjs-icon-placeholder:before{ line-height:48px; transition:ease-in-out .5s;} +.video-js button.vjs-control { + width: 48px; + height: 48px; + display: flex; + align-items: center; + justify-content: center; +} +button.vjs-button > .vjs-icon-placeholder:before { + line-height: 48px; + transition: ease-in-out 0.5s; +} -.video-js .vjs-volume-panel div.vjs-volume-control { height:100% !important; display:flex; align-items:center; justify-content:center; -margin:0; width:0; transition:ease-in-out .5s !important; opacity:0;} -.video-js .vjs-volume-panel div.vjs-volume-control .vjs-volume-bar { margin:0; top:0;} +.video-js .vjs-volume-panel div.vjs-volume-control { + height: 100% !important; + display: flex; + align-items: center; + justify-content: center; + margin: 0; + width: 0; + transition: ease-in-out 0.5s !important; + opacity: 0; +} +.video-js .vjs-volume-panel div.vjs-volume-control .vjs-volume-bar { + margin: 0; + top: 0; +} -.vjs-settings-button svg{ transition:ease-in-out .3s;} -.vjs-settings-button.settings-clicked svg{ transform:rotate(30deg);} +.vjs-settings-button svg { + transition: ease-in-out 0.3s; +} +.vjs-settings-button.settings-clicked svg { + transform: rotate(30deg); +} -.video-js span.vjs-control-text{ position:absolute !important; bottom: 125%; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.75); -color: white; padding: 6px 8px !important; border-radius: 3px; font-size: 13px; white-space: nowrap; opacity: 0; pointer-events: none; -transition: opacity 0.3s ease; z-index: 1000; box-shadow: 0 0 5px rgba(0,0,0,0.3);height: auto !important; width: auto !important; -overflow:visible !important; clip: initial !important;} -.video-js button.vjs-button:hover span.vjs-control-text{ opacity: 1; } +.video-js span.vjs-control-text { + position: absolute !important; + bottom: 125%; + left: 50%; + transform: translateX(-50%); + background: rgba(0, 0, 0, 0.75); + color: white; + padding: 6px 8px !important; + border-radius: 3px; + font-size: 13px; + white-space: nowrap; + opacity: 0; + pointer-events: none; + transition: opacity 0.3s ease; + z-index: 1000; + box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); + height: auto !important; + width: auto !important; + overflow: visible !important; + clip: initial !important; +} +.video-js button.vjs-button:hover span.vjs-control-text { + opacity: 1; +} .video-js .vjs-control:focus:before, .video-js .vjs-control:hover:before, -.video-js .vjs-control:focus { text-shadow:none !important;} - -.vjs-volume-panel { gap:5px;} -.video-js .vjs-play-progress.vjs-slider-bar + .vjs-time-tooltip{ padding:0;} - -.vjs-chapter-floating-tooltip{ text-align:center; width:160px !important; max-width:100% !important ; height:auto;} -.chapter-image-sprite{width: 166px !important; max-width:100% !important; height: 96px; margin:0 auto 10px; -border-radius: 6px; border: 3px solid #FFF; } -.vjs-chapter-floating-tooltip .chapter-title{ font-size:16px; margin:0 0 10px; font-weight:700; word-break: break-all; line-height:20px;} -.vjs-chapter-floating-tooltip .position-info, -.vjs-chapter-floating-tooltip .chapter-info{ font-size:15px; display:inline-block; margin:0 0 2px; line-height:normal; vertical-align:top; line-height:20px;} - -/* Sprite Preview Tooltip Styles - Match chapter styling */ -.vjs-sprite-preview-tooltip{ text-align:center; width:172px !important; max-width:100% !important ; height:auto;} - -.vjs-sprite-preview-tooltip .sprite-image-preview{ width: 166px !important; max-width:100% !important; height: 96px; margin:0 auto; -border-radius: 6px; border: 3px solid #FFF; } - - -@media (pointer: coarse) { - .video-js .vjs-volume-panel div.vjs-volume-control {width: auto; opacity: 1;} +.video-js .vjs-control:focus { + text-shadow: none !important; } +.vjs-volume-panel { + gap: 5px; +} +.video-js .vjs-play-progress.vjs-slider-bar + .vjs-time-tooltip { + padding: 0; +} -@media(min-width: 1200px){ - .vjs-related-videos-grid { grid-template-columns: repeat(4, 1fr);} +.vjs-chapter-floating-tooltip { + text-align: center; + width: 160px !important; + max-width: 100% !important ; + height: auto; +} +.chapter-image-sprite { + width: 166px !important; + max-width: 100% !important; + height: 96px; + margin: 0 auto 10px; + border-radius: 6px; + border: 3px solid #fff; +} +.vjs-chapter-floating-tooltip .chapter-title { + font-size: 16px; + margin: 0 0 10px; + font-weight: 700; + word-break: break-all; + line-height: 20px; +} +.vjs-chapter-floating-tooltip .position-info, +.vjs-chapter-floating-tooltip .chapter-info { + font-size: 15px; + display: inline-block; + margin: 0 0 2px; + line-height: normal; + vertical-align: top; + line-height: 20px; +} + +/* Sprite Preview Tooltip Styles - Match chapter styling */ +.vjs-sprite-preview-tooltip { + text-align: center; + width: 172px !important; + max-width: 100% !important ; + height: auto; +} + +.vjs-sprite-preview-tooltip .sprite-image-preview { + width: 166px !important; + max-width: 100% !important; + height: 96px; + margin: 0 auto; + border-radius: 6px; + border: 3px solid #fff; +} + +@media (pointer: coarse) { + .video-js .vjs-volume-panel div.vjs-volume-control { + width: auto; + opacity: 1; + } +} + +@media (min-width: 1200px) { + .vjs-related-videos-grid { + grid-template-columns: repeat(4, 1fr); + } } @media (max-width: 1199px) { - .vjs-related-video-item:nth-child(n + 10) { display: none;} + .vjs-related-video-item:nth-child(n + 10) { + display: none; + } } @media (max-width: 1139px) { - .vjs-related-video-item:nth-child(n + 7) { display: none;} + .vjs-related-video-item:nth-child(n + 7) { + display: none; + } } -@media(min-width: 1024px) and (max-width: 1199px){ - .vjs-related-videos-grid { grid-template-columns: repeat(3, 1fr);} +@media (min-width: 1024px) and (max-width: 1199px) { + .vjs-related-videos-grid { + grid-template-columns: repeat(3, 1fr); + } } -@media(min-width: 1025px) { - .video-js .vjs-text-track-display { bottom: 6em !important;} - .video-js .vjs-autoplay-toggle { margin-right: 12px !important;} - .video-js .vjs-picture-in-picture-control { margin-left: 12px !important;} - .video-js .vjs-text-track-cue { font-size: 1.2em !important; max-width: 90% !important;} - .video-js .vjs-text-track-cue > div { padding: 8px 12px !important; font-size: 1em !important;} - .video-js.vjs-fullscreen .vjs-text-track-display { bottom: 8em !important;} +@media (min-width: 1025px) { + .video-js .vjs-text-track-display { + bottom: 6em !important; + } + .video-js .vjs-autoplay-toggle { + margin-right: 12px !important; + } + .video-js .vjs-picture-in-picture-control { + margin-left: 12px !important; + } + .video-js .vjs-text-track-cue { + font-size: 1.2em !important; + max-width: 90% !important; + } + .video-js .vjs-text-track-cue > div { + padding: 8px 12px !important; + font-size: 1em !important; + } + .video-js.vjs-fullscreen .vjs-text-track-display { + bottom: 8em !important; + } } -@media(min-width: 768px) and (max-width: 1024px) { - .video-js .vjs-text-track-display { bottom: 7em !important;} - .video-js .vjs-text-track-cue {font-size: 1.15em !important; max-width: 88% !important;} - .video-js .vjs-text-track-cue > div { padding: 7px 11px !important; font-size: 0.95em !important;} - .video-js.vjs-fullscreen .vjs-text-track-display { bottom: 9em !important;} - .vjs-related-videos-grid {grid-template-columns: repeat(3, 1fr); } +@media (min-width: 768px) and (max-width: 1024px) { + .video-js .vjs-text-track-display { + bottom: 7em !important; + } + .video-js .vjs-text-track-cue { + font-size: 1.15em !important; + max-width: 88% !important; + } + .video-js .vjs-text-track-cue > div { + padding: 7px 11px !important; + font-size: 0.95em !important; + } + .video-js.vjs-fullscreen .vjs-text-track-display { + bottom: 9em !important; + } + .vjs-related-videos-grid { + grid-template-columns: repeat(3, 1fr); + } .video-js .vjs-control:hover::after, .video-js .vjs-control:focus::after, - .video-js .vjs-control:active::after { display: none !important; opacity: 0 !important; visibility: hidden !important;} - + .video-js .vjs-control:active::after { + display: none !important; + opacity: 0 !important; + visibility: hidden !important; + } + .video-js .vjs-play-control:hover::after, .video-js .vjs-mute-control:hover::after, .video-js .vjs-volume-panel:hover::after, @@ -663,48 +1196,118 @@ border-radius: 6px; border: 3px solid #FFF; } .video-js .vjs-chapters-control:hover::after, .video-js .vjs-autoplay-toggle:hover::after, .video-js .vjs-next-video-control:hover::after, - .video-js .vjs-remaining-time:hover::after { display: none !important; opacity: 0 !important; visibility: hidden !important; } + .video-js .vjs-remaining-time:hover::after { + display: none !important; + opacity: 0 !important; + visibility: hidden !important; + } } -@media(max-width:1024px){ - body div.custom-settings-overlay {height: calc(100% - 40px); max-height:300px;} +@media (max-width: 1024px) { + body div.custom-settings-overlay { + height: calc(100% - 40px); + max-height: 300px; + } } -@media(max-width:767px){ - .vjs-related-vdeo-item:nth-child(n + 5) { display: none;} - .vjs-chapters-button button.vjs-button, - .vjs-subtitles-button button.vjs-button, .video-js button.vjs-control {width:32px; height: 32px;} - button.vjs-button > .vjs-icon-placeholder:before { line-height: 32px;} - .vjs-next-video-control svg{width:32px; height: 32px;} - .video-js div.vjs-control {height: 32px;} - .vjs-button > .vjs-icon-placeholder:before { font-size: 1.4em !important;} - .video-js .vjs-subs-active button.vjs-subtitles-button::before {width: 20px;} - .video-js button.vjs-subtitles-button::before { bottom: 2px;} - .video-js div.vjs-control-bar{ padding:0 2px;} - .video-js .vjs-autoplay-toggle { margin-right: 6px !important;} - .video-js .vjs-picture-in-picture-control { margin-left: 6px !important;} - .video-js .vjs-text-track-display { bottom: 8em !important; } - .video-js .vjs-text-track-cue { font-size: 1.1em !important; max-width: 95% !important;} - .video-js .vjs-text-track-cue > div { padding: 6px 10px !important; font-size: 0.9em !important; - background: rgba(0, 0, 0, 0.8) !important;} - .video-js.vjs-fullscreen .vjs-text-track-display { bottom: 10em !important;} - .video-js.vjs-fullscreen .vjs-text-track-cue { font-size: 1.3em !important; max-width: 90% !important;} - .video-js.vjs-fullscreen .vjs-text-track-cue > div { padding: 8px 12px !important; font-size: 0.95em !important;} - .video-js .vjs-subtitles-button button.vjs-button { min-width: 32px !important; min-height: 32px !important; touch-action: manipulation !important; - -webkit-tap-highlight-color: transparent !important; -webkit-touch-callout: none !important; - -webkit-user-select: none !important;user-select: none !important;} - .chapter-body{height: calc(100% - 70px); } +@media (max-width: 767px) { + .vjs-related-vdeo-item:nth-child(n + 5) { + display: none; + } + .vjs-chapters-button button.vjs-button, + .vjs-subtitles-button button.vjs-button, + .video-js button.vjs-control { + width: 32px; + height: 32px; + } + button.vjs-button > .vjs-icon-placeholder:before { + line-height: 32px; + } + .vjs-next-video-control svg { + width: 32px; + height: 32px; + } + .video-js div.vjs-control { + height: 32px; + } + .vjs-button > .vjs-icon-placeholder:before { + font-size: 1.4em !important; + } + .video-js .vjs-subs-active button.vjs-subtitles-button::before { + width: 20px; + } + .video-js button.vjs-subtitles-button::before { + bottom: 2px; + } + .video-js div.vjs-control-bar { + padding: 0 2px; + } + .video-js .vjs-autoplay-toggle { + margin-right: 6px !important; + } + .video-js .vjs-picture-in-picture-control { + margin-left: 6px !important; + } + .video-js .vjs-text-track-display { + bottom: 8em !important; + } + .video-js .vjs-text-track-cue { + font-size: 1.1em !important; + max-width: 95% !important; + } + .video-js .vjs-text-track-cue > div { + padding: 6px 10px !important; + font-size: 0.9em !important; + background: rgba(0, 0, 0, 0.8) !important; + } + .video-js.vjs-fullscreen .vjs-text-track-display { + bottom: 10em !important; + } + .video-js.vjs-fullscreen .vjs-text-track-cue { + font-size: 1.3em !important; + max-width: 90% !important; + } + .video-js.vjs-fullscreen .vjs-text-track-cue > div { + padding: 8px 12px !important; + font-size: 0.95em !important; + } + .video-js .vjs-subtitles-button button.vjs-button { + min-width: 32px !important; + min-height: 32px !important; + touch-action: manipulation !important; + -webkit-tap-highlight-color: transparent !important; + -webkit-touch-callout: none !important; + -webkit-user-select: none !important; + user-select: none !important; + } + .chapter-body { + height: calc(100% - 70px); + } .subtitles-submenu, .quality-submenu, - .speed-submenu{ height:100%; overflow:auto;} - body div.custom-settings-overlay{ bottom:40px; } - div.chapter-close button{ width:30px; height:30px;} - .vjs-related-videos-grid { grid-template-columns: repeat(2, 1fr); } - + .speed-submenu { + height: 100%; + overflow: auto; + } + body div.custom-settings-overlay { + bottom: 40px; + } + div.chapter-close button { + width: 30px; + height: 30px; + } + .vjs-related-videos-grid { + grid-template-columns: repeat(2, 1fr); + } + .video-js .vjs-control:hover::after, .video-js .vjs-control:focus::after, - .video-js .vjs-control:active::after { display: none !important; opacity: 0 !important; visibility: hidden !important;} - + .video-js .vjs-control:active::after { + display: none !important; + opacity: 0 !important; + visibility: hidden !important; + } + .video-js .vjs-play-control:hover::after, .video-js .vjs-mute-control:hover::after, .video-js .vjs-volume-panel:hover::after, @@ -714,41 +1317,126 @@ border-radius: 6px; border: 3px solid #FFF; } .video-js .vjs-chapters-control:hover::after, .video-js .vjs-autoplay-toggle:hover::after, .video-js .vjs-next-video-control:hover::after, - .video-js .vjs-remaining-time:hover::after { display: none !important; opacity: 0 !important; visibility: hidden !important;} + .video-js .vjs-remaining-time:hover::after { + display: none !important; + opacity: 0 !important; + visibility: hidden !important; + } - .video-js .vjs-autoplay-toggle.touch-active::after {opacity: 1; visibility: visible; } - .video-js .vjs-autoplay-toggle::after { font-size: 11px; padding: 5px 8px; margin-bottom: 6px; } - .video-container {padding: 0 15px;} - .vjs-related-video-thumbnail {height: 100%; } - .vjs-chapter-floating-tooltip {font-size: 11px !important;} - .custom-chapters-overlay .video-chapter { right: 10px ; left: auto ; width: 100% ; max-width: calc(300px - 20px) ; height: calc(100% - 40px) ; - max-height: calc(100% - 40px) ; overflow: hidden ; bottom: 40px; } - .video-js .vjs-settings-button { min-width: 44px !important; height: 44px !important; padding: 0 !important; margin: 0 2px !important; display: flex !important; - align-items: center !important; justify-content: center !important; touch-action: manipulation !important; -webkit-tap-highlight-color: transparent !important; cursor: pointer !important; z-index: 1000 !important; pointer-events: auto !important; position: relative !important; } - .video-js .vjs-settings-button .vjs-icon-cog { font-size: 20px !important; width: 20px !important; height: 20px !important; display: flex !important; align-items: center !important; justify-content: center !important; } - .video-js .vjs-control-bar .vjs-button {touch-action: manipulation !important; -webkit-tap-highlight-color: transparent !important; -webkit-touch-callout: none !important; -webkit-user-select: none !important; user-select: none !important; } - - .custom-settings-overlay .settings-item {padding:6px 16px ; font-size:15px ; touch-action: manipulation ; line-height:18px; } - .custom-settings-overlay .settings-header {padding: 10px 16px ; font-size: 18px ; line-height:20px ; } - .chapter-head {padding:10px 15px ;} - .chapter-title h3 a {font-size: 15px !important; line-height: 20px !important; height:20px !important; } - .chapter-title p {font-size: 11px !important; line-height: 14px !important; } - .playlist-items a {padding:10px 16px !important; min-height: 58px !important; } - .thumbnail-meta h4 {font-size: 13px !important; line-height: 18px !important; } - .thumbnail-meta .meta-sub .meta-dynamic {font-size: 11px !important; line-height: 16px !important; } + .video-js .vjs-autoplay-toggle.touch-active::after { + opacity: 1; + visibility: visible; + } + .video-js .vjs-autoplay-toggle::after { + font-size: 11px; + padding: 5px 8px; + margin-bottom: 6px; + } + .video-container { + padding: 0 15px; + } + .vjs-related-video-thumbnail { + height: 100%; + } + .vjs-chapter-floating-tooltip { + font-size: 11px !important; + } + .custom-chapters-overlay .video-chapter { + right: 10px; + left: auto; + width: 100%; + max-width: calc(300px - 20px); + height: calc(100% - 40px); + max-height: calc(100% - 40px); + overflow: hidden; + bottom: 40px; + } + .video-js .vjs-settings-button { + min-width: 44px !important; + height: 44px !important; + padding: 0 !important; + margin: 0 2px !important; + display: flex !important; + align-items: center !important; + justify-content: center !important; + touch-action: manipulation !important; + -webkit-tap-highlight-color: transparent !important; + cursor: pointer !important; + z-index: 1000 !important; + pointer-events: auto !important; + position: relative !important; + } + .video-js .vjs-settings-button .vjs-icon-cog { + font-size: 20px !important; + width: 20px !important; + height: 20px !important; + display: flex !important; + align-items: center !important; + justify-content: center !important; + } + .video-js .vjs-control-bar .vjs-button { + touch-action: manipulation !important; + -webkit-tap-highlight-color: transparent !important; + -webkit-touch-callout: none !important; + -webkit-user-select: none !important; + user-select: none !important; + } + .custom-settings-overlay .settings-item { + padding: 6px 16px; + font-size: 15px; + touch-action: manipulation; + line-height: 18px; + } + .custom-settings-overlay .settings-header { + padding: 10px 16px; + font-size: 18px; + line-height: 20px; + } + .chapter-head { + padding: 10px 15px; + } + .chapter-title h3 a { + font-size: 15px !important; + line-height: 20px !important; + height: 20px !important; + } + .chapter-title p { + font-size: 11px !important; + line-height: 14px !important; + } + .playlist-items a { + padding: 10px 16px !important; + min-height: 58px !important; + } + .thumbnail-meta h4 { + font-size: 13px !important; + line-height: 18px !important; + } + .thumbnail-meta .meta-sub .meta-dynamic { + font-size: 11px !important; + line-height: 16px !important; + } } @media (max-width: 574px) { - .vjs-related-video-item:nth-child(n + 3) { display: none;} + .vjs-related-video-item:nth-child(n + 3) { + display: none; + } } -@media(max-width:480px){ - .video-container { padding: 0 10px;} +@media (max-width: 480px) { + .video-container { + padding: 0 10px; + } .video-js .vjs-control:hover::after, .video-js .vjs-control:focus::after, - .video-js .vjs-control:active::after { display: none !important; opacity: 0 !important; visibility: hidden !important;} + .video-js .vjs-control:active::after { + display: none !important; + opacity: 0 !important; + visibility: hidden !important; + } .video-js .vjs-play-control:hover::after, .video-js .vjs-mute-control:hover::after, @@ -759,30 +1447,78 @@ border-radius: 6px; border: 3px solid #FFF; } .video-js .vjs-chapters-control:hover::after, .video-js .vjs-autoplay-toggle:hover::after, .video-js .vjs-next-video-control:hover::after, - .video-js .vjs-remaining-time:hover::after { display: none !important; opacity: 0 !important; visibility: hidden !important;} + .video-js .vjs-remaining-time:hover::after { + display: none !important; + opacity: 0 !important; + visibility: hidden !important; + } - .vjs-related-video-thumbnail {height: 100%;} - .video-js .vjs-settings-button .vjs-icon-cog {font-size: 22px !important; width: 22px !important; height: 22px !important;} + .vjs-related-video-thumbnail { + height: 100%; + } + .video-js .vjs-settings-button .vjs-icon-cog { + font-size: 22px !important; + width: 22px !important; + height: 22px !important; + } } @media (max-width: 439px) { - .vjs-related-video-item:nth-child(n + 2) { display: none;} - .vjs-related-videos-grid { grid-template-columns: repeat(1, 1fr);} + .vjs-related-video-item:nth-child(n + 2) { + display: none; + } + .vjs-related-videos-grid { + grid-template-columns: repeat(1, 1fr); + } } -@media(max-width:399px){ - .vjs-chapters-button button.vjs-button, - .vjs-subtitles-button button.vjs-button, .video-js button.vjs-control {width:28px; height: 28px;} - button.vjs-button > .vjs-icon-placeholder:before { line-height: 28px;} - .vjs-next-video-control svg{width:28px; height: 28px;} - .video-js div.vjs-control {height: 28px;} - .video-js .vjs-autoplay-toggle { margin-right: 4px !important; } - .video-js .vjs-picture-in-picture-control { margin-left: 4px !important; } - .video-js .vjs-text-track-display { bottom: 7em !important; } - .video-js .vjs-text-track-cue { font-size: 1em !important; max-width: 98% !important; } - .video-js .vjs-text-track-cue > div { padding: 4px 8px !important; font-size: 0.85em !important; background: rgba(0, 0, 0, 0.85) !important; } - .video-js.vjs-fullscreen .vjs-text-track-display { bottom: 9em !important; } - .video-js.vjs-fullscreen .vjs-text-track-cue { font-size: 1.2em !important; max-width: 95% !important; } - .video-js.vjs-fullscreen .vjs-text-track-cue > div { padding: 6px 10px !important; font-size: 0.9em !important; } - .vjs-button > .vjs-icon-placeholder:before { font-size: 1.4em !important;} -} \ No newline at end of file +@media (max-width: 399px) { + .vjs-chapters-button button.vjs-button, + .vjs-subtitles-button button.vjs-button, + .video-js button.vjs-control { + width: 28px; + height: 28px; + } + button.vjs-button > .vjs-icon-placeholder:before { + line-height: 28px; + } + .vjs-next-video-control svg { + width: 28px; + height: 28px; + } + .video-js div.vjs-control { + height: 28px; + } + .video-js .vjs-autoplay-toggle { + margin-right: 4px !important; + } + .video-js .vjs-picture-in-picture-control { + margin-left: 4px !important; + } + .video-js .vjs-text-track-display { + bottom: 7em !important; + } + .video-js .vjs-text-track-cue { + font-size: 1em !important; + max-width: 98% !important; + } + .video-js .vjs-text-track-cue > div { + padding: 4px 8px !important; + font-size: 0.85em !important; + background: rgba(0, 0, 0, 0.85) !important; + } + .video-js.vjs-fullscreen .vjs-text-track-display { + bottom: 9em !important; + } + .video-js.vjs-fullscreen .vjs-text-track-cue { + font-size: 1.2em !important; + max-width: 95% !important; + } + .video-js.vjs-fullscreen .vjs-text-track-cue > div { + padding: 6px 10px !important; + font-size: 0.9em !important; + } + .vjs-button > .vjs-icon-placeholder:before { + font-size: 1.4em !important; + } +} diff --git a/frontend-tools/video-js/src/assets/css/mediacms-player.css b/frontend-tools/video-js/src/assets/css/mediacms-player.css index 5f2bedb4..a0d929ef 100644 --- a/frontend-tools/video-js/src/assets/css/mediacms-player.css +++ b/frontend-tools/video-js/src/assets/css/mediacms-player.css @@ -1,57 +1,73 @@ @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; } + 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"; } + 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"; } + 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"; } + 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"; } + 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"; } + 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"; } + 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"; } + font-family: MediaCmsVideoJsIcons; + font-weight: normal; + font-style: normal; +} +.vjs-icon-closed-caption:before { + content: "\f107"; +} /* BIG PLAY BUTTON */ /* COLORS */ @@ -66,232 +82,314 @@ }*/ /* ANIMATION KEYFRAMES */ @keyframes onHoverFullscreenToggle { - 50% { - font-size: 14px; - margin-top: -1px; } - 100% { - font-size: 13px; - margin-top: 0; } } + 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; } } + 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; } } + 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; } } + 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); } } + 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); } } + 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); } } + to { + -webkit-transform: rotate(360deg); + } +} @keyframes spinner-linear-spin { - to { - transform: rotate(360deg); } } + 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); } } + 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); } } + 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); } } + 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); } } + 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); } } + 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); } } + 0% { + transform: rotate(-130deg); + } + 50% { + transform: rotate(5deg); + } + to { + transform: rotate(-130deg); + } +} @keyframes showPreviewThumb { - 0% { - opacity: 0; } - 100% { - opacity: 1; } } + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} @-webkit-keyframes showPreviewThumb { - 0% { - opacity: 0; } - 100% { - opacity: 1; } } + 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; } + font-family: MediaCmsVideoJsIcons; + font-weight: normal; + font-style: normal; +} .video-js.vjs-mediacms .vjs-subtitles-control .vjs-icon-placeholder:before { - content: '\f107'; } + content: "\f107"; +} .video-js.vjs-mediacms .vjs-theater-mode-control .vjs-icon-placeholder { - font-family: MediaCmsVideoJsIcons; - font-weight: normal; - font-style: normal; } + font-family: MediaCmsVideoJsIcons; + font-weight: normal; + font-style: normal; +} .video-js.vjs-mediacms .vjs-theater-mode-control .vjs-icon-placeholder:before { - content: '\f101'; } + content: "\f101"; +} .video-js.vjs-mediacms .vjs-theater-mode .vjs-theater-mode-control .vjs-icon-placeholder:before { - content: '\f102'; } + 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 { + 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 { + }*/ +} +.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 { + outline-color: transparent; +} +.video-js.vjs-mediacms.vjs-native-dimensions video { width: auto; - height: auto; } - .video-js.vjs-mediacms.vjs-error .vjs-error-display { + 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 { + 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: ''; + 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%; @@ -299,20 +397,24 @@ 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 { + 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 > * { + 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-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 { + cursor: pointer; +} +.video-js.vjs-mediacms .vjs-settings-panel { position: absolute; bottom: 30px; right: 0; @@ -326,121 +428,197 @@ 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; + 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 { + 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 { + 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 { + 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; @@ -454,10 +632,12 @@ 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 { + 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; @@ -467,81 +647,109 @@ 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-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 { + 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 { + 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: 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 { + 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 { + 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; @@ -555,50 +763,61 @@ -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 { + 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; @@ -607,52 +826,65 @@ 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 { + 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 { + 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 { + 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 { + 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 { + 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 { + 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: ''; + 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; @@ -660,28 +892,34 @@ 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 { + 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 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 { + transition-delay: 0s; */ +} +.video-js.vjs-mediacms .vjs-actions-anim { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; @@ -700,178 +938,280 @@ 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 { + 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 { + 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; - transition-delay: 0s; } - .video-js.vjs-mediacms.vjs-has-started .vjs-control-bar, .video-js.vjs-mediacms.vjs-changing-resolution .vjs-control-bar { +} +.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 { + 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 { + 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; @@ -888,87 +1228,117 @@ 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 { + 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'; } + 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 { + 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 { + transition-property: opacity, visibility; +} +.video-js.vjs-mediacms .vjs-corner-layer .title-link { display: inline-block; font-size: 16px; font-stretch: 100%; @@ -1012,13 +1382,17 @@ 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 { + 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; @@ -1028,34 +1402,47 @@ 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 { + 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; } + visibility: hidden; +} +.video-js.vjs-mediacms:hover .vjs-big-play-button { + background-color: #009933; +} /* @-webkit-keyframes vjs-poster-reveal { 0%{ @@ -1082,32 +1469,38 @@ } */ .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; } + 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; } + 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 { + 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; } + bottom: 0.5em; +} .video-js.vjs-mediacms .vjs-preview-thumb { - display: none; } + 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: 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; @@ -1118,8 +1511,9 @@ 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 { + 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; @@ -1127,46 +1521,62 @@ 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; } + 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; } + 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; } + 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; } + 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 { + 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%; @@ -1174,8 +1584,9 @@ width: 100%; margin-left: -32px; pointer-events: none; - background-color: #eee; } - .video-js.vjs-mediacms .vjs-loading-spinner .spinner-container { + background-color: #eee; +} +.video-js.vjs-mediacms .vjs-loading-spinner .spinner-container { pointer-events: none; position: absolute; width: 100%; @@ -1185,20 +1596,23 @@ 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 { + -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 { + 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 { + overflow: hidden; +} +.video-js.vjs-mediacms .vjs-loading-spinner .spinner-circle { position: absolute; width: 200%; height: 100%; @@ -1206,34 +1620,43 @@ border-radius: 50%; border-style: solid; border-width: 6px; - border-color: #eee #eee transparent; } - .video-js.vjs-mediacms .vjs-loading-spinner .spinner-left { + 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 { + 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; } + 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; } + 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; } + display: none; +} diff --git a/frontend-tools/video-js/src/components/overlays/AutoplayCountdownOverlay.css b/frontend-tools/video-js/src/components/overlays/AutoplayCountdownOverlay.css index 26038eaa..c739f193 100644 --- a/frontend-tools/video-js/src/components/overlays/AutoplayCountdownOverlay.css +++ b/frontend-tools/video-js/src/components/overlays/AutoplayCountdownOverlay.css @@ -29,7 +29,7 @@ max-width: 480px; width: 100%; text-align: center; - box-shadow: + box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), 0 8px 32px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1); @@ -40,7 +40,7 @@ } .autoplay-countdown-content::before { - content: ''; + content: ""; position: absolute; top: 0; left: 0; @@ -50,7 +50,7 @@ } .autoplay-countdown-content::after { - content: ''; + content: ""; position: absolute; top: -50%; left: -50%; @@ -62,7 +62,8 @@ } @keyframes backgroundPulse { - 0%, 100% { + 0%, + 100% { opacity: 0.3; transform: scale(1); } @@ -85,11 +86,10 @@ line-height: 1.3; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); } -.autoplay-countdown-header h3 span{ - font-weight:700; +.autoplay-countdown-header h3 span { + font-weight: 700; } - .autoplay-countdown-video-info { display: flex; flex-direction: column; @@ -98,7 +98,7 @@ text-align: center; position: relative; z-index: 2; - margin:0 0 50px; + margin: 0 0 50px; } .next-video-thumbnail { @@ -109,16 +109,18 @@ overflow: hidden; background: #333; position: relative; - box-shadow: + box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.2); border: 2px solid rgba(255, 255, 255, 0.1); - transition: transform 0.3s ease, box-shadow 0.3s ease; + transition: + transform 0.3s ease, + box-shadow 0.3s ease; } .next-video-thumbnail:hover { transform: translateY(-4px) scale(1.02); - box-shadow: + box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 8px 24px rgba(0, 0, 0, 0.3); } @@ -144,7 +146,7 @@ justify-content: center; color: white; transition: all 0.3s ease; - box-shadow: + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 4px 16px rgba(0, 0, 0, 0.3); border: 3px solid rgba(255, 255, 255, 0.2); @@ -154,7 +156,7 @@ .play-overlay:hover { background: rgba(0, 0, 0, 0.9); transform: translate(-50%, -50%) scale(1.1); - box-shadow: + box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6), 0 6px 20px rgba(0, 0, 0, 0.4); } @@ -173,8 +175,8 @@ .next-video-title { color: #999; - font-size:18px; - font-weight:500; + font-size: 18px; + font-weight: 500; margin: 0 0; line-height: 1.4; overflow: hidden; @@ -237,7 +239,9 @@ button.autoplay-cancel-button { letter-spacing: 0.3px; line-height: 1; white-space: nowrap; - box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1); + box-shadow: + 0 6px 20px rgba(0, 0, 0, 0.3), + inset 0 1px 0 rgba(255, 255, 255, 0.1); text-align: center; } @@ -248,7 +252,7 @@ button.autoplay-play-button { } .autoplay-play-button::before { - content: ''; + content: ""; position: absolute; top: 0; left: -100%; @@ -261,7 +265,9 @@ button.autoplay-play-button { .autoplay-play-button:hover { background: linear-gradient(135deg, #ff1a1a, #cc0000); transform: translateY(-2px); - box-shadow: 0 8px 25px rgba(255, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3); + box-shadow: + 0 8px 25px rgba(255, 0, 0, 0.4), + inset 0 1px 0 rgba(255, 255, 255, 0.3); } .autoplay-play-button:hover::before { @@ -270,7 +276,7 @@ button.autoplay-play-button { .autoplay-play-button:active { transform: translateY(-1px); - box-shadow: + box-shadow: 0 4px 15px rgba(255, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2); } @@ -279,7 +285,7 @@ button.autoplay-play-button { background: linear-gradient(135deg, #404040, #2a2a2a); color: #fff; border: 1px solid rgba(255, 255, 255, 0.1); - box-shadow: + box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1); } @@ -287,19 +293,18 @@ button.autoplay-play-button { .autoplay-cancel-button:hover { background: linear-gradient(135deg, #505050, #3a3a3a); transform: translateY(-2px); - box-shadow: + box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2); } .autoplay-cancel-button:active { transform: translateY(-1px); - box-shadow: + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1); } - .autoplay-play-button svg, .autoplay-cancel-button svg { width: 18px; @@ -401,7 +406,7 @@ button.autoplay-play-button { /* Responsive design */ @media (max-width: 767px) { .autoplay-countdown-video-info { - margin-bottom:20px; + margin-bottom: 20px; } .autoplay-countdown-content { padding: 24px; @@ -505,7 +510,13 @@ button.autoplay-play-button { gap: 5px; padding: 0; } - button.autoplay-play-button, button.autoplay-cancel-button { padding:10px 20px; width:120px; height:40px; min-width:120px; } + button.autoplay-play-button, + button.autoplay-cancel-button { + padding: 10px 20px; + width: 120px; + height: 40px; + min-width: 120px; + } .autoplay-play-button, .autoplay-cancel-button { diff --git a/frontend-tools/video-js/src/main.jsx b/frontend-tools/video-js/src/main.jsx index 46a2578f..5dfc2b21 100644 --- a/frontend-tools/video-js/src/main.jsx +++ b/frontend-tools/video-js/src/main.jsx @@ -12,7 +12,7 @@ const mountComponents = () => { const root = createRoot(rootContainer); root.render( - + ); }