Polish UI: Gradio 5 theme overrides and container-scoped CSS

app.py

@@ -60,62 +60,75 @@ SEARCH_CACHE: Dict[str, Dict[str, Any]] = {}
 VISIT_CACHE: Dict[str, Dict[str, Any]] = {}
 LOGO_PATH = str(Path(__file__).resolve().parent / "assets" / "quest-logo.png")
 
-CUSTOM_CSS = """
-@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap');
+# Gradio 5: neutral defaults read as grey; tune theme variables so panels/forms match the blue‑white UI.
+APP_THEME = gr.themes.Soft(
+    primary_hue=gr.themes.colors.blue,
+    secondary_hue=gr.themes.colors.sky,
+    neutral_hue=gr.themes.colors.blue,
+    font=gr.themes.GoogleFont("Manrope"),
+    font_mono=gr.themes.GoogleFont("JetBrains Mono"),
+).set(
+    body_background_fill="#f3f8ff",
+    body_text_color="#0f2744",
+    body_text_color_subdued="#4a6a8c",
+    color_accent="*primary_600",
+    background_fill_primary="#ffffff",
+    background_fill_secondary="#e8f1ff",
+    border_color_primary="#c7dbfa",
+    border_color_accent="*primary_500",
+    block_background_fill="transparent",
+    block_border_width="0px",
+    block_border_color="transparent",
+    block_shadow="none",
+    block_label_background_fill="transparent",
+    block_label_border_width="0px",
+    block_title_border_width="0px",
+    panel_background_fill="transparent",
+    panel_border_width="0px",
+    panel_border_color="transparent",
+    input_background_fill="#ffffff",
+    input_border_color="#93c5fd",
+    input_border_width="1px",
+    input_shadow="none",
+    input_shadow_focus="none",
+    code_background_fill="#f0f7ff",
+    slider_color="*primary_500",
+    button_secondary_background_fill="#ffffff",
+    button_secondary_background_fill_hover="#eff6ff",
+    button_secondary_border_color="#93c5fd",
+    button_cancel_background_fill="#ffffff",
+    button_cancel_background_fill_hover="#eff6ff",
+    button_cancel_border_color="#93c5fd",
+    table_border_color="#dbeafe",
+    table_even_background_fill="#fafdff",
+    table_odd_background_fill="#ffffff",
+)
 
-.gradio-container {
+CUSTOM_CSS = """
+/* Gradio 5 uses versioned root classes (e.g. gradio-container-5-29-0); match all of them. */
+[class*="gradio-container"] {
   max-width: 1200px !important;
-  font-family: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
-  background: #f3f8ff !important;
-  color: #0b2a66;
-}
-
-.gradio-container * {
-  font-family: inherit !important;
-}
-
-.banner-card {
-  padding: 18px 20px;
-  border-radius: 18px;
-  background: linear-gradient(100deg, #f8fbff 0%, #eef5ff 100%);
-  color: #0f172a;
-  border: 1px solid #dbe7ff;
-  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
-  margin-bottom: 14px;
-}
-
-.banner-inner {
-  display: flex;
-  align-items: center;
-  gap: 18px;
-}
-
-.banner-logo-wrap {
-  min-width: 250px;
+  color: #0f2744;
 }
 
-.banner-logo-image img {
+.banner-logo-image img,
+[class*="gradio-container"] .image-container img,
+[class*="gradio-container"] .image-frame img {
   width: 100%;
   max-width: 360px;
   height: auto;
   object-fit: contain;
-  border-radius: 0;
-  background: transparent;
-  border: none;
-}
-
-.banner-title {
-  font-size: 24px;
-  font-weight: 700;
-  line-height: 1.15;
-  color: #1e3a8a;
+  border-radius: 0 !important;
+  background: transparent !important;
+  border: none !important;
+  box-shadow: none !important;
 }
 
-.banner-subtitle {
-  margin-top: 6px;
-  opacity: 0.9;
-  font-size: 14px;
-  color: #1f2937;
+[class*="gradio-container"] .image-container,
+[class*="gradio-container"] .image-frame {
+  border: none !important;
+  background: transparent !important;
+  box-shadow: none !important;
 }
 
 .section-card {
@@ -126,26 +139,30 @@ CUSTOM_CSS = """
   box-shadow: none !important;
 }
 
-.section-title {
-  font-size: 13px;
+.section-heading {
+  font-size: 0.72rem;
   font-weight: 700;
-  color: #2454b8;
-  margin-bottom: 6px;
-  letter-spacing: 0.02em;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: #2563eb;
+  margin: 0 0 10px 0;
+  padding-bottom: 8px;
+  border-bottom: 1px solid rgba(37, 99, 235, 0.18);
 }
 
 .layout-gap {
-  gap: 18px;
+  gap: 20px;
+  align-items: flex-start;
 }
 
 .right-stack > * {
-  margin-bottom: 8px;
+  margin-bottom: 10px;
 }
 
 .icon-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 10px;
+  gap: 12px;
   width: 100%;
   max-width: 360px;
   margin: 0 auto;
@@ -156,81 +173,106 @@ CUSTOM_CSS = """
   align-items: center;
   justify-content: center;
   gap: 8px;
-  padding: 12px 14px;
-  border: none;
-  border-radius: 12px;
+  padding: 14px 14px;
+  border-radius: 14px;
   text-decoration: none !important;
   color: #1d4ed8 !important;
-  background: #eaf2ff;
+  background: linear-gradient(180deg, #ffffff 0%, #f0f7ff 100%);
   font-weight: 600;
   font-size: 17px;
+  box-shadow: 0 1px 0 rgba(37, 99, 235, 0.06), 0 8px 24px rgba(37, 99, 235, 0.08);
+  border: 1px solid rgba(147, 197, 253, 0.65);
+  transition: transform 0.15s ease, box-shadow 0.15s ease;
 }
 
 .icon-link:hover {
-  background: #dbeafe;
+  transform: translateY(-1px);
+  box-shadow: 0 4px 20px rgba(37, 99, 235, 0.12);
 }
 
-.gradio-container .gr-button-primary {
-  background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%) !important;
+[class*="gradio-container"] .gr-button-primary {
+  background: linear-gradient(135deg, #1d4ed8 0%, #3b82f6 100%) !important;
   color: white !important;
   border: none !important;
-  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.25) !important;
+  box-shadow: 0 8px 22px rgba(37, 99, 235, 0.28) !important;
 }
 
-.gradio-container .gr-button-secondary {
+[class*="gradio-container"] .gr-button-secondary {
   background: #ffffff !important;
   color: #1d4ed8 !important;
-  border: 1px solid #bfdbfe !important;
-  box-shadow: inset 0 0 0 1px #bfdbfe !important;
+  border: 1px solid rgba(147, 197, 253, 0.9) !important;
+  box-shadow: 0 1px 2px rgba(15, 39, 68, 0.04) !important;
 }
 
-.gradio-container .gr-button-stop {
+[class*="gradio-container"] .gr-button-secondary:hover {
+  background: #f0f7ff !important;
+}
+
+[class*="gradio-container"] .gr-button-stop {
   background: #ffffff !important;
   color: #1d4ed8 !important;
-  border: 1px solid #bfdbfe !important;
-  box-shadow: inset 0 0 0 1px #bfdbfe !important;
+  border: 1px solid rgba(147, 197, 253, 0.9) !important;
+  box-shadow: 0 1px 2px rgba(15, 39, 68, 0.04) !important;
 }
 
-.gradio-container .gr-group,
-.gradio-container .gr-box,
-.gradio-container .gr-panel {
-  border: none !important;
-  box-shadow: none !important;
-  background: transparent !important;
+[class*="gradio-container"] .gr-button-stop:hover {
+  background: #f0f7ff !important;
 }
 
-.gradio-container .tabs {
+[class*="gradio-container"] .gr-group,
+[class*="gradio-container"] fieldset,
+[class*="gradio-container"] .gr-box,
+[class*="gradio-container"] .gr-panel {
   border: none !important;
+  box-shadow: none !important;
   background: transparent !important;
 }
 
-.gradio-container .tabitem {
-  border: none !important;
+/* Form rows use theme vars; keep chrome transparent so only inputs read as “cards”. */
+[class*="gradio-container"] .gr-form,
+[class*="gradio-container"] .form {
   background: transparent !important;
+  border: none !important;
+  box-shadow: none !important;
 }
 
-.gradio-container .gr-form,
-.gradio-container .form {
+[class*="gradio-container"] textarea,
+[class*="gradio-container"] input:not([type="checkbox"]):not([type="radio"]) {
   background: #ffffff !important;
+  border: 1px solid rgba(147, 197, 253, 0.85) !important;
+  box-shadow: 0 6px 18px rgba(37, 99, 235, 0.06) !important;
+  border-radius: 14px !important;
 }
 
-.gradio-container textarea,
-.gradio-container input {
-  background: #ffffff !important;
-  border: none !important;
-  box-shadow: inset 0 0 0 1px #dbeafe !important;
-  border-radius: 12px !important;
+[class*="gradio-container"] textarea:focus,
+[class*="gradio-container"] input:focus {
+  border-color: #3b82f6 !important;
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2) !important;
 }
 
-.gradio-container .gr-markdown a {
+[class*="gradio-container"] .gr-markdown,
+[class*="gradio-container"] .prose {
+  color: #0f2744 !important;
+}
+
+[class*="gradio-container"] .gr-markdown a,
+[class*="gradio-container"] .prose a {
   color: #1d4ed8 !important;
 }
 
+/* Tabs: no heavy panels */
+[class*="gradio-container"] .tabs {
+  border: none !important;
+  background: transparent !important;
+}
+
 .inline-example-title {
-  font-size: 13px;
+  font-size: 0.72rem;
   font-weight: 700;
-  color: #2454b8;
-  margin: 8px 0 2px 0;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: #2563eb;
+  margin: 16px 0 4px 0;
 }
 
 .example-buttons {
@@ -240,9 +282,9 @@ CUSTOM_CSS = """
 }
 
 .example-note {
-  color: #3b82f6;
+  color: #4a6a8c;
   font-size: 12px;
-  margin-top: 2px;
+  margin: 0 0 6px 0;
 }
 
 .no-frame {
@@ -265,49 +307,54 @@ CUSTOM_CSS = """
   background: #2563eb !important;
 }
 
-.gradio-container .noUi-target {
+[class*="gradio-container"] .noUi-target {
   border: none !important;
   box-shadow: none !important;
-  background: #eaf2ff !important;
+  background: #e8f1ff !important;
 }
 
-.gradio-container .noUi-connect {
+[class*="gradio-container"] .noUi-connect {
   background: #2563eb !important;
 }
 
-.gradio-container .noUi-handle {
+[class*="gradio-container"] .noUi-handle {
   border: none !important;
-  box-shadow: 0 0 0 2px #2563eb !important;
+  box-shadow: 0 0 0 2px #2563eb, 0 2px 8px rgba(37, 99, 235, 0.2) !important;
   background: #ffffff !important;
 }
 
-.gradio-container [data-testid="block-examples"] {
-  border: none !important;
-  background: #eef4ff !important;
-  border-radius: 12px !important;
-  padding: 8px !important;
+/* Example preset buttons live in normal Button blocks; soften any label chrome */
+[class*="gradio-container"] .example-buttons .gr-form {
+  gap: 10px !important;
+}
+
+[class*="gradio-container"] [data-testid="block-examples"] {
+  background: linear-gradient(180deg, #f7fbff 0%, #eef4ff 100%) !important;
+  border-radius: 16px !important;
+  padding: 12px !important;
+  border: 1px solid rgba(147, 197, 253, 0.45) !important;
 }
 
-.gradio-container [data-testid="block-examples"] table,
-.gradio-container [data-testid="block-examples"] thead,
-.gradio-container [data-testid="block-examples"] tbody,
-.gradio-container [data-testid="block-examples"] tr,
-.gradio-container [data-testid="block-examples"] td {
+[class*="gradio-container"] [data-testid="block-examples"] table,
+[class*="gradio-container"] [data-testid="block-examples"] thead,
+[class*="gradio-container"] [data-testid="block-examples"] tbody,
+[class*="gradio-container"] [data-testid="block-examples"] tr,
+[class*="gradio-container"] [data-testid="block-examples"] td {
   border: none !important;
   background: transparent !important;
 }
 
-.gradio-container [data-testid="block-examples"] button {
+[class*="gradio-container"] [data-testid="block-examples"] button {
   background: #ffffff !important;
   color: #1d4ed8 !important;
   border: none !important;
-  border-radius: 10px !important;
-  box-shadow: inset 0 0 0 1px #bfdbfe !important;
+  border-radius: 12px !important;
+  box-shadow: inset 0 0 0 1px rgba(147, 197, 253, 0.9) !important;
   font-size: 13px !important;
 }
 
-.gradio-container [data-testid="block-examples"] button:hover {
-  background: #dbeafe !important;
+[class*="gradio-container"] [data-testid="block-examples"] button:hover {
+  background: #eff6ff !important;
 }
 """
 
@@ -598,17 +645,13 @@ def run_ui(
 
 with gr.Blocks(
     title="DeepResearch Space Starter",
-    theme=gr.themes.Default(
-        text_size="md",
-        radius_size="md",
-        spacing_size="md",
-    ),
+    theme=APP_THEME,
     css=CUSTOM_CSS,
 ) as demo:
     with gr.Row(elem_classes="layout-gap"):
         with gr.Column(scale=7):
             with gr.Group(elem_classes="section-card"):
-                gr.HTML('<div class="section-title">Chat</div>')
+                gr.HTML('<div class="section-heading">Chat</div>')
                 question = gr.Textbox(
                     show_label=False,
                     placeholder="Ask anything you want to research...",
@@ -659,7 +702,7 @@ with gr.Blocks(
                 )
 
             with gr.Group(elem_classes="section-card"):
-                gr.HTML('<div class="section-title">Settings</div>')
+                gr.HTML('<div class="section-heading">Settings</div>')
                 model = gr.Dropdown(
                     label="Model",
                     choices=DEFAULT_FREE_MODELS,