Merge pull request #737 from samvera-labs/align-controlbar

Remove space between control-bar pseudo elements, to mouse display on hover
samvera-labs · Nov 13, 2024 · a90b278 · a90b278
2 parents 0f5f4ce + 1d69c10
commit a90b278
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 6 deletions.
diff --git 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
@@ -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%);
   }
 }