From ab0f36ba7bb230575e71950a7e73dd1fe20c2b2d Mon Sep 17 00:00:00 2001
From: sagitchu <sagitchu@gmail.com>
Date: Sun, 5 Apr 2026 18:45:17 +0800
Subject: [PATCH] style: optimize card and table backgrounds for better custom
 background visibility

---
 vite-frontend/src/pages/forward.tsx | 8 ++++----
 vite-frontend/src/pages/monitor.tsx | 6 +++---
 vite-frontend/src/pages/node.tsx    | 6 +++---
 vite-frontend/src/pages/tunnel.tsx  | 2 +-
 4 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/vite-frontend/src/pages/forward.tsx b/vite-frontend/src/pages/forward.tsx
index 75eccc6..8a59ced 100644
--- a/vite-frontend/src/pages/forward.tsx
+++ b/vite-frontend/src/pages/forward.tsx
@@ -4192,7 +4192,7 @@ export default function ForwardPage() {
                         wrapper: "bg-transparent p-0 shadow-none border-none overflow-hidden rounded-[24px]",
                         th: "bg-default-100/50 text-default-600 font-semibold text-sm border-b border-divider py-3 uppercase tracking-wider first:rounded-tl-[24px] last:rounded-tr-[24px]",
                         td: "py-3 border-b border-divider/50 group-data-[last=true]:border-b-0",
-                        tr: "hover:bg-white/40 dark:hover:bg-white/10 transition-colors group",
+                        tr: "hover:bg-white/10 dark:hover:bg-white/5 transition-colors group",
                       }}
                     >
                       <TableHeader>
