kate522andClaude Sonnet 4.6
b94c820361
The post editor's download row only exposed address / button text / remark, leaving copy_key, copy_val and class as hidden inputs with no UI, so the reference copy area, custom button icon, text and color were unreachable. The submission popup already emitted those keys, which made the two write paths diverge from anything the editor could produce. Expose the full reference field set (地址/备注/复制名称/复制内容/图标/文案/ 颜色) as an accordion card with drag reordering, add the one genuinely new `icon` key through aksrt_sanitize_icon_value(), and teach both frontend download renderers to consume the fields they previously ignored. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
348 lines
5.9 KiB
CSS
348 lines
5.9 KiB
CSS
.aksrt-pay-meta {
|
|
margin: -6px -12px -12px;
|
|
}
|
|
|
|
.aksrt-pay-meta__field {
|
|
box-sizing: border-box;
|
|
display: grid;
|
|
grid-template-columns: 22% minmax(0, 1fr);
|
|
gap: 14px;
|
|
margin: 0;
|
|
padding: 16px 18px;
|
|
border-top: 1px solid #eee;
|
|
}
|
|
|
|
.aksrt-pay-meta__field:first-child {
|
|
border-top: 0;
|
|
}
|
|
|
|
.aksrt-pay-meta__field.compact {
|
|
padding-top: 8px;
|
|
}
|
|
|
|
.aksrt-pay-meta__title {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding-top: 6px;
|
|
color: #0991f5;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
line-height: 1.45;
|
|
text-align: right;
|
|
}
|
|
|
|
.aksrt-pay-meta__control,
|
|
.aksrt-pay-meta__control input[type="text"],
|
|
.aksrt-pay-meta__control input[type="url"],
|
|
.aksrt-pay-meta__control input[type="number"],
|
|
.aksrt-pay-meta__control textarea,
|
|
.aksrt-pay-meta__control select {
|
|
box-sizing: border-box;
|
|
min-width: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.aksrt-pay-meta__control .description {
|
|
margin: 6px 0 0;
|
|
color: #777;
|
|
font-size: 12px;
|
|
line-height: 1.55;
|
|
}
|
|
|
|
.aksrt-pay-meta__radios {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px 18px;
|
|
padding-top: 5px;
|
|
}
|
|
|
|
.aksrt-pay-meta__radios .description {
|
|
flex-basis: 100%;
|
|
}
|
|
|
|
.aksrt-pay-meta__inline,
|
|
.aksrt-pay-meta__number,
|
|
.aksrt-pay-meta__upload,
|
|
.aksrt-pay-meta__buttons {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 7px;
|
|
}
|
|
|
|
.aksrt-pay-meta__inline input {
|
|
flex: 1;
|
|
}
|
|
|
|
.aksrt-pay-meta__inline select {
|
|
flex: 0 0 110px;
|
|
}
|
|
|
|
.aksrt-pay-meta__number input,
|
|
.aksrt-pay-meta__upload input {
|
|
flex: 1;
|
|
}
|
|
|
|
.aksrt-pay-meta__number > span {
|
|
flex: 0 0 auto;
|
|
color: #777;
|
|
}
|
|
|
|
.aksrt-pay-meta__upload {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.aksrt-pay-meta__upload .button-link-delete {
|
|
flex-basis: 100%;
|
|
text-align: left;
|
|
}
|
|
|
|
.aksrt-pay-meta__gallery {
|
|
display: grid;
|
|
grid-template-columns: repeat(6, minmax(0, 1fr));
|
|
gap: 7px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.aksrt-pay-meta__gallery:empty {
|
|
display: none;
|
|
}
|
|
|
|
.aksrt-pay-meta__gallery img {
|
|
display: block;
|
|
width: 100%;
|
|
aspect-ratio: 1;
|
|
border-radius: 4px;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.aksrt-pay-meta__group {
|
|
display: grid;
|
|
gap: 7px;
|
|
margin: 0 0 10px;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
border: 1px solid #e3e5e8;
|
|
border-radius: 4px;
|
|
background: #f8f9fa;
|
|
}
|
|
|
|
.aksrt-pay-meta__group--inline {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 7px;
|
|
margin: 0 0 10px;
|
|
padding: 10px;
|
|
border: 1px solid #e3e5e8;
|
|
border-radius: 4px;
|
|
background: #f8f9fa;
|
|
}
|
|
|
|
.aksrt-pay-meta__group-head {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 8px 10px;
|
|
margin: 0;
|
|
background: #fff;
|
|
border-bottom: 1px solid #e3e5e8;
|
|
}
|
|
|
|
.aksrt-pay-meta__group.is-open .aksrt-pay-meta__group-head {
|
|
border-bottom-color: #e3e5e8;
|
|
}
|
|
|
|
.aksrt-pay-meta__group-drag {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 24px;
|
|
height: 24px;
|
|
color: #8c8f94;
|
|
cursor: move;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.aksrt-pay-meta__group-drag:hover {
|
|
color: #1d2327;
|
|
background: #f0f0f1;
|
|
}
|
|
|
|
.aksrt-pay-meta__group-drag .dashicons {
|
|
font-size: 18px;
|
|
width: 18px;
|
|
height: 18px;
|
|
}
|
|
|
|
.aksrt-pay-meta__group-toggle {
|
|
display: flex;
|
|
flex: 1;
|
|
align-items: center;
|
|
gap: 6px;
|
|
min-width: 0;
|
|
padding: 0;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: #1d2327;
|
|
text-align: left;
|
|
background: none;
|
|
border: 0;
|
|
box-shadow: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.aksrt-pay-meta__group-toggle:focus {
|
|
outline: 1px solid #2271b1;
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.aksrt-pay-meta__group-title {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.aksrt-pay-meta__group-caret {
|
|
flex: 0 0 auto;
|
|
color: #8c8f94;
|
|
font-size: 16px;
|
|
width: 16px;
|
|
height: 16px;
|
|
transition: transform 0.15s ease;
|
|
}
|
|
|
|
.aksrt-pay-meta__group.is-open .aksrt-pay-meta__group-caret {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
.aksrt-pay-meta__group-body {
|
|
display: none;
|
|
gap: 10px;
|
|
padding: 12px 10px;
|
|
}
|
|
|
|
.aksrt-pay-meta__group.is-open .aksrt-pay-meta__group-body {
|
|
display: grid;
|
|
}
|
|
|
|
.aksrt-pay-meta__group-body > .button-link-delete {
|
|
justify-self: start;
|
|
}
|
|
|
|
.aksrt-pay-meta__group-body > .description {
|
|
margin: -4px 0 0;
|
|
color: #777;
|
|
font-size: 12px;
|
|
line-height: 1.55;
|
|
}
|
|
|
|
.aksrt-pay-meta__group-field {
|
|
display: grid;
|
|
gap: 4px;
|
|
}
|
|
|
|
.aksrt-pay-meta__group-field > label {
|
|
color: #1d2327;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.aksrt-pay-meta__group-field--split {
|
|
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
|
gap: 10px;
|
|
}
|
|
|
|
.aksrt-pay-meta__group-field--split > div {
|
|
display: grid;
|
|
gap: 4px;
|
|
}
|
|
|
|
.aksrt-pay-meta__group-field input[type="text"],
|
|
.aksrt-pay-meta__group-field input[type="url"],
|
|
.aksrt-pay-meta__group-field textarea {
|
|
width: 100%;
|
|
}
|
|
|
|
.aksrt-pay-meta__group-field .aksrt-icon-picker {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.aksrt-pay-meta__group-field .aksrt-icon-picker__preview {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 30px;
|
|
height: 30px;
|
|
font-size: 16px;
|
|
color: #1d2327;
|
|
background: #fff;
|
|
border: 1px solid #dcdcde;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.aksrt-pay-meta__group-field .aksrt-icon-picker__value {
|
|
flex: 1;
|
|
min-width: 160px;
|
|
}
|
|
|
|
.aksrt-pay-meta__class-swatches {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 5px;
|
|
}
|
|
|
|
.aksrt-pay-meta__class-swatch {
|
|
width: 26px;
|
|
height: 22px;
|
|
padding: 0;
|
|
border: 2px solid #fff;
|
|
border-radius: 3px;
|
|
box-shadow: 0 0 0 1px #dcdcde;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.aksrt-pay-meta__class-swatch:hover {
|
|
box-shadow: 0 0 0 1px #8c8f94;
|
|
}
|
|
|
|
.aksrt-pay-meta__class-swatch.is-active {
|
|
box-shadow: 0 0 0 2px #2271b1;
|
|
}
|
|
|
|
.aksrt-pay-meta__group.is-dragging {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.aksrt-pay-meta__notice {
|
|
margin: 16px 18px;
|
|
padding: 12px 14px;
|
|
border-left: 4px solid #ffb900;
|
|
background: #fff8e5;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
@media (max-width: 782px) {
|
|
.aksrt-pay-meta__field {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.aksrt-pay-meta__title {
|
|
padding-top: 0;
|
|
text-align: left;
|
|
}
|
|
|
|
.aksrt-pay-meta__gallery {
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
}
|
|
|
|
.aksrt-pay-meta__group--inline {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.aksrt-pay-meta__group-field--split {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|