Merge pull request #697 from samvera-labs/align-progressbar

Center align progressbar in audio, and add padding
samvera-labs · Nov 1, 2024 · 3b5bc14 · 3b5bc14
2 parents 033f9c8 + bfabdc4
commit 3b5bc14
Showing 1 changed file with 7 additions and 7 deletions.
diff --git a/src/components/MediaPlayer/VideoJS/videojs-theme.scss b/src/components/MediaPlayer/VideoJS/videojs-theme.scss
@@ -29,17 +29,17 @@
 
 .vjs-theme-ramp .vjs-control-bar {
   height: 5em;
-  padding-top: 2em;
-  background: none;
-  background-image: linear-gradient(to top, #000, rgba(0, 0, 0, 0));
+  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .75), rgba(0, 0, 0, .75));
   display: flex;
+  padding: 2em 1em 0 1em;
 }
 
 .vjs-theme-ramp .vjs-custom-progress-bar {
   position: absolute;
-  width: 100% !important;
-  top: 0.5em;
+  width: 98.75% !important;
+  top: 1.25em;
   margin: 0;
+  left: 1em;
 }
 
 .vjs-theme-ramp .vjs-progress-control .vjs-progress-holder {
@@ -77,7 +77,7 @@
 
 /* Volume controls */
 .vjs-theme-ramp .vjs-volume-panel .vjs-volume-control.vjs-volume-vertical {
-  margin-top: -1.5em;
+  margin-top: -0.75em;
 }
 
 // Make the horizontal volume panel always visible for audio
@@ -108,7 +108,7 @@
 
 // Place popup menu above and on top of progress control
 .vjs-theme-ramp .vjs-menu-button-popup .vjs-menu {
-  bottom: 1.5em;
+  bottom: 0.75em;
   z-index: 1;
 }