From 17dabca568c214f88cba544438a74a529daa3e5a Mon Sep 17 00:00:00 2001 From: unknown Date: Thu, 27 Aug 2026 02:25:34 +0800 Subject: [PATCH] =?UTF-8?q?=E8=BF=9B=E8=A1=8C=E4=BA=86=E4=B8=80=E4=BA=9B?= =?UTF-8?q?=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/css/frontend/cms-download.css | 63 ++++++++-------------------- assets/js/cms-download.js | 22 +++++----- 2 files changed, 29 insertions(+), 56 deletions(-) diff --git a/assets/css/frontend/cms-download.css b/assets/css/frontend/cms-download.css index 728eacf9..ebe413b7 100644 --- a/assets/css/frontend/cms-download.css +++ b/assets/css/frontend/cms-download.css @@ -114,38 +114,10 @@ /* ============================================================ * 主题化下载视图（成功 / 错误 / 扫码共用外壳） + * 色彩一律继承运行时「色彩方案」：InlineStyleBuilder 注入 + * :root 的 --focus-color / --color-primary-*，配置暗色主色时 + * 会自动切换到 html.dark 下的暗色主题色，无需本地另设配色。 * ============================================================ */ -.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; @@ -155,9 +127,9 @@ gap: 10px; padding: 26px 52px 22px; overflow: hidden; - color: var(--dl-text); + color: #fff; text-align: center; - background: linear-gradient(135deg, var(--dl-from), var(--dl-to)); + background: var(--focus-color, #f04494); } /* 装饰光斑（对应 pay-widget 的 orb 语言） */ @@ -263,7 +235,7 @@ display: block; min-width: 0; overflow: hidden; - color: var(--color-primary, #f04494); + color: var(--focus-color, #f04494); font: 800 20px/1.25 var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace); letter-spacing: 0.12em; text-overflow: ellipsis; @@ -286,12 +258,12 @@ flex: 0 0 auto; height: 30px; padding: 0 14px; - color: var(--color-primary, #f04494); + color: var(--focus-color, #f04494); font-family: inherit; font-size: 12px; font-weight: 700; line-height: 1; - background: var(--color-primary-soft, rgba(240, 68, 148, 0.1)); + background: var(--focus-color-opacity1, rgba(240, 68, 148, 0.1)); border: 0; border-radius: 999px; cursor: pointer; @@ -302,7 +274,7 @@ } .aksrt-dl-modal__copy:focus-visible { - outline: 2px solid var(--color-primary, #f04494); + outline: 2px solid var(--focus-color, #f04494); outline-offset: 1px; } @@ -332,7 +304,7 @@ } .aksrt-dl-modal__chip i { - color: var(--color-primary, #f04494); + color: var(--focus-color, #f04494); font-size: 12px; } @@ -353,40 +325,41 @@ width: 100%; min-height: 42px; padding: 0 18px; - color: var(--dl-text, #fff); + color: #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))); + background: var(--focus-color, #f04494); border: 0; border-radius: 10px; cursor: pointer; - transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease; + transition: transform 0.15s ease, background 0.2s ease, box-shadow 0.2s ease; } .aksrt-dl-modal__btn:hover { + background: var(--color-primary-hover, #e0307e); transform: translateY(-1px); - filter: brightness(1.05); } .aksrt-dl-modal__btn:active { + background: var(--color-primary-active, #c9206d); transform: scale(0.98); } .aksrt-dl-modal__btn:focus-visible { - outline: 2px solid var(--color-primary, #f04494); + outline: 2px solid var(--focus-color, #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)); + box-shadow: 0 10px 20px -8px rgba(var(--color-primary-rgb, 240, 68, 148), 0.55); } .aksrt-dl-modal__download:hover { - box-shadow: 0 12px 24px -8px var(--dl-from, var(--color-primary, #f04494)); + box-shadow: 0 12px 24px -8px rgba(var(--color-primary-rgb, 240, 68, 148), 0.65); } /* ============================================================ diff --git a/assets/js/cms-download.js b/assets/js/cms-download.js index 38905e34..83995302 100644 --- a/assets/js/cms-download.js +++ b/assets/js/cms-download.js @@ -138,17 +138,17 @@ } // ===== 统一视图壳（下载 / 错误 / 扫码共用主题化外观） ===== - // variant 决定 hero 渐变配色（对应 CSS 的 .dlv-* 修饰符）。 + // 头部与按钮统一继承运行时主题色（--focus-color），状态用图标 + 标题区分。 const DL_VIEWS = { - success: { variant: 'success', icon: 'fa-cloud-download-alt', title: '下载已就绪' }, - login: { variant: 'info', icon: 'fa-user-lock', title: '请先登录' }, - purchase: { variant: 'brand', icon: 'fa-shopping-cart', title: '请先购买' }, - vip: { variant: 'vip', icon: 'fa-gem', title: '会员专属' }, - credits: { variant: 'warn', icon: 'fa-coins', title: '积分不足' }, - quota: { variant: 'warn', icon: 'fa-hourglass-half', title: '今日免费额度已用完' }, - captcha: { variant: 'error', icon: 'fa-shield-alt', title: '验证失败' }, - error: { variant: 'error', icon: 'fa-exclamation-circle', title: '下载失败' }, - pay: { variant: 'info', icon: 'fa-qrcode', title: '扫码支付' }, + success: { icon: 'fa-cloud-download-alt', title: '下载已就绪' }, + login: { icon: 'fa-user-lock', title: '请先登录' }, + purchase: { icon: 'fa-shopping-cart', title: '请先购买' }, + vip: { icon: 'fa-gem', title: '会员专属' }, + credits: { icon: 'fa-coins', title: '积分不足' }, + quota: { icon: 'fa-hourglass-half', title: '今日免费额度已用完' }, + captcha: { icon: 'fa-shield-alt', title: '验证失败' }, + error: { icon: 'fa-exclamation-circle', title: '下载失败' }, + pay: { icon: 'fa-qrcode', title: '扫码支付' }, }; function dlActionButton(action) { @@ -169,7 +169,7 @@ function dlView(viewKey, options) { const meta = DL_VIEWS[viewKey] || DL_VIEWS.error; options = options || {}; - let html = '
'; + let html = '
'; html += '
'; html += '
'; html += '

' + (options.title || meta.title) + '

';