Zenith Wang commited on
Commit
2c0e18d
·
1 Parent(s): 8cb19b0

Improve file upload box styling - fix text cutoff and align with text input

Browse files
Files changed (1) hide show
  1. app.py +75 -44
app.py CHANGED
@@ -293,74 +293,105 @@ def process_message(message, history, images, system_prompt, temperature, max_to
293
 
294
  # 创建Gradio界面
295
  css = """
296
- /* 强制设置File组件容器高度 */
297
- .compact-file, .compact-file > * {
298
- height: 52px !important;
299
- max-height: 52px !important;
300
- min-height: 52px !important;
301
  }
302
 
303
- /* 使用ID选择器确保优先级 */
304
  #image-upload {
305
- height: 52px !important;
306
- max-height: 52px !important;
307
- min-height: 52px !important;
 
 
 
 
 
 
 
 
 
 
308
  }
309
 
310
- #image-upload > div,
311
- #image-upload .wrap,
312
- #image-upload .block,
313
- #image-upload .container {
314
- height: 52px !important;
315
- max-height: 52px !important;
316
- min-height: 52px !important;
 
 
 
 
 
 
 
 
317
  padding: 0 !important;
 
 
 
 
 
 
318
  margin: 0 !important;
 
 
 
319
  }
320
 
321
- /* 文件上传按钮样式 */
322
- #image-upload button,
323
- .compact-file button {
324
- height: 50px !important;
325
- max-height: 50px !important;
326
- min-height: 50px !important;
 
 
327
  font-size: 13px !important;
328
- padding: 0 12px !important;
329
- margin: 1px !important;
330
  }
331
 
332
- /* 文件预览区域 */
333
- #image-upload .file-preview,
334
- .compact-file .file-preview {
335
- height: 50px !important;
336
- max-height: 50px !important;
337
  overflow-y: auto !important;
338
  font-size: 12px !important;
339
- padding: 4px !important;
 
 
340
  }
341
 
342
  /* 隐藏标签 */
343
- #image-upload label,
344
- .compact-file label {
345
  display: none !important;
346
  }
347
 
348
- /* 确保input元素也是正确高度 */
349
- #image-upload input[type="file"],
350
- .compact-file input[type="file"] {
351
- height: 50px !important;
352
- max-height: 50px !important;
353
  }
354
 
355
- /* 文本框参考高度 */
356
- #message-textbox textarea {
357
- min-height: 52px !important;
358
- max-height: 52px !important;
 
 
 
 
359
  }
360
 
361
- /* 使用通配符确保所有子元素 */
362
- #image-upload * {
363
- max-height: 52px !important;
 
364
  }
365
  """
366
 
 
293
 
294
  # 创建Gradio界面
295
  css = """
296
+ /* 文本框样式 */
297
+ #message-textbox textarea {
298
+ min-height: 54px !important;
299
+ max-height: 54px !important;
 
300
  }
301
 
302
+ /* File上传组件容器 */
303
  #image-upload {
304
+ height: 54px !important;
305
+ min-height: 54px !important;
306
+ max-height: 54px !important;
307
+ }
308
+
309
+ /* File组件内部wrapper */
310
+ #image-upload .wrap {
311
+ height: 54px !important;
312
+ min-height: 54px !important;
313
+ max-height: 54px !important;
314
+ padding: 0 !important;
315
+ margin: 0 !important;
316
+ border-radius: 8px !important;
317
  }
318
 
319
+ /* 上传区域样式 */
320
+ #image-upload .upload-container {
321
+ height: 54px !important;
322
+ min-height: 54px !important;
323
+ display: flex !important;
324
+ align-items: center !important;
325
+ justify-content: center !important;
326
+ flex-direction: column !important;
327
+ gap: 2px !important;
328
+ }
329
+
330
+ /* Drop File Here 文字样式 */
331
+ #image-upload .upload-text {
332
+ font-size: 13px !important;
333
+ margin: 0 !important;
334
  padding: 0 !important;
335
+ line-height: 1.2 !important;
336
+ }
337
+
338
+ /* or 文字样式 */
339
+ #image-upload .or-text {
340
+ font-size: 11px !important;
341
  margin: 0 !important;
342
+ padding: 0 !important;
343
+ opacity: 0.7 !important;
344
+ line-height: 1 !important;
345
  }
346
 
347
+ /* 隐藏默认的 or 分隔符 */
348
+ #image-upload .or {
349
+ display: none !important;
350
+ }
351
+
352
+ /* 上传按钮样式 */
353
+ #image-upload button {
354
+ height: 54px !important;
355
  font-size: 13px !important;
356
+ padding: 0 16px !important;
357
+ white-space: nowrap !important;
358
  }
359
 
360
+ /* 文件预览样式 */
361
+ #image-upload .file-preview {
362
+ height: 54px !important;
363
+ max-height: 54px !important;
 
364
  overflow-y: auto !important;
365
  font-size: 12px !important;
366
+ padding: 4px 8px !important;
367
+ display: flex !important;
368
+ align-items: center !important;
369
  }
370
 
371
  /* 隐藏标签 */
372
+ #image-upload label {
 
373
  display: none !important;
374
  }
375
 
376
+ /* 确保所有子元素不超过容器高度 */
377
+ #image-upload * {
378
+ max-height: 54px !important;
 
 
379
  }
380
 
381
+ /* 调整上传区域文字布局 */
382
+ #image-upload .center {
383
+ display: flex !important;
384
+ flex-direction: column !important;
385
+ align-items: center !important;
386
+ justify-content: center !important;
387
+ height: 54px !important;
388
+ gap: 0 !important;
389
  }
390
 
391
+ /* 调整文字行高避免截断 */
392
+ #image-upload span {
393
+ line-height: 1.2 !important;
394
+ display: block !important;
395
  }
396
  """
397