@@ -4327,7 +4327,7 @@ export default function ForwardPage() {
               return (
                 <div
                   key={`grouped-table-${group.userId}-${group.userName}`}
-                  className="overflow-hidden rounded-2xl border border-white/80 dark:border-white/10 bg-white/60 dark:bg-zinc-900/60 backdrop-blur-3xl shadow-[0_15px_35px_rgba(0,0,0,0.1)]"
+                  className="overflow-hidden rounded-2xl border border-white/80 dark:border-white/10 bg-white/20 dark:bg-zinc-900/20 backdrop-blur-3xl shadow-[0_15px_35px_rgba(0,0,0,0.1)]"
                 >
                   <div className="flex items-center justify-between border-b border-white/20 dark:border-white/10 bg-white/40 dark:bg-black/40 backdrop-blur-md px-5 py-4">
                     <div className="flex items-center gap-2">
@@ -4638,10 +4638,10 @@ export default function ForwardPage() {
                             collapsed={collapsed}
                             countClassName="text-xs text-default-600"
                             groupUserId={group.userId}
-                            headerClassName="flex items-center justify-between rounded-lg bg-white/40 dark:bg-black/40 backdrop-blur-md border border-white/20 dark:border-white/10 px-3 py-2"
+                            headerClassName="flex items-center justify-between rounded-lg bg-white/10 dark:bg-black/10 backdrop-blur-md border border-white/20 dark:border-white/10 px-3 py-2"
                             titleClassName="truncate text-sm font-semibold text-default-700"
                             tunnel={tunnel}
-                            wrapperClassName="rounded-xl border border-divider bg-white/20 dark:bg-black/20 space-y-3"
+                            wrapperClassName="rounded-xl border border-divider bg-white/5 dark:bg-black/5 space-y-3"
                             onToggleCollapsed={() =>
                               toggleTunnelGroupCollapsed(
                                 group.userId,
diff --git a/vite-frontend/src/pages/monitor.tsx b/vite-frontend/src/pages/monitor.tsx
index 84c53b2..7116963 100644
--- a/vite-frontend/src/pages/monitor.tsx
+++ b/vite-frontend/src/pages/monitor.tsx
@@ -172,7 +172,7 @@ export default function MonitorPage() {
     <AnimatedPage className="px-3 lg:px-6 py-8">
       {/* 顶部英雄数据指标 (Hero Metrics) */}
       <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
-        <div className="rounded-3xl border border-white/80 dark:border-white/10 bg-white/60 dark:bg-zinc-900/60 backdrop-blur-3xl shadow-[0_10px_30px_rgba(0,0,0,0.1)] p-6 relative overflow-hidden flex flex-col justify-between h-40">
+        <div className="rounded-3xl border border-white/80 dark:border-white/10 bg-white/20 dark:bg-zinc-900/20 backdrop-blur-3xl shadow-[0_10px_30px_rgba(0,0,0,0.1)] p-6 relative overflow-hidden flex flex-col justify-between h-40">
           <div className="flex justify-between items-center z-10 relative">
             <span className="text-default-600 font-medium text-sm">System Load</span>
           </div>
@@ -189,7 +189,7 @@ export default function MonitorPage() {
           </div>
         </div>
 
-        <div className="rounded-3xl border border-white/80 dark:border-white/10 bg-white/60 dark:bg-zinc-900/60 backdrop-blur-3xl shadow-[0_10px_30px_rgba(0,0,0,0.1)] p-6 relative overflow-hidden flex flex-col justify-between h-40">
+        <div className="rounded-3xl border border-white/80 dark:border-white/10 bg-white/20 dark:bg-zinc-900/20 backdrop-blur-3xl shadow-[0_10px_30px_rgba(0,0,0,0.1)] p-6 relative overflow-hidden flex flex-col justify-between h-40">
           <div className="flex justify-between items-center z-10 relative">
             <span className="text-default-600 font-medium text-sm">Active Connections</span>
           </div>
@@ -206,7 +206,7 @@ export default function MonitorPage() {
           </div>
         </div>
 
-        <div className="rounded-3xl border border-white/80 dark:border-white/10 bg-white/60 dark:bg-zinc-900/60 backdrop-blur-3xl shadow-[0_10px_30px_rgba(0,0,0,0.1)] p-6 relative overflow-hidden flex flex-col justify-between h-40">
+        <div className="rounded-3xl border border-white/80 dark:border-white/10 bg-white/20 dark:bg-zinc-900/20 backdrop-blur-3xl shadow-[0_10px_30px_rgba(0,0,0,0.1)] p-6 relative overflow-hidden flex flex-col justify-between h-40">
           <div className="flex justify-between items-center z-10 relative">
             <span className="text-default-600 font-medium text-sm">Bandwidth</span>
           </div>
diff --git a/vite-frontend/src/pages/node.tsx b/vite-frontend/src/pages/node.tsx
index 3342a43..7fff46a 100644
--- a/vite-frontend/src/pages/node.tsx
+++ b/vite-frontend/src/pages/node.tsx
@@ -1770,7 +1770,7 @@ export default function NodePage() {
               wrapper: "bg-transparent p-0 shadow-none border-none overflow-hidden rounded-2xl",
               th: "bg-transparent text-default-600 font-semibold text-sm border-b border-white/20 dark:border-white/10 py-3 uppercase tracking-wider first:rounded-tl-[24px] last:rounded-tr-[24px]",
               td: "py-3 border-b border-divider/50 group-data-[last=true]:border-b-0",
-              tr: "hover:bg-white/40 dark:hover:bg-white/10 transition-colors",
+              tr: "hover:bg-white/10 dark:hover:bg-white/5 transition-colors",
             }}
           >
             <TableHeader>
@@ -2249,7 +2249,7 @@ export default function NodePage() {
                                         )}
                                       </span>
                                     </div>
-                                    <div className="max-h-20 overflow-y-auto rounded bg-white/70 dark:bg-black/20 p-1.5 [scrollbar-width:thin] [&::-webkit-scrollbar]:w-1">
+                                    <div className="max-h-20 overflow-y-auto rounded bg-white/10 dark:bg-black/10 p-1.5 [scrollbar-width:thin] [&::-webkit-scrollbar]:w-1">
                                       {remoteUsage.usedPorts.length > 0 ? (
                                         <div className="flex flex-wrap gap-1">
                                           {remoteUsage.usedPorts.map((port) => (
@@ -2285,7 +2285,7 @@ export default function NodePage() {
                                         remoteUsage.bindings.map((binding) => (
                                           <div
                                             key={binding.bindingId}
-                                            className="rounded border border-default-200 dark:border-default-100/30 bg-white/70 dark:bg-black/20 p-2"
+                                            className="rounded border border-default-200 dark:border-default-100/30 bg-white/10 dark:bg-black/10 p-2"
                                           >
                                             <div className="flex items-center justify-between gap-2">
                                               <span
diff --git a/vite-frontend/src/pages/tunnel.tsx b/vite-frontend/src/pages/tunnel.tsx
index d85ccf4..406908c 100644
--- a/vite-frontend/src/pages/tunnel.tsx
+++ b/vite-frontend/src/pages/tunnel.tsx
@@ -1586,7 +1586,7 @@ export default function TunnelPage() {
               wrapper: "bg-transparent p-0 shadow-none border-none overflow-hidden rounded-[24px]",
               th: "bg-transparent text-default-600 font-semibold text-sm border-b border-white/20 dark:border-white/10 py-3 uppercase tracking-wider first:rounded-tl-[24px] last:rounded-tr-[24px]",
               td: "py-3 border-b border-divider/50 group-data-[last=true]:border-b-0",
-              tr: "hover:bg-white/40 dark:hover:bg-white/10 transition-colors",
+              tr: "hover:bg-white/10 dark:hover:bg-white/5 transition-colors",
             }}
           >
             <TableHeader>