@innovastudio/contentbox 1.6.74 → 1.6.76

package/public/contentbox/contentbox.esm.js

@@ -8889,11 +8889,9 @@ class Text {
 
     if (text.trim() === '') {
       elm.style.color = color;
-      elm.style.backgroundClip = '';
     } else {
       if (elm.innerText === text) {
         elm.style.color = color;
-        elm.style.backgroundClip = '';
       } else {
         this.builder.doc.execCommand('ForeColor', false, color); //Cleanup FONTs
 
@@ -10839,13 +10837,17 @@ class PanelText {
         // remove gradient if exists
         let elm = this.text.getElm();
 
-        if (elm.style.backgroundImage) {
+        if (color !== '' && elm.style.backgroundImage) {
           elm.style.backgroundImage = '';
           elm.style.backgroundClip = ''; // set gradient preview none
 
           btnGradient.style.backgroundImage = '';
         }
 
+        if (color === '' && elm.style.backgroundImage && elm.style.backgroundImage.includes('linear-gradient')) {
+          color = 'transparent'; // needed by gradient
+        }
+
         this.text.setTextColor(color);
         btnColor.style.backgroundColor = color; // preview
         // this.builder.onChange();
@@ -10866,9 +10868,10 @@ class PanelText {
 
           btnColor.style.backgroundColor = '';
         } else {
-          // remove gradient
+          // clear gradient
           elm.style.backgroundClip = '';
-          elm.style.color = ''; // set text color preview back
+          elm.style.backgroundImage = '';
+          if (elm.style.color === 'transparent') elm.style.color = ''; // set text color preview back
 
           setTimeout(() => {
             let currentColor = this.text.getStyle(elm, 'color');
@@ -13508,6 +13511,7 @@ class PanelBox {
     }); // Background Color
 
     const btnColorPick = panel.querySelector('.btn-color');
+    const btnGradient = panel.querySelector('.btn-gradient');
     btnColorPick.addEventListener('click', () => {
       this.builder.editor.saveForUndo(true); // checkLater = true
 
@@ -13518,12 +13522,19 @@ class PanelBox {
         activeBox.style.backgroundColor = ''; // backward compatibility (to clear bg color)
 
         this.box.setBoxBgColor(s);
+        let overlay = activeBox.querySelector('.is-overlay');
+
+        if (s !== '' && overlay.style.backgroundImage && overlay.style.backgroundImage.includes('gradient')) {
+          overlay.style.backgroundImage = ''; // remove gradient
+
+          btnGradient.style.backgroundImage = ''; // remove gradient preview
+        }
+
         btnColorPick.style.backgroundColor = s; // preview
 
         this.builder.onChange();
       }, bgcolor, () => {}, btnColorPick, true); // overlay=true
     });
-    const btnGradient = panel.querySelector('.btn-gradient');
     btnGradient.addEventListener('click', () => {
       this.builder.editor.saveForUndo(true); // checkLater = true
 
@@ -13533,8 +13544,10 @@ class PanelBox {
       gradientPicker.open(overlay, () => {
         activeBox.style.backgroundImage = ''; // backward compatibility (to clear gradient)
 
-        this.builder.onChange();
-        btnGradient.style.backgroundImage = overlay.style.backgroundImage;
+        if (overlay.style.backgroundImage && overlay.style.backgroundImage.includes('linear-gradient')) {
+          overlay.style.backgroundColor = '';
+          btnColorPick.style.backgroundColor = ''; // remove bg color preview
+        }
       }, () => {}, btnGradient, true); // overlay=true
     }); // Module
 
@@ -15270,7 +15283,7 @@ class PanelBlock {
       colorpicker.open(s => {
         blockOverlay.style.backgroundColor = s;
 
-        if (blockOverlay.style.backgroundImage && blockOverlay.style.backgroundImage.includes('gradient')) {
+        if (s !== '' && blockOverlay.style.backgroundImage && blockOverlay.style.backgroundImage.includes('gradient')) {
           blockOverlay.style.backgroundImage = ''; // remove gradient
 
           btnGradient.style.backgroundImage = ''; // preview
@@ -15287,12 +15300,14 @@ class PanelBlock {
       let blockOverlay = this.blockOverlay();
       let gradientPicker = this.builder.editor.gradientpicker();
       gradientPicker.open(blockOverlay, () => {
-        blockOverlay.style.backgroundColor = '';
-        btnColorPick.style.backgroundColor = ''; // preview
-
         this.updatePanelImage('');
-        this.builder.onChange();
-        btnGradient.style.backgroundImage = blockOverlay.style.backgroundImage; // preview
+
+        if (blockOverlay.style.backgroundImage && blockOverlay.style.backgroundImage.includes('linear-gradient')) {
+          blockOverlay.style.backgroundColor = '';
+          btnColorPick.style.backgroundColor = ''; // preview
+        }
+
+        btnGradient.style.backgroundImage = blockOverlay.style.backgroundImage; // needed because updatePanelImage clear it
       }, () => {}, btnGradient, true); // overlay=true
     }); // Background Image
 
@@ -16225,6 +16240,7 @@ class PanelSection {
     }); // Background Color
 
     const btnColorPick = panel.querySelector('.btn-color');
+    const btnGradient = panel.querySelector('.btn-gradient');
     btnColorPick.addEventListener('click', () => {
       this.builder.editor.saveForUndo(true); // checkLater = true
 
@@ -16239,10 +16255,15 @@ class PanelSection {
         this.section.setSectionBgColor(s);
         btnColorPick.style.backgroundColor = s; // preview
 
+        if (s !== '') {
+          section.style.backgroundImage = ''; //remove gradient
+
+          btnGradient.style.backgroundImage = '';
+        }
+
         this.builder.onChange();
       }, bgcolor, () => {}, btnColorPick, true);
     });
-    const btnGradient = panel.querySelector('.btn-gradient');
     btnGradient.addEventListener('click', () => {
       this.builder.editor.saveForUndo(true); // checkLater = true
 
@@ -16250,8 +16271,11 @@ class PanelSection {
       let gradientPicker = this.builder.editor.gradientpicker();
       gradientPicker.open(section, () => {
         this.section.clearOverlayBg();
-        this.builder.onChange();
-        btnGradient.style.backgroundImage = section.style.backgroundImage;
+
+        if (section.style.backgroundImage && section.style.backgroundImage.includes('linear-gradient')) {
+          section.style.backgroundColor = '';
+          btnColorPick.style.backgroundColor = ''; // preview
+        }
       }, () => {}, btnGradient, true); // overlay=true
     }); // Animation 
 
@@ -16913,6 +16937,7 @@ class PanelColumn {
     }); // Background Color
 
     const btnColorPick = panel.querySelector('.btn-color');
+    const btnGradient = panel.querySelector('.btn-gradient');
     btnColorPick.addEventListener('click', () => {
       this.builder.editor.saveForUndo(true); // checkLater = true
 
@@ -16921,22 +16946,31 @@ class PanelColumn {
       const colorpicker = this.builder.editor.colorpicker();
       colorpicker.open(s => {
         activeColumn.style.backgroundColor = s;
-        activeColumn.style.backgroundImage = ''; // remove gradient
-
         btnColorPick.style.backgroundColor = s; // preview
 
+        if (s !== '' && activeColumn.style.backgroundImage && activeColumn.style.backgroundImage.includes('gradient')) {
+          activeColumn.style.backgroundImage = ''; // remove gradient
+
+          btnGradient.style.backgroundImage = ''; // remove gradient preview
+
+          this.imagePreview.innerHTML = '';
+        }
+
         this.builder.onChange();
       }, bgcolor, () => {}, btnColorPick, true); // overlay=true
     });
-    const btnGradient = panel.querySelector('.btn-gradient');
     btnGradient.addEventListener('click', () => {
       this.builder.editor.saveForUndo(true); // checkLater = true
 
       let activeColumn = this.builder.controlpanel.activeColumn;
       let gradientPicker = this.builder.editor.gradientpicker();
       gradientPicker.open(activeColumn, () => {
-        this.builder.onChange();
-        btnGradient.style.backgroundImage = activeColumn.style.backgroundImage;
+        if (activeColumn.style.backgroundImage && activeColumn.style.backgroundImage.includes('linear-gradient')) {
+          activeColumn.style.backgroundColor = '';
+          btnColorPick.style.backgroundColor = ''; // remove bg color preview
+        }
+
+        this.updatePanelImage('');
       }, () => {}, btnGradient, true); // overlay=true
     }); // Text Color
 
@@ -17633,6 +17667,7 @@ class PanelColumn {
   }
 
   updateImage(src) {
+    const panel = this.panel;
     this.builder.editor.saveForUndo();
     let activeColumn = this.builder.controlpanel.activeColumn;
 
@@ -17646,6 +17681,8 @@ class PanelColumn {
 
     this.builder.editor.onChange();
     this.updatePanelImage(src);
+    const btnGradient = panel.querySelector('.btn-gradient');
+    btnGradient.style.backgroundImage = '';
   }
 
   clear() {
@@ -17903,6 +17940,7 @@ class PanelRow {
     }); // Background Color
 
     const btnColorPick = panel.querySelector('.btn-color');
+    const btnGradient = panel.querySelector('.btn-gradient');
     btnColorPick.addEventListener('click', () => {
       this.builder.editor.saveForUndo(true); // checkLater = true
 
@@ -17914,10 +17952,15 @@ class PanelRow {
         row.style.backgroundColor = s;
         btnColorPick.style.backgroundColor = s; // preview
 
+        if (s !== '' && row.style.backgroundImage && row.style.backgroundImage.includes('gradient')) {
+          row.style.backgroundImage = ''; // remove gradient
+
+          btnGradient.style.backgroundImage = ''; // remove gradient preview
+        }
+
         this.builder.onChange();
       }, bgcolor, () => {}, btnColorPick, true); // overlay=true
     });
-    const btnGradient = panel.querySelector('.btn-gradient');
     btnGradient.addEventListener('click', () => {
       const row = this.rowOverlay();
       if (!row) return;
@@ -17926,8 +17969,12 @@ class PanelRow {
       let gradientPicker = this.builder.editor.gradientpicker();
       gradientPicker.open(row, () => {
         this.updatePanelImage('');
-        this.builder.onChange();
-        btnGradient.style.backgroundImage = row.style.backgroundImage;
+
+        if (row.style.backgroundImage && row.style.backgroundImage.includes('linear-gradient')) {
+          row.style.backgroundColor = '';
+          btnColorPick.style.backgroundColor = ''; // remove bg color preview
+        } // btnGradient.style.backgroundImage = row.style.backgroundImage;
+
       }, () => {}, btnGradient, true); // overlay=true
     }); // Grid Settings
 
@@ -18317,6 +18364,11 @@ class PanelRow {
       btnClear.style.display = '';
       btnAdjust.style.display = '';
     }
+
+    if (src) {
+      const btnGradient = panel.querySelector('.btn-gradient');
+      btnGradient.style.backgroundImage = '';
+    }
   }
 
   rowOverlay() {
@@ -23417,6 +23469,12 @@ class Element$2 {
           elm.style[property] = s;
           btnPicker.style.backgroundColor = s; // preview
 
+          if (s !== '' && property === 'background-color') {
+            elm.style.backgroundImage = '';
+            const btnGradient = dialog.querySelector('.btn-gradient');
+            btnGradient.style.backgroundImage = '';
+          }
+
           this.builder.onChange();
         }, bgcolor, () => {}, btnPicker, true); //overlay=true
       });
@@ -23462,8 +23520,11 @@ class Element$2 {
       const elm = this.inspectedElement;
       let gradientPicker = this.builder.editor.gradientpicker();
       gradientPicker.open(elm, () => {
-        this.builder.onChange();
-        btnGradient.style.backgroundImage = elm.style.backgroundImage;
+        if (elm.style.backgroundImage && elm.style.backgroundImage.includes('linear-gradient')) {
+          elm.style.backgroundColor = '';
+          const btnColorPick = dialog.querySelector('.btn-bgcolor');
+          btnColorPick.style.backgroundColor = ''; // preview
+        }
       }, () => {}, btnGradient, true);
     }); // Responsive
 
@@ -74560,55 +74621,74 @@ class ButtonEditor {
       html: `
                 <a href="#" role="button" class="transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-2 mt-2 mb-1 pt-3 pb-3 px-11 uppercase font-normal leading-relaxed border-transparent rounded ml-0 mt-1 size-16 tracking-75 hover:border-transparent" style="color: rgb(0, 0, 0); background-color: rgb(254, 222, 76);">Get Started</a>
                 `
-    }, {
-      text: 'Order Now',
-      className: 'transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid rounded-full border-current ml-1 mr-1 px-8 py-2 text-pink-600 hover:text-white  bg-white hover:bg-pink-500 hover:border-transparent size-18 font-semibold tracking-75 leading-relaxed'
-    }, {
-      text: 'Explore',
-      className: 'transition-all inline-block whitespace-nowrap cursor-pointer no-underline font-semibold border-2 border-solid tracking-200 rounded-full border-current size-12 ml-1 mr-1 py-0 px-3 text-indigo-600 hover:text-white bg-white hover:bg-indigo-500 hover:border-transparent leading-relaxed'
-    }, {
-      text: 'View Demo',
-      className: 'transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid border-transparent ml-1 mr-1 hover:border-transparent rounded bg-gray-200 hover:bg-gray-300 size-16 py-1 px-5 font-normal tracking-wide text-gray-800 leading-relaxed'
-    }, {
-      text: 'Get Started',
-      className: 'transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid ml-1 mr-1 rounded size-16 text-black py-1 px-5 font-normal border-current hover: hover:border-current tracking-wide leading-relaxed'
-    }, {
-      text: 'Create',
-      className: 'transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid border-transparent ml-1 mr-1 hover:border-transparent size-12 rounded bg-yellow-300 text-black bg-white hover:bg-yellow-400 font-normal px-3 py-0 tracking-75 leading-relaxed'
-    }, {
-      text: 'Hello!',
-      className: 'transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid border-current ml-1 mr-1 hover:text-white hover:border-transparent rounded-lg size-24 font-normal py-2 tracking-150 px-12 text-orange-500 bg-white hover:bg-orange-500 leading-relaxed'
-    }, {
-      text: 'Build',
-      className: 'transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid border-transparent ml-1 mr-1 text-violet-700 hover:border-transparent hover:bg-cyan-200 rounded uppercase size-12 tracking-75 px-4 py-1 font-semibold bg-cyan-200 leading-relaxed'
-    }, {
-      text: 'Contact',
-      className: 'transition-all inline-block whitespace-nowrap border-2 border-solid rounded-none no-underline hover:border-transparent ml-1 mr-1 cursor-pointer bg-white text-red-600 border-current hover:bg-red-600 hover:text-white uppercase size-12 font-semibold py-2 px-6 tracking-150 leading-relaxed'
-    }, {
-      text: 'Read More',
-      className: 'transition-all inline-block whitespace-nowrap cursor-pointer border-2 border-solid border-transparent ml-1 mr-1 hover:border-transparent rounded size-16 py-1 px-5 font-normal tracking-wide text-gray-800 underline leading-relaxed'
-    }, {
-      text: 'Send a Message',
-      className: 'transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid ml-1 mr-1 rounded tracking-75 uppercase px-6 py-2 size-12 hover:border-transparent font-semibold bg-gray-200 border-transparent hover:bg-gray-300 text-gray-800 leading-relaxed'
-    }, {
-      text: 'Our Works',
-      className: 'transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid ml-1 mr-1 rounded tracking-75 uppercase px-6 py-2 size-12 border-current hover:text-white hover:border-transparent hover:bg-indigo-500 text-indigo-500 font-semibold leading-relaxed'
-    }, {
-      text: 'Read More',
-      className: 'transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-1 tracking-75 uppercase py-2 size-14 px-8 rounded font-normal ml-1 border-transparent bg-gray-200 hover:bg-gray-300 hover:border-transparent text-gray-800 leading-relaxed'
-    }, {
-      text: 'Get a Quote',
-      className: 'transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-1 tracking-75 uppercase py-2 size-14 px-8 border-current rounded text-black hover:border-current font-normal ml-1 leading-relaxed'
-    }, {
-      text: 'Try Demo',
-      className: 'transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid border-transparent hover:border-transparent bg-gray-200 hover:bg-gray-300 size-16 text-black font-normal uppercase py-3 px-11 tracking-75 mr-3 ml-0 rounded-md leading-relaxed'
-    }, {
-      text: 'Buy Now',
-      className: 'transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid size-16 tracking-75 font-normal uppercase px-11 py-3 hover:text-white hover:bg-teal-500 bg-teal-400 text-white border-transparent hover:border-transparent ml-0 mr-2 rounded-md leading-relaxed'
-    }, {
-      text: 'Play',
-      className: 'transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid ml-1 mr-1 size-16 text-black tracking-75 font-normal uppercase px-11 border-current hover:border-current py-3 rounded leading-relaxed'
-    }];
+    }
+
+    // {
+    //     text: 'Order Now',
+    //     className: 'transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid rounded-full border-current ml-1 mr-1 px-8 py-2 text-pink-600 hover:text-white  bg-white hover:bg-pink-500 hover:border-transparent size-18 font-semibold tracking-75 leading-relaxed'
+    // },
+    // {
+    //     text: 'Explore',
+    //     className: 'transition-all inline-block whitespace-nowrap cursor-pointer no-underline font-semibold border-2 border-solid tracking-200 rounded-full border-current size-12 ml-1 mr-1 py-0 px-3 text-indigo-600 hover:text-white bg-white hover:bg-indigo-500 hover:border-transparent leading-relaxed'
+    // },
+    // {
+    //     text: 'View Demo',
+    //     className: 'transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid border-transparent ml-1 mr-1 hover:border-transparent rounded bg-gray-200 hover:bg-gray-300 size-16 py-1 px-5 font-normal tracking-wide text-gray-800 leading-relaxed'
+    // },
+    // {
+    //     text: 'Get Started',
+    //     className: 'transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid ml-1 mr-1 rounded size-16 text-black py-1 px-5 font-normal border-current hover: hover:border-current tracking-wide leading-relaxed'
+    // },
+    // {
+    //     text: 'Create',
+    //     className: 'transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid border-transparent ml-1 mr-1 hover:border-transparent size-12 rounded bg-yellow-300 text-black bg-white hover:bg-yellow-400 font-normal px-3 py-0 tracking-75 leading-relaxed'
+    // },
+    // {
+    //     text: 'Hello!',
+    //     className: 'transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid border-current ml-1 mr-1 hover:text-white hover:border-transparent rounded-lg size-24 font-normal py-2 tracking-150 px-12 text-orange-500 bg-white hover:bg-orange-500 leading-relaxed'
+    // },
+    // {
+    //     text: 'Build',
+    //     className: 'transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid border-transparent ml-1 mr-1 text-violet-700 hover:border-transparent hover:bg-cyan-200 rounded uppercase size-12 tracking-75 px-4 py-1 font-semibold bg-cyan-200 leading-relaxed'
+    // },
+    // {
+    //     text: 'Contact',
+    //     className: 'transition-all inline-block whitespace-nowrap border-2 border-solid rounded-none no-underline hover:border-transparent ml-1 mr-1 cursor-pointer bg-white text-red-600 border-current hover:bg-red-600 hover:text-white uppercase size-12 font-semibold py-2 px-6 tracking-150 leading-relaxed'
+    // },
+    // {
+    //     text: 'Read More',
+    //     className: 'transition-all inline-block whitespace-nowrap cursor-pointer border-2 border-solid border-transparent ml-1 mr-1 hover:border-transparent rounded size-16 py-1 px-5 font-normal tracking-wide text-gray-800 underline leading-relaxed'
+    // },
+    // {
+    //     text: 'Send a Message',
+    //     className: 'transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid ml-1 mr-1 rounded tracking-75 uppercase px-6 py-2 size-12 hover:border-transparent font-semibold bg-gray-200 border-transparent hover:bg-gray-300 text-gray-800 leading-relaxed'
+    // },
+    // {
+    //     text: 'Our Works',
+    //     className: 'transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid ml-1 mr-1 rounded tracking-75 uppercase px-6 py-2 size-12 border-current hover:text-white hover:border-transparent hover:bg-indigo-500 text-indigo-500 font-semibold leading-relaxed'
+    // },
+    // {
+    //     text: 'Read More',
+    //     className: 'transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-1 tracking-75 uppercase py-2 size-14 px-8 rounded font-normal ml-1 border-transparent bg-gray-200 hover:bg-gray-300 hover:border-transparent text-gray-800 leading-relaxed'
+    // },
+    // {
+    //     text: 'Get a Quote',
+    //     className: 'transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid mr-1 tracking-75 uppercase py-2 size-14 px-8 border-current rounded text-black hover:border-current font-normal ml-1 leading-relaxed'
+    // },
+    // {
+    //     text: 'Try Demo',
+    //     className: 'transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid border-transparent hover:border-transparent bg-gray-200 hover:bg-gray-300 size-16 text-black font-normal uppercase py-3 px-11 tracking-75 mr-3 ml-0 rounded-md leading-relaxed'
+    // },
+    // {
+    //     text: 'Buy Now',
+    //     className: 'transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid size-16 tracking-75 font-normal uppercase px-11 py-3 hover:text-white hover:bg-teal-500 bg-teal-400 text-white border-transparent hover:border-transparent ml-0 mr-2 rounded-md leading-relaxed'
+    // },
+    // {
+    //     text: 'Play',
+    //     className: 'transition-all inline-block whitespace-nowrap cursor-pointer no-underline border-2 border-solid ml-1 mr-1 size-16 text-black tracking-75 font-normal uppercase px-11 border-current hover:border-current py-3 rounded leading-relaxed'
+    // },
+    ];
+
     let html = '';
     for (let i = 0; i < templates.length; i++) {
       if (templates[i].html) {
@@ -78291,6 +78371,11 @@ class RowTool {
           row.style.backgroundColor = color;
           elm.style.backgroundColor = color; // preview
 
+          if (color !== '') {
+            let btnRowGradient = rowSettings.querySelector('.input-row-gradient');
+            btnRowGradient.style.backgroundImage = '';
+            row.style.backgroundImage = '';
+          }
           this.builder.opts.onChange();
         }, rowSettings.querySelector('.input-row-bgcolor').style.backgroundColor, () => {
           btnRowBgColor.removeAttribute('data-focus');
@@ -78406,9 +78491,13 @@ class RowTool {
           div.innerHTML = '';
           const inpSrc = this.imageSource.querySelector('.input-src');
           inpSrc.value = '';
+          if (row.style.backgroundImage && row.style.backgroundImage.includes('linear-gradient')) {
+            const btnCellBgColor = this.rowSettings.querySelector('.input-row-bgcolor');
+            btnCellBgColor.style.backgroundColor = '';
+            row.style.backgroundColor = '';
+          }
 
-          //Trigger Change event
-          this.builder.opts.onChange();
+          // this.builder.opts.onChange();
         }, isChanged => {
           btnRowGradient.removeAttribute('data-focus');
           btnRowGradient.focus();
@@ -80008,6 +80097,11 @@ class ColumnTool {
           cell.style.backgroundColor = color;
           elm.style.backgroundColor = color; // preview
 
+          if (color !== '') {
+            let btnCellGradient = cellSettings.querySelector('.input-cell-gradient');
+            btnCellGradient.style.backgroundImage = '';
+            cell.style.backgroundImage = '';
+          }
           this.builder.opts.onChange();
         }, cellSettings.querySelector('.input-cell-bgcolor').style.backgroundColor, () => {
           btnCellBgColor.removeAttribute('data-focus');
@@ -80141,7 +80235,13 @@ class ColumnTool {
           div.innerHTML = '';
           const inpSrc = this.imageSource.querySelector('.input-src');
           inpSrc.value = '';
-          this.builder.opts.onChange();
+          if (cell.style.backgroundImage && cell.style.backgroundImage.includes('linear-gradient')) {
+            const btnCellBgColor = cellSettings.querySelector('.input-cell-bgcolor');
+            btnCellBgColor.style.backgroundColor = '';
+            cell.style.backgroundColor = '';
+          }
+
+          // this.builder.opts.onChange();
         }, isChanged => {
           btnCellGradient.removeAttribute('data-focus');
           btnCellGradient.focus();
@@ -81814,17 +81914,20 @@ class ElementGeneralStyles {
 
     // Background color
     let btnElmBgColor = panelStuff.querySelector('.input-elm-bgcolor');
-    btnElmBgColor.addEventListener('click', e => {
+    btnElmBgColor.addEventListener('click', () => {
       this.builder.uo.saveForUndo(true); // checkLater = true
 
-      let elm = e.target;
       this.builder.colorPicker.open(color => {
-        this.builder.inspectedElement.style.backgroundColor = color;
-        elm.style.backgroundColor = color; // preview
+        let elm = this.builder.inspectedElement;
+        elm.style.backgroundColor = color;
+        btnElmBgColor.style.backgroundColor = color; // preview
 
+        if (color !== '') {
+          let btnElmGradient = panelStuff.querySelector('.input-elm-gradient');
+          btnElmGradient.style.backgroundImage = '';
+          elm.style.backgroundImage = '';
+        }
         elementStyleEditor.refresh();
-
-        //Trigger Change event
         this.builder.opts.onChange();
       }, panelStuff.querySelector('.input-elm-bgcolor').style.backgroundColor, () => {
         btnElmBgColor.removeAttribute('data-focus');
@@ -81841,10 +81944,15 @@ class ElementGeneralStyles {
       this.builder.uo.saveForUndo(true); // checkLater = true
 
       gradientPicker.open(this.builder.inspectedElement, () => {
+        let elm = this.builder.inspectedElement;
+        if (elm.style.backgroundImage && elm.style.backgroundImage.includes('linear-gradient')) {
+          const btnElmBgColor = panelStuff.querySelector('.input-elm-bgcolor');
+          btnElmBgColor.style.backgroundColor = '';
+          elm.style.backgroundColor = '';
+        }
         elementStyleEditor.refresh();
 
-        //Trigger Change event
-        this.builder.opts.onChange();
+        // this.builder.opts.onChange();
       }, isChanged => {
         if (isChanged) {
           elementStyleEditor.refresh();
@@ -115852,10 +115960,15 @@ class BlockModal {
 
                 <div class="modal-page-content" style="display:none;padding-bottom:28px;">
 
-                    <div style="padding-bottom: 3px;">${util.out('Background Color')}:</div>
-                    <div style="display:flex;">
-                        <button title="${util.out('Background Color')}" class="input-page-bgcolor is-btn-color" style="margin-right:15px"></button>
-                        <button title="${util.out('Gradient')}" class="btn-page-gradient classic" data-value="+"> ${util.out('Gradient')} </button>
+                    <div style="display:flex;gap:40px">
+                        <div>
+                            <div style="padding-bottom: 3px;">${util.out('Background Color')}:</div>
+                            <button title="${util.out('Background Color')}" class="input-page-bgcolor is-btn-color" style="margin-right:15px"></button>
+                        </div>
+                        <div>
+                            <div style="padding-bottom: 3px;">${util.out('Gradient')}:</div>
+                            <button title="${util.out('Gradient')}" class="btn-page-gradient is-btn-color"></button>
+                        </div>
                     </div>
 
                     <div style="padding-top:20px;padding-bottom: 3px;">${util.out('Background Image')}:</div>
@@ -115922,10 +116035,15 @@ class BlockModal {
 
                     <div id="divBlockGeneral" class="is-tab-content active" data-group="blocksettings" style="display:flex" tabindex="-1" style="padding:25px 25px 28px">
 
-                        <div style="padding-bottom: 3px;">${util.out('Background Color')}:</div>
-                        <div style="display:flex;">
-                            <button title="${util.out('Background Color')}" class="input-block-bgcolor is-btn-color" style="margin-right:15px"></button>
-                            <button title="${util.out('Gradient')}" class="btn-block-gradient classic" data-value="+"> ${util.out('Gradient')} </button>
+                        <div style="display:flex;gap:40px">
+                            <div>
+                                <div style="padding-bottom: 3px;">${util.out('Background Color')}:</div>
+                                <button title="${util.out('Background Color')}" class="input-block-bgcolor is-btn-color" style="margin-right:15px"></button>
+                            </div>
+                            <div>
+                                <div style="padding-bottom: 3px;">${util.out('Gradient')}:</div>
+                                <button title="${util.out('Gradient')}" class="btn-block-gradient is-btn-color"></button>
+                            </div>
                         </div>
 
                         <div style="padding-top:20px;padding-bottom: 3px;">${util.out('Background Image')}:</div>
@@ -137867,7 +137985,7 @@ class Box {
   setBoxBgColor(s) {
     const activeBox = this.builder.activeBox;
     let overlay = activeBox.querySelector('.is-overlay');
-    overlay.style.backgroundColor = s; // overlay.style.backgroundImage = ''; // remove gradient
+    overlay.style.backgroundColor = s;
   } // Box Size
 
 
@@ -139841,7 +139959,6 @@ class Section {
     const activeSection = this.builder.activeSection;
     this.clearOverlayBg();
     activeSection.style.backgroundColor = s;
-    activeSection.style.backgroundImage = ''; //remove gradient
   }
 
   clearOverlayBg() {