Update style/classical_style_template.css

style/classical_style_template.css

@@ -8,7 +8,7 @@
   padding-bottom: var(--aspect-percent);
   background: #fff;
   border: 1px solid #ccc;
-  /* Removed border-radius */
+  /* Square corners only */
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
 }
 
@@ -20,7 +20,7 @@
   width: 100%;
   height: 100%;
   border: 1px solid #ccc;
-  /* Removed border-radius */
+  /* Square corners */
   overflow: hidden;
   cursor: pointer;
   background: #f9f9f9;
@@ -41,7 +41,7 @@
   height: 100%;
   background: #fff;
   border: 1px solid #ccc;
-  /* Removed border-radius */
+  /* Square corners */
   overflow: hidden;
   box-sizing: border-box;
 }
@@ -51,6 +51,7 @@
   width: 100%;
   height: 100%;
   display: block;
+  /* Background is set by JS using JSON */
 }
 
 /* Progress dialog styling */
@@ -62,7 +63,7 @@
   border: 1px solid #ccc;
   background: #fff;
   padding: 10px;
-  /* Removed border-radius */
+  /* Square corners */
   z-index: 1000;
   display: none;
 }
@@ -78,99 +79,78 @@
   padding: 8px;
   font-size: 13px;
   color: #333;
-  /* Removed border-radius */
 }
 
-/* Common button styling */
+/* Shared base style for all buttons */
 .widget-button {
-  width: 36px;
-  height: 24px;
+  width: 40px;
+  height: 30px;
   background-color: #fff;
   border: 1px solid #ccc;
-  border-radius: 0;  /* Rectangular buttons */
+  border-radius: 0; /* Rectangular buttons */
   cursor: pointer;
   padding: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   font-family: inherit;
-  font-size: 14px;
+  font-size: 16px;
   color: #333;
 }
 
-/* Position buttons on the top right in order:
-   - Close (X) at far right
-   - Fullscreen to its left
-   - Reset camera next to fullscreen */
+/* Position buttons on the top right (grouped with no gap) */
+/* Close button: far right */
 .close-btn {
   position: absolute;
   top: 4px;
   right: 4px;
 }
+/* Fullscreen button: immediately to the left */
 .fullscreen-toggle {
   position: absolute;
   top: 4px;
-  right: 44px; /* 4px + 36px + 4px gap */
+  right: 44px; /* 4px + 40px */
 }
+/* Reset camera button: immediately to the left of fullscreen */
 .reset-camera-btn {
   position: absolute;
   top: 4px;
-  right: 84px; /* 4px + 36px + 4px + 36px + 4px gap */
+  right: 84px; /* 4px + 40px + 40px */
 }
 
-/* Help toggle: positioned in the right middle of the canvas */
+/* Help button: positioned in the middle on the right side of the canvas */
 .help-toggle {
   position: absolute;
   top: 50%;
   right: 4px;
   transform: translateY(-50%);
-  width: 36px;
-  height: 24px;
-  background-color: #fff;
-  border: 1px solid #ccc;
-  border-radius: 0;
-  cursor: pointer;
-  padding: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-family: inherit;
-  font-size: 14px;
-  color: #333;
 }
 
-/* Button Icons */
-/* Close button: "X" */
+/* Button Icons via pseudo-elements; each icon appears only once */
 .close-btn::before {
   content: "✕";
 }
-/* Fullscreen toggle: square icon */
 .fullscreen-toggle::before {
   content: "🗖";
 }
-/* Reset camera: refresh icon */
 .reset-camera-btn::before {
   content: "⟲";
 }
-/* Help toggle: question mark */
 .help-toggle::before {
   content: "?";
 }
 
-/* Hover effects for buttons */
+/* Hover effects */
 .close-btn:hover {
   background-color: #d32f2f;
   color: #fff;
 }
-.fullscreen-toggle:hover {
-  background-color: #e0e0e0;
-  color: #333;
-}
+.fullscreen-toggle:hover,
 .reset-camera-btn:hover {
   background-color: #e0e0e0;
   color: #333;
 }
 .help-toggle:hover {
-  background-color: #c0c0c0;  /* Darker when hovered */
+  background-color: #c0c0c0;  /* Darker on hover */
   color: #000;
 }