Update app.py

app.py

@@ -173,13 +173,45 @@ def wrap_process_file(file_obj, tasks):
 
 def create_gradio_interface():
     css = """
-    body { background-color: #121212; color: #ffffff; }
-    .gradio-container { background-color: #1e1e1e; border-radius: 10px; box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.5); padding: 20px; }
-    button { background-color: #f1c40f; color: #000000; border: none; border-radius: 5px; padding: 10px 20px; cursor: pointer; font-weight: bold; transition: background-color 0.3s ease; }
-    button:hover { background-color: #dab10d; }
-    input, textarea, select { background-color: #333333; color: #ffffff; border: 2px solid #f1c40f; border-radius: 5px; padding: 10px; }
-    .label { font-weight: bold; margin-bottom: 5px; }
-    h1, h2, h3, h4, h5, h6 { color: #f1c40f; }
+    body {
+        background-color: #121212; /* Dark background for the whole page */
+        color: #ffffff; /* General text color set to white for contrast */
+        font-family: Arial, sans-serif; /* Improve readability with a modern font */
+    }
+    .gradio-container {
+        background-color: #1e1e1e; /* Slightly lighter dark shade for containers */
+        border-radius: 10px;
+        box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.5); /* Subtle shadow for depth */
+        padding: 20px;
+    }
+    button {
+        background-color: #f1c40f; /* Vivid yellow for buttons */
+        color: #1e1e1e; /* Dark text on yellow buttons for readability */
+        border: none;
+        border-radius: 5px;
+        padding: 10px 20px;
+        cursor: pointer;
+        font-weight: bold;
+        transition: background-color 0.3s ease; /* Smooth transition for hover effects */
+    }
+    button:hover {
+        background-color: #dab10d; /* Darker yellow on hover for interactive feel */
+    }
+    input, textarea, select {
+        background-color: #333333; /* Dark grey for input fields to differentiate from the container */
+        color: #ffffff; /* White text in input fields for readability */
+        border: 2px solid #f1c40f; /* Yellow border for a cohesive design accent */
+        border-radius: 5px;
+        padding: 10px;
+    }
+    .label {
+        font-weight: bold;
+        color: #ffffff; /* Ensure labels are readable against dark background */
+        margin-bottom: 5px;
+    }
+    h1, h2, h3, h4, h5, h6 {
+        color: #f1c40f; /* Yellow color for headers to stand out and maintain theme consistency */
+    }
     """
     with gr.Blocks(css=css) as demo:
         gr.Markdown("# LectorSync 1.0")