openfree commited on
Commit
27f0619
·
verified ·
1 Parent(s): 589f34b

Update app.css

Browse files
Files changed (1) hide show
  1. app.css +147 -388
app.css CHANGED
@@ -46,6 +46,7 @@ body {
46
  line-height: 1.5;
47
  }
48
 
 
49
  .left_header {
50
  display: flex;
51
  flex-direction: column;
@@ -74,7 +75,7 @@ body {
74
  color: var(--text-primary);
75
  }
76
 
77
- /* 패널 레이아웃 조정 - 높이 일치 */
78
  .equal-height-container {
79
  display: flex;
80
  min-height: 900px;
@@ -86,6 +87,19 @@ body {
86
  height: 100%;
87
  }
88
 
 
 
 
 
 
 
 
 
 
 
 
 
 
89
  /* 좌측 패널 상단 헤더 */
90
  .render_header {
91
  height: 30px;
@@ -129,16 +143,50 @@ body {
129
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
130
  }
131
 
132
- .history_chatbot button {
133
- background: none;
134
- border: none;
 
 
 
 
135
  }
136
 
137
- footer, .footer, div[class*="footer"], #footer {
138
- display: none !important;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
139
  }
140
 
141
- /* 우측 상단 버튼 영역 */
142
  .right-top-buttons {
143
  margin-bottom: 15px;
144
  background: linear-gradient(to right, var(--neutral-100), var(--neutral-200));
@@ -261,11 +309,11 @@ footer, .footer, div[class*="footer"], #footer {
261
  box-shadow: var(--shadow-md);
262
  }
263
 
 
264
  #component-0 textarea,
265
  .gradio-container textarea,
266
  .ant-input-textarea-large textarea {
267
- /* 텍스트 영역 높이 조정 */
268
- height: 790px !important; /* 버튼들이 상단으로 이동하여 높이 조정 */
269
  min-height: 300px !important;
270
  resize: vertical !important;
271
  border: 2px solid var(--neutral-200);
@@ -285,58 +333,33 @@ footer, .footer, div[class*="footer"], #footer {
285
  box-shadow: 0 0 0 3px rgba(102, 163, 255, 0.2);
286
  }
287
 
288
- .right_panel {
289
- position: relative;
290
- height: 900px;
291
- display: flex;
292
- flex-direction: column;
293
- padding-top: 0;
294
  }
295
 
296
- .panel {
297
  display: flex;
298
  flex-direction: column;
299
- height: 900px;
300
- background: var(--surface);
301
- border-radius: var(--radius-lg);
302
- box-shadow: var(--shadow-lg);
303
- border: 1px solid var(--neutral-300);
304
- overflow: hidden;
305
  }
306
 
307
- .input-panel {
 
308
  display: flex;
309
  flex-direction: column;
310
- margin-top: 0;
311
- background: var(--surface);
312
- border-radius: var(--radius-lg);
313
- border: 1px solid var(--neutral-300);
314
- box-shadow: var(--shadow-lg);
315
- padding: 15px;
316
- height: 870px; /* 버튼 영역 제외한 높이 */
317
- overflow: hidden;
318
  }
319
 
320
- .html_content {
321
- flex: 1;
322
- height: 870px; /* 헤더(30px)를 제외한 높이 */
323
- border-radius: 0 0 var(--radius-lg) var(--radius-lg);
324
- overflow: hidden;
325
- box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
326
- background: var(--surface);
327
- }
328
-
329
- .ant-input-textarea {
330
- display: flex;
331
- flex-direction: column;
332
  flex: 1;
333
  }
334
 
335
- /* 우측 박스 텍스트 폰트 크기 20% 감소 */
336
- .input-panel textarea,
337
- .input-panel .ant-input-textarea-large textarea,
338
- .input-panel .help-text {
339
- font-size: 0.8em; /* 기본 폰트 크기에서 20% 감소 */
340
  }
341
 
342
  /* 도움말 텍스트 스타일 */
@@ -350,15 +373,44 @@ footer, .footer, div[class*="footer"], #footer {
350
  border-left: 3px solid var(--accent);
351
  }
352
 
353
- /* 컨텐츠 높이 조정 */
354
- .ant-tabs-content {
355
- height: 100%;
 
 
 
 
 
 
 
356
  }
357
 
358
- .ant-tabs-tabpane {
359
- height: 100%;
360
- display: flex;
361
- flex-direction: column;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
362
  }
363
 
364
  /* Drawer customization */
@@ -386,6 +438,23 @@ footer, .footer, div[class*="footer"], #footer {
386
  background: var(--surface);
387
  }
