@innovastudio/contentbox 1.6.93 → 1.6.94

package/public/contentbox/contentbox.esm.js

@@ -666,14 +666,15 @@ function out(s, alt) {
 
 class CustomSelect$1 {
   constructor(selector, config = {}) {
-    this.select = document.querySelector(selector); // Construct
+    this.select = document.querySelector(selector);
+    this.uniqueId = `custom_select_${Date.now()}_${Math.floor(Math.random() * 1000)}`; // Construct
 
     const template = `
             <div class="select-styled" tabindex="0">
                 <span></span>
                 <span><svg><use xlink:href="#icon-chevron-down"></use></svg></span>
             </div>
-            <input type="text">
+            <input type="text" id="_${this.uniqueId}">
             <ul class="select-options" aria-haspopup="listbox">
             </ul>
         `;
@@ -7155,26 +7156,6 @@ class EditBox {
     modalEditBox.style.display = 'flex';
     document.body.classList.add('box-modal-open'); // see .box-modal-open (gives outline to div.is-container when Box Settings is opened)
 
-    /*
-    // Experimental
-    modalEditBox.style.display = 'flex';
-    document.body.classList.add('side-open');
-    let panel = modalEditBox.querySelector('.is-modal-content');
-    setTimeout(()=>{
-        this.builder.showModal(modalEditBox, false, ()=>{
-            dom.removeClass(activeBox, 'box-active');
-            
-            this.builder.showTools();
-             document.body.classList.remove('side-open');
-            this.builder.wrapperEl.style.transition = 'none';
-            setTimeout(()=>{
-                modalEditBox.style.display = '';
-                this.builder.wrapperEl.style.transition = '';
-            }, 200);
-        });
-    }, 10);
-    */
-
     modalEditBox.focus();
   } //edit
 
@@ -10720,7 +10701,7 @@ class PanelText {
                     </div>
 
                     <label class="label checkbox flexgrow mt-2">
-                        <input type="checkbox" class="chk-flexgrow" />
+                        <input type="checkbox" class="chk-flexgrow" id="_chk_flexgrow" />
                         <span>${out('Grow')}</span>
                     </label>
                 </div>
@@ -11543,13 +11524,18 @@ class PanelText {
 class PanelImage {
   constructor(panel, builder) {
     this.builder = builder;
+
+    this.random = () => {
+      return `${Math.floor(Math.random() * 1000)}`;
+    };
+
     let html = `
         <div class="submain">
             <div class="asset-preview"></div>
 
             <label class="label mt-3">
                 <div>${out('Source')}:</div>
-                <input type="text" class="inp-src">
+                <input type="text" class="inp-src" id="_inp_src_${this.random()}">
             </label>
 
             <div class="group mt-4">
@@ -11571,7 +11557,7 @@ class PanelImage {
 
             <label class="label mt-2">
                 <div>${out('Title')}:</div>
-                <input type="text" class="inp-title">
+                <input type="text" class="inp-title" id="_inp_title_${this.random()}">
             </label>
         </div>
         `;
@@ -13174,7 +13160,10 @@ class PanelBox {
                         <button title="${out('Change Device')}" class="btn-device"><svg style="width:13px;height:13px;"><use xlink:href="#icon-devices"></use></svg></button>
                     </div>
 
-                    <div class="group contentsize" style="flex-flow: wrap">
+                    <div>
+                        <input type="range" min="300" max="2700" value="300" step="20" class="inp-content-width is-rangeslider" style="max-width:220px">
+                    </div>
+                    <div class="group contentsize" style="flex-flow: wrap; display: none">
                         <button data-content-size="500">500</button>
                         <button data-content-size="600">600</button>
                         <button data-content-size="700">700</button>
@@ -13654,7 +13643,8 @@ class PanelBox {
       this.btnAccordionText.style.display = 'none';
       this.btnAccordionText.nextElementSibling.style.display = 'none';
       this.divDefaultTextColor.style.display = 'none';
-    });
+    }); // Content Size (old buttons)
+
     const btnContentSize = panel.querySelectorAll('[data-content-size]');
     btnContentSize.forEach(btn => {
       btn.addEventListener('click', () => {
@@ -13671,7 +13661,26 @@ class PanelBox {
           }
         });
       });
-    });
+    }); // Content Size (new slider)
+
+    const inpContentSize = panel.querySelector('.inp-content-width');
+
+    inpContentSize.onfocus = () => {
+      this.builder.editor.saveForUndo();
+    };
+
+    inpContentSize.oninput = () => {
+      //val: 300 - 2700
+      let s = inpContentSize.value;
+      this.box.setContentWidth(s, width => {
+        panel.querySelector('.val-box-size').innerHTML = width;
+      });
+    };
+
+    inpContentSize.onchange = () => {
+      this.builder.onChange();
+    };
+
     const btnContentPos = panel.querySelectorAll('[data-content-pos]');
     btnContentPos.forEach(btn => {
       btn.addEventListener('click', () => {
@@ -14546,6 +14555,9 @@ class PanelBox {
 
       if (val) {
         panel.querySelector('.val-box-size').innerHTML = val === 'none' ? '' : val;
+        const inpContentSize = panel.querySelector('.inp-content-width');
+        inpContentSize.value = val; // old buttons
+
         const btn = panel.querySelector(`[data-content-size="${val}"]`);
         if (btn) btn.classList.add('on');
       }
@@ -16190,7 +16202,7 @@ class PanelSection {
 
             <div class="subpanel">
                 <label class="label mt-2">
-                    <div>${out('Add Section ID')}:</div>
+                    <div>${out('Add ID')}:</div>
                     <input type="text" class="inp-section-id" onkeypress="return /[0-9a-zA-Z_]/i.test(event.key)">
                 </label>
 
@@ -16869,7 +16881,7 @@ class PanelColumn {
 
             <div class="subpanel">
                 <label class="label mt-2">
-                    <div>${out('Add Section ID')}:</div>
+                    <div>${out('Add ID')}:</div>
                     <input type="text" class="inp-column-id" onkeypress="return /[0-9a-zA-Z_]/i.test(event.key)">
                 </label>
 
@@ -17870,7 +17882,7 @@ class PanelRow {
 
             <div class="subpanel">
                 <label class="label mt-2">
-                    <div>${out('Add Section ID')}:</div>
+                    <div>${out('Add ID')}:</div>
                     <input type="text" class="inp-row-id" onkeypress="return /[0-9a-zA-Z_]/i.test(event.key)">
                 </label>
 
@@ -32708,8 +32720,8 @@ class Util$1 {
         const newPos = this.getElementPosition(btnCellMore);
         let top = newPos.top;
         let left = newPos.left;
-        columnMore.style.top = top + 35 + 'px';
-        columnMore.style.left = left - 7 + 'px';
+        columnMore.style.top = top + 35 + window.pageYOffset + 'px';
+        columnMore.style.left = left - 7 + window.pageXOffset + 'px';
         setTimeout(() => {
           columnMore.classList.remove('transition1');
         }, 300);
@@ -41970,7 +41982,7 @@ const prepareSvgIcons = builder => {
                 <path d="M14 14l1 -1c.617 -.593 1.328 -.793 2.009 -.598"></path>
             </symbol>
 
-            <symbol id="icon-reload" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+            <symbol id="icon-reload" viewBox="0 0 24 24" stroke-width="1.7" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                 <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                 <path d="M19.933 13.041a8 8 0 1 1 -9.925 -8.788c3.899 -1.002 7.935 1.007 9.425 4.747"></path>
                 <path d="M20 4v5h-5"></path>
@@ -42048,7 +42060,7 @@ const prepareSvgIcons = builder => {
                 <path d="M18 18m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path>
                 <path d="M20.2 20.2l1.8 1.8"></path>
             </symbol>
-            <symbol id="icon-folder2" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+            <symbol id="icon-folder2" viewBox="0 0 24 24" stroke-width="1.7" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                 <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                 <path d="M11 19h-6a2 2 0 0 1 -2 -2v-11a2 2 0 0 1 2 -2h4l3 3h7a2 2 0 0 1 2 2v2.5"></path>
                 <path d="M18 18m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path>
@@ -42227,7 +42239,7 @@ const prepareSvgIcons = builder => {
                 <path d="M17 17h2a2 2 0 0 0 2 -2v-4a2 2 0 0 0 -2 -2h-14a2 2 0 0 0 -2 2v4a2 2 0 0 0 2 2h2" /><path d="M17 9v-4a2 2 0 0 0 -2 -2h-6a2 2 0 0 0 -2 2v4" /><path d="M7 13m0 2a2 2 0 0 1 2 -2h6a2 2 0 0 1 2 2v4a2 2 0 0 1 -2 2h-6a2 2 0 0 1 -2 -2z" />
             </symbol>
 
-            <symbol id="icon-plus" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+            <symbol id="icon-plus" viewBox="0 0 24 24" stroke-width="1.7" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                 <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                 <line x1="12" y1="5" x2="12" y2="19"></line>
                 <line x1="5" y1="12" x2="19" y2="12"></line>
@@ -42242,6 +42254,47 @@ const prepareSvgIcons = builder => {
                 <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                 <path d="M5 12l14 0"></path>
             </symbol>
+
+            <symbol id="icon-dots2" viewBox="0 0 24 24" stroke-width="1.7" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /><path d="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /><path d="M19 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
+            </symbol>
+            <symbol id="icon-close" viewBox="0 0 24 24" stroke-width="1.6" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                <path d="M18 6l-12 12"></path>
+                <path d="M6 6l12 12"></path>
+            </symbol>
+            <symbol id="icon-trash2" viewBox="0 0 24 24" stroke-width="1.4" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                <path d="M4 7l16 0"></path>
+                <path d="M10 11l0 6"></path>
+                <path d="M14 11l0 6"></path>
+                <path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12"></path>
+                <path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3"></path>
+            </symbol>
+            <symbol id="icon-duplicate3" viewBox="0 0 24 24" stroke-width="1.7" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M7 7m0 2.667a2.667 2.667 0 0 1 2.667 -2.667h8.666a2.667 2.667 0 0 1 2.667 2.667v8.666a2.667 2.667 0 0 1 -2.667 2.667h-8.666a2.667 2.667 0 0 1 -2.667 -2.667z" /><path d="M4.012 16.737a2.005 2.005 0 0 1 -1.012 -1.737v-10c0 -1.1 .9 -2 2 -2h10c.75 0 1.158 .385 1.5 1" />
+            </symbol>
+            <symbol id="icon-pencil2" viewBox="0 0 24 24" stroke-width="1.7" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                <path d="M4 20h4l10.5 -10.5a1.5 1.5 0 0 0 -4 -4l-10.5 10.5v4"></path>
+                <line x1="13.5" y1="6.5" x2="17.5" y2="10.5"></line>
+            </symbol>
+            <symbol id="icon-link2" viewBox="0 0 24 24" stroke-width="1.7" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                <path d="M9 15l6 -6"></path>
+                <path d="M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464"></path>
+                <path d="M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463"></path>
+            </symbol>
+            <symbol id="icon-cog" viewBox="0 0 24 24" stroke-width="1.4" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z" /><path d="M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0" />
+            </symbol>
+            <symbol id="icon-photo" viewBox="0 0 24 24" stroke-width="1.7" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M15 8h.01" /><path d="M3 6a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3v-12z" /><path d="M3 16l5 -5c.928 -.893 2.072 -.893 3 0l5 5" /><path d="M14 14l1 -1c.928 -.893 2.072 -.893 3 0l3 3" />
+            </symbol>
+            <symbol id="icon-minus2" viewBox="0 0 24 24" stroke-width="1.7" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                <path d="M5 12l14 0"></path>
+            </symbol>
         </svg>`;
   builder.dom.appendHtml(builder.builderStuff, html);
 };
@@ -43280,8 +43333,8 @@ class RowTool$1 {
     }
     */
     const newPos = this.builder.util.getElementPosition(elm);
-    let top = newPos.top;
-    let left = newPos.left;
+    let top = newPos.top + window.pageYOffset;
+    let left = newPos.left + window.pageXOffset;
 
     // const w = rowMore.offsetWidth; 
     rowMore.style.top = top - 8 + 'px';
@@ -71644,12 +71697,14 @@ class Image$1 {
       let html = `
                 <div id="divImageTool" class="is-tool">
                     <div role="button" tabindex="0" class="image-embed" style="${this.builder.opts.imageEmbed ? '' : 'display:none;'}width:40px;height:40px;overflow:hidden;">
-                        <div style="position:absolute;width:100%;height:100%;"><svg class="is-icon-flex" style="position: absolute;top: 13px;left: 15px;width: 14px;height: 14px;"><use xlink:href="#ion-image"></use></svg></div>
+                        <div style="position:absolute;width:100%;height:100%;">
+                            <svg class="is-icon-flex" style="position: absolute;top: 13px;left: 15px;width: 16px;height: 16px;"><use xlink:href="#ion-image"></use></svg>
+                        </div>
                         <input title="${util.out('Change Image')}" data-title="${util.out('Change Image')}" id="fileEmbedImage" type="file" accept="image/*" style="position:absolute;top:-20px;left:0;width:40px;height:60px;opacity: 0;cursor: pointer;"/>
                     </div>
-                    <button tabindex="0" title="${util.out('Link')}" data-title="${util.out('Link')}" class="image-link" style="width:40px;height:40px;"><svg class="is-icon-flex" style="width:17px;height:17px;"><use xlink:href="#ion-link"></use></svg></button> 
-                    <button tabindex="0" title="${util.out('Select')}" data-title="${util.out('Select')}" class="open-asset" style="display:none;width:40px;height:40px;"><svg class="is-icon-flex" style="width:17px;height:17px;color:#fff"><use xlink:href="#icon-folder2"></use></svg></button> 
-                    <button tabindex="0" title="${util.out('Edit')}" data-title="${util.out('Edit')}" class="image-edit" style="width:40px;height:40px;"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#ion-android-create"></use></svg></button>
+                    <button tabindex="0" title="${util.out('Link')}" data-title="${util.out('Link')}" class="image-link" style="width:40px;height:40px;"><svg class="is-icon-flex" style="width:17px;height:17px;transform:rotate(45deg)"><use xlink:href="#icon-link2"></use></svg></button> 
+                    <button tabindex="0" title="${util.out('Select')}" data-title="${util.out('Select')}" class="open-asset" style="display:none;width:40px;height:40px;"><svg class="is-icon-flex" style="width:17px;height:17px;"><use xlink:href="#icon-folder2"></use></svg></button> 
+                    <button tabindex="0" title="${util.out('Edit')}" data-title="${util.out('Edit')}" class="image-edit" style="width:40px;height:40px;"><svg class="is-icon-flex" style="width:17px;height:17px;"><use xlink:href="#icon-pencil2"></use></svg></button>
                 </div>
                 <div id="divImageProgress">
                     <div>
@@ -74989,10 +75044,18 @@ class Hyperlink {
     let linkTool = builderStuff.querySelector('#divLinkTool');
     if (!linkTool) {
       let html = `<div id="divLinkTool" class="is-tool">
-            <button title="${util.out('Edit Button')}" data-title="${util.out('Edit Button')}" class="link-button-edit" style="display:none;"><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#ion-android-create"></use></svg></button>
-                <button title="${util.out('Link')}" data-title="${util.out('Link')}" class="link-edit"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-link"></use></svg></button>
-                <button title="${util.out('Duplicate')}" data-title="${util.out('Duplicate')}" class="link-duplicate"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#ion-ios-photos-outline"></use></svg></button>
-                <button title="${util.out('Delete')}" data-title="${util.out('Delete')}" class="link-remove"><svg class="is-icon-flex" style="width:20px;height:20px;"><use xlink:href="#ion-ios-close-empty"></use></svg></button>
+                <button title="${util.out('Edit Button')}" data-title="${util.out('Edit Button')}" class="link-button-edit" style="display:none;">
+                    <svg class="is-icon-flex" style="width:17px;height:17px;"><use xlink:href="#icon-pencil2"></use></svg>
+                </button>
+                <button title="${util.out('Link')}" data-title="${util.out('Link')}" class="link-edit">
+                    <svg class="is-icon-flex" style="width:17px;height:17px;transform:rotate(45deg)"><use xlink:href="#icon-link2"></use></svg>
+                </button>
+                <button title="${util.out('Duplicate')}" data-title="${util.out('Duplicate')}" class="link-duplicate">
+                    <svg class="is-icon-flex" style="width:16px;height:16px;"><use xlink:href="#icon-duplicate3"></use></svg>
+                </button>
+                <button title="${util.out('Delete')}" data-title="${util.out('Delete')}" class="link-remove">
+                    <svg class="is-icon-flex" style="width:17px;height:17px;"><use xlink:href="#icon-trash2"></use></svg>
+                </button>
             </div>
             `;
       dom.appendHtml(builderStuff, html);
@@ -75584,9 +75647,15 @@ class Button {
     let buttonTool = builderStuff.querySelector('#divButtonTool');
     if (!buttonTool) {
       let html = `<div id="divButtonTool" class="is-tool">
-                <button title="${util.out('Edit Button')}" data-title="${util.out('Edit Button')}" class="button-edit"><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#ion-android-create"></use></svg></button>
-                <button title="${util.out('Duplicate')}" data-title="${util.out('Duplicate')}" class="button-duplicate"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#ion-ios-photos-outline"></use></svg></button>
-                <button title="${util.out('Delete')}" data-title="${util.out('Delete')}" class="button-remove"><svg class="is-icon-flex" style="width:20px;height:20px;"><use xlink:href="#ion-ios-close-empty"></use></svg></button>
+                <button title="${util.out('Edit Button')}" data-title="${util.out('Edit Button')}" class="button-edit">
+                    <svg class="is-icon-flex" style="width:17px;height:17px;"><use xlink:href="#icon-pencil2"></use></svg>
+                </button>
+                <button title="${util.out('Duplicate')}" data-title="${util.out('Duplicate')}" class="button-duplicate">
+                    <svg class="is-icon-flex" style="width:16px;height:16px;"><use xlink:href="#icon-duplicate3"></use></svg>
+                </button>
+                <button title="${util.out('Delete')}" data-title="${util.out('Delete')}" class="button-remove">
+                    <svg class="is-icon-flex" style="width:17px;height:17px;"><use xlink:href="#icon-trash2"></use></svg>
+                </button>
             </div>
             `;
       dom.appendHtml(builderStuff, html);
@@ -75718,8 +75787,8 @@ class Spacer {
     if (!spacerTool) {
       let html = `
             <div id="divSpacerTool" class="is-tool is-spacer-tool">
-                <button title="${util.out('Decrease')}" data-value="-"><svg class="is-icon-flex"><use xlink:href="#ion-ios-minus-empty"></use></svg></button>
-                <button title="${util.out('Increase')}" data-value="+" style="border-left: none;"><svg class="is-icon-flex"><use xlink:href="#ion-ios-plus-empty"></use></svg></button>
+                <button title="${util.out('Decrease')}" data-value="-"><svg class="is-icon-flex"><use xlink:href="#icon-minus2"></use></svg></button>
+                <button title="${util.out('Increase')}" data-value="+" style="border-left: none;"><svg class="is-icon-flex"><use xlink:href="#icon-plus"></use></svg></button>
             </div>
             `;
       dom.appendHtml(builderStuff, html);
@@ -75879,7 +75948,7 @@ class Module {
       let html = `
             <div class="is-tool is-module-tool">
                 <button class="btn-module-refresh" title="${util.out('Refresh')}" data-title="${util.out('Refresh')}" style="width:40px;height:40px;"><svg class="is-icon-flex"><use xlink:href="#icon-reload"></use></svg></button>
-                <button class="btn-module-settings" title="${util.out('Settings')}" data-title="${util.out('Settings')}" style="width:40px;height:40px;"><svg class="is-icon-flex"><use xlink:href="#ion-ios-gear"></use></svg></button>
+                <button class="btn-module-settings" title="${util.out('Settings')}" data-title="${util.out('Settings')}" style="width:40px;height:40px;"><svg class="is-icon-flex"><use xlink:href="#icon-cog"></use></svg></button>
             </div>
             `;
       dom.appendHtml(builderStuff, html);
@@ -76129,7 +76198,7 @@ class Code {
     if (!codeTool) {
       let html = `
             <div class="is-tool is-code-tool">
-                <button title="${util.out('Settings')}" data-title="${util.out('Settings')}" style="width:40px;height:40px;"><svg class="is-icon-flex"><use xlink:href="#ion-ios-gear"></use></svg></button>
+                <button title="${util.out('Settings')}" data-title="${util.out('Settings')}"><svg class="is-icon-flex"><use xlink:href="#icon-cog"></use></svg></button>
             </div>
             `;
       dom.appendHtml(builderStuff, html);
@@ -76257,7 +76326,7 @@ class Iframe {
     if (!iframeTool) {
       let html = `
             <div class="is-tool is-iframe-tool">
-                <button title="${util.out('Settings')}" data-title="${util.out('Settings')}" style="width:40px;height:40px;background:none;"><svg class="is-icon-flex"><use xlink:href="#ion-ios-gear"></use></svg></button>
+                <button title="${util.out('Settings')}" data-title="${util.out('Settings')}" style="width:40px;height:40px;background:none;"><svg class="is-icon-flex"><use xlink:href="#icon-cog"></use></svg></button>
             </div>
             `;
       dom.appendHtml(builderStuff, html);
@@ -76417,7 +76486,7 @@ class Table {
       //<div class="is-modal-bar is-draggable" style="background:#f9f9f9;"></div>
       let html = `
             <div class="is-tool is-table-tool">
-                <button title="${util.out('Settings')}" style="width:40px;height:40px;"><svg class="is-icon-flex"><use xlink:href="#ion-ios-gear"></use></svg></button>
+                <button title="${util.out('Settings')}" style="width:35px;height:35px;"><svg class="is-icon-flex" style="width:17px;height:17px;"><use xlink:href="#icon-cog"></use></svg></button>
             </div>
             `;
       dom.appendHtml(builderStuff, html);
@@ -76975,7 +77044,7 @@ class Video {
     if (!videoTool) {
       let html = `
             <div class="is-tool is-video-tool">
-                <button title="${util.out('Settings')}" data-title="${util.out('Settings')}" style="width:40px;height:40px;background:none;"><svg class="is-icon-flex"><use xlink:href="#ion-ios-gear"></use></svg></button>
+                <button title="${util.out('Settings')}" data-title="${util.out('Settings')}" style="width:40px;height:40px;background:none;"><svg class="is-icon-flex"><use xlink:href="#icon-cog"></use></svg></button>
             </div>
             `;
       dom.appendHtml(builderStuff, html);
@@ -77232,7 +77301,7 @@ class Audio {
     if (!audioTool) {
       let html = `
             <div class="is-tool is-audio-tool">
-                <button title="${util.out('Settings')}" data-title="${util.out('Settings')}" style="width:37px;height:37px;background:none;"><svg class="is-icon-flex"><use xlink:href="#ion-ios-gear"></use></svg></button>
+                <button title="${util.out('Settings')}" data-title="${util.out('Settings')}" style="background:none;"><svg class="is-icon-flex"><use xlink:href="#icon-cog"></use></svg></button>
             </div>
             `;
       dom.appendHtml(builderStuff, html);
@@ -77425,7 +77494,7 @@ class Svg {
     if (!svgTool) {
       let html = `
             <div class="is-tool is-svg-tool">
-                <button class="btn-svg-settings" title="${util.out('Settings')}" data-title="${util.out('Settings')}"><svg class="is-icon-flex"><use xlink:href="#ion-ios-gear"></use></svg></button>
+                <button class="btn-svg-settings" title="${util.out('Settings')}" data-title="${util.out('Settings')}"><svg class="is-icon-flex"><use xlink:href="#icon-cog"></use></svg></button>
             </div>
             `;
       dom.appendHtml(builderStuff, html);
@@ -77800,14 +77869,20 @@ class RowTool {
     if (!rowtool) {
       let html = `<div class="is-tool is-row-tool" style="${!this.builder.rowTool && this.builder.rowTool !== '' ? 'display:none;' : ''}">
                 <div title="${util.out('Move')}" role="button" tabindex="-1" class="row-handle" style="${this.builder.rowHandle ? '' : 'display:none;'}width:100%;cursor:move;text-align:center;"><svg class="is-icon-flex"><use xlink:href="#ion-move"></use></svg></div>
-                <button type="button" tabindex="-1" title="${util.out('More')}" class="row-more"><svg class="is-icon-flex"><use xlink:href="#ion-more"></use></svg></button>
+                <button type="button" tabindex="-1" title="${util.out('More')}" class="row-more"><svg class="is-icon-flex" style="color:#fff;width:15px;height:15px;"><use xlink:href="#icon-dots2"></use></svg></button>
                 <button type="button" tabindex="-1" title="${util.out('Grid Editor')}" class="row-grideditor"><svg class="is-icon-flex"><use xlink:href="#ion-grid"></use></svg></button>
-                <button type="button" tabindex="-1" title="${util.out('Delete')}" class="row-remove"><svg class="is-icon-flex"><use xlink:href="#ion-ios-close-empty"></use></svg></button>
+                <button type="button" tabindex="-1" title="${util.out('Delete')}" class="row-remove"><svg class="is-icon-flex" style="color:#fff;width:15px;height:15px;"><use xlink:href="#icon-trash2"></use></svg></button>
             </div>
             <div class="is-tool is-col-tool">
-                <button type="button" tabindex="-1" title="${util.out('Add')}" class="cell-add"><svg class="is-icon-flex"><use xlink:href="#ion-ios-plus-empty"></use></svg></button>
-                <button type="button" tabindex="-1" title="${util.out('More')}" class="cell-more"><svg class="is-icon-flex"><use xlink:href="#ion-more"></use></svg></button>
-                <button type="button" tabindex="-1" title="${util.out('Delete')}" class="cell-remove"><svg class="is-icon-flex" style="margin-left:-1px"><use xlink:href="#ion-ios-close-empty"></use></svg></button>
+                <button type="button" tabindex="-1" title="${util.out('Add')}" class="cell-add">
+                    <svg class="is-icon-flex" style="color:#fff;width:15px;height:15px;"><use xlink:href="#icon-plus"></use></svg>
+                </button>
+                <button type="button" tabindex="-1" title="${util.out('More')}" class="cell-more">
+                    <svg class="is-icon-flex" style="color:#fff;width:15px;height:15px;"><use xlink:href="#icon-dots2"></use></svg>
+                </button>
+                <button type="button" tabindex="-1" title="${util.out('Delete')}" class="cell-remove">
+                    <svg class="is-icon-flex" style="color:#fff;width:15px;height:15px;"><use xlink:href="#icon-trash2"></use></svg>
+                </button>
             </div>
             `;
       dom.appendHtml(row, html);
@@ -78209,7 +78284,7 @@ class RowTool {
                     ${htmlbutton}
                     <div class="is-separator"></div>
                     <button type="button" title="${util.out('Lock')}" class="row-locking"><span><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#icon-lock"></use></svg></span>${util.out('Lock')}</button>
-                    <button type="button" title="${util.out('Settings')}" class="row-settings"><span><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#ion-ios-gear"></use></svg></span>${util.out('Settings')}</button>
+                    <button type="button" title="${util.out('Settings')}" class="row-settings"><span><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#icon-cog"></use></svg></span>${util.out('Settings')}</button>
                 </div>
             </div>
             `;
@@ -79694,17 +79769,7 @@ class ColumnTool {
                     ${htmlbutton}
                     <div class="is-separator"></div>
                     <button type="button" title="${util.out('Lock')}" class="cell-locking"><span><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#icon-lock"></use></svg></span>${util.out('Lock')}</button>
-                    <button type="button" title="${util.out('Settings')}" class="cell-settings"><span><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#ion-ios-gear"></use></svg></span>${util.out('Settings')}</button>
-                    
-                    <!--
-                    <button title="${util.out('Lock')}" class="cell-locking">
-                        <svg class="is-icon-flex"><use xlink:href="#icon-lock"></use></svg>
-                    </button>
-                    <button title="${util.out('Settings')}" class="cell-settings">
-                        <svg class="is-icon-flex"><use xlink:href="#ion-ios-gear"></use></svg>
-                        <span>${util.out('Settings')}</span>
-                    </button>
-                    -->
+                    <button type="button" title="${util.out('Settings')}" class="cell-settings"><span><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#icon-cog"></use></svg></span>${util.out('Settings')}</button>
                 </div>
             </div>
             `;
@@ -86685,18 +86750,27 @@ class ElementTool {
     let elementMore = builderStuff.querySelector('.elmmore');
     if (!elementTool) {
       let html = `<div class="is-tool is-element-tool">
-                <button type="button" tabindex="-1" title="${util.out('Add')}" class="elm-add"><svg class="is-icon-flex"><use xlink:href="#ion-ios-plus-empty"></use></svg></button>
-                <button type="button" tabindex="-1" title="${util.out('More')}" class="elm-more"><svg class="is-icon-flex"><use xlink:href="#ion-more"></use></svg></button>
-                <button type="button" tabindex="-1" title="${util.out('Delete')}" class="elm-remove"><svg class="is-icon-flex" style="margin-left:-1px"><use xlink:href="#ion-ios-close-empty"></use></svg></button>
-                <button type="button" tabindex="-1" title="${util.out('Settings')}" class="elm-settings"><svg class="is-icon-flex"><use xlink:href="#ion-ios-gear"></use></svg></button>
+                <button type="button" tabindex="-1" title="${util.out('Add')}" class="elm-add">
+                    <svg class="is-icon-flex" style="width:14px;height:14px;color:#111"><use xlink:href="#icon-plus"></use></svg>
+                </button>
+                <button type="button" tabindex="-1" title="${util.out('More')}" class="elm-more">
+                    <svg class="is-icon-flex" style="width:17px;height:17px;color:#111"><use xlink:href="#icon-dots2"></use></svg>
+                </button>
+                <button type="button" tabindex="-1" title="${util.out('Delete')}" class="elm-remove">
+                    <svg class="is-icon-flex" style="width:15px;height:15px;color:#111"><use xlink:href="#icon-trash2"></use></svg>
+                </button>
+                <button type="button" tabindex="-1" title="${util.out('Settings')}" class="elm-settings">
+                    <svg class="is-icon-flex"><use xlink:href="#ion-ios-gear"></use></svg>
+                </button>
             </div>
+
             <div class="is-pop elmmore" style="z-index:10002;" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
                 <div style="display:flex;flex-flow:wrap;">
                     <button type="button" title="${util.out('Move Up')}" class="elm-up"><span><svg class="is-icon-flex" style="width:15px;height:15px;"><use xlink:href="#ion-ios-arrow-thin-up"></use></svg></span>${util.out('Move Up')}</button>
                     <button type="button" title="${util.out('Move Down')}" class="elm-down"><span><svg class="is-icon-flex" style="width:15px;height:15px;"><use xlink:href="#ion-ios-arrow-thin-down"></use></svg></span>${util.out('Move Down')}</button>
                     <button type="button" title="${util.out('Duplicate')}" class="elm-duplicate"><span><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#ion-ios-photos-outline"></use></svg></span>${util.out('Duplicate')}</button>
                     ${this.builder.opts.elementEditor ? `
-                    <button type="button" title="${util.out('Settings')}" class="elm-settings"><span><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#ion-ios-gear"></use></svg></span>${util.out('Settings')}</button>
+                    <button type="button" title="${util.out('Settings')}" class="elm-settings"><span><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#icon-cog"></use></svg></span>${util.out('Settings')}</button>
                     ` : ''} 
                 </div>
             </div>
@@ -86747,7 +86821,7 @@ class ElementTool {
       const w = quickadd.offsetWidth; //to get value, element must not hidden (display:none). So set display:flex before this.
       const h = quickadd.offsetHeight;
       if (viewportHeight - top > h) {
-        quickadd.style.top = top + window.pageYOffset + 27 + 'px';
+        quickadd.style.top = top + window.pageYOffset + 42 + 'px';
         quickadd.style.left = left - w / 2 + 10 + 'px';
         dom.removeClass(quickadd, 'arrow-bottom');
         dom.removeClass(quickadd, 'arrow-right');
@@ -86912,7 +86986,7 @@ class ElementTool {
       const w = elementMore.offsetWidth; //to get value, element must not hidden (display:none). So set display:flex before this.
       const h = elementMore.offsetHeight;
       if (viewportHeight - top > h) {
-        elementMore.style.top = top + window.pageYOffset + 27 + 'px';
+        elementMore.style.top = top + window.pageYOffset + 42 + 'px';
         elementMore.style.left = left - w / 2 + 10 + 'px';
         dom.removeClass(elementMore, 'arrow-bottom');
         dom.removeClass(elementMore, 'arrow-right');
@@ -87208,6 +87282,9 @@ class ElementTool {
         }
       }
     }
+    if (activeElement && activeElement.classList.contains('ovl') && this.builder.activeIframe) {
+      activeElement = this.builder.activeIframe.closest('.embed-responsive');
+    }
     this.builder.activeElement = activeElement;
     if (activeElement) {
       let elm = activeElement;
@@ -104803,54 +104880,83 @@ class ContentStuff$1 {
   constructor(builder) {
     this.builder = builder;
     const util = builder.util;
-    const html = `<div class="is-tool is-column-tool">
+    const html = `
+        <!-- not used -->
+        <div class="is-tool is-column-tool">
             <button type="button" tabindex="-1" title="${util.out('Add')}" class="cell-add"><svg class="is-icon-flex"><use xlink:href="#ion-ios-plus-empty"></use></svg></button>
             <button type="button" tabindex="-1" title="${util.out('More')}" class="cell-more"><svg class="is-icon-flex"><use xlink:href="#ion-more"></use></svg></button>
             <button type="button" tabindex="-1" title="${util.out('Delete')}" class="cell-remove"><svg class="is-icon-flex" style="margin-left:-1px"><use xlink:href="#ion-ios-close-empty"></use></svg></button>
         </div>
+        <!-- /not used -->
+
         <div class="is-tool is-element-tool">
-            <button type="button" tabindex="-1" title="${util.out('Add')}" class="elm-add"><svg class="is-icon-flex"><use xlink:href="#ion-ios-plus-empty"></use></svg></button>
-            <button type="button" tabindex="-1" title="${util.out('More')}" class="elm-more"><svg class="is-icon-flex"><use xlink:href="#ion-more"></use></svg></button>
-            <button type="button" tabindex="-1" title="${util.out('Delete')}" class="elm-remove"><svg class="is-icon-flex" style="margin-left:-1px"><use xlink:href="#ion-ios-close-empty"></use></svg></button>
-            <button type="button" tabindex="-1" title="${util.out('Settings')}" class="elm-settings"><svg class="is-icon-flex"><use xlink:href="#ion-ios-gear"></use></svg></button>
+            <button type="button" tabindex="-1" title="${util.out('Add')}" class="elm-add">
+                <svg class="is-icon-flex" style="width:14px;height:14px;color:#111"><use xlink:href="#icon-plus"></use></svg>
+            </button>
+            <button type="button" tabindex="-1" title="${util.out('More')}" class="elm-more">
+                <svg class="is-icon-flex" style="width:17px;height:17px;color:#111"><use xlink:href="#icon-dots2"></use></svg>
+            </button>
+            <button type="button" tabindex="-1" title="${util.out('Delete')}" class="elm-remove">
+                <svg class="is-icon-flex" style="width:15px;height:15px;color:#111"><use xlink:href="#icon-trash2"></use></svg>
+            </button>
+            <button type="button" tabindex="-1" title="${util.out('Settings')}" class="elm-settings">
+                <svg class="is-icon-flex"><use xlink:href="#ion-ios-gear"></use></svg>
+            </button>
         </div>
 
         <div id="divButtonTool" class="is-tool">
-            <button title="${util.out('Edit Button')}" data-title="${util.out('Edit Button')}" class="button-edit"><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#ion-android-create"></use></svg></button>
-            <button title="${util.out('Duplicate')}" data-title="${util.out('Duplicate')}" class="button-duplicate"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#ion-ios-photos-outline"></use></svg></button>
-            <button title="${util.out('Delete')}" data-title="${util.out('Delete')}" class="button-remove"><svg class="is-icon-flex" style="width:20px;height:20px;"><use xlink:href="#ion-ios-close-empty"></use></svg></button>
+            <button title="${util.out('Edit Button')}" data-title="${util.out('Edit Button')}" class="button-edit">
+                <svg class="is-icon-flex" style="width:17px;height:17px;color:#111"><use xlink:href="#icon-pencil2"></use></svg>
+            </button>
+            <button title="${util.out('Duplicate')}" data-title="${util.out('Duplicate')}" class="button-duplicate">
+                <svg class="is-icon-flex" style="width:16px;height:16px;color:#111"><use xlink:href="#icon-duplicate3"></use></svg>
+            </button>
+            <button title="${util.out('Delete')}" data-title="${util.out('Delete')}" class="button-remove">
+                <svg class="is-icon-flex" style="width:17px;height:17px;color:#111"><use xlink:href="#icon-trash2"></use></svg>
+            </button>
         </div>
+
         <div class="is-tool is-code-tool">
-            <button title="${util.out('Settings')}" data-title="${util.out('Settings')}" style="width:40px;height:40px;"><svg class="is-icon-flex"><use xlink:href="#ion-ios-gear"></use></svg></button>
+            <button title="${util.out('Settings')}" data-title="${util.out('Settings')}" style="width:35px;height:35px;"><svg class="is-icon-flex" style="width:17px;height:17px;color:#111"><use xlink:href="#icon-cog"></use></svg></button>
         </div>
+
         <div id="divLinkTool" class="is-tool">
-            <button title="${util.out('Edit Button')}" data-title="${util.out('Edit Button')}" class="link-button-edit" style="display:none;"><svg class="is-icon-flex" style="width:12px;height:12px;"><use xlink:href="#ion-android-create"></use></svg></button>
-            <button title="${util.out('Link')}" data-title="${util.out('Link')}" class="link-edit"><svg class="is-icon-flex" style="width:13px;height:13px;"><use xlink:href="#ion-link"></use></svg></button>
-            <button title="${util.out('Duplicate')}" data-title="${util.out('Duplicate')}" class="link-duplicate"><svg class="is-icon-flex" style="width:11px;height:11px;"><use xlink:href="#ion-ios-photos-outline"></use></svg></button>
-            <button title="${util.out('Delete')}" data-title="${util.out('Delete')}" class="link-remove"><svg class="is-icon-flex" style="width:20px;height:20px;"><use xlink:href="#ion-ios-close-empty"></use></svg></button>
+                <button title="${util.out('Edit Button')}" data-title="${util.out('Edit Button')}" class="link-button-edit" style="display:none;">
+                    <svg class="is-icon-flex" style="width:17px;height:17px;color:#111"><use xlink:href="#icon-pencil2"></use></svg>
+                </button>
+                <button title="${util.out('Link')}" data-title="${util.out('Link')}" class="link-edit">
+                    <svg class="is-icon-flex" style="width:17px;height:17px;color:#111;transform:rotate(45deg)"><use xlink:href="#icon-link2"></use></svg>
+                </button>
+                <button title="${util.out('Duplicate')}" data-title="${util.out('Duplicate')}" class="link-duplicate">
+                    <svg class="is-icon-flex" style="width:16px;height:16px;color:#111"><use xlink:href="#icon-duplicate3"></use></svg>
+                </button>
+                <button title="${util.out('Delete')}" data-title="${util.out('Delete')}" class="link-remove">
+                    <svg class="is-icon-flex" style="width:17px;height:17px;color:#111"><use xlink:href="#icon-trash2"></use></svg>
+                </button>
         </div>
+
         <div class="is-tool is-iframe-tool">
-            <button title="${util.out('Settings')}" data-title="${util.out('Settings')}" style="width:40px;height:40px;background:none;"><svg class="is-icon-flex"><use xlink:href="#ion-ios-gear"></use></svg></button>
+            <button title="${util.out('Settings')}" data-title="${util.out('Settings')}" style="width:40px;height:40px;background:none;"><svg class="is-icon-flex"><use xlink:href="#icon-cog"></use></svg></button>
         </div>
         <div class="is-tool is-module-tool">
-            <button class="btn-module-refresh" title="${util.out('Refresh')}" data-title="${util.out('Refresh')}" style="width:40px;height:40px;"><svg class="is-icon-flex"><use xlink:href="#icon-reload"></use></svg></button>
-            <button class="btn-module-settings" title="${util.out('Settings')}" data-title="${util.out('Settings')}" style="width:40px;height:40px;"><svg class="is-icon-flex"><use xlink:href="#ion-ios-gear"></use></svg></button>
+        <button class="btn-module-refresh" title="${util.out('Refresh')}" data-title="${util.out('Refresh')}" style="width:40px;height:40px;"><svg class="is-icon-flex"><use xlink:href="#icon-reload"></use></svg></button>
+                <button class="btn-module-settings" title="${util.out('Settings')}" data-title="${util.out('Settings')}" style="width:40px;height:40px;"><svg class="is-icon-flex"><use xlink:href="#icon-cog"></use></svg></button>
         </div>
         <div class="is-tool is-svg-tool">
-            <button class="btn-svg-settings" title="${util.out('Settings')}" data-title="${util.out('Settings')}"><svg class="is-icon-flex"><use xlink:href="#ion-ios-gear"></use></svg></button>
+            <button class="btn-svg-settings" title="${util.out('Settings')}" data-title="${util.out('Settings')}"><svg class="is-icon-flex"><use xlink:href="#icon-cog"></use></svg></button>
         </div>
         <div id="divSpacerTool" class="is-tool is-spacer-tool">
-            <button title="${util.out('Decrease')}" data-value="-"><svg class="is-icon-flex"><use xlink:href="#ion-ios-minus-empty"></use></svg></button>
-            <button title="${util.out('Increase')}" data-value="+" style="border-left: none;"><svg class="is-icon-flex"><use xlink:href="#ion-ios-plus-empty"></use></svg></button>
+            <button title="${util.out('Decrease')}" data-value="-"><svg class="is-icon-flex"><use xlink:href="#icon-minus2"></use></svg></button>
+            <button title="${util.out('Increase')}" data-value="+" style="border-left: none;"><svg class="is-icon-flex"><use xlink:href="#icon-plus"></use></svg></button>
         </div>
         <div class="is-tool is-table-tool">
-            <button title="${util.out('Settings')}" style="width:40px;height:40px;"><svg class="is-icon-flex"><use xlink:href="#ion-ios-gear"></use></svg></button>
+            <button title="${util.out('Settings')}" style="width:35px;height:35px;"><svg class="is-icon-flex" style="width:17px;height:17px;"><use xlink:href="#icon-cog"></use></svg></button>
         </div>
         <div class="is-tool is-video-tool">
-            <button title="${util.out('Settings')}" data-title="${util.out('Settings')}" style="width:40px;height:40px;background:none;"><svg class="is-icon-flex"><use xlink:href="#ion-ios-gear"></use></svg></button>
+            <button title="${util.out('Settings')}" data-title="${util.out('Settings')}" style="width:40px;height:40px;background:none;"><svg class="is-icon-flex"><use xlink:href="#icon-cog"></use></svg></button>
         </div>
         <div class="is-tool is-audio-tool">
-            <button title="${util.out('Settings')}" data-title="${util.out('Settings')}" style="width:37px;height:37px;background:none;"><svg class="is-icon-flex"><use xlink:href="#ion-ios-gear"></use></svg></button>
+            <button title="${util.out('Settings')}" data-title="${util.out('Settings')}" style="width:35px;height:35px;background:none;"><svg class="is-icon-flex" style="width:17px;height:17px;color:#111"><use xlink:href="#icon-cog"></use></svg></button>    
         </div>
         
         <div class="is-locked-indicator">
@@ -104970,7 +105076,7 @@ class ContentStuff$1 {
             <symbol viewBox="0 0 512 512" id="ion-volume-medium">
                 <path d="M270 407.7V104.4L175.3 192H71v128h104.3zm56.3-52.1c20.5-27.8 32.8-62.3 32.8-99.6 0-37.4-12.3-71.8-32.8-99.6l-20.4 15.3c17.4 23.6 27.8 52.7 27.8 84.3 0 31.6-10.4 60.7-27.8 84.3l20.4 15.3zm66.5 46c30-40.7 48-91 48-145.6s-18-104.9-48-145.6l-20.4 15.3c26.9 36.4 43 81.4 43 130.3 0 48.9-16.1 93.8-43 130.3l20.4 15.3z"/>
             </symbol>
-            <symbol id="icon-folder2" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+            <symbol id="icon-folder2" viewBox="0 0 24 24" stroke-width="1.7" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                 <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                 <path d="M11 19h-6a2 2 0 0 1 -2 -2v-11a2 2 0 0 1 2 -2h4l3 3h7a2 2 0 0 1 2 2v2.5"></path>
                 <path d="M18 18m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path>
@@ -104981,6 +105087,64 @@ class ContentStuff$1 {
                 <path d="M19.933 13.041a8 8 0 1 1 -9.925 -8.788c3.899 -1.002 7.935 1.007 9.425 4.747"></path>
                 <path d="M20 4v5h-5"></path>
             </symbol>
+
+
+            <symbol id="icon-plus" viewBox="0 0 24 24" stroke-width="1.7" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                <line x1="12" y1="5" x2="12" y2="19"></line>
+                <line x1="5" y1="12" x2="19" y2="12"></line>
+            </symbol>
+            <symbol id="icon-plus2" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                <path d="M12 5l0 14"></path>
+                <path d="M5 12l14 0"></path>
+            </symbol>
+
+            <symbol id="icon-minus" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                <path d="M5 12l14 0"></path>
+            </symbol>
+
+            <symbol id="icon-dots2" viewBox="0 0 24 24" stroke-width="1.7" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /><path d="M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" /><path d="M19 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
+            </symbol>
+            <symbol id="icon-close" viewBox="0 0 24 24" stroke-width="1.6" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                <path d="M18 6l-12 12"></path>
+                <path d="M6 6l12 12"></path>
+            </symbol>
+            <symbol id="icon-trash2" viewBox="0 0 24 24" stroke-width="1.4" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                <path d="M4 7l16 0"></path>
+                <path d="M10 11l0 6"></path>
+                <path d="M14 11l0 6"></path>
+                <path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12"></path>
+                <path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3"></path>
+            </symbol>
+            <symbol id="icon-duplicate3" viewBox="0 0 24 24" stroke-width="1.7" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M7 7m0 2.667a2.667 2.667 0 0 1 2.667 -2.667h8.666a2.667 2.667 0 0 1 2.667 2.667v8.666a2.667 2.667 0 0 1 -2.667 2.667h-8.666a2.667 2.667 0 0 1 -2.667 -2.667z" /><path d="M4.012 16.737a2.005 2.005 0 0 1 -1.012 -1.737v-10c0 -1.1 .9 -2 2 -2h10c.75 0 1.158 .385 1.5 1" />
+            </symbol>
+            <symbol id="icon-pencil2" viewBox="0 0 24 24" stroke-width="1.7" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                <path d="M4 20h4l10.5 -10.5a1.5 1.5 0 0 0 -4 -4l-10.5 10.5v4"></path>
+                <line x1="13.5" y1="6.5" x2="17.5" y2="10.5"></line>
+            </symbol>
+            <symbol id="icon-link2" viewBox="0 0 24 24" stroke-width="1.7" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                <path d="M9 15l6 -6"></path>
+                <path d="M11 6l.463 -.536a5 5 0 0 1 7.071 7.072l-.534 .464"></path>
+                <path d="M13 18l-.397 .534a5.068 5.068 0 0 1 -7.127 0a4.972 4.972 0 0 1 0 -7.071l.524 -.463"></path>
+            </symbol>
+            <symbol id="icon-cog" viewBox="0 0 24 24" stroke-width="1.4" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z" /><path d="M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0" />
+            </symbol>
+            <symbol id="icon-photo" viewBox="0 0 24 24" stroke-width="1.7" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M15 8h.01" /><path d="M3 6a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v12a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3v-12z" /><path d="M3 16l5 -5c.928 -.893 2.072 -.893 3 0l5 5" /><path d="M14 14l1 -1c.928 -.893 2.072 -.893 3 0l3 3" />
+            </symbol>
+            <symbol id="icon-minus2" viewBox="0 0 24 24" stroke-width="1.7" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                <path d="M5 12l14 0"></path>
+            </symbol>
             </defs>
         </svg>
 
@@ -105174,6 +105338,9 @@ class ContentStuff$1 {
         }
 
         /* Tool */
+
+
+        /*
         .is-tool.is-video-tool,
         .is-tool.is-audio-tool,
         .is-tool.is-iframe-tool {
@@ -105233,6 +105400,111 @@ class ContentStuff$1 {
         .is-tool.is-table-tool:hover {
             z-index:10001 !important
         }
+        */
+
+
+        .is-tool.is-video-tool, 
+        .is-tool.is-audio-tool,
+        .is-tool.is-iframe-tool {
+            background: rgba(255, 255, 255, 0.97) !important;
+            border: transparent 1px solid;
+            box-shadow: -1px 5px 8px 0px rgba(0, 0, 0, 0.08);
+            border-radius: 20px;
+        }
+
+        .is-tool.is-video-tool > div, 
+        .is-tool.is-video-tool > button, 
+        .is-tool.is-audio-tool > div, 
+        .is-tool.is-audio-tool > button, 
+        .is-tool.is-iframe-tool > div, 
+        .is-tool.is-iframe-tool > button {
+            width: 35px !important;
+            height: 35px !important;
+            background: transparent;
+        }
+
+        .is-tool.is-video-tool svg, 
+        .is-tool.is-audio-tool svg, 
+        .is-tool.is-iframe-tool svg {
+            width: 17px;
+            height: 17px;
+            fill: #111 !important;
+            color: #111 !important;
+        }
+
+        .is-tool.is-spacer-tool {
+            border: none;
+            box-shadow: -1px 5px 8px 0px rgba(0, 0, 0, 0.08);
+            border-radius: 20px;
+            overflow: hidden;
+        }
+        .is-tool.is-spacer-tool > button {
+            width: 40px;
+            height: 35px;
+            background: rgba(255, 255, 255, 0.97) !important;
+        }
+        .is-tool.is-spacer-tool > button svg {
+            fill: #111 !important;
+            color: #111 !important;
+        }
+        .is-tool.is-table-tool {
+            border: none;
+            background: none;
+            border-radius: 20px;
+            box-shadow: -1px 5px 8px 0px rgba(0, 0, 0, 0.08);
+        }
+        .is-tool.is-table-tool:hover {
+            z-index: 10001 !important;
+        }
+        .is-tool.is-table-tool > button {
+            width: 35px;
+            height: 35px;
+            background: rgba(255, 255, 255, 0.9) !important;
+        }
+        .is-tool.is-table-tool > button svg {
+            width: 17px !important;
+            height: 17px !important;
+            fill: #111 !important;
+            color: #111 !important;
+        }
+        .is-tool.is-code-tool, .is-tool.is-module-tool, .is-tool.is-svg-tool {
+            border: none;
+            background: none;
+            border-radius: 20px;
+            box-shadow: -1px 5px 8px 0px rgba(0, 0, 0, 0.08);
+            overflow: hidden;
+        }
+        .is-tool.is-code-tool > button, .is-tool.is-module-tool > button, .is-tool.is-svg-tool > button {
+            width: 35px;
+            height: 35px;
+            background: rgba(255, 255, 255, 0.9) !important;
+        }
+        .is-tool.is-code-tool > button svg, .is-tool.is-module-tool > button svg, .is-tool.is-svg-tool > button svg {
+            width: 17px !important;
+            height: 17px !important;
+            fill: #111 !important;
+            color: #111 !important;
+        }
+        .is-tool#divLinkTool, .is-tool#divButtonTool {
+            background: rgba(255, 255, 255, 0.95) !important;
+            box-shadow: none;
+            border-radius: 20px;
+            overflow: hidden;
+            box-shadow: -1px 5px 8px 0px rgba(0, 0, 0, 0.08);
+            margin-top: -10px;
+            margin-left: 7px;
+        }
+        .is-tool#divLinkTool button, .is-tool#divButtonTool button {
+            width: 37px;
+            height: 37px;
+            background: transparent !important;
+        }
+        .is-tool#divLinkTool button svg, .is-tool#divButtonTool button svg {
+            fill: #111 !important;
+            color: #111 !important;
+        }
+
+
 
 
         .dot {
@@ -105326,19 +105598,25 @@ class ContentStuff$1 {
         /* is-element-tool */
 
         .is-tool.is-element-tool {
-            background: rgba(243, 243, 243, 0.9);
             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.97) !important;
         } 
         .is-tool.is-element-tool button {
-            width: 25px; 
-            height: 25px;
+            width: 32px;
+            height: 31px;
             background: transparent;
+            color: #111;
         }
         .is-tool.is-element-tool svg {
             width: 14px;
             height: 14px;
-            fill: #111;
+            fill: #111 !important;
+            color: #111 !important;
         }
         .is-tool.is-element-tool .elm-more svg {
             width: 11px;
@@ -105410,8 +105688,8 @@ class ContentStuff$1 {
         }
 
         .is-tool.is-row-tool button {
-            width: 25px; 
-            height: 25px;
+            width: 28px; 
+            height: 28px;
             display: flex;
             justify-content: center;
             align-items: center;
@@ -105543,10 +105821,11 @@ class ContentStuff$1 {
             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;
@@ -105569,6 +105848,9 @@ class ContentStuff$1 {
             width: 14px;
             height: 14px;
         }
+        .is-tool.is-col-tool svg * { /* prevent override by .is-dark-text * */
+            color: #fff;
+        }
 
         
         .is-builder[gray] .is-tool.is-col-tool {
@@ -105682,6 +105964,9 @@ class ContentStuff$1 {
             width: 19px;
             height: 19px;
         }
+        .is-tool.is-row-tool svg * {  /* prevent override by .is-dark-text * */
+            color: #fff;
+        }
 
 
 
@@ -130630,7 +130915,7 @@ class Timeline {
                             -->
                             <div class="flex-wrap">
                                 <div class="flex-wrap" style="margin-right:15px;width: 120px;">
-                                    <select class="input-target">
+                                    <select class="input-target" id="_input_target">
                                         <option value="block">${out('Block')}</option>
                                         <option value="element">${out('Element')}</option>
                                         <option value="column">${out('Column')}</option>
@@ -138698,9 +138983,9 @@ class Box {
         // 1920<breakpoint
         prefix = 'is-content-';
       }
-    }
+    } // this.builder.editor.saveForUndo();
+
 
-    this.builder.editor.saveForUndo();
     const activeBox = this.builder.activeBox;
     const container = activeBox.querySelector('.is-container');
 
@@ -138726,9 +139011,8 @@ class Box {
       container.classList.add(prefix + targetWidth); // panelBox.querySelector('.val-box-size').innerHTML = targetWidth;
 
       callback(targetWidth);
-    }
+    } // this.builder.onChange();
 
-    this.builder.onChange();
   }
 
   clearContentWidth() {
@@ -152178,25 +152462,33 @@ class IframePanel {
   }
 
   hideTools() {
-    let elmTool = this.builder.doc.querySelector('.is-element-tool');
-    if (elmTool) elmTool.style.display = '';
-    let videoTool = this.builder.doc.querySelector('.is-video-tool');
-    if (videoTool) videoTool.style.display = '';
-    let audioTool = this.builder.doc.querySelector('.is-audio-tool');
-    if (audioTool) audioTool.style.display = '';
-    let iframeTool = this.builder.doc.querySelector('.is-iframe-tool');
-    if (iframeTool) iframeTool.style.display = '';
-    let moduleTool = this.builder.doc.querySelector('.is-module-tool');
-    if (moduleTool) moduleTool.style.display = '';
-    let lockIndicator = this.builder.doc.querySelector('.is-locked-indicator');
-    if (lockIndicator) lockIndicator.style.display = '';
-    let linkTool = this.builder.doc.querySelector('#divLinkTool');
-    if (linkTool) linkTool.style.display = '';
-    let spacerTool = this.builderStuff.querySelector('.is-spacer-tool');
-    if (spacerTool) spacerTool.style.display = '';
-    this.builder.editor.element.image.hideImageTool(); // this.builder.doc.querySelectorAll('.icon-active').forEach(elm => elm.classList.remove('icon-active'));
-    // this.builder.doc.querySelectorAll('.elm-inspected').forEach(elm => elm.classList.remove('elm-inspected'));
-    // this.builder.doc.querySelectorAll('.elm-active').forEach(elm => elm.classList.remove('elm-active'));
+    this.builder.addCustomStyle('_css_scale', `
+            .is-element-tool,
+            .is-video-tool,
+            .is-audio-tool,
+            .is-iframe-tool,
+            .is-module-tool,
+            .is-code-tool,
+            .is-svg-tool,
+            .is-table-tool,
+            .is-spacer-tool,
+            .is-locked-indicator,
+            .is-section-info,
+            #divButtonTool,
+            #divLinkTool {
+                opacity: 0 !important;
+            }
+
+            .row-active .is-col-tool,
+            .row-active .is-row-tool ,
+            .is-section-tool,
+            .is-box-tool {
+                opacity: 0 !important;
+            }
+        `);
+    this.builder.editor.element.image.hideImageTool();
+    let tool = this.builder.doc.querySelector('.row-active .is-col-tool');
+    if (tool) tool.style.display = 'none';
   }
 
   repositionTool() {
@@ -152210,6 +152502,10 @@ class IframePanel {
         }
       }, 600);
     }
+
+    setTimeout(() => {
+      this.builder.scaleTools(); // already include this.builder.removeCustomStyle('_css_scale');
+    }, 300);
   }
 
   repositionTool_bak() {
@@ -160789,7 +161085,7 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
                 <svg class="is-icon-flex"><use xlink:href="#ion-wrench"></use></svg>
             </button>
             <button type="button" class="btn-section-remove" tabindex="-1" data-title="${out('Remove')}" title="${out('Remove')}">
-                <svg class="is-icon-flex"><use xlink:href="#icon-close"></use></svg>
+                <svg class="is-icon-flex" style="width:18px;height:18px;margin-top:-3px;"><use xlink:href="#icon-trash2"></use></svg>
             </button>
         </div>`);
     this.defineLastBox(section);
@@ -161703,40 +161999,55 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
     this.positionTool(this.activeBox);
   }
 
-  hideTools() {
-    // hide tools
-    let tools = this.doc.querySelectorAll('.is-tool');
-    Array.prototype.forEach.call(tools, tool => {
-      tool.style.display = '';
-    });
-    tools = this.doc.querySelectorAll('.is-row-tool');
-    tools.forEach(tool => {
-      tool.style.display = 'none';
-    });
-    tools = this.doc.querySelectorAll('.is-rowadd-tool');
-    tools.forEach(tool => {
-      tool.style.opacity = 0;
-    });
-    tools = this.doc.querySelectorAll('.is-col-tool');
-    tools.forEach(tool => {
-      tool.style.display = 'none';
-    });
-  }
+  scaleTools() {
+    this.removeCustomStyle('_css_scale');
+    const div = document.querySelector('.is-content-view');
+    if (!div) return;
+    const transformStyle = window.getComputedStyle(div).transform;
+    const matrixValues = transformStyle.slice(7, -1).split(',');
+    let scaleValue = parseFloat(matrixValues[0]);
+    this.removeCustomStyle('_css_scale_apply');
+    this.addCustomStyle('_css_scale_apply', `
+            .is-section-tool {
+                transform: scale(${1 / scaleValue}) !important;;
+                transform-origin: top right !important;
+            }
+            .is-box-tool {
+                transform: scale(${1 / scaleValue}) !important;;
+                transform-origin: center bottomt !important;
+            }
+            .is-section-info {
+                transform: scale(${1 / scaleValue}) !important;;
+            }
 
-  showTools() {
-    this.editor.util.repositionColumnTool();
-    let tools = this.doc.querySelectorAll('.is-row-tool');
-    tools.forEach(tool => {
-      tool.style.display = '';
-    });
-    tools = this.doc.querySelectorAll('.is-rowadd-tool');
-    tools.forEach(tool => {
-      tool.style.opacity = '';
-    });
-    tools = this.doc.querySelectorAll('.is-col-tool');
-    tools.forEach(tool => {
-      tool.style.display = '';
-    });
+            .is-col-tool {
+                transform: scale(${1 / scaleValue}) !important;;
+                transform-origin: bottom left !important;
+
+            }
+            .is-row-tool {
+                transform: scale(${1 / scaleValue}) !important;;
+                transform-origin: top left !important;
+            }
+            .is-rowadd-tool button {
+                transform: scale(${1 / scaleValue}) !important;;
+            }
+
+            .is-element-tool,
+            .is-video-tool,
+            .is-audio-tool,
+            .is-iframe-tool,
+            .is-module-tool,
+            .is-code-tool,
+            .is-spacer-tool,
+            .is-svg-tool,
+            .is-table-tool,
+            .is-locked-indicator,
+            #divLinkTool, #divButtonTool {
+                transform: scale(${1 / scaleValue}) !important;;
+                transform-origin: top !important;
+            }
+        `);
   }
 
   positionTool(box) {
@@ -161842,18 +162153,31 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
           }
         }
       }
-    } // box info
+    } // tools scaling for iframe
 
 
-    const boxInfos = this.wrapperEl.querySelectorAll('.is-box-info');
-    boxInfos.forEach(tool => {
-      tool.style.display = 'none';
-    });
-    let boxInfo = box.querySelector('.is-box-info');
+    this.scaleTools();
+  }
+
+  addCustomStyle(styleId, cssContent) {
+    let existingStyle = this.doc.getElementById(styleId);
+
+    if (existingStyle) {
+      existingStyle.innerHTML = cssContent;
+    } else {
+      let style = this.doc.createElement('style');
+      style.type = 'text/css';
+      style.id = styleId;
+      style.innerHTML = cssContent;
+      this.doc.head.appendChild(style);
+    }
+  }
+
+  removeCustomStyle(styleId) {
+    let style = this.doc.getElementById(styleId);
 
-    if (boxInfo) {
-      boxInfo.style.display = 'flex';
-      boxInfo.style.transform = 'scale(' + 1 / zoom + ')';
+    if (style) {
+      this.doc.head.removeChild(style);
     }
   }