.video-js.vjs-has-started { overflow: hidden; } .vjs-has-started .vjs-control-bar { height: 48px !important; padding-top: 12px !important; background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 40%, rgba(0, 0, 0, 0.3) 75%, transparent 100%) !important; align-items: center !important; } .video-js .vjs-progress-control { position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; height: 16px !important; z-index: 10 !important; flex: none !important; padding: 4px 8px 0 8px !important; box-sizing: border-box !important; background: transparent !important; } .video-js .vjs-progress-control .vjs-progress-holder { height: 3px !important; margin: 0 !important; border-radius: 1.5px !important; background: rgba(255, 255, 255, 0.2) !important; transition: height 0.1s ease !important; } .video-js .vjs-progress-control:hover .vjs-progress-holder { height: 5px !important; } .video-js .vjs-play-progress { background-color: var(--user-primary, var(--color-primary, #ff9900)) !important; border-radius: 1.5px !important; } .video-js .vjs-volume-level { background-color: var(--user-primary, var(--color-primary, #ff9900)) !important; } .video-js .vjs-load-progress { background: rgba(255, 255, 255, 0.25) !important; } .video-js .vjs-load-progress div { background: rgba(255, 255, 255, 0.35) !important; } .video-js .vjs-play-progress:before, .video-js .vjs-volume-level:before { font-size: 0.75em !important; top: -0.3em !important; right: -0.4em !important; } .video-js .vjs-time-tooltip { top: -3.2em !important; } .video-js .vjs-progress-control .vjs-mouse-display { height: 3px !important; } .video-js .vjs-progress-control:hover .vjs-mouse-display { height: 5px !important; } .video-js .vjs-progress-control { touch-action: none !important; cursor: pointer !important; } .video-js .vjs-control-bar>.vjs-control:not(.vjs-progress-control) { position: relative !important; top: 0 !important; } .video-js .vjs-control-bar { justify-content: flex-start !important; background-color: transparent !important; color: #ffffff !important; font-size: 14px !important; } .video-js .vjs-control-bar2 { background-color: #fcfcfc !important; } .video-js .vjs-big-play-button { background-color: rgba(255, 255, 255, 0.1) !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; margin: 0 !important; } .video-js:hover .vjs-big-play-button, .video-js .vjs-big-play-button:focus, .video-js .vjs-big-play-button:active { background-color: rgba(255, 255, 255, 0.23) !important; } .video-js .vjs-loading-spinner { border-color: rgba(255, 255, 255, 0.7) !important; } .video-js .vjs-menu-button-popup .vjs-menu .vjs-menu-item, .video-js .vjs-menu-button-popup .vjs-menu .vjs-menu-title { background-color: #151b17 !important; margin: 0.3em 0 !important; padding: 0.5em !important; border-radius: 0.3em !important; } .video-js .vjs-menu-button-popup .vjs-menu .vjs-menu-item.vjs-selected { background-color: #2483d5 !important; } .video-js .vjs-custom-control-spacer { display: flex !important; flex: 1 !important; order: 500 !important; } .video-js .vjs-current-time, .video-js .vjs-current-time-display, .video-js .vjs-duration, .video-js .vjs-duration-display, .video-js .vjs-time-divider { display: block !important; visibility: visible !important; } .video-js .vjs-time-control.vjs-current-time, .video-js .vjs-time-control.vjs-time-divider, .video-js .vjs-time-control.vjs-duration { display: flex !important; } .video-js .vjs-remaining-time { display: none !important; } .video-js .vjs-time-control { font-size: 13px !important; line-height: 38px !important; padding-left: 0.3em !important; padding-right: 0.3em !important; min-width: auto !important; color: rgba(255, 255, 255, 0.85) !important; font-family: 'Roboto', Arial, Helvetica, sans-serif !important; } .video-js .vjs-time-divider { line-height: 38px !important; min-width: auto !important; padding: 0 2px !important; font-size: 13px !important; color: rgba(255, 255, 255, 0.5) !important; } .video-js .vjs-play-control { order: 1 !important; width: 38px !important; } .video-js .vjs-next-control { order: 2 !important; cursor: pointer; width: 34px !important; display: flex !important; align-items: center; justify-content: center; } .video-js .vjs-next-control .vjs-icon-placeholder { font-family: VideoJS; font-weight: normal; font-style: normal; } .video-js .vjs-next-control .vjs-icon-placeholder:before { content: "\f11f"; font-family: VideoJS; font-size: 1.6em; line-height: 1.67; position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-align: center; } .video-js .vjs-next-control:hover .vjs-icon-placeholder:before { text-shadow: 0 0 0.5em rgba(255, 255, 255, 0.5); } .video-js .vjs-volume-panel { order: 3 !important; } .video-js .vjs-volume-panel.vjs-volume-panel-horizontal { width: 9em !important; transition: none !important; } .video-js .vjs-volume-panel .vjs-volume-control { visibility: visible !important; opacity: 1 !important; position: relative !important; width: 5em !important; height: 3em !important; } .video-js .vjs-volume-level:before { font-size: 0.75em !important; } .video-js .vjs-current-time { order: 4 !important; } .video-js .vjs-time-divider { order: 5 !important; } .video-js .vjs-duration { order: 6 !important; } .video-js .vjs-settings-control { position: relative !important; } .video-js .vjs-settings-control .vjs-icon-placeholder:before { font-size: 1.8em !important; line-height: 1.67 !important; } .video-js .vjs-hd-badge { position: absolute !important; top: -4px !important; right: -2px !important; display: inline-flex !important; align-items: center; justify-content: center; cursor: default; pointer-events: none; z-index: 2; } .video-js .vjs-hd-badge .vjs-hd-label { font-family: 'Roboto', Arial, Helvetica, sans-serif; font-size: 8px; font-weight: 700; letter-spacing: 0px; color: #fff; background: #c00; border-radius: 2px; padding: 2px 4px; line-height: 1.1; text-transform: uppercase; } .video-js .vjs-pip-control { order: 993 !important; cursor: pointer; width: 38px !important; display: flex !important; align-items: center; justify-content: center; } .video-js .vjs-pip-control .vjs-pip-icon { width: 16px; height: 12px; border: 1.5px solid rgba(255, 255, 255, 0.85); border-radius: 1.5px; position: relative; display: block; margin: auto; } .video-js .vjs-pip-control .vjs-pip-icon::after { content: ''; position: absolute; bottom: 0px; right: 0px; width: 7px; height: 5px; background: rgba(255, 255, 255, 0.85); border-radius: 1px; } .video-js .vjs-pip-control:hover .vjs-pip-icon { border-color: #fff; } .video-js .vjs-pip-control:hover .vjs-pip-icon::after { background: #fff; } .video-js .vjs-theater-control { order: 995 !important; } .video-js .vjs-settings-control, .video-js .vjs-setting-control { order: 996 !important; } .video-js .vjs-setting-control .icon-cog:before { content: "\f110"; font-family: VideoJS; font-weight: 400; font-style: normal; } .video-js .vjs-fullscreen-control { order: 999 !important; } .video-js .vjs-theater-control .vjs-theater-icon { display: block; width: 22px; height: 14px; border: 1.5px solid rgba(255, 255, 255, 0.85); border-radius: 2px; margin: auto; position: relative; } .video-js .vjs-theater-control .vjs-theater-icon::after { content: ''; position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%); width: 10px; height: 1.5px; background: rgba(255, 255, 255, 0.85); border-radius: 1px; } .video-js .vjs-theater-control:hover .vjs-theater-icon { border-color: #fff; } .video-js .vjs-theater-control:hover .vjs-theater-icon::after { background: #fff; } .video-js .vjs-fullscreen-control, .video-js .vjs-theater-control, .video-js .vjs-settings-control, .video-js .vjs-pip-control { margin-left: 0 !important; } .video-js.vjs-has-started.vjs-user-active .vjs-control-bar, .video-js.vjs-has-started.vjs-paused .vjs-control-bar { visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; transform: translateY(0) !important; transition: visibility 0.1s, opacity 0.1s, transform 0.2s ease !important; } .video-js.vjs-has-started.vjs-playing.vjs-user-inactive .vjs-control-bar { visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; transform: translateY(100%); transition: visibility 0.35s, opacity 0.35s, transform 0.35s ease; } .video-js.vjs-has-started.vjs-user-active .vjs-progress-control, .video-js.vjs-has-started.vjs-paused .vjs-progress-control { opacity: 1 !important; height: 16px !important; top: 0 !important; pointer-events: auto !important; transition: opacity 0.1s, height 0.2s, top 0.2s !important; } .video-js.vjs-has-started.vjs-playing.vjs-user-inactive .vjs-progress-control { opacity: 0 !important; height: 0.25em !important; top: -0.25em !important; pointer-events: none !important; transition: opacity 1s, height 1s, top 1s !important; } .video-js.vjs-has-started.vjs-playing.vjs-user-inactive.vjs-fullscreen .vjs-progress-control { opacity: 0 !important; transition: opacity 1s ease 1s !important; } @media (max-width: 1004px) { .video-js .vjs-theater-control { display: none !important; width: 0; overflow: hidden; } .video-js .vjs-settings-control { display: none !important; width: 0; overflow: hidden; } } @media (max-width: 480px) { .video-js .vjs-next-control { display: none !important; } .video-js .vjs-pip-control { display: none !important; } .video-js .vjs-hd-badge { display: none !important; } .video-js .vjs-time-control { font-size: 11px !important; } }