kate522/wordpress-theme-aksrt
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(styles): 还原弹窗 footer 相邻按钮分界线并补悬停阴影

Browse Source 
被平铺规则的 border:0 抹掉的 legacy 分隔线按家族色还原，售后四弹窗与订单详情同款；更新构建产物与契约测试。
This commit is contained in:
kate522
2026-10-07 09:53:10 +08:00
parent d69e1d33c3
commit e9a1a75259
5 changed files with 50 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/build/public.css
+18
View File
@@ -6742,6 +6742,24 @@ body.aksrt-modal-runtime-open {
color: var(--modal-primary, #f04494);
}
/* 相邻按钮分界线：legacy footer 自带 .but + .but 左分隔线，上方平铺规则的 border:0
会把它抹掉，这里按家族分隔色还原（单按钮无相邻兄弟，天然无分界线）。
需排在 .c-blue 规则之后：确认提交等主按钮同受 border:0 影响，后者同名优先级。 */
.aksrt-after-sale-apply-modal .but-average.modal-buts > .but + .but,
.aksrt-after-sale-detail-modal .but-average.modal-buts > .but + .but,
.aksrt-after-sale-expired-modal .but-average.modal-buts > .but + .but,
.aksrt-after-sale-withdraw-modal .but-average.modal-buts > .but + .but {
border-left: 1px solid var(--modal-line-soft, rgba(50, 50, 50, 0.06));
}
/* 悬停反馈：平铺文字按钮以柔和投影示意可点（层级感），基础 .but 的 0.15s 过渡自动生效。 */
.aksrt-after-sale-apply-modal .but-average.modal-buts > .but:hover,
.aksrt-after-sale-detail-modal .but-average.modal-buts > .but:hover,
.aksrt-after-sale-expired-modal .but-average.modal-buts > .but:hover,
.aksrt-after-sale-withdraw-modal .but-average.modal-buts > .but:hover {
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
/* 单按钮 footer 占满整行（全局网格是 1fr 1fr，单按钮会只占一半）。 */
.aksrt-after-sale-apply-modal .but-average.modal-buts > .but:only-child,
.aksrt-after-sale-detail-modal .but-average.modal-buts > .but:only-child,
assets/css/build/public.min.css
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
assets/css/frontend/modal-runtime.css
+18
View File
@@ -865,6 +865,24 @@ body.aksrt-modal-runtime-open {
color: var(--modal-primary, #f04494);
}
/* 相邻按钮分界线：legacy footer 自带 .but + .but 左分隔线，上方平铺规则的 border:0
会把它抹掉，这里按家族分隔色还原（单按钮无相邻兄弟，天然无分界线）。
需排在 .c-blue 规则之后：确认提交等主按钮同受 border:0 影响，后者同名优先级。 */
.aksrt-after-sale-apply-modal .but-average.modal-buts > .but + .but,
.aksrt-after-sale-detail-modal .but-average.modal-buts > .but + .but,
.aksrt-after-sale-expired-modal .but-average.modal-buts > .but + .but,
.aksrt-after-sale-withdraw-modal .but-average.modal-buts > .but + .but {
border-left: 1px solid var(--modal-line-soft, rgba(50, 50, 50, 0.06));
}
/* 悬停反馈：平铺文字按钮以柔和投影示意可点（层级感），基础 .but 的 0.15s 过渡自动生效。 */
.aksrt-after-sale-apply-modal .but-average.modal-buts > .but:hover,
.aksrt-after-sale-detail-modal .but-average.modal-buts > .but:hover,
.aksrt-after-sale-expired-modal .but-average.modal-buts > .but:hover,
.aksrt-after-sale-withdraw-modal .but-average.modal-buts > .but:hover {
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
/* 单按钮 footer 占满整行（全局网格是 1fr 1fr，单按钮会只占一半）。 */
.aksrt-after-sale-apply-modal .but-average.modal-buts > .but:only-child,
.aksrt-after-sale-detail-modal .but-average.modal-buts > .but:only-child,
assets/css/routes/orders.css
+4 -1
View File
@@ -168,9 +168,12 @@
.aksrt-order-detail-modal .aksrt-order-detail__actions { position: sticky; bottom: 0; z-index: 2; margin: 0 -18px; padding: 13px 18px calc(13px + env(safe-area-inset-bottom)); border-top: 1px solid var(--detail-line); background: var(--detail-surface); }
.aksrt-order-detail-modal .aksrt-order-detail__actions.but-average.modal-buts { margin-top: 0; gap: 0; }
/* 底部按钮观感与售后弹窗家族对齐（modal-runtime 同款平铺规则）：去胶囊底色/边框/圆角，
文字色区分主次；仅「关闭」单按钮时占满整行，即售后详细「我知道了」的呈现。 */
文字色区分主次；仅「关闭」单按钮时占满整行，即售后详细「我知道了」的呈现。
分界线与悬停阴影需排在 .c-blue 规则之后：主按钮同受 border:0 影响，同名优先级看先后。 */
.aksrt-order-detail-modal .aksrt-order-detail__actions.but-average.modal-buts > .but { min-height: 38px; border: 0; border-radius: 0; box-shadow: none; background: transparent; color: var(--modal-muted, #777); font-weight: 600; cursor: pointer; --this-bg: transparent; --this-border: transparent; --this-shadow: none; }
.aksrt-order-detail-modal .aksrt-order-detail__actions.but-average.modal-buts > .but.c-blue { background: transparent; border: 0; color: var(--modal-primary, #f04494); }
.aksrt-order-detail-modal .aksrt-order-detail__actions.but-average.modal-buts > .but + .but { border-left: 1px solid var(--detail-line); }
.aksrt-order-detail-modal .aksrt-order-detail__actions.but-average.modal-buts > .but:hover { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); }
.aksrt-order-detail-modal .aksrt-order-detail__actions.but-average.modal-buts > .but:only-child { grid-column: 1 / -1; }
/* Orders extensions */
tests/widget-system/after-sale-policy-contract.test.cjs
+9
View File
@@ -311,6 +311,12 @@ test('frontend after-sale modals are standalone and config-driven', () => {
// 否则 openApplyFlow 的 has_application 分流会把用户弹回「售后详细」打转
assert.match(js, /payload\.after_sale\.has_application = false[\s\S]{0,120}openApplyFlow\(payload\)/)
// footer 平铺按钮：相邻按钮分界线（legacy .but + .but 分隔在家族内还原，四个售后弹窗同款）
// + 悬停阴影反馈（平铺观感去掉了底色，hover 以柔和投影示意可点）
const modalCss = read('assets/css/frontend/modal-runtime.css')
assert.match(modalCss, /-apply-modal \.but-average\.modal-buts > \.but \+ \.but,\s*\n\s*\.aksrt-after-sale-detail-modal \.but-average\.modal-buts > \.but \+ \.but,\s*\n\s*\.aksrt-after-sale-expired-modal \.but-average\.modal-buts > \.but \+ \.but,\s*\n\s*\.aksrt-after-sale-withdraw-modal \.but-average\.modal-buts > \.but \+ \.but\s*\{[^}]*border-left:\s*1px solid var\(--modal-line-soft/)
assert.match(modalCss, /-apply-modal \.but-average\.modal-buts > \.but:hover,\s*\n\s*\.aksrt-after-sale-detail-modal \.but-average\.modal-buts > \.but:hover,\s*\n\s*\.aksrt-after-sale-expired-modal \.but-average\.modal-buts > \.but:hover,\s*\n\s*\.aksrt-after-sale-withdraw-modal \.but-average\.modal-buts > \.but:hover\s*\{[^}]*box-shadow/)
// 撤销售后：入口仅随待审核状态渲染，点击先过二次确认弹窗，确认后 DELETE 工单
assert.match(js, /status === 'pending'[\s\S]*?data-aksrt-after-sale-withdraw="' \+ escapeHtml\(\(order && order\.order_number\) \|\| ''\)/)
assert.match(js, /buildWithdrawHtml\(orderNumber\)/)
@@ -371,6 +377,9 @@ test('order center drops the embedded after-sale form and exposes refresh()', ()
assert.match(ordersCss, /\.aksrt-order-detail-modal \.aksrt-order-detail__actions\.but-average\.modal-buts > \.but\s*\{[^}]*background:\s*transparent/)
assert.match(ordersCss, /\.aksrt-order-detail-modal \.aksrt-order-detail__actions\.but-average\.modal-buts > \.but\.c-blue\s*\{[^}]*color:\s*var\(--modal-primary/)
assert.match(ordersCss, /\.aksrt-order-detail-modal \.aksrt-order-detail__actions\.but-average\.modal-buts > \.but:only-child\s*\{[^}]*grid-column:\s*1 \/ -1/)
// 分界线与悬停阴影与售后弹窗家族同款（分隔色用本弹窗 footer 同源的 --detail-line）
assert.match(ordersCss, /\.aksrt-order-detail-modal \.aksrt-order-detail__actions\.but-average\.modal-buts > \.but \+ \.but\s*\{[^}]*border-left:\s*1px solid var\(--detail-line\)/)
assert.match(ordersCss, /\.aksrt-order-detail-modal \.aksrt-order-detail__actions\.but-average\.modal-buts > \.but:hover\s*\{[^}]*box-shadow/)
// 售后记录区保留在订单详情弹窗：记录卡片带申请时间，「查看详细」逐条入口；
// 取消申请按钮与处理器已移除（撤销入口移入售后详细弹窗）。