scripting: print(), css, palette layout, flex

make syncdev/prod: fixed mime type upload

css/ui.css

@@ -718,6 +718,7 @@ div.asset_toolbar {
   padding-top: 0.5em;
 }
 .tree-header {
+  display: flex;
   border: 2px solid #555;
   border-radius:8px;
   color: #fff;
@@ -730,8 +731,11 @@ div.asset_toolbar {
   padding-right:0.75em;
   font-size: small;
 }
+.tree-key {
+  padding-right:1em;
+}
 .tree-value {
-  float:right;
+  margin-left:auto;
   font-weight:normal;
   padding-right:1em;
 }
@@ -779,24 +783,45 @@ div.asset_toolbar {
   pointer-events: auto;
 }
 .scripting-cell canvas {
-  height: 20vw;
+  min-height: 20em;
   max-width: 95%;
   border: 2px solid #222;
   outline-color: #ccc;
   background: #000;
-  padding: 6px;
-  margin: 6px;
+  padding: 4px;
+  margin: 1px;
+  image-rendering: pixelated;
+  image-rendering: crisp-edges;
 }
 .scripting-cell canvas:hover {
-  outline:none;
   border-color:#ccc;
 }
+.scripting-flex canvas {
+  min-height: 2vw;
+  max-height: 20vw;
+}
+div.scripting-editor {
+  width: 100%;
+}
+.scripting-editor canvas {
+  min-height: 30vw;
+  max-height: 50vw;
+}
 div.scripting-color {
-  padding:0.1em;
-  margin:0.1em;
+  padding: 0.5em;
+}
+div.scripting-color span {
+  visibility: hidden;
+}
+div.scripting-color:hover span {
+  visibility: visible;
 }
 div.scripting-grid {
   display: grid;
-  grid-template-columns: repeat( auto-fit, minmax(2em, 1fr) );
+  grid-template-columns: repeat( auto-fill, minmax(4em, 1fr) );
   justify-items: center;
-}
+}
+div.scripting-flex {
+  display: flex;
+  flex-wrap: wrap;
+}