@innovastudio/contentbuilder 1.5.81 → 1.5.83

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@innovastudio/contentbuilder",
   "type": "module",
-  "version": "1.5.81",
+  "version": "1.5.83",
   "description": "",
   "main": "public/contentbuilder/contentbuilder.esm.js",
   "types": "index.d.ts",

package/public/contentbuilder/contentbuilder.css

@@ -208,11 +208,13 @@ button:focus-visible {
 
 .moveable-control {
   border: none !important;
-  width: 7px !important;
-  height: 7px !important;
-  margin-top: -3px !important;
-  margin-left: -3px !important;
-  background: #2196f3 !important;
+  width: 17px !important;
+  height: 17px !important;
+  margin-top: -8.5px !important;
+  margin-left: -8.5px !important;
+  background: #fff !important;
+  border: #dddddd 1px solid !important;
+  box-shadow: 1px 3px 6px 0px rgba(0, 0, 0, 0.22) !important;
 }
 .moveable-control.moveable-origin {
   display: none !important;
@@ -1106,6 +1108,30 @@ button:focus-visible {
 .is-ui .is-rte-pop.rte-paragraph-options > ul > li > *:not(p) {
   transform: scale(0.8);
 }
+#_cbhtml .is-rte-pop.rte-paragraph-options > ul > li h1,
+.is-ui .is-rte-pop.rte-paragraph-options > ul > li h1 {
+  font-size: 2.5rem !important;
+}
+#_cbhtml .is-rte-pop.rte-paragraph-options > ul > li h2,
+.is-ui .is-rte-pop.rte-paragraph-options > ul > li h2 {
+  font-size: 2rem !important;
+}
+#_cbhtml .is-rte-pop.rte-paragraph-options > ul > li h3,
+.is-ui .is-rte-pop.rte-paragraph-options > ul > li h3 {
+  font-size: 1.73rem !important;
+}
+#_cbhtml .is-rte-pop.rte-paragraph-options > ul > li h4,
+.is-ui .is-rte-pop.rte-paragraph-options > ul > li h4 {
+  font-size: 1.5rem !important;
+}
+#_cbhtml .is-rte-pop.rte-paragraph-options > ul > li h5,
+.is-ui .is-rte-pop.rte-paragraph-options > ul > li h5 {
+  font-size: 1.25rem !important;
+}
+#_cbhtml .is-rte-pop.rte-paragraph-options > ul > li h6,
+.is-ui .is-rte-pop.rte-paragraph-options > ul > li h6 {
+  font-size: 1rem !important;
+}
 #_cbhtml .is-rte-pop.rte-textsetting-options > div,
 .is-ui .is-rte-pop.rte-textsetting-options > div {
   width: 233px;
@@ -2947,10 +2973,9 @@ button:focus-visible {
   background-color: #ebebeb;
   position: absolute;
   width: 100%;
-  height: 100%;
-  top: 0px;
+  height: calc(100% - 80px);
+  top: 80px;
   left: 0px;
-  border-top: 80px solid transparent;
   box-sizing: border-box;
 }
 #_cbhtml .is-modal.buttoneditor #divMyButtonList,
@@ -2982,12 +3007,6 @@ button:focus-visible {
   padding: 0;
   overflow: hidden;
   overflow-y: auto;
-  height: 100%;
-  width: 100%;
-  position: absolute;
-  top: 0;
-  border-top: 80px transparent solid;
-  box-sizing: border-box;
 }
 #_cbhtml .is-modal.buttoneditor #divButtonTemplateList,
 .is-ui .is-modal.buttoneditor #divButtonTemplateList {
@@ -3522,9 +3541,10 @@ button:focus-visible {
 .is-ui .is-tool.is-video-tool,
 .is-ui .is-tool.is-audio-tool,
 .is-ui .is-tool.is-iframe-tool {
-  background: rgba(0, 0, 0, 0.15);
+  background: rgba(255, 255, 255, 0.97) !important;
   border: transparent 1px solid;
-  box-shadow: none;
+  box-shadow: -1px 5px 8px 0px rgba(0, 0, 0, 0.08);
+  border-radius: 20px;
 }
 #_cbhtml .is-tool#divImageTool > div, #_cbhtml .is-tool#divImageTool > button, #_cbhtml .is-tool.is-video-tool > div, #_cbhtml .is-tool.is-video-tool > button, #_cbhtml .is-tool.is-audio-tool > div, #_cbhtml .is-tool.is-audio-tool > button, #_cbhtml .is-tool.is-iframe-tool > div, #_cbhtml .is-tool.is-iframe-tool > button,
 .is-ui .is-tool#divImageTool > div,
@@ -3535,6 +3555,8 @@ button:focus-visible {
 .is-ui .is-tool.is-audio-tool > button,
 .is-ui .is-tool.is-iframe-tool > div,
 .is-ui .is-tool.is-iframe-tool > button {
+  width: 35px;
+  height: 35px;
   background: transparent;
 }
 #_cbhtml .is-tool#divImageTool svg, #_cbhtml .is-tool.is-video-tool svg, #_cbhtml .is-tool.is-audio-tool svg, #_cbhtml .is-tool.is-iframe-tool svg,
@@ -3542,8 +3564,17 @@ button:focus-visible {
 .is-ui .is-tool.is-video-tool svg,
 .is-ui .is-tool.is-audio-tool svg,
 .is-ui .is-tool.is-iframe-tool svg {
-  fill: #fff;
-  color: #fff;
+  width: 17px;
+  height: 17px;
+  fill: #111 !important;
+  color: #111 !important;
+}
+#_cbhtml .is-tool.is-video-tool > button, #_cbhtml .is-tool.is-audio-tool > button, #_cbhtml .is-tool.is-iframe-tool > button,
+.is-ui .is-tool.is-video-tool > button,
+.is-ui .is-tool.is-audio-tool > button,
+.is-ui .is-tool.is-iframe-tool > button {
+  width: 35px !important;
+  height: 35px !important;
 }
 #_cbhtml .is-tool#divImageResizer,
 .is-ui .is-tool#divImageResizer {
@@ -3567,22 +3598,27 @@ button:focus-visible {
 #_cbhtml .is-tool.is-spacer-tool,
 .is-ui .is-tool.is-spacer-tool {
   border: none;
+  box-shadow: -1px 5px 8px 0px rgba(0, 0, 0, 0.08);
+  border-radius: 20px;
+  overflow: hidden;
 }
 #_cbhtml .is-tool.is-spacer-tool > button,
 .is-ui .is-tool.is-spacer-tool > button {
-  width: 30px;
-  height: 30px;
-  background: none;
+  width: 40px;
+  height: 35px;
+  background: rgba(255, 255, 255, 0.97) !important;
 }
 #_cbhtml .is-tool.is-spacer-tool > button svg,
 .is-ui .is-tool.is-spacer-tool > button svg {
-  fill: #121212;
+  fill: #111 !important;
+  color: #111 !important;
 }
 #_cbhtml .is-tool.is-table-tool,
 .is-ui .is-tool.is-table-tool {
   border: none;
   background: none;
-  box-shadow: none;
+  border-radius: 20px;
+  box-shadow: -1px 5px 8px 0px rgba(0, 0, 0, 0.08);
 }
 #_cbhtml .is-tool.is-table-tool:hover,
 .is-ui .is-tool.is-table-tool:hover {
@@ -3590,13 +3626,16 @@ button:focus-visible {
 }
 #_cbhtml .is-tool.is-table-tool > button,
 .is-ui .is-tool.is-table-tool > button {
-  width: 30px;
-  height: 30px;
-  background: rgba(240, 240, 240, 0.9);
+  width: 35px;
+  height: 35px;
+  background: rgba(255, 255, 255, 0.97) !important;
 }
 #_cbhtml .is-tool.is-table-tool > button svg,
 .is-ui .is-tool.is-table-tool > button svg {
-  fill: #121212;
+  width: 17px !important;
+  height: 17px !important;
+  fill: #111 !important;
+  color: #111 !important;
 }
 #_cbhtml .is-tool.is-code-tool, #_cbhtml .is-tool.is-module-tool, #_cbhtml .is-tool.is-svg-tool,
 .is-ui .is-tool.is-code-tool,
@@ -3604,44 +3643,50 @@ button:focus-visible {
 .is-ui .is-tool.is-svg-tool {
   border: none;
   background: none;
-  border-radius: 3px;
+  border-radius: 20px;
+  box-shadow: -1px 5px 8px 0px rgba(0, 0, 0, 0.08);
   overflow: hidden;
 }
 #_cbhtml .is-tool.is-code-tool > button, #_cbhtml .is-tool.is-module-tool > button, #_cbhtml .is-tool.is-svg-tool > button,
 .is-ui .is-tool.is-code-tool > button,
 .is-ui .is-tool.is-module-tool > button,
 .is-ui .is-tool.is-svg-tool > button {
-  width: 35px !important;
-  height: 35px !important;
-  background: rgba(240, 240, 240, 0.9);
+  width: 35px;
+  height: 35px;
+  background: rgba(255, 255, 255, 0.97) !important;
 }
 #_cbhtml .is-tool.is-code-tool > button svg, #_cbhtml .is-tool.is-module-tool > button svg, #_cbhtml .is-tool.is-svg-tool > button svg,
 .is-ui .is-tool.is-code-tool > button svg,
 .is-ui .is-tool.is-module-tool > button svg,
 .is-ui .is-tool.is-svg-tool > button svg {
-  width: 14px !important;
-  height: 14px !important;
-  fill: #121212;
+  width: 17px !important;
+  height: 17px !important;
+  fill: #111 !important;
+  color: #111 !important;
 }
 #_cbhtml .is-tool#divLinkTool, #_cbhtml .is-tool#divButtonTool,
 .is-ui .is-tool#divLinkTool,
 .is-ui .is-tool#divButtonTool {
-  background: rgba(243, 243, 243, 0.9);
+  background: rgba(255, 255, 255, 0.97) !important;
   box-shadow: none;
-  border-radius: 3px;
+  border-radius: 20px;
   overflow: hidden;
+  box-shadow: -1px 5px 8px 0px rgba(0, 0, 0, 0.08);
+  margin-top: -10px;
+  margin-left: 7px;
 }
 #_cbhtml .is-tool#divLinkTool button, #_cbhtml .is-tool#divButtonTool button,
 .is-ui .is-tool#divLinkTool button,
 .is-ui .is-tool#divButtonTool button {
-  width: 30px;
-  height: 30px;
-  background: transparent;
+  width: 37px;
+  height: 37px;
+  background: transparent !important;
 }
 #_cbhtml .is-tool#divLinkTool button svg, #_cbhtml .is-tool#divButtonTool button svg,
 .is-ui .is-tool#divLinkTool button svg,
 .is-ui .is-tool#divButtonTool button svg {
-  fill: #121212;
+  fill: #111 !important;
+  color: #111 !important;
 }
 #_cbhtml .dot,
 .is-ui .dot {
@@ -5354,16 +5399,23 @@ button:focus-visible {
 #_cbhtml .is-tool.is-element-tool {
   border-radius: 3px;
   overflow: hidden;
+  margin-top: 10px;
+  margin-left: 0px;
+  border-radius: 100px;
+  box-shadow: -1px 5px 8px 0px rgba(0, 0, 0, 0.08);
+  background-color: rgba(255, 255, 255, 0.9) !important;
 }
 #_cbhtml .is-tool.is-element-tool button {
-  width: 25px;
-  height: 25px;
+  width: 32px;
+  height: 31px;
   background: transparent;
+  color: #111;
 }
 #_cbhtml .is-tool.is-element-tool svg {
   width: 14px;
   height: 14px;
-  fill: #000;
+  fill: #111 !important;
+  color: #111 !important;
 }
 #_cbhtml .is-tool.is-element-tool .elm-more svg {
   width: 11px;
@@ -5399,14 +5451,15 @@ button:focus-visible {
   overflow: hidden;
 }
 .is-tool.is-row-tool button {
-  width: 25px;
-  height: 25px;
+  width: 28px;
+  height: 28px;
   display: flex;
   justify-content: center;
   align-items: center;
 }
 .is-tool.is-row-tool svg {
-  fill: #fff;
+  fill: #fff !important;
+  color: #fff !important;
 }
 .is-tool.is-row-tool .row-handle {
   display: flex;
@@ -5452,10 +5505,11 @@ button:focus-visible {
   box-shadow: none;
   border-radius: 2px;
   overflow: hidden;
+  top: -3px !important;
 }
 .is-tool.is-col-tool button {
-  width: 25px;
-  height: 25px;
+  width: 28px;
+  height: 28px;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -5470,10 +5524,9 @@ button:focus-visible {
   background: rgba(255, 85, 4, 0.9);
 }
 .is-tool.is-col-tool svg {
-  width: 23px;
-  height: 23px;
   fill: #fff !important;
   /* $ui-columntool-colored-button-svg-fill */
+  color: #fff !important;
 }
 .is-tool.is-col-tool .cell-more svg {
   width: 14px;
@@ -5733,7 +5786,7 @@ button:focus-visible {
   background: transparent;
 }
 .is-builder[clean] .is-tool.is-row-tool .row-grideditor svg {
-  fill: #000;
+  fill: #000 !important;
   width: 13px;
   height: 13px;
   margin-left: -1px;