wood/nezha-dash-v1
1
0
Fork 0
mirror of https://github.com/woodchen-ink/nezha-dash-v1.git synced 2025-07-18 17:41:56 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: improve Server page button styling with dark mode support

Browse Source
This commit is contained in:
hamster1963 2025-02-04 14:41:53 +08:00
parent a8888b9ca6
commit 8ddf26861f
1 changed files with 21 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/pages/Server.tsx
View File

@ -214,17 +214,19 @@ export default function Servers() {
setShowMap(showMap === "0" ? "1" : "0") setShowMap(showMap === "0" ? "1" : "0")
}} }}
className={cn( className={cn(
"rounded-[50px] cursor-pointer [text-shadow:_0_1px_0_rgb(0_0_0_/_20%)] p-[10px] transition-all shadow-[inset_0_1px_0_rgba(255,255,255,0.2)] border-2", "rounded-[50px] bg-white dark:bg-stone-800 cursor-pointer p-[10px] transition-all border border-stone-200 dark:border-stone-700 hover:bg-stone-100 dark:hover:bg-stone-700",
{ {
"text-white bg-blue-500 border-blue-500": showMap === "1", "!bg-blue-500 hover:!bg-blue-600 border-blue-600 dark:border-blue-600": showMap === "1",
"text-blue-700 border-blue-700 bg-gray-200": showMap === "0", "text-white": showMap === "1",
}, },
{ {
"bg-opacity-70": customBackgroundImage, "bg-opacity-70 dark:bg-opacity-70": customBackgroundImage,
}, },
)} )}
> >
<MapIcon className="size-[13px]" /> <MapIcon className={cn("size-[13px]", {
"text-white": showMap === "1",
})} />
</button> </button>
<button <button
onClick={() => { onClick={() => {
@ -232,17 +234,19 @@ export default function Servers() {
localStorage.setItem("showServices", showServices === "0" ? "1" : "0") localStorage.setItem("showServices", showServices === "0" ? "1" : "0")
}} }}
className={cn( className={cn(
"rounded-[50px] cursor-pointer [text-shadow:_0_1px_0_rgb(0_0_0_/_20%)] p-[10px] transition-all shadow-[inset_0_1px_0_rgba(255,255,255,0.2)] border-2", "rounded-[50px] bg-white dark:bg-stone-800 cursor-pointer p-[10px] transition-all border border-stone-200 dark:border-stone-700 hover:bg-stone-100 dark:hover:bg-stone-700",
{ {
"text-white bg-blue-500 border-blue-500": showServices === "1", "!bg-blue-500 hover:!bg-blue-600 border-blue-600 dark:border-blue-600": showServices === "1",
"text-blue-700 border-blue-700 bg-gray-200": showServices === "0", "text-white": showServices === "1",
}, },
{ {
"bg-opacity-70": customBackgroundImage, "bg-opacity-70 dark:bg-opacity-70": customBackgroundImage,
}, },
)} )}
> >
<ChartBarSquareIcon className="size-[13px]" /> <ChartBarSquareIcon className={cn("size-[13px]", {
"text-white": showServices === "1",
})} />
</button> </button>
<button <button
onClick={() => { onClick={() => {
@ -250,17 +254,19 @@ export default function Servers() {
localStorage.setItem("inline", inline === "0" ? "1" : "0") localStorage.setItem("inline", inline === "0" ? "1" : "0")
}} }}
className={cn( className={cn(
"rounded-[50px] cursor-pointer [text-shadow:_0_1px_0_rgb(0_0_0_/_20%)] p-[10px] transition-all shadow-[inset_0_1px_0_rgba(255,255,255,0.2)] border-2", "rounded-[50px] bg-white dark:bg-stone-800 cursor-pointer p-[10px] transition-all border border-stone-200 dark:border-stone-700 hover:bg-stone-100 dark:hover:bg-stone-700",
{ {
"text-white bg-blue-500 border-blue-500": inline === "1", "!bg-blue-500 hover:!bg-blue-600 border-blue-600 dark:border-blue-600": inline === "1",
"text-blue-700 border-blue-700 bg-gray-200": inline === "0", "text-white": inline === "1",
}, },
{ {
"bg-opacity-70": customBackgroundImage, "bg-opacity-70 dark:bg-opacity-70": customBackgroundImage,
}, },
)} )}
> >
<ViewColumnsIcon className="size-[13px]" /> <ViewColumnsIcon className={cn("size-[13px]", {
"text-white": inline === "1",
})} />
</button> </button>
<GroupSwitch tabs={groupTabs} currentTab={currentGroup} setCurrentTab={handleTagChange} /> <GroupSwitch tabs={groupTabs} currentTab={currentGroup} setCurrentTab={handleTagChange} />
</section> </section>