pinokiod 3.9.0 → 3.9.3

package/server/public/style.css

@@ -53,6 +53,40 @@
   */
   --dark-btn-color: whitesmoke;
 }
+@font-face {
+  font-family: 'SpaceMono';
+  src: url('./SpaceMono-Regular.ttf') format(truetype);
+  font-weight: normal;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'SourceCode';
+  src: url('./SourceCodePro-Regular.ttf') format(truetype);
+  font-weight: normal;
+  font-style: normal;
+}
+.dropzone {
+  min-height: auto !important;
+  padding: 0 !important;
+  border-radius: 0 !important;
+  border: 2px dotted silver !important;
+}
+.drawer {
+  max-height: 100000px;
+  overflow: hidden;
+  height: auto;
+  transition: max-height 3s ease-in-out;
+}
+.drawer.vertical-collapsed {
+  max-height: 0;
+}
+.dynamic {
+}
+.dynamic-item img {
+  width: 20px !important;
+  height: 20px !important;
+  margin-right: 10px !important;
+}
 .type-tabs {
   display: flex;
   padding: 20px 20px 0;
@@ -83,12 +117,39 @@ body.dark .type-tabs {
   background: rgba(255,255,255,0.05);
   */
 }
+.drpzone {
+  border: 2px dashed #999;
+  border-radius: 8px;
+  background: #fafafa;
+  width: 100%;
+  height: 150px;
+  margin-bottom: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #666;
+  font-size: 16px;
+  position: relative;
+  cursor: pointer;
+
+}
 .type-tab img {
   height: 20px;
   margin-right: 5px;
 }
-.navheader {
+.navheader2 {
+/*
   padding: 15px 10px;
+  */
+  padding: 10px 0;
+  /*
+  background: white;
+  */
+}
+.navheader {
+  backdrop-filter: blur(16px);
+
+  padding: 15px 10px 5px;
 }
 body.columns footer {
 }
@@ -190,8 +251,10 @@ footer {
   overflow: auto;
   */
   box-sizing: border-box;
+  /*
   color: var(--dark-color);
   background: var(--dark-bg);
+  */
   /*
   border-top: 1px solid rgba(255,255,255,0.05);
   */
@@ -207,7 +270,9 @@ footer b i {
 }
 footer b {
   flex-shrink: 0;
+  /*
   color: var(--dark-btn-color);
+  */
   margin-right: 10px;
   font-weight: normal;
   font-size: 11px;
@@ -446,6 +511,10 @@ form.search {
   background: white;
   border: none;
 }
+.input-form .field select {
+  width: 100%;
+  padding: 5px;
+}
 .input-form .field {
   margin: 20px 0;
 }
@@ -537,6 +606,16 @@ body.fullscreen .btn {
   border: 1px solid rgba(0,0,0,0.1);
   */
 }
+body.dark .commander-dialog {
+  background: rgba(255,255,100,0.08);
+}
+.commander-dialog {
+  font-size: 14px;
+  text-align: left;
+  margin-bottom: 10px;
+  padding: 15px;
+  background: rgba(0,0,100,0.04);
+}
 .runnables {
   padding: 20px;
   box-sizing: border-box;
@@ -551,8 +630,12 @@ body.columns main #editor {
   height: 100% !important;
 }
 #terminal {
+
   height: 100%;
   /*
+  padding: 15px 0;
+  */
+  /*
   overflow: auto;
   */
   box-sizing: border-box;
@@ -594,10 +677,22 @@ body.columns .containers {
 .containers .terminal-container #terminal {
   height: 100%;
 }
+.menu-btns {
+  display: flex;
+  align-items: flex-start;
+}
 .terminal-container {
+/*
+  padding: 10px 0;
+  */
+  /*
+  background: white;
+  */
   flex-grow: 1;
   position: relative;
+  /*
   background: var(--dark-bg);
+  */
   overflow: auto;
 }
 .terminal-container #terminal-resize {
@@ -675,15 +770,26 @@ body.columns .containers {
   margin: 0 auto;
 }
 */
+.xterm-rows {
+/*
+  font-family: "SpaceMono", monospace !important;
+  */
+  font-family: "SourceCode", monospace !important;
+  font-weight: 400 !important;
+  font-style: normal !important;
+
+}
 .xterm {
-  padding: 10px 20px !important;
+  padding: 0 10px !important;
   /*
-  padding: 0 20px !important;
+  padding: 10px 20px !important;
   */
   cursor: pointer;
   overflow: auto;
   box-sizing: border-box;
+  /*
   background: rgb(20, 40, 56);
+  */
 }
 .panels {
   display: flex;
@@ -691,15 +797,17 @@ body.columns .containers {
 .panels > div {
   width: 50%;
 }
+/*
 body.dark header {
   background: var(--dark-nav-bg);
 }
+*/
 header {
-  background: var(--dark-nav-bg);
 /*
+  background: var(--dark-nav-bg);
   background: var(--light-nav-bg);
-  */
   background: white;
+  */
   position: sticky;
   padding: 10px;
   top: 0;
@@ -1005,13 +1113,19 @@ body.dark .line i {
   text-align: center;
 }
 .line img {
-/*
-  width: 60px;
-  height: 60px;
+  width: 50px;
+  height: 50px;
+  /*
+  padding: 10px;
   */
+  padding: 8px;
+  /*
   width: 40px;
   height: 40px;
+  */
+  /*
   border-radius: 10px;
+  */
 }
 body.dark .line .btn {
   color: var(--dark-btn-color);
@@ -1120,7 +1234,9 @@ body.dark .line.align-top h3 .col .btn.label {
 }
 .line.align-top h3 {
   display: flex;
+  /*
   align-items: center;
+  */
 }
 .flexible {
   flex-grow: 1;
@@ -1172,7 +1288,7 @@ body.dark .swal2-popup {
   color: var(--dark-btn-color);
 }
 .swal2-popup {
-  border-radius: 20px !important;
+  border-radius: 0px !important;
   box-sizing: border-box;
 }
 .swal2-html-container a {
@@ -1219,7 +1335,7 @@ body.dark .swal2-html-container .btn {
 .swal2-html-container .field {
   font-size: 14px;
   box-sizing: border-box;
-  padding: 10px;
+  padding: 15px 0;
 }
 .swal2-html-container .field label.description {
   margin-top: 5px;
@@ -1228,13 +1344,17 @@ body.dark .swal2-html-container .btn {
 }
 .swal2-html-container .field label.title {
   font-weight: bold;
-  font-size: 16px;
+  font-size: 14px;
 }
 .swal2-html-container .field label {
   display: block;
   text-align: left;
   margin-bottom: 5px;
 }
+.swal2-html-container .field select {
+  width: 100%;
+  padding: 5px;
+}
 .titleview {
   padding: 50px;
   box-sizing: border-box;
@@ -1331,6 +1451,9 @@ body.dark .swal2-styled.swal2-confirm{
   font-weight: bold;
   border: none;
 }
+.swal2-input:focus, .swal2-file:focus, .swal2-textarea:focus {
+  box-shadow: none !important;
+}
 .swal2-input {
   margin: 0 !important;
   width: 100% !important;
@@ -1484,6 +1607,16 @@ b {
 .opener.btn {
   background: royalblue;
 }
+.field-row {
+  display: flex;
+  align-items: center;
+}
+.folder-row .field-row label {
+  font-size: 14px;
+  flex-shrink: 0;
+  padding: 0 5px 0 0;
+  display: block;
+}
 body.dark #new-window {
   color: var(--dark-btn-color);
 }
@@ -1504,10 +1637,10 @@ body.dark .btn2 {
   */
 }
 .btn2:hover {
-  background: rgba(0,0,0,0.06);
+  color: royalblue;
 }
 body.dark .btn2:hover {
-  background: rgba(255,255,255,0.06);
+  color: royalblue;
 }
 /*
 body.dark .browser-options {
@@ -1529,7 +1662,7 @@ body.dark .browser-options {
   color: var(--light-color);
   text-transform: uppercase;
   border-radius: 5px;
-  padding: 5px 10px;
+  padding: 0px 5px;
   text-align: center;
 
   cursor: pointer;
@@ -1553,9 +1686,9 @@ body.dark .browser-options {
 
 }
 .btn2 i {
-  margin: 5px 0;
+  margin: 2px 0;
   display: inline-block;
-  font-size: 15px;
+  font-size: 12px;
 }
 .nav-btns {
   padding: 10px 0;
@@ -1591,15 +1724,27 @@ nav.error-message {
   color: rgba(0,0,0,0.7);
   font-weight: bold;
 }
+/*
 .not-running-apps, .running-apps {
   background: rgba(0,0,100,0.04);
 }
 body.dark .not-running-apps, body.dark .running-apps {
   background: rgba(255,255,255,0.03);
 }
+*/
+/*
+.running-apps .line .title {
+  color: #82bc09;
+}
+*/
 .running-apps .line img {
-  border: 4px solid #8fd400;
+  border: 3px solid  #82bc09;
+  /*
+  border: 3px solid #8fd400;
+  */
+  /*
   border-radius: 5px;
+  */
 }
 /*
 .running-apps .line.align-top h3 .col .title {
@@ -1701,6 +1846,16 @@ footer.status {
   text-transform: uppercase;
 }
 
+#fsmenu {
+/*
+  background: rgba(0,0,100,0.04);
+  */
+  display: flex;
+  padding: 10px;
+  /*
+  padding: 20px 20px 0;
+  */
+}
 mark{
   background: firebrick;
   color: white;
@@ -1714,3 +1869,46 @@ mark{
   color: royalblue !important;
   cursor: pointer;
 }
+
+.filepond--image-preview-wrapper {
+  border-radius: 0 !important;
+}
+
+.filepond-wrapper {
+/*
+  position: relative;
+  display: inline-block;
+  */
+  display: flex;
+}
+.filepond-wrapper .folder-rows {
+  flex-grow: 1;
+}
+.filepond-wrapper .avatar-field {
+  width: 200px;
+  height: 200px;
+  margin-right: 15px;
+}
+.folder-row {
+  text-align: left;
+  padding-bottom: 10px;
+}
+.folder-row label {
+  padding: 5px 0;
+  display: block;
+  font-size: 14px;
+}
+.folderpath {
+  opacity: 0.5;
+}
+.swal2-modal .filepond--root button {
+  cursor: pointer;
+  background: black !important;
+  color: white !important;
+  border: 2px solid !important;
+/*
+  background: unset !important;
+  */
+  padding: unset !important;
+  font-size: unset !important;
+}