388
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
389
  .session-drawer .chatbot {
390
  height: calc(100vh - 200px);
391
  overflow-y: auto;
@@ -420,7 +489,7 @@ footer, .footer, div[class*="footer"], #footer {
420
  box-shadow: var(--shadow-lg);
421
  }
422
 
423
- /* Custom scrollbar */
424
  ::-webkit-scrollbar {
425
  width: 8px;
426
  height: 8px;
@@ -440,7 +509,26 @@ footer, .footer, div[class*="footer"], #footer {
440
  background: var(--neutral-400);
441
  }
442
 
443
- /* Responsive adjustments */
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
444
  @media (max-width: 768px) {
445
  .left_header {
446
  padding: 1rem;
@@ -450,11 +538,7 @@ footer, .footer, div[class*="footer"], #footer {
450
  grid-template-columns: 1fr;
451
  }
452
 
453
- .setting-buttons {
454
- flex-wrap: wrap;
455
- }
456
-
457
- .action-buttons {
458
  flex-wrap: wrap;
459
  }
460
 
@@ -463,329 +547,4 @@ footer, .footer, div[class*="footer"], #footer {
463
  min-width: calc(50% - 8px);
464
  margin: 4px;
465
  }
466
- }
467
-
468
- /* Animations */
469
- @keyframes fadeIn {
470
- from { opacity: 0; transform: translateY(10px); }
471
- to { opacity: 1; transform: translateY(0); }
472
- }
473
-
474
- .fade-in {
475
- animation: fadeIn 0.5s ease-out;
476
- }
477
-
478
- /* 배포 결과 영역 */
479
- [label="배포 결과"] {
480
- margin-top: 15px;
481
- padding: 12px;
482
- background-color: var(--neutral-100);
483
- border-radius: var(--radius-md);
484
- border-left: 3px solid var(--primary);
485
- }
486
-
487
- /* 배포 결과 스타일 */
488
- .deploy-result-container {
489
- margin-top: 15px;
490
- width: 100%;
491
- }
492
-
493
- .deploy-result-title {
494
- font-weight: bold;
495
- margin-bottom: 5px;
496
- color: var(--text-primary);
497
- }
498
-
499
- .deploy-result-box {
500
- background-color: var(--neutral-100);
501
- border: 1px solid var(--neutral-300);
502
- border-radius: var(--radius-md);
503
- padding: 12px;
504
- min-height: 60px;
505
- overflow-wrap: break-word;
506
- word-wrap: break-word;
507
- word-break: break-all;
508
- }
509
-
510
- .deploy-success {
511
- color: var(--success);
512
- padding: 10px;
513
- background-color: rgba(52, 199, 89, 0.1);
514
- border-radius: var(--radius-md);
515
- }
516
-
517
- .deploy-url {
518
- margin: 10px 0;
519
- font-weight: bold;
520
- }
521
-
522
- .deploy-url a {
523
- color: var(--primary);
524
- text-decoration: underline;
525
- }
526
-
527
- /* 배포 관련 추가 스타일 */
528
- .deployment-status-area {
529
- position: relative;
530
- bottom: 0;
531
- left: 0;
532
- width: 100%;
533
- background-color: var(--neutral-100);
534
- border-top: 1px solid var(--neutral-300);
535
- border-radius: 0 0 var(--radius-lg) var(--radius-lg);
536
- padding: 10px 15px;
537
- margin-top: -5px;
538
- z-index: 10;
539
- }
540
-
541
- .deployment-status-content {
542
- width: 100%;
543
- }
544
-
545
- .status-bar {
546
- display: flex;
547
- align-items: center;
548
- padding: 10px 12px;
549
- border-radius: var(--radius-md);
550
- animation: fadeIn 0.3s ease-out;
551
- }
552
-
553
- .status-bar.success {
554
- background-color: rgba(52, 199, 89, 0.1);
555
- border-left: 4px solid var(--success);
556
- }
557
-
558
- .status-bar.error {
559
- background-color: rgba(255, 59, 48, 0.1);
560
- border-left: 4px solid var(--error);
561
- }
562
-
563
- .status-bar.loading {
564
- background-color: rgba(90, 200, 250, 0.1);
565
- border-left: 4px solid #5ac8fa;
566
- }
567
-
568
- .status-icon {
569
- font-size: 1.2em;
570
- margin-right: 10px;
571
- }
572
-
573
- .status-text {
574
- font-weight: 500;
575
- }
576
-
577
- .status-link {
578
- margin-left: 5px;
579
- color: var(--primary);
580
- text-decoration: underline;
581
- font-weight: 600;
582
- }
583
-
584
- /* 모달 스타일 */
585
- .deploy-modal-content {
586
- padding: 20px;
587
- }
588
-
589
- .deploy-success h3,
590
- .deploy-error h3,
591
- .deploy-loading h3 {
592
- margin-top: 0;
593
- display: flex;
594
- align-items: center;
595
- }
596
-
597
- .deploy-url-box {
598
- background-color: var(--neutral-100);
599
- border: 1px solid var(--neutral-300);
600
- border-radius: var(--radius-md);
601
- padding: 12px;
602
- margin: 15px 0;
603
- display: flex;
604
- justify-content: space-between;
605
- align-items: center;
606
- word-break: break-all;
607
- }
608
-
609
- .deploy-url-box a {
610
- color: var(--primary);
611
- font-weight: 600;
612
- text-decoration: none;
613
- flex: 1;
614
- }
615
-
616
- .copy-btn {
617
- background-color: var(--primary);
618
- color: white;
619
- border: none;
620
- border-radius: var(--radius-sm);
621
- padding: 5px 10px;
622
- margin-left: 10px;
623
- cursor: pointer;
624
- font-size: 0.8em;
625
- transition: all 0.2s;
626
- }
627
-
628
- .copy-btn:hover {
629
- background-color: var(--secondary);
630
- transform: translateY(-2px);
631
- }
632
-
633
- .error-details {
634
- background-color: #ffeeee;
635
- border-radius: var(--radius-sm);
636
- padding: 10px;
637
- font-family: monospace;
638
- font-size: 0.9em;
639
- overflow-x: auto;
640
- white-space: pre-wrap;
641
- margin-top: 10px;
642
- }
643
-
644
- .loading-spinner {
645
- margin: 20px auto;
646
- width: 40px;
647
- height: 40px;
648
- border: 4px solid rgba(0, 102, 204, 0.2);
649
- border-top-color: var(--primary);
650
- border-radius: 50%;
651
- animation: spin 1s linear infinite;
652
- }
653
-
654
- @keyframes spin {
655
- to { transform: rotate(360deg); }
656
- }
657
-
658
- /* 모달 오버라이드 스타일 */
659
- .ant-modal-content {
660
- border-radius: var(--radius-lg) !important;
661
- overflow: hidden;
662
- }
663
-
664
- .ant-modal-header {
665
- background: linear-gradient(to right, var(--primary), var(--secondary));
666
- padding: 16px 24px;
667
- border-bottom: 1px solid var(--neutral-300);
668
- }
669
-
670
- .ant-modal-title {
671
- color: white !important;
672
- font-weight: 600;
673
- }
674
-
675
- .ant-modal-close {
676
- color: white !important;
677
- }
678
-
679
- /* 배포 알림이 항상 보이도록 z-index 조정 */
680
- #deploy-modal {
681
- z-index: 1500 !important;
682
- }
683
-
684
- .deploy-error {
685
- color: var(--error);
686
- padding: 10px;
687
- background-color: rgba(255, 59, 48, 0.1);
688
- border-radius: var(--radius-md);
689
-
690
- /* 배포 결과 컴포넌트 스타일링 */
691
- .deploy-result {
692
- margin-top: 10px;
693
- max-height: 90px;
694
- overflow-y: auto;
695
- background-color: var(--neutral-100);
696
- padding: 10px;
697
- border-radius: var(--radius-md);
698
- border-left: 3px solid var(--primary);
699
- }
700
-
701
- /* 입력 패널과 우측 패널의 높이 일치 */
702
- .input-panel {
703
- height: 870px !important;
704
- max-height: 870px !important;
705
- overflow: hidden;
706
- display: flex;
707
- flex-direction: column;
708
- }
709
-
710
- .input-panel textarea {
711
- flex-grow: 1;
712
- height: calc(100% - 120px) !important; /* 도움말 텍스트와 배포 결과 공간 확보 */
713
- min-height: 300px !important;
714
- }
715
-
716
- /* 배포 결과 영역의 링크 색상 지정 */
717
- #deploy-result a {
718
- color: var(--primary);
719
- font-weight: bold;
720
- text-decoration: underline;
721
- }
722
-
723
- /* 텍스트 영역의 오버플로우 조정 */
724
- .input-panel .ant-input-textarea {
725
- flex: 1;
726
- display: flex;
727
- flex-direction: column;
728
- }
729
-
730
- .input-panel .ant-input-textarea-large {
731
- flex: 1;
732
- }
733
-
734
- /* 고정된 높이를 위한 클래스 */
735
- .fixed-height {
736
- height: 900px !important;
737
- }
738
-
739
- .fixed-content-height {
740
- height: 870px !important; /* 헤더(30px)를 제외한 높이 */
741
- }
742
-
743
- .fixed-input-height {
744
- height: 730px !important;
745
- max-height: 730px !important;
746
- }
747
-
748
- /* 배포 결과 컴포넌트 스타일링 */
749
- .deploy-result {
750
- margin-top: 10px;
751
- height: 90px;
752
- max-height: 90px;
753
- overflow-y: auto;
754
- background-color: var(--neutral-100);
755
- padding: 10px;
756
- border-radius: var(--radius-md);
757
- border-left: 3px solid var(--primary);
758
- }
759
-
760
- /* 입력 패널과 우측 패널의 높이 일치 */
761
- .input-panel {
762
- height: 870px !important;
763
- max-height: 870px !important;
764
- overflow: hidden;
765
- display: flex;
766
- flex-direction: column;
767
- }
768
-
769
- .input-panel textarea {
770
- flex-grow: 1;
771
- height: calc(100% - 120px) !important; /* 도움말 텍스트와 배포 결과 공간 확보 */
772
- min-height: 300px !important;
773
- }
774
-
775
- /* 배포 결과 영역의 링크 색상 지정 */
776
- #deploy-result a {
777
- color: var(--primary);
778
- font-weight: bold;
779
- text-decoration: underline;
780
- }
781
-
782
- /* 텍스트 영역의 오버플로우 조정 */
783
- .input-panel .ant-input-textarea {
784
- flex: 1;
785
- display: flex;
786
- flex-direction: column;
787
- }
788
-
789
- .input-panel .ant-input-textarea-large {
790
- flex: 1;
791
- }
 
