/* account.css — 账户区（首页 / 服务实例 / 邀请奖励）双主题 默认浅色(白色界面)；切到深色时是设计稿那套。作用域 body.account，覆盖 styles.css。 颜色全部走 CSS 变量，主题由 控制（shared.js 的主题按钮切换）。 */ /* ---- 浅色（默认）：浅蓝底 + 蓝色强调 ---- */ body.account { --bg: #eef2fd; --text: #232a44; --eyebrow: #7b86ad; --card: #ffffff; --line: #dbe3f6; --nav-bg: #e3e9fb; --nav-line: #d2dcf4; --pill: #ffffff; --pill-line: #c8d4f0; --nav-inactive: #6f7aa3; --btn-line: #cfd9f1; --btn-text: #48507a; --btn-hover-line: #a9b8e6; --primary-bg: #4e5880; --primary-text: #ffffff; --primary-hover: #454e72; --muted: #6f7aa3; --muted2: #99a2c4; --mini: #99a2c4; --dot: #a0bcf9; --empty-title: #4a5478; --empty-icon-bg: #eef2fd; --empty-icon-line: #dbe3f6; --input-bg: #ffffff; --input-line: #cfd9f1; --input-focus: #4e5880; --placeholder: #a3accb; --pos: #16a34a; --neg: #dc2626; --link: #4e5880; --link-hover: #3a4162; --row-line: #e7ecf9; --status-bg: #eaeffb; --status-text: #48507a; --tier-sel-bg: #eaeffb; --tier-sel-line: #4e5880; --card-shadow: 0 1px 2px rgba(60, 80, 160, .08); } /* ---- 深色：接近纯黑、极低饱和的中性灰 + #b6c3f4 亮蓝强调 ---- */ html[data-theme="dark"] body.account { --bg: #060608; --text: #e6e7ec; --eyebrow: #797d8b; --card: #17181d; --line: #24262e; --nav-bg: #131419; --nav-line: #24262e; --pill: #2a2c34; --pill-line: #383a44; --nav-inactive: #80838f; --btn-line: #24262e; --btn-text: #c0c2ca; --btn-hover-line: #383a44; --primary-bg: #b6c3f4; --primary-text: #14192b; --primary-hover: #c8d2f7; --muted: #797d8b; --muted2: #61646f; --mini: #61646f; --dot: #383b48; --empty-title: #aeb0ba; --empty-icon-bg: #17181d; --empty-icon-line: #24262e; --input-bg: #131419; --input-line: #24262e; --input-focus: #b6c3f4; --placeholder: #535661; --pos: #4ade80; --neg: #f87171; --link: #b6c3f4; --link-hover: #d2dbf9; --row-line: #1e1f26; --status-bg: #24262e; --status-text: #c0c2ca; --tier-sel-bg: #24262e; --tier-sel-line: #b6c3f4; --card-shadow: none; } body.account { background: var(--bg); color: var(--text); font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; min-height: 100vh; /* 上内边距 24px：大标题上方留出至少 20px 余白，整个界面下移 */ padding: 40px 40px 64px; margin: 0; } body.account a { color: var(--link); } body.account a:hover { color: var(--link-hover); } /* 切换主题用 View Transitions 做整页交叉淡变（无逐元素闪烁），这里只控制时长 */ ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .4s; animation-timing-function: ease; } /* 切主题的瞬间临时关掉所有磨砂 blur：blur 若被烘焙进 VT 快照会导致严重卡顿；切换完 shared.js 会移除该类恢复磨砂 */ html.vt-no-blur *, html.vt-no-blur *::before, html.vt-no-blur *::after { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* ===== 顶栏 ===== */ body.account .topbar { /* 顶栏内容约束到与下方内容列同宽同心(1160 居中)：标题左缘、按钮右缘与卡片对齐成一条网格线； 磨砂条仍靠伪元素 100vw 全屏出血，所以视觉上顶栏底仍通栏。 */ width: 100%; max-width: 1160px; margin: 0 auto 20px; padding: 0; /* body 上边距 24px，sticky 吸附点=初始位置，滚动时标题和右侧按钮完全不动 */ top: 40px; border: none; background: none; /* 导航不再居中成药丸，跟在标题右侧、悬停展开；右侧按钮组推到最右 */ display: flex; align-items: center; gap: 14px; } /* top-actions 固定为折叠宽度：按钮悬停展开的文字向左溢出到间隙里（那侧有大片空隙）， 不改变布局宽度 → 居中的公告不会被挤动，悬停按钮时公告纹丝不动。 */ body.account .topbar > .top-actions { margin-left: auto; flex: 0 0 auto; width: 93px; justify-content: flex-end; overflow: visible; } /* 按钮不被压缩：展开时保持原尺寸、整体向左溢出到间隙，而不是被挤扁塞进固定宽度里 */ body.account .topbar > .top-actions button { flex-shrink: 0; } /* 顶栏公告药丸：填充标题与按钮之间的空间，白底圆角横条；仅首页显示（data-view 由 app-nav.js 写） */ /* 公告药丸：所有页面都显示，填充标题与按钮之间的空间；白底圆角细长横条 */ /* 配平不对称：nav-zone 124px vs 按钮 93px 差 31px，右边距 6+31=37 补齐 → 两侧占位相等(124+14+6 == 93+14+37 == 144px)，容器中心 == 顶栏中心 == 下方内容列中心， 公告在其中居中即与下面的 1160px 内容列同心对齐（任何窗口宽度都成立）。 */ body.account .topbar .topbar-notice { flex: 1 1 auto; min-width: 0; margin: 0 37px 0 6px; display: flex; } body.account .topbar .topbar-notice .notice { width: 100%; max-width: 1160px; /* 与下方内容列(.layout 1160px)同宽同心 → 左右边缘对齐 */ margin: 0 auto; /* 居中 */ /* 按钮悬停展开、离公告不足 20px 时，JS(shared.js bindTopbarNoticeSqueeze) 会临时收窄 max-width 从右边让位（左缘冻结）；这里的过渡让挤压/还原与按钮展开(.28s)同步平滑 */ transition: max-width .28s ease; min-width: 0; background: var(--nav-bg); /* 与下拉菜单面板同底色 */ border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--card-shadow); padding: 11px 18px; align-items: center; gap: 12px; color: var(--text); } /* 硬件加速档：与下拉菜单面板完全同款的半透明磨砂（同色 82% 透明 + 背景高斯模糊）； 内容从 sticky 顶栏下滚过时透出毛玻璃质感。软渲染档保持上面的实底。 */ html.gpu body.account .topbar .topbar-notice .notice { background: color-mix(in srgb, var(--nav-bg) 82%, transparent); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); } /* 药丸内文字横排（标题+说明同一行）——加 .topbar 前缀盖过基础的竖排规则 */ body.account .topbar .topbar-notice .notice-text { flex-direction: row; align-items: baseline; gap: 10px; min-width: 0; overflow: hidden; } body.account .topbar .topbar-notice .notice::before { width: 10px; height: 10px; } body.account .topbar .topbar-notice .notice strong { flex: 0 0 auto; font-size: 14px; color: var(--text); } /* 参考样式：说明文字是灰色常规体（不是强调色粗体） */ body.account .topbar .topbar-notice .notice p, body.account .topbar .topbar-notice .notice .muted { font-size: 13px; font-weight: 400; color: var(--muted2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 药丸内公告横排：标题 + 说明同一行，说明过长省略号 */ body.account .topbar-notice .notice-text { flex-direction: row; align-items: baseline; gap: 10px; min-width: 0; overflow: hidden; } body.account .topbar-notice .notice strong { flex: 0 0 auto; } body.account .topbar-notice .notice p, body.account .topbar-notice .notice .muted { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 标题+导航同属一个悬停区：整块（含中间空隙）都算 hover，避免收走/复位的抽搐 */ /* 标题+导航同属一个悬停区：整块（含中间空隙）都算 hover，避免收走/复位的抽搐 */ /* 定宽=折叠标题宽（三个标题都 119px，给到 124 留余量）：菜单展开时 title-row 向右溢出、 悬浮盖在公告上，而不撑开 flex 布局 → 公告因此定住不动。z-index 抬高让溢出的菜单+框盖在公告之上。 */ body.account .nav-zone { position: relative; flex: 0 0 auto; width: 124px; overflow: visible; z-index: 5; } /* PANLINK 常驻，作为下拉开关：末尾内联一个箭头，悬停/展开时翻转（⌄ → ⌃） */ body.account .nav-zone .eyebrow { position: relative; } body.account .nav-zone .eyebrow::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); /* 朝下的 v */ transition: transform .25s ease; } body.account .nav-zone:hover .eyebrow::after, body.account .nav-zone:focus-within .eyebrow::after, body.account .nav-zone.nav-peek .eyebrow::after { transform: translateY(1px) rotate(225deg); /* 翻上的 ^ */ } /* 大字标题行：标题 + 两个可选视图同排（垂直居中），悬停时窗口卡片(::before)把整行框住浮现 */ body.account .title-row { position: relative; display: inline-flex; align-items: center; z-index: 0; transition: transform .24s ease; /* 会上移的视觉件不参与命中——判定只由固定的 .nav-zone 盒子负责，杜绝"移走后悬停断开"的抽动 */ pointer-events: none; } /* 菜单链接恢复可点击（在它们上移后的可见位置） */ /* 菜单链接的可点击性由折叠/展开状态控制（见下方 .nav a 规则），这里不强制 */ /* 下拉版：标题不再上移，菜单从标题正下方落出（见下方 .nav 面板） */ body.account .nav-zone:hover .title-row, body.account .nav-zone:focus-within .title-row, body.account .nav-zone.nav-peek .title-row { transform: none; } /* 旧的横向药丸框已弃用（改为下方的 .nav 下拉面板承载卡片与阴影） */ body.account .title-row::before { display: none; } /* 命中层：固定盖住"触发区"（PANLINK + 标题）。折叠/展开完全一样、不随菜单变化 → 不抖。 下拉面板往下落、由面板自身 + 其顶部透明桥接续接命中。不再向右外扩（菜单改为向下、不再压公告）。 */ body.account .nav-zone::after { content: ""; position: absolute; left: -14px; right: -14px; top: -12px; bottom: -10px; z-index: -1; } body.account .topbar > div .eyebrow { font-size: 12px; letter-spacing: 0.33em; /* 参考样式：更宽的字距 */ font-weight: 700; color: var(--eyebrow); text-transform: uppercase; margin: 0 0 5px; } body.account .topbar h1 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -0.01em; color: var(--text); /* 关键：nav-zone 定宽后别被 flex 压缩换行（否则标题竖排、高度暴涨）；放不下就横向溢出 */ flex-shrink: 0; white-space: nowrap; } /* 顶栏毛玻璃向下延伸（渐进式模糊，避免“割裂”硬边界）。 两层叠加：::after 强模糊、集中在顶部、较早淡出；::before 轻模糊、覆盖更广、最后淡出。 模糊半径由强→弱→无地过渡，所以下缘不会出现“从模糊突然变清晰”的硬线。 .topbar 本身必须无 backdrop-filter（下面显式 none），否则伪元素被嵌套隔离、模糊失效； styles.css 里 .topbar 原来的模糊层已删除，这里的 none 是双保险（也防旧样式缓存）。 两层都 top:0 + 固定高度，与标题几行无关，宽屏/窄屏一致（自适应）。 旋钮：--topbar-frost-height 控制磨砂总高；两层各自的 blur() 与 mask 百分比控制观感。 */ body.account .topbar { backdrop-filter: none; -webkit-backdrop-filter: none; --topbar-frost-height: 76px; } body.account .topbar::before, body.account .topbar::after { content: ""; position: absolute; /* 上探 24px：盖住 body 顶部内边距区域（内容滚动时会从这条缝里穿过） */ top: -24px; /* 顶栏是居中的窄容器，磨砂层需横向铺满整个视口，否则左右两侧盖不住 */ left: 50%; width: 100vw; margin-left: -50vw; height: calc(var(--topbar-frost-height) + 24px); pointer-events: none; z-index: -1; } /* 轻模糊，覆盖较广，最后淡出；带页面底色的半透明染色（浅色主题下纯模糊会发灰，染回 --bg 色调） */ body.account .topbar::before { backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); background: color-mix(in srgb, var(--bg) 55%, transparent); -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 46%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 46%, transparent 100%); } /* B方案：强模糊层关闭，只留 ::before 单层轻磨砂，降开销 */ body.account .topbar::after { backdrop-filter: none; -webkit-backdrop-filter: none; -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 20%, transparent 56%); mask-image: linear-gradient(to bottom, #000 0%, #000 20%, transparent 56%); } /* ===== 导航：另外两个视图选项与大字标题同排同款字体，颜色调淡； 悬停标题行时依次向右展开（每项 50ms，--ni 由 app-nav.js 写入），窗口卡片(title-row::before)把整行框住。 单个选项悬停时颜色变深。 ===== */ /* 下拉面板的菜单项容器：底色/描边/阴影由 .nav-zone::before 统一承载（连成一整块），这里只放三项 */ body.account .nav { position: absolute; top: calc(100% + 8px); left: 0; width: 176px; display: flex; flex-direction: column; gap: 2px; padding: 8px 0; margin: 0; background: none; border: none; z-index: 1; opacity: 0; transform: translateY(-8px) scale(.98); transform-origin: top center; transition: opacity .2s ease, transform .24s cubic-bezier(.2, .85, .3, 1); pointer-events: none; } /* 顶部透明桥接：填补标题与面板之间的 8px 间隙，鼠标下移不掉悬停 */ body.account .nav::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 16px; } body.account .nav-zone:hover .nav, body.account .nav-zone:focus-within .nav, body.account .nav-zone.nav-peek .nav { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } /* 统一面板背景：从 PANLINK 上方一直盖到菜单项底部（标题坐在面板上），承载底色/描边/阴影/磨砂。 z-index:-1 在所有文字之下；纯视觉、不参与命中。几何按实测：x 26–234、y 12–250。 */ body.account .nav-zone::before { content: ""; position: absolute; left: -16px; top: -16px; width: 208px; height: 242px; border-radius: 16px; background: var(--nav-bg); border: 1px solid var(--nav-line); box-shadow: 0 24px 48px -16px rgba(15, 20, 45, 0.32), 0 8px 20px -10px rgba(15, 20, 45, 0.22); opacity: 0; transform: translateY(-8px) scale(.98); transform-origin: top center; transition: opacity .2s ease, transform .24s cubic-bezier(.2, .85, .3, 1); z-index: -1; pointer-events: none; } html.gpu body.account .nav-zone::before { background: color-mix(in srgb, var(--nav-bg) 82%, transparent); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); } body.account .nav-zone:hover::before, body.account .nav-zone:focus-within::before, body.account .nav-zone.nav-peek::before { opacity: 1; transform: translateY(0) scale(1); } body.account .nav-indicator { display: none; } /* 面板内每一项：整行、竖排 */ body.account .nav a { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 11px 14px; border-radius: 11px; font-size: 16px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.15; color: var(--muted2); background: none; border: none; white-space: nowrap; transition: background .16s ease, color .16s ease; } body.account .nav a:hover { color: var(--text); background: color-mix(in srgb, var(--text) 6%, transparent); } /* 当前页：白底高亮 + 右侧圆点 */ body.account .nav a.active { color: var(--text); font-weight: 700; background: var(--card); box-shadow: 0 1px 2px rgba(15, 20, 45, 0.06); } body.account .nav a.active::after { content: ""; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--text); } /* ===== 顶部按钮：退出登录 / 主题 ===== */ body.account .top-actions { display: flex; align-items: stretch; gap: 10px; width: auto; } body.account .top-actions button { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; background: transparent; border: 1px solid var(--btn-line); border-radius: 8px; color: var(--btn-text); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; } body.account .top-actions button:hover { border-color: var(--btn-hover-line); color: var(--text); } /* 退出登录 / 主题切换：同尺寸纯图标按钮；悬停/聚焦时文字展开， 文字逐字从下往上渐显，每个字依次延迟 50ms（--ci 由 shared.js 的 wrapBtnLabel 写入） */ body.account .top-actions [data-action="logout"], body.account .top-actions .theme-toggle { padding: 8px 10px; gap: 0; } body.account .top-actions button .btn-label { max-width: 0; overflow: hidden; white-space: nowrap; transition: max-width .28s ease, margin-left .28s ease; } body.account .top-actions button:hover .btn-label, body.account .top-actions button:focus-visible .btn-label { max-width: 5em; margin-left: 8px; } body.account .top-actions button .btn-label .ch { display: inline-block; opacity: 0; transform: translateY(0.55em); transition: opacity .18s ease, transform .18s ease; transition-delay: calc(var(--ci, 0) * 50ms); } body.account .top-actions button:hover .btn-label .ch, body.account .top-actions button:focus-visible .btn-label .ch { opacity: 1; transform: none; } /* ===== 主区域 ===== */ body.account .layout { max-width: 1160px; margin: 0 auto; padding: 0; display: block; } body.account .view { display: flex; flex-direction: column; gap: 20px; } body.account .view[hidden] { display: none; } /* 切换视图时：整体位移(大幅) + 渐变进场 */ body.account .view { animation: accViewIn .44s cubic-bezier(0.2, 0.7, 0.2, 1) both; } @keyframes accViewIn { from { opacity: 0; transform: translateY(44px); } to { opacity: 1; transform: translateY(0); } } /* ===== 卡片 ===== */ body.account .panel, body.account .card, body.account .notice { background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--card-shadow); } /* 面板改为 flex 纵向：标题在上、主内容用 flex:1 铺满、辅助/按钮沉底， 这样等高卡片内部内容饱满分布，不会“一坨顶在上面、下面留空”。 */ body.account .panel { display: flex; flex-direction: column; padding: 22px 24px; gap: 14px; } /* 同行两卡等高、底部对齐（默认 stretch） */ /* 首页两卡：左卡（用户信息）按内容定宽——账户信息变长时整卡跟着变长、挤压右侧兑换码卡； 最窄不低于 440px 保持初始观感，右卡至少 300px */ body.account .grid { display: grid; grid-template-columns: minmax(440px, max-content) minmax(300px, 1fr); gap: 20px; } /* AFF 链接卡加宽（链接一行放得下）、邀请码卡缩短让位 */ body.account [data-view="invites"] .grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } body.account .panel .eyebrow, body.account .section-head .eyebrow { font-size: 13px; letter-spacing: 0.04em; color: var(--muted); text-transform: uppercase; font-weight: 600; margin: 0 0 14px; } body.account h2 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -0.01em; color: var(--text); } body.account .section-head { align-items: center; } body.account .muted, body.account .empty-state { color: var(--muted); } /* ===== 公告条 ===== */ body.account .notice-strip { display: flex; flex-direction: column; gap: 8px; } /* 公告：无边框无底色，紧凑单行，文字加粗用强调色 */ body.account .notice { background: transparent; border: none; box-shadow: none; border-radius: 0; /* 无左内距：圆点(8px)贴住与下方卡片相同的左边界；gap 16 让文字起始于 24px，与卡片内文对齐 */ padding: 2px 0; display: flex; align-items: center; gap: 16px; color: var(--link); font-weight: 600; } body.account .notice::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--dot); flex: 0 0 auto; } body.account .notice .notice-text { display: flex; flex-direction: column; gap: 4px; } body.account .notice strong { font-size: 16px; font-weight: 700; } body.account .notice p, body.account .notice .muted { font-size: 14px; color: var(--link); font-weight: 600; margin: 0; } /* ===== 用户信息卡 ===== */ /* 用户信息：积分余额 | 账户 | 签到按钮 排成一行，三者之间固定等间距（不随卡片宽度拉开）； margin:auto 0 让整行在卡内垂直居中；文字块拉伸等高+两端对齐： 两个小标签在同一条线上，账户邮箱底部与积分数字底部对齐，按钮也底部对齐 */ body.account .balance-body { display: flex; flex-direction: row; align-items: flex-end; gap: 32px; margin: auto 0; flex-wrap: wrap; } body.account .balance-row { display: flex; align-items: stretch; justify-content: flex-start; gap: 32px; flex: 0 1 auto; min-width: 0; } body.account .balance-row > div { display: flex; flex-direction: column; justify-content: space-between; } body.account .mini-label { font-size: 12px; color: var(--mini); margin-bottom: 6px; } body.account .balance-email { font-size: 19px; font-weight: 600; line-height: 1.15; } body.account .balance-points { font-size: 40px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } /* ===== 表单 / 输入框 ===== */ body.account input, body.account textarea, body.account select { background: var(--input-bg); border: 1px solid var(--input-line); border-radius: 8px; color: var(--text); padding: 10px 14px; font-family: inherit; font-size: 15px; } body.account input::placeholder { color: var(--placeholder); } body.account input:focus, body.account textarea:focus { outline: none; border-color: var(--input-focus); } body.account [data-form="redeem"] { display: flex; align-items: center; gap: 12px; width: 100%; } body.account [data-form="redeem"] input { flex: 1; } /* 兑换码卡：内容自然排列，"输入框+说明"一组在剩余空间垂直居中。 两卡等高（stretch），行高由本卡自然高度(约175px)决定——用户信息卡改为单行后更矮，会被拉到与本卡对齐 */ body.account .redeem [data-form="redeem"] { margin-top: auto; } body.account .redeem > .muted { margin-bottom: auto; } /* ===== 按钮 ===== */ body.account button[type="submit"], body.account .primary, body.account .checkin-button, body.account [data-action="open-renew"] { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 20px; background: var(--primary-bg); color: var(--primary-text); border: none; border-radius: 8px; font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer; white-space: nowrap; } body.account button[type="submit"]:hover, body.account .primary:hover, body.account .checkin-button:hover, body.account [data-action="open-renew"]:hover { background: var(--primary-hover); } /* 创建服务：实心强调色（覆盖 .top-actions 的透明描边样式），悬停加深与其他主色按钮一致； 关闭弹窗后焦点回落时浏览器默认的黑色焦点圈也不要 */ body.account .top-actions [data-action="open-create"] { background: var(--primary-bg); border-color: transparent; color: var(--primary-text); } body.account .top-actions [data-action="open-create"]:focus, body.account .top-actions [data-action="open-create"]:focus-visible { outline: none; } body.account .top-actions [data-action="open-create"]:hover { background: var(--primary-hover); border-color: transparent; color: var(--primary-text); } /* 刷新：只留图标的描边按钮（与右上角退出/主题图标按钮同尺寸），悬停描边加深 */ body.account .top-actions [data-action="refresh"] { padding: 10px 12px; gap: 0; } /* 签到按钮永远贴卡片右缘；卡片有富余宽度时由 auto margin 吃掉（与文字块最小间距仍是 gap 32px） */ body.account .checkin-button { flex: 0 0 auto; margin-left: auto; } body.account .ghost { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; background: transparent; border: 1px solid var(--btn-line); border-radius: 8px; color: var(--btn-text); font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer; white-space: nowrap; } body.account .ghost:hover { border-color: var(--btn-hover-line); color: var(--text); } /* ===== 积分流水 / 奖励记录 表格 ===== */ body.account .table { display: flex; flex-direction: column; } /* 列表滚动化（分页控件已删）：限高 + 上下滑动； 仅当内容真的溢出（JS 打 .scrollable）时启用上下渐隐遮罩，与顶栏磨砂同款淡出观感 */ body.account .table, body.account .cards { max-height: 420px; overflow-y: auto; scrollbar-width: thin; } /* 列表滚动边缘柔化：直接在滚动容器上做 mask，把被裁内容淡出成透明—— 无覆盖层、无布局影响、不产生白色色块。贴顶时顶部不柔化、贴底时底部不柔化 */ body.account .scroll-shell { position: relative; } body.account .table.scrollable, body.account .cards.scrollable { --fade-top: 0px; --fade-bottom: 0px; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 var(--fade-top), #000 calc(100% - var(--fade-bottom)), transparent); mask-image: linear-gradient(to bottom, transparent, #000 var(--fade-top), #000 calc(100% - var(--fade-bottom)), transparent); } body.account .table.scrollable:not(.at-top), body.account .cards.scrollable:not(.at-top) { --fade-top: 24px; } body.account .table.scrollable:not(.at-bottom), body.account .cards.scrollable:not(.at-bottom) { --fade-bottom: 24px; } body.account .row { display: flex; align-items: center; justify-content: space-between; gap: 16px; /* 右侧留 14px：金额数字不贴着滚动条 */ padding: 14px 14px 14px 0; border-top: 1px solid var(--row-line); /* styles.css 的 .row 自带 border-bottom，和上面的 border-top 叠成双线，这里关掉只留一条 */ border-bottom: none; } body.account .row:first-child { border-top: none; } body.account .row span { font-size: 15px; font-weight: 600; } body.account .row small, body.account .row .muted { font-weight: 400; color: var(--muted2); font-size: 12px; } body.account .row strong { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; } body.account .row strong.pos { color: var(--pos); } body.account .row strong.neg { color: var(--neg); } /* ===== 分页 ===== */ body.account .pager { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 8px; color: var(--muted); font-size: 13px; } body.account .pager .ghost { padding: 8px 16px; font-size: 13px; font-weight: 600; } body.account .pager .ghost[disabled] { opacity: .4; cursor: not-allowed; } /* ===== 服务实例卡 / 空状态 ===== */ body.account .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; } body.account .card { padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; } body.account .card h3 { margin: 0; font-size: 18px; font-weight: 700; } body.account .card .status { font-size: 12px; padding: 3px 10px; border-radius: 999px; background: var(--status-bg); color: var(--status-text); } body.account .empty-state { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 40px 20px; text-align: center; } body.account .empty-state .empty-icon { width: 52px; height: 52px; border-radius: 10px; background: var(--empty-icon-bg); border: 1px solid var(--empty-icon-line); display: flex; align-items: center; justify-content: center; color: var(--muted); } body.account .empty-state .empty-title { font-size: 17px; font-weight: 700; color: var(--empty-title); } body.account .empty-state .empty-sub { font-size: 14px; color: var(--muted2); } /* ===== 邀请页：AFF 链接 / 邀请码 ===== */ body.account [data-aff-link] { font-size: 22px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.3; word-break: break-all; margin: 0 0 14px; color: var(--text); } body.account [data-invite-code] { font-size: 40px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } body.account [data-view="invites"] .metric { display: block; } body.account [data-view="invites"] .metric span { display: block; font-size: 12px; color: var(--mini); margin-bottom: 8px; } /* 邀请码卡：号码在卡片内垂直居中，铺满整卡 */ body.account [data-view="invites"] .grid > .panel .metric { flex: 1; display: flex; flex-direction: column; justify-content: center; } /* AFF 链接卡：说明文字沉到卡片底部 */ body.account [data-view="invites"] .grid > .panel > .muted { margin-top: auto; } /* ===== 弹窗 ===== */ body.account dialog { color: var(--text); } body.account .dialog-card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; color: var(--text); } /* 弹窗进出场（所有弹窗统一）：卡片本体淡入淡出（软件档最省），GPU 档再叠缩放 + 蒙层磨砂。 缩放绕中心（默认 transform-origin: center）→ 始终居中、不位移。 */ body.account dialog { opacity: 0; transition: opacity .18s ease, overlay .18s ease allow-discrete, display .18s ease allow-discrete; animation: none; } body.account dialog[open] { opacity: 1; } @starting-style { body.account dialog[open] { opacity: 0; } } /* 背景蒙层：纯色淡入淡出（开、关都有；纯色透明度混合是全屏动画里最省的一种） */ body.account dialog::backdrop { background: rgba(6, 8, 16, 0); transition: background-color .18s ease, overlay .18s ease allow-discrete, display .18s ease allow-discrete; animation: none; } body.account dialog[open]::backdrop { background: rgba(6, 8, 16, .42); } @starting-style { body.account dialog[open]::backdrop { background: rgba(6, 8, 16, 0); } } /* ---- GPU 加速档（html.gpu 由 shared.js 检测挂上）：纯缩放淡入（绕中心→始终居中、无位移） + 高斯模糊蒙层渐入渐出；软件渲染走上面的轻量方案 ---- */ html.gpu body.account dialog { transform: scale(.94); transition: opacity .26s cubic-bezier(0.22, 1, 0.36, 1), transform .26s cubic-bezier(0.22, 1, 0.36, 1), overlay .28s ease allow-discrete, display .28s ease allow-discrete; } html.gpu body.account dialog[open] { transform: none; } @starting-style { html.gpu body.account dialog[open] { opacity: 0; transform: scale(.94); } } html.gpu body.account dialog::backdrop { background: rgba(6, 8, 16, 0); -webkit-backdrop-filter: blur(0px); backdrop-filter: blur(0px); transition: background-color .3s ease, backdrop-filter .3s ease, -webkit-backdrop-filter .3s ease, overlay .3s ease allow-discrete, display .3s ease allow-discrete; } html.gpu body.account dialog[open]::backdrop { background: rgba(6, 8, 16, .35); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); } @starting-style { html.gpu body.account dialog[open]::backdrop { background: rgba(6, 8, 16, 0); -webkit-backdrop-filter: blur(0px); backdrop-filter: blur(0px); } } body.account .dialog-card h3 { color: var(--text); } /* 创建弹窗头部：标题居左、线路药丸居中、关闭按钮居右，同处一行 */ body.account .create-head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; } body.account .create-head > button[data-action="close-create"] { justify-self: end; } /* 线路选择：药丸分段样式（与顶部导航同观感）——灰蓝底槽、选中项白底浮起、三项等宽平行 */ body.account .create-head .tier-list { /* 覆盖 styles.css 旧布局遗留的 grid-column:1/-1（会横跨整行把标题/关闭挤到别的行） */ grid-column: 2; position: relative; /* 作为白色滑块的定位基准 */ width: min(440px, 100%); max-width: 100%; margin: 0 auto; background: var(--nav-bg); border: 1px solid var(--nav-line); border-radius: 10px; padding: 4px; gap: 4px; } /* 白色滑块：绝对定位在药丸槽内，选中哪个就 transform 滑到哪个（iOS 分段控件） */ body.account .tier-thumb { position: absolute; top: 0; left: 0; border-radius: 8px; background: var(--card); box-shadow: 0 1px 3px rgba(40, 60, 120, .12); opacity: 0; pointer-events: none; z-index: 0; transition: transform .28s cubic-bezier(0.4, 0, 0.2, 1), width .28s cubic-bezier(0.4, 0, 0.2, 1); } body.account .tier-option { position: relative; z-index: 1; /* 文字在滑块之上 */ flex: 1 1 0; min-width: 0; background: transparent; border: none; border-radius: 8px; color: var(--nav-inactive); /* 文字色仍平滑过渡；白底由滑块负责 */ transition: color .2s ease; min-height: 0; padding: 10px 12px; } body.account .tier-option strong { font-size: 14px; font-weight: 700; } /* ===== Apple 式手感打磨 ===== */ /* 响应即时性：按下瞬间(pointer-down)就有反馈、不等松开——按压态即时缩小（无过渡=零延迟） */ body.account .top-actions button:active, body.account .checkin-button:active, body.account [data-form="redeem"] button:active, body.account .instance-actions button:active, body.account .dialog-card button:active, body.account .tier-option:active, body.account .pager button:active { transform: scale(.965); } /* 菜单行是整行列表项：按压用底色加深（列表按压惯例），不缩放 */ body.account .nav a:active { background: color-mix(in srgb, var(--text) 10%, transparent); color: var(--text); } /* 键盘可达性：焦点环用主题链接色；:focus-visible 只在键盘聚焦时出现，鼠标点击不冒环 */ body.account :is(button, a, [tabindex]):focus-visible { outline: 2px solid var(--link); outline-offset: 2px; } /* 材质顶缘高光：一条极细亮边模拟光打在玻璃上缘（磨砂档才有玻璃质感，浅色明显、深色极淡） */ html.gpu body.account .topbar .topbar-notice .notice { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), var(--card-shadow); } html.gpu body.account .nav-zone::before { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 24px 48px -16px rgba(15, 20, 45, 0.32), 0 8px 20px -10px rgba(15, 20, 45, 0.22); } html.gpu[data-theme="dark"] body.account .topbar .topbar-notice .notice { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), var(--card-shadow); } html.gpu[data-theme="dark"] body.account .nav-zone::before { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 24px 48px -16px rgba(15, 20, 45, 0.32), 0 8px 20px -10px rgba(15, 20, 45, 0.22); } body.account .tier-option:hover { color: var(--text); } body.account .tier-option.selected { color: var(--text); /* 白底改由滑块提供，选中项只变文字色 */ }