DreamStream-1 commited on
Commit
8c6c171
·
verified ·
1 Parent(s): 98fd5cd

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +31 -6
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 color matches input fields */
303
  color: white;
304
  border-radius: 8px;
305
- padding: 10px 20px; /* Reduced padding */
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: #8f167b; /* Darker shade on hover */
316
  }
317
 
318
  .gr-button:active {
319
- background-color: #7f156b; /* Even darker shade on active */
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 */