Buriburizaemon/nezha-dash-v1
1
0
Fork 0
mirror of https://github.com/Buriburizaem0n/nezha-dash-v1.git synced 2026-09-19 17:50:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: improve card styling and hover effects across components

Browse Source
This commit is contained in:
hamster1963
2026-06-01 11:53:11 +08:00
parent 57aaba3918
commit d69190abd5
6 changed files with 32 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ServerCard.tsx
+1 -1
View File
@@ -62,7 +62,7 @@ export default function ServerCard({
return online ? ( return online ? (
<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 cursor-pointer flex-col items-center justify-start gap-3 p-3 transition-all hover:shadow-sm hover:ring-stone-300 md:px-5 dark:hover:ring-stone-700",
{ {
"flex-col": fixedTopServerName, "flex-col": fixedTopServerName,
"lg:flex-row": !fixedTopServerName, "lg:flex-row": !fixedTopServerName,
src/components/ServerCardInline.tsx
+1 -1
View File
@@ -58,7 +58,7 @@ export default function ServerCardInline({
<section> <section>
<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 w-full min-w-[900px] cursor-pointer items-center justify-start gap-3 p-3 transition-all hover:shadow-sm hover:ring-stone-300 md:px-5 lg:flex-row dark:hover:ring-stone-700",
{ {
"bg-card/70": customBackgroundImage, "bg-card/70": customBackgroundImage,
}, },
src/components/ServerDetailOverview.tsx
+15 -15
View File
@@ -114,7 +114,7 @@ export default function ServerDetailOverview({
{name} {name}
</div> </div>
<section className="flex flex-wrap gap-2 mt-3"> <section className="flex flex-wrap gap-2 mt-3">
<Card className="rounded-[10px] bg-transparent border-none shadow-none"> <Card className="rounded-[10px] bg-transparent border-none shadow-none ring-0">
<CardContent className="px-1.5 py-1"> <CardContent className="px-1.5 py-1">
<section className="flex flex-col items-start gap-0.5"> <section className="flex flex-col items-start gap-0.5">
<p className="text-xs text-muted-foreground"> <p className="text-xs text-muted-foreground">
@@ -135,7 +135,7 @@ export default function ServerDetailOverview({
</CardContent> </CardContent>
</Card> </Card>
{online && ( {online && (
<Card className="rounded-[10px] bg-transparent border-none shadow-none"> <Card className="rounded-[10px] bg-transparent border-none shadow-none ring-0">
<CardContent className="px-1.5 py-1"> <CardContent className="px-1.5 py-1">
<section className="flex flex-col items-start gap-0.5"> <section className="flex flex-col items-start gap-0.5">
<p className="text-xs text-muted-foreground"> <p className="text-xs text-muted-foreground">
@@ -152,7 +152,7 @@ export default function ServerDetailOverview({
</Card> </Card>
)} )}
{version && ( {version && (
<Card className="rounded-[10px] bg-transparent border-none shadow-none"> <Card className="rounded-[10px] bg-transparent border-none shadow-none ring-0">
<CardContent className="px-1.5 py-1"> <CardContent className="px-1.5 py-1">
<section className="flex flex-col items-start gap-0.5"> <section className="flex flex-col items-start gap-0.5">
<p className="text-xs text-muted-foreground"> <p className="text-xs text-muted-foreground">
@@ -164,7 +164,7 @@ export default function ServerDetailOverview({
</Card> </Card>
)} )}
{arch && ( {arch && (
<Card className="rounded-[10px] bg-transparent border-none shadow-none"> <Card className="rounded-[10px] bg-transparent border-none shadow-none ring-0">
<CardContent className="px-1.5 py-1"> <CardContent className="px-1.5 py-1">
<section className="flex flex-col items-start gap-0.5"> <section className="flex flex-col items-start gap-0.5">
<p className="text-xs text-muted-foreground"> <p className="text-xs text-muted-foreground">
@@ -177,7 +177,7 @@ export default function ServerDetailOverview({
)} )}
{mem_total ? ( {mem_total ? (
<Card className="rounded-[10px] bg-transparent border-none shadow-none"> <Card className="rounded-[10px] bg-transparent border-none shadow-none ring-0">
<CardContent className="px-1.5 py-1"> <CardContent className="px-1.5 py-1">
<section className="flex flex-col items-start gap-0.5"> <section className="flex flex-col items-start gap-0.5">
<p className="text-xs text-muted-foreground"> <p className="text-xs text-muted-foreground">
@@ -190,7 +190,7 @@ export default function ServerDetailOverview({
) : null} ) : null}
{disk_total ? ( {disk_total ? (
<Card className="rounded-[10px] bg-transparent border-none shadow-none"> <Card className="rounded-[10px] bg-transparent border-none shadow-none ring-0">
<CardContent className="px-1.5 py-1"> <CardContent className="px-1.5 py-1">
<section className="flex flex-col items-start gap-0.5"> <section className="flex flex-col items-start gap-0.5">
<p className="text-xs text-muted-foreground"> <p className="text-xs text-muted-foreground">
@@ -206,7 +206,7 @@ export default function ServerDetailOverview({
<TooltipProvider delayDuration={100}> <TooltipProvider delayDuration={100}>
<Tooltip> <Tooltip>
<TooltipTrigger asChild> <TooltipTrigger asChild>
<Card className="rounded-[10px] bg-transparent border-none shadow-none"> <Card className="rounded-[10px] bg-transparent border-none shadow-none ring-0">
<CardContent className="px-1.5 py-1"> <CardContent className="px-1.5 py-1">
<section className="flex flex-col items-start gap-0.5"> <section className="flex flex-col items-start gap-0.5">
<p className="text-xs text-muted-foreground"> <p className="text-xs text-muted-foreground">
@@ -236,7 +236,7 @@ export default function ServerDetailOverview({
</section> </section>
<section className="flex flex-wrap gap-2 mt-1"> <section className="flex flex-wrap gap-2 mt-1">
{platform && ( {platform && (
<Card className="rounded-[10px] bg-transparent border-none shadow-none"> <Card className="rounded-[10px] bg-transparent border-none shadow-none ring-0">
<CardContent className="px-1.5 py-1"> <CardContent className="px-1.5 py-1">
<section className="flex flex-col items-start gap-0.5"> <section className="flex flex-col items-start gap-0.5">
<p className="text-xs text-muted-foreground"> <p className="text-xs text-muted-foreground">
@@ -251,7 +251,7 @@ export default function ServerDetailOverview({
</Card> </Card>
)} )}
{cpu_info.length > 0 && ( {cpu_info.length > 0 && (
<Card className="rounded-[10px] bg-transparent border-none shadow-none"> <Card className="rounded-[10px] bg-transparent border-none shadow-none ring-0">
<CardContent className="px-1.5 py-1"> <CardContent className="px-1.5 py-1">
<section className="flex flex-col items-start gap-0.5"> <section className="flex flex-col items-start gap-0.5">
<p className="text-xs text-muted-foreground">{"CPU"}</p> <p className="text-xs text-muted-foreground">{"CPU"}</p>
@@ -261,7 +261,7 @@ export default function ServerDetailOverview({
</Card> </Card>
)} )}
{gpu_info.length > 0 && ( {gpu_info.length > 0 && (
<Card className="rounded-[10px] bg-transparent border-none shadow-none"> <Card className="rounded-[10px] bg-transparent border-none shadow-none ring-0">
<CardContent className="px-1.5 py-1"> <CardContent className="px-1.5 py-1">
<section className="flex flex-col items-start gap-0.5"> <section className="flex flex-col items-start gap-0.5">
<p className="text-xs text-muted-foreground">{"GPU"}</p> <p className="text-xs text-muted-foreground">{"GPU"}</p>
@@ -272,7 +272,7 @@ export default function ServerDetailOverview({
)} )}
</section> </section>
<section className="flex flex-wrap gap-2 mt-1"> <section className="flex flex-wrap gap-2 mt-1">
<Card className="rounded-[10px] bg-transparent border-none shadow-none"> <Card className="rounded-[10px] bg-transparent border-none shadow-none ring-0">
<CardContent className="px-1.5 py-1"> <CardContent className="px-1.5 py-1">
<section className="flex flex-col items-start gap-0.5"> <section className="flex flex-col items-start gap-0.5">
<p className="text-xs text-muted-foreground">{"Load"}</p> <p className="text-xs text-muted-foreground">{"Load"}</p>
@@ -283,7 +283,7 @@ export default function ServerDetailOverview({
</CardContent> </CardContent>
</Card> </Card>
{net_out_transfer ? ( {net_out_transfer ? (
<Card className="rounded-[10px] bg-transparent border-none shadow-none"> <Card className="rounded-[10px] bg-transparent border-none shadow-none ring-0">
<CardContent className="px-1.5 py-1"> <CardContent className="px-1.5 py-1">
<section className="flex flex-col items-start gap-0.5"> <section className="flex flex-col items-start gap-0.5">
<p className="text-xs text-muted-foreground"> <p className="text-xs text-muted-foreground">
@@ -302,7 +302,7 @@ export default function ServerDetailOverview({
</Card> </Card>
) : null} ) : null}
{net_in_transfer ? ( {net_in_transfer ? (
<Card className="rounded-[10px] bg-transparent border-none shadow-none"> <Card className="rounded-[10px] bg-transparent border-none shadow-none ring-0">
<CardContent className="px-1.5 py-1"> <CardContent className="px-1.5 py-1">
<section className="flex flex-col items-start gap-0.5"> <section className="flex flex-col items-start gap-0.5">
<p className="text-xs text-muted-foreground"> <p className="text-xs text-muted-foreground">
@@ -347,7 +347,7 @@ export default function ServerDetailOverview({
</section> </section>
<section className="flex flex-wrap gap-2 mt-1"> <section className="flex flex-wrap gap-2 mt-1">
<Card className="rounded-[10px] bg-transparent border-none shadow-none"> <Card className="rounded-[10px] bg-transparent border-none shadow-none ring-0">
<CardContent className="px-1.5 py-1"> <CardContent className="px-1.5 py-1">
<section className="flex flex-col items-start gap-0.5"> <section className="flex flex-col items-start gap-0.5">
<p className="text-xs text-muted-foreground"> <p className="text-xs text-muted-foreground">
@@ -359,7 +359,7 @@ export default function ServerDetailOverview({
</section> </section>
</CardContent> </CardContent>
</Card> </Card>
<Card className="rounded-[10px] bg-transparent border-none shadow-none"> <Card className="rounded-[10px] bg-transparent border-none shadow-none ring-0">
<CardContent className="px-1.5 py-1"> <CardContent className="px-1.5 py-1">
<section className="flex flex-col items-start gap-0.5"> <section className="flex flex-col items-start gap-0.5">
<p className="text-xs text-muted-foreground"> <p className="text-xs text-muted-foreground">
src/components/ServerOverview.tsx
+12 -7
View File
@@ -47,9 +47,12 @@ export default function ServerOverview({
onClick={() => { onClick={() => {
setStatus("all"); setStatus("all");
}} }}
className={cn("hover:border-blue-500 cursor-pointer transition-all", { className={cn(
"group cursor-pointer transition-all hover:ring-blue-500 dark:hover:ring-blue-600",
{
"bg-card/70": customBackgroundImage, "bg-card/70": customBackgroundImage,
})} },
)}
> >
<CardContent className="flex h-full items-center px-6 py-3"> <CardContent className="flex h-full items-center px-6 py-3">
<section className="flex flex-col gap-1"> <section className="flex flex-col gap-1">
@@ -70,12 +73,13 @@ export default function ServerOverview({
setStatus("online"); setStatus("online");
}} }}
className={cn( className={cn(
"cursor-pointer hover:ring-green-500 ring-1 ring-transparent transition-all", "cursor-pointer ring-1 transition-all hover:ring-green-500 dark:hover:ring-green-600",
{ {
"bg-card/70": customBackgroundImage, "bg-card/70": customBackgroundImage,
}, },
{ {
"ring-green-500 ring-2 border-transparent": status === "online", "border-transparent ring-2 ring-green-500 dark:ring-green-600":
status === "online",
}, },
)} )}
> >
@@ -100,12 +104,13 @@ export default function ServerOverview({
setStatus("offline"); setStatus("offline");
}} }}
className={cn( className={cn(
"cursor-pointer hover:ring-red-500 ring-1 ring-transparent transition-all", "cursor-pointer ring-1 transition-all hover:ring-red-500 dark:hover:ring-red-600",
{ {
"bg-card/70": customBackgroundImage, "bg-card/70": customBackgroundImage,
}, },
{ {
"ring-red-500 ring-2 border-transparent": status === "offline", "border-transparent ring-2 ring-red-500 dark:ring-red-600":
status === "offline",
}, },
)} )}
> >
@@ -126,7 +131,7 @@ export default function ServerOverview({
</Card> </Card>
<Card <Card
className={cn( className={cn(
"hover:ring-purple-500 ring-1 ring-transparent transition-all", "group ring-1 hover:ring-purple-500 dark:hover:ring-purple-600",
{ {
"bg-card/70": customBackgroundImage, "bg-card/70": customBackgroundImage,
}, },
src/components/ui/card.tsx
+1 -1
View File
@@ -8,7 +8,7 @@ const Card = React.forwardRef<
<div <div
ref={ref} ref={ref}
className={cn( className={cn(
"rounded-lg border bg-card text-card-foreground shadow-lg shadow-neutral-200/40 dark:shadow-none", "rounded-lg bg-card text-card-foreground shadow-md shadow-stone-200/50 ring ring-stone-200 dark:shadow-none dark:ring-stone-800",
className, className,
)} )}
{...props} {...props}
src/pages/Server.tsx
+1 -1
View File
@@ -445,7 +445,7 @@ export default function Servers() {
{inline === "1" && ( {inline === "1" && (
<section <section
ref={containerRef} ref={containerRef}
className="flex flex-col gap-2 overflow-x-scroll scrollbar-hidden mt-6 server-inline-list" className="flex flex-col gap-2 overflow-x-scroll p-px scrollbar-hidden mt-6 server-inline-list"
> >
{filteredServers.map((serverInfo) => ( {filteredServers.map((serverInfo) => (
<ServerCardInline <ServerCardInline