Update app.py

app.py

@@ -426,12 +426,11 @@ T = \left(\frac{(1 - A) \times L}{16 \pi \sigma \, d^2}\right)^{\frac{1}{4}} - 2
 css_code = """
 body {
     /* ลบการกำหนดสีพื้นหลัง */
-    /* background-color: #F9FBFF; */
+    background-color: transparent !important;
+    color: var(--text-color) !important;
     font-family: "Kanit", sans-serif;
-    /* ใช้ตัวแปรสีสำหรับพื้นหลัง */
-    background-color: var(--background-color);
-    color: var(--text-color);
 }
+
 #title {
     color: #4A90E2;
     text-align: center;
@@ -440,40 +439,44 @@ body {
     margin-bottom: 10px;
     font-weight: bold;
 }
+
 .game-desc {
     margin: 0 auto;
     width: 90%;
     /* ลบการกำหนดสีพื้นหลัง */
-    /* background-color: #ECF6FF; */
+    background-color: transparent !important;
     border: 2px dashed #B3DAFF;
     border-radius: 10px;
     padding: 15px;
     /* เปลี่ยนสีข้อความให้เข้ากับธีม */
-    color: var(--text-color, #333);
+    color: var(--text-color, #333) !important;
     margin-bottom: 20px;
 }
+
 .btn-main {
-    background-color: #FFE066;
-    border: 2px solid #FFCA28;
+    background-color: #FFE066 !important;
+    border: 2px solid #FFCA28 !important;
     font-weight: bold;
     font-size: 1.1rem;
     padding: 10px 30px;
     border-radius: 10px;
     margin-right: 10px;
 }
+
 #child-summary, #detail-th, #prompt1-en, #prompt2-en, #prompt3-en, #formula-box {
     /* ลบการกำหนดสีพื้นหลัง */
-    /* background-color: #FFFDF5; */
-    border: 2px solid #FFE082;
+    background-color: transparent !important;
+    border: 2px solid #FFE082 !important;
     border-radius: 10px;
     padding: 10px;
     margin-bottom: 20px;
     /* เปลี่ยนสีข้อความให้เข้ากับธีม */
-    color: var(--text-color, #333);
+    color: var(--text-color, #333) !important;
 }
+
 .copy-btn {
-    background-color: #F06292; 
-    border: 2px solid #E91E63; 
+    background-color: #F06292 !important; 
+    border: 2px solid #E91E63 !important; 
     font-weight: bold; 
     font-size: 0.8rem; 
     padding: 5px 10px; 
@@ -483,14 +486,19 @@ body {
 
 /* ตัวแปรสีสำหรับธีม */
 :root {
-    --background-color: #FFFFFF;
+    --background-color: transparent;
     --text-color: #333333;
 }
 
 [data-theme="dark"] {
-    --background-color: #121212;
+    --background-color: transparent;
     --text-color: #FFFFFF;
 }
+
+/* เพิ่มการลบสีพื้นหลังจาก Gradio containers */
+.gradio-container, .gradio-blocks, .gradio-row, .gradio-column, .gradio-component {
+    background-color: transparent !important;
+}
 """
 
 def show_formula(state):