From 2405cb03d8bd3ef0688ab072706a5b269f6e214a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=89=8B=E7=93=9C=E4=B8=80=E5=8D=81=E9=9B=AA?=
 <nanaeonn@outlook.com>
Date: Mon, 22 Dec 2025 13:07:08 +0800
Subject: [PATCH] Improve background and text styling in NetworkItemDisplay

Adjusted background opacity and hover effects for better visual consistency. Updated text color logic to enhance readability based on background presence.
---
 .../src/components/display_network_item.tsx               | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/napcat-webui-frontend/src/components/display_network_item.tsx b/packages/napcat-webui-frontend/src/components/display_network_item.tsx
index 2ad197d5..eb7a3e94 100644
--- a/packages/napcat-webui-frontend/src/components/display_network_item.tsx
+++ b/packages/napcat-webui-frontend/src/components/display_network_item.tsx
@@ -24,7 +24,7 @@ const NetworkItemDisplay: React.FC<NetworkItemDisplayProps> = ({
       className={clsx(
         'backdrop-blur-sm border border-white/40 dark:border-white/10 shadow-sm transition-all',
         hasBackground
-          ? 'bg-white/20 dark:bg-black/10 hover:bg-white/40 dark:hover:bg-black/20'
+          ? 'bg-white/10 dark:bg-black/10 hover:bg-white/20 dark:hover:bg-black/20'
           : 'bg-white/60 dark:bg-black/40 hover:bg-white/70 dark:hover:bg-black/30',
         size === 'md'
           ? 'col-span-8 md:col-span-2'
@@ -35,16 +35,18 @@ const NetworkItemDisplay: React.FC<NetworkItemDisplayProps> = ({
       <CardBody className='items-center md:gap-1 p-1 md:p-2'>
         <div
           className={clsx(
-            'flex-1 font-mono font-bold text-default-700 dark:text-gray-200',
+            'flex-1 font-mono font-bold',
             size === 'md' ? 'text-4xl md:text-5xl' : 'text-2xl md:text-3xl',
+            hasBackground ? 'text-white drop-shadow-sm' : 'text-default-700 dark:text-gray-200'
           )}
         >
           {count}
         </div>
         <div
           className={clsx(
-            'whitespace-nowrap text-nowrap flex-shrink-0 font-medium text-default-500',
+            'whitespace-nowrap text-nowrap flex-shrink-0 font-medium',
             size === 'md' ? 'text-sm' : 'text-xs',
+            hasBackground ? 'text-white/80' : 'text-default-500'
           )}
         >
           {label}