scripting: updates, moved interact to ui pkg

css/ui.css

@@ -713,7 +713,7 @@ div.asset_toolbar {
 }
 .tree-header {
   display: flex;
-  border: 2px solid #555;
+  border: 1px solid #555;
   border-radius:8px;
   color: #fff;
   background-color:#666;
@@ -777,16 +777,18 @@ div.asset_toolbar {
 .scripting-cell canvas {
   min-height: 20em;
   max-width: 95%;
-  border: 2px solid #222;
+  border: 0;
   outline-color: #ccc;
   background: #000;
-  padding: 4px;
-  margin: 1px;
+  padding: 0;
+  margin: 0;
   image-rendering: pixelated;
   image-rendering: crisp-edges;
 }
-.scripting-cell canvas:hover {
-  border-color:#aaa;
+.scripting-cell pre {
+  background-color: #333;
+  border: 1px inset #666;
+  color: #99dd99;
 }
 .scripting-flex canvas {
   min-height: 2vw;
@@ -803,6 +805,7 @@ div.scripting-color {
   padding: 0.5em;
   min-width: 3em;
   min-height: 3em;
+  border: 3px solid black;
 }
 div.scripting-color span {
   visibility: hidden;
@@ -818,12 +821,13 @@ div.scripting-grid {
 div.scripting-flex {
   display: flex;
   flex-wrap: wrap;
+  align-items: center;
 }
 div.scripting-select > div {
   border-radius: 2px;
   border-style: dotted;
   border-color: transparent;
-
+  margin: 0.25em;
 }
 div.scripting-select > div:hover {
   border-color: #eee;