merged with new master

1 files changed, 151 insertions, 19 deletions

diff --git a/src/client/views/nodes/trails/PresBox.scss b/src/client/views/nodes/trails/PresBox.scss
index 3b34a1f90..60d4e580d 100644
--- a/src/client/views/nodes/trails/PresBox.scss
+++ b/src/client/views/nodes/trails/PresBox.scss
@@ -1,5 +1,101 @@
 @import '../../global/globalCssVariables.module.scss';
 
+.presBox-gpt-chat {
+    padding: 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+.pres-chat {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.presBox-icon-list {
+    display: flex;
+    gap: 8px;
+}
+
+.pres-chatbox-container {
+    padding: 16px;
+    outline: 1px solid #999999;
+    border-radius: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.pres-chatbox {
+    outline: none;
+    border: none;
+    resize: none;
+    font-family: Verdana, Geneva, sans-serif;
+    background-color: transparent;
+    overflow-y: hidden;
+}
+
+// Effect Animations
+
+.presBox-effects {
+    display: grid;
+    grid-template-columns: auto auto;
+    gap: 8px;
+}
+
+.presBox-effect-row {
+    display: flex;
+    gap: 8px;
+    margin: 4px;
+}
+
+.presBox-effect-container {
+    cursor: pointer;
+    overflow: hidden;
+    width: 80px;
+    height: 80px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border: 1px solid rgb(118, 118, 118);
+    border-radius: 8px;
+}
+
+.presBox-effect-demo-box {
+    width: 40px;
+    height: 40px;
+    border-radius: 4px;
+    // default bg
+    background-color: rgb(37, 161, 255);
+}
+
+// Bezier editor
+
+.presBox-show-hide-dropdown {
+    cursor: pointer;
+    padding: 8px 0;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+}
+
+.presBox-bezier-editor {
+    border: 1px solid rgb(221, 221, 221);
+    border-radius: 4px;
+}
+
+.presBox-option-block {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    padding: 16px;
+}
+
+.presBox-option-center {
+    align-items: center;
+}
+
 .presBox-cont {
     cursor: auto;
     position: absolute;
@@ -15,6 +111,29 @@
     //overflow: hidden;
     transition: 0.7s opacity ease;
 
+    .presBox-chatbox {
+        position: fixed;
+        bottom: 8px;
+        left: 8px;
+        width: calc(100% - 16px);
+        min-height: 100px;
+        border-radius: 16px;
+        padding: 16px;
+        gap: 8px;
+        z-index: 999;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        background-color: #ffffff;
+        box-shadow: 0 2px 5px #7474748d;
+
+        .pres-chatbox {
+            outline: none;
+            border: none;
+            resize: none;
+        }
+    }
+
     .presBox-listCont {
         position: relative;
         height: calc(100% - 67px);
@@ -150,6 +269,11 @@
     }
 }
 
+.presBox-toggles {
+    display: flex;
+    overflow-x: auto;
+}
+
 .presBox-ribbon {
     position: relative;
     display: inline;
@@ -158,7 +282,9 @@
     transition: 0.7s;
 
     .ribbon-doubleButton {
-        display: inline-flex;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
     }
 
     .presBox-reactiveGrid {
@@ -186,16 +312,18 @@
     .ribbon-property {
         font-size: 11;
         font-weight: 200;
-        height: 20;
-        display: flex;
-        margin-left: 5px;
-        margin-top: 5px;
-        margin-bottom: 5px;
-        width: max-content;
-        justify-content: center;
-        align-items: center;
-        padding-right: 10px;
-        padding-left: 10px;
+        padding: 8px;
+        border-radius: 4px;
+        // height: 20;
+        // display: flex;
+        // margin-left: 5px;
+        // margin-top: 5px;
+        // margin-bottom: 5px;
+        // width: max-content;
+        // justify-content: center;
+        // align-items: center;
+        // padding-right: 10px;
+        // padding-left: 10px;
     }
 
     .ribbon-propertyUpDown {
@@ -392,11 +520,16 @@
     }
 
     .presBox-input {
-        width: 30;
-        height: 100%;
-        background: none;
         border: none;
-        text-align: right;
+        background-color: transparent;
+        width: 40;
+        // padding: 8px;
+        // border-radius: 4px;
+        // width: 30;
+        // height: 100%;
+        // background: none;
+        // border: none;
+        // text-align: right;
     }
 
     .presBox-input:focus {
@@ -606,15 +739,14 @@
         background-color: $white;
         display: flex;
         color: $black;
-        margin-top: 5px;
-        margin-bottom: 5px;
         border-radius: 5px;
-        margin-right: 5px;
         width: max-content;
         justify-content: center;
         align-items: center;
         padding-right: 10px;
         padding-left: 10px;
+        margin: 4px;
+        text-wrap: nowrap;
     }
 
     .ribbon-toggle.active {
@@ -638,7 +770,7 @@
         grid-template-rows: max-content auto;
         justify-self: center;
         margin-top: 10px;
-        padding-right: 10px;
+        // padding-right: 10px;
         letter-spacing: normal;
         width: 100%;
         height: max-content;