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/build/public.css
+18 -5
View File
@@ -6704,14 +6704,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);
}
@@ -6720,7 +6722,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;
@@ -6752,12 +6754,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，单按钮会只占一半）。 */
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 -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，单按钮会只占一半）。 */
assets/css/routes/orders.css
+9 -5
View File
@@ -164,16 +164,20 @@
.aksrt-order-detail__refresh-state button { grid-column: 2; justify-self: start; }
/* 底部操作区：按钮排布沿用主题 .but-average.modal-buts，此处仅保留吸底定位与通栏背景。
主题 modal-buts 自带 margin-top:16px，吸底场景下用更高优先级清掉，避免内容与吸底条之间出现空隙。 */
.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); }
主题 modal-buts 自带 margin-top:16px，吸底场景下用更高优先级清掉，避免内容与吸底条之间出现空隙。
footer 不留垂直内边距（水平同理归零）——上下 13px 并入按钮（min-height 64 = 13+38+13），
按钮盒即整个底部区域；安全区留在 footer 底部，避免按钮文字沉入 Home 指示条。 */
.aksrt-order-detail-modal .aksrt-order-detail__actions { position: sticky; bottom: 0; z-index: 2; margin: 0 -18px; padding: 0 0 env(safe-area-inset-bottom, 0); 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; }
分界线与悬停底色需排在 .c-blue 规则之后：主按钮同受 border:0 影响与主色覆盖，同名优先级看先后。 */
.aksrt-order-detail-modal .aksrt-order-detail__actions.but-average.modal-buts > .but { min-height: 64px; 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:hover { opacity: 1; background: color-mix(in srgb, var(--modal-ink, #333333) 5%, transparent); color: var(--modal-primary, #f04494); }
.aksrt-order-detail-modal .aksrt-order-detail__actions.but-average.modal-buts > .but.c-blue:hover { color: color-mix(in srgb, var(--modal-primary, #f04494) 82%, #000000); }
.aksrt-order-detail-modal .aksrt-order-detail__actions.but-average.modal-buts > .but:only-child { grid-column: 1 / -1; }
/* Orders extensions */