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

进行了一些优化

Browse Source
This commit is contained in:
kate522
2026-08-27 02:19:41 +08:00
parent 02d456b00b
commit c6e0423e46
2 changed files with 539 additions and 243 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/frontend/cms-download.css
+335 -148
View File
@@ -1,3 +1,13 @@
/**
* AKSRT download / cashier modal.
*
* 下载弹窗走主题 design token（core/tokens.css）；收银台沿用参考实现的
* colorful-header 结构（pay-card 契约测试锁定的类名不可改动）。
*/
/* ============================================================
* 弹窗外壳
* ============================================================ */
.aksrt-dl-modal {
position: fixed;
inset: 0;
@@ -14,13 +24,21 @@
.aksrt-dl-modal__backdrop {
position: absolute;
inset: 0;
background: rgb(0 0 0 / 55%);
background: rgb(15 23 42 / 55%);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
.aksrt-dl-modal__backdrop {
background: rgb(15 23 42 / 38%);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
}
.aksrt-dl-modal__dialog {
position: relative;
z-index: 1;
width: 400px;
width: 420px;
max-width: calc(100% - 20px);
margin: 0 auto;
}
@@ -33,173 +51,347 @@
color: var(--main-color, #111827);
background: var(--main-bg-color, #fff);
border: 0;
border-radius: var(--main-radius, 8px);
box-shadow: 0 24px 56px rgb(15 23 42 / 24%);
border-radius: var(--radius-xl, 12px);
box-shadow: var(--shadow-lg, 0 12px 32px rgba(18, 18, 18, 0.1));
}
.aksrt-dl-modal:not(.is-cashier) .aksrt-dl-modal__panel {
padding: 26px 28px 24px;
.aksrt-dl-modal.is-open .aksrt-dl-modal__dialog {
animation: aksrt-dl-modal-in 0.2s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}
@keyframes aksrt-dl-modal-in {
from {
transform: translateY(10px) scale(0.97);
opacity: 0;
}
to {
transform: translateY(0) scale(1);
opacity: 1;
}
}
/* 关闭按钮：下载视图中悬浮在渐变头部上 */
.aksrt-dl-modal__close,
.aksrt-cashier__close {
appearance: none;
position: absolute;
z-index: 9;
top: 10px;
right: 12px;
top: 12px;
right: 14px;
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
padding: 0;
color: var(--muted-color, #6b7280);
font: 400 24px/1 sans-serif;
font: 400 20px/1 sans-serif;
background: transparent;
border: 0;
border-radius: 50%;
box-shadow: none;
cursor: pointer;
}
.aksrt-dl-modal:not(.is-cashier) .aksrt-dl-modal__close {
color: #fff;
background: rgb(255 255 255 / 22%);
}
.aksrt-dl-modal:not(.is-cashier) .aksrt-dl-modal__close:hover {
background: rgb(255 255 255 / 34%);
}
.aksrt-dl-modal:not(.is-cashier) .aksrt-dl-modal__close:focus-visible {
outline: 2px solid rgb(255 255 255 / 70%);
outline-offset: 1px;
}
.aksrt-dl-modal.is-cashier > .aksrt-dl-modal__dialog > .aksrt-dl-modal__panel > .aksrt-dl-modal__close {
display: none;
}
/* ============================================================
* 主题化下载视图（成功 / 错误 / 扫码共用外壳）
* ============================================================ */
.aksrt-dl-view {
/* 配色变量：按 dlv-* 修饰符整体换肤，按钮与阴影自动跟随 */
--dl-from: var(--color-primary, #f04494);
--dl-to: var(--color-accent, #18a058);
--dl-text: #fff;
}
.aksrt-dl-view.dlv-brand {
--dl-to: var(--aksrt-purple, #8b5cf6);
}
.aksrt-dl-view.dlv-info {
--dl-from: var(--aksrt-blue, #3b82f6);
--dl-to: var(--aksrt-cyan, #06b6d4);
}
.aksrt-dl-view.dlv-warn {
--dl-from: var(--color-warning, #f59e0b);
--dl-to: var(--aksrt-orange, #f97316);
}
.aksrt-dl-view.dlv-error {
--dl-from: var(--color-error, #ef4444);
--dl-to: #dc2626;
}
.aksrt-dl-view.dlv-vip {
--dl-from: var(--aksrt-vip-gold-2, #fda085);
--dl-to: var(--aksrt-vip-gold-1, #f6d365);
--dl-text: #6b4a12;
}
.aksrt-dl-modal__hero {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
padding: 26px 52px 22px;
overflow: hidden;
color: var(--dl-text);
text-align: center;
background: linear-gradient(135deg, var(--dl-from), var(--dl-to));
}
/* 装饰光斑（对应 pay-widget 的 orb 语言） */
.aksrt-dl-modal__hero::before,
.aksrt-dl-modal__hero::after {
position: absolute;
border-radius: 100%;
background: rgb(255 255 255 / 14%);
content: '';
}
.aksrt-dl-modal__hero::before {
top: -46px;
right: -34px;
width: 150px;
height: 150px;
}
.aksrt-dl-modal__hero::after {
bottom: -60px;
left: -40px;
width: 130px;
height: 130px;
opacity: 0.55;
}
.aksrt-dl-modal__hero-icon {
display: flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
font-size: 25px;
background: rgb(255 255 255 / 22%);
border-radius: 50%;
box-shadow: inset 0 0 0 1px rgb(255 255 255 / 25%);
}
.aksrt-dl-modal__title {
margin: 0 28px 18px 0;
color: var(--main-color, #111827);
font: 700 20px/1.3 inherit;
margin: 0;
color: inherit;
font: 800 20px/1.3 inherit;
}
.aksrt-dl-modal__subtitle {
margin: -2px 0 0;
font-size: 12.5px;
line-height: 1.55;
opacity: 0.82;
}
.aksrt-dl-modal__content {
padding: 18px 22px 22px;
}
.aksrt-dl-modal__msg {
margin: 0 0 18px;
color: var(--muted-color, #4b5563);
margin: 0 0 14px;
color: var(--muted-color, #777);
font-size: 14px;
line-height: 1.65;
}
.aksrt-dl-modal__msg--warn {
padding: 12px 0;
color: #92400e;
background: transparent;
border: 0;
border-top: 1px solid #fde68a;
border-bottom: 1px solid #fde68a;
}
.aksrt-dl-modal__row {
display: grid;
grid-template-columns: 64px minmax(0, 1fr) 72px;
gap: 12px;
align-items: center;
padding: 12px 0;
margin: 0 0 18px;
border-top: 1px solid var(--main-border-color, #e5e7eb);
border-bottom: 1px solid var(--main-border-color, #e5e7eb);
}
.aksrt-dl-modal__label {
color: var(--muted-color, #6b7280);
.aksrt-dl-modal__alert {
margin: 0 0 14px;
padding: 11px 13px;
font-size: 13px;
font-weight: 600;
white-space: nowrap;
line-height: 1.6;
border-radius: var(--radius, 8px);
}
.aksrt-dl-modal__alert--warn {
color: var(--color-warning-text, #ad6800);
background: var(--color-warning-bg, #fffbe6);
border: 1px solid #fde68a;
}
/* 提取码卡片 */
.aksrt-dl-modal__code-card {
padding: 13px 15px;
margin: 0 0 14px;
background: var(--surface-2, rgba(0, 0, 0, 0.04));
border: 1px dashed var(--color-line-stronger, rgba(50, 50, 50, 0.12));
border-radius: 10px;
}
.aksrt-dl-modal__code-caption {
margin-bottom: 7px;
color: var(--muted-color, #777);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
}
.aksrt-dl-modal__code-row {
display: flex;
gap: 10px;
align-items: center;
justify-content: space-between;
min-width: 0;
}
.aksrt-dl-modal__code {
display: block;
min-width: 0;
overflow: hidden;
color: var(--main-color, #111827);
font: 800 18px/1.25 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
letter-spacing: 0.06em;
color: var(--color-primary, #f04494);
font: 800 20px/1.25 var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
letter-spacing: 0.12em;
text-overflow: ellipsis;
white-space: nowrap;
}
.aksrt-dl-modal__code--wrap {
font-size: 14px;
font-weight: 500;
letter-spacing: 0.02em;
word-break: break-all;
white-space: normal;
}
.aksrt-dl-modal__copy {
appearance: none !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 72px !important;
height: 32px !important;
padding: 0 !important;
overflow: visible !important;
color: #2563eb !important;
font-family: inherit !important;
font-size: 0 !important;
font-weight: 700 !important;
line-height: 1 !important;
text-indent: 0 !important;
white-space: nowrap !important;
cursor: pointer !important;
visibility: visible !important;
background: #eff6ff !important;
border: 1px solid #bfdbfe !important;
border-radius: 8px !important;
opacity: 1 !important;
-webkit-text-fill-color: #2563eb !important;
}
.aksrt-dl-modal__copy::before,
.aksrt-dl-modal__copy::after {
display: none !important;
content: none !important;
}
.aksrt-dl-modal__copy:hover {
color: #1d4ed8 !important;
background: #dbeafe !important;
border-color: #93c5fd !important;
-webkit-text-fill-color: #1d4ed8 !important;
}
.aksrt-dl-modal__copy-text {
position: relative !important;
z-index: 2 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
color: #2563eb !important;
font-family: inherit !important;
font-size: 13px !important;
font-weight: 700 !important;
line-height: 1 !important;
text-indent: 0 !important;
white-space: nowrap !important;
visibility: visible !important;
opacity: 1 !important;
-webkit-text-fill-color: #2563eb !important;
}
.aksrt-dl-modal__copy:hover .aksrt-dl-modal__copy-text {
color: #1d4ed8 !important;
-webkit-text-fill-color: #1d4ed8 !important;
}
.aksrt-dl-modal__actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
padding-top: 4px;
}
.aksrt-dl-modal__download {
appearance: none;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 40px;
padding: 0 18px;
text-decoration: none;
cursor: pointer;
flex: 0 0 auto;
height: 30px;
padding: 0 14px;
color: var(--color-primary, #f04494);
font-family: inherit;
font-size: 12px;
font-weight: 700;
line-height: 1;
background: var(--color-primary-soft, rgba(240, 68, 148, 0.1));
border: 0;
border-radius: 9px;
border-radius: 999px;
cursor: pointer;
}
.aksrt-dl-modal__balance {
margin-left: auto;
color: var(--muted-color, #6b7280);
font-size: 13px;
white-space: nowrap;
.aksrt-dl-modal__copy:hover {
background: var(--focus-color-opacity3, rgba(240, 68, 148, 0.3));
}
.aksrt-dl-modal__copy:focus-visible {
outline: 2px solid var(--color-primary, #f04494);
outline-offset: 1px;
}
.aksrt-dl-modal__copy.is-done {
color: var(--color-success, #10b981);
background: var(--aksrt-green-soft, rgba(16, 185, 129, 0.12));
}
/* 信息 chips 行 */
.aksrt-dl-modal__meta {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0 0 16px;
}
.aksrt-dl-modal__chip {
display: inline-flex;
gap: 6px;
align-items: center;
padding: 5px 11px;
color: var(--muted-color, #777);
font-size: 12px;
font-weight: 600;
background: var(--surface-2, rgba(0, 0, 0, 0.04));
border-radius: 999px;
}
.aksrt-dl-modal__chip i {
color: var(--color-primary, #f04494);
font-size: 12px;
}
/* 操作按钮 */
.aksrt-dl-modal__actions {
display: flex;
flex-direction: column;
gap: 10px;
}
.aksrt-dl-modal__btn {
appearance: none;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
box-sizing: border-box;
width: 100%;
min-height: 42px;
padding: 0 18px;
color: var(--dl-text, #fff);
font-family: inherit;
font-size: 14px;
font-weight: 700;
text-decoration: none;
background: linear-gradient(135deg, var(--dl-from, var(--color-primary, #f04494)), var(--dl-to, var(--color-accent, #18a058)));
border: 0;
border-radius: 10px;
cursor: pointer;
transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.aksrt-dl-modal__btn:hover {
transform: translateY(-1px);
filter: brightness(1.05);
}
.aksrt-dl-modal__btn:active {
transform: scale(0.98);
}
.aksrt-dl-modal__btn:focus-visible {
outline: 2px solid var(--color-primary, #f04494);
outline-offset: 2px;
}
.aksrt-dl-modal__download {
min-height: 48px;
font-size: 15px;
box-shadow: 0 10px 20px -8px var(--dl-from, var(--color-primary, #f04494));
}
.aksrt-dl-modal__download:hover {
box-shadow: 0 12px 24px -8px var(--dl-from, var(--color-primary, #f04494));
}
/* ============================================================
* 收银台（参考实现契约结构）
* ============================================================ */
.aksrt-dl-modal.is-cashier .aksrt-dl-modal__body {
position: relative;
min-height: 120px;
@@ -224,7 +416,7 @@
align-items: center;
justify-content: center;
height: 120px;
border-radius: var(--main-radius, 8px) var(--main-radius, 8px) 0 0;
border-radius: var(--radius-xl, 12px) var(--radius-xl, 12px) 0 0;
}
.aksrt-dl-modal .colorful-bg > .colorful-make,
@@ -287,6 +479,7 @@
text-align: center;
}
/* 收银台内部使用的工具类作用域 */
.aksrt-dl-modal .text-center {
text-align: center;
}
@@ -421,7 +614,7 @@
.aksrt-dl-modal .muted-box {
padding: 10px;
background: var(--muted-border-color, rgb(132 145 165 / 10%));
border-radius: 4px;
border-radius: var(--radius-sm, 4px);
}
.aksrt-dl-modal .pay-tag {
@@ -431,7 +624,7 @@
font-size: 12px;
line-height: 1.4;
background: rgb(41 151 247 / 10%);
border-radius: 4px;
border-radius: var(--radius-sm, 4px);
}
.aksrt-cashier__price-row {
@@ -477,7 +670,7 @@
line-height: 16px;
vertical-align: 1px;
background: linear-gradient(25deg, #eabe7b 10%, #f5e3c7 70%, #edc788 100%);
border-radius: 4px;
border-radius: var(--radius-sm, 4px);
}
.aksrt-cashier__asset-icon {
@@ -492,7 +685,7 @@
padding: 5px;
text-align: center;
border: 1px solid var(--main-border-color, rgb(132 145 165 / 20%));
border-radius: 4px;
border-radius: var(--radius-sm, 4px);
}
.aksrt-dl-modal .payment-method-radio > * {
@@ -534,7 +727,7 @@
font: inherit;
background: var(--main-bg-color, #fff);
border: 1px solid var(--main-border-color, #e5e7eb);
border-radius: 4px;
border-radius: var(--radius-sm, 4px);
}
.aksrt-dl-modal .relative {
@@ -570,7 +763,7 @@
line-height: 1.5;
text-align: center;
background: rgb(255 84 115 / 10%);
border-radius: 4px;
border-radius: var(--radius-sm, 4px);
}
.aksrt-dl-modal .but.initiate-pay {
@@ -600,6 +793,9 @@
text-decoration: none;
}
/* ============================================================
* 页面内已购信息块（下载区，随本文件一起加载）
* ============================================================ */
.resource-download-box__attrs {
display: grid;
gap: 6px;
@@ -665,38 +861,29 @@ body.aksrt-dl-modal-open {
}
@media (max-width: 480px) {
.aksrt-dl-modal:not(.is-cashier) .aksrt-dl-modal__panel {
padding: 24px 20px 22px;
.aksrt-dl-modal__hero {
padding: 24px 44px 20px;
}
.aksrt-dl-modal__row {
grid-template-columns: 1fr 72px;
gap: 8px 12px;
}
.aksrt-dl-modal__label {
grid-column: 1 / -1;
.aksrt-dl-modal__content {
padding: 16px 16px 18px;
}
.aksrt-dl-modal__code {
font-size: 17px;
font-size: 18px;
}
.aksrt-dl-modal__actions {
flex-direction: column;
align-items: flex-start;
}
.aksrt-dl-modal__download {
width: 100%;
}
.aksrt-dl-modal__balance {
margin-left: 0;
.aksrt-dl-modal__chip {
padding: 4px 10px;
font-size: 11.5px;
}
}
@media (prefers-reduced-motion: reduce) {
.aksrt-dl-modal.is-open .aksrt-dl-modal__dialog {
animation: none;
}
.aksrt-dl-modal .colorful-bg > .colorful-make {
animation: none;
}