Merge branch 'master' into geireann-eslint-prettier

1 files changed, 101 insertions, 4 deletions

diff --git a/src/client/views/nodes/RecordingBox/ProgressBar.scss b/src/client/views/nodes/RecordingBox/ProgressBar.scss
index a493b0b89..28ad25ffa 100644
--- a/src/client/views/nodes/RecordingBox/ProgressBar.scss
+++ b/src/client/views/nodes/RecordingBox/ProgressBar.scss
@@ -1,11 +1,19 @@
 
 .progressbar {
+  touch-action: none;
+  vertical-align: middle;
+  text-align: center;
+
+  align-items: center;
+  cursor: default;
+
+
       position: absolute;
       display: flex;
       justify-content: flex-start;
-      bottom: 10px;
-      width: 80%;
-      height: 5px;
+      bottom: 2px;
+      width: 99%;
+      height: 30px;
       background-color: gray;
 
       &.done {
@@ -23,4 +31,93 @@
             z-index: 3;
             pointer-events: none; 
       }
-}
\ No newline at end of file
+}
+
+.progressbar-disabled {
+    cursor: not-allowed;
+}
+
+.progressbar-dragging {
+    cursor: grabbing;
+}
+
+// citation: https://codepen.io/_Master_/pen/PRdjmQ
+@keyframes blinker {
+  from {opacity: 1.0;}
+  to {opacity: 0.0;}
+}
+.blink {
+	text-decoration: blink;
+	animation-name: blinker;
+	animation-duration: 0.6s;
+	animation-iteration-count:infinite;
+	animation-timing-function:ease-in-out;
+	animation-direction: alternate;
+}
+
+.segment {
+  border: 3px solid black;
+  background-color: red;
+  margin: 1px;
+  padding: 0;
+  cursor: pointer;
+  transition-duration: .5s;
+  user-select: none;
+
+  vertical-align: middle;
+  text-align: center;
+}
+
+.segment-expanding {
+border-color: red;
+  background-color: white;
+  transition-duration: 0s;
+  opacity: .75;
+  pointer-events: none;
+}
+
+.segment-expanding:hover {
+    background-color: inherit;
+    cursor: not-allowed;
+}
+
+.segment-disabled {
+  pointer-events: none;
+  opacity: 0.5;
+  transition-duration: 0s;
+  /* Hide the text. */
+    text-indent: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+}
+
+.segment-hide {
+    background-color: inherit;
+    text-align: center;
+    vertical-align: middle;
+    user-select: none;
+}
+
+.segment:first-child {
+  margin-left: 2px;
+}
+.segment:last-child {
+  margin-right: 2px;
+}
+
+.segment:hover {
+    background-color: white;
+}
+
+.segment:hover, .segment-selected {
+  margin: 0px;
+  border: 4px solid red;
+  border-radius: 2px;
+}
+
+.segment-selected {
+  border: 4px solid #202020;
+  background-color: red;
+  opacity: .75;
+  cursor: grabbing;
+}