Update app.py

app.py

@@ -1240,12 +1240,25 @@ with gr.Blocks(
     css="""
     h1 {text-align: center}
     h2 {text-align: center}
+    textarea {background-color: rgb(8 94 128) !important;border: none !important;}
     #lecture-container {font-family: 'Times New Roman', Times, serif;}
     #slide-content {font-size: 48px; line-height: 1.2;}
-    #form-group {box-shadow: 0 0 2rem rgba(0, 0, 0, .14) !important; border-radius: 30px; font-weight: 900; color: #000; background-color: background: linear-gradient(109deg, #1f8db9, #085d7e);}
+    #form-group {box-shadow: 0 0 2rem rgba(0, 0, 0, .14) !important; border-radius: 30px; border: none !important; color: #fff; background-color: background: linear-gradient(109deg, #1f8db9, #085d7e);}
     #download {box-shadow: 0 0 2rem rgba(0, 0, 0, .14) !important; border-radius: 30px;}
     #slide-display {box-shadow: 0 0 2rem rgba(0, 0, 0, .14) !important; border-radius: 30px; background-color: linear-gradient(109deg, #1f8db9, #085d7e);}
-    button {transition: background-color 0.3s;background: linear-gradient(109deg, #1f8db9, #085d7e) !important;}
+    #component-14 {background: linear-gradient(109deg, #1c88b4, #056c93);box-shadow: 0 0 2rem rgb(120 211 255 / 14%) !important;border: none !important;}
+    #component-5 {background: linear-gradient(109deg, #1c88b4, #056c93);box-shadow: 0 0 2rem rgb(120 211 255 / 14%) !important;border: none !important;}
+    #component-6 {background: linear-gradient(109deg, #1c88b4, #056c93);box-shadow: 0 0 2rem rgb(120 211 255 / 14%) !important;border: none !important;}
+    #component-7 {background: linear-gradient(109deg, #1c88b4, #056c93);box-shadow: 0 0 2rem rgb(120 211 255 / 14%) !important;border: none !important;}
+    #component-8 {background: linear-gradient(109deg, #1c88b4, #056c93);box-shadow: 0 0 2rem rgb(120 211 255 / 14%) !important;border: none !important;}
+    #component-9 {background: linear-gradient(109deg, #1c88b4, #056c93);box-shadow: 0 0 2rem rgb(120 211 255 / 14%) !important;border: none !important;}
+    #component-10 {background: linear-gradient(109deg, #1c88b4, #056c93);box-shadow: 0 0 2rem rgb(120 211 255 / 14%) !important;border: none !important;}
+    #component-11 {background: linear-gradient(109deg, #1c88b4, #056c93);box-shadow: 0 0 2rem rgb(120 211 255 / 14%) !important;border: none !important;}
+    #component-12 {background: linear-gradient(109deg, #1c88b4, #056c93);box-shadow: 0 0 2rem rgb(120 211 255 / 14%) !important;border: none !important;}
+    #component-13 {background: linear-gradient(109deg, #1c88b4, #056c93);box-shadow: 0 0 2rem rgb(120 211 255 / 14%) !important;border: none !important;}
+    gradio-container.gradio-container-5-28-0 .contain #slide-display {border-radius: 30px;background: linear-gradient(109deg, #198bb9, #085775);}
+    .form {background: linear-gradient(109deg, #1c88b4, #056c93) !important; box-shadow: 0 0 2rem rgb(120 211 255 / 14%) !important;}
+    button {transition: background-color 0.3s;}
     button:hover {background-color: linear-gradient(109deg, #147197, #085d7e) !important;}
     .gradio-container { background: linear-gradient(109deg, #186a8b, #075878); box-shadow: rgba(255, 255, 255, 0.14) 0px 0px 2rem; padding-top: 30px;}
     .gradio-container.gradio-container-5-28-0 .contain h1 {color: white !important;}
@@ -1286,9 +1299,9 @@ with gr.Blocks(
                 generate_btn = gr.Button("Generate Lecture")
         with gr.Column(scale=2):
             default_slide_html = """
-            <div style="display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; min-height: 700px; padding: 20px; text-align: center; border: 1px solid #ddd; border-radius: 30px; box-shadow: 0 0 2rem rgba(0, 0, 0, .14) !important;">
-                <h2 style="font-style: italic; color: #000;">Waiting for lecture content...</h2>
-                <p style="margin-top: 10px; font-size: 16px;color: #000">Please Generate lecture content via the form on the left first before lecture begins</p>
+            <div style="display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; min-height: 700px; padding: 20px; text-align: center; border: 1px solid #0b9cd6; border-radius: 30px; background: linear-gradient(109deg, #1c88b4, #056c93);box-shadow: 0 0 2rem rgb(120 211 255 / 14%);">
+                <h2 style="font-style: italic; color: #fff;">Waiting for lecture content...</h2>
+                <p style="margin-top: 10px; font-size: 16px;color: #fff">Please Generate lecture content via the form on the left first before lecture begins</p>
             </div>
             """
             slide_display = gr.HTML(label="Lecture Slides", value=default_slide_html, elem_id="slide-display")