Revamp CSS for a modern aesthetic with a light blue theme and improved component styling in Gradio app

app.py

@@ -264,44 +264,31 @@ def analyze_text(text: str, model_name: str) -> str:
 # Modern CSS with dark blue theme
 CUSTOM_CSS = """
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
-
 * {
     font-family: 'Inter', 'Noto Sans Thai', sans-serif !important;
 }
-
 .gradio-container {
     max-width: 1200px !important;
     margin: 0 auto !important;
-    background: linear-gradient(135deg, #1e3a8a 0%, #0f172a 100%) !important;
+    background: linear-gradient(135deg, #e0f7fa 0%, #b2f7ef 100%) !important;
     min-height: 100vh;
     padding: 20px;
 }
-
-.main-content {
-    background: rgba(15, 23, 42, 0.95) !important;
-    backdrop-filter: blur(20px) !important;
+.main-content, .glass-card {
+    background: rgba(255,255,255,0.95) !important;
+    backdrop-filter: blur(12px) !important;
     border-radius: 24px !important;
-    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
-    border: 1px solid rgba(59, 130, 246, 0.2) !important;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08) !important;
+    border: 1.5px solid #b2dfdb !important;
     overflow: hidden;
+    color: #1a3c3d !important;
 }
-
-.glass-card {
-    background: rgba(30, 58, 138, 0.9) !important;
-    backdrop-filter: blur(12px) !important;
-    border-radius: 16px !important;
-    border: 1px solid rgba(59, 130, 246, 0.3) !important;
-    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
-    transition: all 0.3s ease !important;
-}
-
 .glass-card:hover {
     transform: translateY(-2px) !important;
-    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
 }
-
 .gr-button {
-    background: linear-gradient(135deg, #3b82f6 0%, #1e3a8a 100%) !important;
+    background: linear-gradient(90deg, #26c6da 0%, #43e97b 100%) !important;
     border: none !important;
     border-radius: 12px !important;
     padding: 12px 24px !important;
@@ -309,88 +296,64 @@ CUSTOM_CSS = """
     text-transform: uppercase !important;
     letter-spacing: 0.5px !important;
     transition: all 0.3s ease !important;
-    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4) !important;
-    color: #f8fafc !important;
+    box-shadow: 0 4px 15px rgba(38, 198, 218, 0.13) !important;
+    color: #fff !important;
 }
-
 .gr-button:hover {
     transform: translateY(-2px) !important;
-    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.6) !important;
+    box-shadow: 0 6px 20px rgba(38, 198, 218, 0.18) !important;
 }
-
 .gr-button.secondary {
-    background: linear-gradient(135deg, #60a5fa 0%, #93c5fd 100%) !important;
-    box-shadow: 0 4px 15px rgba(96, 165, 250, 0.4) !important;
+    background: linear-gradient(90deg, #b2f7ef 0%, #e0f7fa 100%) !important;
+    color: #1a3c3d !important;
+    box-shadow: 0 4px 15px rgba(178, 247, 239, 0.13) !important;
 }
-
 .gr-button.secondary:hover {
-    box-shadow: 0 6px 20px rgba(96, 165, 250, 0.6) !important;
+    box-shadow: 0 6px 20px rgba(178, 247, 239, 0.18) !important;
 }
-
 .gr-textbox textarea, .gr-textbox input {
     border-radius: 12px !important;
-    border: 2px solid rgba(59, 130, 246, 0.3) !important;
+    border: 2px solid #b2dfdb !important;
     font-size: 16px !important;
     padding: 16px !important;
     transition: all 0.3s ease !important;
-    background: rgba(30, 41, 59, 0.9) !important;
-    color: #f8fafc !important;
+    background: #f8fffe !important;
+    color: #1a3c3d !important;
 }
-
 .gr-textbox textarea:focus, .gr-textbox input:focus {
-    border-color: #3b82f6 !important;
-    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2) !important;
+    border-color: #26c6da !important;
+    box-shadow: 0 0 0 3px rgba(38, 198, 218, 0.13) !important;
     transform: scale(1.01) !important;
 }
-
 .gr-dropdown > div {
     border-radius: 12px !important;
-    border: 2px solid rgba(59, 130, 246, 0.3) !important;
-    background: rgba(30, 41, 59, 0.9) !important;
-    color: #f8fafc !important;
+    border: 2px solid #b2dfdb !important;
+    background: #f8fffe !important;
+    color: #1a3c3d !important;
 }
-
 .gr-dropdown > div:focus-within {
-    border-color: #3b82f6 !important;
-    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2) !important;
+    border-color: #26c6da !important;
+    box-shadow: 0 0 0 3px rgba(38, 198, 218, 0.13) !important;
 }
