Revert dot marker styling changes (#5801)

* Move marker css into styles

Removes vjs-marker-dot styling, using existing vjs-marker class instead

* Revert dot marker changes

Author: WithoutPants

ui/v2.5/src/components/ScenePlayer/markers.css

@@ -1,5 +1,4 @@
 import videojs, { VideoJsPlayer } from "video.js";
-import "./markers.css";
 import CryptoJS from "crypto-js";
 
 export interface IMarker {
@@ -67,14 +66,16 @@ class MarkersPlugin extends videojs.getPlugin("plugin") {
       dot?: HTMLDivElement;
       range?: HTMLDivElement;
     } = {};
-    const seekBar = this.player.el().querySelector(".vjs-progress-control");
+    const seekBar = this.player.el().querySelector(".vjs-progress-holder");
 
     markerSet.dot = videojs.dom.createEl("div") as HTMLDivElement;
-    markerSet.dot.className = "vjs-marker-dot";
+    markerSet.dot.className = "vjs-marker";
     if (duration) {
+      // marker is 6px wide - adjust by 3px to align to center not left side
       markerSet.dot.style.left = `calc(${
         (marker.seconds / duration) * 100
       }% - 3px)`;
+      markerSet.dot.style.visibility = "visible";
     }
 
     // Add event listeners to dot

ui/v2.5/src/components/ScenePlayer/markers.ts

@@ -266,6 +266,16 @@ $sceneTabWidth: 450px;
     }
   }
 
+  .vjs-marker-range {
+    background-color: rgba(255, 255, 255, 0.4);
+    border-radius: 2px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    height: 8px;
+    position: absolute;
+    transform: translateY(-28px);
+    transition: none;
+  }
+
   .vjs-marker-tooltip {
     background-color: #fff;
     background-color: rgba(255, 255, 255, 0.8);