Update apps/gradio_app/static/styles.css

apps/gradio_app/static/styles.css

@@ -1,213 +1,219 @@
-:root {
-    --primary-color: #10b981; /* Updated to success color */
-    --primary-hover: #0a8f66; /* Darkened shade of #10b981 for hover */
-    --accent-color: #8a1bf2; /* New variable for the second gradient color */
-    --accent-hover: #6b21a8; /* Darkened shade of #8a1bf2 for hover */
-    --secondary-color: #64748b;
-    --success-color: #10b981;
-    --warning-color: #f59e0b;
-    --danger-color: #ef4444;
-    --border-radius: 0.5rem; /* Relative unit */
-    --shadow-sm: 0 0.0625rem 0.125rem 0 rgba(0, 0, 0, 0.05);
-    --shadow-md: 0 0.25rem 0.375rem -0.0625rem rgba(0, 0, 0, 0.1);
-    --shadow-lg: 0 0.625rem 0.9375rem -0.1875rem rgba(0, 0, 0, 0.1);
-}
-
-/* Container Styles */
-.gradio-container {
-    max-width: 75rem !important; /* Relative to viewport */
-    margin: 0 auto !important;
-    padding: 1.25rem !important; /* Relative padding */
-    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif !important;
-}
-
-/* Card/Panel Styles */
-.svelte-15lo0d9, .panel {
-    background: var(--block-background-fill) !important;
-    border-radius: var(--border-radius) !important;
-    box-shadow: var(--shadow-md) !important;
-    border: 0.0625rem solid var(--border-color-primary) !important;
-    backdrop-filter: blur(0.625rem) !important;
-}
-
-/* Button Styles */
-button.primary {
-    background: linear-gradient(135deg, var(--primary-color), var(--accent-color)) !important;
-    border: none !important;
-    border-radius: var(--border-radius) !important;
-    padding: 0.625rem 1.25rem !important; /* Relative padding */
-    font-weight: 600 !important;
-    font-size: 1rem !important; /* Relative font size */
-    transition: all 0.3s ease !important;
-    box-shadow: var(--shadow-sm) !important;
-}
-
-button.primary:hover {
-    background: linear-gradient(135deg, var(--primary-hover), var(--accent-hover)) !important;
-    transform: translateY(-0.0625rem) !important;
-    box-shadow: var(--shadow-md) !important;
-}
-
-button.secondary {
-    background: transparent !important;
-    border: 0.0625rem solid var(--border-color-primary) !important;
-    border-radius: var(--border-radius) !important;
-    color: var(--body-text-color) !important;
-    font-weight: 500 !important;
-    font-size: 0.875rem !important; /* Relative font size */
-}
-
-/* Slider Styles */
-.slider_input_container input[type="range"][name="cowbell"] {
-    -webkit-appearance: none !important;
-    width: 100% !important;
-    height: 0.5rem !important; /* Relative height */
-    border-radius: var(--border-radius) !important;
-    background: linear-gradient(90deg, var(--primary-color), var(--accent-color)) !important;
-    outline: none !important;
-}
-
-.slider_input_container input[type="range"][name="cowbell"]::-webkit-slider-thumb {
-    -webkit-appearance: none !important;
-    width: 1rem !important; /* Relative size */
-    height: 1rem !important;
-    border-radius: 50% !important;
-    background: var(--accent-color) !important;
-    cursor: pointer !important;
-    box-shadow: var(--shadow-sm) !important;
-    border: 0.0625rem solid var(--border-color-primary) !important;
-}
-
-.slider_input_container input[type="range"][name="cowbell"]::-webkit-slider-thumb:hover {
-    background: var(--accent-color) !important;
-    box-shadow: var(--shadow-md) !important;
-}
-
-.slider_input_container input[type="range"][name="cowbell"]::-moz-range-track {
-    height: 0.5rem !important; /* Relative height */
-    border-radius: var(--border-radius) !important;
-    background: linear-gradient(90deg, var(--primary-color), var(--accent-color)) !important;
-}
-
-.slider_input_container input[type="range"][name="cowbell"]::-moz-range-thumb {
-    width: 1rem !important; /* Relative size */
-    height: 1rem !important;
-    border-radius: 50% !important;
-    background: var(--accent-color) !important;
-    cursor: pointer !important;
-    box-shadow: var(--shadow-sm) !important;
-    border: 0.0625rem solid var(--border-color-primary) !important;
-}
-
-.slider_input_container input[type="range"][name="cowbell"]::-moz-range-thumb:hover {
-    background: var(--accent-color) !important;
-    box-shadow: var(--shadow-md) !important;
-}
-
-/* Header Styles */
-h1, h2, h3, h4, h5, h6 {
-    font-weight: 700 !important;
-    color: var(--body-text-color) !important;
-    letter-spacing: -0.02em !important;
-}
-
-h1 {
-    font-size: 2.5rem !important; /* Kept as is, suitable for zooming */
-    margin-bottom: 1rem !important;
-}
-
-h2 {
-    font-size: 1.75rem !important; /* Kept as is, suitable for zooming */
-    margin: 1.5rem 0 1rem 0 !important;
-}
-
-/* Text Styles */
-p, .prose {
-    color: var(--body-text-color-subdued) !important;
-    line-height: 1.6 !important;
-    font-size: 1rem !important; /* Relative font size */
-}
-
-/* Alert/Notification Styles */
-.alert-info {
-    background: linear-gradient(135deg, #dbeafe, #bfdbfe) !important;
-    border: 0.0625rem solid #93c5fd !important;
-    border-radius: var(--border-radius) !important;
-    color: #1e40af !important;
-    font-size: 0.875rem !important; /* Relative font size */
-}
-
-.alert-warning {
-    background: linear-gradient(135deg, #fef3c7, #fde68a) !important;
-    border: 0.0625rem solid #fcd34d !important;
-    border-radius: var(--border-radius) !important;
-    color: #92400e !important;
-    font-size: 0.875rem !important; /* Relative font size */
-}
-
-.alert-error {
-    background: linear-gradient(135deg, #fecaca, #fca5a5) !important;
-    border: 0.0625rem solid #f87171 !important;
-    border-radius: var(--border-radius) !important;
-    color: #991b1b !important;
-    font-size: 0.875rem !important; /* Relative font size */
-}
-
-/* Scrollbar (Webkit browsers) */
-::-webkit-scrollbar {
-    width: 0.5rem !important; /* Relative size */
-    height: 0.5rem !important;
-}
-
-::-webkit-scrollbar-track {
-    background: var(--background-fill-secondary) !important;
-    border-radius: 0.25rem !important;
-}
-
-::-webkit-scrollbar-thumb {
-    background: var(--secondary-color) !important;
-    border-radius: 0.25rem !important;
-}
-
-::-webkit-scrollbar-thumb:hover {
-    background: var(--primary-color) !important;
-}
-
-/* Tab Styles */
-.gradio-container .tabs button {
-    font-size: 1.0625rem !important; /* Relative font size (17px equivalent) */
-    font-weight: bold !important;
-}
-
-/* Dark Theme Specific Overrides */
-@media (prefers-color-scheme: dark) {
-    :root {
-        --shadow-sm: 0 0.0625rem 0.125rem 0 rgba(0, 0, 0, 0.2);
-        --shadow-md: 0 0.25rem 0.375rem -0.0625rem rgba(0, 0, 0, 0.3);
-        --shadow-lg: 0 0.625rem 0.9375rem -0.1875rem rgba(0, 0, 0, 0.3);
-    }
-}
-
-/* Light Theme Specific Overrides */
-@media (prefers-color-scheme: light) {
-    .gradio-container {
-        background: linear-gradient(135deg, #f8fafc, #f1f5f9) !important;
-    }
-}
-
-/* Responsive adjustments for zoom */
-@media screen and (max-width: 48rem) { /* 768px equivalent */
-    .gradio-container {
-        padding: 0.625rem !important;
-    }
-    h1 {
-        font-size: 2rem !important;
-    }
-    h2 {
-        font-size: 1.5rem !important;
-    }
-    button.primary {
-        padding: 0.5rem 1rem !important;
-        font-size: 0.875rem !important;
-    }
+:root {
+    --primary-color: #10b981; /* Updated to success color */
+    --primary-hover: #0a8f66; /* Darkened shade of #10b981 for hover */
+    --accent-color: #8a1bf2; /* New variable for the second gradient color */
+    --accent-hover: #6b21a8; /* Darkened shade of #8a1bf2 for hover */
+    --secondary-color: #64748b;
+    --success-color: #10b981;
+    --warning-color: #f59e0b;
+    --danger-color: #ef4444;
+    --border-radius: 0.5rem; /* Relative unit */
+    --shadow-sm: 0 0.0625rem 0.125rem 0 rgba(0, 0, 0, 0.05);
+    --shadow-md: 0 0.25rem 0.375rem -0.0625rem rgba(0, 0, 0, 0.1);
+    --shadow-lg: 0 0.625rem 0.9375rem -0.1875rem rgba(0, 0, 0, 0.1);
+}
+
+/* Container Styles */
+.gradio-container {
+    max-width: 75rem !important; /* Relative to viewport */
+    margin: 0 auto !important;
+    padding: 1.25rem !important; /* Relative padding */
+    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif !important;
+}
+
+/* Card/Panel Styles */
+.svelte-15lo0d9, .panel {
+    background: var(--block-background-fill) !important;
+    border-radius: var(--border-radius) !important;
+    box-shadow: var(--shadow-md) !important;
+    border: 0.0625rem solid var(--border-color-primary) !important;
+    backdrop-filter: blur(0.625rem) !important;
+}
+
+/* Button Styles */
+button.primary {
+    background: linear-gradient(135deg, var(--primary-color), var(--accent-color)) !important;
+    border: none !important;
+    border-radius: var(--border-radius) !important;
+    padding: 0.625rem 1.25rem !important; /* Relative padding */
+    font-weight: 600 !important;
+    font-size: 1rem !important; /* Relative font size */
+    transition: all 0.3s ease !important;
+    box-shadow: var(--shadow-sm) !important;
+}
+
+button.primary:hover {
+    background: linear-gradient(135deg, var(--primary-hover), var(--accent-hover)) !important;
+    transform: translateY(-0.0625rem) !important;
+    box-shadow: var(--shadow-md) !important;
+}
+
+button.secondary {
+    background: transparent !important;
+    border: 0.0625rem solid var(--border-color-primary) !important;
+    border-radius: var(--border-radius) !important;
+    color: var(--body-text-color) !important;
+    font-weight: 500 !important;
+    font-size: 0.875rem !important; /* Relative font size */
+}
+
+/* Slider Styles */
+.slider_input_container input[type="range"][name="cowbell"] {
+    -webkit-appearance: none !important;
+    width: 100% !important;
+    height: 0.5rem !important; /* Relative height */
+    border-radius: var(--border-radius) !important;
+    background: linear-gradient(90deg, var(--primary-color), var(--accent-color)) !important;
+    outline: none !important;
+}
+
+.slider_input_container input[type="range"][name="cowbell"]::-webkit-slider-thumb {
+    -webkit-appearance: none !important;
+    width: 1rem !important; /* Relative size */
+    height: 1rem !important;
+    border-radius: 50% !important;
+    background: var(--accent-color) !important;
+    cursor: pointer !important;
+    box-shadow: var(--shadow-sm) !important;
+    border: 0.0625rem solid var(--border-color-primary) !important;
+}
+
+.slider_input_container input[type="range"][name="cowbell"]::-webkit-slider-thumb:hover {
+    background: var(--accent-color) !important;
+    box-shadow: var(--shadow-md) !important;
+}
+
+.slider_input_container input[type="range"][name="cowbell"]::-moz-range-track {
+    height: 0.5rem !important; /* Relative height */
+    border-radius: var(--border-radius) !important;
+    background: linear-gradient(90deg, var(--primary-color), var(--accent-color)) !important;
+}
+
+.slider_input_container input[type="range"][name="cowbell"]::-moz-range-thumb {
+    width: 1rem !important; /* Relative size */
+    height: 1rem !important;
+    border-radius: 50% !important;
+    background: var(--accent-color) !important;
+    cursor: pointer !important;
+    box-shadow: var(--shadow-sm) !important;
+    border: 0.0625rem solid var(--border-color-primary) !important;
+}
+
+.slider_input_container input[type="range"][name="cowbell"]::-moz-range-thumb:hover {
+    background: var(--accent-color) !important;
+    box-shadow: var(--shadow-md) !important;
+}
+
+/* Header Styles */
+h1, h2, h3, h4, h5, h6 {
+    font-weight: 700 !important;
+    color: var(--body-text-color) !important;
+    letter-spacing: -0.02em !important;
+}
+
+h1 {
+    font-size: 2.5rem !important; /* Kept as is, suitable for zooming */
+    margin-bottom: 1rem !important;
+}
+
+h2 {
+    font-size: 1.75rem !important; /* Kept as is, suitable for zooming */
+    margin: 1.5rem 0 1rem 0 !important;
+}
+
+/* Text Styles */
+p, .prose {
+    color: var(--body-text-color-subdued) !important;
+    line-height: 1.6 !important;
+    font-size: 1rem !important; /* Relative font size */
+}
+
+/* Alert/Notification Styles */
+.alert-info {
+    background: linear-gradient(135deg, #dbeafe, #bfdbfe) !important;
+    border: 0.0625rem solid #93c5fd !important;
+    border-radius: var(--border-radius) !important;
+    color: #1e40af !important;
+    font-size: 0.875rem !important; /* Relative font size */
+}
+
+.alert-warning {
+    background: linear-gradient(135deg, #fef3c7, #fde68a) !important;
+    border: 0.0625rem solid #fcd34d !important;
+    border-radius: var(--border-radius) !important;
+    color: #92400e !important;
+    font-size: 0.875rem !important; /* Relative font size */
+}
+
+.alert-error {
+    background: linear-gradient(135deg, #fecaca, #fca5a5) !important;
+    border: 0.0625rem solid #f87171 !important;
+    border-radius: var(--border-radius) !important;
+    color: #991b1b !important;
+    font-size: 0.875rem !important; /* Relative font size */
+}
+
+/* Scrollbar (Webkit browsers) */
+::-webkit-scrollbar {
+    width: 0.5rem !important; /* Relative size */
+    height: 0.5rem !important;
+}
+
+::-webkit-scrollbar-track {
+    background: var(--background-fill-secondary) !important;
+    border-radius: 0.25rem !important;
+}
+
+::-webkit-scrollbar-thumb {
+    background: var(--secondary-color) !important;
+    border-radius: 0.25rem !important;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: var(--primary-color) !important;
+}
+
+/* Tab Styles */
+.gradio-container .tabs button {
+    font-size: 1.0625rem !important; /* Relative font size (17px equivalent) */
+    font-weight: bold !important;
+}
+
+/* Dark Theme Specific Overrides */
+@media (prefers-color-scheme: dark) {
+    :root {
+        --shadow-sm: 0 0.0625rem 0.125rem 0 rgba(0, 0, 0, 0.2);
+        --shadow-md: 0 0.25rem 0.375rem -0.0625rem rgba(0, 0, 0, 0.3);
+        --shadow-lg: 0 0.625rem 0.9375rem -0.1875rem rgba(0, 0, 0, 0.3);
+    }
+    p, .prose {
+        color: #d1d5db !important; /* Lighter gray for better readability in dark mode */
+    }
+}
+
+/* Light Theme Specific Overrides */
+@media (prefers-color-scheme: light) {
+    .gradio-container {
+        background: linear-gradient(135deg, #f8fafc, #f1f5f9) !important;
+    }
+    p, .prose {
+        color: #4b5563 !important; /* Darker gray for better contrast in light mode */
+    }
+}
+
+/* Responsive adjustments for zoom */
+@media screen and (max-width: 48rem) { /* 768px equivalent */
+    .gradio-container {
+        padding: 0.625rem !important;
+    }
+    h1 {
+        font-size: 2rem !important;
+    }
+    h2 {
+        font-size: 1.5rem !important;
+    }
+    button.primary {
+        padding: 0.5rem 1rem !important;
+        font-size: 0.875rem !important;
+    }
 }