Update app.py

app.py

@@ -375,13 +375,20 @@ def adr_predict(x):
 
 # ── UI ─────────────────────────────────────────────────────────────────────────
 custom_css = """
-/* ── Global background ── */
+/* ── Global: light grey page background, dark text everywhere ── */
 body,
 .gradio-container,
 .main,
-.contain {
-    background: #f4f6f9 !important;
+.contain,
+.gap {
+    background-color: #f4f6f9 !important;
     font-family: 'Inter', system-ui, sans-serif !important;
+    color: #111111 !important;
+}
+
+/* Force ALL text dark by default */
+*, *::before, *::after {
+    color: inherit;
 }
 
 /* ── Uniform white card ── */
@@ -390,72 +397,110 @@ body,
     border: 1px solid #e2e6ea !important;
     border-radius: 12px !important;
     padding: 20px !important;
-    box-shadow: 0 1px 4px rgba(0,0,0,0.07) !important;
-    color: #111 !important;
+    box-shadow: 0 1px 4px rgba(0,0,0,0.08) !important;
+    color: #111111 !important;
     margin-bottom: 12px !important;
 }
 
-/* Header card centred */
+/* Every text node inside a card */
+.card *,
+.card p,
+.card span,
+.card div,
+.card label,
+.card h1, .card h2, .card h3,
+.card td, .card th,
+.card button:not(.primary) {
+    color: #111111 !important;
+}
+
+/* Header card */
 .header-card {
     text-align: center !important;
     margin-bottom: 18px !important;
 }
 
-/* ── Card section label ── */
+/* ── Card section label (uppercase caption) ── */
 .card-label {
     font-size: 0.72em !important;
     font-weight: 700 !important;
     letter-spacing: 0.1em !important;
     text-transform: uppercase !important;
-    color: #888 !important;
+    color: #777777 !important;
     margin: 0 0 10px 0 !important;
     padding: 0 !important;
+    display: block !important;
 }
 
-/* Strip inner Gradio borders inside cards */
+/* Strip double borders / backgrounds from inner Gradio wrappers */
 .card > .form,
+.card > .block,
+.card .wrap,
 .card [data-testid="label"],
 .card .label-container,
 .card .label-wrap,
-.card .prose {
+.card .prose,
+.card .md {
     background: transparent !important;
     border: none !important;
     box-shadow: none !important;
     padding: 0 !important;
-    color: #111 !important;
 }
 
-/* Label bar text */
-.card .label-wrap span,
-.card .label-wrap p,
-.card .label-wrap div {
-    color: #111 !important;
+/* ── Gradio Label (probability bar) ── */
+.card .label-wrap,
+.card .label-wrap *,
+.card [data-testid="label"] *  {
+    background: transparent !important;
+    color: #111111 !important;
 }
 
-/* Textbox */
+/* ── Textbox ── */
 .card textarea,
-.card input[type="text"] {
+.card input[type="text"],
+.card input {
     background: #fafafa !important;
-    color: #111 !important;
+    color: #111111 !important;
     border: 1px solid #dde1e7 !important;
     border-radius: 8px !important;
 }
+.card textarea::placeholder,
+.card input::placeholder {
+    color: #999999 !important;
+}
+
+/* ── Textbox label text ── */
+.card .svelte-1f354aw,
+.card label > span {
+    color: #333333 !important;
+    font-weight: 600 !important;
+}
 
-/* Examples table */
+/* ── Examples table ── */
+.card .examples,
 .card .examples table,
 .card .examples td,
-.card .examples th {
+.card .examples th,
+.card .examples button {
     background: #ffffff !important;
-    color: #111 !important;
+    color: #111111 !important;
     border-color: #e2e6ea !important;
 }
 
-/* Run button full width */
+/* ── Run button ── */
 .run-btn {
     width: 100% !important;
     margin-top: 10px !important;
 }
 
+/* ── Processing spinner area ── */
+.card .generating,
+.card .eta-bar,
+.card .progress-bar {
+    background: #f0f0f0 !important;
+    color: #555555 !important;
+}
+
 footer { visibility: hidden; }
 """
 
@@ -535,4 +580,4 @@ with gr.Blocks(title="ADR Detector") as demo:
         outputs=[label, severity_out, shap_out, htext_out],
     )
 
-demo.launch(theme=gr.themes.Base(), css=custom_css)
+demo.launch(theme=gr.themes.Default(), css=custom_css)