Update style/style_template.css

style/style_template.css

@@ -6,6 +6,7 @@
   width: 100%;
   height: 0;
   /* padding-bottom is set dynamically inline for aspect ratio */
+  background-color: black; /* Background color set to black for PlayCanvas compatibility */
 }
 
 /* When in fake fullscreen mode (iOS fallback) */
@@ -17,6 +18,7 @@
   height: 100vh !important;
   padding-bottom: 0 !important;
   z-index: 9999 !important;
+  background-color: black;
 }
 
 /* GIF Preview styling */
@@ -30,6 +32,7 @@
   border-radius: 10px;
   overflow: hidden;
   cursor: pointer;
+  background-color: black;
 }
 
 .gif-preview-container img {
@@ -46,7 +49,7 @@
   left: 0;
   width: 100%;
   height: 100%;
-  background: #FEFEFD;
+  background: black; /* Changed to black for PlayCanvas */
   border: 1px solid #474558;
   border-radius: 10px;
   overflow: hidden;
@@ -58,6 +61,7 @@
   width: 100%;
   height: 100%;
   display: block;
+  background-color: transparent; /* Transparent background for PlayCanvas rendering */
 }
 
 /* Progress dialog styling (centered) */
@@ -67,11 +71,37 @@
   left: 50%;
   transform: translate(-50%, -50%);
   border: none;
-  background: rgba(255,255,255,0.9);
+  background: rgba(0,0,0,0.7); /* Darker background to match the black theme */
   padding: 20px;
   border-radius: 5px;
   z-index: 1000;
   display: none;
+  color: white;
+}
+
+/* Progress bar styling */
+progress {
+  width: 250px;
+  height: 15px;
+  appearance: none;
+  border: none;
+  border-radius: 10px;
+  overflow: hidden;
+}
+
+progress::-webkit-progress-bar {
+  background-color: #333;
+  border-radius: 10px;
+}
+
+progress::-webkit-progress-value {
+  background-color: #4682B4;
+  border-radius: 10px;
+}
+
+progress::-moz-progress-bar {
+  background-color: #4682B4;
+  border-radius: 10px;
 }
 
 /* Menu (instructions) content styling */
@@ -80,13 +110,13 @@
   position: absolute;
   top: 70px;
   right: 15px;
-  background: #FFFEF4;
+  background: rgba(0, 0, 0, 0.8);
   border: 1px solid #474558;
   border-radius: 5px;
   padding: 10px;
   font-size: 15px;
   line-height: 1.4;
-  color: #474558;
+  color: white;
 }
 
 /* Button styling */
@@ -94,15 +124,20 @@
   position: absolute;
   width: 45px;
   height: 45px;
-  background-color: #FFFEF4;
+  background-color: rgba(0, 0, 0, 0.6);
   border: 1px solid #474558;
   border-radius: 50%;
   cursor: pointer;
   font-size: 14px;
-  color: #474558;
+  color: white;
   display: flex;
   align-items: center;
   justify-content: center;
+  transition: background-color 0.2s ease;
+}
+
+.widget-button:hover {
+  background-color: rgba(70, 130, 180, 0.5);
 }
 
 /* Specific button positions */
@@ -168,3 +203,23 @@
   top: 11px;
   right: 82px;  /* 123px * approx 0.67 */
 }
+
+/* Additional styles for PlayCanvas compatibility */
+#application-canvas {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+html, body {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  overflow: hidden;
+}
+
+/* Error message styling */
+.progress-dialog p {
+  margin: 0;
+  padding: 5px;
+}