/* ============================================================ ZiloAPI 登录/注册页皮肤（Nginx sub_filter 注入） 目标：把 sub2api 默认「单栏居中 + teal」登录页，重排成 「左 hero + 右奶油卡（带 登录/注册 tab）」两栏， 配色改为浅色极光 + 赭陶。 机制：所有规则 scope 在 body.zilo-auth 下（由 skin.js 仅在 auth 路由给 body 加该 class），绝不污染 dashboard / 后台。 配色参考：right.codes（极光 + terracotta #C6613F + 奶油卡 #FAF9F5） 结构参考：ClaudeAPI（右卡带 登录/注册 tab 头）+ right.codes（左 hero 极简） ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;700;800&display=swap'); /* ---------- 设计 token ---------- */ body.zilo-auth { --zilo-accent: #C6613F; /* 赭陶主色 */ --zilo-accent-dark: #A8522F; --zilo-card: #FAF9F5; /* 奶油白卡 */ --zilo-ink: #1A1410; /* 大标题深色 */ --zilo-ink-2: #5A4C42; /* 正文暖灰 */ } /* ============================================================ 1) 背景：重绘 AuthLayout 根容器为浅色极光；干掉 teal 装饰 ============================================================ */ body.zilo-auth .relative.flex.min-h-screen.items-center.justify-center { background: radial-gradient(at 16% 20%, rgba(255,176,132,.50) 0px, transparent 46%), radial-gradient(at 80% 10%, rgba(178,150,235,.40) 0px, transparent 46%), radial-gradient(at 62% 82%, rgba(150,200,240,.36) 0px, transparent 46%), radial-gradient(at 26% 84%, rgba(150,220,190,.32) 0px, transparent 44%), radial-gradient(at 92% 64%, rgba(244,180,205,.32) 0px, transparent 46%), linear-gradient(180deg, #FBF9F6 0%, #F5EFEA 100%) !important; } /* 隐藏 sub2api 自带的 teal 渐变底 + 装饰球 + 网格 */ body.zilo-auth .relative.flex.min-h-screen .absolute.inset-0.bg-gradient-to-br, body.zilo-auth .relative.flex.min-h-screen .pointer-events-none.absolute.inset-0 { display: none !important; } /* ============================================================ 2) 卡片：奶油白 + 柔和描边 + 大圆角 + 暖阴影（图2 式完整面板） ============================================================ */ body.zilo-auth .card-glass { background: var(--zilo-card) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; border: 1px solid rgba(198,101,63,.14) !important; border-radius: 24px !important; box-shadow: 0 30px 80px -24px rgba(120,70,45,.30), 0 6px 18px rgba(120,70,45,.08) !important; } /* ============================================================ 3) 登录 / 注册 tab 头（skin.js prepend 进 .card-glass） ============================================================ */ .zilo-tabs { display: flex; gap: 6px; padding: 5px; margin-bottom: 26px; background: rgba(120,80,60,.07); border-radius: 14px; } .zilo-tab { flex: 1; text-align: center; padding: 10px 0; border-radius: 10px; font-size: 15px; font-weight: 600; color: #8A7266; text-decoration: none; transition: all .2s ease; } .zilo-tab:hover { color: var(--zilo-accent, #C6613F); } .zilo-tab.is-active { background: #fff; color: var(--zilo-accent, #C6613F); box-shadow: 0 2px 8px rgba(120,80,60,.12); } /* 隐藏卡内原标题（有 h2 的 .text-center）+ 卡下方互跳链接（tab 已替代） */ body.zilo-auth .card-glass .text-center:has(> h2) { display: none !important; } body.zilo-auth .relative.z-10.w-full.max-w-md > .mt-6.text-center { display: none !important; } /* ============================================================ 4) 主色换色：teal → 赭陶（按钮 / 链接 / 渐变字 / 输入聚焦） ============================================================ */ body.zilo-auth .btn-primary { background-image: linear-gradient(135deg, var(--zilo-accent), var(--zilo-accent-dark)) !important; box-shadow: 0 12px 26px -8px rgba(198,97,63,.50) !important; } body.zilo-auth .btn-primary:hover { background-image: linear-gradient(135deg, #B85736, #984820) !important; } body.zilo-auth .text-primary-600, body.zilo-auth .text-primary-500, body.zilo-auth .text-primary-400, body.zilo-auth a.text-primary-600 { color: var(--zilo-accent) !important; } body.zilo-auth .hover\:text-primary-500:hover, body.zilo-auth .hover\:text-primary-300:hover { color: var(--zilo-accent-dark) !important; } body.zilo-auth .text-gradient { background-image: linear-gradient(90deg, var(--zilo-accent), var(--zilo-accent-dark)) !important; } /* 输入框聚焦：teal 边/环 → 赭陶 */ body.zilo-auth .input:focus { border-color: var(--zilo-accent) !important; --tw-ring-color: rgba(198,97,63,.28) !important; box-shadow: 0 0 0 3px rgba(198,97,63,.18) !important; } body.zilo-auth ::selection { background: rgba(198,97,63,.22); } /* ============================================================ 5) 两栏布局（桌面 ≥900px）：卡片推到右半屏 + 隐藏 AuthLayout 品牌块 ============================================================ */ @media (min-width: 900px) { body.zilo-auth .relative.flex.min-h-screen.items-center.justify-center { padding-left: 50vw !important; padding-right: 2.5vw !important; } /* 卡上方 logo+站名+副标题、卡下方版权，桌面隐藏（品牌交给左 hero） */ body.zilo-auth .relative.z-10.w-full.max-w-md > .mb-8.text-center, body.zilo-auth .relative.z-10.w-full.max-w-md > .mt-8.text-center { display: none !important; } } /* ============================================================ 6) 左侧 hero（skin.js 注入的独立 fixed 图层）—— 图3 式居中极简 ============================================================ */ .zilo-hero { position: fixed; inset: 0 50vw 0 0; /* 占左半屏 */ z-index: 5; display: flex; align-items: center; justify-content: center; text-align: center; padding: 4vh clamp(32px, 5vw, 96px); pointer-events: none; font-family: 'Inter', system-ui, -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif; } .zilo-hero-inner { max-width: 500px; } .zilo-wordmark { display: inline-flex; align-items: center; gap: 14px; font-family: 'Inter', system-ui, -apple-system, sans-serif; font-weight: 800; font-size: clamp(42px, 4.8vw, 66px); letter-spacing: -1.5px; line-height: 1; color: #1A1410; } .zilo-wordmark .zilo-logo { color: var(--zilo-accent, #C6613F); font-size: .82em; line-height: 1; } .zilo-sub { margin-top: 24px; font-size: clamp(15px, 1.4vw, 18px); line-height: 1.7; color: #5A4C42; font-weight: 500; } /* 移动端：隐藏 hero，卡片回到单栏居中（tab 头仍在卡顶） */ @media (max-width: 899px) { .zilo-hero { display: none !important; } }