Update style/defaults/style.css

style/defaults/style.css

@@ -261,17 +261,38 @@ progress::-moz-progress-bar {
   box-sizing: border-box;
 }
 
-/* -------- COLOR BUTTONS --------- */
-.color-btn {
+/* ----------- FLEX COLUMN FOR ALL CONTROLS AND COLOR BUTTONS ----------- */
+.viewer-controls {
   position: absolute;
+  top: 12px;
   right: 12px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 12px;
+  z-index: 1001;
+}
+@media (max-width: 600px) {
+  .viewer-controls {
+    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 {
   width: 32px;
   height: 32px;
   border-radius: 8px;
   border: 1px solid #ccc;
   background: #fff;
-  margin: 0;
-  padding: 0;
   outline: none;
   transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
   cursor: pointer;
@@ -300,68 +321,15 @@ progress::-moz-progress-bar {
 }
 /* More color-btn[title="..."] as needed */
 
-/* --- MOBILE adjustments for color buttons --- */
 @media (max-width: 600px) {
   .color-btn {
     width: 24px;
     height: 24px;
     border-radius: 6px;
-    right: 8px;
   }
 }
 
-/* Position color buttons under the last top-right control button: */
-.color-btn.color-btn-0 { top: 52px; }  /* Under fullscreen (top:12px+32px+8px) */
-.color-btn.color-btn-1 { top: 92px; }  /* Next one down (52px+32px+8px) */
-@media (max-width: 600px) {
-  .color-btn.color-btn-0 { top: 40px; }
-  .color-btn.color-btn-1 { top: 66px; }
-}
-/* --------- END COLOR BUTTONS ----------- */
-
-/* --- MOBILE adjustments --- */
-@media (max-width: 600px) {
-  .menu-content {
-    width: 85vw;
-    max-height: 90%;
-    overflow: scroll !important;
-    scrollbar-gutter: stable both-edges;
-    padding: 40px 18px 14px;
-    font-size: 14px;
-  }
-  .menu-content .help-close {
-    top: 8px;
-    right: 8px;
-    width: 26px;
-    height: 26px;
-    font-size: 15px;
-  }
-  .tooltip-panel {
-    top: auto;
-    bottom: 8px;
-    left: 3vw;
-    right: 3vw;
-    transform: none;
-    width: auto;
-    max-width: 94vw;
-    min-width: 0;
-    max-height: 55%;
-    padding: 20px 10px 12px 10px;
-    font-size: 13.5px;
-    overflow: scroll !important;
-    scrollbar-gutter: stable both-edges;
-  }
-  .tooltip-close {
-    top: 8px;
-    right: 8px;
-    width: 26px;
-    height: 26px;
-    font-size: 15px;
-  }
-  .tooltip-image {
-    max-height: 22vh;
-  }
-}
+/* (Keep the rest of your original style.css below, unchanged...) */
 .help-close {
   position: absolute;
   top: 8px;
@@ -382,7 +350,6 @@ progress::-moz-progress-bar {
   padding: 0;
 }
 .widget-button {
-  position: absolute;
   width: 32px;
   height: 32px;
   background-color: #F2F0EF;
@@ -398,69 +365,23 @@ progress::-moz-progress-bar {
   z-index: 1000;
   opacity: 1 !important;
   visibility: visible !important;
-  margin-right: 8px;
+  margin-right: 0;
 }
 .widget-button:hover { background-color: rgba(242,240,239,0.7); }
-.fullscreen-toggle { top: 12px; right: 12px; }
-.help-toggle { top: 12px; right: 52px; font-size: 18px; }
-.reset-camera-btn { top: 12px; right: 92px; font-size: 18px; line-height: normal; padding: 0; }
-.tooltips-toggle { top: 12px; right: 132px; font-size: 18px; }
 .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 --- */
+/* --- MOBILE adjustments for widget buttons --- */
 @media (max-width: 600px) {
-  .menu-content {
-    width: 85vw;
-    max-height: 90%;
-    overflow: scroll !important;
-    scrollbar-gutter: stable both-edges;
-    padding: 40px 18px 14px;
-    font-size: 14px;
-  }
-  .menu-content .help-close {
-    top: 6px;
-    right: 6px;
-  }
-  .tooltip-panel {
-    top: auto;
-    bottom: 8px;
-    left: 3vw;
-    right: 3vw;
-    transform: none;
-    width: auto;
-    max-width: 94vw;
-    min-width: 0;
-    max-height: 85%;
-    padding: 20px 10px 12px 10px;
-    font-size: 13.5px;
-    overflow: scroll !important;
-    scrollbar-gutter: stable both-edges;
-  }
-  .tooltip-close {
-    top: 8px;
-    right: 8px;
-    width: 26px;
-    height: 26px;
-    font-size: 15px;
-  }
-  .tooltip-image {
-    max-height: 22vh;
+  .widget-button {
+    width: 24px;
+    height: 24px;
+    font-size: 12px;
+    border-radius: 6px;
   }
 }
-.ply-widget-container.mobile .widget-button {
-  width: 24px;
-  height: 24px;
-  font-size: 12px;
-}
-.ply-widget-container.mobile .help-toggle { font-size: 14px; }
-.ply-widget-container.mobile .fullscreen-toggle { top: 8px; right: 8px; }
-.ply-widget-container.mobile .help-toggle { top: 8px; right: 40px; }
-.ply-widget-container.mobile .reset-camera-btn { top: 8px; right: 72px; }
-.ply-widget-container.mobile .tooltips-toggle { top: 8px; right: 104px; }
-
 #application-canvas { width: 100%; height: 100%; display: block; }
 html, body { margin: 0; padding: 0; height: 100%; }
 .progress-dialog p { margin: 0; padding: 5px; }