Update app.py

app.py

@@ -326,80 +326,95 @@ def get_video_qualities(video_url):
 utils.colab_check = lambda: True
 
 custom_css = """
-    #component-0 {
-        max-width: 100%;
-        margin: 0 auto;
-        padding: 10px;
-        box-sizing: border-box;
+    :root {
+        --primary-hue: 210;
+        --secondary-hue: 160;
+        --neutral-hue: 0;
+        --primary-color: hsl(var(--primary-hue), 70%, 55%);
+        --secondary-color: hsl(var(--secondary-hue), 70%, 55%);
+        --neutral-color: hsl(var(--neutral-hue), 0%, 95%);
+        --text-color: hsl(var(--neutral-hue), 0%, 20%);
+        --border-radius: 8px;
     }
-    .container {
-        display: flex;
-        flex-direction: column;
-        height: calc(100vh - 100px);
-        max-width: 1200px;
-        margin: 0 auto;
-    }
-    .header {
-        text-align: center;
-        margin-bottom: 1rem;
-    }
-    .main-content {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 1rem;
-        overflow-y: auto;
-        flex: 1;
-    }
-    .input-section, .options-section {
+    body { font-family: 'Inter', sans-serif; margin: 0; padding: 0; height: 100vh; overflow: hidden; }
+    #component-0 { height: 100vh; overflow-y: auto; padding: 1rem; box-sizing: border-box; }
+    .container { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; height: 100%; }
+    .header { text-align: center; margin-bottom: 1rem; }
+    .main-content { display: flex; flex-wrap: wrap; gap: 1rem; flex-grow: 1; overflow-y: auto; }
+    .input-section, .segment-controls, .options-section, .output-section {
+        background-color: var(--neutral-color);
+        border-radius: var(--border-radius);
+        padding: 1rem;
+        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
         flex: 1 1 300px;
-        min-width: 300px;
     }
-    .output-section {
-        flex-basis: 100%;
-    }
-    .segment-input {
+    .segment-input, .time-input, .button-row {
         display: flex;
         flex-wrap: wrap;
         gap: 0.5rem;
         align-items: center;
     }
-    .time-input {
-        width: 60px !important;
-    }
+    .time-input { width: 60px !important; text-align: center; }
+    .time-label, .separator { font-weight: bold; color: var(--primary-color); margin-bottom: 0.5rem; }
+    .button-row { justify-content: space-between; }
     @media (max-width: 768px) {
-        .main-content {
-            flex-direction: column;
-        }
-        .input-section, .options-section {
-            flex-basis: 100%;
-        }
+        .main-content { flex-direction: column; }
+        .input-section, .segment-controls, .options-section, .output-section { flex: 1 1 100%; }
     }
+    .url-input { flex-grow: 1; }
+    .quality-dropdown { width: 100px !important; }
 """
 
-with gr.Blocks(css=custom_css) as iface:
+with gr.Blocks(
+    title="YouTube Segment Downloader",
+    theme=gr.themes.Soft(
+        primary_hue="blue",
+        secondary_hue="green",
+        neutral_hue="gray"
+    ).set(
+        body_text_color="*neutral_800",
+        background_fill_primary="*neutral_50",
+        button_primary_background_fill="*primary_500",
+        button_primary_background_fill_hover="*primary_600",
+        button_secondary_background_fill="*secondary_500",
+        button_secondary_background_fill_hover="*secondary_600",
+    ),
+    css=custom_css
+) as iface:
     with gr.Column(elem_classes="container"):
         gr.Markdown("# 🎬 YouTube Segment Downloader", elem_classes="header")
         
         with gr.Row(elem_classes="main-content"):
             with gr.Column(elem_classes="input-section"):
-                video_url = gr.Textbox(label="YouTube URL", placeholder="Paste URL here")
-                quality = gr.Dropdown(label="Quality", choices=[], interactive=True)
+                with gr.Row():
+                    video_url = gr.Textbox(
+                        label="YouTube URL",
+                        placeholder="Paste URL here",
+                        elem_classes="url-input"
+                    )
+                    quality = gr.Dropdown(
+                        label="Quality",
+                        choices=[],
+                        interactive=True,
+                        elem_classes="quality-dropdown",
+                        visible=False
+                    )
                 url_status = gr.Markdown(visible=False)
                 
-                with gr.Column():
-                    gr.Markdown("### Add Segments")
+                with gr.Column(elem_classes="segment-controls"):
+                    gr.Markdown("### Add Segments", elem_classes="time-label")
                     with gr.Row(elem_classes="segment-input"):
                         start_hours = gr.Number(label="Start HH", minimum=0, maximum=23, step=1, value=0, elem_classes="time-input")
                         start_minutes = gr.Number(label="MM", minimum=0, maximum=59, step=1, value=0, elem_classes="time-input")
                         start_seconds = gr.Number(label="SS", minimum=0, maximum=59, step=1, value=0, elem_classes="time-input")
                         
-                        gr.Markdown("to")
+                        gr.Markdown("to", elem_classes="separator")
                         
                         end_hours = gr.Number(label="End HH", minimum=0, maximum=23, step=1, value=0, elem_classes="time-input")
                         end_minutes = gr.Number(label="MM", minimum=0, maximum=59, step=1, value=0, elem_classes="time-input")
-                        end_seconds = gr.Number(label="SS", minimum=0, maximum=59, step=1, value=0, elem_classes="time-input")
+                        end_seconds = gr.Number(label="SS", minimum=0, maximum=59, step=1, value=0, elem_classes="time_input")
                     
-                    add_btn = gr.Button("Add Segment")
+                    add_btn = gr.Button("Add Segment", variant="primary")
                 
                 segments = gr.Dataframe(
                     headers=["Segment"],
@@ -414,10 +429,10 @@ with gr.Blocks(css=custom_css) as iface:
                 combine = gr.Checkbox(label="Combine segments", value=True)
                 audio_only = gr.Checkbox(label="Audio only", value=False)
                 remove_index = gr.Number(label="Remove segment", minimum=0, step=1, value=0)
-                remove_btn = gr.Button("Remove")
+                remove_btn = gr.Button("Remove", variant="secondary")
                 old_index = gr.Number(label="Move from", minimum=0, step=1, value=0)
                 new_index = gr.Number(label="to", minimum=0, step=1, value=0)
-                move_btn = gr.Button("Move")
+                move_btn = gr.Button("Move", variant="secondary")
                 
                 submit_btn = gr.Button("🚀 Download", variant="primary")