diff --git a/app.py b/app.py index 88906a3..78d7df1 100644 --- a/app.py +++ b/app.py @@ -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( '