46
  line-height: 1.5;
47
  }
48
 
49
+ /* 헤더 및 레이아웃 */
50
  .left_header {
51
  display: flex;
52
  flex-direction: column;
 
75
  color: var(--text-primary);
76
  }
77
 
78
+ /* 패널 레이아웃 높이 */
79
  .equal-height-container {
80
  display: flex;
81
  min-height: 900px;
 
87
  height: 100%;
88
  }
89
 
90
+ .fixed-height {
91
+ height: 900px !important;
92
+ }
93
+
94
+ .fixed-content-height {
95
+ height: 870px !important; /* 헤더(30px)를 제외한 높이 */
96
+ }
97
+
98
+ .fixed-input-height {
99
+ height: 730px !important;
100
+ max-height: 730px !important;
101
+ }
102
+
103
  /* 좌측 패널 상단 헤더 */
104
  .render_header {
105
  height: 30px;
 
143
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
144
  }
145
 
146
+ /* 패널 스타일 */
147
+ .right_panel {
148
+ position: relative;
149
+ height: 900px;
150
+ display: flex;
151
+ flex-direction: column;
152
+ padding-top: 0;
153
  }
154
 
155
+ .panel {
156
+ display: flex;
157
+ flex-direction: column;
158
+ height: 900px;
159
+ background: var(--surface);
160
+ border-radius: var(--radius-lg);
161
+ box-shadow: var(--shadow-lg);
162
+ border: 1px solid var(--neutral-300);
163
+ overflow: hidden;
164
+ }
165
+
166
+ .input-panel {
167
+ display: flex;
168
+ flex-direction: column;
169
+ margin-top: 0;
170
+ background: var(--surface);
171
+ border-radius: var(--radius-lg);
172
+ border: 1px solid var(--neutral-300);
173
+ box-shadow: var(--shadow-lg);
174
+ padding: 15px;
175
+ height: 870px !important; /* 버튼 영역 제외한 높이 */
176
+ max-height: 870px !important;
177
+ overflow: hidden;
178
+ }
179
+
180
+ .html_content {
181
+ flex: 1;
182
+ height: 870px; /* 헤더(30px)를 제외한 높이 */
183
+ border-radius: 0 0 var(--radius-lg) var(--radius-lg);
184
+ overflow: hidden;
185
+ box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
186
+ background: var(--surface);
187
  }
