openfree commited on
Commit
ae0eb07
โ€ข
1 Parent(s): 2851e29

Update app.css

Browse files
Files changed (1) hide show
  1. app.css +50 -58
app.css CHANGED
@@ -91,7 +91,10 @@ body {
91
  }
92
 
93
  .right_content {
94
- height: 920px;
 
 
 
95
  display: flex;
96
  flex-direction: column;
97
  justify-content: center;
@@ -109,12 +112,14 @@ footer, .footer, div[class*="footer"], #footer {
109
  display: none !important;
110
  }
111
 
 
112
  #component-0 textarea,
113
  .gradio-container textarea,
114
  .ant-input-textarea-large textarea {
115
  height: 300px !important;
116
  min-height: 300px !important;
117
- resize: vertical !important;
 
118
  border: 2px solid var(--neutral-200);
119
  border-radius: 12px;
120
  transition: all 0.3s;
@@ -145,16 +150,23 @@ footer, .footer, div[class*="footer"], #footer {
145
  border: 1px solid var(--neutral-200);
146
  }
147
 
 
148
  .right_panel {
149
  position: relative;
150
- min-height: 600px;
 
 
151
  padding-top: 50px;
 
152
  }
153
 
 
154
  .html_content {
155
- height: 100%;
 
 
156
  border-radius: 12px;
157
- overflow: hidden;
158
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
159
  background: var(--surface);
160
  }
@@ -363,6 +375,18 @@ footer, .footer, div[class*="footer"], #footer {
363
  min-width: 60px;
364
  font-size: 0.9rem;
365
  }
 
 
 
 
 
 
 
 
 
 
 
 
366
  }
367
 
368
  /* Animations */
@@ -375,98 +399,66 @@ footer, .footer, div[class*="footer"], #footer {
375
  animation: fadeIn 0.5s ease-out;
376
  }
377
 
378
- /* ๊ธฐ์กด ์ฝ”๋“œ๋Š” ๊ทธ๋Œ€๋กœ ์œ ์ง€ํ•˜๊ณ  ์•„๋ž˜ ์ฝ”๋“œ๋ฅผ ์ถ”๊ฐ€ */
379
-
380
  /* MOUSE ํƒญ ๋†’์ด ๊ด€๋ จ ์Šคํƒ€์ผ */
381
  .main-tabs {
382
- min-height: 100vh !important;
383
- display: flex !important;
384
- flex-direction: column !important;
385
  }
386
 
387
  .main-tabs > div[role="tabpanel"] {
388
- flex: 1 !important;
389
- min-height: calc(100vh - 60px) !important;
390
  }
391
 
392
  .mouse-tab {
393
- height: 100% !important;
394
- display: flex !important;
395
- flex-direction: column !important;
396
  }
397
 
398
  /* ๋ ˆ์ด์•„์›ƒ ์ปจํ…Œ์ด๋„ˆ ๋†’์ด ์กฐ์ • */
399
  .ant-row {
400
- min-height: calc(100vh - 100px) !important;
401
  }
402
 
403
  /* ์ขŒ์ธก ํŒจ๋„ ๋†’์ด ์กฐ์ • */
404
  .ant-col-md-8 {
405
- height: 100% !important;
406
  }
407
 
408
  .ant-flex {
409
- height: 100% !important;
410
- }
411
-
412
- /* ์šฐ์ธก ํŒจ๋„ ๋†’์ด ์กฐ์ • */
413
- .right_panel {
414
- position: relative;
415
- height: calc(100vh - 100px) !important;
416
- min-height: 600px !important;
417
- padding-top: 50px;
418
- display: flex !important;
419
- flex-direction: column !important;
420
- }
421
-
422
- /* HTML ์ปจํ…์ธ  ์˜์—ญ ๋†’์ด ์กฐ์ • */
423
- .html_content {
424
- flex: 1 !important;
425
- min-height: calc(100vh - 200px) !important;
426
- border-radius: 12px;
427
- overflow: hidden;
428
- box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
429
- background: var(--surface);
430
  }
431
 
432
  /* ํƒญ ์ปจํ…์ธ  ์˜์—ญ ๋†’์ด ์กฐ์ • */
433
  .ant-tabs-content {
434
- height: 100% !important;
435
  }
436
 
437
  .ant-tabs-tabpane {
438
- height: 100% !important;
439
  }
440
 
441
  /* ์Šคํฌ๋กค ์˜์—ญ ์กฐ์ • */
442
  .right_content {
443
- height: calc(100vh - 150px) !important;
444
- overflow-y: auto;
445
- }
446
-
447
- /* ๋ชจ๋ฐ”์ผ ๋Œ€์‘ */
448
- @media (max-width: 768px) {
449
- .right_panel {
450
- height: auto !important;
451
- min-height: calc(100vh - 150px) !important;
452
- }
453
-
454
- .html_content {
455
- min-height: 500px !important;
456
- }
457
  }
458
 
459
  /* ์ถ”๊ฐ€์ ์ธ ๋ ˆ์ด์•„์›ƒ ์•ˆ์ •์„ฑ์„ ์œ„ํ•œ ์Šคํƒ€์ผ */
460
  .ms-application {
461
- height: 100% !important;
462
- min-height: 100vh !important;
463
  }
