tcjlj/flvx
1
0
Fork 0
mirror of https://github.com/Sagit-chu/flvx.git synced 2026-09-28 07:36:38 +08:00
Code Issues Packages Projects Releases Wiki Activity

style: optimize card and table backgrounds for better custom background visibility

Browse Source
This commit is contained in:
sagitchu
2026-04-05 18:45:17 +08:00
parent cde379a1f4
commit ab0f36ba7b
4 changed files with 11 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
vite-frontend/src/pages/forward.tsx
+4 -4
View File
@@ -4192,7 +4192,7 @@ export default function ForwardPage() {
wrapper: "bg-transparent p-0 shadow-none border-none overflow-hidden rounded-[24px]", wrapper: "bg-transparent p-0 shadow-none border-none overflow-hidden rounded-[24px]",
th: "bg-default-100/50 text-default-600 font-semibold text-sm border-b border-divider py-3 uppercase tracking-wider first:rounded-tl-[24px] last:rounded-tr-[24px]", th: "bg-default-100/50 text-default-600 font-semibold text-sm border-b border-divider py-3 uppercase tracking-wider first:rounded-tl-[24px] last:rounded-tr-[24px]",
td: "py-3 border-b border-divider/50 group-data-[last=true]:border-b-0", td: "py-3 border-b border-divider/50 group-data-[last=true]:border-b-0",
tr: "hover:bg-white/40 dark:hover:bg-white/10 transition-colors group", tr: "hover:bg-white/10 dark:hover:bg-white/5 transition-colors group",
}} }}
> >
<TableHeader> <TableHeader>
@@ -4327,7 +4327,7 @@ export default function ForwardPage() {
return ( return (
<div <div
key={`grouped-table-${group.userId}-${group.userName}`} key={`grouped-table-${group.userId}-${group.userName}`}
className="overflow-hidden rounded-2xl border border-white/80 dark:border-white/10 bg-white/60 dark:bg-zinc-900/60 backdrop-blur-3xl shadow-[0_15px_35px_rgba(0,0,0,0.1)]" className="overflow-hidden rounded-2xl border border-white/80 dark:border-white/10 bg-white/20 dark:bg-zinc-900/20 backdrop-blur-3xl shadow-[0_15px_35px_rgba(0,0,0,0.1)]"
> >
<div className="flex items-center justify-between border-b border-white/20 dark:border-white/10 bg-white/40 dark:bg-black/40 backdrop-blur-md px-5 py-4"> <div className="flex items-center justify-between border-b border-white/20 dark:border-white/10 bg-white/40 dark:bg-black/40 backdrop-blur-md px-5 py-4">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
@@ -4638,10 +4638,10 @@ export default function ForwardPage() {
collapsed={collapsed} collapsed={collapsed}
countClassName="text-xs text-default-600" countClassName="text-xs text-default-600"
groupUserId={group.userId} groupUserId={group.userId}
headerClassName="flex items-center justify-between rounded-lg bg-white/40 dark:bg-black/40 backdrop-blur-md border border-white/20 dark:border-white/10 px-3 py-2" headerClassName="flex items-center justify-between rounded-lg bg-white/10 dark:bg-black/10 backdrop-blur-md border border-white/20 dark:border-white/10 px-3 py-2"
titleClassName="truncate text-sm font-semibold text-default-700" titleClassName="truncate text-sm font-semibold text-default-700"
tunnel={tunnel} tunnel={tunnel}
wrapperClassName="rounded-xl border border-divider bg-white/20 dark:bg-black/20 space-y-3" wrapperClassName="rounded-xl border border-divider bg-white/5 dark:bg-black/5 space-y-3"
onToggleCollapsed={() => onToggleCollapsed={() =>
toggleTunnelGroupCollapsed( toggleTunnelGroupCollapsed(
group.userId, group.userId,
vite-frontend/src/pages/monitor.tsx
+3 -3
View File
@@ -172,7 +172,7 @@ export default function MonitorPage() {
<AnimatedPage className="px-3 lg:px-6 py-8"> <AnimatedPage className="px-3 lg:px-6 py-8">
{/* 顶部英雄数据指标 (Hero Metrics) */} {/* 顶部英雄数据指标 (Hero Metrics) */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8"> <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
<div className="rounded-3xl border border-white/80 dark:border-white/10 bg-white/60 dark:bg-zinc-900/60 backdrop-blur-3xl shadow-[0_10px_30px_rgba(0,0,0,0.1)] p-6 relative overflow-hidden flex flex-col justify-between h-40"> <div className="rounded-3xl border border-white/80 dark:border-white/10 bg-white/20 dark:bg-zinc-900/20 backdrop-blur-3xl shadow-[0_10px_30px_rgba(0,0,0,0.1)] p-6 relative overflow-hidden flex flex-col justify-between h-40">
<div className="flex justify-between items-center z-10 relative"> <div className="flex justify-between items-center z-10 relative">
<span className="text-default-600 font-medium text-sm">System Load</span> <span className="text-default-600 font-medium text-sm">System Load</span>
</div> </div>
@@ -189,7 +189,7 @@ export default function MonitorPage() {
</div> </div>
</div> </div>
<div className="rounded-3xl border border-white/80 dark:border-white/10 bg-white/60 dark:bg-zinc-900/60 backdrop-blur-3xl shadow-[0_10px_30px_rgba(0,0,0,0.1)] p-6 relative overflow-hidden flex flex-col justify-between h-40"> <div className="rounded-3xl border border-white/80 dark:border-white/10 bg-white/20 dark:bg-zinc-900/20 backdrop-blur-3xl shadow-[0_10px_30px_rgba(0,0,0,0.1)] p-6 relative overflow-hidden flex flex-col justify-between h-40">
<div className="flex justify-between items-center z-10 relative"> <div className="flex justify-between items-center z-10 relative">
<span className="text-default-600 font-medium text-sm">Active Connections</span> <span className="text-default-600 font-medium text-sm">Active Connections</span>
</div> </div>
@@ -206,7 +206,7 @@ export default function MonitorPage() {
</div> </div>
</div> </div>
<div className="rounded-3xl border border-white/80 dark:border-white/10 bg-white/60 dark:bg-zinc-900/60 backdrop-blur-3xl shadow-[0_10px_30px_rgba(0,0,0,0.1)] p-6 relative overflow-hidden flex flex-col justify-between h-40"> <div className="rounded-3xl border border-white/80 dark:border-white/10 bg-white/20 dark:bg-zinc-900/20 backdrop-blur-3xl shadow-[0_10px_30px_rgba(0,0,0,0.1)] p-6 relative overflow-hidden flex flex-col justify-between h-40">
<div className="flex justify-between items-center z-10 relative"> <div className="flex justify-between items-center z-10 relative">
<span className="text-default-600 font-medium text-sm">Bandwidth</span> <span className="text-default-600 font-medium text-sm">Bandwidth</span>
</div> </div>
vite-frontend/src/pages/node.tsx
+3 -3
View File
@@ -1770,7 +1770,7 @@ export default function NodePage() {
wrapper: "bg-transparent p-0 shadow-none border-none overflow-hidden rounded-2xl", wrapper: "bg-transparent p-0 shadow-none border-none overflow-hidden rounded-2xl",
th: "bg-transparent text-default-600 font-semibold text-sm border-b border-white/20 dark:border-white/10 py-3 uppercase tracking-wider first:rounded-tl-[24px] last:rounded-tr-[24px]", th: "bg-transparent text-default-600 font-semibold text-sm border-b border-white/20 dark:border-white/10 py-3 uppercase tracking-wider first:rounded-tl-[24px] last:rounded-tr-[24px]",
td: "py-3 border-b border-divider/50 group-data-[last=true]:border-b-0", td: "py-3 border-b border-divider/50 group-data-[last=true]:border-b-0",
tr: "hover:bg-white/40 dark:hover:bg-white/10 transition-colors", tr: "hover:bg-white/10 dark:hover:bg-white/5 transition-colors",
}} }}
> >
<TableHeader> <TableHeader>
@@ -2249,7 +2249,7 @@ export default function NodePage() {
)} )}
</span> </span>
</div> </div>
<div className="max-h-20 overflow-y-auto rounded bg-white/70 dark:bg-black/20 p-1.5 [scrollbar-width:thin] [&::-webkit-scrollbar]:w-1"> <div className="max-h-20 overflow-y-auto rounded bg-white/10 dark:bg-black/10 p-1.5 [scrollbar-width:thin] [&::-webkit-scrollbar]:w-1">
{remoteUsage.usedPorts.length > 0 ? ( {remoteUsage.usedPorts.length > 0 ? (
<div className="flex flex-wrap gap-1"> <div className="flex flex-wrap gap-1">
{remoteUsage.usedPorts.map((port) => ( {remoteUsage.usedPorts.map((port) => (
@@ -2285,7 +2285,7 @@ export default function NodePage() {
remoteUsage.bindings.map((binding) => ( remoteUsage.bindings.map((binding) => (
<div <div
key={binding.bindingId} key={binding.bindingId}
className="rounded border border-default-200 dark:border-default-100/30 bg-white/70 dark:bg-black/20 p-2" className="rounded border border-default-200 dark:border-default-100/30 bg-white/10 dark:bg-black/10 p-2"
> >
<div className="flex items-center justify-between gap-2"> <div className="flex items-center justify-between gap-2">
<span <span
vite-frontend/src/pages/tunnel.tsx
+1 -1
View File
@@ -1586,7 +1586,7 @@ export default function TunnelPage() {
wrapper: "bg-transparent p-0 shadow-none border-none overflow-hidden rounded-[24px]", wrapper: "bg-transparent p-0 shadow-none border-none overflow-hidden rounded-[24px]",
th: "bg-transparent text-default-600 font-semibold text-sm border-b border-white/20 dark:border-white/10 py-3 uppercase tracking-wider first:rounded-tl-[24px] last:rounded-tr-[24px]", th: "bg-transparent text-default-600 font-semibold text-sm border-b border-white/20 dark:border-white/10 py-3 uppercase tracking-wider first:rounded-tl-[24px] last:rounded-tr-[24px]",
td: "py-3 border-b border-divider/50 group-data-[last=true]:border-b-0", td: "py-3 border-b border-divider/50 group-data-[last=true]:border-b-0",
tr: "hover:bg-white/40 dark:hover:bg-white/10 transition-colors", tr: "hover:bg-white/10 dark:hover:bg-white/5 transition-colors",
}} }}
> >
<TableHeader> <TableHeader>