Buriburizaemon/nezha-dash-v1
1
0
Fork 0
mirror of https://github.com/Buriburizaem0n/nezha-dash-v1.git synced 2026-09-19 09:40:14 +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 ? (
<Card
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,
"lg:flex-row": !fixedTopServerName,
src/components/ServerCardInline.tsx
+1 -1
View File
@@ -58,7 +58,7 @@ export default function ServerCardInline({
<section>
<Card
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,
},
src/components/ServerDetailOverview.tsx
+15 -15
View File
@@ -114,7 +114,7 @@ export default function ServerDetailOverview({
{name}
</div>
<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">
<section className="flex flex-col items-start gap-0.5">
<p className="text-xs text-muted-foreground">
@@ -135,7 +135,7 @@ export default function ServerDetailOverview({
</CardContent>
</Card>
{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">
<section className="flex flex-col items-start gap-0.5">
<p className="text-xs text-muted-foreground">
@@ -152,7 +152,7 @@ export default function ServerDetailOverview({
</Card>
)}
{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">
<section className="flex flex-col items-start gap-0.5">
<p className="text-xs text-muted-foreground">
@@ -164,7 +164,7 @@ export default function ServerDetailOverview({
</Card>
)}
{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">
<section className="flex flex-col items-start gap-0.5">
<p className="text-xs text-muted-foreground">
@@ -177,7 +177,7 @@ export default function ServerDetailOverview({
)}
{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">
<section className="flex flex-col items-start gap-0.5">
<p className="text-xs text-muted-foreground">
@@ -190,7 +190,7 @@ export default function ServerDetailOverview({
) : null}
{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">
<section className="flex flex-col items-start gap-0.5">
<p className="text-xs text-muted-foreground">
@@ -206,7 +206,7 @@ export default function ServerDetailOverview({
<TooltipProvider delayDuration={100}>
<Tooltip>
<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">
<section className="flex flex-col items-start gap-0.5">
<p className="text-xs text-muted-foreground">
@@ -236,7 +236,7 @@ export default function ServerDetailOverview({
</section>
<section className="flex flex-wrap gap-2 mt-1">
{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">
<section className="flex flex-col items-start gap-0.5">
<p className="text-xs text-muted-foreground">
@@ -251,7 +251,7 @@ export default function ServerDetailOverview({
</Card>
)}
{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">
<section className="flex flex-col items-start gap-0.5">
<p className="text-xs text-muted-foreground">{"CPU"}</p>
@@ -261,7 +261,7 @@ export default function ServerDetailOverview({
</Card>
)}
{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">
<section className="flex flex-col items-start gap-0.5">
<p className="text-xs text-muted-foreground">{"GPU"}</p>
@@ -272,7 +272,7 @@ export default function ServerDetailOverview({
)}
</section>
<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">
<section className="flex flex-col items-start gap-0.5">
<p className="text-xs text-muted-foreground">{"Load"}</p>
@@ -283,7 +283,7 @@ export default function ServerDetailOverview({
</CardContent>
</Card>
{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">
<section className="flex flex-col items-start gap-0.5">
<p className="text-xs text-muted-foreground">
@@ -302,7 +302,7 @@ export default function ServerDetailOverview({
</Card>
) : null}
{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">
<section className="flex flex-col items-start gap-0.5">
<p className="text-xs text-muted-foreground">
@@ -347,7 +347,7 @@ export default function ServerDetailOverview({
</section>
<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">
<section className="flex flex-col items-start gap-0.5">
<p className="text-xs text-muted-foreground">
@@ -359,7 +359,7 @@ export default function ServerDetailOverview({
</section>
</CardContent>
</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">
<section className="flex flex-col items-start gap-0.5">
<p className="text-xs text-muted-foreground">
src/components/ServerOverview.tsx
+13 -8
View File
@@ -47,9 +47,12 @@ export default function ServerOverview({
onClick={() => {
setStatus("all");
}}
className={cn("hover:border-blue-500 cursor-pointer transition-all", {
"bg-card/70": customBackgroundImage,
})}
className={cn(
"group cursor-pointer transition-all hover:ring-blue-500 dark:hover:ring-blue-600",
{
"bg-card/70": customBackgroundImage,
},
)}
>
<CardContent className="flex h-full items-center px-6 py-3">
<section className="flex flex-col gap-1">
@@ -70,12 +73,13 @@ export default function ServerOverview({
setStatus("online");
}}
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,
},
{
"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");
}}
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,
},
{
"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
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,
},
src/components/ui/card.tsx
+1 -1
View File
@@ -8,7 +8,7 @@ const Card = React.forwardRef<
<div
ref={ref}
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,
)}
{...props}
src/pages/Server.tsx
+1 -1
View File
@@ -445,7 +445,7 @@ export default function Servers() {
{inline === "1" && (
<section
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) => (
<ServerCardInline