chansung commited on
Commit
10769e2
·
verified ·
1 Parent(s): cd01387

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. gradio_app.py +14 -98
gradio_app.py CHANGED
@@ -302,10 +302,10 @@ def create_gradio_interface():
302
  display: flex !important;
303
  }
304
 
305
- /* Modal Content - with dark mode support */
306
  .modal-content {
307
- background: var(--background-fill-primary, #fefcfa) !important;
308
- border: 2px solid var(--border-color-primary, #f0c5b8) !important;
309
  border-radius: 16px !important;
310
  max-width: 90vw !important;
311
  max-height: 80vh !important;
@@ -314,7 +314,7 @@ def create_gradio_interface():
314
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important;
315
  overflow: hidden !important;
316
  flex-direction: column !important;
317
- color: var(--body-text-color, #2d3748) !important;
318
  }
319
 
320
  /* Modal Header */
@@ -323,19 +323,19 @@ def create_gradio_interface():
323
  align-items: center !important;
324
  margin-bottom: 1rem !important;
325
  padding-bottom: 1rem !important;
326
- border-bottom: 1px solid var(--border-color-primary, #f0c5b8) !important;
327
  }
328
 
329
  .modal-header h3 {
330
- color: var(--body-text-color, #2d3748) !important;
331
  margin: 0 !important;
332
  }
333
 
334
- /* Modal Close Button - dark mode friendly */
335
  .modal-close-btn {
336
- background: var(--button-secondary-background-fill, #f4e6e1) !important;
337
- border: 1px solid var(--button-secondary-border-color, #e8a491) !important;
338
- color: var(--button-secondary-text-color, #5a3a2a) !important;
339
  font-weight: 700 !important;
340
  font-size: 1.2rem !important;
341
  padding: 0.4rem 0.6rem !important;
@@ -347,103 +347,19 @@ def create_gradio_interface():
347
  }
348
 
349
  .modal-close-btn:hover {
350
- background: var(--button-secondary-background-fill-hover, #f0c5b8) !important;
351
  }
352
 
353
- /* Prompt Container - dark mode friendly */
354
  .prompt-container {
355
- background: var(--input-background-fill, #fcf3f0) !important;
356
- border: 1px solid var(--input-border-color, #f0c5b8) !important;
357
  border-radius: 8px !important;
358
  max-height: 400px !important;
359
  overflow-y: auto !important;
360
  flex: 1 !important;
361
  }
362
 
363
- /* Dark mode specific overrides - both system and Gradio dark mode */
364
- @media (prefers-color-scheme: dark),
365
- .dark .modal-content,
366
- .gradio-container.dark .modal-content,
367
- html.dark .modal-content,
368
- body.dark .modal-content {
369
- .modal-content {
370
- background: #1a1a1a !important;
371
- border: 2px solid #404040 !important;
372
- color: #e5e5e5 !important;
373
- }
374
-
375
- .modal-header {
376
- border-bottom: 1px solid #404040 !important;
377
- }
378
-
379
- .modal-header h3 {
380
- color: #e5e5e5 !important;
381
- }
382
-
383
- .modal-close-btn {
384
- background: #404040 !important;
385
- border: 1px solid #666 !important;
386
- color: #e5e5e5 !important;
387
- }
388
-
389
- .modal-close-btn:hover {
390
- background: #555 !important;
391
- }
392
-
393
- .prompt-container {
394
- background: #2a2a2a !important;
395
- border: 1px solid #404040 !important;
396
- }
397
- }
398
-
399
- /* Gradio dark mode specific targeting */
400
- .dark .modal-content,
401
- .gradio-container.dark .modal-content,
402
- html.dark .modal-content,
403
- body.dark .modal-content {
404
- background: #1a1a1a !important;
405
- border: 2px solid #404040 !important;
406
- color: #e5e5e5 !important;
407
- }
408
-
409
- .dark .modal-header,
410
- .gradio-container.dark .modal-header,
411
- html.dark .modal-header,
412
- body.dark .modal-header {
413
- border-bottom: 1px solid #404040 !important;
414
- }
415
-
416
- .dark .modal-header h3,
417
- .gradio-container.dark .modal-header h3,
418
- html.dark .modal-header h3,
419
- body.dark .modal-header h3 {
420
- color: #e5e5e5 !important;
421
- }
422
-
423
- .dark .modal-close-btn,
424
- .gradio-container.dark .modal-close-btn,
425
- html.dark .modal-close-btn,
426
- body.dark .modal-close-btn {
427
- background: #404040 !important;
428
- border: 1px solid #666 !important;
429
- color: #e5e5e5 !important;
430
- }
431
-
432
- .dark .modal-close-btn:hover,
433
- .gradio-container.dark .modal-close-btn:hover,
434
- html.dark .modal-close-btn:hover,
435
- body.dark .modal-close-btn:hover {
436
- background: #555 !important;
437
- }
438
-
439
- .dark .prompt-container,
440
- .gradio-container.dark .prompt-container,
441
- html.dark .prompt-container,
442
- body.dark .prompt-container {
443
- background: #2a2a2a !important;
444
- border: 1px solid #404040 !important;
445
- }
446
-
447
 
448
 
449
  .generate-btn:hover {
 
302
  display: flex !important;
303
  }
304
 
305
+ /* Modal Content - consistent light theme */
306
  .modal-content {
307
+ background: #fefcfa !important;
308
+ border: 2px solid #f0c5b8 !important;
309
  border-radius: 16px !important;
310
  max-width: 90vw !important;
311
  max-height: 80vh !important;
 
314
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important;
315
  overflow: hidden !important;
316
  flex-direction: column !important;
317
+ color: #2d3748 !important;
318
  }
319
 
320
  /* Modal Header */
 
323
  align-items: center !important;
324
  margin-bottom: 1rem !important;
325
  padding-bottom: 1rem !important;
326
+ border-bottom: 1px solid #f0c5b8 !important;
327
  }
328
 
329
  .modal-header h3 {
330
+ color: #2d3748 !important;
331
  margin: 0 !important;
332
  }
333
 
334
+ /* Modal Close Button */
335
  .modal-close-btn {
336
+ background: #f4e6e1 !important;
337
+ border: 1px solid #e8a491 !important;
338
+ color: #5a3a2a !important;
339
  font-weight: 700 !important;
340
  font-size: 1.2rem !important;
341
  padding: 0.4rem 0.6rem !important;
 
347
  }
348
 
349
  .modal-close-btn:hover {
350
+ background: #f0c5b8 !important;
351
  }
352
 
353
+ /* Prompt Container */
354
  .prompt-container {
355
+ background: #fcf3f0 !important;
356
+ border: 1px solid #f0c5b8 !important;
357
  border-radius: 8px !important;
358
  max-height: 400px !important;
359
  overflow-y: auto !important;
360
  flex: 1 !important;
361
  }
362
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
363
 
364
 
365
  .generate-btn:hover {