Spaces:
Running
on
CPU Upgrade
Running
on
CPU Upgrade
Update app.css
Browse files
app.css
CHANGED
@@ -91,7 +91,10 @@ body {
|
|
91 |
}
|
92 |
|
93 |
.right_content {
|
94 |
-
height:
|
|
|
|
|
|
|
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 |
-
|
|
|
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 |
-
|
|
|
|
|
151 |
padding-top: 50px;
|
|
|
152 |
}
|
153 |
|
|
|
154 |
.html_content {
|
155 |
-
height:
|
|
|
|
|
156 |
border-radius: 12px;
|
157 |
-
overflow:
|
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 |
-
|
383 |
-
|
384 |
-
|
385 |
}
|
386 |
|
387 |
.main-tabs > div[role="tabpanel"] {
|
388 |
-
|
389 |
-
|
390 |
}
|
391 |
|
392 |
.mouse-tab {
|
393 |
-
|
394 |
-
|
395 |
-
|
396 |
}
|
397 |
|
398 |
/* ๋ ์ด์์ ์ปจํ
์ด๋ ๋์ด ์กฐ์ */
|
399 |
.ant-row {
|
400 |
-
|
401 |
}
|
402 |
|
403 |
/* ์ข์ธก ํจ๋ ๋์ด ์กฐ์ */
|
404 |
.ant-col-md-8 {
|
405 |
-
|
406 |
}
|
407 |
|
408 |
.ant-flex {
|
409 |
-
|
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 |
-
|
435 |
}
|
436 |
|
437 |
.ant-tabs-tabpane {
|
438 |
-
|
439 |
}
|
440 |
|
441 |
/* ์คํฌ๋กค ์์ญ ์กฐ์ */
|
442 |
.right_content {
|
443 |
-
|
444 |
-
|
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 |
-
|
462 |
-
|
463 |
}
|
464 |
|
465 |
.ant-config-provider {
|
466 |
-
|
467 |
}
|
468 |
|
469 |
/* ์คํฌ๋กค๋ฐ๊ฐ ๋ ์ด์์์ ๊นจ์ง์ง ์๋๋ก ์ค์ */
|
470 |
.right_panel, .html_content {
|
471 |
-
|
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 |
}
|