Update style/defaults/style.css

style/defaults/style.css

@@ -261,71 +261,151 @@ progress::-moz-progress-bar {
   box-sizing: border-box;
 }
 
-/* ----------- FLEX COLUMN FOR ALL CONTROLS AND COLOR BUTTONS ----------- */
-.viewer-controls {
+/* ----------- CONTROLS ROW + COLOR MENU BUTTON ----------- */
+.controls-row {
   position: absolute;
   top: 12px;
   right: 12px;
   display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  gap: 12px;
+  flex-direction: row;
+  align-items: flex-start;
   z-index: 1001;
 }
 @media (max-width: 600px) {
-  .viewer-controls {
+  .controls-row {
     top: 8px;
     right: 8px;
-    gap: 8px;
   }
 }
-/* All buttons inside stack the same! */
-.viewer-controls .widget-button,
-.viewer-controls .color-btn {
-  position: static !important; /* flex children, not absolute! */
-  margin: 0 !important;
-}
-
-/* --------- COLOR BUTTON STYLE: SQUARE, ROUNDED, MATCHING OTHERS --------- */
-.color-btn {
+.color-menu-btn {
   width: 32px;
   height: 32px;
+  background: linear-gradient(135deg, #fff 60%, #e1e1e1 100%);
+  border: 1.5px solid #ccc;
   border-radius: 8px;
-  border: 1px solid #ccc;
-  background: #fff;
-  outline: none;
-  transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
+  margin-right: 8px;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 2px 8px rgba(0,0,0,0.07);
-  z-index: 1001;
+  position: relative;
+  z-index: 1010;
+  transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
 }
-.color-btn:focus {
+.color-menu-btn.active,
+.color-menu-btn:focus {
   border-color: #4682B4;
   box-shadow: 0 0 0 2.5px #97b9d7;
 }
-.color-btn:hover {
-  background: #f7f7f7;
-  border-color: #888;
-  box-shadow: 0 3px 12px rgba(70,130,180,0.13);
+.color-menu-btn:after {
+  content: '';
+  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);
+}
+/* Optional: if you want a color palette icon, use background-image or emoji here */
+
+/* VERTICAL CONTROLS COLUMN */
+.vertical-controls {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
 }
-.color-btn[title="Blanc"] {
-  background: #fff;
+@media (max-width: 600px) {
+  .vertical-controls {
+    gap: 8px;
+  }
+}
+
+/* --------- STANDARD BUTTON STYLE --------- */
+.widget-button {
+  width: 32px;
+  height: 32px;
+  background-color: #F2F0EF;
   border: 1px solid #ccc;
+  border-radius: 8px;
+  cursor: pointer;
+  font-size: 16px;
+  color: #545454;
+  display: flex !important;
+  align-items: center;
+  justify-content: center;
+  transition: background-color 0.2s, border-color 0.2s;
+  z-index: 1000;
+  opacity: 1 !important;
+  visibility: visible !important;
+  margin: 0 0 0 0;
+}
+.widget-button:hover,
+.widget-button:focus {
+  background-color: rgba(242,240,239,0.85);
+  border-color: #888;
 }
-.color-btn[title="Rouge"] {
-  background: #d00;
-  border: 1px solid #b33;
+.fake-fullscreen .widget-button,
+:fullscreen .widget-button,
+:-webkit-full-screen .widget-button,
+:-moz-full-screen .widget-button,
+:-ms-fullscreen .widget-button { z-index: 10000; }
+
+/* COLOR PANEL STYLES */
+.color-panel {
+  display: none; /* JS toggles to flex */
+  position: absolute;
+  top: 38px;  /* Just below color button */
+  left: 0;
+  background: rgba(242,240,239,0.98);
+  border: 1px solid #bbb;
+  border-radius: 10px;
+  box-shadow: 0 6px 18px rgba(0,0,0,0.13);
+  padding: 12px 14px;
+  z-index: 2000;
+  flex-direction: row;
+  align-items: center;
+  gap: 10px;
+  min-width: 90px;
+  min-height: 32px;
+  margin-top: 2px;
+}
+@media (max-width: 600px) {
+  .color-panel {
+    padding: 8px 8px;
+    top: 30px;
+    left: 0;
+    min-width: 56px;
+    min-height: 24px;
+    gap: 6px;
+  }
 }
-/* More color-btn[title="..."] as needed */
 
+/* COLOR SWATCH BUTTONS */
+.color-swatch-btn {
+  width: 28px;
+  height: 28px;
+  border: 2px solid #ccc;
+  border-radius: 6px;
+  margin: 0;
+  cursor: pointer;
+  outline: none;
+  transition: border-color 0.15s, box-shadow 0.18s;
+  box-shadow: 0 1px 6px rgba(0,0,0,0.07);
+  display: inline-block;
+}
+.color-swatch-btn:focus,
+.color-swatch-btn:hover {
+  border-color: #4682B4;
+  box-shadow: 0 0 0 2px #97b9d7;
+}
 @media (max-width: 600px) {
-  .color-btn {
-    width: 24px;
-    height: 24px;
-    border-radius: 6px;
+  .color-swatch-btn {
+    width: 20px;
+    height: 20px;
+    border-radius: 4px;
   }
 }
 
@@ -349,38 +429,18 @@ progress::-moz-progress-bar {
   justify-content: center;
   padding: 0;
 }
-.widget-button {
-  width: 32px;
-  height: 32px;
-  background-color: #F2F0EF;
-  border: 1px solid #ccc;
-  border-radius: 8px;
-  cursor: pointer;
-  font-size: 16px;
-  color: #545454;
-  display: flex !important;
-  align-items: center;
-  justify-content: center;
-  transition: background-color 0.2s ease;
-  z-index: 1000;
-  opacity: 1 !important;
-  visibility: visible !important;
-  margin-right: 0;
-}
-.widget-button:hover { background-color: rgba(242,240,239,0.7); }
-.fake-fullscreen .widget-button,
-:fullscreen .widget-button,
-:-webkit-full-screen .widget-button,
-:-moz-full-screen .widget-button,
-:-ms-fullscreen .widget-button { z-index: 10000; }
-/* --- MOBILE adjustments for widget buttons --- */
 @media (max-width: 600px) {
-  .widget-button {
+  .widget-button, .color-menu-btn {
     width: 24px;
     height: 24px;
     font-size: 12px;
     border-radius: 6px;
   }
+  .color-menu-btn:after {
+    width: 10px;
+    height: 10px;
+    border-radius: 2px;
+  }
 }
 #application-canvas { width: 100%; height: 100%; display: block; }
 html, body { margin: 0; padding: 0; height: 100%; }