/* =============================================================================
* login-binance-polish-20260622.css
* H5 登录/注册 —— 币安(Binance)质感精修 + 抑制"提前红字校验"
* 纯换皮 / 零功能丢失:
* - 不改任何 DOM、不绑事件、不改 fetch、不动 submit 校验逻辑(校验仍照常跑)
* - 只用 CSS 覆盖:抑制 *浏览器原生 / 提前* 的红字红框,使红色只在提交后(由
* 既有补丁的 #jp-*-error 文本被写入时)出现;并深化间距/对比/聚焦
* 作用域严格限定在 .auth-screen(登录/注册屏),不触达客服 / 行情 / 业务页
*
* 注入: 在 index.html 现有 login-polish.css 之后加一行:
*
* 回滚: 删除该 行(并删本文件)即恢复,0 残留
* ========================================================================== */
/* -----------------------------------------------------------------------------
* 1) 抑制"提前红字校验" —— 让红色只在提交后才出现
*
* 现状成因(已核实):
* a) 浏览器原生 :invalid / :-moz-ui-invalid 会在用户刚输入(未提交)就给输入框
* 画红框/红光,这是最常见的"提前红字"观感来源。
* b) 既有补丁的错误文本节点 (#jp-register-phone-error /
* #jp-register-terms-error-20260621 / #jp-register-flow-error-20260621)
* 只在 *提交时* 被写入文本、输入时即清空 —— 行为本就正确;但空容器仍占位、
* 可能闪现一条空红条。这里让"空内容时彻底折叠、有内容时才显形",
* 确保提交前绝不出现任何红色。
*
* 注意:这些都只动 *表现层*,JS 的 validateBeforeSubmit / validateTerms
* 仍然照常执行并阻止非法提交 —— 校验功能零丢失,只是把"红字"延后到提交后。
* -------------------------------------------------------------------------- */
/* a) 关闭 auth 屏内输入框的原生 invalid 红框/红光(提交前不再因 :invalid 变红) */
.auth-screen input:invalid,
.auth-screen input:-moz-ui-invalid,
.auth-screen input:user-invalid,
.auth-screen textarea:invalid,
.auth-screen select:invalid {
border-color: #2B3139 !important;
box-shadow: none !important;
outline: none !important;
}
/* 聚焦时仍走币安金边(即使原生判 invalid 也只显示中性金边,不显红) */
.auth-screen input:invalid:focus,
.auth-screen input:-moz-ui-invalid:focus,
.auth-screen input:user-invalid:focus {
border-color: #FCD535 !important;
box-shadow: 0 0 0 3px rgba(252, 213, 53, 0.12) !important;
}
/* b) 补丁错误文本容器:空内容时折叠(无红条/无占位);有内容时柔和淡入。
*
* 重要:既有 login-polish.css 用 `#jp-register-phone-error{display:none}` 把该
* 错误位 *永久* 隐藏了 —— 那会让"提交后"的合法手机号校验文案也永远不显示,
* 属于功能回归(校验逻辑仍跑但用户看不到提示)。这里改为:
* 空内容(提交前)→ display:none(无红条,满足"提交前不报红");
* 有内容(提交后写入文案)→ display:block 并淡入(满足"提交后才报")。
* 本规则后加载且同为 ID 特异性,故覆盖 login-polish.css 的 display:none。 */
.auth-screen #jp-register-phone-error,
.auth-screen #jp-register-terms-error-20260621,
.auth-screen #jp-register-flow-error-20260621,
.auth-screen #jp-login-terms-error,
.auth-screen [id$="-error"]:not(.jp-error-force-show) {
min-height: 0 !important;
margin-top: 0 !important;
padding: 0 !important;
line-height: 1.45 !important;
color: #F6465D !important; /* 币安跌色;仅当有文本时可见 */
font-size: 12.5px !important;
text-align: left !important;
}
/* :empty 时彻底无痕(提交前):折叠且不占位、不显红 */
.auth-screen #jp-register-phone-error:empty,
.auth-screen #jp-register-terms-error-20260621:empty,
.auth-screen #jp-register-flow-error-20260621:empty,
.auth-screen #jp-login-terms-error:empty,
.auth-screen [id$="-error"]:empty {
display: none !important;
margin-top: 0 !important;
min-height: 0 !important;
}
/* 一旦被写入文本(提交校验未过)→ 显形 + 币安克制间距 + 淡入 */
.auth-screen #jp-register-phone-error:not(:empty),
.auth-screen #jp-register-terms-error-20260621:not(:empty),
.auth-screen #jp-register-flow-error-20260621:not(:empty),
.auth-screen #jp-login-terms-error:not(:empty),
.auth-screen [id$="-error"]:not(:empty) {
display: block !important;
margin-top: 8px !important;
animation: jpAuthErrFadeIn 0.18s ease-out both;
}
@keyframes jpAuthErrFadeIn {
from { opacity: 0; transform: translateY(-2px); }
to { opacity: 1; transform: translateY(0); }
}
/* -----------------------------------------------------------------------------
* 2) 币安质感深化 —— 间距 / 对比 / 聚焦
* 仅在 login-polish.css 基础上做"加深",不与其冲突;同特异性后加载即胜出。
* -------------------------------------------------------------------------- */
/* 容器:更深的纯黑底 + 更克制金色顶光,左右留白加大,纵向呼吸更足 */
.auth-screen {
background:
radial-gradient(140% 60% at 50% -14%, rgba(252, 213, 53, 0.055), rgba(11, 14, 17, 0) 60%),
#0B0E11 !important;
padding: 44px 26px 52px !important;
color: #EAECEF !important;
}
/* 标题:对比再拉满(更亮的主字 + 更明确的字重/字距) */
.auth-screen > div:first-child > div:nth-child(2) {
font-size: 25px !important;
font-weight: 800 !important;
letter-spacing: 0.4px !important;
color: #F5F6F8 !important;
margin-top: 16px !important;
}
.auth-screen > div:first-child > div:nth-child(3) {
font-size: 13px !important;
color: #848E9C !important;
margin-top: 7px !important;
line-height: 1.5 !important;
}
/* 输入框:间距加深(字段之间 16px 呼吸)、对比更稳、聚焦金边更明确 */
.auth-screen input {
height: 50px !important;
margin-top: 16px !important;
padding: 0 16px !important;
border-radius: 8px !important;
background: #1E2329 !important;
border: 1px solid #2B3139 !important;
color: #EAECEF !important;
font-size: 14.5px !important;
line-height: 50px !important;
box-sizing: border-box !important;
transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease !important;
}
.auth-screen input::placeholder {
color: #5E6673 !important;
opacity: 1 !important;
}
.auth-screen input:hover {
border-color: #3A424E !important;
}
.auth-screen input:focus {
border-color: #FCD535 !important;
background: #181A20 !important;
box-shadow: 0 0 0 3px rgba(252, 213, 53, 0.14) !important;
outline: none !important;
}
/* 自动填充时不被浏览器涂成蓝/白底(保持币安深面 + 浅字) */
.auth-screen input:-webkit-autofill,
.auth-screen input:-webkit-autofill:hover,
.auth-screen input:-webkit-autofill:focus {
-webkit-text-fill-color: #EAECEF !important;
-webkit-box-shadow: 0 0 0 1000px #1E2329 inset !important;
caret-color: #EAECEF !important;
transition: background-color 9999s ease-out 0s !important;
}
/* 主 CTA(登入 / 註冊):金底深字、更饱满、间距加深 */
.auth-screen button[style*="linear-gradient"],
.auth-screen button[style*="rgb(252, 213, 53)"] {
display: block !important;
width: 100% !important;
height: 50px !important;
margin: 26px 0 0 !important;
padding: 0 !important;
border: none !important;
border-radius: 10px !important;
background: #FCD535 !important;
color: #1E2329 !important;
font-size: 15.5px !important;
font-weight: 800 !important;
letter-spacing: 0.3px !important;
box-shadow: 0 6px 20px rgba(252, 213, 53, 0.22) !important;
transition: filter 0.15s ease, transform 0.05s ease !important;
}
.auth-screen button[style*="linear-gradient"]:hover,
.auth-screen button[style*="rgb(252, 213, 53)"]:hover {
filter: brightness(1.06) !important;
}
.auth-screen button[style*="linear-gradient"]:active,
.auth-screen button[style*="rgb(252, 213, 53)"]:active {
transform: translateY(1px) !important;
}
/* 次要链接(忘記密碼? / 註冊 / 返回登入):低调文字链接,不撑宽不换行 */
.auth-screen button[style*="transparent"] {
display: inline-block !important;
width: auto !important;
min-width: 0 !important;
height: auto !important;
margin: 0 !important;
padding: 8px 4px !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
border-radius: 0 !important;
color: #848E9C !important;
font-size: 13.5px !important;
font-weight: 600 !important;
white-space: nowrap !important;
}
.auth-screen button[style*="transparent"]:hover {
color: #FCD535 !important;
}
/* "忘記密碼? / 註冊" 一行:两端对齐 + 加深上间距 */
.auth-screen div[style*="space-between"] {
margin-top: 20px !important;
align-items: center !important;
}
/* logo 框:更稳的深框 + 阴影,尺寸略增加强焦点 */
.auth-screen > div:first-child > span {
background: #FFFFFF !important;
border-radius: 18px !important;
box-shadow: 0 8px 26px rgba(0, 0, 0, 0.5), 0 0 0 1px #2B3139 !important;
width: 66px !important;
height: 66px !important;
}
/* 条款勾选区:对比与可读性 */
.auth-screen [class*="terms"],
.auth-screen label {
font-size: 12.5px !important;
color: #B7BDC6 !important;
}
.auth-screen input[type="checkbox"] {
width: 16px !important;
height: 16px !important;
accent-color: #FCD535 !important;
margin-top: 0 !important;
}
/* 冗余的"手機號碼"独立小标题:沿用既有处理(placeholder 已标必填),去掉装饰性标签
* 但 *不* 隐藏错误位本身(错误位交由上方"提交后才显形"规则控制) */
.auth-screen #jp-register-phone-patch-label,
.auth-screen .jp-register-field-label-20260621,
.auth-screen [class*="field-label"] {
display: none !important;
}
/* UID 归属说明:低调灰字,左对齐 */
.auth-screen #jp-invite-ownership-note {
font-size: 12px !important;
color: #5E6673 !important;
line-height: 1.5 !important;
margin-top: 10px !important;
text-align: left !important;
}