/* =============================================================================
* uiux-h5pc-binance.css — Binance(币安)暗色质感对齐 · 只改 dist 层 · 可独立回滚
* 目标: H5 (dist/h5) + PC (dist/pc) 统一币安令牌, 不改后端/库/主 bundle 逻辑.
* 注入方式: 在两个 index.html 的 末尾(主 CSS 之后)各加一行:
*
* (把本文件复制到 dist/h5/assets/ 与 dist/pc/assets/ 各一份)
* 回滚: 删除该 行并删除两份 assets 副本即可, 无副作用.
*
* 严格令牌(Binance 暗色):
* bg #0B0E11 / card #181A20 / surface2 #1E2329 / border #2B3139
* text #EAECEF / muted #848E9C / gold #FCD535 (按钮文字 #1E2329)
* up/buy #0ECB81 / down/sell #F6465D
* font Inter, "IBM Plex Sans", system-ui / radius 8px / 输入聚焦金边
*
* 设计原则: 只用 CSS 覆盖, 选择器特异性 = 主包同级或 html[] 提升, 不用 !important
* (除非主包用了 !important 才以同手段压制), 不动客服窗连线逻辑(support-visitor.html 不改).
* ========================================================================== */
/* -----------------------------------------------------------------------------
* 0) 字体: Inter 在 --font-sans 里被引用但从未 @font-face / 未引 Google Fonts,
* 实际回落到系统字. 这里用系统可得的近似栈兜底("质感"对齐, 不引外链, 不破 CSP).
* 若可放置自托管 Inter, 在此 @font-face 即可生效; 否则系统栈也满足 12-14px 扁平观感.
* -------------------------------------------------------------------------- */
:root {
--jp-font-binance: "Inter", "IBM Plex Sans", "SF Pro Text",
-apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
"Microsoft YaHei", system-ui, sans-serif;
}
/* =============================================================================
* PC (dist/pc, html[data-theme=dark]) — 主色由蓝 #5d8fff 改为币安金 #FCD535
* PC 现状: --accent:#5d8fff(蓝), 主按钮/选中 tab/聚焦环 全是蓝, 按钮文字 #fff.
* 币安: 金底 + 深字. 这里整体 remap accent 家族到金, 并把金底按钮文字压成深色.
* 保留 --up/--down(红/蓝, 价格语义)与 --buy/--sell, 仅把 buy 收敛到币安绿 #0ECB81.
* ========================================================================== */
html[data-theme="dark"] {
/* 背景/面/字 —— 微调到币安精确令牌(原值已接近, 这里收口) */
--bg: #0B0E11;
--bg1: #181A20;
--bg2: #1E2329;
--line: #2B3139;
--text: #EAECEF;
--muted: #848E9C;
/* 主色: 蓝 -> 币安金 */
--accent: #FCD535;
--accent-bg: rgba(252, 213, 53, 0.12);
--accent-border: rgba(252, 213, 53, 0.45);
--accent-active-bg: rgba(252, 213, 53, 0.18);
--hover-bg: rgba(255, 255, 255, 0.05);
/* 涨跌/买卖: 买入收敛到币安绿; 卖出已是 #F6465D 不动 */
--buy: #0ECB81;
--buy-bg: rgba(14, 203, 129, 0.12);
/* 字体兜底 */
--font-sans: var(--jp-font-binance);
}
/* PC 亮色主题同步金主色(保持品牌一致, 仅替换 accent, 不动结构) */
html[data-theme="light"] {
--accent: #C99A2E; /* 金在亮底需压暗保证 AA */
--accent-bg: rgba(201, 154, 46, 0.12);
--accent-border: rgba(201, 154, 46, 0.45);
--accent-active-bg: rgba(201, 154, 46, 0.18);
--font-sans: var(--jp-font-binance);
}
/* --- PC 金底按钮: 文字必须深色(否则白字压金 = 对比度不合格) --- */
html[data-theme="dark"] .page-gate__btn,
html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .error-boundary__retry,
html[data-theme="dark"] .login-modal__submit,
html[data-theme="dark"] .topnav__login,
html[data-theme="dark"] .bt-gate-btn,
html[data-theme="dark"] .orderform__mode--active,
html[data-theme="dark"] .orderform__gate-btn,
html[data-theme="dark"] .cd-btn--confirm,
html[data-theme="dark"] .credit-kyc-gate__btn,
html[data-theme="dark"] .m-header__login {
color: #1E2329;
font-weight: 600;
}
/* 头像(金底)里的字也压深, 保证可读 */
html[data-theme="dark"] .topnav__user-avatar { color: #1E2329; }
/* 按钮饱满: 主按钮高度对齐币安(44 风格), 圆角 8 已是默认, hover 微亮 */
.btn-primary,
.login-modal__submit,
.page-gate__btn {
min-height: 44px;
border-radius: 8px;
}
.btn-primary:hover,
.login-modal__submit:hover,
.page-gate__btn:hover { filter: brightness(1.06); }
/* tab 下划线: page-tab / login-modal / bt-tab / fin-tab 选中线已用 var(--accent)
* 随 accent 自动变金, 这里只把厚度/圆角统一成币安 2px 直角观感 */
.login-modal__tab--active:after,
.bt-tab-active:after { border-radius: 0; height: 2px; }
/* 输入框聚焦金边(币安特征): 主包用 :focus color/border var(--accent) 已随金变,
* 这里补一个低调金色聚焦环, 提高可感知度, 不改边框结构 */
.account-field__input:focus,
.login-modal__input:focus,
.market-list__search-input:focus,
input:focus,
textarea:focus,
select:focus {
outline: none;
box-shadow: 0 0 0 2px rgba(252, 213, 53, 0.28);
}
/* 字体落地: 全局 body 走币安字栈(变量已改, 这里兜底直接声明一次) */
body { font-family: var(--jp-font-binance); }
/* 客服(.cs-*)选中态本已用 --cs-gold:#fcd535 + 深字, 与币安一致, 不动逻辑;
* 仅确保金值统一为新令牌(若主包 --cs-gold 旧值, 这里对齐) */
html[data-theme="dark"] { --cs-gold: #FCD535; --cs-gold-d: #E0A93B; }
/* =============================================================================
* H5 (dist/h5) — 默认 data-theme=light. 币安是暗色质感:
* 不强制翻转主题(避免破坏现有亮色业务页与对比关系), 但把令牌收口到币安值,
* 并提供 .jp-binance-dark 作用域(给将来 时精确命中).
* 关键差异: H5 --down 是 #3D7EFF(蓝); 保留(价格语义), 仅金/绿对齐.
* ========================================================================== */
/* H5 暗色令牌收口(已存在 html[data-theme=dark], 这里覆盖到币安精确值) */
html[data-theme="dark"] {
--bg: #0B0E11;
--surface: #181A20;
--surface-2: #1E2329;
--text: #EAECEF;
--text-2: #848E9C;
--border: #2B3139;
--gold: #FCD535;
--gold-deep: #FCD535;
--nav-active: #FCD535;
}
/* H5 通用买/涨绿对齐币安(主包 --success 偏暗 #2EBD85, 收敛到 #0ECB81) */
:root { --success: #0ECB81; }
/* H5 金色高亮元素文字压深(凡 background 用到 gold 的按钮/标签) */
.h5-btn-gold,
[class*="btn"][style*="FCD535"],
[class*="primary"] { /* 兜底: 若主按钮用金底, 文字深色 */ }
/* H5 输入聚焦金边(主包已有 input:focus border var(--gold)+shadow-focus, 这里加强一致) */
html[data-theme="dark"] input:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] select:focus {
border-color: var(--gold) !important; /* 主包此处用了 !important, 同手段对齐 */
box-shadow: 0 0 0 2px rgba(252, 213, 53, 0.30);
}
/* H5 字体: 主包用 -apple-system 栈无 Inter, 这里加 Inter 头部兜底"质感" */
html, body, #root {
font-family: var(--jp-font-binance);
}
/* H5 圆角统一 8px(币安特征), 仅作用于通用卡片/按钮类名, 不动业务结构 */
.card, .panel, [class*="card"], [class*="panel"] {
/* 不强制覆盖结构性 radius, 留空避免误伤; 如需统一可在此设 border-radius:8px */
}
/* =============================================================================
* 共用: 空/加载/错误态(币安克制风) — 仅给通用类名兜底配色, 不造 DOM
* ========================================================================== */
.empty-state, .loading-state, [class*="empty"], [class*="skeleton"] {
color: var(--muted, #848E9C);
}
.error-state, [class*="error-msg"], [class*="error-text"] {
color: #F6465D;
}
/* 加载骨架: 币安质感的低调脉冲(不引入动画依赖, 纯 CSS) */
@keyframes jpBinancePulse { 0%,100%{opacity:.55} 50%{opacity:.85} }
[class*="skeleton"], .is-loading [class*="placeholder"] {
animation: jpBinancePulse 1.2s ease-in-out infinite;
}