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

fix(pay): render the copy button beside the anchor with real styling

Browse Source 
The copy fields survived save and sanitization, but the frontend never showed
a working copy button: the remark button was emitted as a bare sibling inside
a column flex list, and .resource-download-box__btn--extract had no CSS rule at
all, so it rendered as an unstyled full-width block stacked under the download
anchor instead of the side-by-side row the reference theme uses.

Wrap the anchor and the copy button in .resource-download-box__row and give the
extract modifier real styles (dashed outline, muted surface, focus-color hover),
including the scoped mobile download bar variant.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
kate522
2026-09-24 20:57:32 +08:00
co-authored by Claude Sonnet 4.6
parent 592bfb4fa2
commit bd3d50c6c6
3 changed files with 100 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/frontend/resource-meta/part.css
+69
View File
@@ -242,6 +242,48 @@
margin: 0;
}
/* 下载按钮 + 复制/备注按钮并排，对应参考主题的 .but-download.flex.ac */
.resource-download-box__row {
display: flex;
align-items: stretch;
gap: 8px;
}
.resource-download-box__row > .resource-download-box__btn {
flex: 1 1 auto;
min-width: 0;
}
/* 提取码 / 点击复制按钮 */
.resource-download-box__btn--extract {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
min-height: 44px;
padding: 10px 14px;
border: 1px dashed var(--main-border-color, rgb(132 145 165 / 35%));
border-radius: 10px;
background: var(--muted-bg-color, rgb(132 145 165 / 8%));
color: var(--muted-color, #6b7280);
font-size: 13px;
font-weight: 600;
line-height: 1.3;
cursor: pointer;
transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.resource-download-box__btn--extract:hover {
border-color: var(--focus-color, #f04494);
background: var(--focus-color-opacity1, rgb(240 68 148 / 10%));
color: var(--focus-color, #f04494);
}
.resource-download-box__btn--extract:active {
transform: scale(0.98);
}
/* 下载按钮 */
.resource-download-box__btn {
display: flex;
@@ -734,6 +776,33 @@
margin: 0;
}
/* ---- 下载按钮 + 复制/备注按钮并排 ---- */
.resource-mobile-download-bar .resource-download-box__row {
display: flex;
align-items: stretch;
gap: 8px;
}
.resource-mobile-download-bar .resource-download-box__row > .resource-download-box__btn {
flex: 1 1 auto;
min-width: 0;
}
/* ---- 提取码 / 点击复制按钮 ---- */
.resource-mobile-download-bar .resource-download-box__btn--extract {
flex: 0 0 auto;
min-height: 50px;
padding: 12px 14px;
border: 1px dashed var(--main-border-color, rgb(132 145 165 / 35%));
border-radius: 10px;
background: var(--muted-bg-color, rgb(132 145 165 / 8%));
color: var(--muted-color, #6b7280);
font-size: 13px;
font-weight: 600;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
/* ---- 下载按钮（核心交互元素）---- */
.resource-mobile-download-bar .resource-download-box__btn {
display: flex;