wm
c98758e61b
- 微信小程序 <text> 对 @font-face 自定义字体支持不可靠（开发者工具/真机均可能不渲染），图标回退成字符 - 改用 <image> 渲染 Lucide SVG 矢量图（data:image/svg+xml），彻底绕开字体加载限制，矢量/可上色 - 新增 utils/icon-svg.js（49 图标内层 SVG，stroke/fill 用 __C__ 占位），fc-icon 按 color 动态拼色 - 内置设计 token→色值映射，调用方传 var(--xxx) 自动解析为具体色值 - 移除 app.wxss 中已无用的 @font-face（字体方案废弃）
155 lines
5.8 KiB
Plaintext
155 lines
5.8 KiB
Plaintext
/* ===== FITCOACH 设计系统：动能暗色（Kinetic Dark） =====
|
||
强调色 accent = Volt 荧光绿 #B6F24E（用户拍板）。
|
||
为兼容现有页面对 --gold/--teal 等变量名的引用，保留变量名、改其色值为新调色板；
|
||
并补全套语义色/字号/间距/圆角/阴影/动效 Token（真源 design-system/design-tokens.json）。 */
|
||
page {
|
||
/* —— 颜色 —— */
|
||
--bg: #0B0F0E; /* 页面背景（冷中性近黑） */
|
||
--bg-grad: radial-gradient(120% 80% at 50% 0%, rgba(17,23,20,0) 0%, #0B0F0E 60%);
|
||
--surface: #141A18; /* 卡片/容器 */
|
||
--surface-2: #1C2421; /* 次级表面 chip/输入/选中 */
|
||
--surface-warm: #1A211E; /* 悬浮/高亮表面 */
|
||
|
||
--text: #ECF1EF; /* 主文本 */
|
||
--text-2: #9BA7A1; /* 次级文本 */
|
||
--text-3: #6B7670; /* 三级/元数据（仅 ≥24rpx） */
|
||
|
||
--line: rgba(255,255,255,0.08); /* 默认边框/分隔线 */
|
||
--border-strong: rgba(255,255,255,0.14); /* 强调边框（选中态） */
|
||
--border-soft: rgba(255,255,255,0.05); /* 内部行分隔 */
|
||
|
||
/* 强调色（原 --gold 命名保留以兼容引用，值改为 Volt 绿） */
|
||
--gold: #B6F24E; /* accent 主色 */
|
||
--gold-2: #C7F56E; /* accent hover */
|
||
--gold-soft: rgba(182,242,78,0.12); /* accent 淡底 */
|
||
--gold-line: rgba(182,242,78,0.28); /* accent 边框 */
|
||
--teal: #2BD9A6; /* success（原语义） */
|
||
|
||
/* 语义色（新增） */
|
||
--accent: #B6F24E;
|
||
--accent-hover: #C7F56E;
|
||
--accent-active: #9EDB3A;
|
||
--accent-on: #0E1A05; /* accent 背景上的前景（深绿，对比>7:1） */
|
||
--accent-soft: rgba(182,242,78,0.12);
|
||
--accent-ring: rgba(182,242,78,0.38);
|
||
--success: #2BD9A6;
|
||
--success-on: #04201A;
|
||
--success-soft: rgba(43,217,166,0.12);
|
||
--warn: #F2B53D;
|
||
--danger: #FF5C5C; /* 替代旧 #E5544B */
|
||
--danger-soft: rgba(255,92,92,0.12);
|
||
--info: #4FA8FF;
|
||
--bar-bg: rgba(11,15,14,0.92); /* 底部操作条毛玻璃底（=bg 带透明） */
|
||
--float-bg: rgba(11,15,14,0.55); /* 浮动按钮底 */
|
||
--scrim: rgba(0,0,0,0.5); /* 弹层遮罩 */
|
||
|
||
/* 字体三族（含中文） */
|
||
--font-display: 'Manrope', 'PingFang SC', 'HarmonyOS Sans SC', 'Source Han Sans SC', 'Noto Sans CJK SC', sans-serif;
|
||
--font-body: 'PingFang SC', 'HarmonyOS Sans SC', 'Source Han Sans SC', 'Noto Sans CJK SC', -apple-system, sans-serif;
|
||
--font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;
|
||
|
||
/* 字号阶梯（rpx，22–72） */
|
||
--fs-xs: 22rpx; --fs-sm: 24rpx; --fs-base: 28rpx; --fs-md: 30rpx;
|
||
--fs-lg: 32rpx; --fs-xl: 36rpx; --fs-2xl: 44rpx; --fs-3xl: 56rpx; --fs-4xl: 72rpx;
|
||
|
||
/* 字重 / 字距 */
|
||
--fw-regular: 400; --fw-medium: 500; --fw-semibold: 600;
|
||
--ls-eyebrow: 0.08em; --ls-title: -0.02em; --ls-body: 0;
|
||
|
||
/* 间距尺度（4px 网格） */
|
||
--sp-1: 8rpx; --sp-2: 16rpx; --sp-3: 24rpx; --sp-4: 32rpx; --sp-5: 40rpx;
|
||
--sp-6: 48rpx; --sp-8: 64rpx; --sp-10: 80rpx; --sp-12: 96rpx; --sp-16: 128rpx;
|
||
|
||
/* 圆角（收紧） */
|
||
--radius-sm: 16rpx; --radius: 24rpx; --radius-md: 24rpx;
|
||
--radius-lg: 32rpx; --radius-xl: 40rpx; --radius-pill: 9999rpx;
|
||
|
||
/* 阴影（Hairline First：默认无阴影，靠发丝边框） */
|
||
--shadow: none;
|
||
--shadow-ring: 0 0 0 1rpx rgba(255,255,255,0.08);
|
||
--shadow-raised: 0 8rpx 24rpx rgba(0,0,0,0.32);
|
||
--shadow-float: 0 12rpx 40rpx rgba(0,0,0,0.45);
|
||
--shadow-glow: 0 8rpx 24rpx rgba(182,242,78,0.28); /* 唯一允许的彩色阴影：CTA */
|
||
--focus-ring: 0 0 0 3rpx rgba(182,242,78,0.45);
|
||
|
||
/* 动效 */
|
||
--motion-fast: 150ms; --motion-base: 200ms; --motion-slow: 300ms;
|
||
--ease: cubic-bezier(0.2, 0, 0, 1);
|
||
|
||
background: var(--bg);
|
||
color: var(--text);
|
||
font-family: var(--font-body);
|
||
font-size: var(--fs-base);
|
||
line-height: 1.5;
|
||
}
|
||
|
||
view, text, scroll-view, image, input, textarea, button {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* ===== 通用工具类 ===== */
|
||
.eyebrow {
|
||
font-size: var(--fs-xs);
|
||
letter-spacing: var(--ls-eyebrow);
|
||
color: var(--accent);
|
||
text-transform: uppercase;
|
||
font-weight: var(--fw-semibold);
|
||
}
|
||
|
||
.section { padding: var(--sp-5) var(--sp-4); }
|
||
.section + .section { border-top: 1rpx solid var(--line); }
|
||
|
||
.card {
|
||
background: var(--surface);
|
||
border-radius: var(--radius);
|
||
border: 1rpx solid var(--line);
|
||
}
|
||
|
||
.chip {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
padding: 10rpx 24rpx;
|
||
border-radius: var(--radius-pill);
|
||
background: var(--surface-2);
|
||
color: var(--text-2);
|
||
font-size: var(--fs-sm);
|
||
border: 1rpx solid var(--line);
|
||
}
|
||
|
||
.gold-text { color: var(--gold); }
|
||
.muted { color: var(--text-2); }
|
||
.row { display: flex; flex-direction: row; align-items: center; }
|
||
.col { display: flex; flex-direction: column; }
|
||
|
||
.empty {
|
||
color: var(--text-3);
|
||
font-size: var(--fs-sm);
|
||
text-align: center;
|
||
padding: 80rpx 0;
|
||
}
|
||
|
||
.tag {
|
||
font-size: 20rpx;
|
||
color: var(--text-2);
|
||
background: var(--surface-2);
|
||
padding: 4rpx 12rpx;
|
||
border-radius: var(--radius-pill);
|
||
}
|
||
.tag--gold {
|
||
color: var(--gold-2);
|
||
background: var(--gold-soft);
|
||
}
|
||
|
||
/* ===== 横向滚动右侧渐隐遮罩（提示可右滑） ===== */
|
||
.hscroll, .chip-scroll, .filterbar, .emoji-row, .prog-scroll {
|
||
position: relative;
|
||
}
|
||
.hscroll::after, .chip-scroll::after, .filterbar::after, .emoji-row::after, .prog-scroll::after {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0; right: 0; bottom: 0;
|
||
width: 56rpx;
|
||
pointer-events: none;
|
||
background: linear-gradient(90deg, rgba(11,15,14,0) 0%, rgba(11,15,14,0.9) 100%);
|
||
}
|