Update app.py

app.py

@@ -173,92 +173,97 @@ def classify_display(text):
 
 # ---------------- CSS refinado - tema claro agradável ----------------
 custom_css = """
-/* ======== Tema Claro – Council Topics Classifier ======== */
 
-/* Fundo principal */
-body, .gradio-container, .gr-interface, .gr-block, .wrap.svelte-1ipelgc {
+/* Fundo geral e texto */
+body, .gradio-container, .gr-block, .wrap.svelte-1ipelgc {
     background-color: #ffffff !important;
-    color: #222222 !important;
+    color: #1e1e1e !important;
 }
 
-/* Cabeçalho e títulos */
-h1, h2, h3, h4, h5, h6, label, .gr-text-input label, .gr-textbox label {
-    color: #222222 !important;
-    font-weight: 600 !important;
+/* Cabeçalho principal */
+h1, h2, h3 {
+    text-align: center !important;
+    color: #1f77b4 !important;
+    font-weight: 700 !important;
+    margin-bottom: 1rem !important;
 }
 
-/* Texto geral */
-p, span, div, .prose * {
+/* Texto descritivo abaixo do título */
+p, label, span {
     color: #333333 !important;
 }
 
-/* Inputs e caixas */
-textarea, input[type="text"], .gr-textbox, .gr-input, .gr-box, .gr-form, .gr-panel {
-    background-color: #ffffff !important;
-    color: #222222 !important;
+/* Caixas de texto e inputs */
+textarea, input[type="text"], .gr-textbox, .gr-input {
+    background-color: #f0f2f6 !important;
+    color: #1e1e1e !important;
     border: 1px solid #d1d5db !important;
-    border-radius: 10px !important;
-    box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
+    border-radius: 8px !important;
+    padding: 0.6rem !important;
 }
 
 /* Botões */
 button, .gr-button {
-    background-color: #3b82f6 !important; /* azul suave */
+    background-color: #1f77b4 !important;
     color: white !important;
-    border-radius: 10px !important;
     font-weight: 600 !important;
+    border-radius: 8px !important;
     border: none !important;
-    transition: background-color 0.2s ease-in-out !important;
+    transition: background-color 0.2s ease-in-out;
 }
 button:hover, .gr-button:hover {
-    background-color: #2563eb !important; /* azul mais escuro no hover */
+    background-color: #1663a6 !important;
 }
 
-/* Dropdowns */
-select {
-    background-color: #ffffff !important;
-    color: #222222 !important;
-    border: 1px solid #d1d5db !important;
-    border-radius: 10px !important;
+/* Caixas de saída (semelhantes às "segment-box" do demo) */
+.output-class, .gr-panel.output, .output-box, .gr-highlighted, .gr-card {
+    background-color: #f0f2f6 !important;
+    border-left: 4px solid #1f77b4 !important;
+    border-radius: 8px !important;
+    padding: 1rem !important;
+    margin: 0.5rem 0 !important;
 }
 
-/* Caixas de saída */
-.output-class, .output-text, .gr-highlighted, .output-box, .gr-panel.output {
-    background-color: #f9fafb !important;
-    color: #111827 !important;
-    border: 1px solid #e5e7eb !important;
-    border-radius: 10px !important;
-}
-
-/* Sugestões ou resultados */
-.suggestions-box, .gradio-container .gr-column.output {
-    background-color: #ffffff !important;
-    border: 1px solid #e5e7eb !important;
-    box-shadow: 0 1px 4px rgba(0,0,0,0.04) !important;
+/* Cabeçalhos de seções */
+.gradio-container .gr-group label, .gradio-container .gr-panel label {
+    font-weight: 600 !important;
+    color: #1f77b4 !important;
 }
 
-/* Scrollbars subtis */
+/* Scrollbars suaves */
 ::-webkit-scrollbar {
     width: 8px;
 }
 ::-webkit-scrollbar-thumb {
-    background-color: #d1d5db;
+    background-color: #c1c1c1;
     border-radius: 4px;
 }
 
-/* Links */
-a {
-    color: #2563eb !important;
+/* Ajustes visuais */
+.gradio-container .prose {
+    text-align: justify !important;
 }
-a:hover {
-    text-decoration: underline !important;
+.gradio-container .gr-column {
+    padding: 0.5rem !important;
 }
 
-/* Ocultar bordas de debug / espaços */
-div[style*="background: var(--neutral-950)"] {
-    background: none !important;
+/* Modo escuro (automático) */
+@media (prefers-color-scheme: dark) {
+    body, .gradio-container {
+        background-color: #262730 !important;
+        color: #e0e0e0 !important;
+    }
+    textarea, input, .gr-textbox {
+        background-color: #3a3b46 !important;
+        color: #e0e0e0 !important;
+    }
+    .output-class, .gr-panel.output {
+        background-color: #3a3b46 !important;
+        border-left: 4px solid #1f77b4 !important;
+    }
 }
 
+
 """