/* =================================================================== czrouter theme — 定制皮肤，经 Nginx sub_filter 注入 设计语言移植自 A7m0spHere/dsh-phl (PHL)：冷调近中性 + azure 强调色、 桌面工具级密度、hairline 分隔、克制短动效、尊重 prefers-reduced-motion。 机制：New API 前端是 shadcn/ui + Tailwind，全部颜色由 :root/.dark 的 CSS 变量驱动，因此只需重定义变量即可整套重着色，不触碰编译后的 hash 类。 =================================================================== */ /* PHL 色板换算成 New API 用到的语义 token（亮色 = 中性冷灰 + azure） */ :root { --radius: 0.75rem; /* 收紧默认 1rem 的圆润感 → 更利落的工具质感 */ --background: #f4f6f9; /* 冷调画布，非纯白 */ --foreground: #171b21; --card: #ffffff; --card-foreground: #171b21; --popover: #ffffff; --popover-foreground: #171b21; --primary: #2f6fed; /* azure，替换 New API 的天蓝 #3ea4ec */ --primary-foreground: #ffffff; --secondary: #e9edf3; --secondary-foreground: #233046; --muted: #eef1f5; --muted-foreground: #626b78; --accent: #eaf1ff; --accent-foreground: #1b3c6e; --border: #e3e8ef; --input: #d7dee8; --ring: #2f6fed; } /* 深色优先：整套切换为 PHL dark（近黑冷调 + 提亮 azure） */ .dark { --background: #0d1016; --foreground: #e9edf3; --card: #151922; --card-foreground: #e9edf3; --popover: #171c26; --popover-foreground: #e9edf3; --primary: #4d8bff; /* 深色下提亮，保证对比度 */ --primary-foreground: #0a1220; --secondary: #1d2430; --secondary-foreground: #cbd5e6; --muted: #1a202b; --muted-foreground: #8a95a6; --accent: #1e2a44; --accent-foreground: #cfe0ff; --border: #232b38; --input: #2a3444; --ring: #4d8bff; } /* PHL 缓动令牌 */ :root { --cz-ease: cubic-bezier(0.22, 0.61, 0.36, 1); --cz-ease-io: cubic-bezier(0.65, 0, 0.35, 1); } /* 字体：优先 Inter（New API 已用 font-inter），补中文字栈与抗锯齿 */ html { font-feature-settings: "cv11", "ss01"; text-rendering: optimizeLegibility; } body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* 选中态用品牌色淡底（PHL ::selection 手感） */ ::selection { background: color-mix(in srgb, var(--primary) 24%, transparent); } /* 细滚动条（桌面工具风） */ * { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--foreground) 20%, transparent) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--foreground) 16%, transparent); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; transition: background 160ms var(--cz-ease); } ::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--foreground) 30%, transparent); background-clip: content-box; } /* --------------------------------------------------------------- 认证页（/sign-in, /sign-up）深度重设计 标记：boot.js 会给 加 .cz-auth 类，所有针对性样式挂它下面， 这样后台界面只吃到变量层的统一重配色，布局零风险。 --------------------------------------------------------------- */ /* 认证页背景：从"裸透明"变成有层次的品牌场景 */ html.cz-auth body { background: radial-gradient(90% 60% at 82% -8%, color-mix(in srgb, var(--primary) 22%, transparent) 0%, transparent 55%), radial-gradient(70% 55% at 10% 110%, color-mix(in srgb, var(--primary) 14%, transparent) 0%, transparent 50%), var(--background); } /* 顶部左上角 logo 文字品牌化（默认绝对定位，保留） */ html.cz-auth a[href="/"] { font-weight: 650; letter-spacing: -0.01em; } /* 卡片本体：默认透明无边框 → 做成实化的玻璃浮层 */ html.cz-auth form.grid.gap-4 { background: color-mix(in srgb, var(--card) 82%, transparent); backdrop-filter: blur(14px) saturate(1.1); border: 1px solid var(--border); border-radius: calc(var(--radius) + 0.5rem); padding: 2rem; box-shadow: 0 1px 0 color-mix(in srgb, #fff 8%, transparent) inset, 0 18px 50px -18px color-mix(in srgb, #000 55%, transparent); } /* 输入框：加高、聚焦更明显、占位更克制 */ html.cz-auth input.border-input, html.cz-auth .border-input { height: 2.75rem; border-radius: calc(var(--radius) - 0.1rem); background: color-mix(in srgb, var(--background) 60%, transparent); transition: border-color 150ms var(--cz-ease), box-shadow 150ms var(--cz-ease), background 150ms var(--cz-ease); } html.cz-auth input.border-input:focus, html.cz-auth .border-input:focus-within { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 28%, transparent); } /* 主按钮（登录 / 注册）：品牌渐变 + 悬停上浮 + 按压回落 */ html.cz-auth button[type="submit"], html.cz-auth .bg-primary, html.cz-auth form.grid.gap-4 > button { height: 2.75rem; font-weight: 600; letter-spacing: 0.01em; background-image: linear-gradient(180deg, color-mix(in srgb, var(--primary) 100%, #fff 12%), var(--primary)); border: 1px solid color-mix(in srgb, var(--primary) 78%, #000); box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--primary) 70%, transparent); transition: transform 140ms var(--cz-ease), box-shadow 140ms var(--cz-ease), filter 140ms var(--cz-ease); } html.cz-auth button[type="submit"]:hover, html.cz-auth form.grid.gap-4 > button:hover { transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 10px 26px -8px color-mix(in srgb, var(--primary) 78%, transparent); } html.cz-auth button[type="submit"]:active { transform: translateY(0); } /* 入场动画：卡片上浮淡入，表单内容错峰 */ @keyframes cz-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } html.cz-auth form.grid.gap-4 { animation: cz-rise 480ms var(--cz-ease) both; } html.cz-auth a[href="/"] { animation: cz-rise 420ms var(--cz-ease) both; } html.cz-auth form.grid.gap-4 > * { animation: cz-rise 520ms var(--cz-ease) both; } html.cz-auth form.grid.gap-4 > *:nth-child(1) { animation-delay: 60ms; } html.cz-auth form.grid.gap-4 > *:nth-child(2) { animation-delay: 120ms; } html.cz-auth form.grid.gap-4 > *:nth-child(3) { animation-delay: 180ms; } /* 减少动效偏好：全部动画/过渡归零 */ @media (prefers-reduced-motion: reduce) { html.cz-auth *, html.cz-auth *::before, html.cz-auth *::after { animation: none !important; transition: none !important; } } /* 若某次前端升级导致 hash 类变动，这里用 .cz-auth 作为兜底总开关， 后台界面因不带该类而完全不受影响。 */