Update style/defaults/style.css

style/defaults/style.css

@@ -264,66 +264,72 @@ progress::-moz-progress-bar {
 /* -------- COLOR BUTTONS --------- */
 .color-btn-container {
   position: absolute;
-  top: 40px;
-  right: 12px; /* Just after your other controls */
+  top: 52px; /* Just under the fullscreen button (which is at top: 12px, height: 32px, + margin) */
+  right: 12px;
   display: flex;
   flex-direction: column;
   gap: 8px;
   z-index: 1001;
-  pointer-events: none; /* Only the buttons catch pointer events */
+  pointer-events: none; /* Only buttons themselves catch pointer events */
 }
 .color-btn-container .color-btn {
   pointer-events: auto;
-  border-radius: 50%;
-  border: 2px solid #bbb;
+  /* Make them square with same size/shape as other .widget-button */
   width: 32px;
   height: 32px;
+  border-radius: 8px;
+  border: 1px solid #ccc;
+  background: #fff;
   margin: 0;
   padding: 0;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.07);
   outline: none;
-  transition: border-color 0.18s, box-shadow 0.18s;
+  transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.07);
 }
 .color-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);
+  box-shadow: 0 3px 12px rgba(70,130,180,0.13);
 }
+/* Color swatch backgrounds */
 .color-btn[title="Blanc"] {
   background: #fff;
-  border: 2px solid #bbb;
+  border: 1px solid #ccc;
 }
 .color-btn[title="Rouge"] {
   background: #d00;
-  border: 2px solid #b33;
+  border: 1px solid #b33;
 }
-/* If you add more colors, style them using [title="..."] selectors */
+/* Extend with more [title="..."] if you add more colors */
 
-.color-btn + .color-btn {
-  margin-top: 8px;
-}
 .viewer-container .color-btn-container {
   z-index: 1001;
 }
+.color-btn + .color-btn {
+  margin-top: 8px;
+}
 /* --- MOBILE adjustments for color buttons --- */
 @media (max-width: 600px) {
   .color-btn-container {
-    top: 30px;
-    right: 12px;
-    gap: 7px;
+    top: 40px; /* under mobile fullscreen toggle (height: 24px + gap) */
+    right: 8px;
+    gap: 6px;
   }
   .color-btn-container .color-btn {
     width: 24px;
     height: 24px;
+    border-radius: 6px;
   }
 }
+
 /* --------- END COLOR BUTTONS ----------- */
 
 /* --- MOBILE adjustments --- */