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:
@@ -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)
|
||||
|
||||
Reference in New Issue
Block a user