basic trim ui complete - switching laptops

1 files changed, 81 insertions, 59 deletions

diff --git a/src/client/views/collections/CollectionStackedTimeline.scss b/src/client/views/collections/CollectionStackedTimeline.scss
index e456c0664..92476e298 100644
--- a/src/client/views/collections/CollectionStackedTimeline.scss
+++ b/src/client/views/collections/CollectionStackedTimeline.scss
@@ -1,70 +1,92 @@
 .collectionStackedTimeline {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  border: gray solid 1px;
+  border-radius: 3px;
+  z-index: 1000;
+  overflow: hidden;
+  top: 0px;
+
+  .collectionStackedTimeline-trim-shade {
     position: absolute;
-    width: 100%;
     height: 100%;
-    border: gray solid 1px;
-    border-radius: 3px;
-    z-index: 1000;
-    overflow: hidden;
-    top: 0px;
+    background-color: black;
+    opacity: 0.3;
+  }
 
-    .collectionStackedTimeline-selector  {
-        position: absolute;
-        width: 10px;
-        top: 2.5%;
-        height: 95%;
-        background: lightblue;
-        border-radius: 5px;
-        opacity: 0.3;
-        z-index: 500;
-        border-style: solid;
-        border-color: darkblue;
-        border-width: 1px;
-    }
+  .collectionStackedTimeline-trim-controls {
+    height: 100%;
+    position: absolute;
+    border: 2px solid yellow;
+    display: flex;
+    justify-content: space-between;
 
-    .collectionStackedTimeline-current {
-        width: 1px;
-        height: 100%;
-        background-color: red;
-        position: absolute;
-        top: 0px;
-        pointer-events: none;
+    .collectionStackedTimeline-trim-handle {
+      background-color: yellow;
+      height: 100%;
+      width: 5px;
+      cursor: ew-resize;
     }
+  }
+
+  .collectionStackedTimeline-selector {
+    position: absolute;
+    width: 10px;
+    top: 2.5%;
+    height: 95%;
+    background: lightblue;
+    border-radius: 5px;
+    opacity: 0.3;
+    z-index: 500;
+    border-style: solid;
+    border-color: darkblue;
+    border-width: 1px;
+  }
 
-    .collectionStackedTimeline-marker-timeline {
-        position: absolute;
-        top: 2.5%;
-        height: 95%;
-        border-radius: 4px;
-        &:hover {
-            opacity: 1;
-        }
+  .collectionStackedTimeline-current {
+    width: 1px;
+    height: 100%;
+    background-color: red;
+    position: absolute;
+    top: 0px;
+    pointer-events: none;
+  }
 
-        .collectionStackedTimeline-left-resizer,
-        .collectionStackedTimeline-resizer {
-            background: dimgrey;
-            position: absolute;
-            top: 0;
-            height: 100%;
-            width: 10px;
-            pointer-events: all;
-            cursor: ew-resize;
-            z-index: 100;
-        }
-        .collectionStackedTimeline-resizer {
-            right: 0;
-        }
-        .collectionStackedTimeline-left-resizer {
-            left: 0;
-        }
+  .collectionStackedTimeline-marker-timeline {
+    position: absolute;
+    top: 2.5%;
+    height: 95%;
+    border-radius: 4px;
+    &:hover {
+      opacity: 1;
     }
 
-    .collectionStackedTimeline-waveform {
-        position: absolute; 
-        width: 100%; 
-        height: 100%;
-        top: 0; 
-        left: 0;
-        pointer-events: none;
+    .collectionStackedTimeline-left-resizer,
+    .collectionStackedTimeline-resizer {
+      background: dimgrey;
+      position: absolute;
+      top: 0;
+      height: 100%;
+      width: 10px;
+      pointer-events: all;
+      cursor: ew-resize;
+      z-index: 100;
+    }
+    .collectionStackedTimeline-resizer {
+      right: 0;
+    }
+    .collectionStackedTimeline-left-resizer {
+      left: 0;
     }
-}
\ No newline at end of file
+  }
+
+  .collectionStackedTimeline-waveform {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    pointer-events: none;
+  }
+}