Update app.py

app.py

@@ -27,202 +27,36 @@ def arithmetic(num1, num2, operation):
     return res[0]
 
 custom_css = """
-    /* Define color variables for the dark theme */
-    :root {
-      --background-color: #121212;
-      --surface-color: #1e1e1e;
-      --primary-color: #3a6ea5;
-      --accent-color: #6d9eeb;
-      --text-primary: #ffffff;
-      --text-secondary: #b0b0b0;
-      --border-color: #2c2c2c;
-      --input-background: #2a2a2a;
-      --button-gradient-start: #4568dc;
-      --button-gradient-end: #0f4c81;
-      --box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
-    }
-    
-    /* Global styles for the Gradio app */
+    /* Ultra minimal dark theme with only essential styling */
+
+    /* Dark background and light text */
     body {
-      background-color: var(--background-color) !important;
-      color: var(--text-primary) !important;
-      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
-    }
-    
-    /* Override Gradio's container styles */
-    .gradio-container {
-      width: 100% !important;
-      max-width: none !important;
-      margin: 0 auto !important;
-      background-color: var(--background-color) !important;
-    }
-    
-    /* Header styling */
-    h1, h2, h3, h4, h5, h6 {
-      color: var(--text-primary) !important;
-      font-weight: 600 !important;
-    }
-    
-    /* Make the main title stand out */
-    h1 strong {
-      background: linear-gradient(135deg, #4568dc, #6d9eeb);
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-      background-clip: text;
-    }
-    
-    /* Style the blocks and rows */
-    .block, .gr-box, .gr-form, .gr-panel {
-      background-color: var(--surface-color) !important;
-      border-radius: 8px !important;
-      border: 1px solid var(--border-color) !important;
-      box-shadow: var(--box-shadow) !important;
-      padding: 16px !important;
-      margin-bottom: 20px !important;
-    }
-    
-    /* Style labels */
-    label, .gr-label {
-      color: var(--text-primary) !important;
-      font-weight: 500 !important;
-      margin-bottom: 8px !important;
-    }
-    
-    /* Style number inputs */
-    input[type="number"], .gr-text-input, .gr-input {
-      background-color: var(--input-background) !important;
-      color: var(--text-primary) !important;
-      border: 1px solid var(--border-color) !important;
-      border-radius: 6px !important;
-      padding: 12px 16px !important;
-      font-size: 16px !important;
-      transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
-    }
-    
-    input[type="number"]:focus, .gr-text-input:focus, .gr-input:focus {
-      border-color: var(--accent-color) !important;
-      box-shadow: 0 0 0 2px rgba(109, 158, 235, 0.2) !important;
-      outline: none !important;
-    }
-    
-    /* Style radio buttons */
-    .gr-radio-group label {
-      color: var(--text-secondary) !important;
-    }
-    
-    .gr-radio {
-      accent-color: var(--accent-color) !important;
-    }
-    
-    .gr-checkbox-label, .gr-radio-label {
-      color: var(--text-secondary) !important;
+      background-color: #121212;
+      color: #ffffff;
     }
     
-    /* Override radio button containers */
-    .gr-radio-group, .gr-form {
-      background-color: var(--surface-color) !important;
-      padding: 12px !important;
-      border-radius: 8px !important;
-      border: 1px solid var(--border-color) !important;
+    /* Make inputs visible on dark background */
+    input, textarea, select {
+      background-color: #2a2a2a;
+      color: #ffffff;
+      border: 1px solid #444;
     }
     
-    /* Style button with gradient */
-    button, .gr-button {
-      background: linear-gradient(135deg, var(--button-gradient-start), var(--button-gradient-end)) !important;
-      color: white !important;
-      border: none !important;
-      padding: 12px 24px !important;
-      border-radius: 6px !important;
-      cursor: pointer !important;
-      font-weight: 600 !important;
-      letter-spacing: 0.5px !important;
-      transition: all 0.3s ease !important;
-      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2) !important;
-      text-transform: uppercase !important;
-      font-size: 14px !important;
-      width: auto !important;
-      display: inline-block !important;
+    /* Simple gradient button */
+    button {
+      background: linear-gradient(135deg, #4568dc, #0f4c81);
+      color: white;
     }
     
-    button:hover, .gr-button:hover {
-      background: linear-gradient(135deg, #5273e3, #1a5fa0) !important;
-      box-shadow: 0 6px 8px rgba(0, 0, 0, 0.3) !important;
-      transform: translateY(-1px) !important;
+    /* Ensure result is visible */
+    #result, .output-class, .gr-number-output {
+      color: #ffffff !important;
+      font-size: large;
     }
     
-    button:active, .gr-button:active {
-      transform: translateY(1px) !important;
-      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
-    }
-    
-    /* Result section styling */
-    .gr-output-box {
-      background-color: var(--surface-color) !important;
-      border: 1px solid var(--border-color) !important;
-      border-radius: 8px !important;
-      padding: 16px !important;
-    }
-    
-    /* Result number styling */
-    .gr-number-output {
-      font-size: 24px !important;
-      font-weight: 700 !important;
-      color: var(--accent-color) !important;
-      text-align: center !important;
-    }
-    
-    /* For the result header */
-    h3 strong {
-      color: var(--accent-color) !important;
-    }
-    
-    /* Add a subtle border to all rows */
-    .gr-row {
-      margin-bottom: 20px !important;
-    }
-    
-    /* Remove footer */
+    /* Hide footer */
     footer {
-      display: none !important;
-    }
-    
-    /* Fix any dark text on dark background issues */
-    .dark {
-      color: var(--text-primary) !important;
-    }
-    
-    /* Additional spacing for the operation radio buttons */
-    #operation {
-      margin-top: 10px !important;
-      margin-bottom: 20px !important;
-    }
-    
-    /* Add a subtle gradient background to the app container */
-    .gradio-app {
-      background: linear-gradient(160deg, #121212 0%, #1a1f2c 100%) !important;
-      min-height: 100vh !important;
-    }
-    
-    /* Ensure number inputs don't have spinner arrows in Firefox */
-    input[type=number] {
-      -moz-appearance: textfield !important;
-    }
-    
-    /* Remove spinner arrows from number inputs in other browsers */
-    input::-webkit-outer-spin-button,
-    input::-webkit-inner-spin-button {
-      -webkit-appearance: none !important;
-      margin: 0 !important;
-    }
-    
-    /* Make the result stand out more */
-    #result {
-      font-size: 28px !important;
-      padding: 16px !important;
-      text-align: center !important;
-      background-color: rgba(58, 110, 165, 0.1) !important;
-      border-radius: 8px !important;
-      margin-top: 10px !important;
+      display: none;
     }
 """
 with gr.Blocks(