mirror of
https://github.com/Sagit-chu/flvx.git
synced 2026-09-29 16:06:36 +08:00
style: apply frosted glass backgrounds to inner cards and nested elements (#421)
Replaced solid backgrounds (bg-white, bg-default-50) with high-blur translucent glass (backdrop-blur-3xl) inside tunnel topology nodes, dashboard forward rules, and flow charts. Matched the aesthetic of the inner components to inherit the adaptive light/dark mode root backgrounds.
This commit is contained in:
sagit
@@ -1067,7 +1067,7 @@ export default function DashboardPage() {
|
||||
{group.forwards.map((forward) => (
|
||||
<div
|
||||
key={forward.id}
|
||||
className="bg-white dark:bg-default-100/50 border border-gray-200 dark:border-default-200 rounded-lg p-3 hover:shadow-md transition-shadow"
|
||||
className="bg-white/10 dark:bg-black/10 backdrop-blur-md border border-white/20 dark:border-white/10 rounded-lg p-3 shadow-sm hover:shadow-md transition-all duration-300"
|
||||
>
|
||||
<div className="space-y-3">
|
||||
<div>
|
||||
@@ -1076,7 +1076,7 @@ export default function DashboardPage() {
|
||||
</h4>
|
||||
<div className="space-y-1">
|
||||
<button
|
||||
className={`block px-2 py-1 bg-default-50/50 dark:bg-default-100/20 backdrop-blur-md rounded-lg border border-default-200/50 dark:border-default-700/50 font-mono text-xs truncate text-foreground transition-colors duration-200 ${hasMultipleIps(forward.inIp) ? "cursor-pointer hover:bg-default-100 dark:hover:bg-default-200/50" : ""}`}
|
||||
className={`block px-2 py-1 bg-white/20 dark:bg-black/20 backdrop-blur-md rounded-lg border border-white/20 dark:border-white/10 font-mono text-xs truncate text-foreground transition-all duration-300 ${hasMultipleIps(forward.inIp) ? "cursor-pointer hover:bg-white/30 dark:hover:bg-white/10" : ""}`}
|
||||
disabled={!hasMultipleIps(forward.inIp)}
|
||||
title={formatInAddress(
|
||||
forward.inIp,
|
||||
@@ -1097,7 +1097,7 @@ export default function DashboardPage() {
|
||||
↓
|
||||
</div>
|
||||
<button
|
||||
className={`block px-2 py-1 bg-default-50/50 dark:bg-default-100/20 backdrop-blur-md rounded-lg border border-default-200/50 dark:border-default-700/50 font-mono text-xs truncate text-foreground transition-colors duration-200 ${hasMultipleRemoteAddresses(forward.remoteAddr) ? "cursor-pointer hover:bg-default-100 dark:hover:bg-default-200/50" : ""}`}
|
||||
className={`block px-2 py-1 bg-white/20 dark:bg-black/20 backdrop-blur-md rounded-lg border border-white/20 dark:border-white/10 font-mono text-xs truncate text-foreground transition-all duration-300 ${hasMultipleRemoteAddresses(forward.remoteAddr) ? "cursor-pointer hover:bg-white/30 dark:hover:bg-white/10" : ""}`}
|
||||
disabled={
|
||||
!hasMultipleRemoteAddresses(
|
||||
forward.remoteAddr,
|
||||
|
||||
@@ -95,7 +95,7 @@ export const FlowChartCard = ({
|
||||
: 0;
|
||||
|
||||
return (
|
||||
<div className="bg-white/70 dark:bg-zinc-900/70 backdrop-blur-xl border border-white/50 rounded-2xl shadow-[0_10px_30px_rgba(0,0,0,0.1)] p-4">
|
||||
<div className="bg-white/20 dark:bg-black/20 backdrop-blur-3xl border border-white/50 rounded-2xl shadow-[0_10px_30px_rgba(0,0,0,0.1)] p-4">
|
||||
<p className="font-medium text-foreground">{`时间: ${label ?? ""}`}</p>
|
||||
<p className="text-primary font-semibold mt-1">{`流量: ${formatFlow(flowValue)}`}</p>
|
||||
</div>
|
||||
|
||||
@@ -3689,7 +3689,7 @@ export default function ForwardPage() {
|
||||
return (
|
||||
<Card
|
||||
key={forward.id}
|
||||
className="group h-full flex flex-col overflow-hidden"
|
||||
className="group h-full flex flex-col overflow-hidden bg-white/20 dark:bg-zinc-900/20 backdrop-blur-3xl border border-white/80 dark:border-white/10 shadow-[0_15px_35px_rgba(0,0,0,0.1)]"
|
||||
>
|
||||
<CardHeader className="pb-2 md:pb-2">
|
||||
<div className="flex justify-between items-start w-full">
|
||||
@@ -3746,7 +3746,7 @@ export default function ForwardPage() {
|
||||
{/* 地址信息 */}
|
||||
<div className="space-y-1">
|
||||
<button
|
||||
className={`cursor-pointer px-2 py-1 bg-default-50 dark:bg-default-100/50 rounded border border-default-200 dark:border-default-300 transition-colors duration-200 ${
|
||||
className={`cursor-pointer px-2 py-1 bg-white/20 dark:bg-black/20 backdrop-blur-md rounded border border-default-200 dark:border-default-300 transition-colors duration-200 ${
|
||||
hasMultipleAddresses(forward.inIp)
|
||||
? "hover:bg-default-100 dark:hover:bg-default-200/50"
|
||||
: ""
|
||||
@@ -3786,7 +3786,7 @@ export default function ForwardPage() {
|
||||
</button>
|
||||
|
||||
<button
|
||||
className={`cursor-pointer px-2 py-1 bg-default-50 dark:bg-default-100/50 rounded border border-default-200 dark:border-default-300 transition-colors duration-200 ${
|
||||
className={`cursor-pointer px-2 py-1 bg-white/20 dark:bg-black/20 backdrop-blur-md rounded border border-default-200 dark:border-default-300 transition-colors duration-200 ${
|
||||
hasMultipleAddresses(forward.remoteAddr)
|
||||
? "hover:bg-default-100 dark:hover:bg-default-200/50"
|
||||
: ""
|
||||
@@ -4256,7 +4256,7 @@ export default function ForwardPage() {
|
||||
</Card>
|
||||
</>
|
||||
) : (
|
||||
<Card>
|
||||
<Card className="bg-white/20 dark:bg-zinc-900/20 backdrop-blur-3xl border border-white/80 dark:border-white/10 shadow-[0_15px_35px_rgba(0,0,0,0.1)]">
|
||||
<CardBody className="text-center py-20 flex flex-col items-center justify-center min-h-[240px]">
|
||||
<h3 className="text-xl font-medium text-foreground tracking-tight mb-2">
|
||||
暂无规则配置
|
||||
@@ -4302,7 +4302,7 @@ export default function ForwardPage() {
|
||||
</DndContext>
|
||||
</>
|
||||
) : (
|
||||
<Card>
|
||||
<Card className="bg-white/20 dark:bg-zinc-900/20 backdrop-blur-3xl border border-white/80 dark:border-white/10 shadow-[0_15px_35px_rgba(0,0,0,0.1)]">
|
||||
<CardBody className="text-center py-20 flex flex-col items-center justify-center min-h-[240px]">
|
||||
<h3 className="text-xl font-medium text-foreground tracking-tight mb-2">
|
||||
暂无规则配置
|
||||
@@ -4562,7 +4562,7 @@ export default function ForwardPage() {
|
||||
})}
|
||||
</div>
|
||||
) : (
|
||||
<Card>
|
||||
<Card className="bg-white/20 dark:bg-zinc-900/20 backdrop-blur-3xl border border-white/80 dark:border-white/10 shadow-[0_15px_35px_rgba(0,0,0,0.1)]">
|
||||
<CardBody className="text-center py-20 flex flex-col items-center justify-center min-h-[240px]">
|
||||
<h3 className="text-xl font-medium text-foreground tracking-tight mb-2">
|
||||
暂无规则配置
|
||||
|
||||
@@ -1578,7 +1578,7 @@ export default function TunnelPage() {
|
||||
{/* 隧道卡片网格 */}
|
||||
{tunnels.length > 0 ? (
|
||||
viewMode === "list" ? (
|
||||
<Card>
|
||||
<Card className="bg-white/20 dark:bg-zinc-900/20 backdrop-blur-3xl border border-white/80 dark:border-white/10 shadow-[0_15px_35px_rgba(0,0,0,0.1)]">
|
||||
<Table
|
||||
aria-label="隧道列表"
|
||||
className="overflow-x-auto min-w-full"
|
||||
@@ -1721,7 +1721,7 @@ export default function TunnelPage() {
|
||||
{(listeners) => (
|
||||
<Card
|
||||
key={tunnel.id}
|
||||
className="group overflow-hidden"
|
||||
className="group overflow-hidden bg-white/20 dark:bg-zinc-900/20 backdrop-blur-3xl border border-white/80 dark:border-white/10 shadow-[0_15px_35px_rgba(0,0,0,0.1)]"
|
||||
>
|
||||
<CardHeader className="pb-2 md:pb-2">
|
||||
<div className="flex justify-between items-start w-full">
|
||||
@@ -1771,7 +1771,7 @@ export default function TunnelPage() {
|
||||
<div className="pt-2 border-t border-divider">
|
||||
<div className="flex items-center justify-center gap-2 text-xs">
|
||||
{/* 入口节点 */}
|
||||
<div className="flex items-center gap-1 px-2 py-1 bg-primary-50 dark:bg-primary-100/20 rounded border border-primary-200 dark:border-primary-300/20">
|
||||
<div className="flex items-center gap-1 px-2 py-1 bg-primary-50/30 dark:bg-primary-100/20 backdrop-blur-md rounded border border-primary-200/50 dark:border-primary-300/20">
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className="w-3 h-3 text-primary-600"
|
||||
@@ -1806,7 +1806,7 @@ export default function TunnelPage() {
|
||||
</svg>
|
||||
|
||||
{/* 转发链 */}
|
||||
<div className="flex items-center gap-1 px-2 py-1 bg-secondary-50 dark:bg-secondary-100/20 rounded border border-secondary-200 dark:border-secondary-300/20">
|
||||
<div className="flex items-center gap-1 px-2 py-1 bg-secondary-50/30 dark:bg-secondary-100/20 backdrop-blur-md rounded border border-secondary-200/50 dark:border-secondary-300/20">
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className="w-3 h-3 text-secondary-600"
|
||||
@@ -1844,7 +1844,7 @@ export default function TunnelPage() {
|
||||
</svg>
|
||||
|
||||
{/* 出口节点 */}
|
||||
<div className="flex items-center gap-1 px-2 py-1 bg-success-50 dark:bg-success-100/20 rounded border border-success-200 dark:border-success-300/20">
|
||||
<div className="flex items-center gap-1 px-2 py-1 bg-success-50/30 dark:bg-success-100/20 backdrop-blur-md rounded border border-success-200/50 dark:border-success-300/20">
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className="w-3 h-3 text-success-600"
|
||||
@@ -1871,7 +1871,7 @@ export default function TunnelPage() {
|
||||
<div
|
||||
className={`grid gap-2 ${tunnel.type === 2 && tunnel.ipPreference ? "grid-cols-3" : "grid-cols-2"}`}
|
||||
>
|
||||
<div className="text-center p-1.5 bg-default-50 dark:bg-default-100/30 rounded">
|
||||
<div className="text-center p-1.5 bg-white/5 dark:bg-black/5 backdrop-blur-3xl rounded-lg border border-divider">
|
||||
<div className="text-xs text-default-500">
|
||||
流量计算
|
||||
</div>
|
||||
@@ -1879,7 +1879,7 @@ export default function TunnelPage() {
|
||||
{getTunnelFlowDisplay(tunnel.flow)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-center p-1.5 bg-default-50 dark:bg-default-100/30 rounded">
|
||||
<div className="text-center p-1.5 bg-white/5 dark:bg-black/5 backdrop-blur-3xl rounded-lg border border-divider">
|
||||
<div className="text-xs text-default-500">
|
||||
流量倍率
|
||||
</div>
|
||||
@@ -1888,7 +1888,7 @@ export default function TunnelPage() {
|
||||
</div>
|
||||
</div>
|
||||
{tunnel.type === 2 && tunnel.ipPreference && (
|
||||
<div className="text-center p-1.5 bg-default-50 dark:bg-default-100/30 rounded">
|
||||
<div className="text-center p-1.5 bg-white/5 dark:bg-black/5 backdrop-blur-3xl rounded-lg border border-divider">
|
||||
<div className="text-xs text-default-500">
|
||||
连接偏好
|
||||
</div>
|
||||
@@ -1986,7 +1986,7 @@ export default function TunnelPage() {
|
||||
)
|
||||
) : (
|
||||
/* 空状态 */
|
||||
<Card>
|
||||
<Card className="bg-white/20 dark:bg-zinc-900/20 backdrop-blur-3xl border border-white/80 dark:border-white/10 shadow-[0_15px_35px_rgba(0,0,0,0.1)]">
|
||||
<CardBody className="text-center py-20 flex flex-col items-center justify-center min-h-[240px]">
|
||||
<h3 className="text-xl font-medium text-foreground tracking-tight mb-2">
|
||||
暂无隧道配置
|
||||
|
||||
Reference in New Issue
Block a user