started working with the pointer events to drag - very laggy, may try something more simple for now

1 files changed, 31 insertions, 2 deletions

diff --git a/src/client/views/nodes/RecordingBox/ProgressBar.scss b/src/client/views/nodes/RecordingBox/ProgressBar.scss
index a493b0b89..5d27c8a7d 100644
--- a/src/client/views/nodes/RecordingBox/ProgressBar.scss
+++ b/src/client/views/nodes/RecordingBox/ProgressBar.scss
@@ -1,11 +1,14 @@
 
 .progressbar {
+  touch-action: none;
+
+
       position: absolute;
       display: flex;
       justify-content: flex-start;
       bottom: 10px;
       width: 80%;
-      height: 5px;
+      height: 20px;
       background-color: gray;
 
       &.done {
@@ -23,4 +26,30 @@
             z-index: 3;
             pointer-events: none; 
       }
-}
\ No newline at end of file
+}
+
+.segment {
+  border: 3px solid black;
+  background-color: red;
+  margin: 1px;
+  padding: 0;
+  cursor: pointer;
+  transition-duration: .25s;
+
+  text-align: center;
+}
+
+.segment:first-child {
+  margin-left: 2px;
+}
+.segment:last-child {
+  margin-right: 2px;
+}
+
+.segment:hover {
+  margin: 0px;
+  border: 4px solid red;
+  background-color: black;
+  min-width: 10px;
+  border-radius: 2px;
+}