Update style/defaults/style.css

style/defaults/style.css

@@ -107,7 +107,153 @@ progress::-moz-progress-bar {
   background-color: #4682B4;
   border-radius: 10px;
 }
-/* Menu (instructions) content styling */
+
+/* -------- BUTTONS ROW --------- */
+.controls-row {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 12px; /* Uniform gap for ALL buttons, including color */
+  z-index: 1001;
+}
+@media (max-width: 600px) {
+  .controls-row {
+    top: 8px;
+    right: 8px;
+    gap: 6px;
+  }
+}
+
+.widget-button,
+.color-menu-btn {
+  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, box-shadow 0.18s;
+  z-index: 1000;
+  opacity: 1 !important;
+  visibility: visible !important;
+  margin: 0;
+  box-sizing: border-box;
+  position: relative;
+}
+.widget-button:focus,
+.color-menu-btn:focus,
+.widget-button:hover,
+.color-menu-btn:hover {
+  background-color: rgba(242,240,239,0.85);
+  border-color: #888;
+  outline: none;
+}
+.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 MENU BUTTON (palette icon) ---- */
+.color-menu-btn {
+  background: linear-gradient(135deg, #fff 60%, #e1e1e1 100%);
+  border: 1.5px solid #ccc;
+}
+.color-menu-btn.active,
+.color-menu-btn:focus {
+  border-color: #4682B4;
+  box-shadow: 0 0 0 2px #97b9d7;
+}
+.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);
+}
+@media (max-width: 600px) {
+  .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;
+  }
+}
+
+/* --------- COLOR PANEL STYLES --------- */
+.color-panel {
+  display: none;
+  position: absolute;
+  top: 38px;  /* Just below the buttons row */
+  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;
+  }
+}
+
+/* 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-swatch-btn {
+    width: 20px;
+    height: 20px;
+    border-radius: 4px;
+  }
+}
+
+/* --------- KEEP ALL EXISTING UI STYLES BELOW --------- */
 .menu-content {
   display: none;
   position: absolute;
@@ -139,8 +285,6 @@ progress::-moz-progress-bar {
   background: #e7e7e7;
   border-radius: 8px;
 }
-
-/* CLOSE BUTTON for menu-content - match tooltip-close style */
 .menu-content .help-close {
   position: absolute;
   top: 12px;
@@ -168,8 +312,6 @@ progress::-moz-progress-bar {
   background: #e0e0e0;
   outline: none;
 }
-
-/* --------- TOOLTIP PANEL ----------- */
 .tooltip-panel {
   position: absolute;
   top: 50%;
@@ -190,7 +332,7 @@ progress::-moz-progress-bar {
   flex-direction: column;
   align-items: flex-start;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
-  overflow: scroll !important;  /* Always show scrollbar */
+  overflow: scroll !important;
   scrollbar-gutter: stable both-edges;
   box-sizing: border-box;
 }
@@ -205,8 +347,6 @@ progress::-moz-progress-bar {
   background: #e7e7e7;
   border-radius: 8px;
 }
-
-/* Ensure content does not go under close button */
 .tooltip-content {
   width: 100%;
   max-width: 100%;
@@ -260,156 +400,49 @@ progress::-moz-progress-bar {
   object-fit: contain;
   box-sizing: border-box;
 }
-
-/* ----------- CONTROLS ROW + COLOR MENU BUTTON ----------- */
-.controls-row {
-  position: absolute;
-  top: 12px;
-  right: 12px;
-  display: flex;
-  flex-direction: row;
-  align-items: flex-start;
-  z-index: 1001;
-}
 @media (max-width: 600px) {
-  .controls-row {
+  .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;
   }
-}
-.color-menu-btn {
-  width: 32px;
-  height: 32px;
-  background: linear-gradient(135deg, #fff 60%, #e1e1e1 100%);
-  border: 1.5px solid #ccc;
-  border-radius: 8px;
-  margin-right: 8px;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.07);
-  position: relative;
-  z-index: 1010;
-  transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
-}
-.color-menu-btn.active,
-.color-menu-btn:focus {
-  border-color: #4682B4;
-  box-shadow: 0 0 0 2.5px #97b9d7;
-}
-.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;
-}
-@media (max-width: 600px) {
-  .vertical-controls {
-    gap: 8px;
+  .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;
   }
-}
-
-/* --------- 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;
-}
-.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;
+  .tooltip-close {
+    top: 8px;
+    right: 8px;
+    width: 26px;
+    height: 26px;
+    font-size: 15px;
   }
-}
-
-/* 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-swatch-btn {
-    width: 20px;
-    height: 20px;
-    border-radius: 4px;
+  .tooltip-image {
+    max-height: 22vh;
   }
 }
 
-/* (Keep the rest of your original style.css below, unchanged...) */
 .help-close {
   position: absolute;
   top: 8px;
@@ -429,19 +462,7 @@ progress::-moz-progress-bar {
   justify-content: center;
   padding: 0;
 }
-@media (max-width: 600px) {
-  .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%; }
 .progress-dialog p { margin: 0; padding: 5px; }