Merge pull request #699 from samvera-labs/progressbar-styling

Increase progress-bar height, remove hover animation
samvera-labs · Nov 1, 2024 · 63fe549 · 63fe549
2 parents 3b5bc14 + e842cd5
commit 63fe549
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 79 deletions.
diff --git a/src/components/MediaPlayer/VideoJS/components/styles/VideoJSProgress.scss b/src/components/MediaPlayer/VideoJS/components/styles/VideoJSProgress.scss
@@ -14,6 +14,11 @@
   }
 }
 
+/* 
+ Increase progress-bar and its childrens' size and maintain it for
+ pointer hover event
+*/
+.video-js .vjs-progress-control .vjs-progress-holder,
 .video-js .vjs-progress-control:hover .vjs-progress-holder {
   font-size: 1.5em;
 
@@ -35,29 +40,6 @@
     background-color: white;
     color: black
   }
-
-  .vjs-marker.ramp--track-marker--playlist {
-    top: 0.75em;
-  }
-
-  &:hover {
-    .block-stripes {
-      height: inherit;
-      transition: height 0.15s ease-in-out;
-      -webkit-transition: height 0.15s ease-in-out;
-    }
-
-    .vjs-marker.ramp--track-marker--fragment {
-      top: -0.2em;
-      transition: top 0.15s ease-in-out;
-      -webkit-transition: top 0.15s ease-in-out;
-    }
-
-    .vjs-mouse-display .vjs-time-tooltip {
-      visibility: visible;
-      display: block;
-    }
-  }
 }
 
 .block-stripes {
@@ -88,3 +70,64 @@
       $primaryGreenDark var(--range-progress),
       $primaryGreenLight var(--range-progress));
 }
+
+/* CSS for structure track highlight markers on progress bar */
+.vjs-marker.ramp--track-marker--fragment {
+  &[style] {
+    // specificity hack to beat inline styles
+    background-color: #80A590 !important;
+    border-radius: 0 !important;
+  }
+
+  opacity: 0.5;
+  height: 16px;
+  top: -0.2em;
+  z-index: 0;
+}
+
+/* CSS for playlist markers on progress bar */
+.vjs-marker.ramp--track-marker--playlist {
+  &[style] {
+    // specificity hack to beat inline styles
+    background-color: transparent !important;
+    border-radius: 0 !important;
+    width: 0.5em !important;
+  }
+  font-size: small;
+  height: 0.5em;
+  transform: rotate(-45deg);
+  top: 0.75em;
+  content: '';
+  border-color: #fff;
+  border-style: solid;
+  border-width: 0.25em 0.25em 0 0;
+}
+
+/* CSS for search markers on progress bar */
+.vjs-marker.ramp--track-marker--search {
+  &[style] {
+    // specificity hack to beat inline styles
+    background-color: $primaryGreenDark !important;
+    border-radius: 0 !important;
+    width: 6px !important;
+  }
+
+  top: 0.15em;
+  height: 6px;
+  opacity: 0.75;
+  transition: opacity 200ms ease-out,
+  transform 200ms ease-out,
+  box-shadow 200ms ease-out;
+  box-shadow: 0 0 0px 1px rgba(255, 255, 255, 0.95),
+  0 0 8px 0px rgba(0, 0, 0, 0.75);
+  pointer-events: all;
+  transform: translate(-25%, -25%) rotate(45deg) scale(1) !important;
+  z-index: 0;
+
+  &:hover {
+    opacity: 1;
+    transform: translate(-25%, -25%) rotate(45deg) scale(1.75) !important;
+    box-shadow: 0 0 0x 2px rgba(255, 255, 255, 0.95),
+      0 0 8px 1px rgba(0, 0, 0, 0.75);
+  }
+}
diff --git a/src/components/MediaPlayer/VideoJS/components/styles/VideoJSTrackScrubber.scss b/src/components/MediaPlayer/VideoJS/components/styles/VideoJSTrackScrubber.scss
@@ -103,59 +103,3 @@
     border-color: $primaryDark transparent transparent transparent;
   }
 }
-
-
-.vjs-marker.ramp--track-marker--fragment {
-  &[style] {
-    // specificity hack to beat inline styles
-    background-color: #80A590 !important;
-    border-radius: 0 !important;
-  }
-
-  opacity: 0.5;
-  height: 16px;
-  top: -0.425em;
-}
-
-.vjs-marker.ramp--track-marker--playlist {
-  &[style] {
-    // specificity hack to beat inline styles
-    background-color: transparent !important;
-    border-radius: 0 !important;
-    width: 0.5em !important;
-  }
-  height: 0.5em;
-  transform: rotate(-45deg);
-  top: 4px;
-  content: '';
-  border-color: #fff;
-  border-style: solid;
-  border-width: 0.25em 0.25em 0 0;
-}
-
-.vjs-marker.ramp--track-marker--search {
-  &[style] {
-    // specificity hack to beat inline styles
-    background-color: $primaryGreenDark !important;
-    border-radius: 0 !important;
-    width: 6px !important;
-  }
-
-  top: 0.125em;
-  height: 6px;
-  opacity: 0.75;
-  transition: opacity 200ms ease-out,
-  transform 200ms ease-out,
-  box-shadow 200ms ease-out;
-  box-shadow: 0 0 0px 1px rgba(255, 255, 255, 0.95),
-  0 0 8px 0px rgba(0, 0, 0, 0.75);
-  pointer-events: all;
-  transform: translate(-25%, -25%) rotate(45deg) scale(1) !important;
-
-  &:hover {
-    opacity: 1;
-    transform: translate(-25%, -25%) rotate(45deg) scale(1.75) !important;
-    box-shadow: 0 0 0x 2px rgba(255, 255, 255, 0.95),
-      0 0 8px 1px rgba(0, 0, 0, 0.75);
-  }
-}