/* ========================================================================== Design Tokens — single source of truth for colors, surfaces, borders, shadows, radii, blurs, motion. Every component CSS should read from these variables instead of hard-coding values, so a palette change is a one-file edit. Usage: color: var(--fg); background: var(--glass-med); box-shadow: var(--shadow-glass); Dark overrides are grouped at the bottom under `html.dark`. ========================================================================== */ @import './layers.css'; :root { /* ----- Canvas / surfaces ----- */ --bg-app: #f4f4f5; /* outermost app bg (visible behind main) */ --bg-main: #ffffff; /* .main container */ --bg-surface: #ffffff; /* opaque cards */ --bg-muted: #fafafa; /* stage bg, subtle surfaces */ --bg-elevated: #f3f3f5; /* input backgrounds, chip bg */ --bg-subtle: rgba(0, 0, 0, 0.04); /* pill/chip soft fill */ --bg-canvas: #f3f3f3; /* React Flow 画布底色 — 浅灰带一点温度 */ /* ----- Text ----- */ --fg: #111111; /* primary text */ --fg-muted: #555555; /* secondary text */ --fg-subtle: #888888; /* labels, captions */ --fg-faint: #aaaaaa; /* hints, icon accents */ --fg-inverse: #ffffff; /* on dark bg */ /* ----- Brand / accent — neutral grays for general UI, no chromatic tint ----- */ --brand: #1a1a1a; /* primary "brand" = near-black (neutral) */ --brand-fg: #1a1a1a; /* text on brand-tinted surfaces */ --brand-pale: #888888; /* mid grey (handles, accents) */ --brand-bg-soft: rgba(0, 0, 0, 0.06); /* very light grey bg (hover) */ --brand-avatar: #4a4a4a; /* avatar fallback */ --brand-soft: rgba(0, 0, 0, 0.06); --brand-ring: rgba(0, 0, 0, 0.32); --brand-glow: rgba(0, 0, 0, 0.06); /* ----- Accent — opt-in brand purple, only for places that genuinely need a chromatic highlight (logo, primary CTA, "live" indicators). Default UI uses the neutral --brand tokens above. ----- */ --accent: #007AFF; /* iOS system blue */ --accent-soft: rgba(0, 122, 255, 0.14); --accent-ring: rgba(0, 122, 255, 0.4); /* 生成中「光云」占位的四团色(RGB 三元组, 各处按自己的透明度用 rgba(var(--gen-cloud-N), a)): 品牌蓝系, 不串紫粉 */ --gen-cloud-1: 0, 122, 255; /* iOS 蓝 */ --gen-cloud-2: 100, 149, 255; /* 浅矢车菊蓝 */ --gen-cloud-3: 90, 200, 250; /* iOS 青 */ --gen-cloud-4: 48, 176, 199; /* iOS 蓝绿 */ /* 流光描边(ui/FlowBorder): 引导聚光框与节点运行态共用。光带色与生成中光云同一组品牌蓝系; 底圈要淡(14%), 否则和同为蓝色的光带糊成一圈, 看不出在流动 */ --flow-border-width: 2px; --flow-border-start: 0deg; --flow-border-turn: 360deg; --flow-border-animation: flow-border-turn 4.5s linear infinite; --flow-border-base: color-mix(in srgb, var(--accent) 14%, transparent); --flow-border-stops: transparent 0deg, rgba(var(--gen-cloud-3), 0) 10deg, rgba(var(--gen-cloud-3), .9) 50deg, rgba(var(--gen-cloud-1), 1) 80deg, rgba(var(--gen-cloud-2), 1) 110deg, rgba(var(--gen-cloud-1), 0) 160deg, transparent 360deg; --flow-border-mask: linear-gradient(#fff 0 0); --flow-border-halo-filter: blur(8px); --flow-border-halo-opacity: .7; /* 节点运行态: 流光层压在卡片内容(结果图 / 占位)之上 */ --nc-run-flow-layer: 5; /* 节点连接点: 比画布底色深一档的实心灰(不透明, 压在连线上), 深色图标; 悬停换强调色。 ring 是同色外环, 视觉放大而不改 handle 盒子尺寸(连线锚点按盒子中心算) */ --nc-handle-bg: color-mix(in srgb, var(--fg) 8%, var(--bg-canvas)); --nc-handle-color: var(--fg); --nc-handle-hover-bg: var(--accent); --nc-handle-hover-color: #ffffff; --nc-handle-ring: 4px; --nc-handle-icon-size: 12px; /* 连接点相对各节点原定位再向卡片外移的距离, 以及多输入时圆点的中心间距 */ --nc-handle-shift: 10px; --nc-handle-pitch: 40px; /* 贴节点根定位的端口圆点中心离节点外沿的距离(卡片外 14px + 半个圆点) */ --nc-handle-outset: 23px; /* 节点左上角运行按钮与卡片左缘的间距 */ --nc-run-btn-shift: 12px; /* 节点选中描边: 只用不模糊的品牌色外环(画布上节点多, 不叠模糊投影); 便签选中更细 */ --nc-node-selected-ring: 0 0 0 1.5px var(--accent); --nc-sticky-selected-ring: 0 0 0 1px var(--accent); /* 便签顶部一道内描边做纸面层次(暗色见下方覆盖) */ --nc-sticky-inset: 0 1px 0 rgba(0, 0, 0, 0.04) inset; /* 图片 / 视频节点右下角等比缩放手柄: 与卡片圆角同心的一段 90° 强调色圆弧 (盒子尺寸 = 圆弧所在 SVG 画布, 线宽, 透明命中描边宽度, 层级) */ --nc-media-resize-size: 32px; --nc-media-resize-stroke: 3px; --nc-media-resize-hit-width: 14px; --nc-media-resize-layer: 3; /* 图片 / 视频生成节点双击折叠成的胶囊: 节点图标 + 名字 + 当前模型图标(右侧圆标) */ --nc-generator-pill-height: 48px; --nc-generator-pill-gap: 10px; --nc-generator-pill-pad-start: 16px; --nc-generator-pill-pad-end: 8px; --nc-generator-pill-max-width: 280px; --nc-generator-pill-model-size: 32px; --nc-generator-pill-icon-size: 16px; /* 选中后出现的浮层(节点工具条、底部生成栏)先等一个双击间隔再淡入: 双击折叠 / 展开时它们来不及出现 */ --nc-floating-enter-delay: 240ms; /* 新连线到达动画: 光带沿线加速冲到目标(时长、粗细、尾长) */ --nc-edge-pulse-duration: 520ms; --nc-edge-pulse-width: 3px; --nc-edge-pulse-tail-min: 6; --nc-edge-pulse-tail-ratio: 0.35; /* 光带到达后沿目标卡片边框转一圈: 起始角让光带从左侧入口处出发(流光色带中心约在起始角后 80deg) */ --nc-arrive-duration: 900ms; --nc-arrive-start: 190deg; --nc-arrive-turn: 550deg; /* 彗星光带(到达动画与运行循环共用, 配色同节点运行态流光): 沿连线弯曲, 尾到头分段渐变。 长度(px 数值, 脚本读取)、到达时尾巴最长可拉到 max、分段数 */ --nc-comet-length: 72; --nc-comet-length-max: 110; --nc-comet-slices: 10; --nc-comet-thickness: 3px; --nc-comet-color-head: rgb(var(--gen-cloud-1)); --nc-comet-color-tail: rgb(var(--gen-cloud-3)); /* 彗星头部下面垫的柔光: 比节点流光的光晕收敛, 只在光带两侧晕开一点 */ --nc-comet-halo-thickness: 5px; --nc-comet-halo-blur: blur(3px); --nc-comet-halo-opacity: .45; /* 节点运行中, 相连的连线循环跑彗星: 每圈时长, 与节点流光一样匀速 */ --nc-edge-run-pulse-duration: 2200ms; /* 删除选中连线时残影从终点收回起点的时长 */ --nc-edge-retract-duration: 360ms; /* 节点右键菜单顶部的分组筛选胶囊: 行内间距、胶囊内边距与行高 */ --nc-cm-filter-gap: 6px; --nc-cm-filter-chip-pad: 4px 10px; --nc-cm-filter-chip-leading: 1.5; /* 胶囊行两侧可滚时的渐隐宽度; 面板内边距(与 ui/Panel 一致), 胶囊行用它延伸到面板边缘 */ --nc-cm-filter-fade: 28px; --nc-cm-panel-pad: 8px; /* 右键菜单紧凑行: 行高、内边距、字号、iconfont 图标尺寸 */ --nc-cm-row-h: 30px; --nc-cm-row-pad: 6px 8px; --nc-cm-row-font: 13px; --nc-cm-row-icon: 15px; /* 右键菜单行悬停 / 子菜单展开中的高亮: 面板是半透明磨砂玻璃, --bg-elevated 叠上去几乎看不出, 单独加深 */ --nc-cm-row-active-bg: rgba(0, 0, 0, 0.06); /* 右键菜单子菜单箭头 */ --nc-cm-arrow-size: 12px; --nc-cm-arrow-color: var(--fg); --nc-cm-arrow-stroke: 2; /* 节点卡片上方的标题标签: 文字用最深前景色, 图标与悬停用次一级灰 */ --nc-node-label-color: var(--fg); --nc-node-label-hover-color: var(--fg-muted); --nc-node-label-icon-color: var(--fg-muted); --nc-node-label-size: var(--text-xs); --nc-node-label-icon-size: 12px; --nc-node-label-weight: 500; --nc-node-label-gap: 8px; /* 标签相对卡片顶边的偏移; editable 用于标签内含重命名输入框的节点 */ --nc-node-label-offset: -20px; --nc-node-label-offset-editable: -25px; /* 节点底栏控件禁用态(生成中锁定的模型胶囊、上传钮) */ --nc-dock-control-disabled-opacity: .45; /* 四团色在各处的叠法: 经典画布大占位(深 / 浅主题)与节点画布结果卡(浅 / 深主题), 透明度与扩散半径各按尺寸调过 */ --gen-diffusion-canvas-dark: radial-gradient(circle at 25% 30%, rgba(var(--gen-cloud-1), 0.55) 0%, transparent 45%), radial-gradient(circle at 75% 35%, rgba(var(--gen-cloud-2), 0.50) 0%, transparent 45%), radial-gradient(circle at 35% 75%, rgba(var(--gen-cloud-3), 0.45) 0%, transparent 45%), radial-gradient(circle at 80% 80%, rgba(var(--gen-cloud-4), 0.40) 0%, transparent 45%); --gen-diffusion-canvas-light: radial-gradient(circle at 25% 30%, rgba(var(--gen-cloud-1), 0.38) 0%, transparent 45%), radial-gradient(circle at 75% 35%, rgba(var(--gen-cloud-2), 0.32) 0%, transparent 45%), radial-gradient(circle at 35% 75%, rgba(var(--gen-cloud-3), 0.30) 0%, transparent 45%), radial-gradient(circle at 80% 80%, rgba(var(--gen-cloud-4), 0.28) 0%, transparent 45%); --gen-diffusion-node-light: radial-gradient(circle at 25% 30%, rgba(var(--gen-cloud-1), 0.45) 0%, transparent 50%), radial-gradient(circle at 75% 35%, rgba(var(--gen-cloud-2), 0.4) 0%, transparent 50%), radial-gradient(circle at 35% 75%, rgba(var(--gen-cloud-3), 0.38) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(var(--gen-cloud-4), 0.34) 0%, transparent 50%); --gen-diffusion-node-dark: radial-gradient(circle at 25% 30%, rgba(var(--gen-cloud-1), 0.55) 0%, transparent 50%), radial-gradient(circle at 75% 35%, rgba(var(--gen-cloud-2), 0.5) 0%, transparent 50%), radial-gradient(circle at 35% 75%, rgba(var(--gen-cloud-3), 0.45) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(var(--gen-cloud-4), 0.4) 0%, transparent 50%); /* 提示坞运行中的旋转光带(promptdock.css)的色标: 透明 → 半透 → 品牌色峰值 → 半透 → 透明, 全程引用 accent */ --promptdock-glow-stops: transparent 0deg, transparent 20deg, var(--accent-ring) 50deg, var(--accent) 75deg, var(--accent) 95deg, var(--accent-ring) 120deg, transparent 150deg, transparent 360deg; --promo-grad: #AFE659; /* 升级折扣徽章底 — 品牌绿 oklch(0.86 0.18 128) */ --promo-grad-soft: rgba(175, 230, 89, 0.2); /* 品牌绿浅底(新标签、弹窗光晕) */ /* ----- Borders ----- */ --border: rgba(0, 0, 0, 0.08); --border-strong: rgba(0, 0, 0, 0.18); --border-focus: rgba(0, 0, 0, 0.45); --divider: rgba(0, 0, 0, 0.06); /* ----- 透明度阶梯 ----------------------------------------------------- 散落各处的 rgba(0,0,0,.015) / rgba(255,255,255,.72) 这类一次性微调值 统一收进三套阶梯。档位不是拍的,是按仓里既有取值的聚类定的。 --overlay-* 中性叠加,跟随主题翻转(浅色用黑、深色用白)。 用于:悬浮/选中底色、滚动条滑块、分隔纱层。 --on-dark-* 固定白,不随主题翻。用于:品牌色卡片(升级卡/套餐卡)上的 文字、描边、进度条 —— 那些卡片两种主题下都是深色底。 --scrim-* 固定黑,不随主题翻。用于:投影、遮罩、模态背板。 -------------------------------------------------------------------- */ --overlay-1: rgba(0, 0, 0, 0.04); --overlay-2: rgba(0, 0, 0, 0.08); --overlay-3: rgba(0, 0, 0, 0.16); --overlay-4: rgba(0, 0, 0, 0.28); --overlay-5: rgba(0, 0, 0, 0.45); --on-dark-line: rgba(255, 255, 255, 0.08); /* 细描边 / 极淡底 */ --on-dark-edge: rgba(255, 255, 255, 0.16); /* 描边 / 进度条槽 */ --on-dark-dim: rgba(255, 255, 255, 0.28); /* 弱底 */ --on-dark-half: rgba(255, 255, 255, 0.45); /* 半透底 */ --on-dark-soft: rgba(255, 255, 255, 0.62); /* 次要文字 */ --on-dark-text: rgba(255, 255, 255, 0.72); /* 正文 */ --on-dark-full: rgba(255, 255, 255, 0.95); /* 高亮文字 / 实底 */ /* 不透明纯白。注意别拿 --fg-inverse 顶替 —— 那个深色下会翻成近黑, 而彩色按钮(绿/蓝)上的字两种主题都必须是白的。 */ --on-dark-solid: #ffffff; /* ----- 语义功能色 ----------------------------------------------------- 固定极性,深浅主题共用 —— 这类色表达的是「状态」不是「层次」, 翻色反而会丢掉语义(绿色在深色下还得是绿色)。 */ --success: #59b73b; /* 成功 / 有更新 —— 基准色、渐变暗端 */ --success-bright: #78cf50; /* 渐变亮端 */ --success-hover: #5ebe41; --success-hover-bright: #7fd957; --success-ring: rgba(108, 191, 64, 0.22); /* 描边 */ --success-glow: rgba(79, 160, 48, 0.22); /* 外发光 */ --success-glow-strong: rgba(79, 160, 48, 0.28); /* 外发光(hover) */ /* 头像 / logo 兜底渐变 —— 连角度一起收,3 处调用点保持完全一致 */ --gradient-avatar: linear-gradient(135deg, #ffb86b, #ff6a88); --scrim-1: rgba(0, 0, 0, 0.04); /* 极浅投影 */ --scrim-2: rgba(0, 0, 0, 0.16); /* 投影 */ --scrim-3: rgba(0, 0, 0, 0.28); /* 重投影 */ --scrim-4: rgba(0, 0, 0, 0.40); /* 深投影 / 遮罩 */ --scrim-5: rgba(0, 0, 0, 0.55); /* 模态背板 */ /* ----- Glass / frosted surfaces ----- */ --glass-weak: rgba(255, 255, 255, 0.45); --glass-light: rgba(255, 255, 255, 0.55); --glass-med: rgba(255, 255, 255, 0.92); --glass-strong: rgba(255, 255, 255, 0.82); --glass-border: rgba(255, 255, 255, 0.7); --glass-border-strong: rgba(255, 255, 255, 0.85); --glass-highlight: rgba(255, 255, 255, 0.7); /* inset top highlight */ --glass-inner: rgba(255, 255, 255, 0.4); /* inset perimeter glow */ /* ----- Shadows (outer) ----- */ --shadow-xs: 0 1px 3px rgba(30, 25, 60, 0.05); --shadow-sm: 0 1px 4px rgba(30, 25, 60, 0.05), 0 1px 2px rgba(30, 25, 60, 0.03); --shadow-md: 0 6px 18px rgba(30, 25, 60, 0.08), 0 1px 4px rgba(30, 25, 60, 0.04); --shadow-lg: 0 10px 28px rgba(30, 25, 60, 0.10), 0 2px 8px rgba(30, 25, 60, 0.05); --shadow-xl: 0 20px 50px rgba(30, 25, 60, 0.14), 0 4px 12px rgba(30, 25, 60, 0.06); /* ----- Apple-glass (inset highlights + drop shadow combined) ----- */ --shadow-glass: 0 1px 0 var(--glass-highlight) inset, 0 0 0 0.5px var(--glass-inner) inset, var(--shadow-lg); --shadow-glass-sm: 0 1px 0 var(--glass-highlight) inset, var(--shadow-sm); /* ----- Typography — primary face is `--font-sans`(英文 UI 字体), `--font-mono` 是等宽字体(用于数字 / 代码 / SKU 等需要对齐的场景)。 英文走 Geist(Vercel 2024 开源,SIL OFL),中文 fallback 到系统中文字 (PingFang SC on macOS / Microsoft YaHei on Windows)— Geist 不带中文 glyph,fallback 链让中英自动切。 `--default-font-family` 是全局解析后的栈,index.css 给 用, 所有组件 inherit;改这里就改全局。 ----- */ --font-sans: 'Geist'; --font-mono: 'Geist Mono'; --default-font-family: var(--font-sans), ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "PingFang SC", "Hiragino Sans GB", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --default-font-family-mono: var(--font-mono), ui-monospace, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* ----- Radii ----- */ --radius-xs: 6px; --radius-sm: 8px; --radius-md: 10px; --radius-lg: 12px; --radius-xl: 14px; --radius-2xl: 16px; --radius-3xl: 22px; --radius-pill: 999px; /* ----- Shared viewport and accessible control primitives ----- */ --viewport-width: 100vw; --viewport-height: 100dvh; --border-width-thin: 1px; --focus-ring-width: 2px; --focus-ring-offset: 2px; --touch-target-min: 44px; --font-weight-semibold: 600; /* ----- Controls — 按钮/胶囊的尺寸档位, 一档一组(高度/横向内边距/字号/ 图标/字重/图文间距)。sm 档 = h-8 / px-4 / text-xs, 首页 hero 卡片 CTA 与板块 CTA 共用。组件写 var(--btn-h-sm) 而不是再抄一遍 px。 ----- */ --btn-h-sm: 32px; --btn-px-sm: 16px; --btn-fs-sm: 12px; --btn-fw-sm: 500; --btn-gap-sm: 6px; --btn-icon-sm: 13px; /* ----- Backdrop blur ----- */ --blur-xs: blur(8px) saturate(160%); --blur-sm: blur(14px) saturate(160%); --blur-md: blur(22px) saturate(180%); --blur-lg: blur(30px) saturate(180%); --blur-xl: blur(40px) saturate(180%); /* ----- Motion ----- */ --ease-out: cubic-bezier(.2, .8, .2, 1); --ease-in-out: cubic-bezier(.5, 0, .5, 1); --dur-fast: 120ms; --dur-med: 180ms; --dur-slow: 280ms; /* ----- Layout ----- */ --sidebar-w: 240px; --sidebar-collapsed-w: 68px; --stage-edge: 16px; /* gap between stage card and viewport */ --content-max-w: 1400px; /* ----- Density: UI chrome sizes (`html.nc-compact` at the bottom shrinks them) ----- */ --nc-rail-w: 84px; /* library rail width */ --nc-rail-pad: 10px 8px; --nc-rail-btn-pad: 9px 4px; --nc-rail-btn-gap: 5px; /* icon ↔ label */ --nc-rail-icon: 16px; /* section icons; only `nc-compact` applies it */ --nc-rail-label: 10.5px; --nc-header-h: 40px; /* header cards */ --nc-minimap-node-min-w: 217px; /* complete node controls width */ --nc-minimap-classic-min-w: 161px; /* complete classic controls width */ --nc-header-btn: 26px; /* panel toggle, avatar */ --nc-header-ctl-h: 28px; /* back, share, credits, agent */ --nc-header-ctl-pad: 10px; --nc-header-font: 12px; --nc-crumb-font: 11.5px; --nc-crumb-pad: 4px 7px; --nc-pop-pad: 10px; /* ArkPopoverDark */ --nc-project-menu-w: 360px; /* header project menu */ --nc-project-menu-cols: 2; --nc-project-menu-h: 440px; /* covers grid before it scrolls */ --nc-project-grid-gap: 12px; --nc-project-title: 12.5px; --nc-project-sub: 11px; --nc-project-allbtn-h: 38px; --nc-project-allbtn-font: 13px; /* ↓ 合并自原 src/style/tokens.css —— 该表曾后加载并覆盖本表, 合表后删除 */ --btn-active: #111111; --error: #E5484D; --error-ring: rgba(229, 72, 77, 0.32); --error-soft: rgba(229, 72, 77, 0.10); --frame-fill: #ffffff; --text-sm: 0.875rem; --text-xs: 0.75rem; /* 图片角标一类的微标签 */ --text-2xs: 0.6875rem; /* 卡片主标题(首页 hero 卡 / 社区大图)一档 */ --text-lg: 1.25rem; } /* ========================================================================== Dark mode — flip only the variables that change. Component CSS never needs to know whether we're in dark mode. ========================================================================== */ html.dark { --nc-sticky-inset: 0 1px 0 rgba(255, 255, 255, 0.04) inset; --nc-cm-row-active-bg: rgba(255, 255, 255, 0.12); --bg-app: #0a0a0a; --bg-main: #141414; --bg-surface: #1a1a1a; --bg-muted: #141414; --bg-elevated: rgba(255, 255, 255, 0.06); --bg-subtle: rgba(255, 255, 255, 0.06); --bg-canvas: #0e0e0e; --fg: #e8e8e8; --fg-muted: rgba(255, 255, 255, 0.65); --fg-subtle: rgba(255, 255, 255, 0.5); --fg-faint: rgba(255, 255, 255, 0.35); --fg-inverse: #111111; /* Brand "color" stays neutral grey in dark — light-grey on near-black. */ --brand: #e8e8e8; --brand-fg: #e8e8e8; --brand-pale: rgba(255, 255, 255, 0.6); --brand-bg-soft: rgba(255, 255, 255, 0.06); --brand-avatar: #6a6a6a; --brand-soft: rgba(255, 255, 255, 0.08); --brand-ring: rgba(255, 255, 255, 0.24); --brand-glow: rgba(255, 255, 255, 0.06); /* Accent stays the same blue family in dark — it's the OPT-IN highlight. */ --accent: #0A84FF; /* iOS system blue (dark), brighter */ --accent-soft: rgba(10, 132, 255, 0.18); --accent-ring: rgba(10, 132, 255, 0.45); --flow-border-base: rgba(255, 255, 255, .14); --flow-border-halo-opacity: .8; --border: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.2); --border-focus: rgba(255, 255, 255, 0.45); --divider: rgba(255, 255, 255, 0.08); /* 中性叠加翻成白;--on-dark-* / --scrim-* 是固定极性,深色下不覆盖 */ --overlay-1: rgba(255, 255, 255, 0.04); --overlay-2: rgba(255, 255, 255, 0.08); --overlay-3: rgba(255, 255, 255, 0.16); --overlay-4: rgba(255, 255, 255, 0.28); --overlay-5: rgba(255, 255, 255, 0.45); --glass-weak: rgba(255, 255, 255, 0.04); --glass-light: rgba(28, 28, 28, 0.55); --glass-med: rgba(28, 28, 28, 0.88); --glass-strong: rgba(28, 28, 28, 0.8); --glass-border: rgba(255, 255, 255, 0.1); --glass-border-strong: rgba(255, 255, 255, 0.14); --glass-highlight: rgba(255, 255, 255, 0.08); --glass-inner: rgba(255, 255, 255, 0.04); --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.3); --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2); --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.35), 0 1px 4px rgba(0, 0, 0, 0.2); --shadow-lg: 0 10px 28px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.3); --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.3); /* ↓ 合并自原 src/style/tokens.css —— 该表曾后加载并覆盖本表, 合表后删除 */ --btn-active: #e8e8e8; --error: #FF6369; --error-ring: rgba(255, 99, 105, 0.38); --error-soft: rgba(255, 99, 105, 0.14); --frame-fill: rgba(255, 255, 255, 0.06); } /* ========================================================================== Density — a host marks the canvas element (and, for popovers, its teleport layers) `nc-compact` to shrink the UI chrome: library rail, header cards, popovers. Only these tokens change; component CSS reads the tokens. ========================================================================== */ html.nc-compact { --nc-rail-w: 72px; --nc-rail-pad: 8px 6px; --nc-rail-btn-pad: 7px 3px; --nc-rail-btn-gap: 4px; --nc-rail-icon: 15px; --nc-rail-label: 10px; --nc-header-h: 36px; --nc-header-btn: 24px; --nc-header-ctl-h: 26px; --nc-header-ctl-pad: 8px; --nc-header-font: 11.5px; --nc-crumb-font: 11px; --nc-crumb-pad: 3px 6px; --nc-pop-pad: 8px; --nc-project-menu-w: 320px; --nc-project-menu-cols: 3; --nc-project-menu-h: 300px; --nc-project-grid-gap: 10px; --nc-project-title: 12px; --nc-project-sub: 10.5px; --nc-project-allbtn-h: 34px; --nc-project-allbtn-font: 12.5px; }