Spaces:
Sleeping
Sleeping
Update app.py
Browse files
app.py
CHANGED
@@ -281,6 +281,33 @@ h1 {
|
|
281 |
margin-bottom: 20px; /* Spacing below the header */
|
282 |
}
|
283 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
284 |
/* Input and Textarea Styling */
|
285 |
textarea, input {
|
286 |
background: white; /* Input background */
|
@@ -299,24 +326,22 @@ textarea:focus, input:focus {
|
|
299 |
|
300 |
/* Button Styling */
|
301 |
.gr-button {
|
302 |
-
background-color: #3c6487; /* Button
|
303 |
color: white;
|
304 |
border-radius: 8px;
|
305 |
-
padding: 10px 20px; /*
|
306 |
font-size: 16px; /* Larger font size for buttons */
|
307 |
border: none; /* No border */
|
308 |
cursor: pointer; /* Pointer on hover */
|
309 |
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Shadow on button */
|
310 |
-
transition: background-color 0.3s ease, transform 0.2s ease; /* Smooth transition for hover effects */
|
311 |
-
width: auto; /* Set to auto to avoid stretching full width */
|
312 |
}
|
313 |
|
314 |
.gr-button:hover {
|
315 |
-
background-color: #
|
316 |
}
|
317 |
|
318 |
.gr-button:active {
|
319 |
-
background-color: #
|
320 |
}
|
321 |
|
322 |
/* DataFrame Container Styling */
|
|
|
281 |
margin-bottom: 20px; /* Spacing below the header */
|
282 |
}
|
283 |
|
284 |
+
/* Tab Button Styling */
|
285 |
+
button[role="tab"] {
|
286 |
+
background-color: transparent; /* Make background transparent */
|
287 |
+
color: #3c6487; /* Text color matching the theme */
|
288 |
+
border: none; /* Remove default button border */
|
289 |
+
padding: 10px 15px; /* Padding for buttons */
|
290 |
+
font-size: 1.2rem; /* Font size for tab buttons */
|
291 |
+
cursor: pointer; /* Pointer on hover */
|
292 |
+
text-decoration: none; /* Remove underline */
|
293 |
+
}
|
294 |
+
|
295 |
+
button[role="tab"]:hover {
|
296 |
+
color: #ae1c93; /* Change color on hover */
|
297 |
+
}
|
298 |
+
|
299 |
+
/* Add a custom underline effect */
|
300 |
+
button[role="tab"].selected::after {
|
301 |
+
content: ""; /* Empty content for underline */
|
302 |
+
display: block;
|
303 |
+
width: 100%; /* Full width */
|
304 |
+
height: 3px; /* Height of the underline */
|
305 |
+
background: #3c6487; /* Underline color */
|
306 |
+
position: absolute;
|
307 |
+
bottom: -5px; /* Position it below the text */
|
308 |
+
left: 0;
|
309 |
+
}
|
310 |
+
|
311 |
/* Input and Textarea Styling */
|
312 |
textarea, input {
|
313 |
background: white; /* Input background */
|
|
|
326 |
|
327 |
/* Button Styling */
|
328 |
.gr-button {
|
329 |
+
background-color: #3c6487; /* Button background */
|
330 |
color: white;
|
331 |
border-radius: 8px;
|
332 |
+
padding: 10px 20px; /* Adjusted padding */
|
333 |
font-size: 16px; /* Larger font size for buttons */
|
334 |
border: none; /* No border */
|
335 |
cursor: pointer; /* Pointer on hover */
|
336 |
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Shadow on button */
|
|
|
|
|
337 |
}
|
338 |
|
339 |
.gr-button:hover {
|
340 |
+
background-color: #ae1c93; /* Change button color on hover */
|
341 |
}
|
342 |
|
343 |
.gr-button:active {
|
344 |
+
background-color: #8f167b; /* Even darker shade on active */
|
345 |
}
|
346 |
|
347 |
/* DataFrame Container Styling */
|