-
-.gr-panel {
+.gr-panel, .gr-form, .gr-box {
     border-radius: 16px !important;
     border: none !important;
     background: transparent !important;
 }
-
-.gr-form {
-    background: transparent !important;
-    border: none !important;
-}
-
-.gr-box {
-    border: none !important;
-    background: transparent !important;
-}
-
-/* Custom scrollbar */
 ::-webkit-scrollbar {
     width: 8px;
 }
-
 ::-webkit-scrollbar-track {
-    background: rgba(15, 23, 42, 0.3);
+    background: #e0f7fa;
     border-radius: 4px;
 }
-
 ::-webkit-scrollbar-thumb {
-    background: rgba(59, 130, 246, 0.6);
+    background: #26c6da;
     border-radius: 4px;
 }
-
 ::-webkit-scrollbar-thumb:hover {
-    background: rgba(59, 130, 246, 0.8);
+    background: #43e97b;
 }
-
-/* Animation for content */
 @keyframes slideIn {
     from {
         opacity: 0;
@@ -401,29 +364,24 @@ CUSTOM_CSS = """
         transform: translateY(0);
     }
 }
-
 .gr-column, .gr-row {
     animation: slideIn 0.6s ease-out !important;
 }
-
-/* Enhanced examples styling */
 .gr-examples {
     border-radius: 16px !important;
     overflow: hidden !important;
 }
-
 .gr-examples .gr-button {
-    background: rgba(59, 130, 246, 0.2) !important;
-    border: 1px solid rgba(59, 130, 246, 0.4) !important;
+    background: #e0f7fa !important;
+    border: 1px solid #b2dfdb !important;
     margin: 4px !important;
     font-size: 14px !important;
     text-transform: none !important;
     letter-spacing: normal !important;
-    color: #f8fafc !important;
+    color: #1a3c3d !important;
 }
-
 .gr-examples .gr-button:hover {
-    background: rgba(59, 130, 246, 0.4) !important;
+    background: #b2f7ef !important;
     transform: scale(1.02) !important;
 }
 """
@@ -443,12 +401,12 @@ with gr.Blocks(
     # Header with dark blue design
     gr.HTML("""
     <div style="text-align: center; padding: 40px 0 30px 0;">
-        <div style="display: inline-block; background: rgba(30, 58, 138, 0.9); backdrop-filter: blur(10px); padding: 20px 40px; border-radius: 20px; border: 1px solid rgba(59, 130, 246, 0.3); margin-bottom: 20px;">
-            <h1 style="font-size: 3.5em; margin: 0; color: #f8fafc; font-weight: 800; text-shadow: 0 4px 8px rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; gap: 20px;">
+        <div style="display: inline-block; background: #e0f7fa; padding: 20px 40px; border-radius: 20px; border: 1.5px solid #b2dfdb; margin-bottom: 20px; box-shadow: 0 4px 16px #b2dfdb55;">
+            <h1 style="font-size: 3.5em; margin: 0; color: #1a3c3d; font-weight: 800; text-shadow: 0 4px 8px #b2dfdb55; display: flex; align-items: center; justify-content: center; gap: 20px;">
                 <span style="font-size: 1.2em;">🧠</span>
                 Thai Sentiment AI
             </h1>
-            <p style="font-size: 1.4em; color: #cbd5e1; margin: 10px 0 0 0; font-weight: 300; text-shadow: 0 2px 4px rgba(0,0,0,0.3);">
+            <p style="font-size: 1.4em; color: #26c6da; margin: 10px 0 0 0; font-weight: 400; text-shadow: 0 2px 4px #b2dfdb33;">
                 ระบบวิเคราะห์ความรู้สึกภาษาไทยด้วย AI ที่ทันสมัยและแม่นยำ
             </p>
         </div>