Update style/style_template.css

style/style_template.css

@@ -1,15 +1,11 @@
+/* viewer.css */
+
 /* Widget container styling */
 .ply-widget-container {
   position: relative;
   width: 100%;
   height: 0;
-  padding-bottom: var(--aspect-percent);
-}
-
-.ply-widget-container:fullscreen,
-:-webkit-full-screen .ply-widget-container {
-  height: 100vh;
-  padding-bottom: 0;
+  /* padding-bottom is set dynamically inline for aspect ratio */
 }
 
 /* When in fake fullscreen mode (iOS fallback) */
@@ -35,6 +31,7 @@
   overflow: hidden;
   cursor: pointer;
 }
+
 .gif-preview-container img {
   width: 100%;
   height: 100%;
@@ -56,14 +53,14 @@
   box-sizing: border-box;
 }
 
-/* Canvas fills the viewer container. Background is now set by JS using JSON. */
+/* Canvas fills the viewer container */
 .ply-canvas {
   width: 100%;
   height: 100%;
   display: block;
 }
 
-/* Progress dialog styling (as a centered div) */
+/* Progress dialog styling (centered) */
 .progress-dialog {
   position: absolute;
   top: 50%;
@@ -108,7 +105,7 @@
   justify-content: center;
 }
 
-/* Positions: Close at top-left, fullscreen at top-right, help and reset buttons */
+/* Specific button positions */
 .close-btn {
   top: 17px;
   left: 15px;
@@ -134,7 +131,7 @@
   padding: 0;
 }
 
-/* Adjust the reset icon position: move it slightly upward */
+/* Adjust the reset icon position */
 .reset-icon {
   display: inline-block;
   transform: translateY(-3px);