/* designonline-ui — 合并样式 (token 真源 + 组件层)。 消费方式: import 'designonline-ui/styles.css' 一次即可。 */ /* ============================================================================ DesignOnline · EarthOnline Labs — Design Tokens (token 真源 / CSS) 工作室级合并版 v1.0 · 从 AISelf v0.6「私人刊物」抽取 + 重构 + 补全 ---------------------------------------------------------------------------- 分层 token: ① PRIMITIVE 原始层 — raw 值（--purple-500 / --paper-warm / --space-4 …） ② SEMANTIC 语义层 — 映射含义、引用原始层（--color-action-primary …） ③ COMPAT 兼容别名 — 旧 token 名（--paper / --ink / --a-purple …）原样保留， 指向语义/原始层，**现有项目零改动**。 锁死约束: · 品牌五段神经光谱(波长序 紫→蓝→绿→橙→红, 平涂浓色) 一个 hex 都不改。 · 光谱仅做识别(logo / 字标 / 晕染点)。永不做按钮、永不做底色。UI = 纸 + 墨。 · **取色规范: 只从本表已定义的 token 取色, 不新增颜色值** —— 全站颜色 = 这一份 Colors 真源, 否则色彩泛滥。新需求先复用现有 token; 确需新增 = 在此表评审后入册, 不在组件/页面里凭空写 #hex。暗面色与 v0.6 光谱保持一致, 不另造一套。 基调(气质锚 landing-private-journal): · 工作室层用暖纸 #FAF9F6([data-surface="studio"]); AISelf 产品层默认纯白 #FFFFFF。 · 阴影柔和带暖调低强度; 卡角 16px; 按钮胶囊; 留白慷慨。 JSON 镜像见 designonline/tokens.json · 合并决策见 designonline/MERGE-NOTES.md ---------------------------------------------------------------------------- Webfonts (Google Fonts CDN) — 见下 @import。Apple 系统字(Songti SC / PingFang SC)仅作字体栈里的普通家族名(无 @font-face),非 Mac 自然回退 Noto SC。 ========================================================================== */ @import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..700;1,9..144,300..700&family=JetBrains+Mono:wght@400;500;700&family=Noto+Serif+SC:wght@300;400;500;600;700;900&family=Noto+Sans+SC:wght@400;500;600;700&display=swap"); @import url("https://fonts.cdnfonts.com/css/opendyslexic"); @import url("https://cdn.jsdelivr.net/npm/lxgw-wenkai-screen-webfont/style.css"); /* 可选 — 霞鹜文楷 手记阅读字 */ /* ========================================================================== ① PRIMITIVE 原始层 — raw 值。命名 kebab-case，数字 = 明度档(越大越深 / 越浓)。 ========================================================================== */ :root{ /* ---- 中性 · 暖墨梯子 Neutrals (warm ink ladder) ----------------------- */ --paper-white:#FFFFFF; /* 纯白 — AISelf 产品默认底 / 卡面 */ --paper-warm:#FAF9F6; /* 暖纸 — DesignOnline 工作室层底(气质锚) */ --paper-sheet:#FCFBF8; /* 信纸 — 展开纸页 painscreen */ --ink-100:#ECEAE4; /* 细线(暖灰) */ --ink-200:#DCDAD2; /* 强线 / 描边边框 */ --ink-500:#9CA0A2; /* 弱字 — 标签 / 占位 / 未展开 */ --ink-700:#5A5C5E; /* 次字 — 辅助正文 */ --ink-900:#1B1B1B; /* 墨 — 结构 / 正文 / 按钮 / 链接 */ --ink-brand:#1A1A1F; /* 品牌墨 — 字标 AI / 单墨标记(略偏蓝紫) */ /* ---- 特殊纸色 Special papers (仅特殊场景, 非默认) --------------------- */ --paper-blue:#F1F2EC; /* 黛蓝 */ --paper-green:#F2F2E7; /* 松绿 */ --paper-yellow:#FAF4E3; /* 赭黄 */ --paper-cream:#F3ECDC; /* 奶油 */ /* ---- 暗面 Night / editor surfaces ------------------------------------- */ --night-900:#16161E; /* 暗面底 */ --night-800:#1E1E29; /* 暗面浮层 — 文件树 / 次级面板 */ --night-100:#F0EEE7; /* 暗面文字 */ --night-300:#A9A8B6; /* 暗面次级文字 */ --night-rule:#2C2C3A; /* 暗面分隔线 */ /* ---- 品牌光谱 Spectrum · 浓色 Vivid(波长序 紫→蓝→绿→橙→红) [LOCKED] -- */ --purple-500:#8A43E6; --blue-500:#4FA8F0; --green-500:#1FA45D; --orange-500:#F4811E; --coral-500:#E8482A; --sky-400:#6AB0E8; /* 辅助 — 氛围背景 */ --pink-400:#EA86B8; /* 辅助 — 氛围背景 */ /* ---- 光谱 · 淡色 Tint(铺底 / 卡片 / 图表底) [LOCKED] ------------------ */ --purple-100:#DEC9F5; --blue-100:#D2E9FB; --green-100:#ACE7C4; --orange-100:#FBD6A0; --coral-100:#F8C9BD; /* ---- 光谱 · 暗面提亮 Elevated(深底上的光谱) [LOCKED] ------------------ */ --purple-300:#A877F0; --blue-300:#5AA6F4; --green-300:#46C580; --orange-300:#F8A552; --coral-300:#F4715A; /* ---- 状态 Status raw(仅系统状态, 非品牌识别) ------------------------- */ --green-700:#1FA45D; /* success(= 光谱绿; 锚 v0.6) */ --amber-700:#C2902E; /* warning */ --red-700:#C0492B; /* danger */ --green-50:#E9F3EC; /* success 浅底 · 源 design-system v0.2 */ --amber-50:#FBF3E2; /* warning 浅底 · 源 design-system v0.2 */ --red-50:#FBECE9; /* danger 浅底 · 源 design-system v0.2 */ --green-800:#1F5E36; /* 浅底上 success 文字 · 源 v0.2 */ --red-800:#8C372B; /* 浅底上 danger 文字 · 源 v0.2 */ --info-50:#E9F0FB; /* 操作蓝浅底(徽章/PR) · 源 v0.2 */ --neutral-50:#EDF0F4; /* 中性浅底(徽章) · 源 v0.2 */ --heat-1:#D8E0F2; /* 热力图 1 档 · 源 v0.2 */ --heat-2:#9CB0E6; /* 热力图 2 档 · 源 v0.2 */ --heat-3:#4FA8F0; /* 热力图 3 档(= 光谱蓝) · 源 v0.2 */ /* ---- 字族 Font families ----------------------------------------------- */ --font-serif:'Songti SC','STSong','Noto Serif SC',Georgia,serif; /* @kind font */ /* 标题 / 阅读 = 宋体 */ --font-sans:'PingFang SC','Noto Sans SC','Microsoft YaHei','Heiti SC',sans-serif; /* @kind font */ /* 界面 = 苹方 */ --font-fraunces:'Fraunces','Songti SC','Noto Serif SC',serif; /* @kind font */ /* 拉丁展示 / 斜体英文眉题 */ --font-mono:'JetBrains Mono',ui-monospace,Menlo,monospace; /* @kind font */ /* 标签 / 序号 / 数据 */ --font-dys:'OpenDyslexic','PingFang SC','Heiti SC',sans-serif; /* @kind font */ /* 仅 logo 字标(LOGO_SPEC v0.7) */ --font-wenkai:'LXGW WenKai Screen','LXGW WenKai TC',var(--font-serif); /* 可选 — 手记气质阅读字 */ /* ---- 字号刻度 Font sizes(px) ------------------------------------------ */ --fs-100:11px; --fs-200:13px; --fs-300:15px; --fs-400:20px; --fs-500:24px; --fs-600:30px; --fs-700:48px; --fs-800:60px; /* 700/800 = NEW 待确认(落地页 hero 用 clamp) */ /* ---- 字重 Weights ----------------------------------------------------- */ --fw-light:300; /* @kind other */ --fw-regular:400; /* @kind other */ --fw-medium:500; /* @kind other */ --fw-semibold:600; /* @kind other */ --fw-bold:700; /* @kind other */ --fw-black:900; /* @kind other */ /* ---- 行高 Line heights ------------------------------------------------ */ --lh-tight:1.3; /* @kind other */ --lh-heading:1.45; /* @kind other */ --lh-ui:1.6; /* @kind other */ --lh-read:1.85; /* @kind other */ /* ---- 字间距 Tracking -------------------------------------------------- */ --ls-tight:-.02em; /* @kind other */ --ls-snug:-.01em; /* @kind other */ --ls-label:.22em; /* @kind other */ --ls-kicker:.24em; /* @kind other */ /* ---- 间距 Spacing(4 基准) -------------------------------------------- */ --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:22px; --space-6:32px; --space-7:48px; --space-8:64px; /* 7/8 = 区块 / 空态大节奏(源 v0.2) */ /* ---- 圆角 Radii ------------------------------------------------------- */ --radius-swatch:5px; --radius-input:12px; --radius-card:16px; --radius-sheet:3px; --radius-pill:999px; /* ---- 阴影 Shadows(柔暖低强度) ---------------------------------------- */ --shadow-sm:0 1px 2px rgba(20,20,20,.06); /* 细 — 卡 / 色卡 */ --shadow-soft:0 14px 44px rgba(46,40,30,.10); /* 柔暖 — 浮起卡片 / 弹层 */ --shadow-raise:0 3px 10px rgba(27,27,27,.22); /* 浮起 — 墨按钮 / toast */ --shadow-card:0 30px 70px rgba(20,20,28,.32); /* 暗面 — editor 演示窗 / modal */ /* ---- 控件高度 Control heights — NEW 待确认(由现有 padding 推导 + 44 触控下限) */ --control-h-sm:36px; --control-h:44px; --control-h-lg:52px; /* ---- 图标尺寸 Icon sizes — NEW 待确认 -------------------------------- */ --icon-sm:16px; --icon-md:20px; --icon-lg:24px; /* ---- 控件尺寸 Control dims — 确认 2026-06-18(token 归一: 由 components.css 候选块并入真源, 值不变)。开关轨/旋钮 · 头像 · 弹层/吐司/提示宽度。 */ --switch-w:44px; --switch-h:26px; --switch-knob:20px; --avatar-sm:28px; --avatar-md:36px; --avatar-lg:48px; --layout-modal:480px; --layout-toast:360px; --layout-tooltip:240px; /* ---- 描边宽 Border widths -------------------------------------------- */ --border-hair:1px; --border-rule:2px; --border-accent:3px; /* ---- 层级 z-index — sticky=60 取自 landing, 余为 NEW 待确认 ---------- */ --z-base:0; /* @kind other */ --z-raised:10; /* @kind other */ --z-sticky:60; /* @kind other */ --z-overlay:100; /* @kind other */ --z-modal:200; /* @kind other */ --z-toast:300; /* @kind other */ --z-tooltip:400; /* @kind other */ /* ---- 动效 Motion — 时长/缓动取自现有用法 ---------------------------- */ --dur-fast:150ms; /* @kind other */ --dur:200ms; /* @kind other */ --dur-slow:300ms; /* @kind other */ --dur-slower:500ms; /* @kind other */ --ease-out:cubic-bezier(.2,.7,.2,1); /* @kind other */ /* 招牌缓动(landing/组件通用) */ --ease-standard:cubic-bezier(.4,0,.2,1); /* @kind other */ /* NEW 待确认 — 对称进出 */ --ease-linear:linear; /* @kind other */ /* ---- 断点 Breakpoints / 容器 Container ------------------------------- */ --bp-sm:640px; /* mobile ↔ tablet */ --bp-md:1024px; /* tablet ↔ desktop */ --container-read:680px; /* 阅读列上限 */ --container-shell:1180px; /* 页面壳最大宽 */ --container-phone:390px; /* 移动设计基准(微信) */ --gutter:22px; /* 移动 gutter — NEW 待确认(规范述 16–22) */ } /* ========================================================================== ② SEMANTIC 语义层 — 映射含义、引用原始层。组件应优先用这些 --color-* 。 ========================================================================== */ :root{ /* ---- 背景 Surface ----------------------------------------------------- */ --color-bg-base:var(--paper-white); /* 产品默认底 = 纯白(工作室层切暖纸见 [data-surface=studio]) */ --color-bg-surface:var(--paper-white); /* 卡面 — 同白, 靠描边 + 阴影分层 */ --color-bg-sheet:var(--paper-sheet); /* 信纸 — 展开纸页 */ --color-bg-inverse:var(--night-900); /* 暗面底 — AI 观察 / 演示窗 / inverted 段 */ --color-bg-inverse-raised:var(--night-800); /* 暗面浮层 */ /* ---- 文字 Text -------------------------------------------------------- */ --color-text-default:var(--ink-900); /* 正文 / 标题 / 结构 */ --color-text-muted:var(--ink-700); /* 次级正文 */ --color-text-subtle:var(--ink-500); /* 标签 / 占位 / 弱 */ --color-text-inverse:var(--night-100); /* 暗面文字 */ --color-text-inverse-muted:var(--night-300); /* 暗面次级文字 */ --color-text-brand-ink:var(--ink-brand);/* 字标 AI / 单墨标记 */ /* ---- 描边 Border ------------------------------------------------------ */ --color-border-subtle:var(--ink-100); /* 细分隔线 */ --color-border-default:var(--ink-200); /* 卡 / 输入描边 */ --color-border-strong:var(--ink-900); /* 报头 / 栏目头双线 */ --color-border-inverse:var(--night-rule); /* 暗面分隔 */ /* ---- 动作 Action(按钮 = 墨, 永不上光谱) ----------------------------- */ --color-action-primary-bg:var(--ink-900); --color-action-primary-text:var(--paper-white); --color-action-secondary-bg:transparent; --color-action-secondary-border:var(--ink-200); --color-action-secondary-text:var(--ink-900); --color-action-disabled-opacity:.38; /* ---- 交互态 Interaction states — 确认 2026-06-18(token 归一: 由 components.css 候选块并入真源)。全部由真源色 color-mix 派生, 无新增色值(遵取色规范)。 */ --color-focus-ring:color-mix(in srgb, var(--color-text-default) 28%, transparent); /* @kind color */ --color-overlay:color-mix(in srgb, var(--ink-900) 46%, transparent); /* @kind color */ --color-bg-hover:color-mix(in srgb, var(--color-text-default) 5%, transparent); /* @kind color */ --color-bg-hover-strong:color-mix(in srgb, var(--color-text-default) 9%, transparent); /* @kind color */ --color-action-primary-hover:color-mix(in srgb, var(--color-action-primary-bg) 86%, var(--paper-white)); /* @kind color */ /* ---- 点缀 Accent(= 光谱「晕染点」Dot; 多色识别点缀; 禁按钮/禁底色/禁渐变填充) -- 点缀色不是单色, 而是整组光谱当多色用 —— 一段从冷到暖 / 从向内到向外的「心境谱」。 给一条笔记/文件/列表项选色 = 标记它的心境, 而非文件类型代号。 人文语义(波长序): 紫 内省·私密 → 蓝 观照·澄明 → 绿 生长·安住 → 橙 行动·能量 → 珊瑚 主线·热望。 形态有两种(按场景挑, 别千篇一律): ① 小圆点 .dot —— 柔光晕染点, 中心浓色 -500 向外透明扩散; 尺寸/扩散度由 class 调 (.dot--sm/lg · .dot--tight/bloom)。适合列表/图标前缀、多色并置。 ② 大面积柔光底 .aura —— 把单一点缀色化成一抹低透大半径的角落光晕铺在卡片/区块背景。 适合"只有一个点缀色"的卡片, 替代单调的小圆点。是光晕不是色块, 仍属晕染许可。 */ --accent-purple:var(--purple-500); /* 内省 · 私密 — 向内的世界(日记/私密笔记) */ --accent-blue:var(--blue-500); /* 观照 · 澄明 — 看清 / 总览 */ --accent-green:var(--green-500); /* 生长 · 安住 — 成长 / 平静 */ --accent-orange:var(--orange-500); /* 行动 · 能量 — 计划 / 推进 */ --accent-coral:var(--coral-500); /* 主线 · 热望 — 核心 / 所向 */ /* ---- 品牌识别 Brand(仅 logo / 字标 / 晕染点 / 进度线; 禁按钮禁底色) -- */ --color-brand-purple:var(--purple-500); --color-brand-blue:var(--blue-500); --color-brand-green:var(--green-500); --color-brand-orange:var(--orange-500); --color-brand-coral:var(--coral-500); --color-brand-purple-tint:var(--purple-100); --color-brand-blue-tint:var(--blue-100); --color-brand-green-tint:var(--green-100); --color-brand-orange-tint:var(--orange-100); --color-brand-coral-tint:var(--coral-100); --color-brand-rainbow:linear-gradient(95deg,#8A43E6,#4FA8F0 28%,#1FA45D 55%,#F4811E 78%,#E8482A); /* @kind color */ /* 身份专用 */ /* ---- 状态 Status ------------------------------------------------------ */ --color-success:var(--green-700); --color-success-bg:var(--green-50); --color-success-text:var(--green-800); --color-warning:var(--amber-700); --color-warning-bg:var(--amber-50); --color-danger:var(--red-700); --color-danger-bg:var(--red-50); --color-danger-text:var(--red-800); --color-info:var(--blue-500); --color-info-bg:var(--info-50); --color-neutral-bg:var(--neutral-50); --color-heat-1:var(--heat-1); --color-heat-2:var(--heat-2); --color-heat-3:var(--heat-3); /* ---- 语义字阶 Type tokens(font / size / weight / lh) ------------------ */ --display-font:var(--font-serif); --display-size:var(--fs-600); --display-weight:var(--fw-bold); --display-lh:1.4; /* @kind font */ --h1-font:var(--font-serif); --h1-size:var(--fs-500); --h1-weight:var(--fw-bold); --h1-lh:var(--lh-tight); /* @kind font */ --h2-font:var(--font-serif); --h2-size:var(--fs-400); --h2-weight:var(--fw-semibold); --h2-lh:var(--lh-heading); /* @kind font */ --body-font:var(--font-serif); --body-size:var(--fs-300); --body-weight:var(--fw-regular); --body-lh:var(--lh-read); /* @kind font */ --caption-font:var(--font-serif); --caption-size:var(--fs-200); --caption-weight:var(--fw-regular); --caption-lh:1.7; /* @kind font */ --label-font:var(--font-mono); --label-size:var(--fs-100); --label-weight:var(--fw-medium); --label-tracking:var(--ls-label); } /* ---- 工作室层暖纸 surface — DesignOnline 编辑/展示语境 opt-in ------------ */ [data-surface="studio"]{ --color-bg-base:var(--paper-warm); } /* ========================================================================== ③ COMPAT 兼容别名 — 旧 token 名原样保留, 现有 components.css / kit.css / logo.css / React 全部零改动。新代码请优先用 ① / ② 层。 ========================================================================== */ :root{ --serif:var(--font-serif); --sans:var(--font-sans); --fraunces:var(--font-fraunces); --mono:var(--font-mono); --dys:var(--font-dys); --wenkai:var(--font-wenkai); --paper:var(--color-bg-base); --ink:var(--color-text-default); --soft:var(--color-text-muted); --muted:var(--color-text-subtle); --rule:var(--color-border-subtle); --rule-strong:var(--color-border-default); --card:var(--color-bg-surface); --sheet:var(--color-bg-sheet); --editor:var(--night-900); --editor-2:var(--night-800); --editor-ink:var(--night-100); --editor-soft:var(--night-300); --editor-rule:var(--night-rule); --a-purple:var(--purple-500); --a-blue:var(--blue-500); --a-green:var(--green-500); --a-orange:var(--orange-500); --a-coral:var(--coral-500); --a-sky:var(--sky-400); --a-pink:var(--pink-400); --t-purple:var(--purple-100); --t-blue:var(--blue-100); --t-green:var(--green-100); --t-orange:var(--orange-100); --t-coral:var(--coral-100); --e-purple:var(--purple-300); --e-blue:var(--blue-300); --e-green:var(--green-300); --e-orange:var(--orange-300); --e-coral:var(--coral-300); --rainbow:var(--color-brand-rainbow); --ok:var(--color-success); --warn:var(--color-warning); --err:var(--color-danger); --r-sw:var(--radius-swatch); --r-input:var(--radius-input); --r-card:var(--radius-card); --r-pill:var(--radius-pill); --sp-1:var(--space-1); --sp-2:var(--space-2); --sp-3:var(--space-3); --sp-4:var(--space-4); --sp-5:var(--space-5); --sp-6:var(--space-6); --sh-sm:var(--shadow-sm); --sh-soft:var(--shadow-soft); --sh-raise:var(--shadow-raise); --sh-card:var(--shadow-card); --read:var(--container-read); --shell:var(--container-shell); --phone:var(--container-phone); } /* Special-paper themes — set [data-theme] on . 纯白 is the default. */ [data-theme="white"] {--paper:#FFFFFF;--ink:#1B1B1B;--soft:#5A5C5E;--muted:#9CA0A2;--rule:#ECEAE4;--rule-strong:#DCDAD2;--card:#FFFFFF} [data-theme="blue"] {--paper:#F1F2EC;--ink:#222934;--soft:#5C6470;--muted:#9AA0A8;--rule:#DCD9CE;--rule-strong:#CBC8BB;--card:#FBFCFA} [data-theme="green"] {--paper:#F2F2E7;--ink:#222A25;--soft:#586056;--muted:#99A091;--rule:#DBD9C8;--rule-strong:#C9C8B4;--card:#FBFCF8} [data-theme="yellow"]{--paper:#FAF4E3;--ink:#332E1E;--soft:#6B6242;--muted:#ADA487;--rule:#E8DCC0;--rule-strong:#D9CBA8;--card:#FFFCF2} [data-theme="cream"] {--paper:#F3ECDC;--ink:#2A2520;--soft:#6B6356;--muted:#A39A88;--rule:#E3DBC9;--rule-strong:#D0C7B1;--card:#FBF6EC} /* ---- SEMANTIC HELPERS — opt-in classes ----------------------------------- */ .t-display{font-family:var(--display-font);font-weight:var(--display-weight);font-size:var(--display-size);line-height:var(--display-lh);letter-spacing:-.01em;color:var(--ink)} .t-h1{font-family:var(--h1-font);font-weight:var(--h1-weight);font-size:var(--h1-size);line-height:var(--h1-lh);letter-spacing:-.01em;color:var(--ink)} .t-h2{font-family:var(--h2-font);font-weight:var(--h2-weight);font-size:var(--h2-size);line-height:var(--h2-lh);color:var(--ink)} .t-body{font-family:var(--body-font);font-weight:var(--body-weight);font-size:var(--body-size);line-height:var(--body-lh);color:var(--ink)} .t-caption{font-family:var(--caption-font);font-size:var(--caption-size);line-height:var(--caption-lh);color:var(--soft)} .t-label{font-family:var(--label-font);font-size:var(--label-size);font-weight:var(--label-weight);letter-spacing:var(--label-tracking);text-transform:uppercase;color:var(--muted)} .t-ital{font-family:var(--fraunces);font-style:italic} /* 英文眉题 — 跟在中文标题后的 Fraunces 斜体小字 */ .t-en{font-family:var(--fraunces);font-style:italic;font-weight:400;color:var(--muted)} /* The rainbow is reserved for identity only (logo / 人生主线 keywords / 进度线). */ .rainbow-ink{background:var(--rainbow);-webkit-background-clip:text;background-clip:text;color:transparent} /* town 式高亮 — 关键词着色 + 同色 15% 淡底（v0.6 的招牌强调） 用法: 停留在模糊 */ .hl{color:var(--hl,var(--accent-coral));background:color-mix(in srgb,var(--hl,var(--accent-coral)) 15%,transparent);border-radius:.2em;padding:.02em .2em;margin:0 -.04em;-webkit-box-decoration-break:clone;box-decoration-break:clone;font-weight:inherit} /* 点缀色 · 晕染点 .dot — 整组光谱当多色用的柔光识别圆点（属 Colors，非组件）。 tone = 人文语义心境谱（紫 内省·私密 / 蓝 观照·澄明 / 绿 生长·安住 / 橙 行动·能量 / 珊瑚 主线·热望）。 仅识别点缀 —— 禁按钮 / 禁底色 / 禁渐变填充。用法: · 尺寸 .dot--sm/lg · 扩散度 .dot--tight/bloom（按场景自由调）。*/ .dot{display:inline-block;flex:none;vertical-align:middle;width:14px;height:14px;border-radius:var(--radius-pill); color:var(--accent-purple); background:radial-gradient(circle at 50% 44%,currentColor 0%,color-mix(in srgb,currentColor 70%,transparent) 42%,transparent 76%)} .dot--purple{color:var(--accent-purple)} /* 内省·私密 */ .dot--blue{color:var(--accent-blue)} /* 观照·澄明 */ .dot--green{color:var(--accent-green)} /* 生长·安住 */ .dot--orange{color:var(--accent-orange)} /* 行动·能量 */ .dot--coral{color:var(--accent-coral)} /* 主线·热望 */ .dot--sm{width:10px;height:10px} .dot--lg{width:20px;height:20px} .dot--tight{background:radial-gradient(circle at 50% 44%,currentColor 0%,currentColor 32%,color-mix(in srgb,currentColor 58%,transparent) 54%,transparent 82%)} .dot--bloom{background:radial-gradient(circle at 50% 44%,currentColor 0%,color-mix(in srgb,currentColor 52%,transparent) 34%,transparent 92%)} /* 点缀色 · 晕染底 .aura — 点缀色的「柔焦光晕」形态：一颗实色光球做高斯模糊、半透，柔焦坐在 卡片/区块文字背后（同 icon「晕染色点」的 halo 手法），适合「只有一个点缀色」的卡片（替代单调小圆点）。 是光晕不是色块——柔焦光球，仍属晕染识别，禁实色底 / 禁渐变填充。用法:
。*/ .aura{position:relative;isolation:isolate;overflow:hidden} .aura::before{content:"";position:absolute;z-index:-1;width:44%;aspect-ratio:1;left:6%;top:-6%;border-radius:50%;filter:blur(40px);opacity:.4;pointer-events:none} .aura--purple::before{background:var(--accent-purple)} .aura--blue::before{background:var(--accent-blue)} .aura--green::before{background:var(--accent-green)} .aura--orange::before{background:var(--accent-orange)} .aura--coral::before{background:var(--accent-coral)} /* ============================================================================ DesignOnline · EarthOnline Labs — Core Components v1 (HTML + CSS) ---------------------------------------------------------------------------- 规则: 组件只消费 colors_and_type.css 的分层 token。 · 颜色 var(--color-*) / 间距 var(--space-*) / 圆角 var(--radius-*) · 字体 var(--font-*) var(--fs-*) var(--fw-*) / 阴影 var(--shadow-*) 禁止硬编码 #hex / 语义 px(描边宽、模糊半径、knob 偏移这类纯结构值除外)。 状态用 :hover/:active/:focus-visible 与 .is-hover/.is-active/.is-focus 成对 书写 —— 后者供 showcase / 文档静态陈列各状态。 依赖: colors_and_type.css(token 真源)。气质: 暖 + 克制 · 报刊编辑感。 ========================================================================== */ /* ========================================================================== 交互态 / 控件尺寸 token 已于 2026-06-18 并入 token 真源 colors_and_type.css (--color-focus-ring / --color-overlay / --color-bg-hover(-strong) / --color-action-primary-hover / --switch-* / --avatar-* / --layout-*)。 本文件不再重复声明 —— 只消费真源 token。 ========================================================================== */ @keyframes do-spin{to{transform:rotate(360deg)}} /* ========================================================================== 00 · ICON — 基础规则(src/Icon 输出 class="icon")。尺寸走行内 width/height, 这里只管排版基线 —— 勿删, 是 Icon 组件依赖项。 ========================================================================== */ .icon{display:inline-block;vertical-align:middle;flex:none} /* ========================================================================== 01 · BUTTON — variants primary/secondary/ghost · sizes sm/md/lg states default/hover/active/focus/disabled/loading ========================================================================== */ .btn{ box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2); height:var(--control-h);padding:0 var(--space-5); font-family:var(--font-sans);font-size:var(--fs-200);font-weight:var(--fw-semibold);line-height:1; border:var(--border-hair) solid transparent;border-radius:var(--radius-pill); background:transparent;color:var(--color-text-default);text-decoration:none;white-space:nowrap; cursor:pointer;position:relative; transition:background var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out),color var(--dur) var(--ease-out),transform var(--dur-fast) var(--ease-out); } .btn__icon,.btn svg{width:var(--icon-sm);height:var(--icon-sm);flex:none} .btn--lg .btn__icon,.btn--lg svg{width:var(--icon-md);height:var(--icon-md)} /* sizes */ .btn--sm{height:var(--control-h-sm);padding:0 var(--space-4);font-size:var(--fs-100)} .btn--lg{height:var(--control-h-lg);padding:0 var(--space-6);font-size:var(--fs-300)} /* primary — 墨实心胶囊（按钮永墨，永不上光谱） */ .btn--primary{background:var(--color-action-primary-bg);color:var(--color-action-primary-text);box-shadow:var(--shadow-sm)} .btn--primary:hover,.btn--primary.is-hover{background:var(--color-action-primary-hover);transform:translateY(-1px);box-shadow:var(--shadow-raise)} .btn--primary:active,.btn--primary.is-active{background:var(--color-action-primary-bg);transform:translateY(0);box-shadow:var(--shadow-sm)} /* secondary — 描边墨 */ .btn--secondary{background:var(--color-action-secondary-bg);border-color:var(--color-action-secondary-border);color:var(--color-action-secondary-text)} .btn--secondary:hover,.btn--secondary.is-hover{border-color:var(--color-text-default);background:var(--color-bg-hover)} .btn--secondary:active,.btn--secondary.is-active{background:var(--color-bg-hover-strong)} /* ghost — 无边 */ .btn--ghost{background:transparent;color:var(--color-text-default)} .btn--ghost:hover,.btn--ghost.is-hover{background:var(--color-bg-hover)} .btn--ghost:active,.btn--ghost.is-active{background:var(--color-bg-hover-strong)} /* focus / disabled / loading (all variants) */ .btn:focus-visible,.btn.is-focus{outline:none;box-shadow:0 0 0 var(--border-accent) var(--color-focus-ring)} .btn:disabled,.btn[aria-disabled="true"],.btn.is-disabled{opacity:var(--color-action-disabled-opacity);pointer-events:none;box-shadow:none;transform:none} .btn.is-loading{pointer-events:none;color:transparent} .btn.is-loading .btn__icon,.btn.is-loading .btn__label{visibility:hidden} .btn.is-loading::after{content:"";position:absolute;width:1.05em;height:1.05em;border:var(--border-rule) solid color-mix(in srgb,var(--color-action-primary-text) 38%,transparent);border-top-color:var(--color-action-primary-text);border-radius:var(--radius-pill);animation:do-spin var(--dur-slower) var(--ease-linear) infinite} .btn--secondary.is-loading::after,.btn--ghost.is-loading::after{border-color:color-mix(in srgb,var(--color-text-default) 28%,transparent);border-top-color:var(--color-text-default)} .btn--block{display:flex;width:100%} /* ========================================================================== 02 · ICON BUTTON ========================================================================== */ .icon-btn{ box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center; width:var(--control-h);height:var(--control-h);flex:none; border:var(--border-hair) solid transparent;border-radius:var(--radius-pill); background:transparent;color:var(--color-text-default);cursor:pointer; transition:background var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out); } .icon-btn svg{width:var(--icon-md);height:var(--icon-md)} .icon-btn--sm{width:var(--control-h-sm);height:var(--control-h-sm)} .icon-btn--sm svg{width:var(--icon-sm);height:var(--icon-sm)} .icon-btn--lg{width:var(--control-h-lg);height:var(--control-h-lg)} .icon-btn:hover,.icon-btn.is-hover{background:var(--color-bg-hover)} .icon-btn--solid{background:var(--color-action-primary-bg);color:var(--color-action-primary-text)} .icon-btn--solid:hover,.icon-btn--solid.is-hover{background:var(--color-action-primary-hover)} .icon-btn:focus-visible,.icon-btn.is-focus{outline:none;box-shadow:0 0 0 var(--border-accent) var(--color-focus-ring)} .icon-btn:disabled,.icon-btn.is-disabled{opacity:var(--color-action-disabled-opacity);pointer-events:none} /* ========================================================================== 03 · LINK ========================================================================== */ .link{ color:var(--color-text-default);text-decoration:none;cursor:pointer; border-bottom:var(--border-hair) solid var(--color-border-default); transition:border-color var(--dur) var(--ease-out),color var(--dur) var(--ease-out); } .link:hover,.link.is-hover{border-bottom-color:var(--color-text-default)} .link:focus-visible,.link.is-focus{outline:none;border-radius:2px;box-shadow:0 0 0 var(--border-accent) var(--color-focus-ring)} .link--muted{color:var(--color-text-muted);border-bottom-color:var(--color-border-subtle)} .link--inline{font-family:inherit;font-size:inherit} .link--arrow{display:inline-flex;align-items:center;gap:var(--space-1);border-bottom:none} .link--arrow .link__arrow{transition:transform var(--dur) var(--ease-out)} .link--arrow:hover .link__arrow,.link--arrow.is-hover .link__arrow{transform:translateX(3px)} /* ========================================================================== 04 · FORM — Field group / Input / Textarea / Select states default/focus/filled/disabled/error ========================================================================== */ .field{display:flex;flex-direction:column;gap:var(--space-2)} .field__label{font-family:var(--font-sans);font-size:var(--fs-200);font-weight:var(--fw-medium);color:var(--color-text-default)} .field__label .field__req{color:var(--color-danger);margin-left:2px} .field__hint{font-family:var(--font-sans);font-size:var(--fs-200);color:var(--color-text-subtle)} .field__error{font-family:var(--font-sans);font-size:var(--fs-200);color:var(--color-danger-text)} .input,.textarea,.select{ box-sizing:border-box;width:100%;display:block; font-family:var(--font-sans);font-size:var(--fs-300);color:var(--color-text-default); background:var(--color-bg-surface); border:var(--border-hair) solid var(--color-border-default);border-radius:var(--radius-input); transition:border-color var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out); } .input,.select{height:var(--control-h);padding:0 var(--space-4)} .textarea{min-height:calc(var(--control-h) * 2);padding:var(--space-3) var(--space-4);line-height:var(--lh-ui);resize:vertical} .input::placeholder,.textarea::placeholder{color:var(--color-text-subtle)} .input:focus,.textarea:focus,.select:focus, .input.is-focus,.textarea.is-focus,.select.is-focus{outline:none;border-color:var(--color-text-default);box-shadow:0 0 0 var(--border-accent) var(--color-focus-ring)} .input:disabled,.textarea:disabled,.select:disabled,.is-disabled>.input{ opacity:var(--color-action-disabled-opacity);background:var(--color-bg-hover);cursor:not-allowed} .input.is-error,.textarea.is-error,.select.is-error, .input[aria-invalid="true"],.textarea[aria-invalid="true"],.select[aria-invalid="true"]{border-color:var(--color-danger)} .input.is-error:focus,.input[aria-invalid="true"]:focus, .textarea.is-error:focus,.select.is-error:focus{box-shadow:0 0 0 var(--border-accent) color-mix(in srgb,var(--color-danger) 30%,transparent)} /* select caret (token-colored, structural geometry) */ .select-wrap{position:relative;display:block} .select-wrap .select{appearance:none;-webkit-appearance:none;padding-right:var(--space-7)} .select-wrap::after{content:"";position:absolute;right:var(--space-4);top:50%;width:8px;height:8px; border-right:var(--border-rule) solid var(--color-text-subtle);border-bottom:var(--border-rule) solid var(--color-text-subtle); transform:translateY(-70%) rotate(45deg);pointer-events:none} /* ========================================================================== 05 · CHECKBOX / RADIO / SWITCH ========================================================================== */ .checkbox,.radio,.switch{display:inline-flex;align-items:center;gap:var(--space-2);cursor:pointer; font-family:var(--font-sans);font-size:var(--fs-300);color:var(--color-text-default)} .checkbox input,.radio input,.switch input{position:absolute;width:1px;height:1px;opacity:0;margin:0} .checkbox__box,.radio__box{box-sizing:border-box;width:var(--icon-md);height:var(--icon-md);flex:none; display:inline-flex;align-items:center;justify-content:center; border:var(--border-rule) solid var(--color-border-default);background:var(--color-bg-surface); transition:background var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out)} .checkbox__box{border-radius:var(--radius-swatch)} .radio__box{border-radius:var(--radius-pill)} .checkbox__box::after{content:"";width:5px;height:9px;border:solid var(--color-action-primary-text); border-width:0 var(--border-rule) var(--border-rule) 0;transform:rotate(45deg) translateY(-1px);opacity:0;transition:opacity var(--dur) var(--ease-out)} .radio__box::after{content:"";width:8px;height:8px;border-radius:var(--radius-pill);background:var(--color-action-primary-text);opacity:0;transition:opacity var(--dur) var(--ease-out)} .checkbox input:checked + .checkbox__box,.radio input:checked + .radio__box{background:var(--color-action-primary-bg);border-color:var(--color-action-primary-bg)} .checkbox input:checked + .checkbox__box::after,.radio input:checked + .radio__box::after{opacity:1} .checkbox input:focus-visible + .checkbox__box,.radio input:focus-visible + .radio__box, .checkbox.is-focus .checkbox__box,.radio.is-focus .radio__box{box-shadow:0 0 0 var(--border-accent) var(--color-focus-ring)} .checkbox.is-disabled,.radio.is-disabled,.switch.is-disabled, .checkbox:has(input:disabled),.radio:has(input:disabled),.switch:has(input:disabled){opacity:var(--color-action-disabled-opacity);cursor:not-allowed} .switch__track{box-sizing:border-box;position:relative;width:var(--switch-w);height:var(--switch-h);flex:none; border-radius:var(--radius-pill);background:var(--color-border-default);transition:background var(--dur) var(--ease-out)} .switch__track::after{content:"";position:absolute;top:50%;left:3px;transform:translateY(-50%); width:var(--switch-knob);height:var(--switch-knob);border-radius:var(--radius-pill); background:var(--color-bg-surface);box-shadow:var(--shadow-sm);transition:transform var(--dur) var(--ease-out)} .switch input:checked + .switch__track{background:var(--color-action-primary-bg)} .switch input:checked + .switch__track::after{transform:translate(calc(var(--switch-w) - var(--switch-knob) - 6px),-50%)} .switch input:focus-visible + .switch__track,.switch.is-focus .switch__track{box-shadow:0 0 0 var(--border-accent) var(--color-focus-ring)} /* ========================================================================== 06 · BADGE / TAG ========================================================================== */ .badge{display:inline-flex;align-items:center;gap:var(--space-1);padding:2px var(--space-2); font-family:var(--font-mono);font-size:var(--fs-100);font-weight:var(--fw-bold);letter-spacing:.02em; border-radius:var(--radius-pill);background:var(--color-neutral-bg);color:var(--color-text-muted)} .badge--success{background:var(--color-success-bg);color:var(--color-success-text)} .badge--warning{background:var(--color-warning-bg);color:var(--color-warning)} .badge--danger{background:var(--color-danger-bg);color:var(--color-danger-text)} .badge--info{background:var(--color-info-bg);color:var(--color-info)} .badge--dot::before{content:"";width:6px;height:6px;border-radius:var(--radius-pill);background:currentColor;flex:none} .tag{display:inline-flex;align-items:center;gap:var(--space-2);height:var(--control-h-sm);padding:0 var(--space-3); font-family:var(--font-sans);font-size:var(--fs-200);color:var(--color-text-muted); background:var(--color-bg-surface);border:var(--border-hair) solid var(--color-border-default);border-radius:var(--radius-pill)} .tag__remove{display:inline-flex;align-items:center;justify-content:center;width:var(--icon-md);height:var(--icon-md); margin-right:calc(-1 * var(--space-1));border:none;background:transparent;color:var(--color-text-subtle);cursor:pointer;border-radius:var(--radius-pill)} .tag__remove:hover{color:var(--color-text-default);background:var(--color-bg-hover)} .tag__remove svg{width:var(--icon-sm);height:var(--icon-sm)} /* ========================================================================== 07 · AVATAR ========================================================================== */ .avatar{display:inline-flex;align-items:center;justify-content:center;flex:none;overflow:hidden; width:var(--avatar-md);height:var(--avatar-md);border-radius:var(--radius-pill); background:var(--color-text-muted);color:var(--color-bg-surface); font-family:var(--font-fraunces);font-weight:var(--fw-semibold);font-size:var(--fs-200)} .avatar img{width:100%;height:100%;object-fit:cover} .avatar--sm{width:var(--avatar-sm);height:var(--avatar-sm);font-size:var(--fs-100)} .avatar--lg{width:var(--avatar-lg);height:var(--avatar-lg);font-size:var(--fs-400)} /* ========================================================================== 08 · CARD ========================================================================== */ .card{background:var(--color-bg-surface);border:var(--border-hair) solid var(--color-border-subtle); border-radius:var(--radius-card);box-shadow:var(--shadow-sm);overflow:hidden} .card__header{padding:var(--space-5) var(--space-5) 0} .card__body{padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-2)} .card__footer{padding:0 var(--space-5) var(--space-5);display:flex;gap:var(--space-3);align-items:center} .card__title{font-family:var(--font-serif);font-weight:var(--fw-semibold);font-size:var(--fs-400);line-height:var(--lh-heading);color:var(--color-text-default)} .card__text{font-family:var(--font-serif);font-size:var(--fs-300);line-height:var(--lh-read);color:var(--color-text-muted)} .card__kicker{font-family:var(--font-mono);font-size:var(--fs-100);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--color-text-subtle)} .card--interactive{cursor:pointer;transition:transform var(--dur-slow) var(--ease-out),box-shadow var(--dur-slow) var(--ease-out),border-color var(--dur) var(--ease-out)} .card--interactive:hover,.card--interactive.is-hover{transform:translateY(-4px);box-shadow:var(--shadow-soft);border-color:var(--color-border-default)} /* 可交互卡 hover 晕染 — 给可交互卡叠 .aura.aura--(心境谱)，柔焦光晕默认隐藏， 悬停浮起时渐入(同 .aura halo 手法，仍是光晕非色块)。例: class="card card--interactive aura aura--purple" */ .card--interactive.aura::before{opacity:0;transition:opacity var(--dur-slow) var(--ease-out)} .card--interactive.aura:hover::before,.card--interactive.aura.is-hover::before{opacity:.34} /* CARD · --inverse — 夜墨表面卡（+ PromptBlock 提示词块用例） 把卡片翻到暗面 surface（提示词 / 今日观察）。PromptBlock = card--inverse 上的「mono 正文 + 复制角标」用例。 */ .card--inverse{background:var(--color-bg-inverse);color:var(--color-text-inverse);border-color:var(--color-border-inverse)} .card--inverse .card__title{color:var(--color-text-inverse)} .card--inverse .card__body{color:var(--color-text-inverse-muted)} .prompt-block{display:flex;gap:var(--space-3);align-items:flex-start;background:var(--color-bg-inverse); border-radius:var(--radius-input);padding:var(--space-3) var(--space-4)} .prompt-block__text{flex:1;margin:0;font-family:var(--font-mono);font-size:var(--fs-100);line-height:1.85; color:var(--color-text-inverse-muted)} .prompt-block__copy{flex:none;font-family:var(--font-mono);font-size:var(--fs-100);color:var(--color-text-inverse); background:transparent;border:var(--border-hair) solid var(--color-border-inverse);border-radius:var(--radius-pill); padding:var(--space-1) var(--space-3);cursor:pointer;transition:background var(--dur) var(--ease-out)} .prompt-block__copy:hover{background:var(--color-bg-inverse-raised)} /* ========================================================================== 09 · TABS (underline) ========================================================================== */ .tabs__list{display:inline-flex;gap:var(--space-2);border-bottom:var(--border-hair) solid var(--color-border-subtle)} .tabs__tab{box-sizing:border-box;appearance:none;border:none;background:transparent;cursor:pointer; font-family:var(--font-sans);font-size:var(--fs-200);font-weight:var(--fw-medium);color:var(--color-text-muted); padding:var(--space-3) var(--space-2);position:relative; border-bottom:var(--border-rule) solid transparent;margin-bottom:calc(-1 * var(--border-hair)); transition:color var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out)} .tabs__tab:hover,.tabs__tab.is-hover{color:var(--color-text-default)} .tabs__tab[aria-selected="true"],.tabs__tab.is-selected{color:var(--color-text-default);border-bottom-color:var(--color-text-default);font-weight:var(--fw-semibold)} .tabs__tab:focus-visible{outline:none;border-radius:var(--radius-swatch);box-shadow:0 0 0 var(--border-accent) var(--color-focus-ring)} .tabs__panel{padding-top:var(--space-4);font-family:var(--font-serif);font-size:var(--fs-300);line-height:var(--lh-read);color:var(--color-text-muted)} /* ========================================================================== 10 · MODAL / DIALOG ========================================================================== */ .modal-scrim{position:fixed;inset:0;z-index:var(--z-modal);background:var(--color-overlay); display:flex;align-items:center;justify-content:center;padding:var(--space-5)} .modal{box-sizing:border-box;width:100%;max-width:var(--layout-modal);background:var(--color-bg-surface); border:var(--border-hair) solid var(--color-border-default);border-radius:var(--radius-card); box-shadow:var(--shadow-card);overflow:hidden} .modal__header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-4);padding:var(--space-5) var(--space-5) 0} .modal__title{font-family:var(--font-serif);font-weight:var(--fw-semibold);font-size:var(--fs-400);color:var(--color-text-default)} .modal__body{padding:var(--space-4) var(--space-5);font-family:var(--font-serif);font-size:var(--fs-300);line-height:var(--lh-read);color:var(--color-text-muted)} .modal__footer{display:flex;justify-content:flex-end;gap:var(--space-3);padding:0 var(--space-5) var(--space-5)} /* ========================================================================== 11 · ALERT (success/warning/danger/info) ========================================================================== */ .alert{display:flex;gap:var(--space-3);padding:var(--space-4);border-radius:var(--radius-input); border:var(--border-hair) solid transparent;font-family:var(--font-sans);font-size:var(--fs-200);line-height:var(--lh-ui)} .alert__icon{flex:none;width:var(--icon-md);height:var(--icon-md);margin-top:1px} .alert__content{display:flex;flex-direction:column;gap:2px} .alert__title{font-weight:var(--fw-semibold);color:var(--color-text-default)} .alert__body{color:var(--color-text-muted)} .alert--success{background:var(--color-success-bg);border-color:color-mix(in srgb,var(--color-success) 28%,transparent)} .alert--success .alert__icon{color:var(--color-success)} .alert--warning{background:var(--color-warning-bg);border-color:color-mix(in srgb,var(--color-warning) 28%,transparent)} .alert--warning .alert__icon{color:var(--color-warning)} .alert--danger{background:var(--color-danger-bg);border-color:color-mix(in srgb,var(--color-danger) 28%,transparent)} .alert--danger .alert__icon{color:var(--color-danger)} .alert--info{background:var(--color-info-bg);border-color:color-mix(in srgb,var(--color-info) 28%,transparent)} .alert--info .alert__icon{color:var(--color-info)} /* ========================================================================== 12 · TOAST (暗底，状态点缀) ========================================================================== */ .toast{display:inline-flex;align-items:center;gap:var(--space-2);max-width:var(--layout-toast); padding:var(--space-3) var(--space-4);background:var(--color-bg-inverse);color:var(--color-text-inverse); border-radius:var(--radius-pill);box-shadow:var(--shadow-raise); font-family:var(--font-sans);font-size:var(--fs-200)} .toast__icon{flex:none;width:var(--icon-sm);height:var(--icon-sm)} .toast--success .toast__icon{color:var(--green-300)} .toast--danger .toast__icon{color:var(--coral-300)} .toast__action{margin-left:var(--space-2);color:var(--color-text-inverse);border:none;background:transparent; font-family:var(--font-sans);font-size:var(--fs-200);font-weight:var(--fw-semibold);cursor:pointer; border-bottom:var(--border-hair) solid color-mix(in srgb,var(--color-text-inverse) 50%,transparent)} /* ========================================================================== 13 · TOOLTIP ========================================================================== */ .tooltip{position:relative;display:inline-block;max-width:var(--layout-tooltip); padding:var(--space-2) var(--space-3);background:var(--color-bg-inverse);color:var(--color-text-inverse); border-radius:var(--radius-input);box-shadow:var(--shadow-raise); font-family:var(--font-sans);font-size:var(--fs-200);line-height:var(--lh-ui)} .tooltip::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(-50%) rotate(45deg); width:8px;height:8px;background:var(--color-bg-inverse)} /* ========================================================================== 14 · EMPTY STATE ========================================================================== */ .empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--space-3); padding:var(--space-7) var(--space-5);max-width:var(--container-read);margin:0 auto} .empty__icon{display:inline-flex;align-items:center;justify-content:center;width:var(--space-8);height:var(--space-8); border-radius:var(--radius-pill);background:var(--color-neutral-bg);color:var(--color-text-subtle)} .empty__icon svg{width:var(--icon-lg);height:var(--icon-lg)} .empty__title{font-family:var(--font-serif);font-weight:var(--fw-semibold);font-size:var(--fs-400);color:var(--color-text-default)} .empty__desc{font-family:var(--font-serif);font-size:var(--fs-300);line-height:var(--lh-read);color:var(--color-text-muted)} .empty__actions{display:flex;gap:var(--space-3);margin-top:var(--space-2)} /* ========================================================================== 15 · TABLE — 报刊数据表（表头双线 + 细分隔，数字列右对齐 tabular-nums） variants: --zebra 隔行底 · --hover 悬停行 · 包 .table-wrap 横向滚动 高亮底走 town 式淡染叠底（同色低透 over transparent，随纸主题自适应）。默认蓝 (--accent-blue 观照·澄明)；改 --table-accent 可换其它心境谱色（仍是淡染识别，非实填充）。 status: 待确认（出身 接入流程页设计，v1.1 候选） ========================================================================== */ .table-wrap{overflow-x:auto} .table{width:100%;border-collapse:collapse;font-family:var(--font-serif);font-size:var(--fs-300);color:var(--color-text-default)} .table th,.table td{text-align:left;padding:var(--space-4);vertical-align:top;line-height:var(--lh-ui)} .table thead th{font-family:var(--font-mono);font-size:var(--fs-100);letter-spacing:var(--ls-label);text-transform:uppercase; font-weight:var(--fw-medium);color:var(--color-text-subtle);border-bottom:var(--border-rule) solid var(--color-border-strong)} .table tbody td{border-bottom:var(--border-hair) solid var(--color-border-subtle)} .table tbody tr:last-child td{border-bottom:0} .table--zebra tbody tr:nth-child(even){background:color-mix(in srgb,var(--table-accent,var(--accent-blue)) 8%,transparent)} .table--hover tbody tr:hover{background:color-mix(in srgb,var(--table-accent,var(--accent-blue)) 14%,transparent)} .table__num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap} /* ========================================================================== 16 · STEPS — 编号步骤流 / 时间线（左竖线 + 墨色编号圆点） .step__num--done = success 绿（已完成 / 通过）。编号写进 markup（可编辑、可打印）。 status: 待确认（出身 接入流程页设计，v1.1 候选） ========================================================================== */ .steps{position:relative;list-style:none;margin:0;padding:0 0 0 var(--space-7);display:flex;flex-direction:column;gap:var(--space-4)} .steps::before{content:"";position:absolute;left:14px;top:6px;bottom:6px;width:var(--border-rule);background:var(--color-border-default)} .step{position:relative} .step__num{position:absolute;left:calc(-1 * var(--space-7));top:0;width:30px;height:30px;border-radius:var(--radius-pill); background:var(--color-action-primary-bg);color:var(--color-action-primary-text); font-family:var(--font-mono);font-weight:var(--fw-bold);font-size:var(--fs-200); display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-raise)} .step__num--done{background:var(--color-success)} .step__title{font-family:var(--font-serif);font-weight:var(--fw-semibold);font-size:var(--fs-400);line-height:var(--lh-heading);color:var(--color-text-default)} .step__text{font-family:var(--font-serif);font-size:var(--fs-300);line-height:var(--lh-read);color:var(--color-text-muted);margin-top:var(--space-1)} /* STEPS · --horizontal — 横向步骤条 / 进度指示器。编号 done ✓ 转绿 / active 墨底 / idle 弱；步骤间 .step__line 连接。 */ .steps--horizontal{flex-direction:row;align-items:center;gap:var(--space-3);padding:0} .steps--horizontal::before{display:none} .steps--horizontal .step{display:flex;align-items:center;gap:var(--space-2);flex:none} .steps--horizontal .step__num{position:static;left:auto;top:auto;width:22px;height:22px;box-shadow:none; background:transparent;border:var(--border-hair) solid var(--color-border-default);color:var(--color-text-subtle)} .steps--horizontal .step__num--active{background:var(--color-action-primary-bg); color:var(--color-action-primary-text);border-color:var(--color-action-primary-bg)} .steps--horizontal .step__num--done{background:var(--color-success-bg); color:var(--color-success);border-color:var(--color-success)} .steps--horizontal .step__title{font-family:var(--font-sans);font-size:var(--fs-200);font-weight:var(--fw-semibold); line-height:1;white-space:nowrap;color:var(--color-text-default)} .steps--horizontal .step__title--idle{color:var(--color-text-subtle);font-weight:var(--fw-regular)} .steps--horizontal .step__line{flex:1;min-width:18px;height:1px;background:var(--color-border-default);list-style:none} /* ========================================================================== 17 · CONNECT ROW — 接入行（条状摘要卡 · 点击就地展开为抽屉 disclosure row） 一行 = 晕染点 + 名称(+「推荐」) + 提示 + 状态/chevron；点击整行展开 .connect-row__panel。 展开态 = 整行统一墨边容器 + 内部一条细线分隔；chevron 旋转。抽屉常驻 DOM，靠 --open 做 max-height 展开。 variants: --done success 绿描边显 ✓ · --soon 即将支持(降透禁点) status: 待确认（出身 aiself 接入流程页平台接入行，v1.1 候选） ========================================================================== */ .connect-row{border:var(--border-hair) solid var(--color-border-subtle);border-radius:var(--radius-card); background:var(--color-bg-surface);box-shadow:var(--shadow-sm);overflow:hidden; transition:border-color var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out)} .connect-row:hover{border-color:var(--color-border-default)} .connect-row--done{border-color:color-mix(in srgb,var(--color-success) 45%,var(--color-border-subtle))} .connect-row--soon{opacity:.55} .connect-row--open,.connect-row--open:hover{border-color:var(--color-border-strong);box-shadow:var(--shadow-soft)} .connect-row__summary{display:flex;align-items:center;gap:var(--space-3);width:100%;text-align:left; background:none;border:none;cursor:pointer;padding:var(--space-4);font:inherit;color:inherit} .connect-row--soon .connect-row__summary{cursor:default} .connect-row__main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px} .connect-row__name{display:flex;align-items:center;gap:var(--space-2); font-family:var(--font-serif);font-weight:var(--fw-semibold);font-size:var(--fs-300);color:var(--color-text-default)} .connect-row__rec{font-family:var(--font-mono);font-size:8.5px;letter-spacing:.1em; color:var(--color-action-primary-text);background:var(--color-action-primary-bg); border-radius:var(--radius-pill);padding:2px var(--space-2)} .connect-row__hint{font-family:var(--font-sans);font-size:var(--fs-200);line-height:var(--lh-ui); color:var(--color-text-subtle);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .connect-row--done .connect-row__hint{color:var(--color-success)} .connect-row__meta{flex:none;font-family:var(--font-mono);font-size:var(--fs-200);color:var(--color-text-subtle)} .connect-row--done .connect-row__meta{color:var(--color-success)} .connect-row__chevron{display:inline-block;font-size:18px;line-height:1;color:var(--color-text-subtle); transition:transform var(--dur-slow) var(--ease-standard)} .connect-row--open .connect-row__chevron{transform:rotate(90deg);color:var(--color-text-muted)} .connect-row__panel{overflow:hidden;max-height:0;opacity:0;padding:0 var(--space-4); border-top:var(--border-hair) solid transparent;display:flex;flex-direction:column;gap:var(--space-3); transition:max-height var(--dur-slow) var(--ease-standard),opacity var(--dur) var(--ease-out), padding var(--dur-slow) var(--ease-standard),border-color var(--dur) var(--ease-out)} .connect-row--open .connect-row__panel{max-height:640px;opacity:1;padding:var(--space-4); border-top-color:var(--color-border-subtle)} /* ========================================================================== 18 · CHOICE CARD — 选择卡（大号可点的单选 / 多选答案卡） 区别于小控件 Radio / Checkbox：这是整行可点的卡。选中 .choice-card--selected 转墨底。 容器 .choice-list 竖向堆叠。status: 待确认（出身 aiself 访谈页，v1.1 候选） ========================================================================== */ .choice-list{display:flex;flex-direction:column;gap:var(--space-2)} .choice-card{box-sizing:border-box;width:100%;text-align:left;display:flex;align-items:center;gap:var(--space-3); background:var(--color-bg-surface);border:var(--border-hair) solid var(--color-border-subtle);border-radius:var(--radius-card); box-shadow:var(--shadow-sm);padding:var(--space-4);cursor:pointer; font-family:var(--font-serif);font-size:var(--fs-300);color:var(--color-text-default); transition:border-color var(--dur) var(--ease-out),transform var(--dur-fast) var(--ease-out), background var(--dur) var(--ease-out),color var(--dur) var(--ease-out)} .choice-card:hover{border-color:var(--color-border-strong);transform:translateY(-1px)} .choice-card:focus-visible{outline:var(--border-rule) solid var(--color-focus-ring);outline-offset:2px} .choice-card--selected,.choice-card[aria-pressed="true"]{ background:var(--color-action-primary-bg);color:var(--color-action-primary-text);border-color:var(--color-action-primary-bg)} .choice-card--selected:hover{border-color:var(--color-action-primary-bg)} .choice-card[disabled]{opacity:var(--color-action-disabled-opacity);cursor:not-allowed;transform:none;box-shadow:none} /* ========================================================================== 19 · SOURCE QUOTE — 引文 · 出处（引用原话 + mono 出处） 斜体宋体引文 + mono 出处行。纯墨纸，无彩色竖条。用于「有据可依」的证据陈列。 status: 待确认（出身 aiself 画像页证据引文，v1.1 候选） ========================================================================== */ .source-quote{margin:0;font-family:var(--font-serif);font-style:italic;font-size:var(--fs-300); line-height:1.72;color:var(--color-text-muted);text-wrap:pretty} .source-quote__cite{display:block;margin-top:var(--space-2);font-family:var(--font-mono);font-style:normal; font-size:var(--fs-100);letter-spacing:.06em;color:var(--color-text-subtle)} .source-quote + .source-quote{margin-top:var(--space-4)} /* ========================================================================== 20 · METER — 细轨进度 / 用量条（展示型，非可拖拽 Slider） 8px 细轨 + 圆头；状态切色：墨 / warning 橙 / danger 红。 status: 待确认（出身 ClaudeGauge 菜单栏用量条，v1.x 候选） ========================================================================== */ .meter{width:100%} .meter__track{height:8px;border-radius:var(--radius-pill);background:var(--color-border-subtle);overflow:hidden} .meter__fill{height:100%;border-radius:var(--radius-pill);background:var(--color-text-default); transition:width var(--dur-slow) var(--ease-out)} .meter--warn .meter__fill{background:var(--color-warning)} .meter--crit .meter__fill{background:var(--color-danger)} /* ========================================================================== 21 · SEGMENTED — 紧凑分段切换（2–4 项就地单选） 药丸底槽 + 墨底选中。边界：Tabs = 内容区切换；Segmented = 紧凑选项切换。 status: 待确认（出身 ClaudeGauge 工具栏状态切换，v1.x 候选） ========================================================================== */ .segmented{display:inline-flex;flex-wrap:wrap;gap:var(--space-1);padding:var(--space-1); background:var(--color-bg-hover);border:var(--border-hair) solid var(--color-border-subtle); border-radius:var(--radius-pill)} .segmented__btn{box-sizing:border-box;appearance:none;border:none;background:none;cursor:pointer; font-family:var(--font-sans);font-size:var(--fs-200);font-weight:var(--fw-medium);color:var(--color-text-muted); padding:var(--space-2) var(--space-4);border-radius:var(--radius-pill); transition:background var(--dur) var(--ease-out),color var(--dur) var(--ease-out)} .segmented__btn:hover,.segmented__btn.is-hover{color:var(--color-text-default)} .segmented__btn:focus-visible{outline:none;box-shadow:0 0 0 var(--border-accent) var(--color-focus-ring)} .segmented__btn.is-selected,.segmented__btn[aria-pressed="true"]{ background:var(--color-bg-inverse);color:var(--color-text-inverse)} /* ========================================================================== 减弱动效 — 尊重 prefers-reduced-motion ========================================================================== */ @media (prefers-reduced-motion: reduce){ .btn,.icon-btn,.card--interactive{transition-duration:.01ms} .btn--primary:hover,.btn--primary.is-hover,.card--interactive:hover,.card--interactive.is-hover{transform:none} .btn.is-loading::after{animation:none} .connect-row,.connect-row__chevron,.connect-row__panel,.choice-card,.prompt-block__copy{transition-duration:.01ms} .choice-card:hover{transform:none} .meter__fill{transition:none} .segmented__btn{transition-duration:.01ms} }