Update style/defaults/style.css

style/defaults/style.css

@@ -163,26 +163,31 @@ progress::-moz-progress-bar {
 :-moz-full-screen .widget-button,
 :-ms-fullscreen .widget-button { z-index: 10000; }
 
-/* ---- COLOR MENU BUTTON (palette icon) ---- */
+/* ---- COLOR MENU BUTTON (palette image) ---- */
 .color-menu-btn {
   background: linear-gradient(135deg, #fff 60%, #e1e1e1 100%);
   border: 1.5px solid #ccc;
+  padding: 0 !important;
+  overflow: hidden;
 }
 .color-menu-btn.active,
 .color-menu-btn:focus {
   border-color: #4682B4;
   box-shadow: 0 0 0 2px #97b9d7;
 }
-.color-menu-btn:after {
-  content: '';
+
+/* Palette image inside color-menu-btn */
+.palette-btn-img {
+  width: 19px;
+  height: 19px;
   display: block;
-  width: 15px;
-  height: 15px;
-  margin: auto;
-  background: linear-gradient(135deg, #fff 60%, #d00 100%);
-  border-radius: 3px;
-  border: 1px solid #bbb;
-  box-shadow: 0 1px 4px rgba(0,0,0,0.07);
+  margin: 0 auto;
+  pointer-events: none;
+  /* Center vertically and horizontally */
+  vertical-align: middle;
+  /* Optional: sharp on all screens */
+  image-rendering: auto;
+  object-fit: contain;
 }
 @media (max-width: 600px) {
   .widget-button, .color-menu-btn {
@@ -191,10 +196,9 @@ progress::-moz-progress-bar {
     font-size: 12px;
     border-radius: 6px;
   }
-  .color-menu-btn:after {
-    width: 10px;
-    height: 10px;
-    border-radius: 2px;
+  .palette-btn-img {
+    width: 15px;
+    height: 15px;
   }
 }
 
@@ -230,9 +234,23 @@ progress::-moz-progress-bar {
   }
 }
 
+/* Inline palette icon in help text */
 .inline-palette {
   display: inline-block;
   vertical-align: middle;
+  width: 18px;
+  height: 18px;
+  margin-bottom: -3px; /* aligns nicely with text */
+  margin-left: 2px;
+  margin-right: 2px;
+  object-fit: contain;
+}
+@media (max-width: 600px) {
+  .inline-palette {
+    width: 14px;
+    height: 14px;
+    margin-bottom: -2px;
+  }
 }
 
 /* COLOR SWATCH BUTTONS */
@@ -249,7 +267,6 @@ progress::-moz-progress-bar {
   display: inline-block;
   /* Remove excessive gap, let the container handle spacing */
 }
-
 @media (max-width: 600px) {
   .color-swatch-btn {
     width: 20px;
@@ -258,8 +275,6 @@ progress::-moz-progress-bar {
   }
 }
 
-
-
 .menu-content {
   display: none;
   position: absolute;