Makima57 commited on
Commit
72557af
Β·
verified Β·
1 Parent(s): 8d5df47

Update app.py

Browse files

css try 3 improvement

Files changed (1) hide show
  1. app.py +37 -13
app.py CHANGED
@@ -86,18 +86,31 @@ custom_css = """
86
  textarea {
87
  min-height: 150px;
88
  }
89
- .gr-button {
90
- background-color: #007acc;
91
- color: white;
92
- border-radius: 10px;
93
- font-size: 18px;
94
- font-weight: bold;
95
- padding: 10px 20px;
96
- font-family: 'Montserrat', sans-serif;
97
- transition: background-color 0.3s ease;
 
 
 
 
 
 
 
 
 
 
 
 
 
98
  }
99
- .gr-button:hover {
100
- background-color: #005f99;
101
  }
102
  .gr-output {
103
  background-color: #e0f7fa;
@@ -127,6 +140,17 @@ custom_css = """
127
  font-family: 'Courier New', Courier, monospace;
128
  background-color: #f3f4f6;
129
  color: #005f99;
 
 
 
 
 
 
 
 
 
 
 
130
  }
131
  """
132
 
@@ -134,8 +158,8 @@ custom_css = """
134
  interface = gr.Interface(
135
  fn=gradio_interface,
136
  inputs=[
137
- gr.Textbox(label="🧠 Math Question", placeholder="Enter your math question here...", elem_id="math_question"),
138
- gr.Textbox(label="βœ… Correct Answer", placeholder="Enter the correct answer here...", elem_id="correct_answer"),
139
  ],
140
  outputs=[
141
  gr.JSON(label="πŸ“Š Results", elem_id="results"), # Display the results in a JSON format
 
86
  textarea {
87
  min-height: 150px;
88
  }
89
+ .gr-button-primary {
90
+ background-color: #007acc !important;
91
+ color: white !important;
92
+ border-radius: 10px !important;
93
+ font-size: 18px !important;
94
+ font-weight: bold !important;
95
+ padding: 10px 20px !important;
96
+ font-family: 'Montserrat', sans-serif !important;
97
+ transition: background-color 0.3s ease !important;
98
+ }
99
+ .gr-button-primary:hover {
100
+ background-color: #005f99 !important;
101
+ }
102
+ .gr-button-secondary {
103
+ background-color: #f44336 !important;
104
+ color: white !important;
105
+ border-radius: 10px !important;
106
+ font-size: 18px !important;
107
+ font-weight: bold !important;
108
+ padding: 10px 20px !important;
109
+ font-family: 'Montserrat', sans-serif !important;
110
+ transition: background-color 0.3s ease !important;
111
  }
112
+ .gr-button-secondary:hover {
113
+ background-color: #c62828 !important;
114
  }
115
  .gr-output {
116
  background-color: #e0f7fa;
 
140
  font-family: 'Courier New', Courier, monospace;
141
  background-color: #f3f4f6;
142
  color: #005f99;
143
+ font-size: 16px;
144
+ padding: 10px;
145
+ border-radius: 8px;
146
+ }
147
+ /* Make the JSON {} icon smaller */
148
+ .gr-output-json .json-key {
149
+ font-size: 20px !important;
150
+ }
151
+ .gr-output-json .json-key img {
152
+ width: 20px !important;
153
+ height: 20px !important;
154
  }
155
  """
156
 
 
158
  interface = gr.Interface(
159
  fn=gradio_interface,
160
  inputs=[
161
+ gr.Textbox(label="🧠 <b>Math Question</b>", placeholder="Enter your math question here...", elem_id="math_question"),
162
+ gr.Textbox(label="βœ… <b>Correct Answer</b>", placeholder="Enter the correct answer here...", elem_id="correct_answer"),
163
  ],
164
  outputs=[
165
  gr.JSON(label="πŸ“Š Results", elem_id="results"), # Display the results in a JSON format