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

style(modal): 售后与订单弹窗底部按钮满幅化并优化悬停反馈

Browse Source
This commit is contained in:
kate522
2026-10-07 10:18:48 +08:00
parent e9a1a75259
commit 3eb9cc739c
5 changed files with 58 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/frontend/modal-runtime.css
+18 -5
View File
@@ -827,14 +827,16 @@ body.aksrt-modal-runtime-open {
/* 售后弹窗底部按钮：全宽平铺贴底（负 margin 抵消 __content 内边距）+ 分隔线，
子按钮去独立背景/边框/圆角（文字色区分主次），覆盖上方全局按钮网格的胶囊观感；
仅在售后弹窗家族生效，其他 runtime 弹窗仍走全局网格样式。 */
仅在售后弹窗家族生效，其他 runtime 弹窗仍走全局网格样式。
footer 自身不留垂直内边距——上下 12px 并入按钮（min-height 62 = 12+38+12），
按钮盒即整个底部区域（hover 底色/分界线随之满幅）。 */
.aksrt-after-sale-apply-modal .but-average.modal-buts,
.aksrt-after-sale-detail-modal .but-average.modal-buts,
.aksrt-after-sale-expired-modal .but-average.modal-buts,
.aksrt-after-sale-withdraw-modal .but-average.modal-buts {
gap: 0;
margin: 16px -18px -16px;
padding: 12px 18px;
padding: 0;
border-top: 1px solid var(--modal-line-soft, rgba(50, 50, 50, 0.06));
background: var(--main-bg-color, #fff);
}
@@ -843,7 +845,7 @@ body.aksrt-modal-runtime-open {
.aksrt-after-sale-detail-modal .but-average.modal-buts > .but,
.aksrt-after-sale-expired-modal .but-average.modal-buts > .but,
.aksrt-after-sale-withdraw-modal .but-average.modal-buts > .but {
min-height: 38px;
min-height: 62px;
border: 0;
border-radius: 0;
box-shadow: none;
@@ -875,12 +877,23 @@ body.aksrt-modal-runtime-open {
border-left: 1px solid var(--modal-line-soft, rgba(50, 50, 50, 0.06));
}
/* 悬停反馈：平铺文字按钮以柔和投影示意可点（层级感），基础 .but 的 0.15s 过渡自动生效。 */
/* 悬停反馈（参考 Element 卡片 footer 的 hover 语言）：整块区域浅灰底 + 文字转主色，
次级按钮 hover 升为主色、主按钮略加深；平铺按钮已满幅，底色即铺满整个区域，
基础 .but 的 0.15s 过渡自动生效，并压掉 compat 层的 hover 半透明。 */
.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);
opacity: 1;
background: color-mix(in srgb, var(--modal-ink, #333333) 5%, transparent);
color: var(--modal-primary, #f04494);
}
.aksrt-after-sale-apply-modal .but-average.modal-buts > .but.c-blue:hover,
.aksrt-after-sale-detail-modal .but-average.modal-buts > .but.c-blue:hover,
.aksrt-after-sale-expired-modal .but-average.modal-buts > .but.c-blue:hover,
.aksrt-after-sale-withdraw-modal .but-average.modal-buts > .but.c-blue:hover {
color: color-mix(in srgb, var(--modal-primary, #f04494) 82%, #000000);
}
/* 单按钮 footer 占满整行（全局网格是 1fr 1fr，单按钮会只占一半）。 */