style(ui): 全站 Memphis 换肤为玻璃拟态+极光渐变
设计 token 与中央类名保持不变,重写视觉:磨砂玻璃卡片、 紫→青渐变按钮、柔光阴影、发丝边框;emoji 图标换 SVG; 登录/支付/公告弹窗改为随主题的玻璃卡片。 Generated with [Devin](https://devin.ai) Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
This commit is contained in:
Devin
@@ -13,22 +13,24 @@ const html = computed(() => marked.parse(announcement.content.trim() || '暂无
|
||||
<div v-if="announcement.show"
|
||||
class="fixed inset-0 z-[80] bg-slate-950/70 backdrop-blur-sm flex items-center justify-center p-4"
|
||||
@click.self="dismissAnnouncement">
|
||||
<div class="w-full max-w-lg rounded-xl bg-white text-slate-800 border-[3px] border-[#111] shadow-[8px_8px_0_#111] overflow-hidden flex flex-col max-h-[80vh]">
|
||||
<div class="px-6 py-4 border-b-[2.5px] border-b-[#111] flex items-center justify-between gap-3 shrink-0">
|
||||
<div class="w-full max-w-lg rounded-2xl bg-[var(--menu-bg)] backdrop-blur-xl text-[color:var(--fg)] border border-[color:var(--glass-border)] shadow-[var(--glass-shadow-lg)] overflow-hidden flex flex-col max-h-[80vh]">
|
||||
<div class="px-6 py-4 border-b border-b-[color:var(--ink-soft)] flex items-center justify-between gap-3 shrink-0">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="w-7 h-7 rounded-lg bg-[#fef08a] text-[#111] border-2 border-[#111] grid place-items-center">
|
||||
<span class="w-7 h-7 rounded-lg text-white grid place-items-center"
|
||||
style="background: linear-gradient(135deg, #7c5cfc, #22d3ee); box-shadow: 0 4px 12px var(--accent-glow)">
|
||||
<Icon name="spark" class="w-4 h-4" />
|
||||
</span>
|
||||
<h2 class="text-base font-extrabold">公告</h2>
|
||||
</div>
|
||||
<button @click="dismissAnnouncement" class="text-slate-400 hover:text-slate-700 transition-colors">
|
||||
<button @click="dismissAnnouncement" class="text-[color:var(--fg-3)] hover:text-[color:var(--fg)] transition-colors">
|
||||
<Icon name="close" class="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="ann-body px-6 py-5 overflow-y-auto" v-html="html"></div>
|
||||
<div class="px-6 py-4 border-t-[2.5px] border-t-[#111] flex justify-end shrink-0">
|
||||
<div class="px-6 py-4 border-t border-t-[color:var(--ink-soft)] flex justify-end shrink-0">
|
||||
<button @click="dismissAnnouncement"
|
||||
class="rounded-lg bg-[#ec5b13] text-white border-[2.5px] border-[#111] shadow-[3px_3px_0_#111] hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-[4px_4px_0_#111] active:translate-y-0.5 active:shadow-none px-5 py-2 text-sm font-extrabold transition-all">
|
||||
class="rounded-lg text-white border border-white/20 px-5 py-2 text-sm font-extrabold hover:-translate-y-0.5 active:translate-y-0.5 transition-all"
|
||||
style="background: linear-gradient(120deg, #7c5cfc, #22d3ee); box-shadow: 0 8px 20px var(--accent-glow)">
|
||||
我知道了
|
||||
</button>
|
||||
</div>
|
||||
@@ -42,21 +44,21 @@ const html = computed(() => marked.parse(announcement.content.trim() || '暂无
|
||||
.ann-fade-enter-from, .ann-fade-leave-to { opacity: 0; }
|
||||
|
||||
/* Minimal markdown typography for the announcement body. */
|
||||
.ann-body { font-size: 0.9rem; line-height: 1.65; color: rgb(51 65 85); }
|
||||
.ann-body :deep(h1) { font-size: 1.25rem; font-weight: 700; margin: 0.6em 0 0.4em; color: rgb(15 23 42); }
|
||||
.ann-body :deep(h2) { font-size: 1.1rem; font-weight: 700; margin: 0.6em 0 0.4em; color: rgb(15 23 42); }
|
||||
.ann-body :deep(h3) { font-size: 1rem; font-weight: 600; margin: 0.6em 0 0.3em; color: rgb(15 23 42); }
|
||||
.ann-body { font-size: 0.9rem; line-height: 1.65; color: var(--fg-2); }
|
||||
.ann-body :deep(h1) { font-size: 1.25rem; font-weight: 700; margin: 0.6em 0 0.4em; color: var(--fg); }
|
||||
.ann-body :deep(h2) { font-size: 1.1rem; font-weight: 700; margin: 0.6em 0 0.4em; color: var(--fg); }
|
||||
.ann-body :deep(h3) { font-size: 1rem; font-weight: 600; margin: 0.6em 0 0.3em; color: var(--fg); }
|
||||
.ann-body :deep(p) { margin: 0.5em 0; }
|
||||
.ann-body :deep(ul), .ann-body :deep(ol) { margin: 0.5em 0; padding-left: 1.4em; }
|
||||
.ann-body :deep(ul) { list-style: disc; }
|
||||
.ann-body :deep(ol) { list-style: decimal; }
|
||||
.ann-body :deep(li) { margin: 0.2em 0; }
|
||||
.ann-body :deep(a) { color: var(--m-orange); text-decoration: underline; }
|
||||
.ann-body :deep(strong) { font-weight: 700; color: rgb(15 23 42); }
|
||||
.ann-body :deep(code) { background: rgb(254 240 138 / 0.5); padding: 0.1em 0.35em; border-radius: 0.3rem; font-size: 0.85em; }
|
||||
.ann-body :deep(strong) { font-weight: 700; color: var(--fg); }
|
||||
.ann-body :deep(code) { background: rgb(124 92 252 / 0.12); padding: 0.1em 0.35em; border-radius: 0.3rem; font-size: 0.85em; }
|
||||
.ann-body :deep(pre) { background: #111; color: #f5f5f5; padding: 0.8em; border-radius: 0.5rem; overflow-x: auto; margin: 0.6em 0; }
|
||||
.ann-body :deep(pre code) { background: none; padding: 0; }
|
||||
.ann-body :deep(blockquote) { border-left: 3px solid var(--m-orange); padding-left: 0.9em; color: rgb(100 116 139); margin: 0.6em 0; }
|
||||
.ann-body :deep(hr) { border: none; border-top: 1px solid rgb(226 232 240); margin: 1em 0; }
|
||||
.ann-body :deep(blockquote) { border-left: 3px solid var(--m-orange); padding-left: 0.9em; color: var(--fg-3); margin: 0.6em 0; }
|
||||
.ann-body :deep(hr) { border: none; border-top: 1px solid var(--hairline); margin: 1em 0; }
|
||||
.ann-body :deep(img) { max-width: 100%; border-radius: 0.5rem; margin: 0.5em 0; }
|
||||
</style>
|
||||
|
||||
@@ -164,9 +164,9 @@ async function submit() {
|
||||
<div class="absolute inset-0 bg-black/70 backdrop-blur-md" @click="closeLogin"></div>
|
||||
|
||||
<div class="card relative z-10 w-full max-w-[26rem]">
|
||||
<!-- ambient memphis crayon washes -->
|
||||
<div class="pointer-events-none absolute -top-24 -right-16 h-56 w-56 rounded-full bg-[#fef08a]/60 blur-3xl"></div>
|
||||
<div class="pointer-events-none absolute -bottom-24 -left-16 h-56 w-56 rounded-full bg-[#ffc1cc]/50 blur-3xl"></div>
|
||||
<!-- ambient aurora washes -->
|
||||
<div class="pointer-events-none absolute -top-24 -right-16 h-56 w-56 rounded-full bg-[#8b5cf6]/30 blur-3xl"></div>
|
||||
<div class="pointer-events-none absolute -bottom-24 -left-16 h-56 w-56 rounded-full bg-[#22d3ee]/25 blur-3xl"></div>
|
||||
|
||||
<div class="relative p-7">
|
||||
<button class="absolute top-4 right-4 grid h-7 w-7 place-items-center rounded-lg text-[color:var(--fg-3)] hover:text-[color:var(--fg)] hover:bg-[var(--hover)] transition-colors"
|
||||
@@ -262,21 +262,22 @@ async function submit() {
|
||||
|
||||
<style scoped>
|
||||
.card {
|
||||
border-radius: 1.1rem;
|
||||
background: var(--surface);
|
||||
border-radius: 1.2rem;
|
||||
background: var(--menu-bg);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
backdrop-filter: blur(20px);
|
||||
color: var(--fg);
|
||||
border: 3px solid var(--ink);
|
||||
box-shadow: 10px 10px 0 var(--shadow-ink);
|
||||
border: 1px solid var(--glass-border);
|
||||
box-shadow: var(--glass-shadow-lg);
|
||||
overflow: hidden;
|
||||
}
|
||||
html.dark .card {
|
||||
background: #1c1d24;
|
||||
color: rgb(255 255 255 / 0.9);
|
||||
}
|
||||
|
||||
.logo-halo {
|
||||
position: relative;
|
||||
filter: drop-shadow(0 6px 0 rgb(236 91 19 / 0.35));
|
||||
filter: drop-shadow(0 6px 14px rgb(124 92 252 / 0.4));
|
||||
}
|
||||
|
||||
/* segmented tab control */
|
||||
@@ -284,22 +285,21 @@ html.dark .card {
|
||||
display: flex; gap: 0.3rem; padding: 0.3rem;
|
||||
border-radius: 0.7rem;
|
||||
background: var(--surface-2);
|
||||
border: 2px solid var(--ink);
|
||||
border: 1px solid var(--ink-soft);
|
||||
}
|
||||
.tab {
|
||||
flex: 1; padding: 0.45rem 0; border-radius: 0.5rem;
|
||||
font-size: 0.8125rem; font-weight: 700; color: var(--fg-3);
|
||||
border: 2px solid transparent;
|
||||
border: 1px solid transparent;
|
||||
transition: background 0.18s, color 0.18s, box-shadow 0.18s, border-color 0.18s;
|
||||
}
|
||||
.tab:hover { color: var(--fg); }
|
||||
.tab-on {
|
||||
color: #111;
|
||||
background: var(--m-yellow);
|
||||
border-color: var(--ink);
|
||||
box-shadow: 2px 2px 0 var(--shadow-ink);
|
||||
color: #fff;
|
||||
background: linear-gradient(120deg, #7c5cfc, #5f6cf8);
|
||||
border-color: transparent;
|
||||
box-shadow: 0 4px 14px var(--accent-glow);
|
||||
}
|
||||
html.dark .tab-on { color: #fff; background: var(--m-orange); }
|
||||
|
||||
/* icon-prefixed input */
|
||||
.lm-field { position: relative; }
|
||||
@@ -311,14 +311,14 @@ html.dark .tab-on { color: #fff; background: var(--m-orange); }
|
||||
.lm-field:focus-within .ic { color: var(--m-orange); }
|
||||
.fld {
|
||||
width: 100%; padding: 0.7rem 0.85rem 0.7rem 2.4rem; border-radius: 0.6rem;
|
||||
background: var(--surface); border: 2px solid var(--ink-soft);
|
||||
background: var(--surface); border: 1px solid var(--ink-soft);
|
||||
color: var(--fg); font-size: 0.875rem; outline: none;
|
||||
transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
|
||||
}
|
||||
html.dark .fld { background: rgb(255 255 255 / 0.05); }
|
||||
.fld:focus {
|
||||
border-color: var(--ink);
|
||||
box-shadow: 3px 3px 0 var(--m-orange);
|
||||
border-color: rgb(124 92 252 / 0.65);
|
||||
box-shadow: 0 0 0 3px rgb(124 92 252 / 0.18);
|
||||
}
|
||||
.fld::placeholder { color: var(--fg-faint); }
|
||||
/* Keep autofill on-theme in dark (otherwise it paints white/yellow). */
|
||||
@@ -344,13 +344,12 @@ html.dark .fld:-webkit-autofill:focus {
|
||||
min-width: 5.5rem; /* keep width stable between text / spinner */
|
||||
display: inline-flex; align-items: center; justify-content: center;
|
||||
font-size: 0.75rem; font-weight: 800; white-space: nowrap;
|
||||
color: #111;
|
||||
background: var(--m-yellow); border: 2px solid var(--ink);
|
||||
box-shadow: 2px 2px 0 var(--shadow-ink);
|
||||
color: var(--fg);
|
||||
background: var(--hover); border: 1px solid rgb(124 92 252 / 0.4);
|
||||
box-shadow: 0 2px 10px rgb(124 92 252 / 0.14);
|
||||
transition: background 0.15s, box-shadow 0.15s, transform 0.15s, opacity 0.15s;
|
||||
}
|
||||
html.dark .code-btn { color: #111; }
|
||||
.code-btn:hover:not(:disabled) { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--shadow-ink); }
|
||||
.code-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 4px 14px rgb(124 92 252 / 0.22); }
|
||||
.code-btn:active:not(:disabled) { transform: scale(0.96) translateY(1px); box-shadow: none; }
|
||||
/* Disabled (sending / countdown): just dim — keep the theme text color so it
|
||||
never washes out to invisible white on the light card. */
|
||||
@@ -362,13 +361,13 @@ html.dark .code-btn { color: #111; }
|
||||
display: flex; align-items: center; justify-content: center; gap: 0.5rem;
|
||||
padding: 0.72rem 0; border-radius: 0.65rem; font-size: 0.9rem; font-weight: 800;
|
||||
letter-spacing: 0.02em; color: white; margin-top: 0.35rem;
|
||||
background: var(--m-orange);
|
||||
border: 2.5px solid var(--ink);
|
||||
box-shadow: 4px 4px 0 var(--shadow-ink);
|
||||
background: linear-gradient(120deg, #7c5cfc, #5f6cf8 55%, #22d3ee 140%);
|
||||
border: 1px solid rgb(255 255 255 / 0.16);
|
||||
box-shadow: 0 8px 22px var(--accent-glow);
|
||||
transition: transform 0.13s, box-shadow 0.13s, filter 0.15s;
|
||||
}
|
||||
.btn-primary:hover:not(:disabled) { filter: brightness(1.06); transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--shadow-ink); }
|
||||
.btn-primary:active:not(:disabled) { transform: scale(0.98) translateY(2px); box-shadow: 0 0 0 var(--shadow-ink); }
|
||||
.btn-primary:hover:not(:disabled) { filter: brightness(1.07); transform: translateY(-1px); box-shadow: 0 12px 30px var(--accent-glow); }
|
||||
.btn-primary:active:not(:disabled) { transform: scale(0.98) translateY(1px); box-shadow: 0 4px 12px var(--accent-glow); }
|
||||
.btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }
|
||||
|
||||
.spinner {
|
||||
@@ -382,7 +381,7 @@ html.dark .code-btn { color: #111; }
|
||||
display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.85rem;
|
||||
padding: 0.6rem 0.75rem; border-radius: 0.6rem; font-size: 0.75rem; line-height: 1.4;
|
||||
color: #065f46; font-weight: 600;
|
||||
background: var(--m-mint); border: 2px solid var(--ink);
|
||||
background: rgb(52 211 153 / 0.14); border: 1px solid rgb(52 211 153 / 0.4);
|
||||
}
|
||||
html.dark .invite-banner { color: rgb(167 243 208); background: rgb(16 185 129 / 0.15); }
|
||||
.invite-banner svg { color: rgb(5 150 105); }
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
// Vivid mark: an open spectrum ring (lens/aperture) around a play triangle,
|
||||
// with a shutter dot closing the gap — image + video in one glyph.
|
||||
// Transparent background so it reads on both the dark and light shells.
|
||||
// Colors follow the memphis crayon palette (orange / pink / blue).
|
||||
// Colors follow the aurora palette (violet / pink / cyan).
|
||||
// Each instance gets unique gradient ids (useId) so multiple logos on one
|
||||
// page don't share/clobber defs.
|
||||
import { useId } from 'vue'
|
||||
@@ -18,9 +18,9 @@ const gRing = `vring-${uid}`
|
||||
xmlns="http://www.w3.org/2000/svg" class="shrink-0">
|
||||
<defs>
|
||||
<linearGradient :id="gRing" x1="6" y1="6" x2="42" y2="42" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#ec5b13" />
|
||||
<stop offset="0.5" stop-color="#f472b6" />
|
||||
<stop offset="1" stop-color="#38bdf8" />
|
||||
<stop stop-color="#7c5cfc" />
|
||||
<stop offset="0.5" stop-color="#e879f9" />
|
||||
<stop offset="1" stop-color="#22d3ee" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
@@ -29,10 +29,10 @@ const gRing = `vring-${uid}`
|
||||
<circle r="17.5" fill="none" :stroke="`url(#${gRing})`" stroke-width="4.4"
|
||||
stroke-linecap="round" stroke-dasharray="84 32" transform="rotate(-58)" />
|
||||
<!-- play triangle = image + video -->
|
||||
<path d="M-3 -6.5 L8.5 0 L-3 6.5 Z" fill="#ec5b13" stroke="#111" stroke-width="1.4"
|
||||
<path d="M-3 -6.5 L8.5 0 L-3 6.5 Z" fill="#7c5cfc" stroke="#111" stroke-width="1.4"
|
||||
stroke-linejoin="round" />
|
||||
<!-- shutter dot -->
|
||||
<circle cx="13" cy="-13" r="4.2" fill="#fef08a" stroke="#111" stroke-width="1.6" />
|
||||
<circle cx="13" cy="-13" r="4.2" fill="#22d3ee" stroke="#111" stroke-width="1.6" />
|
||||
</g>
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
@@ -103,31 +103,33 @@ onUnmounted(clearTimers)
|
||||
<transition name="pay-fade">
|
||||
<div v-if="payment.show" class="fixed inset-0 z-[85] bg-slate-950/70 backdrop-blur-sm flex items-center justify-center p-4"
|
||||
@click.self="!paid && finish()">
|
||||
<div class="w-full max-w-sm rounded-xl bg-white text-slate-800 border-[3px] border-[#111] shadow-[8px_8px_0_#111] overflow-hidden">
|
||||
<div class="px-5 py-4 border-b-[2.5px] border-b-[#111] flex items-center justify-between">
|
||||
<div class="w-full max-w-sm rounded-2xl bg-[var(--menu-bg)] backdrop-blur-xl text-[color:var(--fg)] border border-[color:var(--glass-border)] shadow-[var(--glass-shadow-lg)] overflow-hidden">
|
||||
<div class="px-5 py-4 border-b border-b-[color:var(--ink-soft)] flex items-center justify-between">
|
||||
<h2 class="text-base font-semibold">{{ paid ? '支付成功' : dead ? '支付超时' : (isJump ? '支付监控中' : '扫码支付') }}</h2>
|
||||
<button v-if="!paid" @click="finish" class="text-slate-400 hover:text-slate-700"><Icon name="close" class="w-5 h-5" /></button>
|
||||
<button v-if="!paid" @click="finish" class="text-[color:var(--fg-3)] hover:text-[color:var(--fg)] transition-colors"><Icon name="close" class="w-5 h-5" /></button>
|
||||
</div>
|
||||
|
||||
<!-- paid -->
|
||||
<div v-if="paid" class="px-6 py-10 text-center">
|
||||
<div class="w-16 h-16 mx-auto rounded-full bg-[#a7f3d0] text-emerald-700 border-[2.5px] border-[#111] shadow-[4px_4px_0_#111] grid place-items-center mb-4">
|
||||
<div class="w-16 h-16 mx-auto rounded-full text-white grid place-items-center mb-4"
|
||||
style="background: linear-gradient(135deg, #34d399, #2dd4bf); box-shadow: 0 10px 28px rgb(52 211 153 / 0.4)">
|
||||
<Icon name="spark" class="w-8 h-8" />
|
||||
</div>
|
||||
<p class="text-lg font-semibold text-slate-800">充值成功</p>
|
||||
<p class="text-sm text-slate-500 mt-1">已到账 <strong class="text-emerald-600">{{ order.points }}</strong> 积分</p>
|
||||
<p class="text-xs text-slate-400 mt-4">{{ closeIn }} 秒后自动关闭</p>
|
||||
<p class="text-lg font-semibold text-[color:var(--fg)]">充值成功</p>
|
||||
<p class="text-sm text-[color:var(--fg-3)] mt-1">已到账 <strong class="text-emerald-500">{{ order.points }}</strong> 积分</p>
|
||||
<p class="text-xs text-[color:var(--fg-faint)] mt-4">{{ closeIn }} 秒后自动关闭</p>
|
||||
</div>
|
||||
|
||||
<!-- expired / cancelled -->
|
||||
<div v-else-if="dead" class="px-6 py-10 text-center">
|
||||
<div class="w-16 h-16 mx-auto rounded-full bg-slate-100 text-slate-400 grid place-items-center mb-4">
|
||||
<div class="w-16 h-16 mx-auto rounded-full bg-[var(--surface-2)] text-[color:var(--fg-3)] grid place-items-center mb-4">
|
||||
<Icon name="close" class="w-8 h-8" />
|
||||
</div>
|
||||
<p class="text-lg font-semibold text-slate-700">支付超时</p>
|
||||
<p class="text-sm text-slate-500 mt-1">二维码已失效,订单已取消</p>
|
||||
<p class="text-xs text-slate-400 mt-1">如需充值请重新下单</p>
|
||||
<button @click="finish" class="mt-5 rounded-lg bg-[#ec5b13] text-white border-[2.5px] border-[#111] shadow-[3px_3px_0_#111] hover:-translate-y-0.5 active:translate-y-0.5 active:shadow-none px-5 py-2 text-sm font-extrabold transition-all">关闭</button>
|
||||
<p class="text-lg font-semibold text-[color:var(--fg)]">支付超时</p>
|
||||
<p class="text-sm text-[color:var(--fg-3)] mt-1">二维码已失效,订单已取消</p>
|
||||
<p class="text-xs text-[color:var(--fg-faint)] mt-1">如需充值请重新下单</p>
|
||||
<button @click="finish" class="mt-5 rounded-lg text-white border border-white/20 px-5 py-2 text-sm font-extrabold hover:-translate-y-0.5 active:translate-y-0.5 transition-all"
|
||||
style="background: linear-gradient(120deg, #7c5cfc, #22d3ee); box-shadow: 0 8px 20px var(--accent-glow)">关闭</button>
|
||||
</div>
|
||||
|
||||
<!-- pending -->
|
||||
@@ -135,31 +137,31 @@ onUnmounted(clearTimers)
|
||||
<!-- qrcode: scan to pay -->
|
||||
<template v-if="!isJump">
|
||||
<div class="flex justify-center mb-3">
|
||||
<div class="w-[228px] h-[228px] rounded-xl border-[2.5px] border-[#111] shadow-[4px_4px_0_#111] grid place-items-center overflow-hidden bg-white p-3.5">
|
||||
<div class="w-[228px] h-[228px] rounded-xl border border-[color:var(--glass-border)] shadow-[var(--glass-shadow)] grid place-items-center overflow-hidden bg-white p-3.5">
|
||||
<img v-if="qrUrl" :src="qrUrl" alt="支付二维码" class="w-full h-full rounded-lg" />
|
||||
<span v-else class="text-xs text-slate-400">二维码生成中…</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-center text-xs text-slate-500 mb-4">请使用<strong class="text-slate-700">{{ methodLabel }}</strong>扫码支付</p>
|
||||
<p class="text-center text-xs text-[color:var(--fg-3)] mb-4">请使用<strong class="text-[color:var(--fg)]">{{ methodLabel }}</strong>扫码支付</p>
|
||||
</template>
|
||||
<!-- jump (no qrcode): the cashier opened in a new tab — just monitor -->
|
||||
<template v-else>
|
||||
<div class="flex flex-col items-center justify-center py-7 mb-2">
|
||||
<div class="w-12 h-12 rounded-full border-[3px] border-[#fecaca] border-t-[#ec5b13] animate-spin mb-3"></div>
|
||||
<p class="text-sm font-medium text-slate-700">支付监控中…</p>
|
||||
<p class="text-xs text-slate-400 mt-1">已打开支付页面,完成后自动到账</p>
|
||||
<div class="w-12 h-12 rounded-full border-[3px] border-[rgb(124_92_252/0.2)] border-t-[#7c5cfc] animate-spin mb-3"></div>
|
||||
<p class="text-sm font-medium text-[color:var(--fg)]">支付监控中…</p>
|
||||
<p class="text-xs text-[color:var(--fg-faint)] mt-1">已打开支付页面,完成后自动到账</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<dl class="text-sm space-y-2">
|
||||
<div class="flex justify-between"><dt class="text-slate-400">订单号</dt><dd class="font-mono text-xs text-slate-700">{{ order.id }}</dd></div>
|
||||
<div class="flex justify-between"><dt class="text-slate-400">状态</dt><dd class="text-amber-600 font-medium">{{ statusLabel }}</dd></div>
|
||||
<div class="flex justify-between"><dt class="text-slate-400">金额</dt><dd class="font-semibold text-slate-800">¥{{ order.amount }}</dd></div>
|
||||
<div class="flex justify-between"><dt class="text-slate-400">充值积分</dt><dd class="text-[#ec5b13] font-semibold">{{ order.points }}</dd></div>
|
||||
<div class="flex justify-between"><dt class="text-slate-400">下单时间</dt><dd class="text-xs text-slate-600">{{ fmtTime(order.created_at) }}</dd></div>
|
||||
<div class="flex justify-between"><dt class="text-slate-400">支付倒计时</dt><dd class="tabular-nums font-medium" :class="remaining > 0 ? 'text-slate-700' : 'text-rose-500'">{{ remaining > 0 ? mmss : '已超时' }}</dd></div>
|
||||
<div class="flex justify-between"><dt class="text-[color:var(--fg-faint)]">订单号</dt><dd class="font-mono text-xs text-[color:var(--fg)]">{{ order.id }}</dd></div>
|
||||
<div class="flex justify-between"><dt class="text-[color:var(--fg-faint)]">状态</dt><dd class="text-amber-500 font-medium">{{ statusLabel }}</dd></div>
|
||||
<div class="flex justify-between"><dt class="text-[color:var(--fg-faint)]">金额</dt><dd class="font-semibold text-[color:var(--fg)]">¥{{ order.amount }}</dd></div>
|
||||
<div class="flex justify-between"><dt class="text-[color:var(--fg-faint)]">充值积分</dt><dd class="text-[color:var(--m-orange)] font-semibold">{{ order.points }}</dd></div>
|
||||
<div class="flex justify-between"><dt class="text-[color:var(--fg-faint)]">下单时间</dt><dd class="text-xs text-[color:var(--fg-2)]">{{ fmtTime(order.created_at) }}</dd></div>
|
||||
<div class="flex justify-between"><dt class="text-[color:var(--fg-faint)]">支付倒计时</dt><dd class="tabular-nums font-medium" :class="remaining > 0 ? 'text-[color:var(--fg)]' : 'text-rose-500'">{{ remaining > 0 ? mmss : '已超时' }}</dd></div>
|
||||
</dl>
|
||||
<p class="text-[11px] text-slate-400 mt-4 text-center">支付完成后将自动到账,请勿关闭本窗口</p>
|
||||
<p class="text-[11px] text-[color:var(--fg-faint)] mt-4 text-center">支付完成后将自动到账,请勿关闭本窗口</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -90,8 +90,8 @@ onUnmounted(() => document.removeEventListener('mousedown', onDocClick))
|
||||
leave-from-class="opacity-100 translate-y-0"
|
||||
leave-to-class="opacity-0 -translate-y-1">
|
||||
<div v-if="open" ref="panel"
|
||||
class="absolute z-30 mt-2 w-full max-h-64 overflow-auto rounded-xl border-[2.5px] border-[color:var(--ink)]
|
||||
bg-[var(--menu-bg)] p-1.5 shadow-[5px_5px_0_var(--shadow-ink)]">
|
||||
class="absolute z-30 mt-2 w-full max-h-64 overflow-auto rounded-xl border border-[color:var(--glass-border)]
|
||||
bg-[var(--menu-bg)] backdrop-blur-xl p-1.5 shadow-[var(--glass-shadow-lg)]">
|
||||
<button v-for="(o, i) in options" :key="o.value" type="button"
|
||||
:data-idx="i" @click="pick(o)" @mouseenter="active = i"
|
||||
class="w-full flex items-center justify-between gap-2 rounded-lg px-3 py-2 text-left text-sm font-medium transition-colors"
|
||||
|
||||
@@ -153,18 +153,19 @@ defineExpose({ startEdit, commitNote })
|
||||
.cv-node {
|
||||
position: absolute;
|
||||
border-radius: 14px;
|
||||
border: 2.5px solid var(--ink);
|
||||
border: 1px solid var(--glass-border);
|
||||
overflow: hidden;
|
||||
contain: layout style paint;
|
||||
user-select: none;
|
||||
touch-action: none;
|
||||
cursor: grab;
|
||||
background: var(--surface);
|
||||
box-shadow: 5px 5px 0 var(--shadow-ink);
|
||||
transition: box-shadow 0.15s ease;
|
||||
background: var(--surface-solid);
|
||||
box-shadow: var(--glass-shadow);
|
||||
transition: box-shadow 0.15s ease, border-color 0.15s ease;
|
||||
}
|
||||
.cv-node.is-selected {
|
||||
box-shadow: 7px 7px 0 var(--m-orange);
|
||||
border-color: rgb(124 92 252 / 0.7);
|
||||
box-shadow: var(--glass-shadow-lg), 0 0 0 3px rgb(124 92 252 / 0.25), 0 10px 30px var(--accent-glow);
|
||||
}
|
||||
.cv-node:active {
|
||||
cursor: grabbing;
|
||||
@@ -188,19 +189,24 @@ defineExpose({ startEdit, commitNote })
|
||||
font-weight: 600;
|
||||
line-height: 1.35;
|
||||
color: var(--fg);
|
||||
background: var(--surface);
|
||||
border-top: 2.5px solid var(--ink);
|
||||
background: var(--surface-solid);
|
||||
border-top: 1px solid var(--ink-soft);
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* 笔记 = 孟菲斯黄贴纸 */
|
||||
/* 笔记 = 淡黄色贴纸 */
|
||||
.cv-node--note {
|
||||
background: var(--m-yellow);
|
||||
background: #fdf6c9;
|
||||
border-color: rgb(180 140 20 / 0.35);
|
||||
cursor: text;
|
||||
}
|
||||
html.dark .cv-node--note {
|
||||
background: rgb(250 204 21 / 0.14);
|
||||
border-color: rgb(250 204 21 / 0.35);
|
||||
}
|
||||
.cv-node--note:not(.is-editing) {
|
||||
cursor: grab;
|
||||
}
|
||||
@@ -217,6 +223,7 @@ defineExpose({ startEdit, commitNote })
|
||||
overflow: hidden;
|
||||
user-select: none;
|
||||
}
|
||||
html.dark .cv-node__note { color: rgb(255 255 255 / 0.88); }
|
||||
.is-editing .cv-node__note {
|
||||
user-select: text;
|
||||
cursor: text;
|
||||
@@ -229,6 +236,8 @@ defineExpose({ startEdit, commitNote })
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--surface);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
backdrop-filter: blur(10px);
|
||||
border-style: dashed;
|
||||
color: var(--fg-2);
|
||||
font-size: 13px;
|
||||
@@ -266,8 +275,9 @@ defineExpose({ startEdit, commitNote })
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
border-radius: 50%;
|
||||
background: var(--m-orange);
|
||||
border: 2.5px solid var(--ink);
|
||||
background: linear-gradient(135deg, #7c5cfc, #22d3ee);
|
||||
border: 1.5px solid rgb(255 255 255 / 0.7);
|
||||
box-shadow: 0 2px 10px var(--accent-glow);
|
||||
opacity: 0;
|
||||
transition: opacity 0.12s;
|
||||
cursor: crosshair;
|
||||
@@ -286,8 +296,8 @@ defineExpose({ startEdit, commitNote })
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
border-radius: 4px;
|
||||
background: var(--m-blue);
|
||||
border: 2.5px solid var(--ink);
|
||||
background: var(--surface-solid);
|
||||
border: 1px solid var(--ink);
|
||||
cursor: nwse-resize;
|
||||
z-index: 3;
|
||||
}
|
||||
@@ -305,22 +315,28 @@ defineExpose({ startEdit, commitNote })
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 7px;
|
||||
border: 2.5px solid var(--ink);
|
||||
background: var(--m-yellow);
|
||||
color: #1a1a1a;
|
||||
border: 1px solid var(--glass-border);
|
||||
background: var(--menu-bg);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
backdrop-filter: blur(10px);
|
||||
color: var(--fg);
|
||||
font-size: 12px;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
box-shadow: 2.5px 2.5px 0 var(--shadow-ink);
|
||||
box-shadow: var(--glass-shadow);
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding: 0;
|
||||
transition: transform 0.12s ease, background 0.12s ease, color 0.12s ease;
|
||||
}
|
||||
.cv-tools button:hover {
|
||||
transform: translate(1px, 1px);
|
||||
box-shadow: 1.5px 1.5px 0 var(--shadow-ink);
|
||||
transform: translateY(-1px);
|
||||
background: var(--hover);
|
||||
}
|
||||
.cv-tools__del {
|
||||
background: #ffb4ab !important;
|
||||
color: #e5484d;
|
||||
}
|
||||
.cv-tools__del:hover {
|
||||
background: rgb(229 72 77 / 0.14) !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -617,8 +617,8 @@ defineExpose({
|
||||
}
|
||||
.cv-marquee {
|
||||
position: absolute;
|
||||
border: 2px dashed var(--ink);
|
||||
background: color-mix(in srgb, var(--m-yellow) 35%, transparent);
|
||||
border: 2px dashed rgb(124 92 252 / 0.5);
|
||||
background: rgb(124 92 252 / 0.08);
|
||||
pointer-events: none;
|
||||
border-radius: 4px;
|
||||
}
|
||||
@@ -631,10 +631,12 @@ defineExpose({
|
||||
font-weight: 600;
|
||||
color: var(--fg-2);
|
||||
background: var(--surface);
|
||||
border: 2px solid var(--ink);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid var(--glass-border);
|
||||
border-radius: 999px;
|
||||
padding: 3px 14px;
|
||||
box-shadow: 3px 3px 0 var(--shadow-ink);
|
||||
box-shadow: var(--glass-shadow);
|
||||
pointer-events: none;
|
||||
white-space: nowrap;
|
||||
max-width: 92%;
|
||||
|
||||
@@ -49,9 +49,9 @@ watch(() => route.path, () => {
|
||||
<template>
|
||||
<div class="theme-x h-screen flex bg-[var(--app-bg)] text-[color:var(--fg-2)] selection:bg-orange-400/30 overflow-hidden">
|
||||
<!-- ===== Sidebar ===== -->
|
||||
<aside class="w-60 shrink-0 border-r-[3px] border-r-[color:var(--ink)] bg-[var(--surface)] backdrop-blur-md flex flex-col">
|
||||
<router-link to="/" class="h-16 flex items-center gap-2.5 px-5 border-b-[3px] border-b-[color:var(--ink)] group">
|
||||
<img v-if="site.logo" :src="site.logo" :alt="site.title" class="w-8 h-8 rounded-[10px] object-contain ring-2 ring-[color:var(--ink)]" />
|
||||
<aside class="w-60 shrink-0 border-r border-r-[color:var(--ink-soft)] bg-[var(--surface)] backdrop-blur-xl flex flex-col">
|
||||
<router-link to="/" class="h-16 flex items-center gap-2.5 px-5 border-b border-b-[color:var(--ink-soft)] group">
|
||||
<img v-if="site.logo" :src="site.logo" :alt="site.title" class="w-8 h-8 rounded-[10px] object-contain ring-1 ring-[color:var(--ink)]" />
|
||||
<Logo v-else :size="32" />
|
||||
<div class="leading-tight min-w-0">
|
||||
<div class="text-sm font-extrabold truncate tracking-tight text-[color:var(--fg)]">{{ site.title }}</div>
|
||||
@@ -89,7 +89,7 @@ watch(() => route.path, () => {
|
||||
</template>
|
||||
</nav>
|
||||
|
||||
<div class="p-3 border-t-[3px] border-t-[color:var(--ink)] space-y-1">
|
||||
<div class="p-3 border-t border-t-[color:var(--ink-soft)] space-y-1">
|
||||
<button type="button" @click="toggleTheme"
|
||||
class="w-full flex items-center gap-2.5 rounded-lg px-3 py-2 text-xs text-[color:var(--fg-2)] hover:bg-[var(--hover)] hover:text-[color:var(--fg)] transition-colors">
|
||||
<svg v-if="isDark" class="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg>
|
||||
@@ -106,18 +106,18 @@ watch(() => route.path, () => {
|
||||
|
||||
<!-- ===== Main ===== -->
|
||||
<div class="flex-1 min-w-0 flex flex-col relative">
|
||||
<!-- memphis backdrop: polka dots + flat crayon washes -->
|
||||
<!-- aurora backdrop: drifting gradient orbs + faint grain -->
|
||||
<div aria-hidden="true" class="pointer-events-none absolute inset-0 overflow-hidden">
|
||||
<div class="memphis-dots absolute inset-0 opacity-50"></div>
|
||||
<div class="absolute -top-32 left-1/3 w-[40rem] h-[40rem] rounded-full opacity-[0.16]"
|
||||
style="background: radial-gradient(circle, #fef08a, transparent 60%); filter: blur(100px)"></div>
|
||||
<div class="absolute top-1/2 -right-40 w-[36rem] h-[36rem] rounded-full opacity-[0.14]"
|
||||
style="background: radial-gradient(circle, #bae6fd, transparent 60%); filter: blur(100px)"></div>
|
||||
<div class="absolute bottom-0 left-0 w-[32rem] h-[32rem] rounded-full opacity-[0.12]"
|
||||
style="background: radial-gradient(circle, #ffc1cc, transparent 60%); filter: blur(100px)"></div>
|
||||
<div class="memphis-dots absolute inset-0 opacity-40"></div>
|
||||
<div class="absolute -top-40 left-1/4 w-[40rem] h-[40rem] rounded-full opacity-[0.45]"
|
||||
style="background: radial-gradient(circle, rgb(139 92 246 / 0.3), transparent 60%); filter: blur(110px)"></div>
|
||||
<div class="absolute top-1/2 -right-48 w-[36rem] h-[36rem] rounded-full opacity-[0.4]"
|
||||
style="background: radial-gradient(circle, rgb(34 211 238 / 0.24), transparent 60%); filter: blur(110px)"></div>
|
||||
<div class="absolute bottom-0 -left-24 w-[32rem] h-[32rem] rounded-full opacity-[0.35]"
|
||||
style="background: radial-gradient(circle, rgb(232 121 249 / 0.2), transparent 60%); filter: blur(110px)"></div>
|
||||
</div>
|
||||
|
||||
<header class="relative z-10 h-14 shrink-0 border-b-[3px] border-b-[color:var(--ink)] bg-[var(--app-bg)]/70 backdrop-blur-md flex items-center px-8">
|
||||
<header class="relative z-10 h-14 shrink-0 border-b border-b-[color:var(--ink-soft)] bg-[var(--app-bg)]/60 backdrop-blur-xl flex items-center px-8">
|
||||
<div class="text-[10px] uppercase tracking-[0.25em] text-[color:var(--m-orange)] font-extrabold mr-3">Admin</div>
|
||||
<div class="text-[color:var(--fg-faint)] mr-3">/</div>
|
||||
<h1 class="text-sm font-semibold tracking-tight text-[color:var(--fg)]">{{ currentLabel }}</h1>
|
||||
@@ -144,36 +144,32 @@ watch(() => route.path, () => {
|
||||
gap: 0.75rem;
|
||||
padding: 0.55rem 0.875rem;
|
||||
border-radius: 0.625rem;
|
||||
border: 2px solid transparent;
|
||||
border: 1px solid transparent;
|
||||
color: var(--fg-2);
|
||||
font-weight: 600;
|
||||
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
|
||||
}
|
||||
.admin-link:hover { background: rgb(254 240 138 / 0.5); color: var(--fg); border-color: var(--ink); }
|
||||
.admin-link:hover { background: var(--hover); color: var(--fg); border-color: rgb(124 92 252 / 0.3); }
|
||||
.admin-link.active {
|
||||
color: var(--fg);
|
||||
background: var(--m-yellow);
|
||||
border-color: var(--ink);
|
||||
box-shadow: 3px 3px 0 var(--shadow-ink);
|
||||
color: #fff;
|
||||
background: linear-gradient(120deg, #7c5cfc, #5f6cf8);
|
||||
border-color: transparent;
|
||||
box-shadow: 0 4px 14px var(--accent-glow);
|
||||
}
|
||||
html.dark .admin-link:hover { background: rgb(236 91 19 / 0.18); }
|
||||
html.dark .admin-link.active { color: #fff; background: var(--m-orange); }
|
||||
.admin-link.active > span:first-child { opacity: 1; }
|
||||
.admin-link.active > span:first-child { opacity: 0; }
|
||||
|
||||
.admin-sublink {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.45rem 0.875rem 0.45rem 2.6rem;
|
||||
border-radius: 0.625rem;
|
||||
border: 2px solid transparent;
|
||||
border: 1px solid transparent;
|
||||
color: var(--fg-2);
|
||||
font-weight: 600;
|
||||
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
|
||||
}
|
||||
.admin-sublink:hover { background: rgb(254 240 138 / 0.5); color: var(--fg); border-color: var(--ink); }
|
||||
.admin-sublink.active { color: var(--fg); background: var(--m-yellow); border-color: var(--ink); }
|
||||
html.dark .admin-sublink:hover { background: rgb(236 91 19 / 0.18); }
|
||||
html.dark .admin-sublink.active { color: #fff; background: var(--m-orange); }
|
||||
.admin-sublink:hover { background: var(--hover); color: var(--fg); border-color: rgb(124 92 252 / 0.3); }
|
||||
.admin-sublink.active { color: var(--m-orange); background: var(--hover); border-color: rgb(124 92 252 / 0.35); font-weight: 700; }
|
||||
|
||||
.fade-enter-active, .fade-leave-active { transition: opacity 0.15s ease, transform 0.15s ease; }
|
||||
.fade-enter-from { opacity: 0; transform: translateY(4px); }
|
||||
|
||||
@@ -142,7 +142,7 @@ async function onLogout() {
|
||||
</div>
|
||||
|
||||
<!-- mobile panel -->
|
||||
<div v-if="mobileOpen" class="md:hidden border-t-2 border-[color:var(--ink)] px-3 py-3 bg-[var(--menu-bg)]">
|
||||
<div v-if="mobileOpen" class="md:hidden border-t border-[color:var(--ink-soft)] px-3 py-3 bg-[var(--menu-bg)]">
|
||||
<router-link v-for="n in nav" :key="n.to" :to="n.to"
|
||||
:exact-active-class="n.to === '/' ? 'm-on' : ''"
|
||||
:active-class="n.to === '/' ? '' : 'm-on'"
|
||||
@@ -164,15 +164,15 @@ async function onLogout() {
|
||||
|
||||
<!-- ===== Main column ===== -->
|
||||
<div class="relative">
|
||||
<!-- memphis backdrop: polka dots + flat crayon washes -->
|
||||
<!-- aurora backdrop: drifting gradient orbs + faint grain -->
|
||||
<div aria-hidden="true" class="pointer-events-none absolute inset-0 overflow-hidden">
|
||||
<div class="memphis-dots absolute inset-0 opacity-60"></div>
|
||||
<div class="absolute -top-32 left-1/3 w-[40rem] h-[40rem] rounded-full opacity-[0.22]"
|
||||
style="background: radial-gradient(circle, #fef08a, transparent 60%); filter: blur(90px)"></div>
|
||||
<div class="absolute top-1/2 -right-40 w-[36rem] h-[36rem] rounded-full opacity-[0.18]"
|
||||
style="background: radial-gradient(circle, #bae6fd, transparent 60%); filter: blur(90px)"></div>
|
||||
<div class="absolute bottom-0 left-0 w-[32rem] h-[32rem] rounded-full opacity-[0.16]"
|
||||
style="background: radial-gradient(circle, #ffc1cc, transparent 60%); filter: blur(90px)"></div>
|
||||
<div class="memphis-dots absolute inset-0 opacity-50"></div>
|
||||
<div class="absolute -top-40 left-1/4 w-[42rem] h-[42rem] rounded-full opacity-[0.5]"
|
||||
style="background: radial-gradient(circle, rgb(139 92 246 / 0.35), transparent 60%); filter: blur(100px)"></div>
|
||||
<div class="absolute top-1/3 -right-48 w-[38rem] h-[38rem] rounded-full opacity-[0.45]"
|
||||
style="background: radial-gradient(circle, rgb(34 211 238 / 0.3), transparent 60%); filter: blur(100px)"></div>
|
||||
<div class="absolute bottom-0 -left-24 w-[34rem] h-[34rem] rounded-full opacity-[0.4]"
|
||||
style="background: radial-gradient(circle, rgb(232 121 249 / 0.28), transparent 60%); filter: blur(100px)"></div>
|
||||
<div class="anime-stars"></div>
|
||||
</div>
|
||||
|
||||
@@ -196,8 +196,8 @@ async function onLogout() {
|
||||
|
||||
<style scoped>
|
||||
.top-bar {
|
||||
background: color-mix(in srgb, var(--app-bg) 82%, transparent);
|
||||
border-bottom: 2.5px solid var(--ink);
|
||||
background: color-mix(in srgb, var(--app-bg) 62%, transparent);
|
||||
border-bottom: 1px solid var(--ink-soft);
|
||||
transition: border-color 0.2s ease;
|
||||
}
|
||||
|
||||
@@ -208,21 +208,17 @@ async function onLogout() {
|
||||
font-weight: 600;
|
||||
color: var(--fg-2);
|
||||
background: transparent;
|
||||
border: 2px solid transparent;
|
||||
border: 1px solid transparent;
|
||||
cursor: pointer;
|
||||
transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
|
||||
}
|
||||
.top-link:hover { color: var(--fg); background: var(--m-yellow); border-color: var(--ink); }
|
||||
.top-link:hover { color: var(--fg); background: var(--hover); border-color: rgb(124 92 252 / 0.3); }
|
||||
.top-link.on {
|
||||
color: #111;
|
||||
font-weight: 800;
|
||||
background: var(--m-yellow);
|
||||
border-color: var(--ink);
|
||||
box-shadow: 3px 3px 0 var(--shadow-ink);
|
||||
}
|
||||
html.dark .top-link.on {
|
||||
color: #fff;
|
||||
background: var(--m-orange);
|
||||
font-weight: 700;
|
||||
background: linear-gradient(120deg, #7c5cfc, #5f6cf8);
|
||||
border-color: transparent;
|
||||
box-shadow: 0 4px 14px var(--accent-glow);
|
||||
}
|
||||
|
||||
.brand-spark {
|
||||
@@ -245,19 +241,18 @@ html.dark .top-link.on {
|
||||
font-weight: 600;
|
||||
color: var(--fg-2);
|
||||
background: transparent;
|
||||
border: 2px solid transparent;
|
||||
border: 1px solid transparent;
|
||||
cursor: pointer;
|
||||
transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
|
||||
}
|
||||
.m-link:hover { color: var(--fg); background: var(--m-yellow); border-color: var(--ink); }
|
||||
.m-link:hover { color: var(--fg); background: var(--hover); border-color: rgb(124 92 252 / 0.3); }
|
||||
.m-link.m-on {
|
||||
color: #111;
|
||||
font-weight: 800;
|
||||
background: var(--m-yellow);
|
||||
border-color: var(--ink);
|
||||
box-shadow: 3px 3px 0 var(--shadow-ink);
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
background: linear-gradient(120deg, #7c5cfc, #5f6cf8);
|
||||
border-color: transparent;
|
||||
box-shadow: 0 4px 14px var(--accent-glow);
|
||||
}
|
||||
html.dark .m-link.m-on { color: #fff; background: var(--m-orange); }
|
||||
|
||||
.round-btn {
|
||||
width: 2.125rem;
|
||||
@@ -267,10 +262,12 @@ html.dark .m-link.m-on { color: #fff; background: var(--m-orange); }
|
||||
place-items: center;
|
||||
color: var(--fg-3);
|
||||
background: var(--surface);
|
||||
border: 2px solid var(--ink);
|
||||
transition: color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid var(--ink-soft);
|
||||
transition: color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
|
||||
}
|
||||
.round-btn:hover { color: #111; background: var(--m-yellow); box-shadow: 3px 3px 0 var(--shadow-ink); transform: translate(-1px, -1px); }
|
||||
.round-btn:hover { color: var(--fg); background: var(--hover); border-color: rgb(124 92 252 / 0.4); box-shadow: 0 4px 14px rgb(124 92 252 / 0.16); transform: translateY(-1px); }
|
||||
.round-btn:active { transform: scale(0.95) translateY(1px); box-shadow: none; }
|
||||
|
||||
/* mobile-only: .round-btn's display:grid outranks Tailwind's md:hidden, so
|
||||
@@ -286,14 +283,14 @@ html.dark .m-link.m-on { color: #fff; background: var(--m-orange); }
|
||||
font-size: 13.5px;
|
||||
font-weight: 800;
|
||||
color: #fff;
|
||||
background: var(--m-orange);
|
||||
border: 2.5px solid var(--ink);
|
||||
background: linear-gradient(120deg, #7c5cfc, #5f6cf8 55%, #22d3ee 140%);
|
||||
border: 1px solid rgb(255 255 255 / 0.16);
|
||||
cursor: pointer;
|
||||
box-shadow: 3px 3px 0 var(--shadow-ink);
|
||||
box-shadow: 0 6px 18px var(--accent-glow);
|
||||
transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease;
|
||||
}
|
||||
.solid-btn:hover { filter: brightness(1.06); transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--shadow-ink); }
|
||||
.solid-btn:active { transform: scale(0.97) translateY(2px); box-shadow: 0 0 0 var(--shadow-ink); }
|
||||
.solid-btn:hover { filter: brightness(1.07); transform: translateY(-1px); box-shadow: 0 10px 26px var(--accent-glow); }
|
||||
.solid-btn:active { transform: scale(0.97) translateY(1px); box-shadow: 0 3px 10px var(--accent-glow); }
|
||||
|
||||
.name-btn {
|
||||
display: inline-flex;
|
||||
@@ -303,18 +300,21 @@ html.dark .m-link.m-on { color: #fff; background: var(--m-orange); }
|
||||
height: 2.125rem;
|
||||
padding: 0 0.7rem 0 0.85rem;
|
||||
border-radius: 0.6rem;
|
||||
border: 2px solid var(--ink);
|
||||
border: 1px solid var(--ink-soft);
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: var(--fg);
|
||||
background: var(--surface);
|
||||
transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
backdrop-filter: blur(10px);
|
||||
transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
|
||||
}
|
||||
.name-btn:hover {
|
||||
background: var(--m-yellow);
|
||||
box-shadow: 3px 3px 0 var(--shadow-ink);
|
||||
transform: translate(-1px, -1px);
|
||||
background: var(--hover);
|
||||
border-color: rgb(124 92 252 / 0.4);
|
||||
box-shadow: 0 4px 14px rgb(124 92 252 / 0.16);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
.name-txt {
|
||||
overflow: hidden;
|
||||
@@ -328,10 +328,12 @@ html.dark .m-link.m-on { color: #fff; background: var(--m-orange); }
|
||||
top: 2.75rem;
|
||||
width: 11.5rem;
|
||||
padding: 0.4rem;
|
||||
border-radius: 0.75rem;
|
||||
border-radius: 0.85rem;
|
||||
background: var(--menu-bg);
|
||||
border: 2.5px solid var(--ink);
|
||||
box-shadow: 6px 6px 0 var(--shadow-ink);
|
||||
-webkit-backdrop-filter: blur(18px);
|
||||
backdrop-filter: blur(18px);
|
||||
border: 1px solid var(--glass-border);
|
||||
box-shadow: var(--glass-shadow-lg);
|
||||
z-index: 50;
|
||||
}
|
||||
.menu-item {
|
||||
@@ -345,8 +347,8 @@ html.dark .m-link.m-on { color: #fff; background: var(--m-orange); }
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
.menu-item:hover { background: var(--m-yellow); color: #111; }
|
||||
.menu-sep { height: 2px; background: var(--ink); opacity: 0.15; margin: 0.35rem 0.25rem; }
|
||||
.menu-item:hover { background: var(--hover); color: var(--fg); }
|
||||
.menu-sep { height: 1px; background: var(--hairline); margin: 0.35rem 0.25rem; }
|
||||
|
||||
.fade-enter-active, .fade-leave-active { transition: opacity 0.2s ease, transform 0.2s ease; }
|
||||
.fade-enter-from { opacity: 0; transform: translateY(8px); }
|
||||
|
||||
+242
-191
@@ -9,72 +9,95 @@ video {
|
||||
|
||||
:root {
|
||||
font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
|
||||
--tw-ring-color: rgb(17 17 17 / 0.12);
|
||||
--tw-ring-color: rgb(124 92 252 / 0.25);
|
||||
|
||||
/* ===== Theme palette — LIGHT (default): Memphis / neo-brutalism =====
|
||||
/* ===== Theme palette — LIGHT (default): frosted glass / aurora =====
|
||||
Drives the app chrome (rails/header) and the public marketing pages.
|
||||
The `.dark` class on <html> flips these to the dark values below.
|
||||
Text over generated images keeps a literal text-white (handled in markup). */
|
||||
--app-bg: #f8f6f2; /* warm paper */
|
||||
--fg: #1a1a1a; /* primary heading/text */
|
||||
--fg-2: rgb(26 26 26 / 0.64); /* body / secondary */
|
||||
--fg-3: rgb(26 26 26 / 0.48); /* muted */
|
||||
--fg-faint: rgb(26 26 26 / 0.34); /* labels / hints */
|
||||
--surface: #ffffff; /* raised card on page bg */
|
||||
--surface-2: rgb(26 26 26 / 0.045); /* subtle inset panel (counter cells) */
|
||||
--hairline: rgb(26 26 26 / 0.12); /* faint borders / separators */
|
||||
--hover: rgb(254 240 138 / 0.55); /* hover wash — memphis yellow tint */
|
||||
/* ink = the heavy outline color; shadow-ink = the offset "chunky" shadow */
|
||||
--ink: #111111;
|
||||
--ink-soft: rgb(17 17 17 / 0.45);
|
||||
--shadow-ink: #111111;
|
||||
/* memphis accent crayons */
|
||||
--m-orange: #ec5b13;
|
||||
--m-yellow: #fef08a;
|
||||
--m-pink: #ffc1cc;
|
||||
--m-blue: #bae6fd;
|
||||
--m-mint: #a7f3d0;
|
||||
--app-bg: #eef0f8; /* cool porcelain */
|
||||
--fg: #181524; /* primary heading/text */
|
||||
--fg-2: rgb(24 21 36 / 0.66); /* body / secondary */
|
||||
--fg-3: rgb(24 21 36 / 0.48); /* muted */
|
||||
--fg-faint: rgb(24 21 36 / 0.36); /* labels / hints */
|
||||
--surface: rgb(255 255 255 / 0.66); /* frosted card on page bg */
|
||||
--surface-solid: #ffffff; /* opaque version where blur is unwanted */
|
||||
--surface-2: rgb(24 21 36 / 0.045); /* subtle inset panel (counter cells) */
|
||||
--hairline: rgb(24 21 36 / 0.1); /* faint borders / separators */
|
||||
--hover: rgb(124 92 252 / 0.1); /* hover wash — violet tint */
|
||||
/* ink = the hairline edge color; shadow-ink = the soft shadow tint.
|
||||
Kept under their legacy names so existing markup keeps working — only the
|
||||
values changed from memphis-solid to glass-subtle. */
|
||||
--ink: rgb(24 21 36 / 0.14);
|
||||
--ink-soft: rgb(24 21 36 / 0.09);
|
||||
--shadow-ink: rgb(88 80 200 / 0.14);
|
||||
/* aurora accent crayons — primary violet + soft pastel companions */
|
||||
--m-orange: #7c5cfc;
|
||||
--m-orange-2: #22d3ee;
|
||||
--m-yellow: #ece7fe;
|
||||
--m-pink: #fad9f0;
|
||||
--m-blue: #d8eefb;
|
||||
--m-mint: #d9f4e8;
|
||||
/* solid CTA button that sits on the page bg — inverts per theme */
|
||||
--btn-solid-bg: #1a1a1a;
|
||||
--btn-solid-bg: #181524;
|
||||
--btn-solid-bg-h: #000000;
|
||||
--btn-solid-fg: #fff;
|
||||
--menu-bg: #ffffff; /* dropdown / popover panel */
|
||||
--menu-bg: rgb(255 255 255 / 0.82); /* dropdown / popover panel */
|
||||
/* shared glass treatments */
|
||||
--glass-border: rgb(255 255 255 / 0.55);
|
||||
--glass-shadow: 0 8px 28px rgb(80 74 190 / 0.1), 0 2px 8px rgb(24 21 36 / 0.05);
|
||||
--glass-shadow-lg: 0 16px 44px rgb(80 74 190 / 0.16), 0 4px 12px rgb(24 21 36 / 0.06);
|
||||
--accent-glow: rgb(124 92 252 / 0.35);
|
||||
}
|
||||
|
||||
html.dark {
|
||||
--app-bg: #131318;
|
||||
--fg: rgb(255 255 255 / 0.92);
|
||||
--fg-2: rgb(255 255 255 / 0.55);
|
||||
--fg-3: rgb(255 255 255 / 0.4);
|
||||
--app-bg: #08070f;
|
||||
--fg: rgb(255 255 255 / 0.93);
|
||||
--fg-2: rgb(255 255 255 / 0.6);
|
||||
--fg-3: rgb(255 255 255 / 0.42);
|
||||
--fg-faint: rgb(255 255 255 / 0.3);
|
||||
--surface: rgb(255 255 255 / 0.05);
|
||||
--surface-solid: #14131f;
|
||||
--surface-2: rgb(255 255 255 / 0.05);
|
||||
--hairline: rgb(255 255 255 / 0.1);
|
||||
--hover: rgb(236 91 19 / 0.2);
|
||||
--ink: rgb(244 244 245 / 0.85);
|
||||
--ink-soft: rgb(244 244 245 / 0.4);
|
||||
--shadow-ink: rgb(244 244 245 / 0.22);
|
||||
--btn-solid-bg: #ec5b13;
|
||||
--btn-solid-bg-h: #f97316;
|
||||
--hover: rgb(139 92 246 / 0.16);
|
||||
--ink: rgb(255 255 255 / 0.14);
|
||||
--ink-soft: rgb(255 255 255 / 0.09);
|
||||
--shadow-ink: rgb(0 0 0 / 0.4);
|
||||
--m-orange: #8b5cf6;
|
||||
--m-orange-2: #22d3ee;
|
||||
--m-yellow: #a78bfa;
|
||||
--m-pink: #f0a6d8;
|
||||
--m-blue: #6cd0f2;
|
||||
--m-mint: #5fd9ac;
|
||||
--btn-solid-bg: #8b5cf6;
|
||||
--btn-solid-bg-h: #7c3aed;
|
||||
--btn-solid-fg: #fff;
|
||||
--menu-bg: #1d1e26;
|
||||
--menu-bg: rgb(24 23 36 / 0.86);
|
||||
--glass-border: rgb(255 255 255 / 0.12);
|
||||
--glass-shadow: 0 8px 28px rgb(0 0 0 / 0.35), 0 2px 8px rgb(0 0 0 / 0.2);
|
||||
--glass-shadow-lg: 0 18px 50px rgb(0 0 0 / 0.5), 0 4px 14px rgb(0 0 0 / 0.3);
|
||||
--accent-glow: rgb(139 92 246 / 0.45);
|
||||
}
|
||||
|
||||
/* Smooth the flip so toggling doesn't hard-cut. */
|
||||
body, .theme-x { transition: background-color 0.25s ease, color 0.25s ease; }
|
||||
|
||||
/* Footer CTA band — flat memphis-yellow panel with a heavy ink outline. */
|
||||
/* Footer CTA band — aurora gradient panel with a glass edge. */
|
||||
.cta-band {
|
||||
position: relative;
|
||||
background:
|
||||
radial-gradient(circle, rgb(17 17 17 / 0.1) 1.3px, transparent 1.3px) 0 0 / 20px 20px,
|
||||
var(--m-yellow);
|
||||
border: 3px solid var(--ink);
|
||||
box-shadow: 10px 10px 0 var(--shadow-ink);
|
||||
radial-gradient(120% 160% at 0% 0%, rgb(124 92 252 / 0.2), transparent 55%),
|
||||
radial-gradient(120% 160% at 100% 100%, rgb(34 211 238 / 0.16), transparent 55%),
|
||||
var(--surface);
|
||||
border: 1px solid var(--glass-border);
|
||||
box-shadow: var(--glass-shadow-lg);
|
||||
}
|
||||
html.dark .cta-band {
|
||||
background:
|
||||
radial-gradient(circle, rgb(255 255 255 / 0.1) 1.3px, transparent 1.3px) 0 0 / 20px 20px,
|
||||
rgb(236 91 19 / 0.16);
|
||||
radial-gradient(120% 160% at 0% 0%, rgb(139 92 246 / 0.22), transparent 55%),
|
||||
radial-gradient(120% 160% at 100% 100%, rgb(34 211 238 / 0.14), transparent 55%),
|
||||
rgb(255 255 255 / 0.04);
|
||||
}
|
||||
|
||||
/* ===== Light-mode rescue for hardcoded-dark pages =====
|
||||
@@ -83,10 +106,10 @@ html.dark .cta-band {
|
||||
LIGHT mode, remap those neutral whites to the dark-on-light palette. Scoped
|
||||
to a `.theme-text` wrapper so the marketing homepage's over-image whites are
|
||||
never touched. Un-layered, so these win over Tailwind's @layer utilities. */
|
||||
html:not(.dark) .theme-text :is(.text-white, [class*="text-white/9"], [class*="text-white/8"]) { color: rgb(15 23 42 / 0.95); }
|
||||
html:not(.dark) .theme-text :is([class*="text-white/7"], [class*="text-white/6"]) { color: rgb(15 23 42 / 0.7); }
|
||||
html:not(.dark) .theme-text :is([class*="text-white/5"], [class*="text-white/4"]) { color: rgb(15 23 42 / 0.52); }
|
||||
html:not(.dark) .theme-text :is([class*="text-white/3"], [class*="text-white/2"], [class*="text-white/1"]) { color: rgb(15 23 42 / 0.4); }
|
||||
html:not(.dark) .theme-text :is(.text-white, [class*="text-white/9"], [class*="text-white/8"]) { color: rgb(24 21 36 / 0.95); }
|
||||
html:not(.dark) .theme-text :is([class*="text-white/7"], [class*="text-white/6"]) { color: rgb(24 21 36 / 0.7); }
|
||||
html:not(.dark) .theme-text :is([class*="text-white/5"], [class*="text-white/4"]) { color: rgb(24 21 36 / 0.52); }
|
||||
html:not(.dark) .theme-text :is([class*="text-white/3"], [class*="text-white/2"], [class*="text-white/1"]) { color: rgb(24 21 36 / 0.4); }
|
||||
html:not(.dark) .theme-text [class*="bg-white/"] { background-color: var(--surface-2); }
|
||||
html:not(.dark) .theme-text [class*="border-white/"] { border-color: var(--hairline); }
|
||||
html:not(.dark) .theme-text [class*="ring-white/"] { --tw-ring-color: var(--hairline); }
|
||||
@@ -102,7 +125,7 @@ html:not(.dark) .theme-text :is([class*="bg-slate-900"], [class*="bg-slate-800"]
|
||||
matcher also catches the /80 opacity variants. Badges keep their pale tinted
|
||||
bg (bg-*-500/10) which reads fine on white. */
|
||||
html:not(.dark) .theme-text :is([class*="text-sky-300"], [class*="text-sky-200"]) { color: rgb(79 70 229); }
|
||||
html:not(.dark) .theme-text :is([class*="text-orange-300"], [class*="text-orange-200"]) { color: rgb(234 88 12); }
|
||||
html:not(.dark) .theme-text :is([class*="text-orange-300"], [class*="text-orange-200"]) { color: rgb(124 58 237); }
|
||||
html:not(.dark) .theme-text :is([class*="text-rose-300"], [class*="text-rose-200"]) { color: rgb(225 29 72); }
|
||||
html:not(.dark) .theme-text :is([class*="text-emerald-300"], [class*="text-emerald-200"]) { color: rgb(5 150 105); }
|
||||
html:not(.dark) .theme-text :is([class*="text-sky-300"], [class*="text-sky-200"]) { color: rgb(2 132 199); }
|
||||
@@ -120,17 +143,23 @@ html:not(.dark) .theme-text :is(.fp, .pg, .act, .filter-pill, .kind-btn, .preset
|
||||
html:not(.dark) .theme-text :is(.fp, .pg, .act, .filter-pill, .kind-btn, .preset-btn, .opt, .chip-x):hover {
|
||||
color: var(--fg); background: var(--hover);
|
||||
}
|
||||
html:not(.dark) .theme-text :is(.fp-on, .pg-on, .seg-on, .opt-on) { background: var(--fg); color: #fff; box-shadow: 2px 2px 0 var(--m-orange); }
|
||||
html:not(.dark) .theme-text :is(.fp-on, .pg-on, .seg-on, .opt-on) {
|
||||
background: linear-gradient(120deg, #7c5cfc, #5f6cf8); color: #fff;
|
||||
box-shadow: 0 4px 16px var(--accent-glow);
|
||||
}
|
||||
/* Tag chips (TagInput) — near-white orange text is unreadable on white; keep
|
||||
the orange tint but switch the label to dark ink. */
|
||||
html:not(.dark) .theme-text .chip { color: rgb(15 23 42 / 0.9); }
|
||||
html:not(.dark) .theme-text .chip .chip-x { color: rgb(15 23 42 / 0.55); background: transparent; box-shadow: none; }
|
||||
the tint but switch the label to dark ink. */
|
||||
html:not(.dark) .theme-text .chip { color: rgb(24 21 36 / 0.9); }
|
||||
html:not(.dark) .theme-text .chip .chip-x { color: rgb(24 21 36 / 0.55); background: transparent; box-shadow: none; }
|
||||
html:not(.dark) .theme-text .chip .chip-x:hover { color: #fff; background: rgb(244 63 94 / 0.6); }
|
||||
/* ShowcaseView marks the selected filter/kind tab with an `.on` modifier on
|
||||
`.filter-pill`/`.kind-btn` (not the `-on` class above). Without this, the
|
||||
neutral `.filter-pill`/`.kind-btn` rescue paints selected == unselected and
|
||||
the highlight vanishes on a white page. Equal-or-higher specificity, later. */
|
||||
html:not(.dark) .theme-text :is(.filter-pill, .kind-btn).on { background: var(--fg); color: #fff; box-shadow: 2px 2px 0 var(--m-orange); }
|
||||
html:not(.dark) .theme-text :is(.filter-pill, .kind-btn).on {
|
||||
background: linear-gradient(120deg, #7c5cfc, #5f6cf8); color: #fff;
|
||||
box-shadow: 0 4px 16px var(--accent-glow);
|
||||
}
|
||||
/* Selected COLORED filter pills — their scoped (dark) selected colors get
|
||||
overridden by the neutral `.fp` rescue above, so re-state a light-mode
|
||||
variant (tinted bg + dark-enough text + colored ring) with equal specificity
|
||||
@@ -138,16 +167,14 @@ html:not(.dark) .theme-text :is(.filter-pill, .kind-btn).on { background: var(--
|
||||
html:not(.dark) .theme-text .fp-emerald { background: rgb(16 185 129 / 0.14); color: rgb(4 120 87); box-shadow: inset 0 0 0 1px rgb(16 185 129 / 0.45); }
|
||||
html:not(.dark) .theme-text .fp-rose { background: rgb(244 63 94 / 0.12); color: rgb(190 18 60); box-shadow: inset 0 0 0 1px rgb(244 63 94 / 0.45); }
|
||||
html:not(.dark) .theme-text .fp-amber { background: rgb(245 158 11 / 0.16); color: rgb(180 83 9); box-shadow: inset 0 0 0 1px rgb(245 158 11 / 0.5); }
|
||||
html:not(.dark) .theme-text .fp-orange { background: rgb(249 115 22 / 0.14); color: rgb(194 65 12); box-shadow: inset 0 0 0 1px rgb(249 115 22 / 0.45); }
|
||||
html:not(.dark) .theme-text .fp-orange { background: rgb(139 92 246 / 0.14); color: rgb(109 40 217); box-shadow: inset 0 0 0 1px rgb(139 92 246 / 0.45); }
|
||||
html:not(.dark) .theme-text .fp-pink { background: rgb(244 114 182 / 0.14); color: rgb(190 24 93); box-shadow: inset 0 0 0 1px rgb(244 114 182 / 0.45); }
|
||||
html:not(.dark) .theme-text .fp-slate { background: rgb(100 116 139 / 0.14); color: rgb(51 65 85); box-shadow: inset 0 0 0 1px rgb(100 116 139 / 0.45); }
|
||||
html:not(.dark) .theme-text .fp-sky { background: rgb(14 165 233 / 0.14); color: rgb(3 105 161); box-shadow: inset 0 0 0 1px rgb(14 165 233 / 0.45); }
|
||||
html:not(.dark) .theme-text .fp-teal { background: rgb(20 184 166 / 0.14); color: rgb(15 118 110); box-shadow: inset 0 0 0 1px rgb(20 184 166 / 0.45); }
|
||||
|
||||
/* Custom checkbox for admin tables (<input type="checkbox" class="chk">).
|
||||
Replaces the plain accent-color box with a rounded, branded one + white check.
|
||||
Neutral border + transparent bg so it reads on both the dark admin shell and
|
||||
light mode; fills rose when checked. */
|
||||
Rounded glass box + white check; fills with the violet gradient when on. */
|
||||
.chk {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
@@ -161,14 +188,14 @@ html:not(.dark) .theme-text .fp-teal { background: rgb(20 184 166 / 0.14); color
|
||||
display: inline-grid;
|
||||
place-content: center;
|
||||
vertical-align: middle;
|
||||
transition: background 0.15s, border-color 0.15s;
|
||||
transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
|
||||
}
|
||||
.chk { border-color: var(--ink-soft); }
|
||||
.chk { border-color: var(--ink); }
|
||||
.chk:hover:not(:checked) { border-color: var(--m-orange); }
|
||||
.chk:checked {
|
||||
background: var(--m-orange);
|
||||
border-color: var(--ink);
|
||||
box-shadow: 2px 2px 0 var(--shadow-ink);
|
||||
background: linear-gradient(135deg, #7c5cfc, #22d3ee);
|
||||
border-color: transparent;
|
||||
box-shadow: 0 2px 10px var(--accent-glow);
|
||||
}
|
||||
.chk:checked::after {
|
||||
content: "";
|
||||
@@ -179,7 +206,7 @@ html:not(.dark) .theme-text .fp-teal { background: rgb(20 184 166 / 0.14); color
|
||||
transform: rotate(45deg);
|
||||
margin-top: -0.12rem;
|
||||
}
|
||||
.chk:focus-visible { outline: 2px solid rgb(236 91 19 / 0.5); outline-offset: 1px; }
|
||||
.chk:focus-visible { outline: 2px solid rgb(124 92 252 / 0.5); outline-offset: 1px; }
|
||||
/* Account identity tags (AccountsView: 子号 / 母号 / 普号 / 限额). The colors live
|
||||
here rather than as inline dark-palette utilities, which were invisible on the
|
||||
light theme: light values first, html.dark override after. */
|
||||
@@ -195,11 +222,11 @@ html:not(.dark) .theme-text .fp-teal { background: rgb(20 184 166 / 0.14); color
|
||||
white-space: nowrap;
|
||||
}
|
||||
.acct-tag-sub { background: rgb(14 165 233 / 0.14); color: rgb(3 105 161); box-shadow: inset 0 0 0 1px rgb(14 165 233 / 0.4); }
|
||||
.acct-tag-master { background: rgb(249 115 22 / 0.14); color: rgb(194 65 12); box-shadow: inset 0 0 0 1px rgb(249 115 22 / 0.4); }
|
||||
.acct-tag-master { background: rgb(139 92 246 / 0.14); color: rgb(109 40 217); box-shadow: inset 0 0 0 1px rgb(139 92 246 / 0.4); }
|
||||
.acct-tag-free { background: rgb(100 116 139 / 0.14); color: rgb(51 65 85); box-shadow: inset 0 0 0 1px rgb(100 116 139 / 0.4); }
|
||||
.acct-tag-limit { background: rgb(245 158 11 / 0.16); color: rgb(180 83 9); box-shadow: inset 0 0 0 1px rgb(245 158 11 / 0.4); }
|
||||
html.dark .acct-tag-sub { background: rgb(14 165 233 / 0.18); color: rgb(125 211 252); box-shadow: inset 0 0 0 1px rgb(56 189 248 / 0.35); }
|
||||
html.dark .acct-tag-master { background: rgb(249 115 22 / 0.22); color: rgb(253 186 116); box-shadow: inset 0 0 0 1px rgb(253 186 116 / 0.35); }
|
||||
html.dark .acct-tag-master { background: rgb(139 92 246 / 0.22); color: rgb(196 181 253); box-shadow: inset 0 0 0 1px rgb(167 139 250 / 0.35); }
|
||||
html.dark .acct-tag-free { background: rgb(148 163 184 / 0.22); color: rgb(226 232 240); box-shadow: inset 0 0 0 1px rgb(148 163 184 / 0.35); }
|
||||
html.dark .acct-tag-limit { background: rgb(245 158 11 / 0.18); color: rgb(252 211 77); box-shadow: inset 0 0 0 1px rgb(251 191 36 / 0.35); }
|
||||
/* Capability chips (ModelsView): all variants need bg + ring + color reset in light mode.
|
||||
@@ -224,7 +251,7 @@ html:not(.dark) .theme-text .price-chip {
|
||||
background: var(--surface-2);
|
||||
box-shadow: inset 0 0 0 1px var(--hairline);
|
||||
}
|
||||
/* fp-white selected pill: on white bg the all-white fill vanishes — use a neutral dark variant. */
|
||||
/* fp-white selected pill: on white bg the all-white fill vanishes — use a neutral variant. */
|
||||
html:not(.dark) .theme-text .fp-white {
|
||||
background: var(--surface-2);
|
||||
color: var(--fg-2);
|
||||
@@ -256,7 +283,7 @@ html:not(.dark) .media-card :is([class*="border-white/"], [class*="ring-white/"]
|
||||
html:not(.dark) .media-card :is([class*="text-emerald-3"], [class*="text-emerald-2"]) { color: rgb(110 231 183) !important; }
|
||||
html:not(.dark) .media-card :is([class*="text-rose-3"], [class*="text-rose-2"]) { color: rgb(251 207 232) !important; }
|
||||
html:not(.dark) .media-card :is([class*="text-sky-3"], [class*="text-sky-2"]) { color: rgb(147 197 253) !important; }
|
||||
html:not(.dark) .media-card :is([class*="text-orange-3"], [class*="text-orange-2"]) { color: rgb(253 186 116) !important; }
|
||||
html:not(.dark) .media-card :is([class*="text-orange-3"], [class*="text-orange-2"]) { color: rgb(196 181 253) !important; }
|
||||
html:not(.dark) .media-card :is([class*="text-sky-3"], [class*="text-sky-2"]) { color: rgb(125 211 252) !important; }
|
||||
html:not(.dark) .media-card :is([class*="text-amber-3"], [class*="text-amber-2"]) { color: rgb(252 211 77) !important; }
|
||||
|
||||
@@ -271,8 +298,8 @@ html:not(.dark) .doc-code code { background: rgb(255 255 255 / 0.08); color: rgb
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
/* Kill the bounce/glow when scrolling past the top or bottom of any
|
||||
scroll surface (the dark admin shell has fixed viewport height and we
|
||||
don't want a rubber-band-y feel at the edges of inner scroll areas). */
|
||||
scroll surface (the dark admin shell has fixed viewport height and we
|
||||
don't want a rubber-band-y feel at the edges of inner scroll areas). */
|
||||
overscroll-behavior: none;
|
||||
}
|
||||
|
||||
@@ -281,10 +308,11 @@ body {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: optimizeLegibility;
|
||||
overscroll-behavior: none;
|
||||
/* Subtle ambient gradient + grain (used by PublicLayout via .ambient-bg) */
|
||||
/* Aurora ambient gradient + grain (used by PublicLayout via .ambient-bg) */
|
||||
}
|
||||
|
||||
::selection { background: var(--m-yellow); color: #111; }
|
||||
::selection { background: rgb(139 92 246 / 0.32); color: inherit; }
|
||||
html:not(.dark) ::selection { color: #181524; }
|
||||
|
||||
/* Tailwind v4 / preflight leaves <button> on the default arrow cursor, so
|
||||
admins miss the affordance on icon-only actions (复制 / 删除 / 生成 等).
|
||||
@@ -300,36 +328,45 @@ button:not(:disabled), [role="button"]:not([aria-disabled="true"]) { cursor: poi
|
||||
.card:has(> table) { overflow-x: auto; }
|
||||
|
||||
::-webkit-scrollbar { width: 9px; height: 9px; }
|
||||
::-webkit-scrollbar-thumb { background: rgb(26 26 26 / 0.28); border-radius: 5px; border: 2px solid transparent; background-clip: content-box; }
|
||||
::-webkit-scrollbar-thumb:hover { background: rgb(26 26 26 / 0.45); background-clip: content-box; }
|
||||
::-webkit-scrollbar-thumb { background: rgb(24 21 36 / 0.2); border-radius: 5px; border: 2px solid transparent; background-clip: content-box; }
|
||||
::-webkit-scrollbar-thumb:hover { background: rgb(24 21 36 / 0.38); background-clip: content-box; }
|
||||
::-webkit-scrollbar-track { background: transparent; }
|
||||
html.dark ::-webkit-scrollbar-thumb { background: rgb(255 255 255 / 0.22); background-clip: content-box; }
|
||||
html.dark ::-webkit-scrollbar-thumb:hover { background: rgb(255 255 255 / 0.35); background-clip: content-box; }
|
||||
html.dark ::-webkit-scrollbar-thumb { background: rgb(255 255 255 / 0.18); background-clip: content-box; }
|
||||
html.dark ::-webkit-scrollbar-thumb:hover { background: rgb(255 255 255 / 0.32); background-clip: content-box; }
|
||||
|
||||
/* ===== Ambient background — used by the public shell ===== */
|
||||
/* ===== Ambient background — aurora wash used by the public shell ===== */
|
||||
.ambient-bg {
|
||||
background-color: var(--app-bg);
|
||||
background-image: radial-gradient(circle, rgb(17 17 17 / 0.07) 1.3px, transparent 1.3px);
|
||||
background-size: 22px 22px;
|
||||
background-image:
|
||||
radial-gradient(60rem 40rem at 12% -10%, rgb(124 92 252 / 0.14), transparent 60%),
|
||||
radial-gradient(52rem 36rem at 92% 8%, rgb(34 211 238 / 0.11), transparent 60%),
|
||||
radial-gradient(46rem 32rem at 8% 96%, rgb(240 171 252 / 0.1), transparent 60%);
|
||||
}
|
||||
html.dark .ambient-bg {
|
||||
background-image: radial-gradient(circle, rgb(255 255 255 / 0.06) 1.3px, transparent 1.3px);
|
||||
background-image:
|
||||
radial-gradient(60rem 40rem at 12% -10%, rgb(139 92 246 / 0.2), transparent 60%),
|
||||
radial-gradient(52rem 36rem at 92% 8%, rgb(34 211 238 / 0.13), transparent 60%),
|
||||
radial-gradient(46rem 32rem at 8% 96%, rgb(232 121 249 / 0.1), transparent 60%);
|
||||
}
|
||||
|
||||
/* ===== Memphis / neo-brutalist design kit =====
|
||||
Heavy ink outlines, hard offset shadows, flat crayon accents (orange / yellow
|
||||
/ pink / blue / mint), rotated stickers and squishy press feedback. Reusable
|
||||
across the workbench + user subpages + public pages so the whole front-end
|
||||
shares one punchy, print-like look. */
|
||||
/* ===== Glass / aurora design kit =====
|
||||
Frosted surfaces, hairline edges, soft layered shadows and violet→cyan
|
||||
gradient accents. Same class names as the previous memphis kit so every
|
||||
view picks the new look up without markup changes. */
|
||||
|
||||
/* Highlighter text — black words "marked" with a yellow swipe. */
|
||||
/* Gradient headline text — violet → cyan swipe. */
|
||||
.anime-grad-text {
|
||||
background: linear-gradient(transparent 55%, var(--m-yellow) 55%);
|
||||
padding: 0 0.1em;
|
||||
color: inherit;
|
||||
background: linear-gradient(100deg, #7c5cfc 0%, #a855f7 45%, #22d3ee 100%);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
color: transparent;
|
||||
padding: 0 0.05em;
|
||||
}
|
||||
html.dark .anime-grad-text {
|
||||
background: linear-gradient(transparent 55%, rgb(236 91 19 / 0.55) 55%);
|
||||
background: linear-gradient(100deg, #a78bfa 0%, #e879f9 45%, #67e8f9 100%);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
/* Section eyebrow — tiny uppercase kicker with a leading star. */
|
||||
@@ -344,23 +381,24 @@ html.dark .anime-grad-text {
|
||||
}
|
||||
.anime-eyebrow::before { content: '✦'; font-size: 0.85em; }
|
||||
|
||||
/* Sticker label — rotated yellow chip with a hard shadow. */
|
||||
/* Sticker label — glass chip with a soft glow. */
|
||||
.sticker {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.3rem;
|
||||
padding: 0.3rem 0.75rem;
|
||||
border-radius: 0.55rem;
|
||||
gap: 0.4rem;
|
||||
padding: 0.34rem 0.85rem;
|
||||
border-radius: 999px;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
color: #111;
|
||||
background: var(--m-yellow);
|
||||
border: 2.5px solid var(--ink);
|
||||
box-shadow: 4px 4px 0 var(--shadow-ink);
|
||||
transform: rotate(-1.5deg);
|
||||
font-weight: 700;
|
||||
color: var(--fg);
|
||||
background: var(--surface);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
backdrop-filter: blur(12px);
|
||||
border: 1px solid var(--glass-border);
|
||||
box-shadow: var(--glass-shadow);
|
||||
}
|
||||
|
||||
/* Chunky CTA — flat orange with an offset ink shadow and a press feel. */
|
||||
/* Chunky CTA — violet→cyan gradient with a glow. */
|
||||
.bubble-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
@@ -370,42 +408,37 @@ html.dark .anime-grad-text {
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
color: #fff;
|
||||
border: 2.5px solid var(--ink);
|
||||
border: 1px solid rgb(255 255 255 / 0.18);
|
||||
cursor: pointer;
|
||||
background: var(--m-orange);
|
||||
box-shadow: 4px 4px 0 var(--shadow-ink);
|
||||
background: linear-gradient(120deg, #7c5cfc, #5f6cf8 55%, #22d3ee);
|
||||
box-shadow: 0 8px 24px var(--accent-glow);
|
||||
transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
|
||||
}
|
||||
.bubble-btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--shadow-ink); filter: brightness(1.05); }
|
||||
.bubble-btn:active { transform: scale(0.97) translateY(2px); box-shadow: 1px 1px 0 var(--shadow-ink); }
|
||||
.bubble-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 32px var(--accent-glow); filter: brightness(1.06); }
|
||||
.bubble-btn:active { transform: scale(0.97) translateY(1px); box-shadow: 0 4px 12px var(--accent-glow); }
|
||||
|
||||
/* Memphis card — flat surface, heavy ink outline, hard offset shadow. */
|
||||
/* Glass card — frosted surface, hairline edge, soft shadow. */
|
||||
.anime-card {
|
||||
position: relative;
|
||||
border-radius: 1rem;
|
||||
border-radius: 1.1rem;
|
||||
background: var(--surface);
|
||||
border: 2.5px solid var(--ink);
|
||||
box-shadow: 5px 5px 0 var(--shadow-ink);
|
||||
-webkit-backdrop-filter: blur(14px);
|
||||
backdrop-filter: blur(14px);
|
||||
border: 1px solid var(--glass-border);
|
||||
box-shadow: var(--glass-shadow);
|
||||
transition: transform 0.18s ease, box-shadow 0.18s ease;
|
||||
}
|
||||
.anime-card:hover {
|
||||
transform: translate(-2px, -2px);
|
||||
box-shadow: 8px 8px 0 var(--shadow-ink);
|
||||
}
|
||||
html.dark .anime-card {
|
||||
background: rgb(255 255 255 / 0.05);
|
||||
transform: translateY(-3px);
|
||||
box-shadow: var(--glass-shadow-lg);
|
||||
}
|
||||
|
||||
/* Selected pill — solid ink with an orange offset shadow. */
|
||||
/* Selected pill — gradient fill with a glow. */
|
||||
.chip-on {
|
||||
color: #fff !important;
|
||||
background: #1a1a1a !important;
|
||||
border: 2px solid var(--ink) !important;
|
||||
box-shadow: 3px 3px 0 var(--m-orange) !important;
|
||||
}
|
||||
html.dark .chip-on {
|
||||
background: var(--m-orange) !important;
|
||||
box-shadow: 3px 3px 0 var(--shadow-ink) !important;
|
||||
background: linear-gradient(120deg, #7c5cfc, #5f6cf8) !important;
|
||||
border: 1px solid transparent !important;
|
||||
box-shadow: 0 4px 16px var(--accent-glow) !important;
|
||||
}
|
||||
|
||||
/* Twinkling star field — drop into any relatively-positioned decorative layer.
|
||||
@@ -415,12 +448,12 @@ html.dark .chip-on {
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
background-image:
|
||||
radial-gradient(1.5px 1.5px at 12% 22%, rgb(236 91 19 / 0.7), transparent),
|
||||
radial-gradient(1.5px 1.5px at 78% 12%, rgb(56 189 248 / 0.7), transparent),
|
||||
radial-gradient(1px 1px at 42% 62%, rgb(236 91 19 / 0.6), transparent),
|
||||
radial-gradient(1.5px 1.5px at 88% 72%, rgb(244 114 182 / 0.6), transparent),
|
||||
radial-gradient(1px 1px at 24% 84%, rgb(56 189 248 / 0.55), transparent),
|
||||
radial-gradient(1px 1px at 62% 34%, rgb(250 204 21 / 0.55), transparent);
|
||||
radial-gradient(1.5px 1.5px at 12% 22%, rgb(139 92 246 / 0.7), transparent),
|
||||
radial-gradient(1.5px 1.5px at 78% 12%, rgb(34 211 238 / 0.7), transparent),
|
||||
radial-gradient(1px 1px at 42% 62%, rgb(139 92 246 / 0.6), transparent),
|
||||
radial-gradient(1.5px 1.5px at 88% 72%, rgb(232 121 249 / 0.6), transparent),
|
||||
radial-gradient(1px 1px at 24% 84%, rgb(34 211 238 / 0.55), transparent),
|
||||
radial-gradient(1px 1px at 62% 34%, rgb(167 139 250 / 0.55), transparent);
|
||||
animation: twinkle 4.5s ease-in-out infinite;
|
||||
}
|
||||
@keyframes twinkle { 0%, 100% { opacity: 0.85; } 50% { opacity: 0.4; } }
|
||||
@@ -445,35 +478,38 @@ html.dark .chip-on {
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
/* ===== Memphis utilities ===== */
|
||||
/* Polka-dot texture layer (drop on a decorative absolutely-positioned div). */
|
||||
/* ===== Glass utilities ===== */
|
||||
/* Dot texture layer — kept faint so it reads as grain, not polka dots. */
|
||||
.memphis-dots {
|
||||
background-image: radial-gradient(circle, rgb(17 17 17 / 0.14) 1.4px, transparent 1.4px);
|
||||
background-size: 22px 22px;
|
||||
background-image: radial-gradient(circle, rgb(24 21 36 / 0.07) 1.1px, transparent 1.1px);
|
||||
background-size: 26px 26px;
|
||||
}
|
||||
html.dark .memphis-dots {
|
||||
background-image: radial-gradient(circle, rgb(255 255 255 / 0.1) 1.4px, transparent 1.4px);
|
||||
background-image: radial-gradient(circle, rgb(255 255 255 / 0.05) 1.1px, transparent 1.1px);
|
||||
}
|
||||
/* Heavy outline + hard offset shadow helpers for one-off markup. */
|
||||
/* Frosted surface helpers for one-off markup. */
|
||||
.ink-card {
|
||||
background: var(--surface);
|
||||
border: 2.5px solid var(--ink);
|
||||
box-shadow: 6px 6px 0 var(--shadow-ink);
|
||||
-webkit-backdrop-filter: blur(14px);
|
||||
backdrop-filter: blur(14px);
|
||||
border: 1px solid var(--glass-border);
|
||||
box-shadow: var(--glass-shadow-lg);
|
||||
}
|
||||
.ink-card-sm {
|
||||
background: var(--surface);
|
||||
border: 2px solid var(--ink);
|
||||
box-shadow: 4px 4px 0 var(--shadow-ink);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
backdrop-filter: blur(12px);
|
||||
border: 1px solid var(--glass-border);
|
||||
box-shadow: var(--glass-shadow);
|
||||
}
|
||||
/* Lift on hover — the signature memphis card interaction. */
|
||||
/* Lift on hover — the signature card interaction. */
|
||||
.chunky-hover { transition: transform 0.18s ease, box-shadow 0.18s ease; }
|
||||
.chunky-hover:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--shadow-ink); }
|
||||
/* Squishy press for buttons (mirrors the reference site's .memphis-press). */
|
||||
.chunky-hover:hover { transform: translateY(-3px); box-shadow: var(--glass-shadow-lg); }
|
||||
/* Squishy press for buttons. */
|
||||
.memphis-press { transition: transform 0.15s ease; }
|
||||
.memphis-press:active { transform: scale(0.97) translateY(2px); }
|
||||
.memphis-press:active { transform: scale(0.97) translateY(1px); }
|
||||
|
||||
/* Empty-state badge — a rotated crayon tile with a star, replaces the old
|
||||
mascot illustration in empty lists. */
|
||||
/* Empty-state badge — frosted tile with a gradient star. */
|
||||
.empty-badge {
|
||||
width: 4.5rem;
|
||||
height: 4.5rem;
|
||||
@@ -481,12 +517,11 @@ html.dark .memphis-dots {
|
||||
place-items: center;
|
||||
font-size: 1.8rem;
|
||||
font-weight: 900;
|
||||
color: #111;
|
||||
background: var(--m-yellow);
|
||||
border: 3px solid var(--ink);
|
||||
border-radius: 1rem;
|
||||
box-shadow: 5px 5px 0 var(--shadow-ink);
|
||||
transform: rotate(-6deg);
|
||||
color: #fff;
|
||||
background: linear-gradient(135deg, #7c5cfc, #22d3ee);
|
||||
border: 1px solid rgb(255 255 255 / 0.2);
|
||||
border-radius: 1.2rem;
|
||||
box-shadow: 0 12px 32px var(--accent-glow);
|
||||
animation: memphis-float 6s ease-in-out infinite;
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) { .empty-badge { animation: none; } }
|
||||
@@ -507,40 +542,41 @@ html.dark .memphis-dots {
|
||||
remap them to the dark palette. */
|
||||
.public-dark { color: rgb(255 255 255 / 0.9); }
|
||||
.public-dark .card {
|
||||
background: rgb(255 255 255 / 0.035);
|
||||
border-color: var(--ink);
|
||||
background: rgb(255 255 255 / 0.04);
|
||||
border-color: rgb(255 255 255 / 0.1);
|
||||
color: rgb(255 255 255 / 0.92);
|
||||
box-shadow: 5px 5px 0 var(--shadow-ink);
|
||||
box-shadow: var(--glass-shadow);
|
||||
}
|
||||
.public-dark .field {
|
||||
background: rgb(255 255 255 / 0.04);
|
||||
border-color: var(--ink-soft);
|
||||
border-color: rgb(255 255 255 / 0.12);
|
||||
color: rgb(255 255 255 / 0.95);
|
||||
transition: border-color 0.18s, background 0.18s, box-shadow 0.18s;
|
||||
}
|
||||
.public-dark .field::placeholder { color: rgb(255 255 255 / 0.3); }
|
||||
/* Single focus treatment shared by every <.field> across the admin shell —
|
||||
an orange offset shadow, matching the light theme's focus affordance. */
|
||||
a violet glow ring, matching the light theme's focus affordance. */
|
||||
.public-dark .field:focus,
|
||||
.public-dark .field:focus-visible {
|
||||
border-color: var(--ink);
|
||||
border-color: rgb(139 92 246 / 0.7);
|
||||
background: rgb(255 255 255 / 0.06);
|
||||
box-shadow: 3px 3px 0 rgb(236 91 19 / 0.6);
|
||||
box-shadow: 0 0 0 3px rgb(139 92 246 / 0.25);
|
||||
outline: none;
|
||||
}
|
||||
.public-dark .btn-soft {
|
||||
background: rgb(255 255 255 / 0.06);
|
||||
border-color: var(--ink-soft);
|
||||
background: rgb(255 255 255 / 0.05);
|
||||
border-color: rgb(255 255 255 / 0.12);
|
||||
color: rgb(255 255 255 / 0.85);
|
||||
}
|
||||
.public-dark .btn-soft:hover { background: rgb(236 91 19 / 0.25); color: white; }
|
||||
.public-dark .btn-soft:hover { background: rgb(139 92 246 / 0.25); color: white; }
|
||||
.public-dark .btn-ghost { color: rgb(255 255 255 / 0.65); border-color: transparent; }
|
||||
.public-dark .btn-ghost:hover { background: rgb(236 91 19 / 0.18); color: white; }
|
||||
.public-dark .btn-ghost:hover { background: rgb(139 92 246 / 0.18); color: white; }
|
||||
.public-dark .btn-primary {
|
||||
background: var(--m-orange); color: #fff; box-shadow: 3px 3px 0 var(--shadow-ink);
|
||||
background: linear-gradient(120deg, #7c5cfc, #5f6cf8); color: #fff;
|
||||
box-shadow: 0 6px 18px var(--accent-glow);
|
||||
}
|
||||
.public-dark .btn-primary:hover { background: #f97316; }
|
||||
.public-dark .pill { background: rgb(255 255 255 / 0.06); color: rgb(255 255 255 / 0.85); border-color: var(--ink-soft); }
|
||||
.public-dark .btn-primary:hover { filter: brightness(1.08); }
|
||||
.public-dark .pill { background: rgb(255 255 255 / 0.06); color: rgb(255 255 255 / 0.85); border-color: rgb(255 255 255 / 0.12); }
|
||||
|
||||
/* Remap slate text tokens */
|
||||
.public-dark .text-slate-900,
|
||||
@@ -564,7 +600,7 @@ html.dark .memphis-dots {
|
||||
/* Tables in dark */
|
||||
.public-dark .th { color: rgb(255 255 255 / 0.4); }
|
||||
.public-dark .row { border-color: rgb(255 255 255 / 0.06); }
|
||||
.public-dark .row:hover { background: rgb(255 255 255 / 0.03); }
|
||||
.public-dark .row:hover { background: rgb(139 92 246 / 0.07); }
|
||||
|
||||
/* Inline code blocks (pill highlight) — only for inline <code>, NOT code inside
|
||||
a <pre> block (docs examples), which would get an unwanted full-width tint. */
|
||||
@@ -590,11 +626,14 @@ html.dark .memphis-dots {
|
||||
.public-dark .hover\:bg-slate-100:hover { background: rgb(255 255 255 / 0.06); }
|
||||
|
||||
@layer components {
|
||||
/* surfaces — flat white card with the memphis ink outline + offset shadow */
|
||||
/* surfaces — frosted card with a hairline glass edge + soft shadow */
|
||||
.card {
|
||||
@apply bg-white rounded-xl;
|
||||
border: 2.5px solid var(--ink);
|
||||
box-shadow: 5px 5px 0 var(--shadow-ink);
|
||||
@apply rounded-xl;
|
||||
background: var(--surface);
|
||||
-webkit-backdrop-filter: blur(14px);
|
||||
backdrop-filter: blur(14px);
|
||||
border: 1px solid var(--glass-border);
|
||||
box-shadow: var(--glass-shadow);
|
||||
}
|
||||
|
||||
/* buttons — each variant is self-contained (Tailwind v4 can't @apply a custom class) */
|
||||
@@ -602,56 +641,64 @@ html.dark .memphis-dots {
|
||||
@apply inline-flex items-center justify-center gap-1.5 rounded-lg text-sm font-bold
|
||||
disabled:opacity-50 disabled:cursor-not-allowed px-3.5 py-2;
|
||||
color: #fff;
|
||||
background: var(--m-orange);
|
||||
border: 2.5px solid var(--ink);
|
||||
box-shadow: 3px 3px 0 var(--shadow-ink);
|
||||
background: linear-gradient(120deg, #7c5cfc, #5f6cf8 60%, #22d3ee 140%);
|
||||
border: 1px solid rgb(255 255 255 / 0.16);
|
||||
box-shadow: 0 6px 18px var(--accent-glow);
|
||||
transition: transform 0.13s ease, box-shadow 0.13s ease, filter 0.13s ease;
|
||||
}
|
||||
.btn-primary:hover:not(:disabled) { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--shadow-ink); filter: brightness(1.05); }
|
||||
.btn-primary:active:not(:disabled) { transform: scale(0.97) translateY(2px); box-shadow: 0 0 0 var(--shadow-ink); }
|
||||
.btn-primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 10px 26px var(--accent-glow); filter: brightness(1.07); }
|
||||
.btn-primary:active:not(:disabled) { transform: scale(0.97) translateY(1px); box-shadow: 0 3px 10px var(--accent-glow); }
|
||||
.btn-soft {
|
||||
@apply inline-flex items-center justify-center gap-1.5 rounded-lg text-xs font-semibold
|
||||
disabled:opacity-50 disabled:cursor-not-allowed px-3 py-1.5;
|
||||
color: var(--fg-2);
|
||||
background: var(--surface);
|
||||
border: 2px solid var(--ink-soft);
|
||||
transition: transform 0.13s ease, box-shadow 0.13s ease, background 0.15s ease, color 0.15s ease;
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid var(--ink-soft);
|
||||
transition: transform 0.13s ease, box-shadow 0.13s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
|
||||
}
|
||||
.btn-soft:hover:not(:disabled) {
|
||||
color: var(--fg);
|
||||
background: var(--m-yellow);
|
||||
border-color: var(--ink);
|
||||
box-shadow: 3px 3px 0 var(--shadow-ink);
|
||||
background: var(--hover);
|
||||
border-color: rgb(124 92 252 / 0.45);
|
||||
box-shadow: 0 4px 14px rgb(124 92 252 / 0.16);
|
||||
}
|
||||
.btn-soft:active:not(:disabled) { transform: scale(0.97) translateY(2px); box-shadow: none; }
|
||||
html.dark .btn-soft:hover:not(:disabled) { border-color: rgb(139 92 246 / 0.5); box-shadow: 0 4px 14px rgb(139 92 246 / 0.22); }
|
||||
.btn-soft:active:not(:disabled) { transform: scale(0.97) translateY(1px); box-shadow: none; }
|
||||
.btn-ghost {
|
||||
@apply inline-flex items-center justify-center gap-1.5 rounded-lg text-xs font-medium
|
||||
disabled:opacity-50 disabled:cursor-not-allowed px-3 py-1.5;
|
||||
color: var(--fg-2);
|
||||
border: 2px solid transparent;
|
||||
border: 1px solid transparent;
|
||||
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
|
||||
}
|
||||
.btn-ghost:hover:not(:disabled) {
|
||||
color: var(--fg);
|
||||
background: var(--m-yellow);
|
||||
border-color: var(--ink);
|
||||
background: var(--hover);
|
||||
border-color: rgb(124 92 252 / 0.3);
|
||||
}
|
||||
|
||||
/* text link / quiet action */
|
||||
.link { @apply hover:text-slate-900 transition-colors cursor-pointer; color: var(--fg-3); }
|
||||
.link { @apply transition-colors cursor-pointer; color: var(--fg-3); }
|
||||
.link:hover { color: var(--m-orange); }
|
||||
|
||||
/* form controls — heavy outline, orange offset shadow on focus */
|
||||
/* form controls — glass field, violet glow ring on focus */
|
||||
.field {
|
||||
@apply w-full rounded-lg bg-white px-3 py-2 text-sm
|
||||
@apply w-full rounded-lg px-3 py-2 text-sm
|
||||
outline-none placeholder:text-slate-400;
|
||||
color: var(--fg);
|
||||
border: 2px solid var(--ink-soft);
|
||||
transition: border-color 0.15s ease, box-shadow 0.15s ease;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--ink-soft);
|
||||
transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
|
||||
}
|
||||
.field:focus, .field:focus-visible {
|
||||
border-color: var(--ink);
|
||||
box-shadow: 3px 3px 0 var(--m-orange);
|
||||
border-color: rgb(124 92 252 / 0.65);
|
||||
box-shadow: 0 0 0 3px rgb(124 92 252 / 0.18);
|
||||
}
|
||||
html.dark .field:focus, html.dark .field:focus-visible {
|
||||
border-color: rgb(139 92 246 / 0.7);
|
||||
box-shadow: 0 0 0 3px rgb(139 92 246 / 0.25);
|
||||
}
|
||||
|
||||
/* Native <select> using .field: drop the OS arrow for a custom chevron that
|
||||
@@ -680,15 +727,19 @@ html.dark .memphis-dots {
|
||||
/* status pill */
|
||||
.pill {
|
||||
@apply inline-flex items-center rounded-md px-2 py-0.5 text-xs font-semibold;
|
||||
border: 1.5px solid var(--ink-soft);
|
||||
border: 1px solid var(--ink-soft);
|
||||
}
|
||||
|
||||
/* table primitives */
|
||||
.th { @apply text-left px-4 py-3 text-[11px] font-bold uppercase tracking-wider; color: var(--fg-faint); }
|
||||
.td { @apply px-4 py-3.5 align-middle; }
|
||||
.row { @apply border-t transition-colors; border-color: var(--hairline); }
|
||||
.row:hover { background: rgb(254 240 138 / 0.35); }
|
||||
.row:hover { background: rgb(124 92 252 / 0.06); }
|
||||
|
||||
/* avatar chip for identity columns */
|
||||
.avatar { @apply w-8 h-8 rounded-full grid place-items-center text-xs font-bold shrink-0; border: 2px solid var(--ink); }
|
||||
.avatar {
|
||||
@apply w-8 h-8 rounded-full grid place-items-center text-xs font-bold shrink-0;
|
||||
border: 1px solid var(--ink);
|
||||
background: var(--surface-2);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
<script setup>
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
import { site } from '../site'
|
||||
|
||||
const contact = computed(() => site.contact || {})
|
||||
|
||||
const powers = [
|
||||
{ icon: '🎨', title: '文字生图', desc: '一句话出图，画幅与分辨率随模型可选。', bg: 'var(--m-mint)' },
|
||||
{ icon: '🖼️', title: '参考图生图', desc: '上传参考换风格、改构图、做变体。', bg: 'var(--m-pink)' },
|
||||
{ icon: '🎬', title: '文字生视频', desc: '一段描述生成短片，时长分辨率可选。', bg: 'var(--m-blue)' },
|
||||
{ icon: '✨', title: '图生视频', desc: '给张参考图，让静态画面动起来。', bg: 'var(--m-yellow)' },
|
||||
{ icon: 't2i', title: '文字生图', desc: '一句话出图，画幅与分辨率随模型可选。', tint: 'linear-gradient(135deg,#34d399,#2dd4bf)' },
|
||||
{ icon: 'i2i', title: '参考图生图', desc: '上传参考换风格、改构图、做变体。', tint: 'linear-gradient(135deg,#e879f9,#f472b6)' },
|
||||
{ icon: 't2v', title: '文字生视频', desc: '一段描述生成短片，时长分辨率可选。', tint: 'linear-gradient(135deg,#38bdf8,#22d3ee)' },
|
||||
{ icon: 'i2v', title: '图生视频', desc: '给张参考图，让静态画面动起来。', tint: 'linear-gradient(135deg,#7c5cfc,#a855f7)' },
|
||||
]
|
||||
</script>
|
||||
|
||||
@@ -29,12 +29,12 @@ const powers = [
|
||||
</p>
|
||||
<router-link to="/user" class="bubble-btn mt-7">开始创作 →</router-link>
|
||||
</div>
|
||||
<!-- memphis tile cluster standing in for the old mascot illustration -->
|
||||
<!-- floating glass tile cluster standing in for a mascot illustration -->
|
||||
<div class="ab-cluster" aria-hidden="true">
|
||||
<span class="ab-tile ab-1">🎨</span>
|
||||
<span class="ab-tile ab-2">🖼️</span>
|
||||
<span class="ab-tile ab-3">🎬</span>
|
||||
<span class="ab-tile ab-4">✨</span>
|
||||
<span class="ab-tile ab-1"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l1.9 5.8a2 2 0 0 0 1.3 1.3L21 12l-5.8 1.9a2 2 0 0 0-1.3 1.3L12 21l-1.9-5.8a2 2 0 0 0-1.3-1.3L3 12l5.8-1.9a2 2 0 0 0 1.3-1.3z"/></svg></span>
|
||||
<span class="ab-tile ab-2"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 16 5-5 3 3 4-4 6 6"/><circle cx="9" cy="9" r="1.4"/></svg></span>
|
||||
<span class="ab-tile ab-3"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h13v12H3z"/><path d="M16 10l5-3v10l-5-3"/></svg></span>
|
||||
<span class="ab-tile ab-4"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2 3 14h7l-1 8 10-12h-7z"/></svg></span>
|
||||
<span class="ab-star">✦</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -45,11 +45,15 @@ const powers = [
|
||||
<div class="anime-eyebrow text-[var(--m-orange)]">能做什么</div>
|
||||
<h2 class="mt-3 text-2xl md:text-3xl font-black tracking-tight text-[color:var(--fg)]">四种方式，把想象变成画面</h2>
|
||||
<div class="mt-7 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3">
|
||||
<div v-for="p in powers" :key="p.title"
|
||||
class="power-card p-5" :style="{ background: p.bg }">
|
||||
<div class="text-3xl">{{ p.icon }}</div>
|
||||
<div class="mt-3 text-base font-extrabold text-[#111]">{{ p.title }}</div>
|
||||
<div class="mt-1.5 text-[13px] font-medium leading-relaxed text-[#111]/60">{{ p.desc }}</div>
|
||||
<div v-for="p in powers" :key="p.title" class="power-card p-5">
|
||||
<div class="power-ico" :style="{ background: p.tint }">
|
||||
<svg v-if="p.icon === 't2i'" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 5h16v14H4z"/><path d="M4 15l4.5-4.5 3 3L15 10l5 5"/><circle cx="9" cy="9" r="1.3"/></svg>
|
||||
<svg v-else-if="p.icon === 'i2i'" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7h11v11H3z"/><path d="M10 4h11v11"/></svg>
|
||||
<svg v-else-if="p.icon === 't2v'" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h13v12H3z"/><path d="M16 10l5-3v10l-5-3"/></svg>
|
||||
<svg v-else viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 5h16v14H4z"/><path d="M9 9l6 3-6 3z"/></svg>
|
||||
</div>
|
||||
<div class="mt-3 text-base font-extrabold text-[color:var(--fg)]">{{ p.title }}</div>
|
||||
<div class="mt-1.5 text-[13px] font-medium leading-relaxed text-[color:var(--fg-3)]">{{ p.desc }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -64,7 +68,7 @@ const powers = [
|
||||
<a v-if="contact.shop" :href="contact.shop" target="_blank" rel="noopener"
|
||||
class="group anime-card flex items-center justify-between gap-3 p-5">
|
||||
<div>
|
||||
<div class="sticker">🛍️ 商店</div>
|
||||
<div class="sticker">商店</div>
|
||||
<div class="text-base font-semibold text-[color:var(--fg)] mt-2 group-hover:text-[var(--m-orange)] transition-colors">前往商店</div>
|
||||
</div>
|
||||
<span class="text-[color:var(--fg-faint)] group-hover:translate-x-1 transition-transform">→</span>
|
||||
@@ -72,33 +76,33 @@ const powers = [
|
||||
|
||||
<a v-if="contact.email" :href="`mailto:${contact.email}`"
|
||||
class="group anime-card p-5">
|
||||
<div class="sticker">✉️ 邮箱</div>
|
||||
<div class="sticker">邮箱</div>
|
||||
<div class="text-base font-semibold text-[color:var(--fg)] mt-2 break-all group-hover:text-sky-600 transition-colors">{{ contact.email }}</div>
|
||||
</a>
|
||||
|
||||
<a v-if="contact.qq && contact.qq_link" :href="contact.qq_link" target="_blank" rel="noopener"
|
||||
class="group anime-card flex items-center justify-between gap-3 p-5">
|
||||
<div>
|
||||
<div class="sticker">💬 QQ</div>
|
||||
<div class="sticker">QQ</div>
|
||||
<div class="text-base font-semibold text-[color:var(--fg)] mt-2 tabular-nums break-all group-hover:text-sky-600 transition-colors">{{ contact.qq }}</div>
|
||||
</div>
|
||||
<span class="text-[color:var(--fg-faint)] group-hover:translate-x-1 transition-transform">→</span>
|
||||
</a>
|
||||
<div v-else-if="contact.qq" class="anime-card p-5">
|
||||
<div class="sticker">💬 QQ</div>
|
||||
<div class="sticker">QQ</div>
|
||||
<div class="text-base font-semibold text-[color:var(--fg)] mt-2 tabular-nums break-all">{{ contact.qq }}</div>
|
||||
</div>
|
||||
|
||||
<a v-if="contact.qq_group && contact.qq_group_link" :href="contact.qq_group_link" target="_blank" rel="noopener"
|
||||
class="group anime-card flex items-center justify-between gap-3 p-5">
|
||||
<div>
|
||||
<div class="sticker">🎀 QQ 群</div>
|
||||
<div class="sticker">QQ 群</div>
|
||||
<div class="text-base font-semibold text-[color:var(--fg)] mt-2 tabular-nums break-all group-hover:text-emerald-600 transition-colors">{{ contact.qq_group }}</div>
|
||||
</div>
|
||||
<span class="text-[color:var(--fg-faint)] group-hover:translate-x-1 transition-transform">→</span>
|
||||
</a>
|
||||
<div v-else-if="contact.qq_group" class="anime-card p-5">
|
||||
<div class="sticker">🎀 QQ 群</div>
|
||||
<div class="sticker">QQ 群</div>
|
||||
<div class="text-base font-semibold text-[color:var(--fg)] mt-2 tabular-nums break-all">{{ contact.qq_group }}</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -110,7 +114,7 @@ const powers = [
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* Crayon tile cluster — a loose collage of rotated ink-outlined squares. */
|
||||
/* Floating glass tile cluster — a loose collage of rotated frosted squares. */
|
||||
.ab-cluster {
|
||||
position: relative;
|
||||
min-height: 240px;
|
||||
@@ -121,15 +125,19 @@ const powers = [
|
||||
place-items: center;
|
||||
width: 5.5rem;
|
||||
height: 5.5rem;
|
||||
font-size: 2.2rem;
|
||||
border: 3px solid var(--ink);
|
||||
border-radius: 1rem;
|
||||
box-shadow: 6px 6px 0 var(--shadow-ink);
|
||||
border: 1px solid var(--glass-border);
|
||||
border-radius: 1.2rem;
|
||||
background: var(--surface);
|
||||
-webkit-backdrop-filter: blur(14px);
|
||||
backdrop-filter: blur(14px);
|
||||
box-shadow: var(--glass-shadow-lg);
|
||||
color: var(--m-orange);
|
||||
}
|
||||
.ab-1 { left: 12%; top: 6%; background: var(--m-mint); transform: rotate(-9deg); animation: memphis-float 6s ease-in-out infinite; }
|
||||
.ab-2 { right: 14%; top: 0; background: var(--m-pink); transform: rotate(7deg); animation: memphis-float 7s ease-in-out infinite reverse; }
|
||||
.ab-3 { left: 26%; bottom: 4%; background: var(--m-blue); transform: rotate(5deg); animation: memphis-bounce 4.5s ease-in-out infinite; }
|
||||
.ab-4 { right: 8%; bottom: 14%; background: var(--m-yellow); transform: rotate(-6deg); animation: memphis-float 5.5s ease-in-out infinite; }
|
||||
.ab-tile svg { width: 2.3rem; height: 2.3rem; }
|
||||
.ab-1 { left: 12%; top: 6%; transform: rotate(-9deg); animation: memphis-float 6s ease-in-out infinite; }
|
||||
.ab-2 { right: 14%; top: 0; color: var(--m-orange-2); transform: rotate(7deg); animation: memphis-float 7s ease-in-out infinite reverse; }
|
||||
.ab-3 { left: 26%; bottom: 4%; color: var(--m-pink); transform: rotate(5deg); animation: memphis-bounce 4.5s ease-in-out infinite; }
|
||||
.ab-4 { right: 8%; bottom: 14%; color: var(--m-mint); transform: rotate(-6deg); animation: memphis-float 5.5s ease-in-out infinite; }
|
||||
.ab-star {
|
||||
position: absolute;
|
||||
left: 50%; top: 44%;
|
||||
@@ -138,12 +146,25 @@ const powers = [
|
||||
animation: memphis-wiggle 3.5s ease-in-out infinite;
|
||||
}
|
||||
.power-card {
|
||||
border: 2.5px solid var(--ink);
|
||||
border-radius: 1rem;
|
||||
box-shadow: 5px 5px 0 var(--shadow-ink);
|
||||
transition: transform 0.18s ease, box-shadow 0.18s ease;
|
||||
border: 1px solid var(--glass-border);
|
||||
border-radius: 1.1rem;
|
||||
background: var(--surface);
|
||||
-webkit-backdrop-filter: blur(14px);
|
||||
backdrop-filter: blur(14px);
|
||||
box-shadow: var(--glass-shadow);
|
||||
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
|
||||
}
|
||||
.power-card:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--shadow-ink); }
|
||||
.power-card:hover { transform: translateY(-3px); border-color: rgb(124 92 252 / 0.45); box-shadow: var(--glass-shadow-lg); }
|
||||
.power-ico {
|
||||
width: 2.6rem;
|
||||
height: 2.6rem;
|
||||
border-radius: 0.75rem;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
color: #fff;
|
||||
box-shadow: 0 6px 16px rgb(124 92 252 / 0.28);
|
||||
}
|
||||
.power-ico svg { width: 1.3rem; height: 1.3rem; }
|
||||
@media (max-width: 768px) { .ab-cluster { display: none; } }
|
||||
@media (prefers-reduced-motion: reduce) { .ab-tile, .ab-star { animation: none; } }
|
||||
</style>
|
||||
|
||||
@@ -883,26 +883,28 @@ const saveLabel = computed(() => ({
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* ===== 画布:Memphis/neo-brutalism 全屏工作台(随站点明暗主题走变量) ===== */
|
||||
/* ===== 画布:玻璃拟态全屏工作台(随站点明暗主题走变量) ===== */
|
||||
.cv-btn {
|
||||
padding: 5px 11px;
|
||||
border-radius: 9px;
|
||||
border: 2.5px solid var(--ink);
|
||||
border: 1px solid var(--ink-soft);
|
||||
background: var(--surface);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
backdrop-filter: blur(10px);
|
||||
color: var(--fg);
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
box-shadow: 3px 3px 0 var(--shadow-ink);
|
||||
transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
|
||||
box-shadow: var(--glass-shadow);
|
||||
transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease, border-color 0.12s ease;
|
||||
}
|
||||
.cv-btn:hover:not(:disabled) {
|
||||
background: var(--m-yellow);
|
||||
background: var(--hover);
|
||||
border-color: rgb(124 92 252 / 0.4);
|
||||
}
|
||||
.cv-btn:active:not(:disabled) {
|
||||
transform: translate(2px, 2px);
|
||||
box-shadow: 1px 1px 0 var(--shadow-ink);
|
||||
transform: translateY(1px);
|
||||
}
|
||||
.cv-btn:disabled {
|
||||
opacity: 0.45;
|
||||
@@ -912,16 +914,18 @@ const saveLabel = computed(() => ({
|
||||
background: #ffb4ab;
|
||||
}
|
||||
.cv-btn--accent {
|
||||
background: var(--m-blue);
|
||||
background: rgb(34 211 238 / 0.16);
|
||||
border-color: rgb(34 211 238 / 0.4);
|
||||
}
|
||||
.cv-btn--accent:hover:not(:disabled) {
|
||||
background: var(--m-mint);
|
||||
background: rgb(52 211 153 / 0.16);
|
||||
border-color: rgb(52 211 153 / 0.4);
|
||||
}
|
||||
.cv-select,
|
||||
.cv-input {
|
||||
padding: 6px 10px;
|
||||
border-radius: 9px;
|
||||
border: 2.5px solid var(--ink);
|
||||
border: 1px solid var(--ink-soft);
|
||||
background: var(--surface);
|
||||
color: var(--fg);
|
||||
font-size: 13px;
|
||||
@@ -929,7 +933,8 @@ const saveLabel = computed(() => ({
|
||||
}
|
||||
.cv-select:focus,
|
||||
.cv-input:focus {
|
||||
box-shadow: 3px 3px 0 var(--m-orange);
|
||||
border-color: rgb(124 92 252 / 0.6);
|
||||
box-shadow: 0 0 0 3px rgb(124 92 252 / 0.18);
|
||||
}
|
||||
|
||||
.cv-page {
|
||||
@@ -947,8 +952,10 @@ const saveLabel = computed(() => ({
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
padding: 9px 14px;
|
||||
border-bottom: 3px solid var(--ink);
|
||||
border-bottom: 1px solid var(--ink-soft);
|
||||
background: var(--surface);
|
||||
-webkit-backdrop-filter: blur(14px);
|
||||
backdrop-filter: blur(14px);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.cv-top__left,
|
||||
@@ -975,8 +982,8 @@ const saveLabel = computed(() => ({
|
||||
color: var(--fg);
|
||||
min-width: 46px;
|
||||
text-align: center;
|
||||
background: var(--m-yellow);
|
||||
border: 2px solid var(--ink);
|
||||
background: var(--hover);
|
||||
border: 1px solid rgb(124 92 252 / 0.35);
|
||||
border-radius: 999px;
|
||||
padding: 1px 8px;
|
||||
}
|
||||
@@ -1017,9 +1024,9 @@ const saveLabel = computed(() => ({
|
||||
font-size: 15px;
|
||||
font-weight: 800;
|
||||
color: var(--fg);
|
||||
border: 3px dashed var(--ink);
|
||||
border: 2px dashed rgb(34 211 238 / 0.6);
|
||||
border-radius: 18px;
|
||||
background: color-mix(in srgb, var(--m-blue) 55%, transparent);
|
||||
background: rgb(34 211 238 / 0.1);
|
||||
pointer-events: none;
|
||||
}
|
||||
.cv-loading,
|
||||
@@ -1039,12 +1046,14 @@ const saveLabel = computed(() => ({
|
||||
color: #dc2626;
|
||||
}
|
||||
|
||||
/* 右侧生成面板 = 白纸卡片 */
|
||||
/* 右侧生成面板 = 玻璃侧栏 */
|
||||
.cv-panel {
|
||||
width: 264px;
|
||||
flex-shrink: 0;
|
||||
border-left: 3px solid var(--ink);
|
||||
border-left: 1px solid var(--ink-soft);
|
||||
background: var(--surface);
|
||||
-webkit-backdrop-filter: blur(14px);
|
||||
backdrop-filter: blur(14px);
|
||||
padding: 16px 14px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -1081,19 +1090,23 @@ const saveLabel = computed(() => ({
|
||||
.cv-chip {
|
||||
padding: 3px 11px;
|
||||
border-radius: 999px;
|
||||
border: 2.5px solid var(--ink);
|
||||
border: 1px solid var(--ink-soft);
|
||||
background: var(--surface);
|
||||
color: var(--fg);
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
transition: background 0.13s ease, border-color 0.13s ease, box-shadow 0.13s ease;
|
||||
}
|
||||
.cv-chip:hover {
|
||||
background: var(--m-blue);
|
||||
background: var(--hover);
|
||||
border-color: rgb(124 92 252 / 0.4);
|
||||
}
|
||||
.cv-chip.is-on {
|
||||
background: var(--m-yellow);
|
||||
box-shadow: 2.5px 2.5px 0 var(--shadow-ink);
|
||||
color: #fff;
|
||||
background: linear-gradient(120deg, #7c5cfc, #5f6cf8);
|
||||
border-color: transparent;
|
||||
box-shadow: 0 4px 14px var(--accent-glow);
|
||||
}
|
||||
.cv-refs {
|
||||
font-size: 11px;
|
||||
@@ -1106,22 +1119,23 @@ const saveLabel = computed(() => ({
|
||||
.cv-gen {
|
||||
padding: 10px;
|
||||
border-radius: 11px;
|
||||
border: 2.5px solid var(--ink);
|
||||
background: var(--m-orange);
|
||||
border: 1px solid rgb(255 255 255 / 0.18);
|
||||
background: linear-gradient(120deg, #7c5cfc, #5f6cf8 55%, #22d3ee 140%);
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
cursor: pointer;
|
||||
box-shadow: 4px 4px 0 var(--shadow-ink);
|
||||
transition: transform 0.12s ease, box-shadow 0.12s ease;
|
||||
box-shadow: 0 8px 22px var(--accent-glow);
|
||||
transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
|
||||
}
|
||||
.cv-gen:hover:not(:disabled) {
|
||||
transform: translate(-1px, -1px);
|
||||
box-shadow: 5px 5px 0 var(--shadow-ink);
|
||||
transform: translateY(-1px);
|
||||
filter: brightness(1.07);
|
||||
box-shadow: 0 12px 30px var(--accent-glow);
|
||||
}
|
||||
.cv-gen:active:not(:disabled) {
|
||||
transform: translate(3px, 3px);
|
||||
box-shadow: 1px 1px 0 var(--shadow-ink);
|
||||
transform: translateY(1px) scale(0.99);
|
||||
box-shadow: 0 4px 12px var(--accent-glow);
|
||||
}
|
||||
.cv-gen:disabled {
|
||||
opacity: 0.5;
|
||||
@@ -1137,9 +1151,9 @@ const saveLabel = computed(() => ({
|
||||
font-weight: 600;
|
||||
color: #92400e;
|
||||
line-height: 1.6;
|
||||
border: 2px dashed #f59e0b;
|
||||
border: 1px dashed rgb(245 158 11 / 0.6);
|
||||
border-radius: 9px;
|
||||
background: var(--m-yellow);
|
||||
background: rgb(245 158 11 / 0.12);
|
||||
padding: 8px 10px;
|
||||
}
|
||||
.cv-tips {
|
||||
@@ -1163,8 +1177,8 @@ const saveLabel = computed(() => ({
|
||||
max-width: 92vw;
|
||||
max-height: 92vh;
|
||||
border-radius: 12px;
|
||||
border: 3px solid #fff;
|
||||
box-shadow: 10px 10px 0 var(--m-orange);
|
||||
border: 1px solid rgb(255 255 255 / 0.5);
|
||||
box-shadow: 0 24px 60px rgb(0 0 0 / 0.5), 0 0 40px var(--accent-glow);
|
||||
}
|
||||
|
||||
.cv-picker {
|
||||
@@ -1179,10 +1193,12 @@ const saveLabel = computed(() => ({
|
||||
.cv-picker__box {
|
||||
width: min(720px, 92vw);
|
||||
max-height: 80vh;
|
||||
background: var(--surface);
|
||||
border: 3px solid var(--ink);
|
||||
background: var(--menu-bg);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
backdrop-filter: blur(20px);
|
||||
border: 1px solid var(--glass-border);
|
||||
border-radius: 16px;
|
||||
box-shadow: 8px 8px 0 var(--shadow-ink);
|
||||
box-shadow: var(--glass-shadow-lg);
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -1212,13 +1228,14 @@ const saveLabel = computed(() => ({
|
||||
aspect-ratio: 1;
|
||||
object-fit: cover;
|
||||
border-radius: 10px;
|
||||
border: 2.5px solid var(--ink);
|
||||
border: 1px solid var(--ink-soft);
|
||||
cursor: pointer;
|
||||
background: var(--surface-2);
|
||||
transition: transform 0.12s ease, box-shadow 0.12s ease;
|
||||
transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
|
||||
}
|
||||
.cv-picker__grid img:hover {
|
||||
transform: translate(-2px, -2px);
|
||||
box-shadow: 4px 4px 0 var(--m-orange);
|
||||
transform: translateY(-2px);
|
||||
border-color: rgb(124 92 252 / 0.55);
|
||||
box-shadow: 0 8px 20px var(--accent-glow);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -677,8 +677,8 @@ html.dark .num, html.dark .txt, html.dark .field {
|
||||
}
|
||||
.num::placeholder, .txt::placeholder, .field::placeholder { color: var(--fg-faint); }
|
||||
.num:focus, .txt:focus, .field:focus {
|
||||
border-color: var(--ink);
|
||||
box-shadow: 3px 3px 0 var(--m-orange);
|
||||
border-color: rgb(124 92 252 / 0.65);
|
||||
box-shadow: 0 0 0 3px rgb(124 92 252 / 0.18);
|
||||
}
|
||||
.num:disabled, .txt:disabled, .field:disabled { opacity: 0.45; cursor: not-allowed; }
|
||||
.num { width: 6rem; padding: 0.4rem 0.55rem; font-size: 0.8rem; text-align: right; -moz-appearance: textfield; appearance: textfield; }
|
||||
@@ -686,24 +686,23 @@ html.dark .num, html.dark .txt, html.dark .field {
|
||||
.txt { width: 16rem; max-width: 60%; padding: 0.4rem 0.65rem; font-size: 0.8rem; }
|
||||
.field { width: 100%; padding: 0.55rem 0.75rem; font-size: 0.85rem; }
|
||||
|
||||
/* Section save buttons — solid memphis orange with a hard offset shadow.
|
||||
The global .btn-primary under .public-dark already uses this palette; we
|
||||
re-assert it here so the save action stays visually distinct. */
|
||||
/* Section save buttons — violet→cyan gradient with a glow. The global
|
||||
.btn-primary under .public-dark already uses this palette; we re-assert it
|
||||
here so the save action stays visually distinct. */
|
||||
.btn-primary {
|
||||
padding: 0.55rem 1.15rem; border-radius: 0.6rem;
|
||||
font-size: 0.8rem; font-weight: 800; color: white;
|
||||
background: var(--m-orange);
|
||||
border: 2px solid var(--ink);
|
||||
box-shadow: 3px 3px 0 var(--shadow-ink);
|
||||
background: linear-gradient(120deg, #7c5cfc, #5f6cf8);
|
||||
border: 1px solid rgb(255 255 255 / 0.16);
|
||||
box-shadow: 0 6px 18px var(--accent-glow);
|
||||
transition: filter 0.15s, transform 0.12s, box-shadow 0.15s, opacity 0.15s;
|
||||
}
|
||||
/* Re-assert the flat orange on hover for ALL states — the global
|
||||
/* Keep the gradient on hover for ALL states — the global
|
||||
`.public-dark .btn-primary:hover` in style.css repaints the background,
|
||||
so even disabled save buttons (注册与登录 / 邮件服务 default to disabled)
|
||||
would flash on hover. Keep this rule unconditional; only the
|
||||
brightness/lift below is gated on :not(:disabled). */
|
||||
.btn-primary:hover { background: #f97316; }
|
||||
.btn-primary:hover:not(:disabled) { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--shadow-ink); }
|
||||
.btn-primary:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: none; }
|
||||
so even disabled save buttons would flash on hover. Keep this rule
|
||||
unconditional; only the brightness/lift below is gated on :not(:disabled). */
|
||||
.btn-primary:hover { filter: brightness(1.08); }
|
||||
.btn-primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 10px 26px var(--accent-glow); }
|
||||
.btn-primary:active:not(:disabled) { transform: translateY(1px); box-shadow: none; }
|
||||
.btn-primary:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
|
||||
</style>
|
||||
|
||||
+172
-107
@@ -121,32 +121,32 @@ const caps = computed(() => {
|
||||
{
|
||||
key: 't2i', title: '文字生图', model: imageModels.value[0]?.id,
|
||||
desc: '一句话出图，画幅与分辨率按所选模型的可用范围给出。',
|
||||
tint: '#a7f3d0', color: '#065f46',
|
||||
tint: 'linear-gradient(135deg,#34d399,#2dd4bf)', color: '#fff',
|
||||
metas: [resRange.value, `${imageModels.value.length} 个模型`].filter(Boolean),
|
||||
},
|
||||
{
|
||||
key: 'i2i', title: '参考图生图', model: i2iModels[0]?.id,
|
||||
desc: '上传参考图换风格、改构图、做变体，支持多张参考。',
|
||||
tint: '#ffc1cc', color: '#9f1239',
|
||||
tint: 'linear-gradient(135deg,#e879f9,#f472b6)', color: '#fff',
|
||||
metas: ['多图参考', `${i2iModels.length} 个模型`],
|
||||
},
|
||||
{
|
||||
key: 't2v', title: '文字生视频', model: videoModels.value[0]?.id,
|
||||
desc: '一段描述生成短片，时长与分辨率按模型能力可选。',
|
||||
tint: '#bae6fd', color: '#075985',
|
||||
tint: 'linear-gradient(135deg,#38bdf8,#22d3ee)', color: '#fff',
|
||||
metas: [durationRange.value, videoRes.value, `${videoModels.value.length} 个模型`].filter(Boolean),
|
||||
},
|
||||
{
|
||||
key: 'i2v', title: '图生视频', model: i2vModels[0]?.id,
|
||||
desc: '给参考图或首帧，让静态画面动起来。',
|
||||
tint: '#fef08a', color: '#92400e',
|
||||
tint: 'linear-gradient(135deg,#7c5cfc,#a855f7)', color: '#fff',
|
||||
metas: ['参考图', `${i2vModels.length} 个模型`],
|
||||
},
|
||||
].filter((c) => c.model)
|
||||
})
|
||||
|
||||
// ---- model cards: the admin-set alias wins, so no upstream naming leaks ----
|
||||
const MODEL_TINT = ['#ec5b13', '#ffc1cc', '#bae6fd', '#a7f3d0', '#fef08a', '#f472b6', '#94a3b8']
|
||||
const MODEL_TINT = ['#7c5cfc', '#22d3ee', '#e879f9', '#34d399', '#a78bfa', '#38bdf8', '#94a3b8']
|
||||
const modelCards = computed(() => managed.value.map((m, i) => {
|
||||
const bits = []
|
||||
if (m.resolutions?.length) bits.push(m.resolutions.join(' / '))
|
||||
@@ -201,12 +201,18 @@ function useExample(ex) {
|
||||
<section class="hero-band relative overflow-hidden pt-14 md:pt-20 pb-12">
|
||||
<div class="anime-stars"></div>
|
||||
|
||||
<!-- floating memphis shapes (desktop only) -->
|
||||
<!-- floating aurora shapes (desktop only) -->
|
||||
<div aria-hidden="true" class="pointer-events-none absolute inset-0 hidden lg:block">
|
||||
<span class="deco deco-a">🎨</span>
|
||||
<span class="deco deco-b">⚡</span>
|
||||
<span class="deco deco-a">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l1.9 5.8a2 2 0 0 0 1.3 1.3L21 12l-5.8 1.9a2 2 0 0 0-1.3 1.3L12 21l-1.9-5.8a2 2 0 0 0-1.3-1.3L3 12l5.8-1.9a2 2 0 0 0 1.3-1.3z"/></svg>
|
||||
</span>
|
||||
<span class="deco deco-b">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2 3 14h7l-1 8 10-12h-7z"/></svg>
|
||||
</span>
|
||||
<span class="deco deco-c">4K</span>
|
||||
<span class="deco deco-d">🎬</span>
|
||||
<span class="deco deco-d">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h13v12H3z"/><path d="M16 10l5-3v10l-5-3"/></svg>
|
||||
</span>
|
||||
<span class="deco deco-star">✦</span>
|
||||
<span class="deco deco-star deco-star-2">✦</span>
|
||||
</div>
|
||||
@@ -241,7 +247,7 @@ function useExample(ex) {
|
||||
</section>
|
||||
|
||||
<!-- ============ GALLERY MARQUEE (hero + bento imagery) ============ -->
|
||||
<section v-if="gallery.length" class="mt-6 -mx-4 md:-mx-8 overflow-hidden marquee-mask border-y-[3px] border-y-[color:var(--ink)] bg-[var(--surface)] py-4">
|
||||
<section v-if="gallery.length" class="mt-6 -mx-4 md:-mx-8 overflow-hidden marquee-mask border-y border-y-[color:var(--ink-soft)] bg-[var(--surface)] py-4">
|
||||
<div class="marquee flex gap-4 px-4 md:px-8 w-max">
|
||||
<button v-for="(card, i) in [...gallery, ...gallery]" :key="card.id + '-' + i" type="button"
|
||||
class="gcard" :style="cardBg(card)" :aria-label="card.title" @click="useExample(card)">
|
||||
@@ -257,17 +263,22 @@ function useExample(ex) {
|
||||
<!-- ============ KPI STRIP ============ -->
|
||||
<section class="mt-12 grid grid-cols-2 md:grid-cols-4 gap-3">
|
||||
<div v-for="k in [
|
||||
{ v: modelCount, l: '在线模型', e: '🧩', bg: 'var(--m-yellow)' },
|
||||
{ v: caps.length, l: '创作方式', e: '🎨', bg: 'var(--m-pink)' },
|
||||
{ v: resRange, l: '输出分辨率', e: '🖼️', bg: 'var(--m-blue)' },
|
||||
{ v: avgLabel, l: '平均出片 · 近 24h', e: '⚡', bg: 'var(--m-mint)' },
|
||||
{ v: modelCount, l: '在线模型', i: 'models', tint: 'linear-gradient(135deg,#7c5cfc,#a855f7)' },
|
||||
{ v: caps.length, l: '创作方式', i: 'wand', tint: 'linear-gradient(135deg,#e879f9,#f472b6)' },
|
||||
{ v: resRange, l: '输出分辨率', i: 'image', tint: 'linear-gradient(135deg,#38bdf8,#22d3ee)' },
|
||||
{ v: avgLabel, l: '平均出片 · 近 24h', i: 'bolt', tint: 'linear-gradient(135deg,#34d399,#2dd4bf)' },
|
||||
]" :key="k.l"
|
||||
class="kpi-card px-5 py-4" :style="{ background: k.bg }">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-lg">{{ k.e }}</span>
|
||||
<span class="text-[26px] font-black tabular-nums text-[#111]">{{ k.v }}</span>
|
||||
class="kpi-card px-5 py-4">
|
||||
<div class="flex items-center gap-2.5">
|
||||
<span class="kpi-ico" :style="{ background: k.tint }">
|
||||
<svg v-if="k.i === 'models'" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7" rx="1.5"/><rect x="14" y="3" width="7" height="7" rx="1.5"/><rect x="3" y="14" width="7" height="7" rx="1.5"/><rect x="14" y="14" width="7" height="7" rx="1.5"/></svg>
|
||||
<svg v-else-if="k.i === 'wand'" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 4 5 5L7 22l-5-5z"/><path d="m14 7 3 3"/><path d="M9 6V4M7 8H5M9 10v2M11 8h2"/></svg>
|
||||
<svg v-else-if="k.i === 'image'" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 16 5-5 3 3 4-4 6 6"/><circle cx="9" cy="9" r="1.4"/></svg>
|
||||
<svg v-else viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2 3 14h7l-1 8 10-12h-7z"/></svg>
|
||||
</span>
|
||||
<span class="text-[26px] font-black tabular-nums text-[color:var(--fg)]">{{ k.v }}</span>
|
||||
</div>
|
||||
<div class="mt-1.5 text-[10px] font-bold uppercase tracking-[0.18em] text-[#111]/60">{{ k.l }}</div>
|
||||
<div class="mt-1.5 text-[10px] font-bold uppercase tracking-[0.18em] text-[color:var(--fg-3)]">{{ k.l }}</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -371,15 +382,15 @@ function useExample(ex) {
|
||||
注册即可开始，图像与视频都能试；不满意就换个模型，额度按次计费。
|
||||
</p>
|
||||
<button type="button" @click="go('/user')"
|
||||
class="mt-7 group inline-flex items-center gap-3 rounded-xl bg-[var(--m-orange)] text-white border-[3px] border-[color:var(--ink)] shadow-[5px_5px_0_var(--shadow-ink)] hover:shadow-[7px_7px_0_var(--shadow-ink)] hover:-translate-x-0.5 hover:-translate-y-0.5 active:translate-y-0.5 active:shadow-none pl-6 pr-3 py-3 text-sm font-extrabold transition-all">
|
||||
class="mt-7 group inline-flex items-center gap-3 rounded-xl text-white pl-6 pr-3 py-3 text-sm font-extrabold transition-all cta-go">
|
||||
免费开始
|
||||
<span class="w-8 h-8 rounded-lg bg-white text-[#111] border-2 border-[#111] grid place-items-center font-black group-hover:translate-x-1 transition-transform">→</span>
|
||||
<span class="w-8 h-8 rounded-lg bg-white/20 border border-white/30 grid place-items-center font-black group-hover:translate-x-1 transition-transform">→</span>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- thin footer line -->
|
||||
<footer class="mt-16 pt-10 border-t-[3px] border-t-[color:var(--ink)] flex flex-wrap items-center justify-between gap-4 text-xs font-semibold text-[color:var(--fg-3)]">
|
||||
<footer class="mt-16 pt-10 border-t border-t-[color:var(--ink-soft)] flex flex-wrap items-center justify-between gap-4 text-xs font-semibold text-[color:var(--fg-3)]">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="font-semibold text-[color:var(--fg-2)]">{{ site.title }}</span>
|
||||
<span>·</span>
|
||||
@@ -401,15 +412,18 @@ function useExample(ex) {
|
||||
gap: 0.5rem;
|
||||
max-width: 36rem;
|
||||
padding: 0.5rem;
|
||||
border-radius: 1rem;
|
||||
border-radius: 1.1rem;
|
||||
background: var(--surface);
|
||||
border: 3px solid var(--ink);
|
||||
box-shadow: 7px 7px 0 var(--shadow-ink);
|
||||
transition: box-shadow 0.2s ease, transform 0.2s ease;
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
backdrop-filter: blur(16px);
|
||||
border: 1px solid var(--glass-border);
|
||||
box-shadow: var(--glass-shadow-lg);
|
||||
transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
|
||||
}
|
||||
.composer:focus-within {
|
||||
transform: translate(-2px, -2px);
|
||||
box-shadow: 10px 10px 0 var(--m-orange);
|
||||
transform: translateY(-2px);
|
||||
border-color: rgb(124 92 252 / 0.5);
|
||||
box-shadow: 0 18px 50px var(--accent-glow), var(--glass-shadow);
|
||||
}
|
||||
.composer-input {
|
||||
flex: 1;
|
||||
@@ -425,48 +439,50 @@ function useExample(ex) {
|
||||
.composer-input::placeholder { color: var(--fg-faint); }
|
||||
.composer-go {
|
||||
flex: none;
|
||||
border: 2.5px solid var(--ink);
|
||||
border: 1px solid rgb(255 255 255 / 0.16);
|
||||
cursor: pointer;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
padding: 0.65rem 1.2rem;
|
||||
border-radius: 0.7rem;
|
||||
background: var(--m-orange);
|
||||
box-shadow: 3px 3px 0 var(--shadow-ink);
|
||||
border-radius: 0.75rem;
|
||||
background: linear-gradient(120deg, #7c5cfc, #5f6cf8 55%, #22d3ee 140%);
|
||||
box-shadow: 0 6px 18px var(--accent-glow);
|
||||
transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
|
||||
}
|
||||
.composer-go:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--shadow-ink); filter: brightness(1.06); }
|
||||
.composer-go:active { transform: scale(0.96) translateY(2px); box-shadow: 0 0 0 var(--shadow-ink); }
|
||||
.composer-go:hover { transform: translateY(-1px); box-shadow: 0 10px 26px var(--accent-glow); filter: brightness(1.07); }
|
||||
.composer-go:active { transform: scale(0.96) translateY(1px); box-shadow: 0 3px 10px var(--accent-glow); }
|
||||
|
||||
.chip {
|
||||
font-size: 12.5px;
|
||||
font-weight: 600;
|
||||
color: var(--fg-2);
|
||||
cursor: pointer;
|
||||
border: 2px solid var(--ink);
|
||||
border: 1px solid var(--ink-soft);
|
||||
padding: 0.4rem 0.8rem;
|
||||
border-radius: 0.6rem;
|
||||
border-radius: 999px;
|
||||
background: var(--surface);
|
||||
transition: color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
backdrop-filter: blur(10px);
|
||||
transition: color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
|
||||
}
|
||||
.chip:hover {
|
||||
color: #111;
|
||||
background: var(--m-yellow);
|
||||
box-shadow: 3px 3px 0 var(--shadow-ink);
|
||||
transform: translate(-1px, -1px);
|
||||
color: var(--fg);
|
||||
background: var(--hover);
|
||||
border-color: rgb(124 92 252 / 0.45);
|
||||
box-shadow: 0 4px 14px rgb(124 92 252 / 0.18);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
html.dark .chip:hover { color: #111; }
|
||||
|
||||
/* ---------- hero cards (kind=hero) ---------- */
|
||||
.fcard {
|
||||
position: absolute;
|
||||
border: 3px solid var(--ink);
|
||||
border: 1px solid var(--glass-border);
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
border-radius: 1rem;
|
||||
border-radius: 1.1rem;
|
||||
overflow: hidden;
|
||||
box-shadow: 7px 7px 0 var(--shadow-ink);
|
||||
box-shadow: var(--glass-shadow-lg);
|
||||
transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
|
||||
animation: fcardIn 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
|
||||
}
|
||||
@@ -511,28 +527,46 @@ html.dark .chip:hover { color: #111; }
|
||||
overflow: hidden;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
border: 2.5px solid var(--ink);
|
||||
border: 1px solid var(--glass-border);
|
||||
padding: 1.35rem;
|
||||
border-radius: 1rem;
|
||||
border-radius: 1.1rem;
|
||||
background: var(--surface);
|
||||
box-shadow: 5px 5px 0 var(--shadow-ink);
|
||||
transition: transform 0.18s ease, box-shadow 0.18s ease;
|
||||
-webkit-backdrop-filter: blur(14px);
|
||||
backdrop-filter: blur(14px);
|
||||
box-shadow: var(--glass-shadow);
|
||||
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
|
||||
}
|
||||
.cap-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -3rem;
|
||||
right: -3rem;
|
||||
width: 9rem;
|
||||
height: 9rem;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle, rgb(124 92 252 / 0.22), transparent 65%);
|
||||
opacity: 0;
|
||||
transition: opacity 0.25s ease;
|
||||
}
|
||||
.cap-card:hover {
|
||||
transform: translate(-3px, -3px);
|
||||
box-shadow: 9px 9px 0 var(--m-orange);
|
||||
transform: translateY(-4px);
|
||||
border-color: rgb(124 92 252 / 0.45);
|
||||
box-shadow: var(--glass-shadow-lg), 0 10px 30px rgb(124 92 252 / 0.14);
|
||||
}
|
||||
html.dark .cap-card { background: rgb(255 255 255 / 0.05); }
|
||||
.cap-arrow { position: absolute; top: 1.1rem; right: 1.1rem; color: var(--fg-3); transition: color 0.15s ease; }
|
||||
.cap-card:hover .cap-arrow { color: var(--m-orange); }
|
||||
.cap-card:hover::before { opacity: 1; }
|
||||
.cap-arrow { position: absolute; top: 1.1rem; right: 1.1rem; color: var(--fg-3); transition: color 0.15s ease, transform 0.15s ease; }
|
||||
.cap-card:hover .cap-arrow { color: var(--m-orange); transform: translate(2px, -2px); }
|
||||
.cap-icon {
|
||||
position: relative;
|
||||
width: 2.6rem;
|
||||
height: 2.6rem;
|
||||
border-radius: 0.7rem;
|
||||
border: 2px solid var(--ink);
|
||||
border-radius: 0.8rem;
|
||||
border: 1px solid var(--ink-soft);
|
||||
display: grid;
|
||||
place-items: center;
|
||||
margin-bottom: 0.9rem;
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
.cap-icon svg { width: 1.25rem; height: 1.25rem; }
|
||||
.cap-meta {
|
||||
@@ -542,7 +576,7 @@ html.dark .cap-card { background: rgb(255 255 255 / 0.05); }
|
||||
color: var(--fg-2);
|
||||
padding: 0.18rem 0.5rem;
|
||||
border-radius: 0.4rem;
|
||||
border: 1.5px solid var(--ink-soft);
|
||||
border: 1px solid var(--ink-soft);
|
||||
background: var(--surface-2);
|
||||
}
|
||||
|
||||
@@ -550,14 +584,14 @@ html.dark .cap-card { background: rgb(255 255 255 / 0.05); }
|
||||
.tile {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border: 2.5px solid var(--ink);
|
||||
border: 1px solid var(--glass-border);
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
border-radius: 1rem;
|
||||
box-shadow: 5px 5px 0 var(--shadow-ink);
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
border-radius: 1.1rem;
|
||||
box-shadow: var(--glass-shadow);
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
|
||||
}
|
||||
.tile:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--m-blue); }
|
||||
.tile:hover { transform: translateY(-3px); border-color: rgb(34 211 238 / 0.5); box-shadow: var(--glass-shadow-lg), 0 10px 30px rgb(34 211 238 / 0.14); }
|
||||
.tile-veil {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
@@ -584,14 +618,14 @@ html.dark .cap-card { background: rgb(255 255 255 / 0.05); }
|
||||
display: block;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
border: 2.5px solid var(--ink);
|
||||
border: 1px solid var(--glass-border);
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
border-radius: 1rem;
|
||||
box-shadow: 5px 5px 0 var(--shadow-ink);
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
border-radius: 1.1rem;
|
||||
box-shadow: var(--glass-shadow);
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
|
||||
}
|
||||
.work:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--m-pink); }
|
||||
.work:hover { transform: translateY(-3px); border-color: rgb(232 121 249 / 0.5); box-shadow: var(--glass-shadow-lg), 0 10px 30px rgb(232 121 249 / 0.14); }
|
||||
.work-img { display: block; width: 100%; aspect-ratio: 4 / 5; transition: transform 0.5s ease; }
|
||||
.work:hover .work-img { transform: scale(1.04); }
|
||||
.work-overlay {
|
||||
@@ -627,11 +661,12 @@ html.dark .cap-card { background: rgb(255 255 255 / 0.05); }
|
||||
font-style: normal;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
color: rgb(11 13 19);
|
||||
background: var(--m-yellow);
|
||||
border: 2px solid #111;
|
||||
color: #fff;
|
||||
background: linear-gradient(120deg, #7c5cfc, #22d3ee);
|
||||
border: 1px solid rgb(255 255 255 / 0.25);
|
||||
border-radius: 0.5rem;
|
||||
padding: 0.4rem 0.8rem;
|
||||
box-shadow: 0 4px 14px rgb(124 92 252 / 0.4);
|
||||
}
|
||||
|
||||
/* ---------- model row ---------- */
|
||||
@@ -643,14 +678,15 @@ html.dark .cap-card { background: rgb(255 255 255 / 0.05); }
|
||||
width: 14.5rem;
|
||||
overflow: hidden;
|
||||
padding: 1.25rem;
|
||||
border-radius: 1rem;
|
||||
border: 2.5px solid var(--ink);
|
||||
border-radius: 1.1rem;
|
||||
border: 1px solid var(--glass-border);
|
||||
background: var(--surface);
|
||||
box-shadow: 5px 5px 0 var(--shadow-ink);
|
||||
transition: box-shadow 0.18s ease, transform 0.18s ease;
|
||||
-webkit-backdrop-filter: blur(14px);
|
||||
backdrop-filter: blur(14px);
|
||||
box-shadow: var(--glass-shadow);
|
||||
transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
|
||||
}
|
||||
.model-card:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--m-mint); }
|
||||
html.dark .model-card { background: rgb(255 255 255 / 0.05); }
|
||||
.model-card:hover { transform: translateY(-3px); border-color: rgb(124 92 252 / 0.45); box-shadow: var(--glass-shadow-lg); }
|
||||
.model-glow {
|
||||
position: absolute;
|
||||
top: -2.5rem;
|
||||
@@ -659,39 +695,43 @@ html.dark .model-card { background: rgb(255 255 255 / 0.05); }
|
||||
height: 8rem;
|
||||
border-radius: 50%;
|
||||
filter: blur(40px);
|
||||
opacity: 0.3;
|
||||
opacity: 0.35;
|
||||
}
|
||||
.model-tag {
|
||||
font-size: 10.5px;
|
||||
font-weight: 800;
|
||||
padding: 0.18rem 0.55rem;
|
||||
border-radius: 0.4rem;
|
||||
border: 1.5px solid var(--ink);
|
||||
border: 1px solid var(--ink-soft);
|
||||
}
|
||||
.model-tag.is-image { background: var(--m-mint); color: #065f46; }
|
||||
.model-tag.is-video { background: var(--m-blue); color: #075985; }
|
||||
.model-tag.is-image { background: rgb(52 211 153 / 0.16); color: rgb(5 150 105); border-color: rgb(52 211 153 / 0.4); }
|
||||
.model-tag.is-video { background: rgb(34 211 238 / 0.16); color: rgb(8 145 178); border-color: rgb(34 211 238 / 0.4); }
|
||||
html.dark .model-tag.is-image { color: rgb(110 231 183); }
|
||||
html.dark .model-tag.is-video { color: rgb(103 232 249); }
|
||||
|
||||
/* ---------- hero band + memphis deco ---------- */
|
||||
/* ---------- hero band + aurora deco ---------- */
|
||||
.hero-band {
|
||||
border-radius: 2rem;
|
||||
}
|
||||
/* Floating crayon chips scattered around the headline — each is a small
|
||||
ink-outlined tile with a hard shadow and its own idle animation. */
|
||||
/* Floating glass chips scattered around the headline — each is a small
|
||||
frosted tile with a soft shadow and its own idle animation. */
|
||||
.deco {
|
||||
position: absolute;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border: 3px solid var(--ink);
|
||||
box-shadow: 5px 5px 0 var(--shadow-ink);
|
||||
border: 1px solid var(--glass-border);
|
||||
box-shadow: var(--glass-shadow);
|
||||
font-weight: 900;
|
||||
color: #111;
|
||||
color: var(--fg);
|
||||
background: var(--surface);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
backdrop-filter: blur(12px);
|
||||
}
|
||||
.deco svg { width: 45%; height: 45%; color: var(--m-orange); }
|
||||
.deco-a {
|
||||
left: 7%; top: 22%;
|
||||
width: 3.6rem; height: 3.6rem;
|
||||
border-radius: 0.9rem;
|
||||
background: var(--m-yellow);
|
||||
font-size: 1.5rem;
|
||||
border-radius: 1rem;
|
||||
transform: rotate(-8deg);
|
||||
animation: memphis-float 6s ease-in-out infinite;
|
||||
}
|
||||
@@ -699,34 +739,35 @@ html.dark .model-card { background: rgb(255 255 255 / 0.05); }
|
||||
right: 8%; top: 16%;
|
||||
width: 3rem; height: 3rem;
|
||||
border-radius: 999px;
|
||||
background: var(--m-pink);
|
||||
font-size: 1.2rem;
|
||||
transform: rotate(6deg);
|
||||
animation: memphis-wiggle 3.5s ease-in-out infinite;
|
||||
}
|
||||
.deco-b svg { color: var(--m-orange-2); }
|
||||
.deco-c {
|
||||
left: 13%; bottom: 16%;
|
||||
width: 3.2rem; height: 2.4rem;
|
||||
border-radius: 0.6rem;
|
||||
background: var(--m-blue);
|
||||
border-radius: 0.7rem;
|
||||
font-size: 0.95rem;
|
||||
letter-spacing: 0.05em;
|
||||
color: var(--m-orange);
|
||||
transform: rotate(9deg);
|
||||
animation: memphis-float 7s ease-in-out infinite reverse;
|
||||
}
|
||||
.deco-d {
|
||||
right: 13%; bottom: 20%;
|
||||
width: 3.4rem; height: 2.6rem;
|
||||
border-radius: 0.7rem;
|
||||
background: var(--m-mint);
|
||||
font-size: 1.15rem;
|
||||
border-radius: 0.8rem;
|
||||
transform: rotate(-7deg);
|
||||
animation: memphis-bounce 4s ease-in-out infinite;
|
||||
}
|
||||
.deco-d svg { color: #34d399; }
|
||||
.deco-star {
|
||||
left: 22%; top: 10%;
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
background: transparent;
|
||||
-webkit-backdrop-filter: none;
|
||||
backdrop-filter: none;
|
||||
font-size: 1.7rem;
|
||||
color: var(--m-orange);
|
||||
animation: memphis-wiggle 4s ease-in-out infinite;
|
||||
@@ -739,14 +780,37 @@ html.dark .model-card { background: rgb(255 255 255 / 0.05); }
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) { .deco { animation: none; } }
|
||||
|
||||
/* KPI tiles — flat crayon fills, dark ink type (readable in both themes). */
|
||||
/* KPI tiles — frosted cards with a gradient icon chip. */
|
||||
.kpi-card {
|
||||
border: 2.5px solid var(--ink);
|
||||
border-radius: 1rem;
|
||||
box-shadow: 5px 5px 0 var(--shadow-ink);
|
||||
transition: transform 0.18s ease, box-shadow 0.18s ease;
|
||||
border: 1px solid var(--glass-border);
|
||||
border-radius: 1.1rem;
|
||||
background: var(--surface);
|
||||
-webkit-backdrop-filter: blur(14px);
|
||||
backdrop-filter: blur(14px);
|
||||
box-shadow: var(--glass-shadow);
|
||||
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
|
||||
}
|
||||
.kpi-card:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--shadow-ink); }
|
||||
.kpi-card:hover { transform: translateY(-3px); border-color: rgb(124 92 252 / 0.4); box-shadow: var(--glass-shadow-lg); }
|
||||
.kpi-ico {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
border-radius: 0.6rem;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
color: #fff;
|
||||
flex: none;
|
||||
box-shadow: 0 4px 12px rgb(124 92 252 / 0.3);
|
||||
}
|
||||
.kpi-ico svg { width: 1.05rem; height: 1.05rem; }
|
||||
|
||||
/* ---------- CTA button ---------- */
|
||||
.cta-go {
|
||||
background: linear-gradient(120deg, #7c5cfc, #5f6cf8 55%, #22d3ee 140%);
|
||||
border: 1px solid rgb(255 255 255 / 0.2);
|
||||
box-shadow: 0 10px 30px var(--accent-glow);
|
||||
}
|
||||
.cta-go:hover { transform: translateY(-2px); box-shadow: 0 14px 38px var(--accent-glow); filter: brightness(1.07); }
|
||||
.cta-go:active { transform: translateY(1px) scale(0.98); box-shadow: 0 4px 14px var(--accent-glow); }
|
||||
|
||||
/* ---------- gallery marquee ---------- */
|
||||
.marquee-mask {
|
||||
@@ -767,18 +831,19 @@ html.dark .model-card { background: rgb(255 255 255 / 0.05); }
|
||||
width: 15rem;
|
||||
height: 10rem;
|
||||
overflow: hidden;
|
||||
border: 2.5px solid var(--ink);
|
||||
border: 1px solid var(--glass-border);
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
border-radius: 1rem;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
box-shadow: 4px 4px 0 var(--shadow-ink);
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
box-shadow: var(--glass-shadow);
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
|
||||
}
|
||||
.gcard:hover {
|
||||
transform: translate(-2px, -2px);
|
||||
box-shadow: 7px 7px 0 var(--m-orange);
|
||||
transform: translateY(-3px);
|
||||
border-color: rgb(124 92 252 / 0.5);
|
||||
box-shadow: var(--glass-shadow-lg), 0 10px 30px rgb(124 92 252 / 0.16);
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.marquee { animation: none; }
|
||||
|
||||
@@ -328,7 +328,7 @@ onUnmounted(() => window.removeEventListener('keydown', onKey))
|
||||
<span v-if="f.resolution" class="text-emerald-300/90">{{ f.resolution }}</span>
|
||||
<span v-if="f.ratio" class="text-white/40">{{ f.ratio }}</span>
|
||||
<span v-if="f.kind === 'video' && f.duration" class="text-rose-300/80">{{ f.duration }}</span>
|
||||
<span v-if="f.deai" class="text-[#ec5b13]">去AI</span>
|
||||
<span v-if="f.deai" class="text-[#a78bfa]">去AI</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="text-[10px] text-white/35 mt-0.5 tabular-nums">{{ fmtSize(f.size) }} · {{ fmtTs(f.mtime) }}</div>
|
||||
|
||||
@@ -80,26 +80,27 @@ function toast(m) {
|
||||
<div class="theme-text space-y-10">
|
||||
<!-- header -->
|
||||
<header>
|
||||
<span class="sticker">🎀 奖励</span>
|
||||
<span class="sticker">✦ 奖励</span>
|
||||
<h1 class="mt-3 text-4xl md:text-5xl font-bold tracking-tight">邀请好友</h1>
|
||||
<p class="text-white/45 mt-2">好友用你的链接注册,并完成首次生图后,你得 {{ INVITE_REWARD }} 积分。</p>
|
||||
</header>
|
||||
|
||||
<section class="relative rounded-2xl p-7 md:p-8 overflow-hidden ink-card">
|
||||
<div class="memphis-dots absolute inset-0 opacity-30 pointer-events-none"></div>
|
||||
<div class="relative inline-grid w-11 h-11 rounded-xl bg-[var(--m-yellow)] border-2 border-[color:var(--ink)] shadow-[3px_3px_0_var(--shadow-ink)] grid place-items-center text-[#111]">
|
||||
<div class="relative inline-grid w-11 h-11 rounded-xl text-white place-items-center"
|
||||
style="background: linear-gradient(135deg, #7c5cfc, #22d3ee); box-shadow: 0 8px 20px var(--accent-glow)">
|
||||
<Icon name="accounts" class="w-5 h-5" />
|
||||
</div>
|
||||
|
||||
<!-- summary -->
|
||||
<div class="relative mt-6 grid grid-cols-2 gap-3">
|
||||
<div class="rounded-xl px-4 py-3 border-2 border-[color:var(--ink)] bg-[var(--m-mint)] shadow-[3px_3px_0_var(--shadow-ink)]">
|
||||
<div class="text-2xl font-black tabular-nums text-[#111]">{{ inviteCount }}</div>
|
||||
<div class="text-[10px] text-[#111]/55 mt-1 uppercase tracking-widest font-bold">已邀请</div>
|
||||
<div class="rounded-xl px-4 py-3 border border-[color:var(--glass-border)] bg-[var(--surface)] shadow-[var(--glass-shadow)]">
|
||||
<div class="text-2xl font-black tabular-nums text-[color:var(--fg)]">{{ inviteCount }}</div>
|
||||
<div class="text-[10px] text-[color:var(--fg-3)] mt-1 uppercase tracking-widest font-bold">已邀请</div>
|
||||
</div>
|
||||
<div class="rounded-xl px-4 py-3 border-2 border-[color:var(--ink)] bg-[var(--m-blue)] shadow-[3px_3px_0_var(--shadow-ink)]">
|
||||
<div class="text-2xl font-black tabular-nums text-[#111]">{{ inviteEarned.toLocaleString('en-US') }}</div>
|
||||
<div class="text-[10px] text-[#111]/55 mt-1 uppercase tracking-widest font-bold">累计积分</div>
|
||||
<div class="rounded-xl px-4 py-3 border border-[color:var(--glass-border)] bg-[var(--surface)] shadow-[var(--glass-shadow)]">
|
||||
<div class="text-2xl font-black tabular-nums text-[color:var(--fg)]">{{ inviteEarned.toLocaleString('en-US') }}</div>
|
||||
<div class="text-[10px] text-[color:var(--fg-3)] mt-1 uppercase tracking-widest font-bold">累计积分</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -108,11 +109,12 @@ function toast(m) {
|
||||
<label class="block text-xs font-bold text-white/50 mb-2">邀请码</label>
|
||||
<div class="flex gap-2">
|
||||
<button @click="copyCode"
|
||||
class="flex-1 rounded-xl border-2 border-[color:var(--ink)] bg-[var(--surface)] px-4 py-3 text-sm font-mono text-left shadow-[3px_3px_0_var(--shadow-ink)] hover:-translate-y-0.5 hover:shadow-[4px_4px_0_var(--shadow-ink)] transition-all">
|
||||
class="flex-1 rounded-xl border border-[color:var(--ink-soft)] bg-[var(--surface)] px-4 py-3 text-sm font-mono text-left shadow-[var(--glass-shadow)] hover:-translate-y-0.5 hover:border-[rgb(124_92_252/0.45)] transition-all">
|
||||
{{ inviteCode || '—' }}
|
||||
</button>
|
||||
<button @click="copyInvite"
|
||||
class="rounded-xl border-[2.5px] border-[color:var(--ink)] bg-[var(--m-orange)] text-white px-5 py-3 text-sm font-extrabold shadow-[3px_3px_0_var(--shadow-ink)] hover:-translate-y-0.5 hover:shadow-[4px_4px_0_var(--shadow-ink)] active:translate-y-0.5 active:shadow-none transition-all">
|
||||
class="rounded-xl border border-white/20 text-white px-5 py-3 text-sm font-extrabold hover:-translate-y-0.5 active:translate-y-0.5 transition-all"
|
||||
style="background: linear-gradient(120deg, #7c5cfc, #22d3ee); box-shadow: 0 8px 20px var(--accent-glow)">
|
||||
复制链接
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -327,7 +327,7 @@ const sourcePill = (s) => ({
|
||||
</template>
|
||||
<template v-if="e.deai">
|
||||
<span class="text-white/25 mx-1.5">·</span>
|
||||
<span class="text-[#ec5b13]">去AI特征</span>
|
||||
<span class="text-[#a78bfa]">去AI特征</span>
|
||||
</template>
|
||||
</td>
|
||||
<td class="px-3 py-3.5 text-right text-xs tabular-nums align-middle whitespace-nowrap">
|
||||
|
||||
@@ -1058,7 +1058,7 @@ onUnmounted(() => {
|
||||
<div class="pg-cap text-[11px] leading-tight font-medium line-clamp-2 transition-colors"
|
||||
:class="item.prompt ? 'pointer-events-auto cursor-pointer' : ''"
|
||||
:title="item.prompt ? '点击复制提示词' : ''" @click.stop="copyPrompt(item)">{{ item.prompt }}</div>
|
||||
<div class="pg-cap-sub text-[9px] mt-0.5 font-mono truncate">{{ item.model }}<span v-if="item.deai"> · <span class="text-[#ec5b13]">去AI</span></span><span v-if="item.elapsed_ms"> · {{ (item.elapsed_ms / 1000).toFixed(1) }}s</span></div>
|
||||
<div class="pg-cap-sub text-[9px] mt-0.5 font-mono truncate">{{ item.model }}<span v-if="item.deai"> · <span class="text-[#a78bfa]">去AI</span></span><span v-if="item.elapsed_ms"> · {{ (item.elapsed_ms / 1000).toFixed(1) }}s</span></div>
|
||||
</div>
|
||||
</template>
|
||||
<!-- pending / running -->
|
||||
|
||||
@@ -273,7 +273,7 @@ async function recharge() {
|
||||
<section class="lg:col-span-2 card overflow-hidden">
|
||||
<div class="p-7 md:p-8 relative">
|
||||
<div class="absolute -top-16 -right-16 w-48 h-48 rounded-full opacity-30 blur-3xl"
|
||||
style="background: radial-gradient(circle,#f97316,transparent 60%)"></div>
|
||||
style="background: radial-gradient(circle,#8b5cf6,transparent 60%)"></div>
|
||||
<div class="relative grid md:grid-cols-[260px_1fr] gap-8 items-start">
|
||||
<div>
|
||||
<div class="inline-grid w-10 h-10 rounded-xl bg-orange-500/15 ring-1 ring-orange-400/30 grid place-items-center text-orange-300">
|
||||
|
||||
@@ -257,7 +257,7 @@ const params = (e) => {
|
||||
:title="e.error + ' — 点击复制'"
|
||||
@click.stop="copyError(e)">⚠ {{ e.error }}</div>
|
||||
</td>
|
||||
<td class="px-3 py-3 align-middle text-xs text-slate-500 tabular-nums">{{ params(e) || '—' }}<span v-if="e.deai"> · <span class="text-[#ec5b13]">去AI特征</span></span></td>
|
||||
<td class="px-3 py-3 align-middle text-xs text-slate-500 tabular-nums">{{ params(e) || '—' }}<span v-if="e.deai"> · <span class="text-[#a78bfa]">去AI特征</span></span></td>
|
||||
<td class="px-3 py-3 align-middle text-right text-xs text-slate-700 tabular-nums">{{ e.cost ? points(e.cost) : '—' }}</td>
|
||||
<td class="px-3 py-3 align-middle text-right text-xs text-slate-500 tabular-nums">{{ e.elapsed_ms ? (e.elapsed_ms / 1000).toFixed(1) + 's' : '—' }}</td>
|
||||
</tr>
|
||||
|
||||
@@ -361,7 +361,7 @@ onUnmounted(() => {
|
||||
<span v-if="e.resolution" class="text-emerald-300/90">{{ e.resolution }}</span>
|
||||
<span v-if="e.ratio" class="text-white/40">{{ e.ratio }}</span>
|
||||
<span v-if="e.kind === 'video' && e.duration" class="text-rose-300/80">{{ e.duration }}</span>
|
||||
<span v-if="e.deai" class="text-[#ec5b13]">去AI</span>
|
||||
<span v-if="e.deai" class="text-[#a78bfa]">去AI</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="text-[10px] text-white/35 mt-0.5 tabular-nums">{{ fmtTs(e.ts) }}<span v-if="e.elapsed_ms"> · {{ fmtMs(e.elapsed_ms) }}</span></div>
|
||||
|
||||
Reference in New Issue
Block a user