Update app.py

app.py

@@ -13,7 +13,6 @@ import os
 # ============================================
 # CLEAN RESPONSIVE CSS - UPDATED WITH DARKER GRAY BACKGROUND
 # ============================================
-
 custom_css = """
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
 
@@ -25,6 +24,10 @@ custom_css = """
     --text-main: #111827;
 }
 
+/* ================================================= */
+/* GENERAL LAYOUT                                   */
+/* ================================================= */
+
 body, .gradio-container {
     font-family: 'Inter', sans-serif !important;
     background-color: #e5e7eb !important;
@@ -50,42 +53,42 @@ h1 span {
     -webkit-text-fill-color: transparent;
 }
 
-/* ===== FIX FOR METRIC VALUES (0, 0.0, N/A) ===== */
+.subtitle-text {
+    color: #2563eb !important;
+    font-weight: 500 !important;
+}
+
+/* ================================================= */
+/* METRICS                                           */
+/* ================================================= */
+
 .metric-value {
     font-size: 2rem !important;
     font-weight: 700 !important;
     color: var(--primary) !important;
 }
 
-.metric-value strong {
-    color: var(--primary) !important;
-}
+/* ================================================= */
+/* BUTTONS                                           */
+/* ================================================= */
 
-div:has(.metric-value) strong {
-    color: var(--primary) !important;
+button, .gr-button {
+    color: #ffffff !important;
+    font-weight: 600 !important;
 }
 
-/* Professional Academic Paper Search text - BLUE */
-.subtitle-text {
-    color: #2563eb !important;
-    font-weight: 500 !important;
+button.variant-primary {
+    background-color: var(--primary) !important;
 }
 
-/* Slider comment style - for black region */
-.slider-comment {
-    color: #ffffff !important;
-    font-size: 0.9rem !important;
-    margin-top: 8px !important;
-    margin-bottom: 8px !important;
-    font-style: italic !important;
-    background: #1f2937 !important;
-    padding: 8px 12px !important;
-    border-radius: 6px !important;
-    border-left: 4px solid var(--primary) !important;
-    font-weight: 500 !important;
+button.variant-secondary {
+    background-color: #6b7280 !important;
 }
 
-/* Tab styling */
+/* ================================================= */
+/* TABS                                              */
+/* ================================================= */
+
 .tab-nav {
     background-color: #f3f4f6 !important;
     border-radius: 8px !important;
@@ -105,40 +108,27 @@ div:has(.metric-value) strong {
     color: white !important;
 }
 
-/* Ensure all text in white cards is properly colored */
-.white-card p, .white-card li, .white-card div:not(.slider-comment) {
-    color: #111827 !important;
-}
-
-.white-card label {
-    color: var(--primary) !important;
-    font-weight: 500 !important;
-}
-
-/* Button text color - PURE WHITE for all buttons */
-button, .gr-button, .lg.primary, button.variant-primary, .gr-button-primary,
-button.variant-secondary, .gr-button-secondary, button.secondary {
-    color: #ffffff !important;
-    font-weight: 600 !important;
-}
+/* ================================================= */
+/* SLIDER COMMENT                                    */
+/* ================================================= */
 
-/* Ensure button text stays white on hover/focus */
-button:hover, .gr-button:hover, button:focus, .gr-button:focus {
+.slider-comment {
     color: #ffffff !important;
+    font-size: 0.9rem !important;
+    margin-top: 8px !important;
+    margin-bottom: 8px !important;
+    font-style: italic !important;
+    background: #1f2937 !important;
+    padding: 8px 12px !important;
+    border-radius: 6px !important;
+    border-left: 4px solid var(--primary) !important;
+    font-weight: 500 !important;
 }
 
-/* Primary button background */
-button.variant-primary, .gr-button-primary {
-    background-color: var(--primary) !important;
-}
-
-/* Secondary button background - unified */
-button.variant-secondary, .gr-button-secondary, button.secondary {
-    background-color: #6b7280 !important;
-}
+/* ================================================= */
+/* DROPDOWN BUTTON (Closed State)                   */
+/* ================================================= */
 
-/* ===== DROPDOWN STYLING ===== */
-/* Main dropdown button - keep dark with white text */
 .gr-dropdown, .gr-dropdown select, select {
     background-color: #374151 !important;
     color: #ffffff !important;
@@ -146,74 +136,81 @@ button.variant-secondary, .gr-button-secondary, button.secondary {
     border-radius: 6px !important;
 }
 
-/* ===== FORCE DROPDOWN POPUP LIGHT GRAY (GRADIO PORTAL FIX) ===== */
+/* ================================================= */
+/* PERFECT DROPDOWN POPUP FIX (NO BLACK / NO WHITE) */
+/* ================================================= */
+
+/* Target HeadlessUI portal */
+div[id^="headlessui-portal"] {
+    background: transparent !important;
+}
 
-/* Target floating dropdown container */
-body div[role="listbox"],
-body div[role="menu"],
-body .gradio-container div[role="listbox"],
-body .gradio-container div[role="menu"] {
-    background-color: #f3f4f6 !important;  /* LIGHT GRAY */
+/* Dropdown container */
+div[id^="headlessui-portal"] div[role="listbox"] {
+    background-color: #f3f4f6 !important;
     border: 1px solid #d1d5db !important;
-    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15) !important;
+    box-shadow: 0 8px 24px rgba(0,0,0,0.15) !important;
+    border-radius: 8px !important;
+    overflow: hidden !important;
 }
 
-/* Target each option item */
-body div[role="option"] {
+/* All options */
+div[id^="headlessui-portal"] div[role="option"] {
     background-color: #f3f4f6 !important;
     color: #111827 !important;
+    padding: 10px 14px !important;
 }
 
 /* Hover state */
-body div[role="option"]:hover {
+div[id^="headlessui-portal"] div[role="option"]:hover {
     background-color: #e5e7eb !important;
     color: #111827 !important;
 }
 
-/* Selected option */
-body div[role="option"][aria-selected="true"] {
+/* Selected option (strong override) */
+div[id^="headlessui-portal"] div[role="option"][aria-selected="true"],
+div[id^="headlessui-portal"] div[role="option"].selected,
+div[id^="headlessui-portal"] div[role="option"][data-headlessui-state~="selected"] {
     background-color: #2563eb !important;
     color: #ffffff !important;
 }
 
-/* Hover effect */
-.gr-dropdown-list .item:hover,
-.dropdown-list .item:hover,
-.gr-dropdown .options .option:hover,
-select option:hover,
-div[role="option"]:hover {
-    background-color: #f3f4f6 !important;  /* Light gray on hover */
-    color: #111827 !important;
+/* Fix checkmark icon color */
+div[id^="headlessui-portal"] svg {
+    color: #ffffff !important;
+    fill: #ffffff !important;
 }
-
-/* Selected option */
-.gr-dropdown-list .item.selected,
-.dropdown-list .item.selected,
-select option:checked,
-div[role="option"][aria-selected="true"] {
-    background-color: var(--primary) !important;
-    color: white !important;
+/* ================================================= */
+/* METRIC LABEL BLACK BACKGROUND                    */
+/* ================================================= */
+
+.metric-label {
+    display: inline-block !important;
+    background-color: #111827 !important;  /* Black */
+    color: #ffffff !important;             /* White text */
+    padding: 6px 12px !important;
+    border-radius: 6px !important;
+    font-weight: 600 !important;
 }
 
-/* ===== DROPDOWN POPUP - LIGHT GRAY + DARK TEXT ===== */
 
-body div[role="listbox"] {
-    background: #f3f4f6 !important;
-    border: 1px solid #d1d5db !important;
-}
 
-body div[role="option"] {
-    background: #f3f4f6 !important;
-    color: #111827 !important;
-}
+/* ================================================= */
+/* METRIC VALUE BLACK BACKGROUND FIX                */
+/* ================================================= */
 
-body div[role="option"]:hover {
-    background: #e5e7eb !important;
-    color: #111827 !important;
+.metric-value {
+    display: inline-block !important;
+    background-color: #111827 !important;  /* Black */
+    color: #ffffff !important;             /* White text */
+    padding: 6px 12px !important;
+    border-radius: 6px !important;
+    font-weight: 700 !important;
 }
 
-body div[role="option"][aria-selected="true"] {
-    background: #2563eb !important;
+/* Remove default white background from strong */
+.metric-value strong {
+    background: transparent !important;
     color: #ffffff !important;
 }
 """
@@ -587,7 +584,7 @@ def create_interface():
     with gr.Blocks(
     title="PaperSearchPro",
     css=custom_css,
-    theme=gr.themes.Soft(
+    theme=gr.themes.Default(
         primary_hue="blue",
         neutral_hue="gray"
     )) as demo: