From 16bde226041e33660e2b922821c4bdda238c87de Mon Sep 17 00:00:00 2001
From: shuaiplus <2327005759@qq.com>
Date: Mon, 22 Jun 2026 22:30:29 +0800
Subject: [PATCH] Unify mobile topbar controls

---
 webapp/src/components/ThemeSwitch.tsx |  2 +-
 webapp/src/styles/responsive.css      | 48 +++++++++++++++++++++++++--
 2 files changed, 46 insertions(+), 4 deletions(-)

diff --git a/webapp/src/components/ThemeSwitch.tsx b/webapp/src/components/ThemeSwitch.tsx
index 08ebce3..a6de895 100644
--- a/webapp/src/components/ThemeSwitch.tsx
+++ b/webapp/src/components/ThemeSwitch.tsx
@@ -7,7 +7,7 @@ interface ThemeSwitchProps {
 export default function ThemeSwitch(props: ThemeSwitchProps) {
   return (
     <div className="theme-switch-wrap" title={props.title}>
-      <label className="theme-switch" aria-label={props.title}>
+      <label className={`theme-switch ${props.checked ? 'checked' : 'unchecked'}`} aria-label={props.title}>
         <span className="sun" aria-hidden="true">
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
             <g fill="#ffd43b">
diff --git a/webapp/src/styles/responsive.css b/webapp/src/styles/responsive.css
index 79a0959..b6bea25 100644
--- a/webapp/src/styles/responsive.css
+++ b/webapp/src/styles/responsive.css
@@ -133,7 +133,10 @@
   }
 
   .topbar-actions > .network-status-badge {
-    @apply h-8 px-2 text-[0];
+    @apply inline-flex h-9 w-9 min-w-9 justify-center gap-0 rounded-xl p-0 text-[0];
+    background: color-mix(in srgb, var(--panel) 88%, transparent);
+    border-color: var(--line);
+    box-shadow: none;
   }
 
   .topbar-actions > .network-status-badge svg {
@@ -142,7 +145,10 @@
 
   .mobile-sidebar-toggle,
   .mobile-lock-btn {
-    @apply inline-flex h-9 w-9 min-w-9 justify-center gap-0 p-0 text-[0];
+    @apply inline-flex h-9 w-9 min-w-9 justify-center gap-0 rounded-xl p-0 text-[0];
+    background: color-mix(in srgb, var(--panel) 88%, transparent);
+    border-color: var(--line);
+    box-shadow: none;
   }
 
   .mobile-sidebar-toggle .btn-icon,
@@ -155,10 +161,46 @@
   }
 
   .mobile-theme-btn .theme-switch {
-    transform: scale(0.8);
+    @apply h-9 w-9 rounded-xl border;
+    background: color-mix(in srgb, var(--panel) 88%, transparent);
+    border-color: var(--line);
+    box-shadow: none;
+    transform: none;
     transform-origin: center;
   }
 
+  .mobile-theme-btn .theme-switch-slider,
+  .mobile-theme-btn .theme-switch-slider::before {
+    @apply hidden;
+  }
+
+  .mobile-theme-btn .theme-switch .sun svg,
+  .mobile-theme-btn .theme-switch .moon svg {
+    @apply h-[18px] w-[18px];
+    top: 7px;
+    left: 8px;
+    z-index: 1;
+    opacity: 0;
+    transform: none;
+  }
+
+  .mobile-theme-btn .theme-switch.unchecked .sun svg,
+  .mobile-theme-btn .theme-switch.checked .moon svg {
+    opacity: 1;
+  }
+
+  .mobile-theme-btn .theme-switch.checked .moon svg {
+    fill: var(--primary);
+  }
+
+  .topbar-actions > .network-status-badge:hover,
+  .mobile-sidebar-toggle:hover,
+  .mobile-lock-btn:hover,
+  .mobile-theme-btn .theme-switch:hover {
+    background: var(--panel-subtle);
+    border-color: color-mix(in srgb, var(--primary) 28%, var(--line));
+  }
+
   .app-main {
     @apply flex min-h-0 flex-col;
   }