Update app.py

app.py

@@ -27,82 +27,202 @@ def arithmetic(num1, num2, operation):
     return res[0]
 
 custom_css = """
-        /* Define color variables for light mode */
+    /* Define color variables for the dark theme */
     :root {
-        --background-color-light: #ffffff;
-        --text-color-light: #000000;
-        --input-background-light: #f0f0f0;
-        --input-text-light: #000000;
-        --button-background-light: #4CAF50;
-        --button-text-light: #ffffff;
-    }
-    
-    /* Define color variables for dark mode */
-    @media (prefers-color-scheme: dark) {
-        :root {
-            --background-color-dark: #121212;
-            --text-color-dark: #ffffff;
-            --input-background-dark: #1e1e1e;
-            --input-text-dark: #ffffff;
-            --button-background-dark: #2a5298;
-            --button-text-dark: #ffffff;
-        }
-    }
-    
-    /* Apply background and text colors based on the current mode */
+      --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 */
     body {
-        background-color: var(--background-color-light);
-        color: var(--text-color-light);
-    }
-    
-    @media (prefers-color-scheme: dark) {
-        body {
-            background-color: var(--background-color-dark);
-            color: var(--text-color-dark);
-        }
-    }
-    
-    /* Style the input fields */
-    input, textarea {
-        background-color: var(--input-background-light);
-        color: var(--input-text-light);
-        border: 1px solid #ccc;
-        padding: 10px;
-        border-radius: 5px;
-        width: 100%;
-        box-sizing: border-box;
-    }
-    
-    @media (prefers-color-scheme: dark) {
-        input, textarea {
-            background-color: var(--input-background-dark);
-            color: var(--input-text-dark);
-            border: 1px solid #444;
-        }
-    }
-    
-    /* Style the buttons */
-    button {
-        background-color: var(--button-background-light);
-        color: var(--button-text-light);
-        border: none;
-        padding: 10px 20px;
-        border-radius: 5px;
-        cursor: pointer;
-        transition: background-color 0.3s ease;
-    }
-    
-    @media (prefers-color-scheme: dark) {
-        button {
-            background-color: var(--button-background-dark);
-            color: var(--button-text-dark);
-        }
-        button:hover {
-            background-color: #1e3c72;
-        }
-    }
-        /* Hide footer display */
-        footer {display: none !important;}
+      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 {
+      max-width: 800px !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;
+    }
+    
+    /* 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;
+    }
+    
+    /* 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;
+    }
+    
+    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;
+    }
+    
+    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 */
+    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;
+    }
 """
 with gr.Blocks(
     title="R-Powered Calculator",