188
 
189
+ /* 버튼 영역 스타일 */
190
  .right-top-buttons {
191
  margin-bottom: 15px;
192
  background: linear-gradient(to right, var(--neutral-100), var(--neutral-200));
 
309
  box-shadow: var(--shadow-md);
310
  }
311
 
312
+ /* 텍스트 영역 스타일링 */
313
  #component-0 textarea,
314
  .gradio-container textarea,
315
  .ant-input-textarea-large textarea {
316
+ height: 730px !important;
 
317
  min-height: 300px !important;
318
  resize: vertical !important;
319
  border: 2px solid var(--neutral-200);
 
333
  box-shadow: 0 0 0 3px rgba(102, 163, 255, 0.2);
334
  }
335
 
336
+ /* 우측 박스 텍스트 폰트 크기 20% 감소 */
337
+ .input-panel textarea,
338
+ .input-panel .ant-input-textarea-large textarea,
339
+ .input-panel .help-text {
340
+ font-size: 0.8em; /* 기본 폰트 크기에서 20% 감소 */
 
341
  }
342
 
343
+ .ant-input-textarea {
344
  display: flex;
345
  flex-direction: column;
346
+ flex: 1;
 
 
 
 
 
347
  }
348
 
349
+ .input-panel .ant-input-textarea {
350
+ flex: 1;
351
  display: flex;
352
  flex-direction: column;
 
 
 
 
 
 
 
 
353
  }
