b320641d9c
前端修复: - calendar_page: 移除不存在的 JournalEntry.content getter - responsive_scaffold: 移除不存在的 notchThickness 参数 - splash_page: SingleTickerProvider → TickerProvider (多 AnimationController) - profile_page: UserRoleType.name → .code (修复运行时崩溃) - 导入缺失的 user.dart 后端修复: - class_service: generate_class_code 取 UUID 后6位(随机部分)避免碰撞 - diary_role_seed: 移除不存在的 id 列,使用复合主键 ON CONFLICT 基础设施: - config/default.toml: CORS 改为通配符(开发模式) - scripts/dev.sh: 统一启动脚本(自动清理端口) - docs/opendesign/: Open Design 设计规格 HTML 原型稿 验证结果: flutter analyze 0 error, cargo test 77/77 通过, 17个页面全部渲染正常
236 lines
7.1 KiB
CSS
236 lines
7.1 KiB
CSS
/* ─────────────────────────────────────────────────────────
|
|
* 暖记 (Warm Notes) — 手账日记App 视觉系统
|
|
* Theme 1: 暖阳 (Warm Sun) — 温暖治愈 · 手绘插画风 · 默认
|
|
* Theme 2: 松风 (Pine Wind) — 静谧森林 · 自然调性 · 男学生向
|
|
* ───────────────────────────────────────────────────────── */
|
|
|
|
:root {
|
|
/* Surface */
|
|
--bg: #FFF8F0;
|
|
--surface: #FFFFFF;
|
|
--surface-warm: #FFF3E6;
|
|
|
|
/* Foreground ramp (contrast-safe on #FFF8F0) */
|
|
--fg: #2D2420;
|
|
--fg-2: #5C4F47;
|
|
--muted: #7A6D63;
|
|
--meta: #8B7E74;
|
|
|
|
/* Border */
|
|
--border: #E8DDD4;
|
|
--border-soft: #F0E8DF;
|
|
|
|
/* Accent — soft coral / terracotta */
|
|
--accent: #E07A5F;
|
|
--accent-on: #FFF8F0;
|
|
--accent-hover: #D06A4F;
|
|
--accent-active: #C05A3F;
|
|
--accent-glow: rgba(224, 122, 95, 0.25);
|
|
|
|
/* Secondary — sage green */
|
|
--secondary: #81B29A;
|
|
--secondary-soft: #D4E8DC;
|
|
|
|
/* Tertiary — warm gold */
|
|
--tertiary: #F2CC8F;
|
|
--tertiary-soft: #FBE8C8;
|
|
|
|
/* Rose */
|
|
--rose: #D4A5A5;
|
|
--rose-soft: #F0DADA;
|
|
|
|
/* Semantic */
|
|
--success: #5A9E7E;
|
|
--warn: #D4A843;
|
|
--danger: #C93D3D;
|
|
|
|
/* Typography */
|
|
--font-display: "Quicksand", "Nunito", "SF Pro Rounded", -apple-system, system-ui, sans-serif;
|
|
--font-body: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
|
|
--font-mono: ui-monospace, "JetBrains Mono", monospace;
|
|
--font-handwritten: "Caveat", "Kalam", cursive;
|
|
|
|
/* Type scale */
|
|
--text-xs: 11px;
|
|
--text-sm: 13px;
|
|
--text-base: 15px;
|
|
--text-md: 17px;
|
|
--text-lg: 20px;
|
|
--text-xl: 24px;
|
|
--text-2xl: 30px;
|
|
--text-3xl: 38px;
|
|
--text-4xl: 48px;
|
|
|
|
--leading-body: 1.6;
|
|
--leading-tight: 1.25;
|
|
|
|
/* Spacing */
|
|
--space-1: 4px;
|
|
--space-2: 8px;
|
|
--space-3: 12px;
|
|
--space-4: 16px;
|
|
--space-5: 20px;
|
|
--space-6: 24px;
|
|
--space-8: 32px;
|
|
--space-10: 40px;
|
|
--space-12: 48px;
|
|
|
|
/* Radius */
|
|
--radius-sm: 10px;
|
|
--radius-md: 16px;
|
|
--radius-lg: 22px;
|
|
--radius-xl: 28px;
|
|
--radius-pill: 9999px;
|
|
|
|
/* Elevation */
|
|
--elev-soft: 0 2px 12px rgba(45, 36, 32, 0.06);
|
|
--elev-medium: 0 4px 20px rgba(45, 36, 32, 0.08);
|
|
--elev-float: 0 8px 32px rgba(45, 36, 32, 0.12);
|
|
|
|
/* Focus */
|
|
--focus-ring: 0 0 0 3px rgba(224, 122, 95, 0.45);
|
|
--shadow-accent: 0 4px 14px rgba(224, 122, 95, 0.25);
|
|
--shadow-accent-hover: 0 6px 20px rgba(224, 122, 95, 0.35);
|
|
--shadow-input-focus: 0 0 0 3px rgba(224, 122, 95, 0.2);
|
|
--bg-frosted: rgba(255, 248, 240, 0.85);
|
|
|
|
/* Touch target minimum (WCAG 2.5.8) */
|
|
--touch-min: 44px;
|
|
|
|
/* Motion */
|
|
--motion-fast: 150ms;
|
|
--motion-base: 250ms;
|
|
--ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
|
|
|
|
/* Layout */
|
|
--container-max: 390px;
|
|
--safe-top: 54px;
|
|
--safe-bottom: 34px;
|
|
--tab-height: 56px;
|
|
|
|
/* Theme meta */
|
|
--theme-name: "暖阳";
|
|
}
|
|
|
|
/* ─────────────────────────────────────────────────────────
|
|
* Theme: 松风 (Pine Wind) — 森林书房 · 男学生向
|
|
* Steel blue accent + forest green + warm amber
|
|
* ───────────────────────────────────────────────────────── */
|
|
[data-theme="pine"] {
|
|
--bg: #F2F3F0;
|
|
--surface: #FFFFFF;
|
|
--surface-warm: #E9EAE6;
|
|
|
|
--fg: #23272F;
|
|
--fg-2: #484E58;
|
|
--muted: #6E7380;
|
|
--meta: #8A8F9A;
|
|
|
|
--border: #D5D2CD;
|
|
--border-soft: #E3E1DC;
|
|
|
|
--accent: #4A7B9D;
|
|
--accent-on: #FFFFFF;
|
|
--accent-hover: #3F6A8A;
|
|
--accent-active: #345A78;
|
|
--accent-glow: rgba(74, 123, 157, 0.25);
|
|
|
|
--secondary: #5B9E7A;
|
|
--secondary-soft: #D6E8DE;
|
|
|
|
--tertiary: #C49A3C;
|
|
--tertiary-soft: #F0E4C8;
|
|
|
|
--rose: #7A8B6A;
|
|
--rose-soft: #E0E8D8;
|
|
|
|
--success: #4A9E6E;
|
|
--warn: #B89430;
|
|
--danger: #C93D3D;
|
|
|
|
--elev-soft: 0 2px 12px rgba(35, 39, 47, 0.06);
|
|
--elev-medium: 0 4px 20px rgba(35, 39, 47, 0.08);
|
|
--elev-float: 0 8px 32px rgba(35, 39, 47, 0.12);
|
|
|
|
--focus-ring: 0 0 0 3px rgba(74, 123, 157, 0.45);
|
|
--shadow-accent: 0 4px 14px rgba(74, 123, 157, 0.25);
|
|
--shadow-accent-hover: 0 6px 20px rgba(74, 123, 157, 0.35);
|
|
--shadow-input-focus: 0 0 0 3px rgba(74, 123, 157, 0.2);
|
|
--bg-frosted: rgba(242, 243, 240, 0.85);
|
|
|
|
--theme-name: "松风";
|
|
}
|
|
|
|
/* ─────────────────────────────────────────────────────────
|
|
* Dark Mode — 暖阳 (Warm Sun) dark
|
|
* ───────────────────────────────────────────────────────── */
|
|
@media (prefers-color-scheme: dark) {
|
|
:root:not([data-theme]),
|
|
:root[data-theme="warm"] {
|
|
--bg: #1A1614;
|
|
--surface: #2A2520;
|
|
--surface-warm: #332D28;
|
|
--fg: #F0E8DF;
|
|
--fg-2: #C4B8AA;
|
|
--muted: #9B8E82;
|
|
--meta: #7A6D63;
|
|
--border: #3A3530;
|
|
--border-soft: #302B26;
|
|
--accent: #E8907A;
|
|
--accent-on: #1A1614;
|
|
--accent-hover: #D07A64;
|
|
--accent-active: #C06A54;
|
|
--accent-glow: rgba(232, 144, 122, 0.25);
|
|
--secondary: #8FBF9E;
|
|
--secondary-soft: #2A3A2E;
|
|
--tertiary: #D4B878;
|
|
--tertiary-soft: #302A1E;
|
|
--rose: #C4A0A0;
|
|
--rose-soft: #3A2A2A;
|
|
--success: #6AAF8E;
|
|
--warn: #C4A843;
|
|
--danger: #D94A4A;
|
|
--elev-soft: 0 2px 12px rgba(0, 0, 0, 0.2);
|
|
--elev-medium: 0 4px 20px rgba(0, 0, 0, 0.25);
|
|
--elev-float: 0 8px 32px rgba(0, 0, 0, 0.3);
|
|
--focus-ring: 0 0 0 3px rgba(232, 144, 122, 0.5);
|
|
--shadow-accent: 0 4px 14px rgba(232, 144, 122, 0.25);
|
|
--shadow-accent-hover: 0 6px 20px rgba(232, 144, 122, 0.35);
|
|
--shadow-input-focus: 0 0 0 3px rgba(232, 144, 122, 0.2);
|
|
--bg-frosted: rgba(26, 22, 20, 0.85);
|
|
* ───────────────────────────────────────────────────────── */
|
|
@media (prefers-color-scheme: dark) {
|
|
[data-theme="pine"] {
|
|
--bg: #14161C;
|
|
--surface: #1C1E26;
|
|
--surface-warm: #22242C;
|
|
--fg: #E4E6EC;
|
|
--fg-2: #B4B8C4;
|
|
--muted: #7E8494;
|
|
--meta: #5E6474;
|
|
--border: #282C38;
|
|
--border-soft: #1E222C;
|
|
--accent: #5A8FAD;
|
|
--accent-on: #14161C;
|
|
--accent-hover: #4A7F9D;
|
|
--accent-active: #3A6F8D;
|
|
--accent-glow: rgba(90, 143, 173, 0.25);
|
|
--secondary: #6AAE85;
|
|
--secondary-soft: #1C2E24;
|
|
--tertiary: #D4AA4C;
|
|
--tertiary-soft: #2A2618;
|
|
--rose: #8A9B7A;
|
|
--rose-soft: #242E20;
|
|
--success: #5AAE7E;
|
|
--warn: #C4A440;
|
|
--danger: #D94A4A;
|
|
--elev-soft: 0 2px 12px rgba(0, 0, 0, 0.2);
|
|
--elev-medium: 0 4px 20px rgba(0, 0, 0, 0.25);
|
|
--elev-float: 0 8px 32px rgba(0, 0, 0, 0.3);
|
|
--focus-ring: 0 0 0 3px rgba(90, 143, 173, 0.5);
|
|
--shadow-accent: 0 4px 14px rgba(90, 143, 173, 0.25);
|
|
--shadow-accent-hover: 0 6px 20px rgba(90, 143, 173, 0.35);
|
|
--shadow-input-focus: 0 0 0 3px rgba(90, 143, 173, 0.2);
|
|
--bg-frosted: rgba(20, 22, 28, 0.85);
|