464
 
465
  .ant-config-provider {
466
- height: 100% !important;
467
  }
468
 
469
  /* ์Šคํฌ๋กค๋ฐ”๊ฐ€ ๋ ˆ์ด์•„์›ƒ์„ ๊นจ์ง€์ง€ ์•Š๋„๋ก ์„ค์ • */
470
  .right_panel, .html_content {
471
- scrollbar-gutter: stable;
472
  }
 
91
  }
92
 
93
  .right_content {
94
+ height: 800px !important;
95
+ min-height: 800px !important;
96
+ max-height: 800px !important;
97
+ overflow-y: auto;
98
  display: flex;
99
  flex-direction: column;
100
  justify-content: center;
 
112
  display: none !important;
113
  }
114
 
115
+ /* ํ”„๋กฌํ”„ํŠธ ์ž…๋ ฅ์ฐฝ ๋†’์ด ์„ค์ • */
116
  #component-0 textarea,
117
  .gradio-container textarea,
118
  .ant-input-textarea-large textarea {
119
  height: 300px !important;
120
  min-height: 300px !important;
121
+ max-height: 300px !important;
122
+ resize: none !important;
123
  border: 2px solid var(--neutral-200);
124
  border-radius: 12px;
125
  transition: all 0.3s;
 
150
  border: 1px solid var(--neutral-200);
151
  }
152
 
153
+ /* ์šฐ์ธก ํŒจ๋„ ๋†’์ด ์กฐ์ • */
154
  .right_panel {
155
  position: relative;
156
+ height: 900px !important;
157
+ min-height: 900px !important;
158
+ max-height: 900px !important;
159
  padding-top: 50px;
160
+ overflow: hidden;
161
  }
162
 
163
+ /* ์›น ์ถœ๋ ฅ ํ™”๋ฉด ๋†’์ด ์„ค์ • */
164
  .html_content {
165
+ height: 800px !important;
166
+ min-height: 800px !important;
167
+ max-height: 800px !important;
168
  border-radius: 12px;
169
+ overflow: auto;
170
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
171
  background: var(--surface);
172
  }
 
375
  min-width: 60px;
376
  font-size: 0.9rem;
377
  }
378
+
379
+ .right_panel {
380
+ height: 900px !important;
381
+ min-height: 900px !important;
382
+ max-height: 900px !important;
383
+ }
384
+
385
+ .html_content {
386
+ height: 800px !important;
387
+ min-height: 800px !important;
388
+ max-height: 800px !important;
389
+ }
390
  }
391
 
392
  /* Animations */
 
399
  animation: fadeIn 0.5s ease-out;
400
  }
401
 
 
 
402
  /* MOUSE ํƒญ ๋†’์ด ๊ด€๋ จ ์Šคํƒ€์ผ */
403
  .main-tabs {
404
+ min-height: 100vh !important;
405
+ display: flex !important;
406
+ flex-direction: column !important;
407
  }
408
 
409
  .main-tabs > div[role="tabpanel"] {
410
+ flex: 1 !important;
411
+ min-height: calc(100vh - 60px) !important;
412
  }
413
 
414
  .mouse-tab {
415
+ height: 100% !important;
416
+ display: flex !important;
417
+ flex-direction: column !important;
418
  }
419
 
420
  /* ๋ ˆ์ด์•„์›ƒ ์ปจํ…Œ์ด๋„ˆ ๋†’์ด ์กฐ์ • */
421
  .ant-row {
422
+ min-height: calc(100vh - 100px) !important;
423
  }
424
 
425
  /* ์ขŒ์ธก ํŒจ๋„ ๋†’์ด ์กฐ์ • */
426
  .ant-col-md-8 {
427
+ height: 100% !important;
428
  }
429
 
430
  .ant-flex {
431
+ height: 100% !important;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
432
  }
433
 
434
  /* ํƒญ ์ปจํ…์ธ  ์˜์—ญ ๋†’์ด ์กฐ์ • */
435
  .ant-tabs-content {
436
+ height: 100% !important;
437
  }
438
 
439
  .ant-tabs-tabpane {
440
+ height: 100% !important;
441
  }
442
 
443
  /* ์Šคํฌ๋กค ์˜์—ญ ์กฐ์ • */
444
  .right_content {
445
+ height: 800px !important;
446
+ min-height: 800px !important;
447
+ max-height: 800px !important;
448
+ overflow-y: auto;
 
 
 
 
 
 
 
 
 
 
449
  }
450
 
451
  /* ์ถ”๊ฐ€์ ์ธ ๋ ˆ์ด์•„์›ƒ ์•ˆ์ •์„ฑ์„ ์œ„ํ•œ ์Šคํƒ€์ผ */
452
  .ms-application {
453
+ height: 100% !important;
454
+ min-height: 100vh !important;
455
  }
456
 
457
  .ant-config-provider {
458
+ height: 100% !important;
459
  }
460
 
461
  /* ์Šคํฌ๋กค๋ฐ”๊ฐ€ ๋ ˆ์ด์•„์›ƒ์„ ๊นจ์ง€์ง€ ์•Š๋„๋ก ์„ค์ • */
462
  .right_panel, .html_content {
463
+ scrollbar-gutter: stable;
464
  }