354
 
355
+ .input-panel .ant-input-textarea-large {
 
 
 
 
 
 
 
 
 
 
 
356
  flex: 1;
357
  }
358
 
359
+ .input-panel textarea {
360
+ flex-grow: 1;
361
+ height: calc(100% - 120px) !important; /* 도움말 텍스트와 배포 결과 공간 확보 */
362
+ min-height: 300px !important;
 
363
  }
364
 
365
  /* 도움말 텍스트 스타일 */
 
373
  border-left: 3px solid var(--accent);
374
  }
375
 
376
+ /* 배포 결과 스타일링 */
377
+ .deploy-result {
378
+ margin-top: 10px;
379
+ height: 90px;
380
+ max-height: 90px;
381
+ overflow-y: auto;
382
+ background-color: var(--neutral-100);
383
+ padding: 10px;
384
+ border-radius: var(--radius-md);
385
+ border-left: 3px solid var(--primary);
386
  }
387
 
388
+ #deploy-result a {
389
+ color: var(--primary);
390
+ font-weight: bold;
391
+ text-decoration: underline;
392
+ }
393
+
394
+ [label="배포 결과"] {
395
+ margin-top: 15px;
396
+ padding: 12px;
397
+ background-color: var(--neutral-100);
398
+ border-radius: var(--radius-md);
399
+ border-left: 3px solid var(--primary);
400
+ }
401
+
402
+ .deploy-success {
403
+ color: var(--success);
404
+ padding: 10px;
405
+ background-color: rgba(52, 199, 89, 0.1);
406
+ border-radius: var(--radius-md);
407
+ }
408
+
409
+ .deploy-error {
410
+ color: var(--error);
411
+ padding: 10px;
412
+ background-color: rgba(255, 59, 48, 0.1);
413
+ border-radius: var(--radius-md);
414
  }
415
 
416
  /* Drawer customization */
 
438
  background: var(--surface);
439
  }
440
 
441
+ /* 탭 컨텐츠 높이 조정 */
442
+ .ant-tabs-content {
443
+ height: 100%;
444
+ }
445
+
446
+ .ant-tabs-tabpane {
447
+ height: 100%;
448
+ display: flex;
449
+ flex-direction: column;
450
+ }
451
+
452
+ /* 히스토리와 템플릿 스타일링 */
453
+ .history_chatbot button {
454
+ background: none;
455
+ border: none;
456
+ }
457
+
458
  .session-drawer .chatbot {
459
  height: calc(100vh - 200px);
460
  overflow-y: auto;
 
489
  box-shadow: var(--shadow-lg);
490
  }
491
 
492
+ /* 스크롤바 스타일링 */
493
  ::-webkit-scrollbar {
494
  width: 8px;
495
  height: 8px;
 
509
  background: var(--neutral-400);
510
  }
511
 
512
+ /* 애니메이션 */
513
+ @keyframes fadeIn {
514
+ from { opacity: 0; transform: translateY(10px); }
515
+ to { opacity: 1; transform: translateY(0); }
516
+ }
517
+
518
+ .fade-in {
519
+ animation: fadeIn 0.5s ease-out;
520
+ }
521
+
522
+ @keyframes spin {
523
+ to { transform: rotate(360deg); }
524
+ }
525
+
526
+ /* 푸터 숨기기 */
527
+ footer, .footer, div[class*="footer"], #footer {
528
+ display: none !important;
529
+ }
530
+
531
+ /* 반응형 조정 */
532
  @media (max-width: 768px) {
533
  .left_header {
534
  padding: 1rem;
 
538
  grid-template-columns: 1fr;
539
  }
540
 
541
+ .setting-buttons, .action-buttons {
 
 
 
 
542
  flex-wrap: wrap;
543
  }
544
 
 
547
  min-width: calc(50% - 8px);
548
  margin: 4px;
549
  }
550
+ }