/* tokens.css —— 工作台网页的设计 token 唯一来源（铁律 15）。 * * 本文件是全站唯一允许出现裸值（px / #hex）的地方。业务 CSS 一律 var(--x)，由 tools/check_css.py 机器执法。 * 值照 D092 的视觉定案，逐项见 docs/reference/ui-design.md；结构和交互照 Claude 网页（D084）。 * 现在只有深色一套；浅色的值在同一页，什么时候上见 O092。 */ /* 字体文件自带，不走外网 CDN；都只含拉丁字母。Geist / Geist Mono / Chakra Petch 均为 SIL OFL。 */ @font-face { font-family: 'Geist'; src: url('../fonts/Geist-400-latin.woff2') format('woff2'); font-weight: 400; font-display: swap; } @font-face { font-family: 'Geist'; src: url('../fonts/Geist-500-latin.woff2') format('woff2'); font-weight: 500; font-display: swap; } @font-face { font-family: 'Geist'; src: url('../fonts/Geist-600-latin.woff2') format('woff2'); font-weight: 600; font-display: swap; } @font-face { font-family: 'Geist Mono'; src: url('../fonts/GeistMono-400-latin.woff2') format('woff2'); font-weight: 400; font-display: swap; } @font-face { font-family: 'Geist Mono'; src: url('../fonts/GeistMono-500-latin.woff2') format('woff2'); font-weight: 500; font-display: swap; } /* 品牌字体：只给左上角和登录框的字标 OpenLucy，跟官网 openlucy.com 第一幕同一款同一粗细（D115） */ @font-face { font-family: 'Chakra Petch'; src: url('../fonts/ChakraPetch-700-latin.woff2') format('woff2'); font-weight: 700; font-display: swap; } :root { color-scheme: dark; /* ── 表面，由深到浅：纯黑底，层次靠几档极深的灰和 1px 线，不发光 ─────────── */ --bg: #000000; /* 页面底、输入框底 */ --sidebar-bg: #050607; /* 侧栏：比页面略亮，靠右边一条线分开 */ --bg-card: #0A0B0E; /* 卡片、表格、次按钮底 */ --bg-hover: #0F1115; /* 悬停、展开的那一行 */ --bg-elev: #0F1115; /* 浮在页面上的：菜单、提示条 */ --bg-row: #1A1D23; /* 进度条轨道、中性徽章底 */ --active-bg: #1A1D23; /* 选中：导航、分段选择、菜单悬停 */ /* ── 文字 3 级 ────────────────────────────────────────────────────── */ --text: #EDEFF2; /* 正文、数值 */ --text-val: #EDEFF2; /* 强调（跟正文同值；层次靠字重和字号） */ --text-2: #9BA3AE; /* 二级：说明、没选中的导航 */ --text-dim: #646B76; /* 三级：表头、时间、标签 */ /* ── 品牌青：OpenLucy 的原色，只描边、不填色（D092）──────────────────── */ --accent: #00D4FF; /* 字标小方块、进度条、选中导航的图标、焦点框 */ --accent-fg: #00161C; /* 只在字标小方块里 */ --ring: var(--accent); /* 主按钮、开关「开」、「运行中」的外圈；浅色版换 #007C99 */ /* 侧栏字标在有机器人跑任务时（照 OpenLucy .sidebar-brand）：青字带光，3 秒呼吸一次；关了动效停在常亮那档。全站只有它发光（D092、D115） */ --brand-glow: color-mix(in srgb, var(--accent) 35%, transparent); /* OpenLucy --accent-glow */ --brand-shadow: 0 0 8px var(--brand-glow); --brand-shadow-lo: 0 0 3px var(--brand-glow); --brand-shadow-hi: 0 0 5px var(--accent), 0 0 14px var(--brand-glow); --brand-breath: 3s; /* ── 状态色：只表示状态，严禁拿去当装饰或分类 ─────────────────────────── */ --success: #3FBF86; --warning: #E3A646; --danger: #EB6064; /* ── 分类色：只回答「谁是谁」（分组、机器人、头像、图表），按 1→8 固定顺序分配 ── */ --cat-1: #4DB8A8; --cat-2: #7099EC; --cat-3: #A08BE6; --cat-4: #DB85B7; --cat-5: #E09A5C; --cat-6: #86BD6E; --cat-7: #CDB45C; --cat-8: #8E9BB0; --wash: 16%; /* 分类色、状态色做淡底时的浓度 */ /* ── 边框 ─────────────────────────────────────────────────────────── */ --border: #1A1D22; /* 分隔线、卡片边 */ --border-soft: #2A2E35; /* 按钮、输入框、关着的开关 */ --border-strong: #3A3F48; /* 悬停、聚焦、浮层的边 */ --border-w: 1px; --mask: rgba(0,0,0,0.66); /* 模态遮罩 */ /* ── 字体族 ───────────────────────────────────────────────────────── */ --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft YaHei', sans-serif; /* 中文落微软雅黑（照 OpenLucy 的字栈） */ --font-mono: 'Geist Mono', 'SF Mono', 'Consolas', 'Microsoft YaHei', monospace; /* 数值、名字、时间一律等宽；中文落微软雅黑：Windows 上 monospace 的中文默认是宋体，跟旁边的雅黑混着怪（Run Output 工具块，用户 10-07） */ --font-brand: 'Chakra Petch', var(--font-sans); /* 只给字标用：最粗 700，不加额外字距（D115） */ /* ── 字号 ─────────────────────────────────────────────────────────── */ --fs-note: 14px; /* 表头、小标题、时间、说明文字 */ --fs-xs: 14px; /* 标签、单位、角标 */ --fs-sm: 15px; /* 次要信息、行内按钮、菜单 */ --fs-base: 16px; /* 正文主力、导航、按钮（D098：比样张大 2 像素） */ --fs-lg: 18px; /* 设置里的小节标题 */ --fs-xl: 24px; /* 页面标题 */ --fs-stat: 26px; /* 统计数值（等宽） */ --fs-brand: 28px; /* 字标 OpenLucy（OpenLucy 也是 28） */ /* ── 字重 4 档 ────────────────────────────────────────────────────── */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* 只给字标 */ /* ── 行高 ─────────────────────────────────────────────────────────── */ --lh-tight: 1.25; --lh-base: 1.45; /* ── 间距 8 档 + 1 档发丝 ─────────────────────────────────────────── */ --space-hair: 1px; --space-1: 2px; --space-2: 4px; --space-3: 6px; --space-4: 8px; --space-5: 10px; --space-6: 12px; --space-7: 16px; --space-8: 20px; /* 页面四周的留白：只给内容区用，不是间距档 */ --page-pad-y: 28px; --page-pad-x: 36px; /* ── 控件高度 ─────────────────────────────────────────────────────── */ --h-sm: 24px; /* 徽章、状态胶囊 */ --h-md: 30px; /* 行内按钮、输入框、分段选择的一段 */ --h-nav: 32px; /* 一行一项：侧栏导航、搜索、账号菜单、设置分类栏（D098，跟 Claude 网页一样紧） */ --h-lg: 36px; /* 主按钮、次按钮、New task、搜索 */ /* ── 圆角 ─────────────────────────────────────────────────────────── */ --radius-xs: 5px; /* 快捷键框、勾选框 */ --radius-sm: 6px; /* 徽章、分组标签、菜单项、分段选择的一段 */ --radius-ctl: 7px; /* 行内按钮、图标按钮 */ --radius: 8px; /* 按钮、导航项、输入框、提示条 */ --radius-md: 10px; /* 小卡片、菜单 */ --radius-lg: 12px; /* 卡片、表格、浮窗 */ --radius-pill: 999px; /* 状态胶囊 */ /* ── 开关：只描边。开 = 青色外圈 + 正文色圆点在右；关 = 灰圈 + 暗圆点在左 ─────── */ --switch-w: 32px; --switch-h: 18px; --switch-knob: 14px; /* ── 浮层阴影：菜单、设置浮窗浮在页面上面，只用黑影，不带色 ──────────────── */ --shadow-pop: 0 8px 24px rgba(0,0,0,0.55); /* ── 布局（结构照 Claude 网页：侧栏、左下角账号菜单、设置浮窗；D084）──────── */ --sidebar-w: 260px; --rail-w: 52px; /* 侧栏收起后只剩图标的那一条 */ --menu-w: 300px; /* 左下角账号菜单 */ --submenu-w: 200px; --settings-w: 960px; /* 设置浮窗 */ --settings-h: 680px; --set-nav-w: 210px; /* 设置浮窗左边分类栏 */ --avatar: 32px; --logo: 24px; /* 字标旁的品牌青小方块 */ --logo-glyph: 14px; --ic: 16px; /* 线条图标 */ --ic-sm: 14px; --modal-w: 560px; /* 确认浮窗最大宽度 */ --gate-w: 360px; /* 登录框宽度 */ --form-w: 480px; /* 邀请这类单行表单的最大宽度 */ --meter-h: 4px; /* 进度条 */ /* ── Schedule 页的今日时间轴（一个机器人一行，0–24 点一条尺）────────────── */ --tl-name-w: 200px; /* 左边：开关 + 机器人名字 */ --tl-col-w: 84px; /* 行尾一列（Runs today、Next）宽；轨道尾到 Runs 中线、Runs 到 Next 中线都是这么长 */ --tl-end-w: calc(2.5 * var(--tl-col-w) - var(--space-6)); /* 右边：两列 + 往右让的那截（让轨道尾到 Runs 中线也是一列宽） */ --tl-row-h: 32px; /* 一行 */ --tl-mark: 3px; /* 一处排期一道刻度（照 OpenLucy .mtl-mark） */ --tl-track-h: 16px; /* 轨道那条底色条（照 OpenLucy .mtl-track） */ /* ── 灯（D167，只在 OpenLucy 客户端里有）：连不上时红灯闪多快 ───────────────── */ --link-blink: 1s; /* ── 机器人卡 = 屏幕（D188 改，照 OpenLucy 画面卡 bot/bot.css）：字浮在画面上，数值照 OpenLucy 的 CSS 像素（外壳 tokens.css 的 --olo-card-* 同值）。 亮着的卡上画面是框架贴的缩略图、字是框架上面的字层画的；这里画没亮的卡，⛶、Stop、Settings、Power 也在这里接鼠标 ── */ --card-pad: 8px; /* 字、钮离四边 */ --card-gap: 4px; --card-fs: 12px; /* 引用、简介、代理、缓存（OpenLucy --fs-xs） */ --card-fs-name: 14px; /* 名字（OpenLucy --fs-base） */ --card-fs-task: 15px; /* 在跑的工作链 · 任务（OpenLucy --fs-md） */ --card-fs-zoom: 13px; /* ⛶（OpenLucy --fs-sm） */ --card-norun: 7.29cqw; /* NOT RUNNING：卡宽 × 140/1920（OpenLucy --fs-stat 28 × 5 × 卡宽/1920） */ --card-btn: 26px; /* ⛶ 边长、急停的高（宽按字）；名字那一行也这么高，字跟 ⛶ 竖向居中（OpenLucy .bm-screen-zoom） */ --card-act-h: 22px; /* 右下 Settings、Power 两个钮的高；宽按最长的字定（用户 10-07 换掉开关） */ --card-ic: 14px; /* 那两个钮上的 ⚙、⏻ */ --card-dot: 6px; --card-tri-w: 8px; /* 在跑那行前面的 ▶（border 画的三角） */ --card-tri-h: 5px; --card-radius-sm: 2px; --card-hover-glow: 3px; /* 悬停时边框外一圈 */ --card-ls-tight: -0.3px; --card-ls-wide: 0.5px; --card-scrim: linear-gradient(to bottom, rgba(5,8,12,0.72) 0%, rgba(5,8,12,0.12) 26%, rgba(5,8,12,0.12) 54%, rgba(5,8,12,0.84) 100%); --card-shadow: 0 1px 3px rgba(0,0,0,0.85); /* 字的投影（OpenLucy --overlay-strong） */ --card-btn-bg: rgba(0,0,0,0.55); /* ⛶ 的底（OpenLucy --overlay-soft） */ --card-norun-shadow: 0 2px 8px rgba(0,0,0,0.85); --card-breathe: 2.4s; /* 在跑：边框外一圈光晕呼吸（OpenLucy bm-live-breathe 4→16），在跑那行同频呼吸 */ --card-glow-min: 4px; --card-glow-max: 16px; --card-glow-in-min: 10px; /* 点开、在跑：画面四边往里的光晕呼吸（同 --card-breathe）。OpenLucy 4→16，用户 10-07 要散得更深 */ --card-glow-in-max: 80px; --card-esc-fade: 0.3s; /* 点开时 Esc 提示淡入淡出（停多久是 app.js 的 ESC_MS） */ /* ── Run Output（D020，只在 OpenLucy 客户端里有）：照 OpenLucy 画面卡上的玻璃框（chain/chain.css 的 .sse-hud）。 按 1920 宽的屏设计，整体按画面宽等比缩（--out-scale 是 JS 算的）。框用 --accent（OpenLucy 是 --success 绿，用户 10-07 要蓝）；字号三档照 OpenLucy：回答 1.15em、思考和工具 1em、指标条 0.92em ── */ --out-w: 845px; /* 1920×1080 上的 44%×58% */ --out-h: 626px; --out-pad: 8px; /* 离画面右边（照 OpenLucy right 8） */ --out-clear: 38px; /* 墙上的卡离画面底边：让出右下角的 Power 钮（离底 8、高 22，再空 8；OpenLucy 开关压在框上，我们两层叠不了）。全屏时没钮，用 --out-pad */ --out-fs: 12px; /* 框里的基准字号 */ --out-fs-answer: 1.15em; --out-fs-bar: 0.92em; --out-glass: rgba(0,0,0,0.55); --out-glass-faint: rgba(0,0,0,0.30); --out-glow: 0 0 16px color-mix(in srgb, var(--accent) 30%, transparent); --out-track: 0.5px; /* RUN OUTPUT 那行的字距 */ --out-stamp: 70px; /* 右上角时间占的宽 */ --out-bar-w: 36px; /* 指标条里的上下文占用条 */ --out-bar-h: 2px; --out-breath: 1.8s; /* 在跑时圆点呼吸多快 */ --out-li-m: 1.6em; /* 列表的序号那一列 */ --out-li-gap: 0.45em; --out-ico: 1.5em; /* 动静那行前面的图标 */ --out-hang: -0.5em; /* 段首全角开标点往左缩半个字 */ --tl-mark-multi: 6px; /* 10 分钟内合并的几处 */ --tl-mark-glow: 0 0 4px color-mix(in srgb, var(--accent) 35%, transparent); --wf-run-glow: 0 0 14px color-mix(in srgb, var(--accent) 25%, transparent); /* 在跑的链外面一圈（照 OpenLucy .tree-chain.running） */ /* 刻度的弱光（OpenLucy --accent-glow 是 accent 35%） */ --tl-pop-w: 300px; /* 悬停 / 点开的那张清单 */ /* ── Workflows 页的 Schedule 标签（照 OpenLucy 任务编排）：左边竖轴、右边月历 ───────────────── */ --tt-col-w: 34%; /* 左列竖轴占宽（OpenLucy .timeline-col） */ --tt-col-min: 380px; --tt-h-min: 500px; /* 整块最矮；平时 JS 量到页面底（OpenLucy _tlFitWrap） */ --tt-gutter: 84px; /* 轴左边放整点字的那一条 */ --tt-track: 30px; /* 一条排程前面那段青线 */ --tt-cal-cell: 62px; /* 月历一格 = 周几钮宽，两个必须同一个数才对得齐 */ --tt-stats-min: 240px; --tt-stats-max: 360px; --tt-pop-w: 300px; --tt-pop-k: 72px; /* 浮层里左边那列字 */ --tt-num-w: 72px; /* 次数、秒数小框 */ --tt-mark: 5px; /* 整点圆点 */ --tt-mark-major: 7px; /* 0、6、12、18、24 点 */ --tt-mark-minor: 3px; /* 放大后的 15、5 分钟 */ --tt-blink: 1.2s; /* 虚线吸到已有那一刻，那条名字慢闪 */ --tt-breathe: 2.4s; /* 月历今天那格 */ /* ── Workflows 页（照 OpenLucy 的工作链）：链头一行的四列、任务树、任务编辑框 ─────────── */ --wf-name-w: 210px; /* 链行：名字那一列，屏幕窄了能缩到 --wf-name-min */ --wf-name-min: 100px; --wf-c-bot: 190px; /* 链行「{标签:值}」四格的宽（照 OpenLucy .cn-chip 定宽）：Robots、Tasks、Schedule、Last run */ --wf-c-task: 84px; --wf-c-sched: 130px; --wf-c-last: 220px; --wf-issues-w: 72px; /* 「1 to fix」那一列，空也占位 */ --wf-caret-w: 16px; /* 链行最左的小箭头 */ --wf-bar: 3px; /* 在跑、缺东西的链左边那道状态条 */ --wf-tag-w: 56px; /* 树上任务的代号框（START、A、AB）：定宽，树线才钉得住在正中 */ --wf-tag-h: 20px; --wf-elbow: 16px; /* 出口那一行从父中线拐进来的那一横 */ --wf-row-h: 30px; /* 树上一个任务一行（照 OpenLucy 压紧） */ --wf-exit-h: 24px; /* 树上一个出口一行 */ --te-w: 1180px; /* 任务编辑框 */ --te-h: 860px; --te-prompt-h: 320px; --te-tag-w: 84px; /* 出口编辑那一行的 A / SUCCESS / FAIL 签 */ --te-to-w: 210px; /* 出口编辑那一行的「去哪」 */ --te-filter-w: 200px; --te-name-w: 200px; /* 绑定清单一行的名字 */ --ws-w: 820px; /* 工作链设置 */ /* ── 侧栏「资源」：技能、去重表、目标池、变量（D203，照 OpenLucy 那几页）──────────────────── */ --res-col-ns: 130px; /* 清单里自动生成的号（dd_…、pl_…）、技能的平台名 */ --res-col-num: 96px; /* 条数、待取、总数 */ --res-col-time: 150px; /* 更新时间 */ --res-col-act: 90px; /* 行尾按钮 */ --res-modal-w: 1040px; /* 去重表、目标池的详情框 */ --res-list-h: 360px; /* 详情框里记录、目标清单的限高（长表在框里滚） */ --res-editor-h: 360px; /* 技能正文框 */ --res-col-name: 250px; /* 变量清单：{{名字}} 那一列 */ --var-pick-min: 260px; /* 任务编辑框「+ Variable」点开的小清单 */ --var-pick-h: 50vh; /* 它的限高（变量多了在框里滚，照 OpenLucy .var-picker） */ }