Update style.css

style.css

@@ -1,4 +1,10 @@
-/* viewer.css - Modified to properly restore aspect ratio when exiting fullscreen */
+/* viewer.css - Updated button sizing, colors, fonts, tooltip background, and instructions panel styling */
+
+/* Apply a system sans-serif font stack to all viewer-related text */
+.ply-widget-container,
+.ply-widget-container * {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+}
 
 /* Widget container styling */
 .ply-widget-container {
@@ -20,7 +26,7 @@
   height: 100vh !important;
   padding-bottom: 0 !important;
   z-index: 9999 !important;
-  background-color: white;
+  background-color: black;
   border-radius: 0 !important;
   margin: 0 !important;
   max-width: 100vw !important;
@@ -35,7 +41,7 @@
   height: 100vh !important;
   padding-bottom: 0 !important;
   border-radius: 0 !important;
-  background-color: white;
+  background-color: black;
 }
 
 /* Vendor prefixes for fullscreen */
@@ -44,21 +50,21 @@
   height: 100vh !important;
   padding-bottom: 0 !important;
   border-radius: 0 !important;
-  background-color: white;
+  background-color: black;
 }
 .ply-widget-container:-moz-full-screen {
   width: 100vw !important;
   height: 100vh !important;
   padding-bottom: 0 !important;
   border-radius: 0 !important;
-  background-color: white;
+  background-color: black;
 }
 .ply-widget-container:-ms-fullscreen {
   width: 100vw !important;
   height: 100vh !important;
   padding-bottom: 0 !important;
   border-radius: 0 !important;
-  background-color: white;
+  background-color: black;
 }
 
 /* Viewer Container styling */
@@ -71,7 +77,7 @@
   bottom: 0;
   width: 100%;
   height: 100%;
-  background: white;
+  background: black;
   border: 1px solid #474558;
   border-radius: 10px;
   overflow: hidden;
@@ -160,27 +166,27 @@ progress::-moz-progress-bar {
   position: absolute;
   top: 70px;
   right: 15px;
-  background: rgba(0, 0, 0, 0.8);
+  background: #F2F0EF; /* Updated background color */
   border: 1px solid #474558;
-  border-radius: 5px;
+  border-radius: 6px;
   padding: 10px;
   font-size: 15px;
   line-height: 1.4;
-  color: white;
+  color: black;
   z-index: 1010;
 }
 
-/* Button styling with improved visibility */
+/* Button styling with updated dimensions, colors, and rounded corners */
 .widget-button {
   position: absolute;
-  width: 45px;
-  height: 45px;
-  background-color: rgba(0, 0, 0, 0.6);
+  width: 32px;   /* ~30% smaller than 45px */
+  height: 32px;  /* square */
+  background-color: #F2F0EF;  /* updated idle background */
   border: 1px solid #474558;
-  border-radius: 50%;
+  border-radius: 8px; /* gently rounded corners */
   cursor: pointer;
-  font-size: 14px;
-  color: white;
+  font-size: 16px;
+  color: black;
   display: flex !important;
   align-items: center;
   justify-content: center;
@@ -190,25 +196,14 @@ progress::-moz-progress-bar {
   visibility: visible !important;
 }
 .widget-button:hover {
-  background-color: rgba(70, 130, 180, 0.5);
+  background-color: rgba(242,240,239, 0.8); /* slightly darker on hover */
 }
 
-/* New: 📍 points-toggle button position */
+/* Position adjustments for the resized buttons */
 .points-toggle {
   top: 17px;
   right: 176px;
 }
-
-/* Ensure buttons remain visible in fullscreen */
-.fake-fullscreen .widget-button,
-:fullscreen .widget-button,
-:-webkit-full-screen .widget-button,
-:-moz-full-screen .widget-button,
-:-ms-fullscreen .widget-button {
-  z-index: 10000;
-}
-
-/* Specific button positions */
 .fullscreen-toggle {
   top: 17px;
   right: 15px;
@@ -216,12 +211,12 @@ progress::-moz-progress-bar {
 .help-toggle {
   top: 17px;
   right: 70px;
-  font-size: 22px;
+  font-size: 18px; /* slightly larger for visibility */
 }
 .reset-camera-btn {
   top: 17px;
   right: 123px;
-  font-size: 22px;
+  font-size: 18px;
   line-height: normal;
   padding: 0;
 }
@@ -229,17 +224,17 @@ progress::-moz-progress-bar {
 /* Adjust the reset icon position */
 .reset-icon {
   display: inline-block;
-  transform: translateY(-3px);
+  transform: translateY(-2px);
 }
 
 /* --- Mobile adjustments: when the widget container has the "mobile" class --- */
 .ply-widget-container.mobile .widget-button {
-  width: 30px;    /* 45px * 2/3 */
-  height: 30px;   /* 45px * 2/3 */
-  font-size: 10px; /* 14px * approx 0.67 */
+  width: 22px;    /* 32px * ~0.7 */
+  height: 22px;   /* square */
+  font-size: 12px; /* smaller font */
 }
 .ply-widget-container.mobile .help-toggle {
-  font-size: 15px; /* 22px * approx 0.67 */
+  font-size: 13px; /* smaller help icon */
 }
 /* Adjust button positions for mobile */
 .ply-widget-container.mobile .fullscreen-toggle {
@@ -303,14 +298,14 @@ html, body {
   pointer-events: none !important;
 }
 
-/* ─── NEW: Tooltip styling for info-points ─────────────────────────────────── */
+/* ─── Tooltip styling for info-points ─────────────────────────────────── */
 .point-tooltip {
   position: absolute;
   top: 50%;
   right: 5%;
   transform: translate(0%, -50%);
-  background: rgba(30, 30, 30, 0.9);
-  color: #fff;
+  background: #F2F0EF; /* updated background color */
+  color: #000;
   border: 1px solid #666;
   border-radius: 6px;
   padding: 15px;