Merge branch 'main' of https://gitea.internike.com/nike/buildoz

buildoz.css

@@ -1,3 +1,34 @@
+dialog.bz-modal-dialog{
+    padding: 0;
+    border: 2px solid #050;
+    border-radius: 5px;
+    min-width: 15em;
+}
+
+dialog.bz-modal-dialog header{
+    background: #050;
+    text-align: center;
+    color: white;
+    padding: .5em;
+}
+
+dialog.bz-modal-dialog section{
+    padding: .5em;
+}
+
+dialog.bz-modal-dialog footer{
+    border-top: 1px solid #CCC;
+    padding: .5em;
+    justify-content: center;
+    display: grid;
+    grid-template-columns: auto auto;
+    grid-gap: 2em;    
+}
+
+dialog.bz-modal-dialog footer button{
+    min-width: 5em;
+}
+
 bz-select {
     display: block;
     margin: .5em 0 .5em 0;
@@ -23,7 +54,7 @@ bz-select > button::after {
     content: "\00BB";
     transform: rotate(90deg);
     position: absolute;
-    right: 0.5em;
+    right: clamp(-1em, calc(100% - 1em), 0.5em);
     top: 0;
     pointer-events: none;
     font-size: 1.5em;
@@ -196,7 +227,7 @@ bz-slidepane[side="right"] div.handle {
     top: 50%;
     width: 11px;
     height: 40px;
-    background: repeating-linear-gradient( to right, rgba(255,255,255,1) 0, rgba(255,255,255,1) 2px, rgba(0,0,0,0.2) 3px, rgba(0,0,0,0.2) 4px );
+    background: repeating-linear-gradient( to right, rgba(255,255,255,1) 0, rgba(255,255,255,1) 2px, rgba(0,0,0,0.5) 3px, rgba(0,0,0,0.5) 4px );
     transform: translateY(-50%);
     cursor: ew-resize;
 }
@@ -207,14 +238,16 @@ bz-graflow {
     position: relative;
     display: block;
     width: 100vw;
-    height: 50vh;
+    height: 100vh;
     box-sizing: border-box;
+    overflow: hidden;
 }
 bz-graflow .bzgf-main-container{
     width: 100%;
     height: 100%;
     position: relative;
     box-sizing: border-box;
+    overflow: auto;
 }
 
 /* BZGRAFLOW_CORE_START */
@@ -233,7 +266,7 @@ bz-graflow .bzgf-nodes-container{ /* used to keep the nodes container pointer-ev
 }
 bz-graflow .bzgf-nodes-container > * { /* allow the nodes to be moved ! */
     pointer-events: auto;
-  }
+}
 
 bz-graflow .bzgf-nodes-container .bzgf-node{ position:absolute; }
 bz-graflow .bzgf-nodes-container .bzgf-fake-node{
@@ -271,5 +304,70 @@ bz-graflow .bzgf-nodes-container .port.selectable:hover{
     border: 5px solid #FF08!important;
     cursor: pointer;
 }
+bz-graflow .graflow-error{ background:red;color:black;position: absolute;top: 0;left: 50%;transform: translateX(-50%); }
 
 /* BZGRAFLOW_CORE_END */
+
+bz-grafloweditor {
+    width: 98vw;
+    height: 98vh;
+    margin: auto;
+}
+bz-grafloweditor .bzgfe-main-container{
+    height: 100%;
+    width: 100%;
+    overflow: hidden;
+    display: grid;
+    grid-template-columns: 15vw auto;
+    grid-gap: 1px;
+    background: #FFF;
+}
+
+bz-grafloweditor .bzgfe-nodes-container{
+    overflow: auto;
+    border: 2px solid #000;
+    display: grid;
+    grid-auto-flow: row;
+    justify-items: center;
+}
+
+bz-grafloweditor bz-graflow{
+    height: 100%;
+    width: 100%;
+}
+
+bz-grafloweditor .bzgfe-nodes-container .bzgf-node{
+    position: relative;
+    margin: 5px auto;
+}
+bz-grafloweditor bz-slidepane { z-index: 10; background-color: #0008!important;}
+bz-grafloweditor bz-slidepane .inner-console{ 
+    padding: 5px; 
+    background: #FFF; 
+}
+bz-grafloweditor .inner-console section{
+    display: grid;
+    grid-auto-flow: row;
+    grid-gap: 5px;
+    background-color: #DDD;
+    padding: 5px;
+    margin: 5px auto;
+}
+
+bz-grafloweditor .inner-console section .cols-2{
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-gap: 1em;
+    background-color: #CCC;
+    min-height: 2.5em;
+}
+
+bz-grafloweditor .inner-console section .cols-2 label{
+    text-align: right;
+    align-self: center;
+}
+
+bz-grafloweditor .inner-console section .cols-2 input{
+    max-height: 2em;
+    align-self: center;
+}