mirror of
https://github.com/Sagit-chu/flvx.git
synced 2026-09-28 07:36:38 +08:00
style: optimize card and table backgrounds for better custom background visibility
This commit is contained in:
@@ -4192,7 +4192,7 @@ export default function ForwardPage() {
|
||||
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]",
|
||||
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>
|
||||
@@ -4327,7 +4327,7 @@ export default function ForwardPage() {
|
||||
return (
|
||||
<div
|
||||
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 gap-2">
|
||||
@@ -4638,10 +4638,10 @@ export default function ForwardPage() {
|
||||
collapsed={collapsed}
|
||||
countClassName="text-xs text-default-600"
|
||||
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"
|
||||
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={() =>
|
||||
toggleTunnelGroupCollapsed(
|
||||
group.userId,
|
||||
|
||||
@@ -172,7 +172,7 @@ export default function MonitorPage() {
|
||||
<AnimatedPage className="px-3 lg:px-6 py-8">
|
||||
{/* 顶部英雄数据指标 (Hero Metrics) */}
|
||||
<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">
|
||||
<span className="text-default-600 font-medium text-sm">System Load</span>
|
||||
</div>
|
||||
@@ -189,7 +189,7 @@ export default function MonitorPage() {
|
||||
</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">
|
||||
<span className="text-default-600 font-medium text-sm">Active Connections</span>
|
||||
</div>
|
||||
@@ -206,7 +206,7 @@ export default function MonitorPage() {
|
||||
</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">
|
||||
<span className="text-default-600 font-medium text-sm">Bandwidth</span>
|
||||
</div>
|
||||
|
||||
@@ -1770,7 +1770,7 @@ export default function NodePage() {
|
||||
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]",
|
||||
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>
|
||||
@@ -2249,7 +2249,7 @@ export default function NodePage() {
|
||||
)}
|
||||
</span>
|
||||
</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 ? (
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{remoteUsage.usedPorts.map((port) => (
|
||||
@@ -2285,7 +2285,7 @@ export default function NodePage() {
|
||||
remoteUsage.bindings.map((binding) => (
|
||||
<div
|
||||
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">
|
||||
<span
|
||||
|
||||
@@ -1586,7 +1586,7 @@ export default function TunnelPage() {
|
||||
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]",
|
||||
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>
|
||||
|
||||
Reference in New Issue
Block a user