Northern_Lights/NapCatQQ
1
0
Fork 0
mirror of https://github.com/NapNeko/NapCatQQ.git synced 2025-12-30 13:39:03 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Improve background and text styling in NetworkItemDisplay

Browse Source 
Adjusted background opacity and hover effects for better visual consistency. Updated text color logic to enhance readability based on background presence.
This commit is contained in:
手瓜一十雪 2025-12-22 13:07:08 +08:00
parent 32d3ff6998
commit 2405cb03d8
1 changed files with 5 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
packages/napcat-webui-frontend/src/components/display_network_item.tsx
View File

@ -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}