/** * KBG UI 3.0 —— Member System页面外层Shell（Stage 5.9 第一批） * * 只负责外层间距/容器宽度，插件`wpcom-member`真实表单DOM * （`.member-form-wrap`等）保留其自有CSS（`css/style.css`真实独立 * enqueue，含真实明暗双模式变量），本文件不覆盖任何插件内部选择器， * 避免样式冲突/维护负担随插件升级失效。 * * 按ARCHITECTURE.md §4强制CSS作用域规则：全部规则以`body.kbg-ui-preview` * 开头。 */ body.kbg-ui-preview .kbg-member-main { padding: var(--kbg-space-8) 0 var(--kbg-space-16); } body.kbg-ui-preview .kbg-member-content { display: flex; justify-content: center; } @media (max-width: 767px) { body.kbg-ui-preview .kbg-member-main { padding: var(--kbg-space-5) 0 var(--kbg-space-10); } } /** * 真实发现（Stage 5.9.1验收阶段，真实Playwright截图核实）：父主题 * 编译产物`wpcom/style.x.x.x....css`真实存在 * `.page-no-sidebar.member-login header.header, * .page-no-sidebar.member-register .action, * .page-no-sidebar.member-register .breadcrumb, * .page-no-sidebar.member-register header.header{display:none}` * 与`.page-no-sidebar.member-login,.page-no-sidebar.member-register{ * background-color:var(--theme-el-bg-color)!important}`两条真实、 * 带`!important`的既有规则——这是父主题对Login/Register页面"极简无 * 导航+浅色背景"的既有真实设计意图，不是Bug。真实核实`.action`/ * `.breadcrumb`两个类名不会命中本项目DOM（`wpcom_breadcrumb()`真实 * 用参数化class`kbg-archive-breadcrumb`，不是父主题默认的`breadcrumb`）， * 无需处理；但`header.header`真实会命中真实全局Header（`get_header()` * 输出的同一份DOM），且父主题浅色背景与UI3深色主题产生真实视觉冲突。 * * 你的书面要求第六节明确"复用现有UI3 Header/Footer"，且全站其它UI3 * 页面（Archive/404/General Page）均保留完整Header，为保持跨页面 * 视觉一致性（呼应Design Review"组件一致性"要求），此处按 * ARCHITECTURE.md §4"覆盖父主题真实DOM"的例外条款，用更高特异性的 * `body.kbg-ui-preview`前缀选择器+同等`!important`覆盖，仅在Preview * 模式下重新显示Header、恢复深色背景，不影响匿名/无Preview参数下 * 父主题这两条规则的真实原有效果。 */ body.kbg-ui-preview.page-no-sidebar.member-login, body.kbg-ui-preview.page-no-sidebar.member-register { background-color: var(--kbg-bg-0) !important; } /** * 真实连带发现（Stage 5.9.1真实截图核实，父主题`js/main.js`真实源码 * 确认，非猜测）：重新显示Header后，Header与公告条(`.top-news`)真实 * 视觉重叠——根因是父主题真实JS： * `!v&&w.length&&(w.slideDown(),e("body:not(.member-login,.member- * register)").css("padding-top",60),e(".wpcom-member .btn-home") * .css("top",90))`——**明确排除**`.member-login`/`.member-register` * 两个真实body class，不给它们的``设置`padding-top:60px`（因为 * 父主题原设计里这两个页面Header本来就是隐藏的，JS认为不需要让出空间）。 * 我们用CSS把Header重新显示后，这段JS原本自洽的配合关系被打破，需要 * 用等效CSS补上JS本应做的事——不修改父主题JS文件本身，纯CSS纵深适配。 * * 真实核实的固定/响应式数值来源（父主题真实CSS，非猜测/硬编码臆造）： * - `.top-news{height:60px}`——真实固定值，不随内容自适应。 * - `.admin-bar .top-news{top:32px}`（桌面）/ * `@media(max-width:782px){.admin-bar .top-news{top:46px}}` * （移动，782px是WordPress核心`#wpadminbar`标准响应式断点，非 * 本项目自创）——真实测得桌面`header.top`应为92px(32+60)，移动 * 应为106px(46+60)，均已用真实Playwright移动视口(390×844)截图 * 核实。 */ body.kbg-ui-preview.member-login, body.kbg-ui-preview.member-register { padding-top: 60px !important; } body.kbg-ui-preview.member-login header.header, body.kbg-ui-preview.member-register header.header { display: block !important; top: 92px !important; } @media (max-width: 782px) { body.kbg-ui-preview.member-login header.header, body.kbg-ui-preview.member-register header.header { top: 106px !important; } } /** * 真实发现（Stage 5.9.1键盘/可访问性验证）：插件`wpcom-member`真实CSS * （`css/style.css`）未定义任何`input:focus`/`button:focus`可见样式 * （真实grep核实0命中），键盘Tab导航时当前聚焦字段无任何视觉提示。 * 按ARCHITECTURE.md §4"覆盖父主题真实DOM"例外条款，补一条最小化、 * 仅在Preview模式生效的`:focus-visible`轮廓，不改变插件表单任何 * 结构/逻辑/校验，只解决真实缺失的可访问性视觉反馈。 */ body.kbg-ui-preview .member-form input:focus-visible, body.kbg-ui-preview .member-form button:focus-visible, body.kbg-ui-preview .member-lostpassword input:focus-visible, body.kbg-ui-preview .member-lostpassword button:focus-visible { outline: 2px solid var(--kbg-gold-1) !important; outline-offset: 2px !important; }