Update app.py

app.py

@@ -432,44 +432,44 @@ body {
 }
 
 #title {
-    color: #4A90E2;
-    text-align: center;
-    font-size: 2rem;
-    margin-top: 20px;
-    margin-bottom: 10px;
-    font-weight: bold;
+    color: #4A90E2 !important;
+    text-align: center !important;
+    font-size: 2rem !important;
+    margin-top: 20px !important;
+    margin-bottom: 10px !important;
+    font-weight: bold !important;
 }
 
 .game-desc {
-    margin: 0 auto;
-    width: 90%;
+    margin: 0 auto !important;
+    width: 90% !important;
     /* ลบการกำหนดสีพื้นหลัง */
     background-color: transparent !important;
-    border: 2px dashed #B3DAFF;
-    border-radius: 10px;
-    padding: 15px;
+    border: 2px dashed #B3DAFF !important;
+    border-radius: 10px !important;
+    padding: 15px !important;
     /* เปลี่ยนสีข้อความให้เข้ากับธีม */
     color: var(--text-color, #333) !important;
-    margin-bottom: 20px;
+    margin-bottom: 20px !important;
 }
 
 .btn-main {
     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;
+    font-weight: bold !important;
+    font-size: 1.1rem !important;
+    padding: 10px 30px !important;
+    border-radius: 10px !important;
+    margin-right: 10px !important;
 }
 
 #child-summary, #detail-th, #prompt1-en, #prompt2-en, #prompt3-en, #formula-box {
     /* ลบการกำหนดสีพื้นหลัง */
     background-color: transparent !important;
     border: 2px solid #FFE082 !important;
-    border-radius: 10px;
-    padding: 10px;
-    margin-bottom: 20px;
+    border-radius: 10px !important;
+    padding: 10px !important;
+    margin-bottom: 20px !important;
     /* เปลี่ยนสีข้อความให้เข้ากับธีม */
     color: var(--text-color, #333) !important;
 }
@@ -477,11 +477,11 @@ body {
 .copy-btn {
     background-color: #F06292 !important; 
     border: 2px solid #E91E63 !important; 
-    font-weight: bold; 
-    font-size: 0.8rem; 
-    padding: 5px 10px; 
-    border-radius: 5px;
-    margin-top: 5px;
+    font-weight: bold !important; 
+    font-size: 0.8rem !important; 
+    padding: 5px 10px !important; 
+    border-radius: 5px !important;
+    margin-top: 5px !important;
 }
 
 /* ตัวแปรสีสำหรับธีม */
@@ -496,8 +496,75 @@ body {
 }
 
 /* เพิ่มการลบสีพื้นหลังจาก Gradio containers */
-.gradio-container, .gradio-blocks, .gradio-row, .gradio-column, .gradio-component {
+.gradio-container, 
+.gradio-container *, 
+.gradio-blocks, 
+.gradio-blocks *, 
+.gradio-row, 
+.gradio-row *, 
+.gradio-column, 
+.gradio-column *, 
+.gradio-component, 
+.gradio-component *, 
+.gradio-textbox, 
+.gradio-textbox *, 
+.gradio-markdown, 
+.gradio-markdown *, 
+.gradio-dropdown, 
+.gradio-dropdown *, 
+.gradio-slider, 
+.gradio-slider *, 
+.gradio-button, 
+.gradio-button *, 
+.gradio-state, 
+.gradio-state *,
+.gradio-textbox textarea,
+.gradio-markdown *, 
+.gradio-dropdown *,
+.gradio-slider *,
+.gradio-button *,
+.gradio-state * {
     background-color: transparent !important;
+    color: var(--text-color) !important;
+}
+
+/* ลบสีพื้นหลังจาก textarea ใน textbox */
+.gradio-textbox textarea {
+    background-color: transparent !important;
+    color: var(--text-color) !important;
+}
+
+/* ลบสีพื้นหลังจาก markdown */
+.gradio-markdown p, .gradio-markdown h1, .gradio-markdown h2, 
+.gradio-markdown h3, .gradio-markdown h4, .gradio-markdown h5, 
+.gradio-markdown h6, .gradio-markdown ul, .gradio-markdown ol, 
+.gradio-markdown li, .gradio-markdown a, .gradio-markdown strong, 
+.gradio-markdown em, .gradio-markdown blockquote, .gradio-markdown code {
+    background-color: transparent !important;
+    color: var(--text-color) !important;
+}
+
+/* ลบสีพื้นหลังจาก dropdown */
+.gradio-dropdown select {
+    background-color: transparent !important;
+    color: var(--text-color) !important;
+}
+
+/* ลบสีพื้นหลังจาก slider */
+.gradio-slider .slider-track, .gradio-slider .slider-thumb {
+    background-color: transparent !important;
+}
+
+/* ลบสีพื้นหลังจาก button */
+.gradio-button button {
+    background-color: transparent !important;
+    color: var(--text-color) !important;
+}
+
+/* ลบสีพื้นหลังจาก state */
+.gradio-state div {
+    background-color: transparent !important;
+    color: var(--text-color) !important;
 }
 """