From 1d69c10dec1c42a9289cbecc1112ddfe606598f8 Mon Sep 17 00:00:00 2001 From: dwithana Date: Tue, 12 Nov 2024 17:03:35 -0500 Subject: [PATCH] Remove space between control-bar pseudo elements, to mouse display on hover --- .../VideoJS/components/styles/VideoJSProgress.scss | 4 ++++ src/components/MediaPlayer/VideoJS/videojs-theme.scss | 10 ++++------ 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/src/components/MediaPlayer/VideoJS/components/styles/VideoJSProgress.scss b/src/components/MediaPlayer/VideoJS/components/styles/VideoJSProgress.scss index e94c73b9..d4f3b245 100644 --- a/src/components/MediaPlayer/VideoJS/components/styles/VideoJSProgress.scss +++ b/src/components/MediaPlayer/VideoJS/components/styles/VideoJSProgress.scss @@ -33,6 +33,10 @@ } } +.video-js .vjs-progress-control:hover .vjs-mouse-display { + width: 0; +} + .vjs-custom-progress-bar { .vjs-play-progress span svg { height: 1em; diff --git a/src/components/MediaPlayer/VideoJS/videojs-theme.scss b/src/components/MediaPlayer/VideoJS/videojs-theme.scss index d2a83f77..3aeeabb6 100644 --- a/src/components/MediaPlayer/VideoJS/videojs-theme.scss +++ b/src/components/MediaPlayer/VideoJS/videojs-theme.scss @@ -38,25 +38,23 @@ // Set faded effect background before and after control bar &::before { content: ''; - width: 1em; + width: 12px; height: 100%; background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .75), rgba(0, 0, 0, .75)), linear-gradient(to left, transparent, rgba(0, 0, 0, 0)); position: absolute; - left: 0.215em; + left: -12px; top: 0em; - transform: translateX(-120%); } &::after { content: ''; - width: 1em; + width: 12px; height: 100%; background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .75), rgba(0, 0, 0, .75)), linear-gradient(to left, transparent, rgba(0, 0, 0, 0)); position: absolute; - right: -2.215em; + right: -12px; top: 0em; - transform: translateX(-121%); } }