/* =============================================================================
* h5-fixes-round2.css — H5 收口·第二波·纯换皮覆盖(零功能丢失)
* 端: H5 预览副本 D:/最新版项目包/JP项目审计最终包/preview-h5/
* 注入: index.html 末尾追加(在既有 CSS 之后):
*
* 性质: 只覆盖表现层(display/颜色/深度条质感),不删功能、不改逻辑、不绑事件、不动接口。
* 与 .js 同名补丁配合(数字徽章去除/胜率隐藏/客服自动弹出拦截/KYC默认 需 JS,见 .js)。
* 回滚: 删除该 行并删除本文件即可,无任何持久化副作用。
*
* 设计令牌沿用主包/uiux-h5pc-binance.css:
* bg #0B0E11 / surface #181A20 / surface2 #1E2329 / border #2B3139
* text #EAECEF / muted #848E9C / 卖 #F6465D / 买 #3D7EFF(深度卡主包已用此两色)
* ========================================================================== */
/* -----------------------------------------------------------------------------
* #23 交易页「一档即时买卖价 / Spread」下方空白框 → display:none
* 背景: 线上 hf5 主包的深度区已是阶梯款(无 spread 空框);本规则为「防御式」收口——
* 若某变体仍渲染出该空占位框/空 spread 行,则折叠它,绝不影响阶梯款本体。
* 做法: 只命中「JS 打标记」的空框(data-h5r2-empty-spread),由 .js 精确识别后打标;
* CSS 不靠文本匹配,避免误伤真实有数据的行。纯隐藏,DOM 不删。
* -------------------------------------------------------------------------- */
[data-h5r2-empty-spread="1"] {
display: none !important;
}
/* -----------------------------------------------------------------------------
* #27 盈亏分析「胜率」卡 → 隐藏
* 背景: 主包盈亏分析第二行 2 列网格含 总盈亏/已实现/胜率 三张卡。
* 做法: 胜率卡由 .js 精确识别(label 文本 === e("p.winRate")当前语言值)后打标
* data-h5r2-hide-winrate;此处仅折叠。不动计算逻辑(winRate 仍在算,仅不展示该卡)。
* -------------------------------------------------------------------------- */
[data-h5r2-hide-winrate="1"] {
display: none !important;
}
/* -----------------------------------------------------------------------------
* #24 资产页「手機未綁定」徽章 → 已绑则隐藏
* 背景: 主包徽章本就数据驱动(u.phone_bound/phoneBound/phone 真值→显手机号/已綁定,
* 否则显「手機未綁定」)。当 profile 未回传 phone 但注册确已提交手机(localStorage
* jp_register_phone 有真实值)时会误显未绑。
* 做法: .js 读「真实证据」(注册时缓存的手机号)判断,确有证据才给徽章打标
* data-h5r2-phone-bound,本处隐藏。无证据不打标→保留未绑提示(不编造)。
* -------------------------------------------------------------------------- */
[data-h5r2-phone-bound="1"] {
display: none !important;
}
/* 同理「未認證」徽章:仅当后端真实 kyc_status=verified 时 .js 打标(主包此情形本就显已認證,
* 故通常无需介入);此规则仅作兜底,不在无真实已认证证据时隐藏。 */
[data-h5r2-kyc-verified="1"] {
display: none !important;
}
/* -----------------------------------------------------------------------------
* #22 深度卡 币安阶梯质感 — 轻量「加固」覆盖(不与主包内联样式冲突)
* 现状: 线上 hf5 主包深度区已是阶梯款(红卖在上 #F6465D / 最新价居中大号 / 蓝买在下
* #3D7EFF / 每行带半透明深度条 / 价格(USD)·数量两列)。主包用内联 style,
* 本规则不与其抢内联,只做不可由内联表达的细节加固:
* - 深度条 span 增加从右向左的渐隐,更接近币安「条」观感(过渡用 .js 打标的容器内)。
* - 阶梯行 hover 高亮(纯视觉,移动端无害)。
* 做法: 仅作用于 .js 标记过的深度容器 [data-h5r2-depth] 内,避免全局误伤。
* -------------------------------------------------------------------------- */
[data-h5r2-depth="1"] {
/* 容器圆角/描边收口,贴近 uiux 令牌(若主包已设则同级覆盖,不用 !important 抢内联) */
--h5r2-ask: #F6465D;
--h5r2-bid: #3D7EFF;
}
/* 深度条(主包内联 position:absolute 的背景 span):加一层从右到左的轻微渐隐叠加,
* 仅提升质感,不改其宽度/位置/颜色(主包内联仍主导)。用 background-image 叠加不覆盖 background-color。 */
[data-h5r2-depth="1"] [style*="position: absolute"][style*="width"] {
background-image: linear-gradient(
270deg,
rgba(255, 255, 255, 0.06) 0%,
rgba(255, 255, 255, 0) 60%
);
transition: width 0.18s ease-out;
}
/* 阶梯行 hover:桌面预览/触屏点按时轻微提示当前行(纯视觉) */
[data-h5r2-depth="1"] > div > div {
transition: background-color 0.12s ease;
}
@media (hover: hover) {
[data-h5r2-depth="1"] > div > div:hover {
background-color: rgba(148, 163, 184, 0.06);
}
}
/* -----------------------------------------------------------------------------
* #21 历史/委托 tab 后的数字徽章去除 → 纯 .js 处理(文本节点,无独立元素,CSS 无法精确命中)
* 说明: 主包 tab 按钮 children = [标签文本, 计数文本节点];计数与标签同节点,
* 无法用 CSS 选择器单独隐藏计数而不隐藏标签。故该项由 .js 在保留标签文本前提下,
* 移除尾随计数文本节点。CSS 不参与,见 h5-fixes-round2.js #21。
* -------------------------------------------------------------------------- */