Update style/classical_style_template.css

style/classical_style_template.css

@@ -8,7 +8,6 @@
   padding-bottom: var(--aspect-percent);
   background: #fff;
   border: 1px solid #ccc;
-  /* Square corners only */
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
 }
 
@@ -20,7 +19,6 @@
   width: 100%;
   height: 100%;
   border: 1px solid #ccc;
-  /* Square corners */
   overflow: hidden;
   cursor: pointer;
   background: #f9f9f9;
@@ -41,7 +39,6 @@
   height: 100%;
   background: #fff;
   border: 0px solid #ccc;
-  /* Square corners */
   overflow: hidden;
   box-sizing: border-box;
 }
@@ -51,7 +48,6 @@
   width: 100%;
   height: 100%;
   display: block;
-  /* Background is set by JS using JSON */
 }
 
 /* Progress dialog styling */
@@ -63,17 +59,18 @@
   border: 1px solid #ccc;
   background: #c8c8c8;
   padding: 10px;
-  /* Square corners */
   z-index: 1000;
   display: none;
 }
 
-/* Menu (instructions) content styling */
+/* Instruction text (menu) styling */
+/* Positioned to the left of the help button */
 .menu-content {
   display: none;
   position: absolute;
-  top: 35px;
-  right: 10px;
+  right: 54px; /* Help button is at right: 4px with width:50px */
+  top: 50%;
+  transform: translateY(-50%);
   background: #c8c8c8;
   border: 1px solid #ccc;
   padding: 8px;
@@ -85,18 +82,21 @@
 .widget-button {
   width: 40px;
   height: 30px;
-  background-color: #c8c8c8;
+  background-color: #eeeef2;
   cursor: pointer;
   padding: 0;
+  margin: 0;
+  box-shadow: none;
   display: flex;
   align-items: center;
   justify-content: center;
   font-family: inherit;
   font-size: 16px;
   color: #333;
+  border: 1px solid #ccc;
 }
 
-/* Position buttons on the top right (grouped with no gap) */
+/* Positioning the three control buttons flush in the top–right corner */
 /* Close button: far right */
 .close-btn {
   position: absolute;
@@ -107,13 +107,13 @@
 .fullscreen-toggle {
   position: absolute;
   top: 0px;
-  right: 40px; /* 4px + 40px */
+  right: 40px;
 }
 /* Reset camera button: immediately to the left of fullscreen */
 .reset-camera-btn {
   position: absolute;
   top: 0px;
-  right: 80px; /* 4px + 40px + 40px */
+  right: 80px;
 }
 
 /* Help button: positioned in the middle on the right side of the canvas */
@@ -121,23 +121,42 @@
   position: absolute;
   top: 50%;
   right: 4px;
-  border-radius: 2;
   width: 50px;
   height: 40px;
   transform: translateY(-50%);
+  background-color: #eeeef2;
+  border: 1px solid #ccc;
+  cursor: pointer;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: inherit;
+  font-size: 16px;
+  color: #333;
+  box-shadow: none;
 }
 
-/* Hover effects */
-.close-btn:hover {
-  background-color: #d32f2f;
-  color: #fff;
+/* Button icons defined via pseudo-elements */
+.close-btn::before {
+  content: "✕";
 }
-.fullscreen-toggle:hover,
-.reset-camera-btn:hover {
-  background-color: #e0e0e0;
-  color: #333;
+.fullscreen-toggle::before {
+  content: "🗖";
+}
+.reset-camera-btn::before {
+  content: "⟲";
 }
+.help-toggle::before {
+  content: "?";
+}
+
+/* Hover effects for all buttons */
+.widget-button:hover,
+.close-btn:hover,
+.fullscreen-toggle:hover,
+.reset-camera-btn:hover,
 .help-toggle:hover {
-  background-color: #c0c0c0;  /* Darker on hover */
-  color: #000;
+  background-color: #ccd0d7;
+  color: #333;
 }