feat: 足迹 Footprints 个人留痕系统
桌面应用(Tauri+React+SQLite):时间线/记录/学年学科成绩梯度/统计/类型与字段模板/附件内容寻址/详情视图/PWA 同步服务端(sync-server):多用户+邀请码/LWW推拉/seq游标/附件去重/Docker部署 多端同步地基:uuid v7/HLC混合逻辑时钟/软删除墓碑/sync_oplog,Node与Rust双端一致并通过自动化测试
This commit is contained in:
@@ -0,0 +1,135 @@
|
||||
@import 'tailwindcss';
|
||||
|
||||
/* ============================================
|
||||
Footprints 设计系统 v2 —— 企业级视觉规范
|
||||
栅格 4px · 控件高 28px · 正文 14px · 圆角 6/8
|
||||
============================================ */
|
||||
|
||||
@theme inline {
|
||||
--color-bg: var(--bg);
|
||||
--color-surface: var(--surface);
|
||||
--color-surface-2: var(--surface-2);
|
||||
--color-surface-3: var(--surface-3);
|
||||
--color-line: var(--border);
|
||||
--color-line-strong: var(--border-strong);
|
||||
--color-ink-1: var(--text-1);
|
||||
--color-ink-2: var(--text-2);
|
||||
--color-ink-3: var(--text-3);
|
||||
--color-brand: var(--brand);
|
||||
--color-brand-hover: var(--brand-hover);
|
||||
--color-brand-subtle: var(--brand-subtle);
|
||||
--color-brand-text: var(--brand-text);
|
||||
--color-success: var(--success);
|
||||
--color-success-subtle: var(--success-subtle);
|
||||
--color-warning: var(--warning);
|
||||
--color-warning-subtle: var(--warning-subtle);
|
||||
--color-danger: var(--danger);
|
||||
--color-danger-subtle: var(--danger-subtle);
|
||||
|
||||
--radius-sm: 4px;
|
||||
--radius-md: 6px;
|
||||
--radius-lg: 8px;
|
||||
|
||||
--shadow-card: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.05);
|
||||
--shadow-pop: 0 12px 32px rgba(16, 24, 40, 0.16), 0 2px 8px rgba(16, 24, 40, 0.08);
|
||||
}
|
||||
|
||||
/* ---------- 亮色 ---------- */
|
||||
:root {
|
||||
--bg: #f4f5f7;
|
||||
--surface: #ffffff;
|
||||
--surface-2: #f9fafb;
|
||||
--surface-3: #eff1f4;
|
||||
--border: #e5e8ec;
|
||||
--border-strong: #ccd3dc;
|
||||
--text-1: #15181d;
|
||||
--text-2: #454e5c;
|
||||
--text-3: #7e8798;
|
||||
--brand: #3056d3;
|
||||
--brand-hover: #2748b8;
|
||||
--brand-subtle: #eef2ff;
|
||||
--brand-text: #2748b8;
|
||||
--success: #15803d;
|
||||
--success-subtle: #ecfdf3;
|
||||
--warning: #b45309;
|
||||
--warning-subtle: #fffaeb;
|
||||
--danger: #dc2626;
|
||||
--danger-subtle: #fef3f2;
|
||||
}
|
||||
|
||||
/* ---------- 暗色 ---------- */
|
||||
.dark {
|
||||
--bg: #0e1013;
|
||||
--surface: #15181e;
|
||||
--surface-2: #1a1e25;
|
||||
--surface-3: #22272f;
|
||||
--border: #262c35;
|
||||
--border-strong: #3a424f;
|
||||
--text-1: #e8ebf1;
|
||||
--text-2: #a2abb9;
|
||||
--text-3: #6d7684;
|
||||
--brand: #7c93f5;
|
||||
--brand-hover: #94a8f8;
|
||||
--brand-subtle: #1c2340;
|
||||
--brand-text: #a3b4f8;
|
||||
--success: #4ade80;
|
||||
--success-subtle: #12251a;
|
||||
--warning: #fbbf24;
|
||||
--warning-subtle: #2a2213;
|
||||
--danger: #f87171;
|
||||
--danger-subtle: #2c1618;
|
||||
}
|
||||
|
||||
html, body, #root { height: 100%; }
|
||||
|
||||
body {
|
||||
background: var(--bg);
|
||||
color: var(--text-1);
|
||||
font-family: system-ui, 'Segoe UI Variable Text', 'Segoe UI', 'Microsoft YaHei UI', 'Microsoft YaHei', 'PingFang SC', sans-serif;
|
||||
font-size: 14px;
|
||||
line-height: 1.55;
|
||||
letter-spacing: 0.005em;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
/* 标题排版:紧凑字距 */
|
||||
h1, h2, h3 {
|
||||
letter-spacing: -0.01em;
|
||||
text-wrap: balance;
|
||||
}
|
||||
|
||||
/* 数字统一等宽,对齐敏感场景(表格/指标卡) */
|
||||
.num {
|
||||
font-variant-numeric: tabular-nums;
|
||||
font-feature-settings: 'tnum' 1;
|
||||
}
|
||||
|
||||
::selection { background: color-mix(in srgb, var(--brand) 22%, transparent); }
|
||||
|
||||
/* 滚动条:更纤细,悬停加深 */
|
||||
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
|
||||
*::-webkit-scrollbar { width: 6px; height: 6px; }
|
||||
*::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }
|
||||
*::-webkit-scrollbar-thumb:hover { background: var(--text-3); }
|
||||
*::-webkit-scrollbar-track { background: transparent; }
|
||||
|
||||
:focus-visible {
|
||||
outline: 2px solid color-mix(in srgb, var(--brand) 55%, transparent);
|
||||
outline-offset: 1px;
|
||||
}
|
||||
|
||||
.animate-in { animation: fp-fade-slide-in 0.18s ease-out; }
|
||||
|
||||
@keyframes fp-fade-slide-in {
|
||||
from { opacity: 0; transform: translateY(4px); }
|
||||
to { opacity: 1; transform: none; }
|
||||
}
|
||||
|
||||
/* 数字输入框去掉浏览器步进按钮的视觉噪音 */
|
||||
input[type='number']::-webkit-outer-spin-button,
|
||||
input[type='number']::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
input[type='number'] { -moz-appearance: textfield; appearance: textfield; }
|
||||
Reference in New Issue
Block a user