From 545508987903be8c2f361bbee8b3beae683c73b5 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Thu, 26 Oct 2023 23:23:48 -0400
Subject: a variety of fixes to the animation timeline to make it make some
 sense. lots still broken.

---
 src/client/views/animationtimeline/Region.scss | 106 +++++++++++++++++++++++++
 1 file changed, 106 insertions(+)
 create mode 100644 src/client/views/animationtimeline/Region.scss

(limited to 'src/client/views/animationtimeline/Region.scss')

diff --git a/src/client/views/animationtimeline/Region.scss b/src/client/views/animationtimeline/Region.scss
new file mode 100644
index 000000000..f7476ab55
--- /dev/null
+++ b/src/client/views/animationtimeline/Region.scss
@@ -0,0 +1,106 @@
+@import './../global/globalCssVariables.scss';
+
+$timelineColor: #9acedf;
+$timelineDark: #77a1aa;
+
+.bar {
+    height: 100%;
+    width: 5px;
+    position: absolute;
+
+    // pointer-events: none;
+    .menubox {
+        width: 200px;
+        height: 200px;
+        top: 50%;
+        position: relative;
+        background-color: $white;
+
+        .menutable {
+            tr:nth-child(odd) {
+                background-color: $light-gray;
+            }
+        }
+    }
+
+    .leftResize {
+        left: -10px;
+        border: 3px solid black;
+        transform: rotate(45deg) scale(0.25) !important;
+        background-color: black !important;
+    }
+
+    .rightResize {
+        right: -10px;
+        border: 3px solid black;
+        transform: rotate(45deg) scale(0.25) !important;
+        background-color: black !important;
+    }
+
+    .keyframe-indicator {
+        height: 20px;
+        width: 20px;
+        top: calc(50% - 10px);
+        background-color: white;
+        -ms-transform: rotate(45deg);
+        -webkit-transform: rotate(45deg);
+        transform: rotate(45deg);
+        z-index: 1000;
+        position: absolute;
+    }
+
+    .keyframe-information {
+        display: none;
+        position: relative;
+        // z-index: 100000;
+        // background: $timelineDark;
+        width: 100px;
+        // left: -50px;
+        height: 100px;
+        // top: 40px;
+    }
+
+    .keyframeCircle {
+        left: -10px;
+        border: 3px solid $timelineDark;
+    }
+
+    .fadeLeft {
+        left: 0px;
+        height: 100%;
+        position: absolute;
+        pointer-events: none;
+        background: linear-gradient(to left, $timelineColor 10%, $white);
+    }
+
+    .fadeRight {
+        right: 0px;
+        height: 100%;
+        position: absolute;
+        pointer-events: none;
+        background: linear-gradient(to right, $timelineColor 10%, $white);
+    }
+
+    .divider {
+        height: 100%;
+        width: 1px;
+        position: absolute;
+        background-color: black;
+        cursor: col-resize;
+        pointer-events: none;
+    }
+
+    .keyframe {
+        height: 100%;
+        position: absolute;
+    }
+
+    .fadeIn-container,
+    .fadeOut-container,
+    .body-container {
+        position: absolute;
+        height: 100%;
+        background-color: rgba(0, 0, 0, 0.5);
+        opacity: 0;
+    }
+}
-- 
cgit v1.2.3-70-g09d2