Spaces:
Paused
Paused
Delete app. css
Browse files
app. css
DELETED
@@ -1,325 +0,0 @@
|
|
1 |
-
/* Modern color scheme */
|
2 |
-
:root {
|
3 |
-
/* 주요 브랜드 컬러 */
|
4 |
-
--primary: #007bff; /* 메인 브랜드 컬러 (Bootstrap Blue) */
|
5 |
-
--secondary: #6c757d; /* 부가 컬러 (Bootstrap Gray) */
|
6 |
-
--accent: #17a2b8; /* 포인트 컬러 (Bootstrap Info Blue) */
|
7 |
-
--tertiary: #6f42c1; /* 포인트 컬러 (Purple) */
|
8 |
-
|
9 |
-
/* 배경 컬러 */
|
10 |
-
--background: #f8f9fa; /* 메인 배경 (Bootstrap Light Gray) */
|
11 |
-
--surface: #ffffff; /* 카드 배경 */
|
12 |
-
|
13 |
-
/* 텍스트 컬러 */
|
14 |
-
--text-primary: #212529; /* 주요 텍스트 (Bootstrap Dark Gray) */
|
15 |
-
--text-secondary: #6c757d; /* 부가 텍스트 */
|
16 |
-
--text-tertiary: #adb5bd; /* 덜 중요한 텍스트 */
|
17 |
-
|
18 |
-
/* 기능성 컬러 */
|
19 |
-
--success: #28a745; /* 성공/확인 (Bootstrap Green) */
|
20 |
-
--warning: #ffc107; /* 경고/주의 (Bootstrap Yellow) */
|
21 |
-
--error: #dc3545; /* 오류/삭제 (Bootstrap Red) */
|
22 |
-
|
23 |
-
/* 중립 컬러 */
|
24 |
-
--neutral-100: #f8f9fa;
|
25 |
-
--neutral-200: #e9ecef;
|
26 |
-
--neutral-300: #dee2e6;
|
27 |
-
--neutral-400: #ced4da;
|
28 |
-
|
29 |
-
/* 그림자 및 효과 */
|
30 |
-
--shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
|
31 |
-
--shadow-md: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
|
32 |
-
--shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
|
33 |
-
|
34 |
-
/* 둥근 모서리 */
|
35 |
-
--radius-sm: 0.2rem;
|
36 |
-
--radius-md: 0.25rem;
|
37 |
-
--radius-lg: 0.3rem;
|
38 |
-
}
|
39 |
-
|
40 |
-
body {
|
41 |
-
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
42 |
-
background: var(--background);
|
43 |
-
color: var(--text-primary);
|
44 |
-
line-height: 1.6;
|
45 |
-
margin: 0;
|
46 |
-
padding: 0;
|
47 |
-
}
|
48 |
-
|
49 |
-
.app-header {
|
50 |
-
background: linear-gradient(135deg, var(--primary), var(--accent));
|
51 |
-
color: white;
|
52 |
-
padding: 2rem 1.5rem;
|
53 |
-
text-align: center;
|
54 |
-
border-bottom: 5px solid var(--tertiary);
|
55 |
-
margin-bottom: 1.5rem;
|
56 |
-
}
|
57 |
-
.app-header h1 {
|
58 |
-
margin: 0 0 0.5rem 0;
|
59 |
-
font-size: 2.5rem;
|
60 |
-
font-weight: 600;
|
61 |
-
}
|
62 |
-
.app-header p {
|
63 |
-
margin: 0;
|
64 |
-
font-size: 1.1rem;
|
65 |
-
opacity: 0.9;
|
66 |
-
}
|
67 |
-
|
68 |
-
|
69 |
-
/* 패널 레이아웃 */
|
70 |
-
.panel {
|
71 |
-
background: var(--surface);
|
72 |
-
border-radius: var(--radius-lg);
|
73 |
-
box-shadow: var(--shadow-md);
|
74 |
-
border: 1px solid var(--neutral-300);
|
75 |
-
overflow: hidden; /* 내부 컨텐츠가 넘치지 않도록 */
|
76 |
-
height: 100%; /* 부모 Col 높이에 맞춤 */
|
77 |
-
display: flex;
|
78 |
-
flex-direction: column;
|
79 |
-
}
|
80 |
-
|
81 |
-
.preview-panel { /* 왼쪽 게임 미리보기 패널 */
|
82 |
-
height: calc(90vh - 100px); /* 화면 높이에 따라 유동적으로, 최소 높이 설정 가능 */
|
83 |
-
min-height: 600px;
|
84 |
-
}
|
85 |
-
|
86 |
-
.control-panel-flex { /* 오른쪽 컨트롤 패널 */
|
87 |
-
height: calc(90vh - 100px);
|
88 |
-
min-height: 600px;
|
89 |
-
padding: 1rem;
|
90 |
-
box-sizing: border-box;
|
91 |
-
background-color: var(--surface);
|
92 |
-
border-radius: var(--radius-lg);
|
93 |
-
box-shadow: var(--shadow-md);
|
94 |
-
border: 1px solid var(--neutral-300);
|
95 |
-
}
|
96 |
-
|
97 |
-
|
98 |
-
/* 좌측 패널 상단 헤더 (미리보기 창) */
|
99 |
-
.render_header {
|
100 |
-
height: 30px;
|
101 |
-
padding: 0 16px;
|
102 |
-
background: var(--neutral-200);
|
103 |
-
border-bottom: 1px solid var(--neutral-300);
|
104 |
-
display: flex;
|
105 |
-
align-items: center;
|
106 |
-
flex-shrink: 0; /* 높이 고정 */
|
107 |
-
}
|
108 |
-
.header_btn {
|
109 |
-
display: inline-block;
|
110 |
-
height: 12px;
|
111 |
-
width: 12px;
|
112 |
-
border-radius: 50%;
|
113 |
-
margin-right: 8px;
|
114 |
-
}
|
115 |
-
.header_btn.red { background-color: #ff5f57; }
|
116 |
-
.header_btn.yellow { background-color: #ffbd2e; }
|
117 |
-
.header_btn.green { background-color: #28c940; }
|
118 |
-
.header_title {
|
119 |
-
font-size: 0.85em;
|
120 |
-
color: var(--text-secondary);
|
121 |
-
margin-left: auto; /* 오른쪽으로 밀기 */
|
122 |
-
}
|
123 |
-
|
124 |
-
|
125 |
-
.preview-tabs-content, .right_content, .html_content {
|
126 |
-
flex-grow: 1; /* 남은 공간 모두 차지 */
|
127 |
-
display: flex;
|
128 |
-
flex-direction: column;
|
129 |
-
overflow: hidden; /* 내부 iframe 스크롤 사용 */
|
130 |
-
}
|
131 |
-
.html_content iframe {
|
132 |
-
width: 100%;
|
133 |
-
height: 100%;
|
134 |
-
border: none;
|
135 |
-
}
|
136 |
-
.empty-state, .loading-state {
|
137 |
-
display: flex;
|
138 |
-
justify-content: center;
|
139 |
-
align-items: center;
|
140 |
-
height: 100%;
|
141 |
-
text-align: center;
|
142 |
-
padding: 20px;
|
143 |
-
color: var(--text-secondary);
|
144 |
-
}
|
145 |
-
|
146 |
-
|
147 |
-
/* 오른쪽 컨트롤 패널 내부 */
|
148 |
-
.setting-buttons-flex .ant-btn, .action-buttons-flex .ant-btn {
|
149 |
-
flex-grow: 1; /* 버튼들이 공간을 균등하게 차지하도록 */
|
150 |
-
}
|
151 |
-
.control-button, .action-button { /* 공통 버튼 스타일 */
|
152 |
-
font-weight: 500;
|
153 |
-
border-radius: var(--radius-md);
|
154 |
-
}
|
155 |
-
.action-button.send-btn { background-color: var(--primary); color: white; border-color: var(--primary); }
|
156 |
-
.action-button.boost-btn { background-color: var(--tertiary); color: white; border-color: var(--tertiary); }
|
157 |
-
.action-button.execute-btn { background-color: var(--success); color: white; border-color: var(--success); }
|
158 |
-
.action-button.deploy-btn { background-color: var(--warning); color: var(--text-primary); border-color: var(--warning); }
|
159 |
-
.action-button.clear-btn { background-color: var(--error); color: white; border-color: var(--error); }
|
160 |
-
|
161 |
-
|
162 |
-
.input-area-flex {
|
163 |
-
flex-grow: 1; /* 입력창이 가능한 많은 공간 차지 */
|
164 |
-
display: flex;
|
165 |
-
flex-direction: column;
|
166 |
-
}
|
167 |
-
.input-area-flex .ant-input-textarea-wrapper {
|
168 |
-
flex-grow: 1; /* Wrapper가 늘어나도록 */
|
169 |
-
display: flex;
|
170 |
-
}
|
171 |
-
#main_prompt_input { /* textarea 자체 */
|
172 |
-
width: 100%;
|
173 |
-
flex-grow: 1; /* Wrapper 안에서 늘어나도록 */
|
174 |
-
border-color: var(--neutral-300);
|
175 |
-
border-radius: var(--radius-md);
|
176 |
-
}
|
177 |
-
#main_prompt_input:focus {
|
178 |
-
border-color: var(--primary);
|
179 |
-
box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
|
180 |
-
}
|
181 |
-
|
182 |
-
.help-text {
|
183 |
-
font-size: 0.85em;
|
184 |
-
color: var(--text-secondary);
|
185 |
-
padding: 8px;
|
186 |
-
background-color: var(--neutral-100);
|
187 |
-
border-radius: var(--radius-sm);
|
188 |
-
margin-top: 8px;
|
189 |
-
text-align: center;
|
190 |
-
}
|
191 |
-
|
192 |
-
/* 배포 결과 컨테이너 */
|
193 |
-
.deploy-output-container {
|
194 |
-
margin-top: 1rem;
|
195 |
-
padding: 0.8rem;
|
196 |
-
background-color: var(--neutral-100);
|
197 |
-
border: 1px solid var(--neutral-200);
|
198 |
-
border-radius: var(--radius-md);
|
199 |
-
min-height: 80px; /* 최소 높이 확보 */
|
200 |
-
max-height: 200px; /* 너무 커지지 않도록 */
|
201 |
-
overflow-y: auto; /* 내용 많으면 스크롤 */
|
202 |
-
font-size: 0.9em;
|
203 |
-
line-height: 1.5;
|
204 |
-
}
|
205 |
-
.deploy-output-container .no-deploy {
|
206 |
-
color: var(--text-tertiary);
|
207 |
-
text-align: center;
|
208 |
-
padding: 1rem 0;
|
209 |
-
}
|
210 |
-
.deploy-loading, .deploy-success, .deploy-error {
|
211 |
-
display: flex;
|
212 |
-
align-items: center;
|
213 |
-
padding: 0.5rem;
|
214 |
-
border-radius: var(--radius-sm);
|
215 |
-
margin-bottom: 0.5rem;
|
216 |
-
}
|
217 |
-
.deploy-loading { background-color: rgba(0,123,255,0.1); color: var(--primary); }
|
218 |
-
.deploy-success { background-color: rgba(40,167,69,0.1); color: var(--success); }
|
219 |
-
.deploy-error { background-color: rgba(220,53,69,0.1); color: var(--error); }
|
220 |
-
|
221 |
-
.loading-spinner {
|
222 |
-
border: 3px solid rgba(0,0,0,0.1);
|
223 |
-
border-top-color: var(--primary);
|
224 |
-
border-radius: 50%;
|
225 |
-
width: 18px;
|
226 |
-
height: 18px;
|
227 |
-
animation: spin 1s linear infinite;
|
228 |
-
margin-right: 10px;
|
229 |
-
}
|
230 |
-
.success-icon, .error-icon { font-size: 1.2em; margin-right: 8px; }
|
231 |
-
.url-box {
|
232 |
-
margin-top: 0.5rem;
|
233 |
-
background: var(--surface);
|
234 |
-
padding: 0.5rem 0.8rem;
|
235 |
-
border-radius: var(--radius-sm);
|
236 |
-
border: 1px solid var(--neutral-300);
|
237 |
-
display: flex;
|
238 |
-
align-items: center;
|
239 |
-
justify-content: space-between;
|
240 |
-
}
|
241 |
-
.url-box a {
|
242 |
-
color: var(--primary);
|
243 |
-
text-decoration: none;
|
244 |
-
font-weight: 500;
|
245 |
-
word-break: break-all;
|
246 |
-
margin-right: 10px;
|
247 |
-
}
|
248 |
-
.url-box a:hover { text-decoration: underline; }
|
249 |
-
.copy-btn {
|
250 |
-
background: var(--primary);
|
251 |
-
color: white;
|
252 |
-
border: none;
|
253 |
-
border-radius: var(--radius-sm);
|
254 |
-
padding: 0.3rem 0.6rem;
|
255 |
-
cursor: pointer;
|
256 |
-
font-size: 0.8em;
|
257 |
-
}
|
258 |
-
.copy-btn:hover { background: #0056b3; }
|
259 |
-
|
260 |
-
|
261 |
-
/* Drawer 스타일 */
|
262 |
-
.ant-drawer-header {
|
263 |
-
background: var(--primary);
|
264 |
-
border-bottom: 1px solid var(--neutral-300);
|
265 |
-
}
|
266 |
-
.ant-drawer-title, .ant-drawer-close { color: white; }
|
267 |
-
.code-markdown-output p, .code-markdown-output pre { margin: 0.5em 0; }
|
268 |
-
.code-markdown-output pre {
|
269 |
-
background-color: #2d2d2d; /* 어두운 배경 */
|
270 |
-
color: #f8f8f2; /* 밝은 텍스트 */
|
271 |
-
padding: 1em;
|
272 |
-
border-radius: var(--radius-md);
|
273 |
-
overflow-x: auto;
|
274 |
-
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
|
275 |
-
font-size: 0.85em;
|
276 |
-
}
|
277 |
-
.code-markdown-output code { /* 인라인 코드 */
|
278 |
-
background-color: var(--neutral-200);
|
279 |
-
padding: 0.2em 0.4em;
|
280 |
-
border-radius: var(--radius-sm);
|
281 |
-
font-size: 0.9em;
|
282 |
-
}
|
283 |
-
|
284 |
-
/* 템플릿 카드 스타일 (app.py의 create_template_html 내부 스타일과 일치 또는 여기서 중앙 관리) */
|
285 |
-
.session-history-grid .prompt-grid { /* create_template_html에서 생성된 그리드에 적용 */
|
286 |
-
/* 스타일은 create_template_html 내부 <style> 태그에 정의되어 있음 */
|
287 |
-
/* 필요시 여기서 오버라이드 가능 */
|
288 |
-
}
|
289 |
-
.close-btn-template-drawer { margin-top: 1rem; display: block; margin-left: auto; }
|
290 |
-
|
291 |
-
|
292 |
-
/* 스크롤바 */
|
293 |
-
::-webkit-scrollbar { width: 8px; height: 8px; }
|
294 |
-
::-webkit-scrollbar-track { background: var(--neutral-100); }
|
295 |
-
::-webkit-scrollbar-thumb { background: var(--neutral-300); border-radius: 4px; }
|
296 |
-
::-webkit-scrollbar-thumb:hover { background: var(--neutral-400); }
|
297 |
-
|
298 |
-
@keyframes spin {
|
299 |
-
to { transform: rotate(360deg); }
|
300 |
-
}
|
301 |
-
|
302 |
-
/* 반응형 조정 */
|
303 |
-
@media (max-width: 992px) { /* md 브레이크포인트 근처 */
|
304 |
-
.preview-panel, .control-panel-flex {
|
305 |
-
height: auto; /* 작은 화면에서는 높이 자동 조정 */
|
306 |
-
min-height: 400px; /* 최소 높이는 유지 */
|
307 |
-
}
|
308 |
-
.main-layout-row .ant-col { /* 컬럼들이 수직으로 쌓이도록 */
|
309 |
-
margin-bottom: 1rem;
|
310 |
-
}
|
311 |
-
}
|
312 |
-
|
313 |
-
@media (max-width: 768px) { /* sm 브레이크포인트 근처 */
|
314 |
-
.app-header h1 { font-size: 2rem; }
|
315 |
-
.app-header p { font-size: 1rem; }
|
316 |
-
|
317 |
-
.action-buttons-flex .ant-btn {
|
318 |
-
min-width: calc(50% - 4px); /* 버튼 2개씩 한 줄에 */
|
319 |
-
margin-bottom: 8px;
|
320 |
-
}
|
321 |
-
}
|
322 |
-
|
323 |
-
/* Gradio 기본 푸터 숨기기 */
|
324 |
-
footer.svelte-kqij2n { display: none !important; }
|
325 |
-
.gradio-container footer { display: none !important; }
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|