dekun/Trading_Studio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix one-click UI blue borders and equal input cards

Browse Source 
Replace Group with Column, use CSS grid for equal card sizes, and override Gradio default primary borders for a cleaner 1800px layout.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
2026-06-12 19:38:48 +08:00
parent 56f14206dd
commit fbfca0b890
1 changed files with 74 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app.py
+74 -26
View File
@@ -1035,7 +1035,30 @@ gradio-app,
border-bottom: 3px solid #3b82f6 !important;
}
/* 一键生成：1800 宽单页工作区 */
/* 去掉 Tab / Group 默认蓝色粗框 */
.gradio-container .tabs {
border: none !important;
background: transparent !important;
}
.gradio-container .tabitem,
.gradio-container .tab-content,
.gradio-container [role="tabpanel"] {
border: none !important;
background: transparent !important;
padding: 0 !important;
}
.gradio-container .group.oneclick-panel,
.gradio-container .oneclick-panel {
border: 1px solid #2d3748 !important;
box-shadow: none !important;
}
.gradio-container .oneclick-panel .group,
.gradio-container .oneclick-body.group,
.gradio-container .oneclick-body {
border: none !important;
background: transparent !important;
box-shadow: none !important;
}
.oneclick-panel {
border: 1px solid #2d3748 !important;
border-radius: 14px !important;
@@ -1045,13 +1068,13 @@ gradio-app,
box-sizing: border-box !important;
overflow: hidden !important;
}
.oneclick-panel > .block,
.oneclick-panel > .form {
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
.oneclick-panel .block,
.oneclick-panel .form,
.oneclick-panel fieldset {
border-color: #374151 !important;
}
.oneclick-panel button.primary {
border-color: #2563eb !important;
}
.oneclick-hero {
padding: 14px 20px !important;
@@ -1071,26 +1094,44 @@ gradio-app,
padding: 16px 20px 20px !important;
}
.oneclick-input-grid {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: stretch !important;
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 16px !important;
width: 100% !important;
margin-bottom: 14px !important;
align-items: stretch !important;
}
.oneclick-input-grid > .column,
.oneclick-input-grid > .gr-column {
flex: 1 1 0 !important;
.oneclick-input-grid > .gr-column,
.oneclick-input-grid > div {
min-width: 0 !important;
width: 100% !important;
max-width: none !important;
}
.oneclick-card {
background: #1a2332 !important;
border: 1px solid #374151 !important;
border-radius: 10px !important;
padding: 10px 12px 12px !important;
padding: 12px 14px 14px !important;
min-height: 280px !important;
height: 100% !important;
box-sizing: border-box !important;
display: flex !important;
flex-direction: column !important;
}
.oneclick-card > .block,
.oneclick-card > .form {
flex: 1 1 auto !important;
display: flex !important;
flex-direction: column !important;
background: transparent !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
}
.oneclick-card .wrap,
.oneclick-card .input-container {
flex: 1 1 auto !important;
}
.oneclick-card .block-label,
.oneclick-card .label-wrap span {
@@ -1099,14 +1140,18 @@ gradio-app,
}
.oneclick-input-grid .audio-container,
.oneclick-input-grid .upload-container {
flex: 1 1 auto !important;
min-height: 220px !important;
height: 100% !important;
border: 1px dashed #4b5563 !important;
border-radius: 8px !important;
background: #111827 !important;
}
.oneclick-input-grid textarea {
min-height: 220px !important;
height: 100% !important;
border-radius: 8px !important;
resize: none !important;
}
.oneclick-toolbar {
display: flex !important;
@@ -1144,31 +1189,34 @@ gradio-app,
border-radius: 8px !important;
}
.oneclick-bottom-grid {
display: flex !important;
flex-direction: row !important;
display: grid !important;
grid-template-columns: 1fr 1fr 1fr !important;
gap: 16px !important;
width: 100% !important;
margin-bottom: 14px !important;
}
.oneclick-bottom-grid > .column,
.oneclick-bottom-grid > .gr-column {
flex: 1 1 0 !important;
.oneclick-bottom-grid > .gr-column,
.oneclick-bottom-grid > div {
min-width: 0 !important;
}
.oneclick-bottom-grid textarea {
min-height: 160px !important;
border-radius: 8px !important;
}
.oneclick-panel .tts-player-block {
margin-top: 4px !important;
}
.oneclick-panel .tts-player-block { margin-top: 4px !important; }
.oneclick-panel .accordion {
border-radius: 10px !important;
margin-top: 8px !important;
border-color: #374151 !important;
}
@media (max-width: 900px) {
.oneclick-input-grid,
.oneclick-bottom-grid,
.oneclick-input-grid {
grid-template-columns: 1fr !important;
}
.oneclick-bottom-grid {
grid-template-columns: 1fr !important;
}
.oneclick-toolbar {
flex-direction: column !important;
}
@@ -1442,7 +1490,7 @@ def build_theme() -> gr.themes.Base:
button_primary_text_color="#ffffff",
button_secondary_background_fill="#374151",
button_secondary_text_color="#e5e7eb",
border_color_primary="#3b82f6",
border_color_primary="#374151",
)
@@ -1454,7 +1502,7 @@ def build_app() -> gr.Blocks:
with gr.Tabs(elem_classes=["main-nav-tabs"]):
# ---- Tab 1: 一键生成（默认首页）----
with gr.Tab("一键生成"):
with gr.Group(elem_classes=["oneclick-panel"]):
with gr.Column(elem_classes=["oneclick-panel"]):
gr.HTML(
'<div class="oneclick-hero">'
"上传录音或粘贴转写"