/* ======================================== CSS Variables - 全局设计令牌（Design Tokens） ======================================== 本文件是整个项目的唯一样式真相来源。 所有颜色、圆角、阴影、间距、字体、尺寸、层级 统一在此定义，各模块 CSS 只引用变量。 ─── 目录 ─── 1. 颜色体系（Color Palette） 2. 圆角体系（Border Radius） 3. 阴影体系（Box Shadow） 4. 间距体系（Spacing） 5. 字体与字重（Typography） 6. 图标尺寸（Icon Sizing） 7. 手机壳尺寸（Phone Shell） 8. 过渡动画（Transitions） 9. 层级体系（Z-Index） 10. 毛玻璃 / 模糊（Blur / Frost） 11. 杂项（Misc） ======================================== */ :root { /* ================================================ 1. 颜色体系（Color Palette） ================================================ */ /* -- 背景色 -- */ --color-bg: #f0f0f0; /* 外层页面底色 */ --color-shell-bg: #ffffff; /* 手机壳底色：纯白 */ --color-card-bg: #ffffff; /* 卡片 / 组件背景 */ --color-card-muted: #F1F1F1; /* 次级浅灰卡片 */ --color-capsule-bg: #F1F1F1; /* 胶囊 / 标签背景 */ --color-input-bg: #ffffff; /* 输入框背景 */ --color-polaroid-bg: #f0eeec; /* 拍立得占位底色 */ /* -- 磨砂 / 半透明 -- */ --color-frost: rgba(255, 255, 255, 0.72); /* 磨砂玻璃背景 */ --color-frost-heavy: rgba(255, 255, 255, 0.95); /* 重磨砂（弹窗用） */ --color-frost-border: rgba(255, 255, 255, 0.50); /* 磨砂边框 */ --color-dock-frost: rgba(248, 248, 248, 0.70); /* Dock 磨砂背景 */ /* -- 遮罩色 -- */ --color-overlay: rgba(0, 0, 0, 0.40); /* 模态遮罩 */ --color-overlay-light: rgba(0, 0, 0, 0.20); /* 轻遮罩 */ /* -- 文字色 -- */ --color-text-primary: #1a1a1a; /* 主文字 */ --color-text-secondary: #888888; /* 副文字 */ --color-text-hint: #b0b0b0; /* 提示文字 */ --color-text-light: #cccccc; /* 极淡文字 */ /* -- 图标色 -- */ --color-icon-primary: #1a1a1a; /* 图标主色 */ --color-icon-secondary: #888888; /* 图标次色 */ /* -- 边框色 -- */ --color-border: rgba(0, 0, 0, 0.05); /* 通用边框 */ --color-border-light: rgba(0, 0, 0, 0.03); /* 极淡边框 */ --color-border-input: rgba(0, 0, 0, 0.10); /* 输入框边框 */ --color-shell-ring: rgba(0, 0, 0, 0.04); /* 手机壳外环 */ /* -- 高亮 / 品牌色 -- */ --color-accent: #007aff; /* iOS 蓝 - 主操作色 */ --color-accent-hover: #0066d6; /* 悬停 */ --color-accent-active: rgba(0, 0, 0, 0.05); /* 按钮按下态 */ /* -- 封面渐变色（无图时占位） -- */ --color-cover-grad-start:#e8e8e8; --color-cover-grad-mid: #d5d5d5; --color-cover-grad-end: #c8c8c8; /* -- 头像边框 -- */ --color-avatar-border: #ffffff; /* -- 高光 -- */ --color-highlight-start: rgba(255, 255, 255, 0.70); /* 轻拟物高光起始 */ --color-highlight-end: rgba(255, 255, 255, 0.00); /* 轻拟物高光结束 */ /* -- 选中态 -- */ --color-selection: rgba(176, 178, 184, 0.20); /* ================================================ 2. 圆角体系（Border Radius） ================================================ */ --radius-xs: 8px; /* 输入框、小按钮 */ --radius-sm: 12px; /* 小卡片、拍立得 */ --radius-md: 16px; /* 图标容器、中卡片 */ --radius-lg: 24px; /* 大卡片、资料卡 */ --radius-xl: 32px; /* 封面、Dock */ --radius-full: 9999px; /* 圆形（头像、胶囊） */ /* 语义化别名 */ --radius-phone: 44px; /* 手机壳圆角 */ --radius-cover: var(--radius-xl); /* 封面圆角 */ --radius-card: var(--radius-lg); /* 资料卡圆角 */ --radius-icon: var(--radius-md); /* 图标容器圆角 */ --radius-capsule: 18px; /* 胶囊组件圆角 */ --radius-dock: var(--radius-xl); /* Dock 圆角 */ --radius-modal: 14px; /* 弹窗圆角 */ --radius-action-sheet: 14px; /* Action Sheet 圆角 */ --radius-input: 6px; /* 输入框圆角 */ --radius-photo: 6px; /* 照片圆角 */ --radius-indicator: var(--radius-full); /* Home Indicator */ --radius-dot: var(--radius-full); /* 装饰点 */ --radius-avatar: var(--radius-full); /* 头像 */ /* ================================================ 3. 阴影体系（Box Shadow） ================================================ */ --shadow-soft: 0 2px 12px rgba(0, 0, 0, 0.04); /* 轻阴影 */ --shadow-card: 0 1px 6px rgba(0, 0, 0, 0.03); /* 卡片阴影 */ --shadow-medium: 0 4px 20px rgba(0, 0, 0, 0.06); /* 中等阴影 */ --shadow-hero: 0 8px 32px rgba(0, 0, 0, 0.08); /* 资料卡浮层 */ --shadow-dock: 0 -2px 24px rgba(0, 0, 0, 0.05); /* Dock 阴影 */ --shadow-modal: 0 4px 24px rgba(0, 0, 0, 0.10); /* 弹窗阴影 */ --shadow-inset: inset 0 1px 3px rgba(0, 0, 0, 0.03);/* 内阴影 */ --shadow-avatar: 0 2px 12px rgba(0, 0, 0, 0.10); /* 头像阴影 */ /* 复合阴影（手机壳） */ --shadow-shell: 0 0 0 1px var(--color-shell-ring), var(--shadow-medium), 0 20px 60px rgba(0, 0, 0, 0.08); --shadow-shell-desktop: 0 0 0 1px rgba(0, 0, 0, 0.03), 0 8px 40px rgba(0, 0, 0, 0.06), 0 30px 80px rgba(0, 0, 0, 0.08); /* 图标/Dock 外环 */ --shadow-icon-ring: 0 0 0 0.5px var(--color-border-light); --shadow-dock-ring: 0 0 0 0.5px rgba(0, 0, 0, 0.02); /* 输入框内阴影 */ --shadow-input-inset: inset 0 1px 2px rgba(0, 0, 0, 0.05); /* ================================================ 4. 间距体系（Spacing） ================================================ */ --spacing-xs: 4px; --spacing-sm: 8px; --spacing-md: 12px; --spacing-lg: 16px; --spacing-xl: 24px; --spacing-2xl: 32px; --spacing-3xl: 40px; /* 语义化别名 */ --spacing-page: var(--spacing-lg); /* 页面左右边距 */ --spacing-section: var(--spacing-md); /* 区块间距 */ --spacing-card: var(--spacing-lg); /* 卡片内边距 */ --spacing-icon-gap: var(--spacing-md); /* 图标区间距 */ --spacing-dock: var(--spacing-xl); /* Dock 内边距 */ --spacing-dock-gap: 20px; /* Dock 图标间距 */ --spacing-action-bottom: 20px; /* Action Sheet 底部距离 */ /* ================================================ 5. 字体与字重（Typography） ================================================ */ --font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'PingFang SC', 'Helvetica Neue', 'Segoe UI', system-ui, sans-serif; /* 字号 */ --font-size-xs: 11px; /* 装饰性小文字 */ --font-size-sm: 13px; /* 注释 / 辅助 */ --font-size-base: 14px; /* 正文 / 状态栏 */ --font-size-md: 16px; /* 中号正文 / 名称 */ --font-size-lg: 17px; /* iOS 弹窗按钮 */ --font-size-xl: 18px; /* Action Sheet 按钮 */ --font-size-2xl: 20px; /* 大标题 */ --font-size-3xl: 24px; /* 特大标题 */ /* 字重 */ --font-weight-light: 400; --font-weight-regular: 500; --font-weight-medium: 600; --font-weight-semibold: 700; /* ================================================ 6. 图标尺寸（Icon Sizing） ================================================ */ /* 普通 APP 图标 */ --icon-size: 54px; /* 图标容器宽高 */ --icon-inner: 32px; /* 图标内图片/SVG 尺寸 */ /* Dock 图标（略大） */ --icon-dock-size: 56px; /* Dock 图标容器宽高 */ --icon-dock-inner: 36px; /* Dock 图标内图片/SVG 尺寸 */ /* 状态栏图标 */ --icon-status: 16px; /* 聊天气泡图标（预留） */ --icon-chat: 24px; --icon-chat-action: 20px; /* ================================================ 7. 手机壳尺寸（Phone Shell） ================================================ */ --phone-width: 390px; --phone-height: 844px; /* 状态栏高度 */ --status-bar-height: 48px; /* Home Indicator */ --indicator-width: 134px; --indicator-height: 5px; /* 头像 */ --avatar-size: 72px; --avatar-border-width: 3px; --avatar-offset-top: -50px; /* 头像向上偏移量（放大后上移更多） */ /* 资料卡上移叠加量 */ --card-overlap: -50px; /* 封面高度 */ --cover-height: 240px; /* 胶囊最大宽度 */ --capsule-max-width: 160px; /* 拍立得最大宽度 */ --polaroid-max-width: 130px; /* ================================================ 8. 过渡动画（Transitions） ================================================ */ --transition-fast: 0.15s ease; --transition-base: 0.25s ease; --transition-slow: 0.40s ease; --transition-spring: 0.30s cubic-bezier(0.175, 0.885, 0.32, 1.1); /* ================================================ 9. 层级体系（Z-Index） ================================================ 全局层级规划表： ┌─────────────────────────────────────────────────┐ │ 层级 │ 变量名 │ 用途 │ ├─────────────────────────────────────────────────┤ │ 0 │ --z-base │ 默认文档流 │ │ 1 │ --z-content │ 图标内元素等 │ │ 2 │ --z-card │ 浮层卡片 │ │ 3 │ --z-card-element │ 卡片内浮动元素 │ │ 10 │ --z-sticky │ 状态栏等固定元素 │ │ 20 │ --z-dock │ 底部 Dock 栏 │ │ 30 │ --z-fab │ 浮动按钮 │ │ 40 │ --z-drawer │ 抽屉 / 侧滑面板 │ │ 50 │ --z-chat │ 聊天窗口 │ │ 55 │ --z-chat-input │ 聊天输入栏 │ │ 60 │ --z-overlay │ 遮罩层 │ │ 70 │ --z-modal │ Modal 弹窗 │ │ 80 │ --z-action-sheet │ Action Sheet │ │ 90 │ --z-toast │ Toast 提示条 │ │ 100 │ --z-top │ 最高优先级交互 │ └─────────────────────────────────────────────────┘ 使用规则： - 同层内的子元素可用 1~9 的局部 z-index（在 stacking context 内） - 禁止使用超出此表的随机数字（如 999、9999） - 新增组件先查表、归类，不够再在相邻档位之间插值 - 聊天系统相关层级预留在 50~55 档位 - overlay 必须低于 modal / action-sheet，但高于 chat 后续扩展指引： - 聊天窗口（--z-chat: 50）覆盖主页内容 - 聊天输入栏（--z-chat-input: 55）在气泡之上 - dock（--z-dock: 20）低于聊天窗口，被聊天覆盖 - modal（--z-modal: 70）和 action-sheet（80）压过聊天 - overlay（--z-overlay: 60）压过普通内容和聊天，但低于弹窗 - toast（--z-toast: 90）几乎最高，不被任何弹窗遮挡 - 图片编辑弹窗归入 modal（70）或 action-sheet（80） */ --z-base: 0; --z-content: 1; --z-card: 2; --z-card-element: 3; --z-sticky: 10; --z-dock: 20; --z-fab: 30; --z-drawer: 40; --z-chat: 50; --z-chat-input: 55; --z-overlay: 60; --z-modal: 70; --z-action-sheet: 80; --z-toast: 90; --z-top: 100; /* ================================================ 10. 毛玻璃 / 模糊（Blur / Frost） ================================================ */ --blur-light: blur(4px); /* 轻模糊（遮罩） */ --blur-medium: blur(12px); /* 中等模糊（卡片磨砂） */ --blur-heavy: blur(20px); /* 重模糊（弹窗磨砂） */ --blur-dock: blur(28px) saturate(1.2); /* Dock 磨砂 */ /* ================================================ 11. 安全区（Safe Area） ================================================ 用于安卓全屏/沉浸式模式、刘海屏、挖孔屏、底部手势区。 需配合 中 viewport-fit=cover 使用。 在普通浏览器 / 桌面上，env() 回退为 0px，不影响布局。 */ --safe-area-top: env(safe-area-inset-top, 0px); --safe-area-bottom: env(safe-area-inset-bottom, 0px); --safe-area-left: env(safe-area-inset-left, 0px); --safe-area-right: env(safe-area-inset-right, 0px); /* ================================================ 12. 杂项（Misc） ================================================ */ /* Dock 边框 */ --dock-border: 1px solid rgba(255, 255, 255, 0.6); /* 装饰点尺寸 */ --dot-size: 4px; --dot-active-width: 12px; }