feat: 优化checkbox样式为开关，调整高级选项卡样式

ChuanhuChatbot.py

@@ -176,11 +176,12 @@ with gr.Blocks(css=customCSS, theme=small_and_beautiful_theme) as demo:
                                     downloadFile = gr.File(interactive=True)
 
                 with gr.Tab(label=i18n("高级")):
-                    gr.Markdown(i18n("# ⚠️ 务必谨慎更改 ⚠️\n\n如果无法使用请恢复默认设置"))
                     gr.HTML(get_html("appearance_switcher.html").format(label=i18n("切换亮暗色主题")), elem_classes="insert_block")
                     use_streaming_checkbox = gr.Checkbox(
-                            label=i18n("实时传输回答"), value=True, visible=ENABLE_STREAMING_OPTION
+                            label=i18n("实时传输回答"), value=True, visible=ENABLE_STREAMING_OPTION, elem_classes="switch_checkbox"
                         )
+                    checkUpdateBtn = gr.Button(i18n("🔄 检查更新..."), visible=check_update)
+                    gr.Markdown(i18n("# ⚠️ 务必谨慎更改 ⚠️\n\n如果无法使用请恢复默认设置"))
                     with gr.Accordion(i18n("参数"), open=False):
                         temperature_slider = gr.Slider(
                             minimum=-0,
@@ -279,7 +280,6 @@ with gr.Blocks(css=customCSS, theme=small_and_beautiful_theme) as demo:
                         )
                         changeProxyBtn = gr.Button(i18n("🔄 设置代理地址"))
                         default_btn = gr.Button(i18n("🔙 恢复默认设置"))
-                    checkUpdateBtn = gr.Button(i18n("🔄 检查更新..."), visible=check_update)
 
     gr.Markdown(CHUANHU_DESCRIPTION, elem_id="description")
     gr.HTML(get_html("footer.html").format(versions=versions_html()), elem_id="footer")

assets/custom.css

@@ -7,8 +7,18 @@
     --message-user-background-color-dark: #26B561;
     --message-bot-background-color-light: #FFFFFF;
     --message-bot-background-color-dark: #2C2C2C;
+    --switch-checkbox-color-light: #e5e7eb;
+    --switch-checkbox-color-dark: #515151;
+
+    @media (prefers-color-scheme: light) {
+        --switch-checkbox-color: var(--switch-checkbox-color-light);
+    }
+    @media (prefers-color-scheme: dark) {
+        --switch-checkbox-color: var(--switch-checkbox-color-dark);
+    }
 }
 
+
 #app_title {
     font-weight: var(--prose-header-text-weight);
     font-size: var(--text-xxl);
@@ -147,7 +157,7 @@ footer {
 .insert_block {
     position: relative;
     margin: 0;
-    padding: .5em 1em;
+    padding: 8px 12px;
     box-shadow: var(--block-shadow);
     border-width: var(--block-border-width);
     border-color: var(--block-border-color);
@@ -223,6 +233,61 @@ input:checked + .apSlider::before {
     content:"🌚";
 }
 
+.switch_checkbox label {
+    flex-direction: row-reverse;
+    justify-content: space-between;
+}
+.switch_checkbox input[type="checkbox"] + span {
+    margin-left: 0 !important;
+}
+
+.switch_checkbox input[type="checkbox"] {
+    -moz-appearance: none;
+    appearance: none;
+    -webkit-appearance: none;
+    outline: none;
+    display: none;
+}
+
+.switch_checkbox input[type="checkbox"] {
+    display: inline-block !important;
+    position: relative !important;
+    border: none !important;
+    appearance: none !important;
+    background: #fff;
+    outline: none;
+    width: 48px !important;
+    height: 24px !important;
+    border-radius: 12px !important;
+    box-shadow: none !important;
+    background-image: none !important;
+    background-color: var(--switch-checkbox-color) !important;
+    transition: .2s ease background-color;
+}
+.dark .switch_checkbox input[type="checkbox"] {
+    background-color: var(--switch-checkbox-color-dark) !important;
+}
+.switch_checkbox input[type="checkbox"]::before {
+    content: "";
+    position: absolute;
+    width: 24px;
+    height: 24px;
+    top: 0;
+    left: 0;
+    background-color: #fff;
+    transform: scale(0.85);
+    border-radius: 12px !important;
+    transition: .4s ease all;
+    box-shadow: var(--input-shadow);
+}
+.switch_checkbox input:checked[type="checkbox"] {
+    background-color: var(--primary-600) !important;
+}
+.switch_checkbox input:checked[type="checkbox"]::before {
+    background-color: #fff;
+    left: 24px;
+}
+
 /* Override Slider Styles (for webkit browsers like Safari and Chrome)
  * 好希望这份提案能早日实现 https://github.com/w3c/csswg-drafts/issues/4410
  * 进度滑块在各个平台还是太不统一了