root/nezha_dash
1
0
Fork 0
mirror of https://github.com/hamster1963/nezha-dash.git synced 2025-04-24 21:10:45 +08:00
Code Issues Packages Projects Releases Wiki Activity

style: enhance server card hover effects with border and shadow

Browse Source
This commit is contained in:
hamster1963 2025-01-29 23:58:25 +08:00
parent 25bd7c41b4
commit 43fb66552e
3 changed files with 31 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/ServerCard.tsx
View File

@ -30,7 +30,7 @@ export default function ServerCard({
<Link onClick={saveSession} href={`/server/${id}`} prefetch={true}> <Link onClick={saveSession} href={`/server/${id}`} prefetch={true}>
<Card <Card
className={cn( className={cn(
"flex flex-col items-center justify-start gap-3 p-3 md:px-5 cursor-pointer hover:bg-accent/50 transition-colors", "flex flex-col items-center justify-start gap-3 p-3 md:px-5 cursor-pointer hover:border-stone-300 dark:hover:border-stone-700 hover:shadow-md",
{ {
"flex-col": fixedTopServerName, "flex-col": fixedTopServerName,
"lg:flex-row": !fixedTopServerName, "lg:flex-row": !fixedTopServerName,
@ -137,7 +137,7 @@ export default function ServerCard({
<Link onClick={saveSession} href={`/server/${id}`} prefetch={true}> <Link onClick={saveSession} href={`/server/${id}`} prefetch={true}>
<Card <Card
className={cn( className={cn(
"flex flex-col items-center justify-start gap-3 p-3 md:px-5 cursor-pointer hover:bg-accent/50 transition-colors", "flex flex-col items-center justify-start gap-3 p-3 md:px-5 cursor-pointer hover:border-stone-300 dark:hover:border-stone-700 hover:shadow-md",
showNetTransfer ? "lg:min-h-[91px] min-h-[123px]" : "lg:min-h-[61px] min-h-[93px]", showNetTransfer ? "lg:min-h-[91px] min-h-[123px]" : "lg:min-h-[61px] min-h-[93px]",
{ {
"flex-col": fixedTopServerName, "flex-col": fixedTopServerName,

49
components/ServerCardInline.tsx
View File

@ -29,7 +29,7 @@ export default function ServerCardInline({
<Link onClick={saveSession} href={`/server/${id}`} prefetch={true}> <Link onClick={saveSession} href={`/server/${id}`} prefetch={true}>
<Card <Card
className={cn( className={cn(
"flex items-center lg:flex-row justify-start gap-3 p-3 md:px-5 cursor-pointer hover:bg-accent/50 transition-colors min-w-[900px] w-full", "flex items-center lg:flex-row justify-start gap-3 p-3 md:px-5 cursor-pointer hover:border-stone-300 dark:hover:border-stone-700 hover:shadow-md min-w-[900px] w-full",
)} )}
> >
<section <section
@ -124,27 +124,34 @@ export default function ServerCardInline({
</Card> </Card>
</Link> </Link>
) : ( ) : (
<Card <Link onClick={saveSession} href={`/server/${id}`} prefetch={true}>
className={cn( <Card
"flex items-center justify-start gap-3 p-3 md:px-5 min-h-[61px] min-w-[900px] flex-row", className={cn(
)} "flex items-center justify-start gap-3 p-3 md:px-5 hover:border-stone-300 dark:hover:border-stone-700 hover:shadow-md min-h-[61px] min-w-[900px] flex-row",
> )}
<section
className={cn("grid items-center gap-2 lg:w-40")}
style={{ gridTemplateColumns: "auto auto 1fr" }}
> >
<span className="h-2 w-2 shrink-0 rounded-full bg-red-500 self-center" /> <section
<div className={cn("grid items-center gap-2 lg:w-40")}
className={cn("flex items-center justify-center", showFlag ? "min-w-[17px]" : "min-w-0")} style={{ gridTemplateColumns: "auto auto 1fr" }}
> >
{showFlag ? <ServerFlag country_code={country_code} /> : null} <span className="h-2 w-2 shrink-0 rounded-full bg-red-500 self-center" />
</div> <div
<div className="relative w-28"> className={cn(
<p className={cn("break-all font-bold tracking-tight", showFlag ? "text-xs" : "text-sm")}> "flex items-center justify-center",
{name} showFlag ? "min-w-[17px]" : "min-w-0",
</p> )}
</div> >
</section> {showFlag ? <ServerFlag country_code={country_code} /> : null}
</Card> </div>
<div className="relative w-28">
<p
className={cn("break-all font-bold tracking-tight", showFlag ? "text-xs" : "text-sm")}
>
{name}
</p>
</div>
</section>
</Card>
</Link>
) )
} }

2
lib/env.ts
View File

@ -139,4 +139,4 @@ export function getAllEnvConfig(): { server: ServerEnvConfig; client: ClientEnvC
ShowIpInfo: parseBoolean(getClientEnv("ShowIpInfo")), ShowIpInfo: parseBoolean(getClientEnv("ShowIpInfo")),
}, },
} }
} }