Files
wordpress-theme-aksrt/assets/css/frontend/vip-modal.css
T
kate522 6f815678ec feat(frontend): replicate reference header user box 1:1
顶导航点击小人弹出的用户信息浮层,从 AKSRT 定制结构改为与参考主题 zib_header_user_box() 逐行同构:头像链接包裹、钱包双瓷砖、会员条、签到、消息图标、统计徽章行全部改用参考主题遗留类,渲染交回 main.css(.sub-user-box 242px、.avatar-img 38px、.msg-news-icon、badge.top、.payvip-icon 深色渐变加 gem 水印、.vip-expdate-tag、.muted-box)。

头像改走 aksrt_get_avatar_box(用户ID, avatar-img, true, false),得到参考的 a 链接包裹 avatar-img 结构。消息图标改参考标记 msg-news-icon abs-right 加 toggle-radius msg-icon,未读徽章用 badge.top,avatar_dropdown 位置门控契约保留。管理端行在「后台管理」前插入「支付中心」,跳 admin.php?page=aksrt_pay,即参考主题「商城中心」槽位,图标 fa-credit-card。

钱包重写为参考双瓷砖:余额在前(c-blue-2 加 fa-money-bill-wave)、积分在后(c-yellow 加 fa-coins),分别按充值开关与积分总开关门控,两块皆关则不渲染,并保留 data-aksrt-wallet-value 与 data-aksrt-points-value 两个 JS 刷新钩子。会员条去掉 AKSRT 自创的 vipbg-v2 level-N 金色背景,改参考的 payvip-icon 加 badg jb-yellow vip-expdate-tag,到期文案按参考语义分为已过期、永久会员、裸日期三种。签到入口由 button 改为 a.but block c-yellow,并去掉随之失效的 compact 形参,data-signin 挂载与 wp_footer 验证码不变。统计行删掉文章徽章(本站不做帖子),图标由 SVG sprite 换 FA5+ 的 fa-comment-dots、fa-thumbs-up、fa-fire。

会员等级图标契约不动:aksrt_get_vip_icon 与 User\Level::get_badge_html 的调用与参数保持原样。

顺带清死代码:aksrt_header_user_badges_row 原本取到函数后直接返回空串,现在真正输出统计行;删掉 header-userbox.css 里整套 bespoke 规则与 vip-modal.css 的 vipbg-v2 死规则。

显式偏差:统计行链接保持扁平用户主页 URL(AKSRT 用户主页是干净 URL 加 JS tab,没有 query tab 路由);签到入口沿用积分签到总开关门控,不新增管理端可配置项。

public.css 与 public.min.css 用 tools/build-public-assets.mjs 重建:该 bundle 打包了 header-userbox.css 且作为依赖先于单模块入队,旧的 width 260px 会压过新源码、把卡片钉在 260px 而不是参考的 242px。

验证:node --test tests/**/*.test.cjs 573 项全通过;六个改动 PHP 文件 php -l 无语法错误;卡片用到的 FA5 token 逐个核对 5.15.4 全部命中。未做真实视觉效果验收。
2026-10-10 16:17:01 +08:00

108 lines
3.1 KiB
CSS
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
/**
* VIP pay modal + hover cards (legacy payvip-modal / vip-card).
*/
/* VIP now uses the shared modal runtime host.
壳几何 1:1 对齐 Zibll modal_pay_uservip:
- 宽度 = bootstrap3 ≥768px 的 .modal-dialog 600px,配合
.modal.flex .modal-dialog 的 max-width: calc(100% - 20px)
- 高度 = .modal.flex .modal-content 的 max-height: calc(100vh - 20px)
+ overflow-y: auto(阈值放宽到整屏,正常桌面内容不触发滚动条)
- 圆角 = .modal-content 的 var(--main-radius)(8px) */
.aksrt-modal-runtime.aksrt-vip-modal-shell {
z-index: 1200;
}
.aksrt-modal-runtime.aksrt-vip-modal-shell .aksrt-modal-runtime__dialog {
width: min(600px, calc(100vw - 20px));
max-height: calc(100vh - 20px);
overflow: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
background: var(--main-bg-color, #fff);
border-radius: var(--main-radius, 8px);
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.22);
}
.aksrt-modal-runtime.aksrt-vip-modal-shell .aksrt-modal-runtime__content {
padding: 0;
}
@media (max-width: 768px) {
.aksrt-modal-runtime.aksrt-vip-modal-shell.aksrt-modal-runtime--bottom .aksrt-modal-runtime__dialog {
width: 100%;
max-width: 100%;
max-height: calc(100vh - 20px);
border-radius: var(--main-radius, 8px) var(--main-radius, 8px) 0 0;
}
}
.payvip-modal {
position: relative;
}
/* 积分兑换会员弹窗:参考主题 refresh_modal 同构静态壳
(.modal.flex.jc.fade > .modal-dialog.modal-mini.full-sm > .modal-content
> .modal-body,由 inc/helpers/aksrt-vip.php 服务端输出)。三点约束:
- 静止态必须显式隐藏:main.css 的 .flex{display:flex}(后加载、与 bootstrap
的 .modal{display:none} 同特异性)会让壳永久铺满全屏,叠加 .fade 的
opacity:0 形成隐形遮罩,拦截整页点击;
- 打开态由 pay-vip.js 自包含开关的内联 display:flex 驱动(block 会破坏
.flex.jc 双轴居中),与余额充值/购买积分弹窗同构;
- 入口在会员购买弹窗与 /user/vip/ 页面横条两处,壳需高于 runtime 宿主
(100050),以复现参考主题在会员弹窗之上再叠一层兑换弹窗的行为。 */
.modal[data-aksrt-vip-points-modal] {
display: none;
z-index: 100060;
}
.modal[data-aksrt-vip-points-modal].in {
display: flex;
}
.modal-backdrop[data-aksrt-vip-points-backdrop] {
z-index: 100055;
}
.pay-vip-form-row {
display: grid;
gap: 12px;
}
@media (min-width: 640px) {
.pay-vip-form-row {
grid-template-columns: 1fr 1.2fr;
}
}
/* Modal-only equity (admin HTML; no forced bullets) */
.payvip-modal .v-equity {
display: block;
list-style: none;
margin: 8px 0 0;
padding: 0;
font-size: 12px;
line-height: 1.6;
}
.payvip-modal .v-equity > li {
display: block;
margin: 0 0 6px;
padding: 0;
list-style: none;
}
.payvip-modal .v-equity > li::before,
.payvip-modal .v-equity > li::after {
content: none !important;
display: none !important;
}
.initiate-pay.is-loading,
.initiate-pay:disabled {
opacity: 0.7;
cursor: wait;
}
.vip-expdate-tag {
font-size: 12px;
}