Fix voice selector white screen on dark mobile UI.

Replace Dropdown with styled Radio and add dark-theme CSS for select lists.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
2026-06-12 17:32:56 +08:00
parent eb71e28427
commit 131cbf070a
+68 -2
View File
@@ -489,6 +489,70 @@ gradio-app,
border: 1px solid #64748b !important;
}
/* 音色选择 Radio(避免 Dropdown 在深色/手机端白底白字) */
.gradio-container .voice-radio fieldset {
border: 1px solid #374151 !important;
border-radius: 10px !important;
background: #111827 !important;
padding: 10px 12px !important;
}
.gradio-container .voice-radio label {
display: flex !important;
align-items: center !important;
gap: 10px !important;
padding: 10px 12px !important;
margin: 6px 0 !important;
border-radius: 8px !important;
border: 1px solid #374151 !important;
background: #1a2332 !important;
color: #e5e7eb !important;
font-size: 0.92rem !important;
cursor: pointer !important;
}
.gradio-container .voice-radio label:hover {
border-color: #3b82f6 !important;
background: #1e293b !important;
}
.gradio-container .voice-radio label.selected {
border-color: #3b82f6 !important;
background: #1e3a5f !important;
color: #ffffff !important;
font-weight: 600 !important;
}
.gradio-container .voice-radio input[type="radio"] {
accent-color: #3b82f6 !important;
width: 18px !important;
height: 18px !important;
flex-shrink: 0 !important;
}
/* Dropdown 兜底(其他下拉组件深色化) */
.gradio-container .gradio-dropdown input,
.gradio-container .dropdown input,
.gradio-container select {
background: #1a2332 !important;
color: #ffffff !important;
border: 1px solid #4b5563 !important;
}
.gradio-container ul.options,
.gradio-container .gradio-dropdown ul,
.gradio-container [role="listbox"] {
background: #1e293b !important;
border: 1px solid #4b5563 !important;
color: #e5e7eb !important;
}
.gradio-container ul.options li,
.gradio-container [role="option"] {
color: #e5e7eb !important;
background: #1e293b !important;
}
.gradio-container ul.options li:hover,
.gradio-container ul.options li.selected,
.gradio-container [role="option"][aria-selected="true"] {
background: #2563eb !important;
color: #ffffff !important;
}
/* 输入框下方 info 提示文字 */
.gradio-container .hint,
.gradio-container .info,
@@ -954,11 +1018,12 @@ def build_app() -> gr.Blocks:
"> 全部在 **本机显卡** 运行,无需微软/讯飞 API。"
"可选「我的锁定音色」或预设男/女声;合成前会自动清洗 Markdown。"
)
tts_voice = gr.Dropdown(
tts_voice = gr.Radio(
label="配音音色(本地 ChatTTS",
choices=voice_choice_labels(),
value=_default_voice_label(),
info="预设音色需先在服务器执行 bash scripts/generate_voice_presets.sh",
elem_classes=["voice-radio"],
)
polished_text = gr.Textbox(
label="润色配音稿(可编辑,支持含 Markdown,合成时自动清洗)",
@@ -998,10 +1063,11 @@ def build_app() -> gr.Blocks:
label="跳过 Gemma4 润色(仅测试 TTS)",
value=False,
)
pipe_voice = gr.Dropdown(
pipe_voice = gr.Radio(
label="配音音色(本地 ChatTTS",
choices=voice_choice_labels(),
value=_default_voice_label(),
elem_classes=["voice-radio"],
)
pipeline_btn = gr.Button("▶ 启动全流程", variant="primary", size="lg")
pipeline_log = gr.Textbox(label="流水线日志", lines=6, interactive=False)