/* ============================================================================= * h5-polish-dark.css — H5 预览副本 · 纯视觉精修打磨(币安暗色)· 零功能改动 * 端: D:/最新版项目包/JP项目审计最终包/preview-h5/ * 注入: index.html 之前(在既有 h5-fixes-round2.css 之后): * * * * 设计红线(本文件严格遵守): * - 只覆盖「表现层」(颜色/背景/边框/阴影/间距/圆角/字重),不改任何 DOM 结构功能、 * 不绑事件、不改 fetch/接口、不改路由、不改校验、不删功能。 * - 不用 JS 改业务 DOM;JS 仅给 打一个作用域属性 data-h5-polish="on"(总开关用)。 * - 全部规则作用于 html[data-h5-polish="on"] 之下 → 关掉开关即 100% 回滚(无残留)。 * - 总开关: 加载前置 window.__H5_POLISH_OFF__=true → JS 不打属性 → 本 CSS 全部不生效。 * * 币安暗色令牌(严格): * 背景 #0B0E11 / 面板 #181A20 / 次面 #1E2329 / 描边 #2B3139 * 主文字 #EAECEF / 次文字 #848E9C / 三级 #5E6673 / 金 #FCD535 * 涨·买 #0ECB81 / 跌·卖 #F6465D / H5 价格语义跌色保留蓝 #3D7EFF(主包既有) * ========================================================================== */ /* ----------------------------------------------------------------------------- * 1) 整体暗色 — remap 主题 CSS 变量到币安暗色 * H5 默认 。下面同时覆盖 :root / [data-theme=light] / 无属性, * 让 行情 / 资产 / 提款 / 绑定地址 / 总览 全部页面统一吃暗色变量(组件读 var() 即自动变暗)。 * 注意: 仅在 data-h5-polish="on" 作用域内生效;关开关即恢复亮色。 * -------------------------------------------------------------------------- */ html[data-h5-polish="on"], html[data-h5-polish="on"][data-theme="light"], html[data-h5-polish="on"]:not([data-theme]) { --bg: #0B0E11; --surface: #181A20; --surface-2: #1E2329; --text: #EAECEF; --text-2: #848E9C; --text-3: #5E6673; --border: #2B3139; /* 金主色统一币安金 */ --gold: #FCD535; --gold-deep: #FCD535; --gold-dark: #FCD535; --nav-active: #FCD535; /* 派生别名(主包 :root 用这些指回上面变量,这里同步收口) */ --card-bg: #181A20; --text-primary: #EAECEF; --text-secondary: #848E9C; --text-muted: #5E6673; /* 涨跌/买卖:买/涨绿对齐币安;卖/跌红对齐币安;H5 价格 down 蓝语义沿用主包 */ --success: #0ECB81; --danger: #F6465D; --up: #F6465D; /* 主包语义:涨用红(中文盘习惯),沿用不改 */ --down: #3D7EFF; /* 主包语义:跌用蓝,沿用不改 */ /* 卡片描边/阴影暗色化 */ --card-ring: 0 0 0 1px var(--border) inset; --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.28); --shadow-elevated: 0 8px 24px rgba(0, 0, 0, 0.40); --shadow-focus: 0 0 0 2px rgba(252, 213, 53, 0.30); color-scheme: dark; } /* body 背景/字色兜底(主包 body{background:var(--bg);color:var(--text)} 已随变量变, * 这里再声明一次防止某些浏览器缓存亮底闪烁) */ html[data-h5-polish="on"] body { background: var(--bg); color: var(--text); } /* 顶层根容器暗底,避免页面切换瞬间露白 */ html[data-h5-polish="on"], html[data-h5-polish="on"] body, html[data-h5-polish="on"] #root { background-color: #0B0E11; } /* ----------------------------------------------------------------------------- * 1b) 输入框 / 卡片 / 分隔线 / 阴影 暗色对齐 * 主包多处直接写死浅色(#fff / #f4f7fb / #e5e7eb 等内联或类),这里在作用域内收口为暗色。 * 仅改配色,不改尺寸/位置/交互。 * -------------------------------------------------------------------------- */ /* 通用输入控件:暗底、暗边、亮字、币安金聚焦环 */ html[data-h5-polish="on"] input, html[data-h5-polish="on"] textarea, html[data-h5-polish="on"] select { background-color: var(--surface-2); color: var(--text); border-color: var(--border); } html[data-h5-polish="on"] input::placeholder, html[data-h5-polish="on"] textarea::placeholder { color: var(--text-3); } html[data-h5-polish="on"] input:focus, html[data-h5-polish="on"] textarea:focus, html[data-h5-polish="on"] select:focus { border-color: var(--gold) !important; box-shadow: var(--shadow-focus); outline: none; } /* 滚动条暗色(纯视觉) */ html[data-h5-polish="on"] ::-webkit-scrollbar { width: 6px; height: 6px; } html[data-h5-polish="on"] ::-webkit-scrollbar-thumb { background: #2B3139; border-radius: 999px; } html[data-h5-polish="on"] ::-webkit-scrollbar-track { background: transparent; } /* ----------------------------------------------------------------------------- * 2) 周期按钮(1M / 3M / 5M / 15M / 1H / 1D …)选中态 * 现状(主包内联): 选中 background:#6BC800(绿) + color:#fff;未选 background:var(--surface-2)。 * 目标: 选中 → 币安金底 #FCD535 + 深字 #1E2329;未选已是 var(--surface-2) 自动暗。 * 做法: 属性选择器命中含 6BC800 的内联 style(只这一处用此绿),覆盖其 background/color。 * 内联样式优先级高,需用 !important 同手段压制(仅限本作用域)。 * -------------------------------------------------------------------------- */ html[data-h5-polish="on"] [style*="6BC800"], html[data-h5-polish="on"] [style*="rgb(107, 200, 0)"], html[data-h5-polish="on"] [style*="rgb(107,200,0)"] { background: #FCD535 !important; color: #1E2329 !important; font-weight: 800 !important; } /* ----------------------------------------------------------------------------- * 3) 品种 logo 圆形徽章精修(纯样式;不改 2 字母/类别/数据) * 主包结构(已核实): * - Wo 圆牌: 内联 borderRadius:999 + background:类别色 + color:#fff + 字母/SVG; * 类别色 metal #C9A227 / energy #5B6573 / index #3D7EFF / forex #475569 / * agriculture #2E9E6B / 默认 #64748B。 * - Pv 外汇/orb 球: radial-gradient 立体球(已精致,保留)。 * - Bo 指数旗: (占位牌含 "EN"/"DE" 等文字;不编造国旗, * 这里仅给所有品种图标统一精致外框:细金/描边圆环 + 轻投影 + 内高光, * 让占位牌视觉更克制协调,不动其 src/alt/数据)。 * 做法: 命中「圆形(borderRadius:999 / 50%)且为品种图标尺寸」的内联节点做外观加固。 * 为避免误伤,仅在含类别底色或在 flags 图上加环。 * -------------------------------------------------------------------------- */ /* 3a) 类别圆牌(Wo):统一加细描边圆环 + 轻投影 + 字母更克制,贴近币安资产图标 */ html[data-h5-polish="on"] [style*="border-radius: 999px"][style*="background"], html[data-h5-polish="on"] [style*="borderRadius:999"][style*="background"] { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10), 0 1px 3px rgba(0, 0, 0, 0.35); letter-spacing: -0.02em; } /* 3b) metal 金属牌(#C9A227)→ 收口为更精致的币安金属金渐变(金属感,非纯平涂) */ html[data-h5-polish="on"] [style*="background: rgb(201, 162, 39)"], html[data-h5-polish="on"] [style*="#C9A227"] { background-image: linear-gradient(140deg, #E6C45A 0%, #C9A227 52%, #9B7A18 100%) !important; color: #2A2206 !important; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25); } /* 3c) energy 能源牌(#5B6573)→ 深石墨水滴,描边更克制 */ html[data-h5-polish="on"] [style*="background: rgb(91, 101, 115)"], html[data-h5-polish="on"] [style*="#5B6573"] { background-image: linear-gradient(140deg, #6B7686 0%, #4A535F 100%) !important; } /* 3d) index 指数牌(#3D7EFF)→ 币安蓝渐变 */ html[data-h5-polish="on"] [style*="background: rgb(61, 126, 255)"] { background-image: linear-gradient(140deg, #5B92FF 0%, #2F6BE0 100%) !important; } /* 3e) agriculture 农产牌(#2E9E6B)→ 币安绿渐变 */ html[data-h5-polish="on"] [style*="background: rgb(46, 158, 107)"], html[data-h5-polish="on"] [style*="#2E9E6B"] { background-image: linear-gradient(140deg, #2FBF7E 0%, #1E8A58 100%) !important; } /* 3f) 指数旗占位图(Bo, /flags/*.svg):统一精致圆环外框 + 轻投影, * 纯外观,不动 src/alt/数据(不编造国旗)。命中 img[src*="/flags/"]。 * 主包给该 img 设了内联 box-shadow(var(--surface)/var(--border) 环), * 这里用同手段 !important 收口为更克制的暗色双环 + 轻投影,让占位牌读起来像 * 「刻意的指数/币种 chip」而非破图。注意: 不动 src/alt(不编造国旗/不改数据)。 */ html[data-h5-polish="on"] img[src*="/flags/"] { border-radius: 999px !important; box-shadow: 0 0 0 1px var(--border), inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 1px 3px rgba(0, 0, 0, 0.40) !important; } /* ----------------------------------------------------------------------------- * 4) 绑定提款地址 / 提款 两页:标签弱化、输入突出、留白加大、暗色化、金按钮饱满 * 现状: 「幣種 / 地址 / 標籤」标签 88px 右对齐挤一行,视觉拥挤。 * 做法(纯样式,不改 DOM/校验): * - 表单行内的「短标签」弱化(三级灰、字号略小、字距收口); * - 输入区背景/边框暗色、内边距加大、圆角统一,聚焦金边; * - 卡片留白加大、暗底描边; * - 提交按钮饱满金底深字。 * 为避免误伤全站,作用域收口到「含提款/绑定地址语义的容器」由 JS 打的标记 * data-h5-polish-withdraw（JS 仅按已有文案识别容器后打标，不改其内容/事件）。 * -------------------------------------------------------------------------- */ /* 提款/绑定页卡片:暗底 + 描边 + 留白 */ html[data-h5-polish="on"] [data-h5-polish-withdraw="card"] { background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: 14px !important; box-shadow: var(--shadow-card) !important; } /* 行内短标签(幣種/地址/標籤)弱化:三级灰、常规字重、左对齐更清爽 */ html[data-h5-polish="on"] [data-h5-polish-withdraw="label"] { color: var(--text-3) !important; font-weight: 500 !important; font-size: 13px !important; letter-spacing: 0 !important; min-width: 64px !important; /* 由 88 收窄,标签更紧凑、输入区更突出 */ text-align: left !important; /* 右对齐挤压 → 左对齐清爽 */ } /* 输入区突出:暗底、清晰描边、加大内边距、统一圆角 */ html[data-h5-polish="on"] [data-h5-polish-withdraw="field"] { background: var(--surface-2) !important; border: 1px solid var(--border) !important; border-radius: 10px !important; padding: 12px 14px !important; color: var(--text) !important; } html[data-h5-polish="on"] [data-h5-polish-withdraw="field"]:focus, html[data-h5-polish="on"] [data-h5-polish-withdraw="field"]:focus-within { border-color: var(--gold) !important; box-shadow: var(--shadow-focus) !important; } /* 行距加大:表单每行之间留白(纯视觉) */ html[data-h5-polish="on"] [data-h5-polish-withdraw="row"] { margin-bottom: 14px !important; gap: 12px !important; } /* 提交/绑定主按钮:币安金饱满、深字、44 高、圆角统一、hover 微亮 */ html[data-h5-polish="on"] [data-h5-polish-withdraw="primary"] { background: #FCD535 !important; background-image: linear-gradient(180deg, #FCD535 0%, #E9C12B 100%) !important; color: #1E2329 !important; font-weight: 700 !important; min-height: 46px !important; border: none !important; border-radius: 10px !important; box-shadow: 0 2px 10px rgba(252, 213, 53, 0.18) !important; } html[data-h5-polish="on"] [data-h5-polish-withdraw="primary"]:hover { filter: brightness(1.05); } html[data-h5-polish="on"] [data-h5-polish-withdraw="primary"]:active { filter: brightness(0.96); } html[data-h5-polish="on"] [data-h5-polish-withdraw="primary"]:disabled { opacity: 0.55; filter: none; } /* ----------------------------------------------------------------------------- * 5) 金底按钮通用收口:凡内联用到币安金底的按钮,文字压深(对比度) + hover 微亮 * (兜底,避免别处金底白字。不改尺寸/事件。) * -------------------------------------------------------------------------- */ html[data-h5-polish="on"] button[style*="#FCD535"], html[data-h5-polish="on"] button[style*="rgb(252, 213, 53)"], html[data-h5-polish="on"] [style*="background: #FCD535"], html[data-h5-polish="on"] [style*="background:#FCD535"] { color: #1E2329 !important; } /* ----------------------------------------------------------------------------- * 6) 客服访客窗/弹窗:已是币安暗色款 → 不改其令牌,仅确保与暗色主 app 协调 * (这里不写覆盖,避免破坏其既有暗色;留注释说明:保持现状。) * -------------------------------------------------------------------------- */ /* (no-op by design — 客服窗保持其既有币安暗色款) */ /* ----------------------------------------------------------------------------- * 7) 卡片/分隔线/底部导航 暗色协调兜底(只在作用域内,纯配色) * -------------------------------------------------------------------------- */ /* 通用横线分隔(hr / 1px 边框块)对齐暗色描边 */ html[data-h5-polish="on"] hr { border-color: var(--border); } /* 通用「白底卡片」内联兜底:凡内联写死白底 #fff/#ffffff 的容器 → 收口为面板暗底 * (仅配色;若该处本就有更深内容会被 var 覆盖,纯视觉) */ html[data-h5-polish="on"] [style*="background: rgb(255, 255, 255)"]:not(img):not([src]), html[data-h5-polish="on"] [style*="background: #fff"]:not(img):not([src]), html[data-h5-polish="on"] [style*="background:#fff"]:not(img):not([src]), html[data-h5-polish="on"] [style*="background-color: rgb(255, 255, 255)"]:not(img):not([src]) { background-color: var(--surface) !important; } /* 浅灰次背景(#f4f7fb / #eef2f7 / #f5f7fa)→ 次面暗底 */ html[data-h5-polish="on"] [style*="rgb(244, 247, 251)"], html[data-h5-polish="on"] [style*="#F4F7FB"], html[data-h5-polish="on"] [style*="#f4f7fb"], html[data-h5-polish="on"] [style*="rgb(238, 242, 247)"] { background-color: var(--surface-2) !important; }