@innovastudio/contentbox 1.6.161 → 1.6.162

package/index.d.ts

@@ -422,5 +422,12 @@ declare class ContentBox {
     getWrapper(): HTMLElement;
     openModal(url: string, options?: OpenModalOptions): void;
     screenMode: string;
+    openFilePicker(type?: string, callback?: () => void): void;
+    openColorPicker(
+        currentColor: string,
+        callback: (color: string) => void,
+        btn?: HTMLElement
+    ): void;
+    openIconPicker(callback: (iconHtml: string) => void): void;
 }
 export default ContentBox;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@innovastudio/contentbox",
   "type": "module",
-  "version": "1.6.161",
+  "version": "1.6.162",
   "description": "",
   "main": "public/contentbox/contentbox.esm.js",
   "types": "index.d.ts",
@@ -59,7 +59,7 @@
     "ws": "^8.13.0"
   },
   "dependencies": {
-    "@innovastudio/contentbuilder": "^1.5.155",
+    "@innovastudio/contentbuilder": "^1.5.160",
     "js-beautify": "^1.14.0",
     "sortablejs": "^1.15.2"
   }

package/public/contentbox/contentbox.css

@@ -624,7 +624,7 @@ body.controlpanel .is-content-view.mobile {
 
 /* UI */
 .builder-ui {
-  font-family: sans-serif;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
   font-size: 14px;
   font-weight: 300;
   /* content.css */
@@ -891,8 +891,8 @@ body.controlpanel .is-content-view.mobile {
 .builder-ui button {
   width: 38px;
   height: 34px;
-  background-color: transparent;
   color: #111;
+  background-color: transparent;
   box-shadow: none;
   margin: 2px;
   border-radius: 5px;
@@ -941,6 +941,55 @@ body.controlpanel .is-content-view.mobile {
 .builder-ui button:not(.is-btn-color):hover {
   background-color: rgb(237, 237, 237);
 }
+.builder-ui .panel-plugin .is-accordion {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-bottom: 10px;
+}
+.builder-ui .panel-plugin .is-accordion > div {
+  border: 1px solid rgb(221, 221, 221);
+  border-radius: 8px;
+}
+.builder-ui .panel-plugin .is-accordion > div > div:first-child {
+  /* header */
+  background: rgb(249, 249, 249);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 12px;
+  font-weight: 500;
+  cursor: pointer;
+}
+.builder-ui .panel-plugin .is-outline {
+  border: 1px solid #ddd;
+}
+.builder-ui .panel-plugin .is-tips {
+  margin-top: 16px;
+  padding: 12px;
+  background: #eff6ff;
+  font-size: 12px;
+  color: #1e40af;
+  border-left: 3px solid #3b82f6;
+  border-radius: 4px;
+}
+.builder-ui .panel-plugin div[contenteditable=true]:focus-visible {
+  outline: #3e93f7 2px solid;
+}
+.builder-ui .panel-plugin button {
+  background-color: rgb(239, 239, 239);
+  width: 100%;
+  height: 43px;
+  margin: 0px;
+}
+.builder-ui .panel-plugin textarea {
+  width: 100%;
+  height: 200px;
+  line-height: 1.4;
+  font-family: inherit;
+  font-size: 14px;
+  padding: 10px 13px;
+}
 .builder-ui .flex-unit {
   display: flex;
   gap: 15px;
@@ -965,7 +1014,7 @@ body.controlpanel .is-content-view.mobile {
   font-size: 13px;
 }
 .builder-ui .label {
-  font-size: 13px;
+  font-size: 14px;
   margin: 20px 0 3px;
   font-weight: 400;
   line-height: 1.6;
@@ -1026,7 +1075,7 @@ body.controlpanel .is-content-view.mobile {
 .builder-ui .label.mb-3 {
   margin-bottom: 14px;
 }
-.builder-ui input[type=text], .builder-ui textarea {
+.builder-ui input[type=text], .builder-ui input[type=number], .builder-ui textarea {
   width: 100%;
   height: 43px;
   box-sizing: border-box;
@@ -1067,9 +1116,14 @@ body.controlpanel .is-content-view.mobile {
   border-radius: 5px;
   cursor: pointer;
 }
+.builder-ui div[contenteditable=true] {
+  border-radius: 5px;
+}
 .builder-ui input[type=text]:focus,
+.builder-ui input[type=number]:focus,
 .builder-ui textarea:focus,
-.builder-ui select:focus {
+.builder-ui select:focus,
+.builder-ui div[contenteditable=true]:focus {
   outline: #3e93f7 2px solid;
   outline-offset: 0;
   box-shadow: none;
@@ -2104,7 +2158,7 @@ body.frame-center.controlpanel .is-content-view {
 .dark #_cbhtml .is-side button.on, .dark .is-ui .is-side button.on {
   background-color: rgb(69, 69, 69) !important;
 }
-.dark #_cbhtml .is-side input[type=text], .dark #_cbhtml .is-side textarea, .dark .is-ui .is-side input[type=text], .dark .is-ui .is-side textarea {
+.dark #_cbhtml .is-side input[type=text], .dark #_cbhtml .is-side input[type=number], .dark #_cbhtml .is-side textarea, .dark .is-ui .is-side input[type=text], .dark .is-ui .is-side input[type=number], .dark .is-ui .is-side textarea {
   color: #c7c7c7 !important;
   background-color: #313131 !important;
 }
@@ -2173,10 +2227,27 @@ body.frame-center.controlpanel .is-content-view {
 .dark .builder-ui button:not(.is-btn-color):hover {
   background-color: rgb(69, 69, 69);
 }
+.dark .builder-ui .panel-plugin .is-accordion > div {
+  border: 1px solid #6e6e6e;
+}
+.dark .builder-ui .panel-plugin .is-accordion > div > div:first-child {
+  /* header */
+  background: transparent;
+}
+.dark .builder-ui .panel-plugin .is-outline {
+  border: 1px solid rgb(118, 118, 118);
+}
+.dark .builder-ui .panel-plugin .is-tips {
+  background: rgb(66, 66, 66);
+  color: inherit;
+}
+.dark .builder-ui .panel-plugin button {
+  background-color: rgb(64, 64, 64);
+}
 .dark .builder-ui .label {
   color: #d3d3d3;
 }
-.dark .builder-ui input[type=text], .dark .builder-ui textarea {
+.dark .builder-ui input[type=text], .dark .builder-ui input[type=number], .dark .builder-ui textarea {
   color: #c7c7c7;
   background-color: #313131;
 }