Update style/classical_style_template.css

style/classical_style_template.css

@@ -1,4 +1,4 @@
-/* Classical Chrome-Like CSS */
+/* Classical Chrome-Like CSS (Updated) */
 
 /* Widget container styling */
 .ply-widget-container {
@@ -8,7 +8,7 @@
   padding-bottom: var(--aspect-percent);
   background: #fff;
   border: 1px solid #ccc;
-  border-radius: 4px;
+  /* Removed border-radius */
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
 }
 
@@ -20,7 +20,7 @@
   width: 100%;
   height: 100%;
   border: 1px solid #ccc;
-  border-radius: 4px;
+  /* Removed border-radius */
   overflow: hidden;
   cursor: pointer;
   background: #f9f9f9;
@@ -41,7 +41,7 @@
   height: 100%;
   background: #fff;
   border: 1px solid #ccc;
-  border-radius: 4px;
+  /* Removed border-radius */
   overflow: hidden;
   box-sizing: border-box;
 }
@@ -51,7 +51,6 @@
   width: 100%;
   height: 100%;
   display: block;
-  /* Background is set by JS using JSON */
 }
 
 /* Progress dialog styling */
@@ -63,7 +62,7 @@
   border: 1px solid #ccc;
   background: #fff;
   padding: 10px;
-  border-radius: 4px;
+  /* Removed border-radius */
   z-index: 1000;
   display: none;
 }
@@ -76,26 +75,33 @@
   right: 10px;
   background: #fff;
   border: 1px solid #ccc;
-  border-radius: 4px;
   padding: 8px;
   font-size: 13px;
   color: #333;
+  /* Removed border-radius */
 }
 
 /* Common button styling */
 .widget-button {
-  width: 28px;
-  height: 28px;
-  background-color: transparent;
-  border: none;
+  width: 36px;
+  height: 24px;
+  background-color: #fff;
+  border: 1px solid #ccc;
+  border-radius: 0;  /* Rectangular buttons */
   cursor: pointer;
   padding: 0;
   display: flex;
   align-items: center;
   justify-content: center;
+  font-family: inherit;
+  font-size: 14px;
+  color: #333;
 }
 
-/* Position buttons as a group on the top right */
+/* Position buttons on the top right in order:
+   - Close (X) at far right
+   - Fullscreen to its left
+   - Reset camera next to fullscreen */
 .close-btn {
   position: absolute;
   top: 4px;
@@ -104,61 +110,67 @@
 .fullscreen-toggle {
   position: absolute;
   top: 4px;
-  right: 38px;
+  right: 44px; /* 4px + 36px + 4px gap */
 }
-.help-toggle {
+.reset-camera-btn {
   position: absolute;
   top: 4px;
-  right: 72px;
+  right: 84px; /* 4px + 36px + 4px + 36px + 4px gap */
 }
-.reset-camera-btn {
+
+/* Help toggle: positioned in the right middle of the canvas */
+.help-toggle {
   position: absolute;
-  top: 4px;
-  right: 106px;
+  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;
 }
 
-/* Close button: simple "X" with red hover (Chrome-like) */
+/* Button Icons */
+/* Close button: "X" */
 .close-btn::before {
   content: "✕";
-  font-size: 16px;
-  color: #333;
-}
-.close-btn:hover::before {
-  color: #d32f2f;
 }
-
 /* Fullscreen toggle: square icon */
 .fullscreen-toggle::before {
   content: "🗖";
-  font-size: 14px;
-  color: #333;
 }
-.fullscreen-toggle:hover::before {
-  color: #555;
+/* Reset camera: refresh icon */
+.reset-camera-btn::before {
+  content: "⟲";
 }
-
-/* Help toggle: question mark for extra info */
+/* Help toggle: question mark */
 .help-toggle::before {
   content: "?";
-  font-size: 16px;
-  color: #333;
-}
-.help-toggle:hover::before {
-  color: #0078d7;
 }
 
-/* Reset camera: refresh icon */
-.reset-camera-btn::before {
-  content: "⟲";
-  font-size: 16px;
+/* Hover effects for buttons */
+.close-btn:hover {
+  background-color: #d32f2f;
+  color: #fff;
+}
+.fullscreen-toggle:hover {
+  background-color: #e0e0e0;
   color: #333;
 }
-.reset-camera-btn:hover::before {
-  color: #0078d7;
+.reset-camera-btn:hover {
+  background-color: #e0e0e0;
+  color: #333;
 }
-
-/* Optionally adjust icon alignment */
-.reset-icon {
-  display: inline-block;
-  transform: translateY(-2px);
+.help-toggle:hover {
+  background-color: #c0c0c0;  /* Darker when hovered */
+  color: #000;
 }