6409 lines
222 KiB
CSS
6409 lines
222 KiB
CSS
@import "tailwindcss";
|
||
@import "tw-animate-css";
|
||
@import "shadcn/tailwind.css";
|
||
|
||
@custom-variant dark (&:is(.dark *));
|
||
|
||
/* =========================================================================
|
||
Design Token System — 三层架构 (Primitive → Semantic → Component)
|
||
详见 Wayfinder #96: https://github.com/ddcat-ai/open-ai-canvas/issues/96
|
||
规范：禁止在组件中新增裸 text-[Npx]/rounded-[Npx]/z-[N]，必须使用 token
|
||
========================================================================= */
|
||
|
||
/* -------------------------------------------------------------------------
|
||
Layer 1: Primitive — 纯值，无语义，不随主题变（所有维度的基础）
|
||
------------------------------------------------------------------------- */
|
||
:root {
|
||
/* --- 1. 色彩（oklch 色板）--- */
|
||
--color-neutral-0: oklch(1 0 0);
|
||
--color-neutral-50: oklch(0.985 0 0);
|
||
--color-neutral-100: oklch(0.97 0 0);
|
||
--color-neutral-200: oklch(0.922 0 0);
|
||
--color-neutral-300: oklch(0.87 0 0);
|
||
--color-neutral-400: oklch(0.708 0 0);
|
||
--color-neutral-500: oklch(0.556 0 0);
|
||
--color-neutral-600: oklch(0.439 0 0);
|
||
--color-neutral-700: oklch(0.371 0 0);
|
||
--color-neutral-800: oklch(0.269 0 0);
|
||
--color-neutral-900: oklch(0.205 0 0);
|
||
--color-neutral-950: oklch(0.145 0 0);
|
||
|
||
/* 节点类型语义色板（对应 #97 色带+图标徽章方案）
|
||
注意：用 --palette- 前缀避免与 @theme 的 --color-* 命名空间冲突导致循环引用 */
|
||
--palette-node-image: oklch(0.75 0.15 75); /* 琥珀 300 — 图片 */
|
||
--palette-node-video: oklch(0.65 0.22 350); /* 品红 400 — 视频 */
|
||
--palette-node-text: oklch(0.45 0.02 250); /* 中性蓝灰 700 — 文本 */
|
||
--palette-node-audio: oklch(0.7 0.13 220); /* 青蓝 400 — 音频 */
|
||
--palette-node-config: oklch(0.55 0.04 250); /* 灰蓝 500 — 配置 */
|
||
--palette-node-script: oklch(0.6 0.18 300); /* 紫色 400 — 脚本 */
|
||
--palette-node-drawing: oklch(0.65 0.12 55); /* 赭石 400 — 绘图 */
|
||
--palette-node-frame: oklch(0.7 0.15 155); /* 翠绿 400 — 帧 */
|
||
--palette-node-character: oklch(0.78 0.13 20); /* 桃红 300 — 角色引用 */
|
||
--palette-node-skill: oklch(0.7 0.17 55); /* 橙色 400 — 技能 */
|
||
|
||
/* 状态色（用 --palette- 前缀避免循环引用）*/
|
||
--palette-status-success: oklch(0.7 0.17 155);
|
||
--palette-status-error: oklch(0.65 0.22 25);
|
||
--palette-status-loading: oklch(0.62 0.18 250);
|
||
--palette-status-warning: oklch(0.75 0.15 85);
|
||
|
||
/* --- 2. 间距（4px 栅格 + 半距）--- */
|
||
--space-0: 0px;
|
||
--space-half: 2px;
|
||
--space-1: 4px;
|
||
--space-1-half: 6px;
|
||
--space-2: 8px;
|
||
--space-2-half: 10px;
|
||
--space-3: 12px;
|
||
--space-3-half: 14px;
|
||
--space-4: 16px;
|
||
--space-5: 20px;
|
||
--space-6: 24px;
|
||
--space-8: 32px;
|
||
--space-10: 40px;
|
||
--space-12: 48px;
|
||
--space-16: 64px;
|
||
--space-20: 80px;
|
||
--space-24: 96px;
|
||
|
||
/* --- 3. 字号（10 档）--- */
|
||
--fs-nano: 7px; /* 纳米标注（角标计数、节点预览、% 后缀）*/
|
||
--fs-micro: 9px; /* 极小标注（分镜行号辅助）*/
|
||
--fs-tiny: 10px; /* 小标注（徽章、tag）*/
|
||
--fs-label: 11px; /* 标签文字 */
|
||
--fs-caption: 12px; /* 说明文字 */
|
||
--fs-body: 14px; /* 正文（基准）*/
|
||
--fs-body-lg: 15px; /* 大正文 */
|
||
--fs-heading: 16px; /* 小标题 */
|
||
--fs-heading-lg: 18px; /* 大标题 */
|
||
--fs-title: 22px; /* 页面标题 */
|
||
--fs-display: 36px; /* 展示标题 */
|
||
|
||
/* --- 4. 圆角（10 档）--- */
|
||
--r-xs: 4px;
|
||
--r-sm: 6px;
|
||
--r-md: 8px;
|
||
--r-lg: 12px;
|
||
--r-xl: 14px;
|
||
--r-2xl: 16px;
|
||
--r-3xl: 20px;
|
||
--r-4xl: 24px;
|
||
--r-tight: 15px;
|
||
--r-dock-compact: 13px;
|
||
--r-wide-tight: 22px;
|
||
--r-5xl: 32px;
|
||
--r-full: 9999px;
|
||
|
||
/* --- 5. 阴影（含 glow）--- */
|
||
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
|
||
--shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.06);
|
||
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
|
||
--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1);
|
||
--shadow-xl: 0 16px 40px rgba(0, 0, 0, 0.12);
|
||
--shadow-2xl: 0 24px 60px rgba(0, 0, 0, 0.16);
|
||
--shadow-glow-sm: 0 0 12px rgba(125, 162, 255, 0.2);
|
||
--shadow-glow-md: 0 0 24px rgba(125, 162, 255, 0.3);
|
||
--shadow-glow-lg: 0 0 40px rgba(125, 162, 255, 0.4);
|
||
|
||
/* --- 6. Elevation（z-index 14 档，按视觉层划分，见 ADR-001）--- */
|
||
--z-canvas: 0; /* L0 画布底 */
|
||
--z-canvas-overlay: 5; /* L1 画布覆盖（网格、连线）*/
|
||
--z-node: 10; /* L2 节点层（未选中）*/
|
||
--z-node-active: 20; /* L3 激活节点（选中/拖拽）*/
|
||
--z-toolbar: 30; /* L4 浮动工具栏（顶栏、dock、zoom）*/
|
||
--z-node-toolbar: 50; /* L5 节点工具栏（click 触发）*/
|
||
--z-panel: 60; /* L6 侧边面板（侧栏、素材托盘）*/
|
||
--z-panel-floating: 80; /* L7 浮动面板（助手/agent/活动任务）*/
|
||
--z-modal: 100; /* L8 对话框 */
|
||
--z-modal-overlay: 110; /* L9 遮罩 */
|
||
--z-popover: 200; /* L10 弹出层 */
|
||
--z-toast: 500; /* L11 通知 */
|
||
--z-tooltip: 1000; /* L12 提示 */
|
||
--z-loader: 1200; /* 全屏加载遮罩 */
|
||
--z-max: 2000; /* L13 最高（紧急通知）*/
|
||
|
||
/* --- 6b. Canvas 浮层定位 inset（画布安全区，对应审计 D2/P0-2）--- */
|
||
--canvas-inset-x: 16px; /* 浮层水平安全区（dock inset、顶栏 px）*/
|
||
--canvas-inset-y: 16px; /* 浮层垂直安全区（dock 底部）*/
|
||
--canvas-topbar-h: 64px; /* 顶部栏高度 */
|
||
--canvas-topbar-offset: 72px; /* 顶栏下方浮层顶部偏移（topbar-h + 8px 间距）*/
|
||
--canvas-dock-popover-offset: 50px; /* dock 弹出面板底部偏移 */
|
||
|
||
/* --- 7. 动效（对应 #99 动效 token）--- */
|
||
/* duration */
|
||
--motion-dur-instant: 80ms;
|
||
--motion-dur-fast: 150ms;
|
||
--motion-dur-base: 250ms;
|
||
--motion-dur-slow: 400ms;
|
||
--motion-dur-emphasize: 600ms;
|
||
/* easing */
|
||
--motion-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
|
||
--motion-ease-in: cubic-bezier(0.64, 0, 0.78, 0);
|
||
--motion-ease-in-out: cubic-bezier(0.64, 0, 0.36, 1);
|
||
--motion-ease-overshoot: cubic-bezier(0.34, 1.56, 0.64, 1);
|
||
--motion-ease-linear: linear;
|
||
/* delay */
|
||
--motion-delay-none: 0ms;
|
||
--motion-delay-xs: 30ms;
|
||
--motion-delay-sm: 60ms;
|
||
--motion-delay-md: 100ms;
|
||
--motion-delay-lg: 150ms;
|
||
/* motion-scale（联动 prefers-reduced-motion）*/
|
||
--motion-scale: 1;
|
||
|
||
/* --- 8. 描边宽度 --- */
|
||
--stroke-0: 0px;
|
||
--stroke-1: 1px;
|
||
--stroke-2: 2px;
|
||
--stroke-3: 3px;
|
||
|
||
/* --- 9. 不透明度（6 档）--- */
|
||
--opa-hide: 0.08;
|
||
--opa-faint: 0.2;
|
||
--opa-muted: 0.45;
|
||
--opa-subtle: 0.55;
|
||
--opa-medium: 0.72;
|
||
--opa-full: 1;
|
||
}
|
||
|
||
/* prefers-reduced-motion 降级（对应 #99 三级降级策略 L1）*/
|
||
@media (prefers-reduced-motion: reduce) {
|
||
:root {
|
||
--motion-scale: 0.3;
|
||
}
|
||
}
|
||
|
||
/* 用户在应用内选择"无动效"时，JS 添加 .no-motion 类（L2 禁用）*/
|
||
.no-motion {
|
||
--motion-scale: 0;
|
||
}
|
||
|
||
/* infinite 装饰动画在 reduced-motion / no-motion 下降级（对应 #99 三级降级）*/
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.canvas-connection-flow,
|
||
.canvas-connection-draft,
|
||
.canvas-generation-border-flow,
|
||
.canvas-task-progress-shimmer,
|
||
.ai-title-aurora,
|
||
.creation-intro-mark,
|
||
.creation-intro-word,
|
||
.creation-intro-signal,
|
||
.creation-intro-emphasis {
|
||
animation-duration: 0.01ms;
|
||
animation-iteration-count: 1;
|
||
}
|
||
}
|
||
.no-motion .canvas-connection-flow,
|
||
.no-motion .canvas-connection-draft,
|
||
.no-motion .canvas-generation-border-flow,
|
||
.no-motion .canvas-task-progress-shimmer,
|
||
.no-motion .ai-title-aurora,
|
||
.no-motion .creation-intro-mark,
|
||
.no-motion .creation-intro-word,
|
||
.no-motion .creation-intro-signal,
|
||
.no-motion .creation-intro-emphasis {
|
||
animation: none;
|
||
}
|
||
|
||
/* 动效计算函数（实际 duration = base * motion-scale）*/
|
||
:root {
|
||
--motion-dur-instant-calc: calc(var(--motion-dur-instant) * var(--motion-scale));
|
||
--motion-dur-fast-calc: calc(var(--motion-dur-fast) * var(--motion-scale));
|
||
--motion-dur-base-calc: calc(var(--motion-dur-base) * var(--motion-scale));
|
||
--motion-dur-slow-calc: calc(var(--motion-dur-slow) * var(--motion-scale));
|
||
--motion-dur-emphasize-calc: calc(var(--motion-dur-emphasize) * var(--motion-scale));
|
||
}
|
||
|
||
@theme inline {
|
||
/* 响应式断点（对应 #99 四断点体系：mobile/tablet/desktop/wide）*/
|
||
--breakpoint-tablet: 768px;
|
||
--breakpoint-desktop: 1024px;
|
||
--breakpoint-wide: 1440px;
|
||
|
||
--color-background: var(--background);
|
||
--color-foreground: var(--foreground);
|
||
--color-border: var(--border);
|
||
--color-ring: var(--ring);
|
||
--radius-sm: calc(var(--radius) - 4px);
|
||
--radius-md: calc(var(--radius) - 2px);
|
||
--radius-lg: var(--radius);
|
||
--radius-xl: calc(var(--radius) + 4px);
|
||
--font-heading: var(--font-sans);
|
||
--font-sans: var(--font-sans);
|
||
--color-sidebar-ring: var(--sidebar-ring);
|
||
--color-sidebar-border: var(--sidebar-border);
|
||
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
||
--color-sidebar-accent: var(--sidebar-accent);
|
||
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
||
--color-sidebar-primary: var(--sidebar-primary);
|
||
--color-sidebar-foreground: var(--sidebar-foreground);
|
||
--color-sidebar: var(--sidebar);
|
||
--color-chart-5: var(--chart-5);
|
||
--color-chart-4: var(--chart-4);
|
||
--color-chart-3: var(--chart-3);
|
||
--color-chart-2: var(--chart-2);
|
||
--color-chart-1: var(--chart-1);
|
||
--color-input: var(--input);
|
||
--color-destructive: var(--destructive);
|
||
--color-accent-foreground: var(--accent-foreground);
|
||
--color-accent: var(--accent);
|
||
--color-muted-foreground: var(--muted-foreground);
|
||
--color-muted: var(--muted);
|
||
--color-secondary-foreground: var(--secondary-foreground);
|
||
--color-secondary: var(--secondary);
|
||
--color-primary-foreground: var(--primary-foreground);
|
||
--color-primary: var(--primary);
|
||
--color-popover-foreground: var(--popover-foreground);
|
||
--color-popover: var(--popover);
|
||
--color-card-foreground: var(--card-foreground);
|
||
--color-card: var(--card);
|
||
--radius-2xl: calc(var(--radius) * 1.8);
|
||
--radius-3xl: calc(var(--radius) * 2.2);
|
||
--radius-4xl: calc(var(--radius) * 2.6);
|
||
|
||
/* === Design Token System 映射（对应 #96 三层架构）=== */
|
||
/* 色彩 — 节点类型色（可用 text-node-image / bg-node-video 等）*/
|
||
--color-node-image: var(--cn-type-image);
|
||
--color-node-video: var(--cn-type-video);
|
||
--color-node-text: var(--cn-type-text);
|
||
--color-node-audio: var(--cn-type-audio);
|
||
--color-node-config: var(--cn-type-config);
|
||
--color-node-script: var(--cn-type-script);
|
||
--color-node-drawing: var(--cn-type-drawing);
|
||
--color-node-frame: var(--cn-type-frame);
|
||
--color-node-character: var(--cn-type-character);
|
||
--color-node-skill: var(--cn-type-skill);
|
||
|
||
/* 色彩 — 状态色（可用 text-status-success / bg-status-error 等）*/
|
||
--color-status-success: var(--status-success);
|
||
--color-status-error: var(--status-error);
|
||
--color-status-loading: var(--status-loading);
|
||
--color-status-warning: var(--status-warning);
|
||
|
||
/* 色彩 — Canvas 语义色 */
|
||
--color-cn-text: var(--cn-text);
|
||
--color-cn-muted: var(--cn-muted);
|
||
--color-cn-faint: var(--cn-faint);
|
||
--color-cn-stroke: var(--cn-stroke);
|
||
--color-cn-fill: var(--cn-fill);
|
||
|
||
/* 字号（可用 text-fs-body / text-fs-caption 等）*/
|
||
--font-size-micro: var(--fs-micro);
|
||
--font-size-tiny: var(--fs-tiny);
|
||
--font-size-label: var(--fs-label);
|
||
--font-size-caption: var(--fs-caption);
|
||
--font-size-body: var(--fs-body);
|
||
--font-size-body-lg: var(--fs-body-lg);
|
||
--font-size-heading: var(--fs-heading);
|
||
--font-size-heading-lg: var(--fs-heading-lg);
|
||
--font-size-title: var(--fs-title);
|
||
--font-size-display: var(--fs-display);
|
||
}
|
||
|
||
:root {
|
||
--radius: 0.5rem;
|
||
--motion-instant: 120ms;
|
||
--motion-state: 180ms;
|
||
--motion-panel: 240ms;
|
||
--ease-aceternity: var(--motion-ease-out);
|
||
--ease-product-enter: cubic-bezier(0.16, 1, 0.3, 1);
|
||
--workspace-canvas: var(--background);
|
||
/* 页面、导航和内容区共用同一底色；卡片/浮层才允许使用 surface token。 */
|
||
--workspace-page: var(--workspace-canvas);
|
||
--workspace-navigation: var(--workspace-page);
|
||
--workspace-content: var(--workspace-page);
|
||
--workspace-surface: #ffffff;
|
||
--workspace-surface-strong: #ffffff;
|
||
--workspace-border: rgba(17, 17, 17, 0.14);
|
||
--workspace-border-strong: rgba(17, 17, 17, 0.22);
|
||
--workspace-grid-line: rgba(17, 17, 17, 0.045);
|
||
--workspace-nav: var(--workspace-navigation);
|
||
--workspace-sidebar: var(--workspace-navigation);
|
||
--workspace-accent: #171717;
|
||
--workspace-accent-soft: rgba(17, 17, 17, 0.07);
|
||
|
||
/* --- Semantic 层（引用 Primitive，随主题切换）--- */
|
||
/* 通用语义色（引用 Primitive neutral 色板）*/
|
||
--bg: var(--color-neutral-0);
|
||
--fg: var(--color-neutral-950);
|
||
--border-semantic: var(--color-neutral-200);
|
||
--accent: var(--workspace-accent);
|
||
--accent-soft: var(--workspace-accent-soft);
|
||
--muted: var(--color-neutral-100);
|
||
|
||
/* Canvas Theme 语义（从 CSS 变量反序列化到 TS 主题对象，对应 #96 决策3）*/
|
||
--cn-text: var(--color-neutral-950);
|
||
--cn-muted: var(--color-neutral-500);
|
||
--cn-faint: var(--color-neutral-400);
|
||
--cn-stroke: var(--color-neutral-200);
|
||
--cn-fill: var(--color-neutral-50);
|
||
--cn-active-stroke: var(--workspace-accent);
|
||
--cn-active-stroke-soft: var(--workspace-accent-soft);
|
||
|
||
/* Aceternity spatial 语义（对应 #96 决策3：CSS→TS 单向同步）*/
|
||
--cn-spatial-surface: var(--workspace-surface);
|
||
--cn-spatial-surface-strong: var(--workspace-surface-strong);
|
||
--cn-spatial-shadow: rgba(0, 0, 0, 0.12);
|
||
--cn-spatial-glow: rgba(125, 162, 255, 0.2);
|
||
--cn-spatial-glow-strong: rgba(125, 162, 255, 0.35);
|
||
--cn-spatial-elevated: var(--color-neutral-0);
|
||
--cn-spatial-toolbar-border: var(--color-neutral-200);
|
||
|
||
--director-sequencer-surface: var(--color-neutral-900);
|
||
--director-sequencer-surface-raised: var(--color-neutral-800);
|
||
--director-sequencer-border: rgba(255, 255, 255, 0.11);
|
||
--director-sequencer-muted: rgba(255, 255, 255, 0.48);
|
||
--director-sequencer-grid: rgba(255, 255, 255, 0.055);
|
||
--director-dock-surface: rgba(17, 19, 21, 0.92);
|
||
--director-dock-fg: rgba(255, 255, 255, 0.62);
|
||
--director-dock-fg-strong: rgba(255, 255, 255, 0.96);
|
||
--director-dock-active-surface: rgba(255, 255, 255, 0.14);
|
||
--director-control-hover: rgba(255, 255, 255, 0.09);
|
||
--director-swatch-inset: rgba(0, 0, 0, 0.18);
|
||
|
||
/* 节点类型色（引用 Primitive 节点色板，对应 #97 决策1 色带方案）*/
|
||
--cn-type-image: var(--palette-node-image);
|
||
--cn-type-video: var(--palette-node-video);
|
||
--cn-type-text: var(--palette-node-text);
|
||
--cn-type-audio: var(--palette-node-audio);
|
||
--cn-type-config: var(--palette-node-config);
|
||
--cn-type-script: var(--palette-node-script);
|
||
--cn-type-drawing: var(--palette-node-drawing);
|
||
--cn-type-frame: var(--palette-node-frame);
|
||
--cn-type-character: var(--palette-node-character);
|
||
--cn-type-skill: var(--palette-node-skill);
|
||
|
||
/* 状态语义色 */
|
||
--status-success: var(--palette-status-success);
|
||
--status-error: var(--palette-status-error);
|
||
--status-loading: var(--palette-status-loading);
|
||
--status-warning: var(--palette-status-warning);
|
||
|
||
--border: oklch(0.922 0 0);
|
||
--ring: oklch(0.708 0 0);
|
||
--background: oklch(1 0 0);
|
||
--foreground: oklch(0.145 0 0);
|
||
--card: oklch(1 0 0);
|
||
--card-foreground: oklch(0.145 0 0);
|
||
--popover: oklch(1 0 0);
|
||
--popover-foreground: oklch(0.145 0 0);
|
||
--primary: oklch(0.205 0 0);
|
||
--primary-foreground: oklch(0.985 0 0);
|
||
--secondary: oklch(0.97 0 0);
|
||
--secondary-foreground: oklch(0.205 0 0);
|
||
--muted: oklch(0.97 0 0);
|
||
--muted-foreground: oklch(0.556 0 0);
|
||
--accent: oklch(0.97 0 0);
|
||
--accent-foreground: oklch(0.205 0 0);
|
||
--destructive: oklch(0.577 0.245 27.325);
|
||
--input: oklch(0.922 0 0);
|
||
--chart-1: oklch(0.87 0 0);
|
||
--chart-2: oklch(0.556 0 0);
|
||
--chart-3: oklch(0.439 0 0);
|
||
--chart-4: oklch(0.371 0 0);
|
||
--chart-5: oklch(0.269 0 0);
|
||
--sidebar: oklch(0.985 0 0);
|
||
--sidebar-foreground: oklch(0.145 0 0);
|
||
--sidebar-primary: oklch(0.205 0 0);
|
||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||
--sidebar-accent: oklch(0.97 0 0);
|
||
--sidebar-accent-foreground: oklch(0.205 0 0);
|
||
--sidebar-border: oklch(0.922 0 0);
|
||
--sidebar-ring: oklch(0.708 0 0);
|
||
}
|
||
|
||
.dark {
|
||
--background: oklch(0.145 0 0);
|
||
--foreground: oklch(0.985 0 0);
|
||
--border: oklch(1 0 0 / 10%);
|
||
--ring: oklch(0.556 0 0);
|
||
--card: oklch(0.205 0 0);
|
||
--card-foreground: oklch(0.985 0 0);
|
||
--popover: oklch(0.205 0 0);
|
||
--popover-foreground: oklch(0.985 0 0);
|
||
--primary: oklch(0.922 0 0);
|
||
--primary-foreground: oklch(0.205 0 0);
|
||
--secondary: oklch(0.269 0 0);
|
||
--secondary-foreground: oklch(0.985 0 0);
|
||
--muted: oklch(0.269 0 0);
|
||
--muted-foreground: oklch(0.708 0 0);
|
||
--accent: oklch(0.269 0 0);
|
||
--accent-foreground: oklch(0.985 0 0);
|
||
--destructive: oklch(0.704 0.191 22.216);
|
||
--input: oklch(1 0 0 / 15%);
|
||
--workspace-canvas: var(--background);
|
||
--workspace-page: var(--workspace-canvas);
|
||
--workspace-navigation: var(--workspace-page);
|
||
--workspace-content: var(--workspace-page);
|
||
--workspace-surface: #181818;
|
||
--workspace-surface-strong: #181818;
|
||
--workspace-border: rgba(255, 255, 255, 0.085);
|
||
--workspace-border-strong: rgba(255, 255, 255, 0.16);
|
||
--workspace-grid-line: rgba(255, 255, 255, 0.038);
|
||
--workspace-nav: var(--workspace-navigation);
|
||
--workspace-sidebar: var(--workspace-navigation);
|
||
--workspace-accent: #f5f5f5;
|
||
--workspace-accent-soft: rgba(255, 255, 255, 0.09);
|
||
--chart-1: oklch(0.87 0 0);
|
||
--chart-2: oklch(0.556 0 0);
|
||
--chart-3: oklch(0.439 0 0);
|
||
--chart-4: oklch(0.371 0 0);
|
||
--chart-5: oklch(0.269 0 0);
|
||
--sidebar: oklch(0.205 0 0);
|
||
--sidebar-foreground: oklch(0.985 0 0);
|
||
--sidebar-primary: oklch(0.922 0 0);
|
||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||
--sidebar-accent: oklch(0.269 0 0);
|
||
--sidebar-accent-foreground: oklch(0.985 0 0);
|
||
--sidebar-border: oklch(1 0 0 / 10%);
|
||
--sidebar-ring: oklch(0.556 0 0);
|
||
|
||
/* --- Semantic 层 dark 覆盖 --- */
|
||
--bg: var(--color-neutral-950);
|
||
--fg: var(--color-neutral-50);
|
||
--border-semantic: var(--color-neutral-800);
|
||
--muted: var(--color-neutral-900);
|
||
|
||
--cn-text: var(--color-neutral-50);
|
||
--cn-muted: var(--color-neutral-400);
|
||
--cn-faint: var(--color-neutral-500);
|
||
--cn-stroke: rgba(255, 255, 255, 0.1);
|
||
--cn-fill: rgba(255, 255, 255, 0.04);
|
||
--cn-active-stroke: var(--workspace-accent);
|
||
--cn-active-stroke-soft: var(--workspace-accent-soft);
|
||
|
||
--cn-spatial-surface: var(--workspace-surface);
|
||
--cn-spatial-surface-strong: var(--workspace-surface-strong);
|
||
--cn-spatial-shadow: rgba(0, 0, 0, 0.4);
|
||
--cn-spatial-glow: rgba(125, 162, 255, 0.15);
|
||
--cn-spatial-glow-strong: rgba(125, 162, 255, 0.25);
|
||
--cn-spatial-elevated: var(--color-neutral-900);
|
||
--cn-spatial-toolbar-border: rgba(255, 255, 255, 0.1);
|
||
|
||
--director-sequencer-surface: #111315;
|
||
--director-sequencer-surface-raised: #191c1f;
|
||
--director-sequencer-border: rgba(255, 255, 255, 0.11);
|
||
--director-sequencer-muted: rgba(255, 255, 255, 0.48);
|
||
--director-sequencer-grid: rgba(255, 255, 255, 0.055);
|
||
--director-dock-surface: rgba(17, 19, 21, 0.92);
|
||
--director-dock-fg: rgba(255, 255, 255, 0.62);
|
||
--director-dock-fg-strong: rgba(255, 255, 255, 0.96);
|
||
--director-dock-active-surface: rgba(255, 255, 255, 0.14);
|
||
--director-control-hover: rgba(255, 255, 255, 0.09);
|
||
--director-swatch-inset: rgba(0, 0, 0, 0.18);
|
||
|
||
/* --- Shadow dark 覆盖（暗色下黑影不可见，改用白色微影制造抬升感，审计 D4/P2-D2）---
|
||
组件 token（--node-shadow/--dock-shadow/--panel-shadow/--modal-shadow）均引用
|
||
var(--shadow-*)，此处覆盖自动级联。--cn-spatial-shadow（内联 boxShadow 用）已有
|
||
暗色变体(0.4)，保留不动。 */
|
||
--shadow-xs: 0 1px 2px rgba(255, 255, 255, 0.04);
|
||
--shadow-sm: 0 2px 4px rgba(255, 255, 255, 0.05);
|
||
--shadow-md: 0 4px 12px rgba(255, 255, 255, 0.06);
|
||
--shadow-lg: 0 8px 24px rgba(255, 255, 255, 0.07);
|
||
--shadow-xl: 0 16px 40px rgba(255, 255, 255, 0.08);
|
||
--shadow-2xl: 0 24px 60px rgba(255, 255, 255, 0.1);
|
||
}
|
||
|
||
/* -------------------------------------------------------------------------
|
||
Layer 3: Component — 引用 Semantic，某组件专属
|
||
------------------------------------------------------------------------- */
|
||
:root {
|
||
/* Dock 组件（FloatingDock、悬停工具栏，对应 #95 工具栏方案）*/
|
||
--dock-radius: var(--r-xl); /* 14px */
|
||
--dock-padding: var(--space-2); /* 8px */
|
||
--dock-icon-size: 32px;
|
||
--dock-icon-size-labeled: 36px;
|
||
--dock-label-fs: var(--fs-label); /* 11px */
|
||
--dock-blur: 24px;
|
||
--dock-surface: var(--cn-spatial-surface);
|
||
--dock-border: var(--cn-spatial-toolbar-border);
|
||
--dock-shadow: var(--shadow-lg);
|
||
--dock-item-radius: var(--r-md); /* 8px */
|
||
--dock-item-radius-labeled: var(--r-lg); /* 12px */
|
||
--dock-radius-tight: var(--r-tight);
|
||
--dock-radius-compact: var(--r-dock-compact);
|
||
--dock-tooltip-z: 140;
|
||
--dock-precision-width: var(--space-12);
|
||
--dock-z-popover: 30; /* dock 子面板在 toolbar 根 stacking context 内的层级（见 ADR-001）*/
|
||
|
||
/* Canvas 创建菜单：固定行高保证图标、徽标和单行标签互不挤占 */
|
||
--canvas-create-node-height: var(--space-12);
|
||
--canvas-create-resource-height: var(--space-8);
|
||
|
||
/* Node 组件（画布节点，对应 #97 节点视觉规范）*/
|
||
--node-radius: var(--r-2xl); /* 16px */
|
||
--node-border-width: var(--stroke-1); /* 1px */
|
||
--node-border: var(--cn-stroke);
|
||
--node-active-border-width: var(--stroke-2); /* 2px */
|
||
--node-active-border: var(--cn-active-stroke);
|
||
--node-active-glow: 0 0 0 4px var(--cn-active-stroke-soft);
|
||
--node-active-glow-strong: 0 0 0 6px var(--cn-active-stroke-soft);
|
||
--node-shadow: var(--shadow-sm);
|
||
--node-shadow-hover: var(--shadow-md);
|
||
--node-shadow-selected: var(--shadow-lg);
|
||
--node-shadow-selected-primary: var(--shadow-xl);
|
||
--node-shadow-active: var(--shadow-2xl);
|
||
--node-header-height: 24px;
|
||
--node-title-fs: var(--fs-label); /* 11px */
|
||
--node-badge-fs: var(--fs-tiny); /* 10px */
|
||
--node-type-strip-width: 3px; /* 色带宽度 */
|
||
--node-type-badge-size: 20px; /* 图标徽章尺寸 */
|
||
--node-z-content: 30; /* 节点遮罩层（stacking context 内，见 ADR-001）*/
|
||
--node-z-overlay: 40; /* 节点角标/按钮层 */
|
||
--node-z-handle: 50; /* 节点 resize handle 层 */
|
||
|
||
/* Modal 组件（对话框，对应 #98 面板层级）*/
|
||
--modal-radius: var(--r-3xl); /* 20px */
|
||
--modal-max-width: 480px;
|
||
--modal-overlay-opacity: 0.5;
|
||
--modal-shadow: var(--shadow-2xl);
|
||
--modal-padding: var(--space-5); /* 20px */
|
||
|
||
/* Panel 组件（侧边面板，对应 #98 五层体系 L2）*/
|
||
--panel-radius: var(--r-2xl); /* 16px */
|
||
--panel-padding: var(--space-4); /* 16px */
|
||
--panel-shadow: var(--shadow-lg);
|
||
--panel-section-gap: var(--space-3); /* 12px */
|
||
--panel-width-compact: 320px;
|
||
--panel-radius-wide-tight: var(--r-wide-tight);
|
||
--loader-z: var(--z-loader);
|
||
|
||
/* Director workbench / Sequencer */
|
||
--director-sequencer-min-height: 180px;
|
||
--director-sequencer-label-width: 208px;
|
||
--director-sequencer-row-height: 30px;
|
||
--director-sequencer-base-width: 860px;
|
||
--director-sequencer-shot-select-width: 144px;
|
||
--director-dock-button-size: var(--space-8);
|
||
--director-dock-bottom: var(--space-2);
|
||
--director-pose-button-height: var(--space-8);
|
||
--director-color-swatch-size: var(--space-6);
|
||
|
||
/* Canvas 布局（画布页浮层定位，对应审计 P0-8.1/P1-2.1）*/
|
||
--canvas-sidebar-width: 232px; /* 项目侧栏宽度（短剧模式）*/
|
||
--canvas-panel-width: min(332px, calc(100vw - 24px)); /* 浮动面板默认宽度（活动任务等）*/
|
||
|
||
/* Prompt 面板（对应 #98 决策2 渐进式三区）*/
|
||
--prompt-panel-max-height: min(70vh, 640px);
|
||
--prompt-panel-input-min-height: 72px;
|
||
--prompt-panel-input-max-height: 224px;
|
||
--prompt-panel-section-fs: var(--fs-body); /* 14px A区 */
|
||
--prompt-panel-caption-fs: var(--fs-caption); /* 12px B区 */
|
||
--prompt-panel-label-fs: var(--fs-label); /* 11px 标签 */
|
||
--prompt-panel-heading-fs: var(--fs-heading); /* 16px 区标题 */
|
||
|
||
/* 进度条（对应 #98 决策3 任务进度）*/
|
||
--progress-bar-height: 6px;
|
||
--progress-bar-radius: var(--r-xs); /* 3px */
|
||
--progress-bar-fill: var(--status-loading);
|
||
--progress-bar-fill-success: var(--status-success);
|
||
--progress-bar-fill-error: var(--status-error);
|
||
|
||
/* 缩放控制（对应 #95 决策5）*/
|
||
--zoom-control-min: 0.05;
|
||
--zoom-control-max: 2;
|
||
--zoom-control-step: 0.1;
|
||
|
||
/* 短剧流程引导步骤（里程碑节点 + 状态轨道）*/
|
||
--flow-step-node: var(--space-5); /* 20px 完成/待办节点直径 */
|
||
--flow-step-node-current: var(--space-6); /* 24px 当前节点直径 */
|
||
--flow-step-gap: var(--space-1); /* 4px 节点与标签间距 */
|
||
--flow-step-track-height: var(--stroke-2); /* 2px 状态轨道高 */
|
||
--flow-step-track-width: var(--space-5); /* 20px 轨道段长 */
|
||
--flow-step-current-glow: 0 0 0 4px var(--cn-active-stroke-soft); /* 当前节点光晕 */
|
||
}
|
||
|
||
@layer base {
|
||
* {
|
||
@apply border-border outline-ring/50;
|
||
}
|
||
html,
|
||
body,
|
||
#root,
|
||
.ant-app {
|
||
width: 100%;
|
||
height: 100%;
|
||
margin: 0;
|
||
padding: 0;
|
||
border: 0;
|
||
overflow: hidden;
|
||
overscroll-behavior: none;
|
||
background: var(--workspace-page);
|
||
}
|
||
body {
|
||
background: var(--workspace-page);
|
||
color: var(--foreground);
|
||
}
|
||
#root {
|
||
position: fixed;
|
||
inset: 0;
|
||
isolation: isolate;
|
||
}
|
||
textarea {
|
||
resize: none;
|
||
}
|
||
textarea::-webkit-resizer {
|
||
display: none;
|
||
}
|
||
html {
|
||
@apply font-sans;
|
||
}
|
||
}
|
||
|
||
/* CodeMirror 使用运行时注入样式，需在全局覆盖中绑定项目主题 token。 */
|
||
.prompt-code-editor,
|
||
.prompt-code-editor .cm-editor {
|
||
width: 100%;
|
||
height: 100%;
|
||
min-height: 0;
|
||
}
|
||
|
||
.prompt-code-editor .cm-editor {
|
||
background: var(--workspace-surface-strong) !important;
|
||
color: var(--foreground);
|
||
font-size: var(--fs-caption);
|
||
}
|
||
|
||
.prompt-code-editor .cm-editor.cm-focused {
|
||
outline: 2px solid color-mix(in srgb, var(--workspace-accent) 42%, transparent);
|
||
outline-offset: -2px;
|
||
}
|
||
|
||
.prompt-code-editor .cm-scroller {
|
||
overflow: auto;
|
||
overflow-x: hidden;
|
||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
|
||
line-height: 1.65;
|
||
}
|
||
|
||
.prompt-code-editor .cm-content {
|
||
padding-block: var(--space-3);
|
||
color: var(--foreground) !important;
|
||
caret-color: var(--foreground);
|
||
}
|
||
|
||
.prompt-code-editor .cm-line {
|
||
padding-inline: var(--space-3);
|
||
overflow-wrap: anywhere;
|
||
}
|
||
|
||
.prompt-code-editor .cm-gutters {
|
||
border-right: 1px solid var(--workspace-border) !important;
|
||
background: color-mix(in srgb, var(--workspace-surface-strong) 92%, var(--foreground) 8%) !important;
|
||
color: color-mix(in srgb, var(--foreground) 42%, transparent) !important;
|
||
}
|
||
|
||
.prompt-code-editor .cm-activeLine,
|
||
.prompt-code-editor .cm-activeLineGutter {
|
||
background: color-mix(in srgb, var(--workspace-accent) 7%, transparent) !important;
|
||
}
|
||
|
||
.prompt-code-editor .cm-selectionBackground,
|
||
.prompt-code-editor .cm-content ::selection {
|
||
background: color-mix(in srgb, var(--workspace-accent) 24%, transparent) !important;
|
||
}
|
||
|
||
@layer utilities {
|
||
.app-spatial-workspace {
|
||
--workspace-canvas: var(--background);
|
||
--workspace-page: var(--workspace-canvas);
|
||
--workspace-navigation: var(--workspace-page);
|
||
--workspace-content: var(--workspace-page);
|
||
--workspace-surface: rgba(255, 255, 255, 0.74);
|
||
--workspace-surface-strong: rgba(255, 255, 255, 0.94);
|
||
--workspace-border: rgba(17, 17, 17, 0.1);
|
||
--workspace-border-strong: rgba(17, 17, 17, 0.2);
|
||
--workspace-grid-line: rgba(17, 17, 17, 0.035);
|
||
--workspace-nav: var(--workspace-navigation);
|
||
--workspace-sidebar: var(--workspace-navigation);
|
||
--workspace-accent: #171717;
|
||
--workspace-accent-soft: rgba(17, 17, 17, 0.065);
|
||
background-color: var(--workspace-canvas);
|
||
background-image:
|
||
linear-gradient(var(--workspace-grid-line) 1px, transparent 1px),
|
||
linear-gradient(90deg, var(--workspace-grid-line) 1px, transparent 1px);
|
||
background-size: 34px 34px;
|
||
}
|
||
|
||
.dark .app-spatial-workspace {
|
||
--workspace-canvas: var(--background);
|
||
--workspace-page: var(--workspace-canvas);
|
||
--workspace-navigation: var(--workspace-page);
|
||
--workspace-content: var(--workspace-page);
|
||
--workspace-surface: rgba(18, 18, 18, 0.76);
|
||
--workspace-surface-strong: rgba(22, 22, 22, 0.94);
|
||
--workspace-border: rgba(255, 255, 255, 0.09);
|
||
--workspace-border-strong: rgba(255, 255, 255, 0.18);
|
||
--workspace-grid-line: rgba(255, 255, 255, 0.026);
|
||
--workspace-nav: var(--workspace-navigation);
|
||
--workspace-sidebar: var(--workspace-navigation);
|
||
--workspace-accent: #f5f5f5;
|
||
--workspace-accent-soft: rgba(255, 255, 255, 0.08);
|
||
}
|
||
|
||
.app-workspace-shell.is-spatial {
|
||
position: relative;
|
||
gap: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
.app-workspace-sidebar-scrim {
|
||
position: absolute;
|
||
z-index: 30;
|
||
inset: 0;
|
||
border: 0;
|
||
background: rgba(0, 0, 0, 0.42);
|
||
backdrop-filter: blur(2px);
|
||
}
|
||
|
||
.app-workspace-shell.is-spatial .app-workspace-sidebar {
|
||
border: 0;
|
||
border-right: 1px solid var(--workspace-border);
|
||
border-radius: 0;
|
||
background: var(--workspace-navigation);
|
||
box-shadow: none;
|
||
backdrop-filter: none;
|
||
-webkit-backdrop-filter: none;
|
||
}
|
||
|
||
.dark .app-workspace-shell.is-spatial .app-workspace-sidebar {
|
||
box-shadow: none;
|
||
}
|
||
|
||
body.app-spatial-overlays {
|
||
--workspace-overlay-bg: rgba(244, 244, 245, 0.78);
|
||
--workspace-overlay-bg-strong: rgba(250, 250, 250, 0.88);
|
||
--workspace-overlay-border: rgba(17, 17, 17, 0.22);
|
||
--workspace-overlay-divider: rgba(17, 17, 17, 0.1);
|
||
--workspace-overlay-highlight: rgba(255, 255, 255, 0.86);
|
||
--workspace-overlay-hover: rgba(17, 17, 17, 0.065);
|
||
--workspace-overlay-selected: rgba(17, 17, 17, 0.1);
|
||
--workspace-overlay-shadow: 0 26px 72px rgba(15, 23, 42, 0.18), 0 4px 18px rgba(15, 23, 42, 0.08);
|
||
}
|
||
|
||
.dark body.app-spatial-overlays {
|
||
--workspace-overlay-bg: rgba(10, 10, 11, 0.78);
|
||
--workspace-overlay-bg-strong: rgba(15, 15, 16, 0.88);
|
||
--workspace-overlay-border: rgba(255, 255, 255, 0.22);
|
||
--workspace-overlay-divider: rgba(255, 255, 255, 0.105);
|
||
--workspace-overlay-highlight: rgba(255, 255, 255, 0.2);
|
||
--workspace-overlay-hover: rgba(255, 255, 255, 0.075);
|
||
--workspace-overlay-selected: rgba(255, 255, 255, 0.115);
|
||
--workspace-overlay-shadow: 0 30px 84px rgba(0, 0, 0, 0.62), 0 8px 24px rgba(0, 0, 0, 0.34);
|
||
}
|
||
|
||
body.app-spatial-overlays :where(
|
||
.ant-dropdown-menu,
|
||
.ant-select-dropdown,
|
||
.ant-popover-inner,
|
||
.ant-picker-dropdown .ant-picker-panel-container,
|
||
.ant-cascader-menus,
|
||
.ant-mentions-dropdown,
|
||
.ant-tooltip-inner,
|
||
.ant-modal-content,
|
||
.ant-drawer-content,
|
||
.ant-message-notice-content,
|
||
.ant-notification-notice
|
||
) {
|
||
border: 1px solid var(--workspace-overlay-border) !important;
|
||
background:
|
||
linear-gradient(145deg, var(--workspace-overlay-highlight), transparent 24%, transparent 76%, rgba(158, 178, 214, 0.055)),
|
||
var(--workspace-overlay-bg) !important;
|
||
box-shadow:
|
||
var(--workspace-overlay-shadow),
|
||
inset 0 1px 0 var(--workspace-overlay-highlight),
|
||
inset 1px 0 0 color-mix(in srgb, var(--workspace-overlay-highlight) 36%, transparent) !important;
|
||
backdrop-filter: blur(30px) saturate(138%) !important;
|
||
-webkit-backdrop-filter: blur(30px) saturate(138%) !important;
|
||
}
|
||
|
||
body.app-spatial-overlays :where(.ant-modal-content, .ant-drawer-content, .ant-notification-notice) {
|
||
background:
|
||
linear-gradient(145deg, var(--workspace-overlay-highlight), transparent 20%, transparent 82%, rgba(158, 178, 214, 0.05)),
|
||
var(--workspace-overlay-bg-strong) !important;
|
||
}
|
||
|
||
body.app-spatial-overlays :where(.ant-dropdown-menu, .ant-select-dropdown, .ant-popover-inner, .ant-cascader-menus, .ant-mentions-dropdown) {
|
||
border-radius: 8px !important;
|
||
}
|
||
|
||
body.app-spatial-overlays :where(
|
||
.ant-dropdown-menu-item:not(.ant-dropdown-menu-item-disabled),
|
||
.ant-dropdown-menu-submenu-title:not(.ant-dropdown-menu-item-disabled),
|
||
.ant-select-item-option:not(.ant-select-item-option-disabled),
|
||
.ant-cascader-menu-item:not(.ant-cascader-menu-item-disabled),
|
||
.ant-mentions-dropdown-menu-item
|
||
) {
|
||
border-radius: 5px;
|
||
transition: background-color var(--motion-instant) ease-out, color var(--motion-instant) ease-out;
|
||
}
|
||
|
||
body.app-spatial-overlays :where(
|
||
.ant-dropdown-menu-item:not(.ant-dropdown-menu-item-disabled):hover,
|
||
.ant-dropdown-menu-submenu-title:not(.ant-dropdown-menu-item-disabled):hover,
|
||
.ant-select-item-option-active:not(.ant-select-item-option-disabled),
|
||
.ant-cascader-menu-item-active:not(.ant-cascader-menu-item-disabled),
|
||
.ant-mentions-dropdown-menu-item-active
|
||
) {
|
||
background: var(--workspace-overlay-hover) !important;
|
||
}
|
||
|
||
body.app-spatial-overlays :where(
|
||
.ant-dropdown-menu-item-selected,
|
||
.ant-select-item-option-selected:not(.ant-select-item-option-disabled),
|
||
.ant-cascader-menu-item-active
|
||
) {
|
||
background: var(--workspace-overlay-selected) !important;
|
||
color: var(--foreground) !important;
|
||
}
|
||
|
||
body.app-spatial-overlays :where(
|
||
.ant-dropdown-menu-item-divider,
|
||
.ant-popover-inner-content > .border-b,
|
||
.ant-popover-inner-content > .border-y,
|
||
.ant-modal-header,
|
||
.ant-modal-footer,
|
||
.ant-drawer-header
|
||
) {
|
||
border-color: var(--workspace-overlay-divider) !important;
|
||
}
|
||
|
||
body.app-spatial-overlays :where(.ant-popover-arrow::before, .ant-tooltip-arrow::before) {
|
||
border: 1px solid var(--workspace-overlay-border);
|
||
background: var(--workspace-overlay-bg-strong) !important;
|
||
}
|
||
|
||
body.app-spatial-overlays :where(.ant-modal-mask, .ant-drawer-mask) {
|
||
background: rgba(0, 0, 0, 0.48) !important;
|
||
backdrop-filter: blur(7px);
|
||
-webkit-backdrop-filter: blur(7px);
|
||
}
|
||
|
||
@media (prefers-reduced-transparency: reduce) {
|
||
body.app-spatial-overlays :where(
|
||
.ant-dropdown-menu,
|
||
.ant-select-dropdown,
|
||
.ant-popover-inner,
|
||
.ant-picker-dropdown .ant-picker-panel-container,
|
||
.ant-cascader-menus,
|
||
.ant-mentions-dropdown,
|
||
.ant-tooltip-inner,
|
||
.ant-modal-content,
|
||
.ant-drawer-content,
|
||
.ant-message-notice-content,
|
||
.ant-notification-notice
|
||
) {
|
||
background: var(--workspace-overlay-bg-strong) !important;
|
||
backdrop-filter: none !important;
|
||
-webkit-backdrop-filter: none !important;
|
||
}
|
||
}
|
||
|
||
.app-workspace-shell.is-spatial .app-workspace-brand-mark {
|
||
border: 1px solid color-mix(in srgb, var(--workspace-accent) 36%, transparent);
|
||
background: var(--workspace-accent);
|
||
color: color-mix(in srgb, var(--workspace-canvas) 92%, black);
|
||
box-shadow: 0 8px 24px color-mix(in srgb, var(--workspace-accent) 18%, transparent);
|
||
}
|
||
|
||
.app-workspace-shell.is-spatial .app-workspace-nav-link.is-active {
|
||
background: var(--workspace-accent-soft);
|
||
color: var(--foreground);
|
||
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--workspace-accent) 13%, transparent);
|
||
}
|
||
|
||
.app-workspace-shell.is-spatial .app-workspace-nav-link.is-active::before {
|
||
left: -9px;
|
||
width: 3px;
|
||
height: 20px;
|
||
box-shadow: 0 0 18px color-mix(in srgb, var(--workspace-accent) 42%, transparent);
|
||
}
|
||
|
||
.app-workspace-shell.is-spatial .app-workspace-stage {
|
||
border-radius: 0;
|
||
background: var(--workspace-content);
|
||
}
|
||
|
||
/* 工作区保留滚轮与触控板滚动，只隐藏会形成额外竖向分割的浏览器轨道。 */
|
||
.app-spatial-workspace .app-workspace-scroll {
|
||
scrollbar-width: none;
|
||
}
|
||
|
||
.app-spatial-workspace .app-workspace-scroll::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
|
||
.app-spatial-workspace .app-page-header {
|
||
border-color: var(--workspace-border);
|
||
}
|
||
|
||
.app-spatial-workspace .app-page-header h1 {
|
||
letter-spacing: 0;
|
||
text-wrap: balance;
|
||
}
|
||
|
||
.app-spatial-workspace .app-workspace-surface,
|
||
.app-spatial-workspace .app-collection-card {
|
||
border-color: var(--workspace-border);
|
||
background: var(--workspace-surface);
|
||
box-shadow:
|
||
0 18px 50px color-mix(in srgb, var(--workspace-canvas) 54%, transparent),
|
||
inset 0 1px 0 color-mix(in srgb, white 8%, transparent);
|
||
backdrop-filter: blur(18px) saturate(118%);
|
||
}
|
||
|
||
.app-spatial-workspace .app-collection-card:hover,
|
||
.app-spatial-workspace .app-collection-card:focus-within {
|
||
border-color: var(--workspace-border-strong);
|
||
background: color-mix(in srgb, var(--workspace-surface-strong) 96%, var(--workspace-accent) 4%);
|
||
box-shadow: 0 18px 42px color-mix(in srgb, var(--workspace-accent) 7%, transparent);
|
||
}
|
||
|
||
.app-spatial-workspace .app-table-surface {
|
||
border-color: var(--workspace-border);
|
||
background: var(--workspace-surface-strong);
|
||
box-shadow:
|
||
0 20px 54px color-mix(in srgb, var(--workspace-canvas) 58%, transparent),
|
||
inset 0 1px 0 color-mix(in srgb, white 7%, transparent);
|
||
}
|
||
|
||
.app-spatial-workspace .app-data-table .ant-table,
|
||
.app-spatial-workspace .app-data-table .ant-table-container {
|
||
background: transparent;
|
||
}
|
||
|
||
.app-spatial-workspace .app-list-search:focus-within {
|
||
filter: drop-shadow(0 0 16px color-mix(in srgb, var(--workspace-accent) 10%, transparent));
|
||
}
|
||
|
||
.app-spatial-workspace .app-pagination-bar {
|
||
border-color: var(--workspace-border);
|
||
background: transparent;
|
||
}
|
||
|
||
.app-spatial-workspace .app-home-header {
|
||
border-color: var(--workspace-border);
|
||
}
|
||
|
||
.app-spatial-workspace .app-home-metric {
|
||
border-color: var(--workspace-border);
|
||
background: var(--workspace-surface);
|
||
box-shadow:
|
||
0 16px 42px color-mix(in srgb, var(--workspace-canvas) 56%, transparent),
|
||
inset 0 1px 0 color-mix(in srgb, white 8%, transparent);
|
||
backdrop-filter: blur(18px) saturate(115%);
|
||
}
|
||
|
||
.app-spatial-workspace .app-home-metric svg {
|
||
width: 17px;
|
||
height: 17px;
|
||
}
|
||
|
||
.app-spatial-workspace .workspace-signal-icon path {
|
||
stroke: var(--workspace-accent) !important;
|
||
}
|
||
|
||
.app-spatial-workspace .workspace-signal-icon circle {
|
||
fill: color-mix(in srgb, var(--workspace-accent) 62%, transparent) !important;
|
||
}
|
||
|
||
.app-spatial-workspace .ant-switch.ant-switch-checked {
|
||
background: var(--workspace-accent);
|
||
}
|
||
|
||
.dark .app-spatial-workspace .ant-switch.ant-switch-checked .ant-switch-handle::before {
|
||
background: #171717;
|
||
}
|
||
|
||
.app-spatial-workspace .app-home-focus-panel,
|
||
.app-spatial-workspace .project-overview-focus,
|
||
.app-spatial-workspace .project-pipeline-surface {
|
||
border-color: var(--workspace-border);
|
||
background: var(--workspace-surface-strong);
|
||
box-shadow:
|
||
0 26px 72px color-mix(in srgb, var(--workspace-canvas) 64%, transparent),
|
||
inset 0 1px 0 color-mix(in srgb, white 8%, transparent);
|
||
}
|
||
|
||
.app-spatial-workspace .app-home-focus-panel {
|
||
min-height: 330px;
|
||
}
|
||
|
||
.app-spatial-workspace .spatial-chapter-panel,
|
||
.app-spatial-workspace .project-overview-status {
|
||
background: color-mix(in srgb, var(--workspace-surface) 82%, var(--workspace-accent) 3%);
|
||
}
|
||
|
||
.spatial-chapter-deck {
|
||
position: relative;
|
||
min-height: 242px;
|
||
perspective: 900px;
|
||
perspective-origin: 50% 34%;
|
||
transform-style: preserve-3d;
|
||
}
|
||
|
||
.spatial-chapter-card {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 3%;
|
||
display: block;
|
||
width: min(82%, 290px);
|
||
height: 92px;
|
||
overflow: hidden;
|
||
border: 1px solid var(--workspace-border-strong);
|
||
border-radius: 7px;
|
||
background: color-mix(in srgb, var(--workspace-surface-strong) 95%, white 5%);
|
||
padding: 13px 15px;
|
||
color: color-mix(in srgb, var(--foreground) 76%, transparent);
|
||
box-shadow:
|
||
0 18px 28px rgba(0, 0, 0, 0.24),
|
||
inset 0 1px 0 color-mix(in srgb, white 13%, transparent);
|
||
transform: translate3d(var(--deck-x), var(--deck-y), var(--deck-z)) rotateX(46deg) rotateZ(-7deg);
|
||
transform-origin: center top;
|
||
transition:
|
||
border-color var(--motion-state) var(--ease-aceternity),
|
||
background-color var(--motion-state) var(--ease-aceternity),
|
||
color var(--motion-state) var(--ease-aceternity),
|
||
transform var(--motion-state) var(--ease-aceternity);
|
||
}
|
||
|
||
.spatial-chapter-card:hover,
|
||
.spatial-chapter-card:focus-visible {
|
||
z-index: 20 !important;
|
||
border-color: color-mix(in srgb, var(--workspace-accent) 58%, var(--workspace-border));
|
||
color: var(--foreground);
|
||
outline: none;
|
||
transform: translate3d(calc(var(--deck-x) + 8px), calc(var(--deck-y) - 5px), 18px) rotateX(34deg) rotateZ(-5deg);
|
||
}
|
||
|
||
.spatial-chapter-card.is-active {
|
||
border-color: color-mix(in srgb, var(--workspace-accent) 74%, white 8%);
|
||
background: var(--workspace-accent);
|
||
color: color-mix(in srgb, var(--workspace-canvas) 90%, black);
|
||
box-shadow:
|
||
0 22px 50px color-mix(in srgb, var(--workspace-accent) 23%, transparent),
|
||
inset 0 1px 0 rgba(255, 255, 255, 0.28);
|
||
}
|
||
|
||
.spatial-chapter-card.is-loading {
|
||
border-color: var(--workspace-border);
|
||
background: color-mix(in srgb, var(--foreground) 4%, var(--workspace-surface-strong));
|
||
}
|
||
|
||
.app-spatial-workspace .app-workflow-rail {
|
||
border-color: var(--workspace-border);
|
||
}
|
||
|
||
.app-spatial-workspace .app-workflow-step {
|
||
border-color: var(--workspace-border);
|
||
transition: background-color var(--motion-instant) ease-out;
|
||
}
|
||
|
||
.app-spatial-workspace .app-workflow-step:hover {
|
||
background: var(--workspace-accent-soft);
|
||
}
|
||
|
||
.app-spatial-workspace .project-workbench-header {
|
||
border-color: var(--workspace-border);
|
||
background: color-mix(in srgb, var(--workspace-nav) 92%, transparent);
|
||
box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--workspace-accent) 4%, transparent);
|
||
backdrop-filter: blur(22px) saturate(120%);
|
||
}
|
||
|
||
.app-spatial-workspace .project-pipeline-surface > div > a:hover {
|
||
background: color-mix(in srgb, var(--workspace-accent) 5%, transparent);
|
||
}
|
||
|
||
@media (max-width: 639px) {
|
||
.app-workspace-shell.is-spatial {
|
||
gap: 6px;
|
||
padding: 6px;
|
||
}
|
||
|
||
.app-workspace-shell.is-spatial .app-workspace-sidebar,
|
||
.app-workspace-shell.is-spatial .app-workspace-stage {
|
||
border-radius: 6px;
|
||
}
|
||
|
||
}
|
||
|
||
@media (max-width: 1023px) {
|
||
.app-workspace-sidebar-scrim {
|
||
left: 0;
|
||
}
|
||
|
||
.app-workspace-shell .app-workspace-sidebar.is-mobile-expanded {
|
||
position: absolute;
|
||
z-index: 40;
|
||
inset: 6px auto 6px 6px;
|
||
width: min(196px, calc(100vw - 58px));
|
||
box-shadow: 22px 0 70px rgba(0, 0, 0, 0.58), inset 0 1px 0 rgba(255, 255, 255, 0.08);
|
||
}
|
||
|
||
.app-spatial-workspace .app-home-focus-panel {
|
||
min-height: 0;
|
||
}
|
||
|
||
.spatial-chapter-deck {
|
||
display: grid;
|
||
min-height: 0;
|
||
gap: 8px;
|
||
perspective: none;
|
||
}
|
||
|
||
.spatial-chapter-card {
|
||
position: relative;
|
||
left: auto;
|
||
top: auto;
|
||
width: 100%;
|
||
height: auto;
|
||
min-height: 68px;
|
||
transform: none;
|
||
}
|
||
|
||
.spatial-chapter-card:hover,
|
||
.spatial-chapter-card:focus-visible {
|
||
transform: translateX(3px);
|
||
}
|
||
}
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.spatial-chapter-card,
|
||
.spatial-chapter-card:hover,
|
||
.spatial-chapter-card:focus-visible {
|
||
transition: none;
|
||
transform: none;
|
||
}
|
||
}
|
||
|
||
.app-user-workspace {
|
||
background-color: var(--workspace-page);
|
||
}
|
||
|
||
.app-workspace-shell {
|
||
background: var(--workspace-page);
|
||
}
|
||
|
||
.app-workspace-sidebar {
|
||
border-right: 1px solid var(--workspace-border);
|
||
background: var(--workspace-navigation);
|
||
transition: width var(--motion-state) var(--ease-aceternity);
|
||
}
|
||
|
||
.app-workspace-stage,
|
||
.app-user-content,
|
||
.app-workspace-grid {
|
||
background: var(--workspace-content);
|
||
}
|
||
|
||
.app-workspace-page {
|
||
background: var(--workspace-content);
|
||
}
|
||
|
||
.app-workspace-navigation {
|
||
background: var(--workspace-navigation);
|
||
}
|
||
|
||
.app-workspace-nav-link.is-active {
|
||
background: color-mix(in srgb, var(--foreground) 6%, transparent);
|
||
color: var(--foreground);
|
||
}
|
||
|
||
.app-workspace-nav-link.is-active::before {
|
||
position: absolute;
|
||
left: -8px;
|
||
width: 2px;
|
||
height: 18px;
|
||
border-radius: 0 2px 2px 0;
|
||
background: var(--workspace-accent);
|
||
content: "";
|
||
}
|
||
|
||
.app-workspace-icon-button {
|
||
display: inline-flex;
|
||
width: 30px;
|
||
height: 30px;
|
||
flex: 0 0 auto;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 6px;
|
||
color: color-mix(in srgb, var(--foreground) 58%, transparent);
|
||
transition: color var(--motion-instant) ease-out, background-color var(--motion-instant) ease-out;
|
||
}
|
||
|
||
.app-workspace-icon-button:hover {
|
||
background: color-mix(in srgb, var(--foreground) 6%, transparent);
|
||
color: var(--foreground);
|
||
}
|
||
|
||
/* Sidebar custom scrollbar - 隐身融入设计 */
|
||
.app-workspace-sidebar-scroll-area {
|
||
position: relative; /* 为渐变遮罩定位 */
|
||
overflow-y: auto;
|
||
scrollbar-width: thin;
|
||
scrollbar-color: transparent transparent; /* 默认完全隐藏 */
|
||
transition: scrollbar-color var(--motion-state) ease-in-out;
|
||
}
|
||
|
||
.app-workspace-sidebar-scroll-area::-webkit-scrollbar {
|
||
width: 4px;
|
||
background: transparent; /* 默认轨道透明 */
|
||
}
|
||
|
||
.app-workspace-sidebar-scroll-area::-webkit-scrollbar-track {
|
||
background: transparent;
|
||
}
|
||
|
||
.app-workspace-sidebar-scroll-area::-webkit-scrollbar-thumb {
|
||
background: transparent; /* 默认滑块透明 */
|
||
border-radius: 9999px;
|
||
transition: background-color var(--motion-state) ease-in-out;
|
||
}
|
||
|
||
/* Hover state - 显示滚动条 */
|
||
.app-workspace-sidebar:hover .app-workspace-sidebar-scroll-area,
|
||
.app-workspace-sidebar-scroll-area:hover {
|
||
scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
|
||
}
|
||
|
||
.app-workspace-sidebar:hover .app-workspace-sidebar-scroll-area::-webkit-scrollbar-thumb,
|
||
.app-workspace-sidebar-scroll-area:hover::-webkit-scrollbar-thumb {
|
||
background-color: rgba(255, 255, 255, 0.2);
|
||
}
|
||
|
||
/* Dark mode scrollbar */
|
||
.dark .app-workspace-sidebar:hover .app-workspace-sidebar-scroll-area,
|
||
.dark .app-workspace-sidebar-scroll-area:hover {
|
||
scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
|
||
}
|
||
|
||
.dark .app-workspace-sidebar:hover .app-workspace-sidebar-scroll-area::-webkit-scrollbar-thumb,
|
||
.dark .app-workspace-sidebar-scroll-area:hover::-webkit-scrollbar-thumb {
|
||
background-color: rgba(255, 255, 255, 0.15);
|
||
}
|
||
|
||
/* Scroll fade gradients - 光影提示设计 */
|
||
.app-workspace-sidebar-scroll-area.has-top-fade::before,
|
||
.app-workspace-sidebar-scroll-area.has-bottom-fade::after {
|
||
content: "";
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
height: 12px;
|
||
pointer-events: none; /* 不阻塞点击事件 */
|
||
z-index: 10;
|
||
}
|
||
|
||
.app-workspace-sidebar-scroll-area.has-top-fade::before {
|
||
top: 0;
|
||
background: var(--workspace-navigation);
|
||
}
|
||
|
||
.app-workspace-sidebar-scroll-area.has-bottom-fade::after {
|
||
bottom: 0;
|
||
background: var(--workspace-navigation);
|
||
}
|
||
|
||
.workspace-signal-icon {
|
||
filter: drop-shadow(0 7px 16px color-mix(in srgb, var(--workspace-accent) 14%, transparent));
|
||
}
|
||
|
||
.workspace-state {
|
||
animation: workspace-state-enter var(--motion-panel) var(--ease-product-enter) both;
|
||
}
|
||
|
||
.workspace-loading-state .ant-skeleton-title,
|
||
.workspace-loading-state .ant-skeleton-paragraph > li {
|
||
border-radius: 4px;
|
||
}
|
||
|
||
:where(.ant-btn) {
|
||
letter-spacing: 0;
|
||
transition:
|
||
color var(--motion-instant) ease-out,
|
||
background-color var(--motion-instant) ease-out,
|
||
border-color var(--motion-instant) ease-out,
|
||
box-shadow var(--motion-instant) ease-out,
|
||
transform 90ms ease-out;
|
||
}
|
||
|
||
:where(.ant-btn:not(:disabled)):active {
|
||
transform: scale(0.98);
|
||
}
|
||
|
||
:where(.ant-select-item-option-content) {
|
||
min-width: 0;
|
||
}
|
||
|
||
.creation-home {
|
||
--creation-accent: var(--workspace-accent);
|
||
--creation-bg: var(--workspace-page);
|
||
--creation-surface: rgba(255, 255, 255, .68);
|
||
--creation-surface-muted: rgba(238, 241, 245, .68);
|
||
--creation-surface-hover: rgba(228, 232, 237, .7);
|
||
--creation-surface-selected: rgba(218, 223, 229, .72);
|
||
--creation-border: rgba(179, 188, 199, .34);
|
||
--creation-border-strong: rgba(123, 136, 151, .42);
|
||
--creation-text: #17191d;
|
||
--creation-muted: #929aa5;
|
||
--creation-faint: #b5bbc3;
|
||
isolation: isolate;
|
||
background: var(--creation-bg);
|
||
color: var(--creation-text);
|
||
backdrop-filter: blur(18px) saturate(112%);
|
||
-webkit-backdrop-filter: blur(18px) saturate(112%);
|
||
}
|
||
|
||
.dark .creation-home {
|
||
--creation-accent: var(--workspace-accent);
|
||
--creation-bg: var(--workspace-page);
|
||
--creation-surface: rgba(27, 29, 34, .72);
|
||
--creation-surface-muted: rgba(35, 38, 44, .68);
|
||
--creation-surface-hover: rgba(47, 50, 58, .72);
|
||
--creation-surface-selected: rgba(57, 61, 70, .74);
|
||
--creation-border: rgba(104, 111, 124, .24);
|
||
--creation-border-strong: rgba(137, 146, 160, .36);
|
||
--creation-text: #f2f4f6;
|
||
--creation-muted: #737b86;
|
||
--creation-faint: #565d67;
|
||
}
|
||
|
||
.creation-new-button {
|
||
position: absolute;
|
||
z-index: 30;
|
||
top: 24px;
|
||
right: 28px;
|
||
display: grid;
|
||
width: 36px;
|
||
height: 36px;
|
||
place-items: center;
|
||
border: 1px solid var(--creation-border);
|
||
border-radius: 9px;
|
||
background: var(--creation-surface);
|
||
color: var(--creation-muted);
|
||
box-shadow: 0 8px 24px rgba(31, 37, 45, .06), inset 0 1px 0 color-mix(in srgb, white 58%, transparent);
|
||
backdrop-filter: blur(18px) saturate(125%);
|
||
-webkit-backdrop-filter: blur(18px) saturate(125%);
|
||
transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
|
||
}
|
||
|
||
.creation-new-button:hover {
|
||
border-color: var(--creation-border-strong);
|
||
background: var(--creation-surface-hover);
|
||
color: var(--creation-text);
|
||
}
|
||
|
||
.creation-empty-workspace {
|
||
display: flex;
|
||
width: min(1000px, calc(100% - 64px));
|
||
min-height: 100%;
|
||
flex: 1 0 auto;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin: 0 auto;
|
||
padding: 0 0 20px;
|
||
}
|
||
|
||
.creation-empty-composer {
|
||
width: 100%;
|
||
animation: creation-workbench-enter var(--motion-dur-slow-calc) var(--motion-ease-out) both;
|
||
}
|
||
|
||
.creation-composer {
|
||
position: relative;
|
||
width: 100%;
|
||
min-width: 0;
|
||
border: 1px solid var(--creation-border);
|
||
border-radius: 16px;
|
||
background: var(--creation-surface);
|
||
box-shadow: 0 22px 72px rgba(27, 33, 42, .065), inset 0 1px 0 color-mix(in srgb, white 76%, transparent);
|
||
overflow: hidden;
|
||
backdrop-filter: blur(26px) saturate(128%);
|
||
-webkit-backdrop-filter: blur(26px) saturate(128%);
|
||
transition: border-color 180ms ease, box-shadow 180ms ease;
|
||
}
|
||
|
||
.creation-composer::before {
|
||
position: absolute;
|
||
z-index: 1;
|
||
top: 0;
|
||
right: 22px;
|
||
left: 22px;
|
||
height: 1px;
|
||
background: linear-gradient(90deg, transparent, color-mix(in srgb, white 72%, transparent), transparent);
|
||
content: "";
|
||
pointer-events: none;
|
||
}
|
||
|
||
.creation-composer:focus-within {
|
||
border-color: var(--creation-border-strong);
|
||
box-shadow: 0 24px 68px rgba(27, 33, 42, .11), 0 0 0 3px color-mix(in srgb, var(--creation-accent) 7%, transparent), inset 0 1px 0 color-mix(in srgb, white 78%, transparent);
|
||
}
|
||
|
||
.dark .creation-composer {
|
||
border-color: rgba(255, 255, 255, .075);
|
||
background: rgba(22, 24, 29, .66);
|
||
box-shadow: 0 20px 72px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .04);
|
||
}
|
||
|
||
.dark .creation-composer:focus-within {
|
||
border-color: rgba(6, 182, 212, .34);
|
||
box-shadow: 0 28px 84px rgba(0, 0, 0, .32), 0 0 0 1px rgba(6, 182, 212, .1), inset 0 1px 0 rgba(255, 255, 255, .055);
|
||
}
|
||
|
||
.creation-prompt-area {
|
||
display: grid;
|
||
min-height: 174px;
|
||
grid-template-columns: 64px minmax(0, 1fr);
|
||
gap: 16px;
|
||
padding: 24px 24px 14px;
|
||
}
|
||
|
||
.creation-reference-tile {
|
||
display: flex;
|
||
width: 56px;
|
||
height: 70px;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 4px;
|
||
border: 1px solid var(--creation-border);
|
||
border-radius: 5px;
|
||
background: color-mix(in srgb, var(--creation-surface-muted) 80%, transparent);
|
||
color: var(--creation-muted);
|
||
transform: rotate(-7deg);
|
||
transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, transform 160ms var(--motion-ease-out);
|
||
}
|
||
|
||
.creation-reference-tile:hover:not(:disabled) {
|
||
border-color: var(--creation-border-strong);
|
||
background: var(--creation-surface-hover);
|
||
color: var(--creation-text);
|
||
transform: rotate(-3deg) translateY(-2px);
|
||
}
|
||
|
||
.creation-reference-tile:disabled {
|
||
cursor: not-allowed;
|
||
opacity: .45;
|
||
}
|
||
|
||
.creation-reference-tile svg {
|
||
width: 17px;
|
||
height: 17px;
|
||
}
|
||
|
||
.creation-reference-tile span {
|
||
font-size: 9px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.creation-prompt-editor {
|
||
min-width: 0;
|
||
}
|
||
|
||
.creation-prompt-editor textarea {
|
||
width: 100%;
|
||
min-height: 126px;
|
||
resize: none;
|
||
border: 0;
|
||
background: transparent;
|
||
color: var(--creation-text);
|
||
font-size: 14px;
|
||
line-height: 1.75;
|
||
outline: none;
|
||
}
|
||
|
||
.creation-prompt-editor textarea::placeholder {
|
||
color: var(--creation-muted);
|
||
opacity: .82;
|
||
}
|
||
|
||
.creation-prompt-editor textarea:disabled {
|
||
cursor: wait;
|
||
opacity: .62;
|
||
}
|
||
|
||
.creation-attachment-strip {
|
||
display: flex;
|
||
gap: 8px;
|
||
padding-top: 8px;
|
||
overflow-x: auto;
|
||
}
|
||
|
||
.creation-attachment {
|
||
position: relative;
|
||
width: 48px;
|
||
height: 48px;
|
||
flex: 0 0 auto;
|
||
overflow: hidden;
|
||
border: 1px solid var(--creation-border);
|
||
border-radius: 8px;
|
||
background: var(--creation-surface-muted);
|
||
}
|
||
|
||
.creation-attachment img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
}
|
||
|
||
.creation-attachment button {
|
||
position: absolute;
|
||
top: 3px;
|
||
right: 3px;
|
||
display: grid;
|
||
width: 17px;
|
||
height: 17px;
|
||
place-items: center;
|
||
border-radius: 50%;
|
||
background: rgba(15, 16, 18, .72);
|
||
color: white;
|
||
opacity: 0;
|
||
transition: opacity 140ms ease;
|
||
}
|
||
|
||
.creation-attachment:hover button,
|
||
.creation-attachment button:focus-visible {
|
||
opacity: 1;
|
||
}
|
||
|
||
.creation-attachment button svg {
|
||
width: 10px;
|
||
height: 10px;
|
||
}
|
||
|
||
.creation-composer-toolbar {
|
||
display: flex;
|
||
min-height: 64px;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 10px;
|
||
border-top: 1px solid color-mix(in srgb, var(--creation-border) 72%, transparent);
|
||
padding: 10px 16px 10px 18px;
|
||
}
|
||
|
||
.creation-composer-control-row {
|
||
display: flex;
|
||
min-width: 0;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.creation-reference-button {
|
||
display: grid;
|
||
width: 34px;
|
||
height: 34px;
|
||
flex: 0 0 auto;
|
||
place-items: center;
|
||
border: 1px solid var(--creation-border);
|
||
border-radius: 9px;
|
||
background: color-mix(in srgb, var(--creation-surface-muted) 68%, transparent);
|
||
color: var(--creation-muted);
|
||
transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, transform 120ms ease;
|
||
}
|
||
|
||
.creation-reference-button svg {
|
||
width: 16px;
|
||
height: 16px;
|
||
}
|
||
|
||
.creation-reference-button:hover:not(:disabled) {
|
||
border-color: var(--creation-border-strong);
|
||
background: var(--creation-surface-hover);
|
||
color: var(--creation-text);
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
.creation-reference-button:active:not(:disabled) {
|
||
transform: scale(.96);
|
||
}
|
||
|
||
.creation-reference-button:disabled {
|
||
cursor: not-allowed;
|
||
opacity: .45;
|
||
}
|
||
|
||
.creation-composer-primary-tools {
|
||
display: flex;
|
||
min-width: 0;
|
||
flex: 0 1 auto;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
gap: 6px;
|
||
border: 0;
|
||
border-radius: 0;
|
||
background: transparent;
|
||
padding: 0;
|
||
box-shadow: none;
|
||
backdrop-filter: none;
|
||
-webkit-backdrop-filter: none;
|
||
}
|
||
|
||
.dark .creation-composer-primary-tools {
|
||
gap: 6px;
|
||
border: 0;
|
||
background: transparent;
|
||
padding: 0;
|
||
box-shadow: none;
|
||
backdrop-filter: none;
|
||
-webkit-backdrop-filter: none;
|
||
}
|
||
|
||
.dark .creation-reference-button {
|
||
border-color: rgba(255, 255, 255, .07);
|
||
background: rgba(38, 41, 48, .44);
|
||
}
|
||
|
||
.creation-chip {
|
||
display: inline-flex;
|
||
height: 36px;
|
||
min-width: 0;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 7px;
|
||
border: 1px solid var(--creation-border);
|
||
border-radius: 8px;
|
||
background: color-mix(in srgb, var(--creation-surface-muted) 70%, transparent);
|
||
color: var(--creation-text);
|
||
padding: 0 10px;
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
white-space: nowrap;
|
||
box-shadow: inset 0 1px 0 color-mix(in srgb, white 40%, transparent);
|
||
transition: background-color 160ms ease, color 160ms ease, transform 120ms ease;
|
||
}
|
||
|
||
.creation-chip:hover,
|
||
.creation-chip[aria-expanded="true"] {
|
||
border-color: var(--creation-border-strong);
|
||
background: var(--creation-surface-hover);
|
||
}
|
||
|
||
.creation-chip:active {
|
||
transform: scale(.98);
|
||
}
|
||
|
||
.creation-chip.is-accent {
|
||
color: var(--creation-accent);
|
||
}
|
||
|
||
.creation-chip.is-accent[aria-expanded="true"] {
|
||
background: color-mix(in srgb, var(--creation-accent) 9%, transparent);
|
||
}
|
||
|
||
.dark .creation-chip {
|
||
border: 1px solid rgba(255, 255, 255, .075);
|
||
background: rgba(38, 41, 48, .64);
|
||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
|
||
}
|
||
|
||
.dark .creation-chip:hover,
|
||
.dark .creation-chip[aria-expanded="true"] {
|
||
border-color: rgba(255, 255, 255, .13);
|
||
background: rgba(48, 52, 61, .82);
|
||
}
|
||
|
||
.dark .creation-chip.is-accent {
|
||
border-color: rgba(6, 182, 212, .2);
|
||
background: rgba(6, 182, 212, .08);
|
||
}
|
||
|
||
.creation-chip > svg {
|
||
width: 14px;
|
||
height: 14px;
|
||
flex: 0 0 auto;
|
||
}
|
||
|
||
.creation-chip > svg:last-child {
|
||
width: 13px;
|
||
height: 13px;
|
||
color: var(--creation-muted);
|
||
transition: transform 160ms var(--motion-ease-out);
|
||
}
|
||
|
||
.creation-chip > svg:last-child.is-open {
|
||
transform: rotate(180deg);
|
||
}
|
||
|
||
.creation-model-picker.canvas-composer-model-picker {
|
||
width: min(210px, 25vw) !important;
|
||
height: 36px !important;
|
||
border: 1px solid var(--creation-border) !important;
|
||
border-radius: 8px !important;
|
||
background: color-mix(in srgb, var(--creation-surface-muted) 70%, transparent) !important;
|
||
color: var(--creation-text) !important;
|
||
padding: 0 9px !important;
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.creation-model-picker.canvas-composer-model-picker:hover,
|
||
.creation-model-picker.canvas-composer-model-picker[aria-expanded="true"] {
|
||
border-color: var(--creation-border-strong) !important;
|
||
background: var(--creation-surface-hover) !important;
|
||
}
|
||
|
||
.dark .creation-model-picker.canvas-composer-model-picker {
|
||
border: 1px solid rgba(255, 255, 255, .075) !important;
|
||
background: rgba(38, 41, 48, .64) !important;
|
||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
|
||
}
|
||
|
||
.dark .creation-model-picker.canvas-composer-model-picker:hover,
|
||
.dark .creation-model-picker.canvas-composer-model-picker[aria-expanded="true"] {
|
||
border-color: rgba(255, 255, 255, .13) !important;
|
||
background: rgba(48, 52, 61, .82) !important;
|
||
}
|
||
|
||
.creation-model-picker .canvas-model-picker-trigger-icon {
|
||
width: 22px;
|
||
height: 22px;
|
||
border-radius: 6px;
|
||
}
|
||
|
||
.creation-submit-button {
|
||
display: grid;
|
||
width: 40px;
|
||
height: 40px;
|
||
flex: 0 0 auto;
|
||
place-items: center;
|
||
border-radius: 50%;
|
||
background: var(--creation-text);
|
||
color: var(--creation-bg);
|
||
margin-left: auto;
|
||
box-shadow: inset 0 1px 0 color-mix(in srgb, white 26%, transparent), 0 8px 20px rgba(19, 23, 29, .14);
|
||
transition: background-color 160ms ease, color 160ms ease, transform 120ms ease, box-shadow 160ms ease;
|
||
}
|
||
|
||
.creation-composer-toolbar > .creation-submit-button {
|
||
margin-left: auto;
|
||
}
|
||
|
||
.creation-submit-button:hover:not(:disabled) {
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
.creation-submit-button:active:not(:disabled) {
|
||
transform: scale(.96);
|
||
}
|
||
|
||
.creation-submit-button:disabled {
|
||
cursor: not-allowed;
|
||
background: var(--creation-surface-selected);
|
||
color: var(--creation-faint);
|
||
}
|
||
|
||
.creation-submit-button.is-stopping {
|
||
background: #c84646;
|
||
color: white;
|
||
}
|
||
|
||
.creation-new-button:focus-visible,
|
||
.creation-reference-tile:focus-visible,
|
||
.creation-reference-button:focus-visible,
|
||
.creation-chip:focus-visible,
|
||
.creation-submit-button:focus-visible {
|
||
outline: 2px solid color-mix(in srgb, var(--creation-accent) 55%, transparent);
|
||
outline-offset: 2px;
|
||
}
|
||
|
||
.creation-inspiration-strip {
|
||
display: grid;
|
||
width: 100%;
|
||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||
gap: 10px;
|
||
margin-top: 26px;
|
||
}
|
||
|
||
.creation-inspiration-strip button {
|
||
display: flex;
|
||
min-width: 0;
|
||
height: 76px;
|
||
align-items: center;
|
||
gap: 11px;
|
||
overflow: hidden;
|
||
border: 1px solid var(--creation-border);
|
||
border-radius: 10px;
|
||
background: color-mix(in srgb, var(--creation-surface) 74%, transparent);
|
||
color: var(--creation-text);
|
||
padding: 8px 11px;
|
||
text-align: left;
|
||
box-shadow: inset 0 1px 0 color-mix(in srgb, white 52%, transparent);
|
||
backdrop-filter: blur(18px) saturate(120%);
|
||
-webkit-backdrop-filter: blur(18px) saturate(120%);
|
||
transition: border-color 160ms ease, background-color 160ms ease, transform 160ms var(--motion-ease-out);
|
||
}
|
||
|
||
.creation-inspiration-strip button:hover {
|
||
border-color: var(--creation-border-strong);
|
||
background: var(--creation-surface-muted);
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.creation-inspiration-strip img {
|
||
width: 58px;
|
||
height: 58px;
|
||
flex: 0 0 auto;
|
||
border-radius: 8px;
|
||
object-fit: cover;
|
||
}
|
||
|
||
.creation-inspiration-strip span {
|
||
min-width: 0;
|
||
overflow: hidden;
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.dark .creation-inspiration-strip button {
|
||
border-color: rgba(255, 255, 255, .06);
|
||
background: rgba(25, 27, 32, .72);
|
||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
|
||
}
|
||
|
||
.dark .creation-inspiration-strip button:hover {
|
||
border-color: rgba(255, 255, 255, .13);
|
||
background: rgba(33, 36, 43, .86);
|
||
}
|
||
|
||
.creation-thread-stage {
|
||
width: min(840px, calc(100% - 48px));
|
||
flex: 1 0 auto;
|
||
margin: 0 auto;
|
||
padding: 72px 0 48px;
|
||
}
|
||
|
||
.creation-results {
|
||
width: 100%;
|
||
animation: creation-results-enter var(--motion-dur-base-calc) var(--motion-ease-out) both;
|
||
}
|
||
|
||
.creation-thread-composer {
|
||
position: sticky;
|
||
z-index: 20;
|
||
bottom: 0;
|
||
width: min(840px, calc(100% - 48px));
|
||
flex: 0 0 auto;
|
||
margin: 0 auto;
|
||
padding: 10px 0 22px;
|
||
background: linear-gradient(180deg, transparent, var(--creation-bg) 22%);
|
||
}
|
||
|
||
.creation-composer-meta {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 10px 4px 0;
|
||
color: var(--creation-muted);
|
||
font-size: 10px;
|
||
}
|
||
|
||
.creation-composer-meta a {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 5px;
|
||
color: inherit;
|
||
}
|
||
|
||
.creation-composer-meta a:hover {
|
||
color: var(--creation-text);
|
||
}
|
||
|
||
.creation-control-popover {
|
||
filter: none !important;
|
||
}
|
||
|
||
.creation-control-popover-surface,
|
||
.creation-model-picker-surface {
|
||
border: 1px solid rgba(220, 225, 231, .82) !important;
|
||
border-radius: 14px !important;
|
||
background: rgba(255, 255, 255, .78) !important;
|
||
box-shadow: 0 18px 46px rgba(20, 26, 35, .14), inset 0 1px 0 rgba(255, 255, 255, .78) !important;
|
||
overflow: hidden;
|
||
padding: 0 !important;
|
||
backdrop-filter: blur(28px) saturate(140%);
|
||
-webkit-backdrop-filter: blur(28px) saturate(140%);
|
||
animation: creation-popover-enter var(--motion-dur-fast-calc) var(--motion-ease-out) both;
|
||
}
|
||
|
||
.dark .creation-control-popover-surface,
|
||
.dark .creation-model-picker-surface {
|
||
border-color: rgba(61, 66, 76, .72) !important;
|
||
background: rgba(25, 27, 32, .92) !important;
|
||
box-shadow: 0 20px 52px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .055) !important;
|
||
}
|
||
|
||
.creation-control-popover-content,
|
||
.creation-model-picker-surface .ant-popover-inner-content {
|
||
padding: 0 !important;
|
||
}
|
||
|
||
.creation-mode-picker-menu {
|
||
width: 176px;
|
||
padding: 6px;
|
||
color: #17191d;
|
||
}
|
||
|
||
.dark .creation-mode-picker-menu {
|
||
color: #f2f4f6;
|
||
}
|
||
|
||
.creation-mode-picker-menu button {
|
||
display: flex;
|
||
width: 100%;
|
||
height: 40px;
|
||
align-items: center;
|
||
gap: 10px;
|
||
border-radius: 8px;
|
||
padding: 0 8px;
|
||
color: inherit;
|
||
font-size: 13px;
|
||
text-align: left;
|
||
transition: background-color 150ms ease;
|
||
}
|
||
|
||
.creation-mode-picker-menu button:hover,
|
||
.creation-mode-picker-menu button.is-selected {
|
||
background: #f1f2f4;
|
||
}
|
||
|
||
.dark .creation-mode-picker-menu button:hover,
|
||
.dark .creation-mode-picker-menu button.is-selected {
|
||
background: #282b31;
|
||
}
|
||
|
||
.creation-mode-picker-menu button > svg {
|
||
width: 15px;
|
||
height: 15px;
|
||
margin-left: auto;
|
||
}
|
||
|
||
.creation-menu-icon {
|
||
display: grid;
|
||
width: 26px;
|
||
height: 26px;
|
||
place-items: center;
|
||
border: 1px solid #e5e7eb;
|
||
border-radius: 7px;
|
||
}
|
||
|
||
.dark .creation-menu-icon {
|
||
border-color: #30343b;
|
||
}
|
||
|
||
.creation-menu-icon svg {
|
||
width: 15px;
|
||
height: 15px;
|
||
}
|
||
|
||
.creation-settings-panel {
|
||
width: min(400px, calc(100vw - 24px));
|
||
padding: 16px;
|
||
color: #17191d;
|
||
}
|
||
|
||
.dark .creation-settings-panel {
|
||
color: #f2f4f6;
|
||
}
|
||
|
||
.creation-settings-section + .creation-settings-section {
|
||
margin-top: 18px;
|
||
}
|
||
|
||
.creation-settings-section h3,
|
||
.creation-duration-panel h3 {
|
||
margin: 0 0 9px;
|
||
color: #8c949f;
|
||
font-size: 12px;
|
||
font-weight: 520;
|
||
}
|
||
|
||
.dark .creation-settings-section h3,
|
||
.dark .creation-duration-panel h3 {
|
||
color: #69717c;
|
||
}
|
||
|
||
.creation-segmented-grid {
|
||
display: grid;
|
||
gap: 4px;
|
||
border: 1px solid rgba(226, 230, 235, .7);
|
||
border-radius: 10px;
|
||
background: rgba(240, 242, 245, .7);
|
||
padding: 3px;
|
||
backdrop-filter: blur(12px);
|
||
-webkit-backdrop-filter: blur(12px);
|
||
}
|
||
|
||
.dark .creation-segmented-grid {
|
||
border-color: rgba(58, 63, 72, .58);
|
||
background: rgba(35, 38, 44, .72);
|
||
}
|
||
|
||
.creation-segmented-grid.is-ratio {
|
||
grid-template-columns: repeat(6, minmax(0, 1fr));
|
||
}
|
||
|
||
.creation-segmented-grid.is-resolution {
|
||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||
}
|
||
|
||
.creation-segmented-grid.is-quality,
|
||
.creation-segmented-grid.is-count {
|
||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||
}
|
||
|
||
.creation-segmented-grid button {
|
||
display: flex;
|
||
min-width: 0;
|
||
min-height: 48px;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 4px;
|
||
border-radius: 8px;
|
||
color: #3f454d;
|
||
font-size: 13px;
|
||
box-shadow: inset 0 1px 0 transparent;
|
||
transition: background-color 150ms ease, color 150ms ease, box-shadow 150ms ease, transform 120ms ease;
|
||
}
|
||
|
||
.dark .creation-segmented-grid button {
|
||
color: #e3e6ea;
|
||
}
|
||
|
||
.creation-segmented-grid button:hover {
|
||
background: rgba(255, 255, 255, .58);
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
.creation-segmented-grid button:active {
|
||
transform: scale(.97);
|
||
}
|
||
|
||
.dark .creation-segmented-grid button:hover {
|
||
background: #2b2e35;
|
||
}
|
||
|
||
.creation-segmented-grid button.is-selected {
|
||
background: rgba(255, 255, 255, .84);
|
||
color: #17191d;
|
||
box-shadow: 0 2px 10px rgba(22, 28, 36, .07), inset 0 1px 0 rgba(255, 255, 255, .72);
|
||
}
|
||
|
||
.dark .creation-segmented-grid button.is-selected {
|
||
background: rgba(58, 62, 71, .86);
|
||
color: #ffffff;
|
||
box-shadow: 0 5px 14px rgba(0, 0, 0, .14), inset 0 1px 0 rgba(255, 255, 255, .07);
|
||
}
|
||
|
||
.creation-segmented-grid button small {
|
||
color: #9ba2ac;
|
||
font-size: 9px;
|
||
}
|
||
|
||
.dark .creation-segmented-grid button small {
|
||
color: #747b85;
|
||
}
|
||
|
||
.creation-ratio-preview {
|
||
display: grid;
|
||
width: 28px;
|
||
height: 19px;
|
||
place-items: center;
|
||
}
|
||
|
||
.creation-ratio-preview > span {
|
||
display: block;
|
||
border: 1.5px solid currentColor;
|
||
border-radius: 3px;
|
||
}
|
||
|
||
.creation-segmented-grid.is-resolution button,
|
||
.creation-segmented-grid.is-count button {
|
||
min-height: 42px;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.creation-duration-panel {
|
||
width: min(400px, calc(100vw - 24px));
|
||
padding: 16px 18px 18px;
|
||
color: #17191d;
|
||
}
|
||
|
||
.dark .creation-duration-panel {
|
||
color: #f2f4f6;
|
||
}
|
||
|
||
.creation-duration-control {
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 1fr) 96px;
|
||
align-items: center;
|
||
gap: 24px;
|
||
}
|
||
|
||
.creation-range-wrap input {
|
||
width: 100%;
|
||
height: 24px;
|
||
appearance: none;
|
||
background: transparent;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.creation-range-wrap input::-webkit-slider-runnable-track {
|
||
height: 8px;
|
||
border-radius: 999px;
|
||
background: #e1e4e8;
|
||
}
|
||
|
||
.dark .creation-range-wrap input::-webkit-slider-runnable-track {
|
||
background: #30343b;
|
||
}
|
||
|
||
.creation-range-wrap input::-webkit-slider-thumb {
|
||
width: 8px;
|
||
height: 26px;
|
||
margin-top: -9px;
|
||
appearance: none;
|
||
border-radius: 4px;
|
||
background: #17191d;
|
||
box-shadow: none;
|
||
}
|
||
|
||
.dark .creation-range-wrap input::-webkit-slider-thumb {
|
||
background: #ffffff;
|
||
}
|
||
|
||
.creation-range-wrap input::-moz-range-track {
|
||
height: 8px;
|
||
border-radius: 999px;
|
||
background: #e1e4e8;
|
||
}
|
||
|
||
.dark .creation-range-wrap input::-moz-range-track {
|
||
background: #30343b;
|
||
}
|
||
|
||
.creation-range-wrap input::-moz-range-thumb {
|
||
width: 8px;
|
||
height: 26px;
|
||
border: 0;
|
||
border-radius: 4px;
|
||
background: #17191d;
|
||
}
|
||
|
||
.dark .creation-range-wrap input::-moz-range-thumb {
|
||
background: #ffffff;
|
||
}
|
||
|
||
.creation-range-labels {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-top: 4px;
|
||
color: #6f7781;
|
||
font-size: 12px;
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
|
||
.creation-duration-value {
|
||
display: flex;
|
||
height: 56px;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
border: 1px solid rgba(226, 230, 235, .7);
|
||
border-radius: 9px;
|
||
background: rgba(240, 242, 244, .72);
|
||
padding: 0 17px;
|
||
}
|
||
|
||
.dark .creation-duration-value {
|
||
border-color: rgba(58, 63, 72, .6);
|
||
background: rgba(43, 46, 53, .78);
|
||
}
|
||
|
||
.creation-duration-value strong {
|
||
font-size: 17px;
|
||
font-weight: 550;
|
||
}
|
||
|
||
.creation-duration-value span {
|
||
color: #8f97a2;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.creation-model-picker-menu {
|
||
width: min(384px, calc(100vw - 24px)) !important;
|
||
max-height: min(460px, calc(100vh - 24px));
|
||
padding: 8px !important;
|
||
background: rgba(255, 255, 255, .7) !important;
|
||
color: #17191d !important;
|
||
}
|
||
|
||
.dark .creation-model-picker-menu {
|
||
background: rgba(25, 27, 32, .7) !important;
|
||
color: #f2f4f6 !important;
|
||
}
|
||
|
||
.creation-model-picker-menu .canvas-model-picker-group-label {
|
||
padding: 7px 8px 6px;
|
||
font-size: 11px;
|
||
}
|
||
|
||
.creation-model-picker-heading {
|
||
display: flex;
|
||
min-width: 0;
|
||
align-items: center;
|
||
gap: 7px;
|
||
padding: 3px 8px 9px;
|
||
color: #929aa5;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.creation-model-picker-heading strong {
|
||
min-width: 0;
|
||
overflow: hidden;
|
||
color: #17191d;
|
||
font-weight: 520;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.dark .creation-model-picker-heading {
|
||
color: #69717c;
|
||
}
|
||
|
||
.dark .creation-model-picker-heading strong {
|
||
color: #f2f4f6;
|
||
}
|
||
|
||
.creation-model-picker-menu .canvas-model-picker-option {
|
||
min-height: 52px;
|
||
border-radius: 9px;
|
||
padding: 7px 9px;
|
||
transition: background-color 150ms ease, transform 120ms ease;
|
||
}
|
||
|
||
.creation-model-picker-menu .canvas-model-picker-option:hover {
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
.creation-model-picker-menu .canvas-model-picker-option > span:first-child {
|
||
gap: 12px;
|
||
}
|
||
|
||
.creation-model-picker-menu .canvas-model-picker-option > span:first-child > span:first-child {
|
||
width: 34px;
|
||
height: 34px;
|
||
border: 1px solid #e6e8eb;
|
||
border-radius: 8px;
|
||
background: rgba(255, 255, 255, .66) !important;
|
||
}
|
||
|
||
.dark .creation-model-picker-menu .canvas-model-picker-option > span:first-child > span:first-child {
|
||
border-color: #30343b;
|
||
background: rgba(35, 38, 44, .72) !important;
|
||
}
|
||
|
||
.creation-model-picker-menu .canvas-model-picker-option > span:first-child > span:nth-child(2) > span:first-child {
|
||
font-size: 13px;
|
||
}
|
||
|
||
.creation-model-picker-menu .canvas-model-picker-option > span:first-child > span:nth-child(2) > span:nth-child(2) {
|
||
margin-top: 5px;
|
||
font-size: 10px;
|
||
}
|
||
|
||
@keyframes creation-results-enter {
|
||
from { opacity: 0; transform: translateY(10px); }
|
||
to { opacity: 1; transform: translateY(0); }
|
||
}
|
||
|
||
@keyframes creation-popover-enter {
|
||
from { opacity: 0; transform: translateY(6px) scale(.985); }
|
||
to { opacity: 1; transform: translateY(0) scale(1); }
|
||
}
|
||
|
||
@keyframes creation-workbench-enter {
|
||
from { opacity: 0; transform: translateY(12px) scale(.992); }
|
||
to { opacity: 1; transform: translateY(0) scale(1); }
|
||
}
|
||
|
||
/* 创作首页使用独立的“编辑面 + 操作 Dock”结构，避免继承画布的面板语言。 */
|
||
.creation-home {
|
||
--creation-bg: var(--workspace-page);
|
||
--creation-surface: #131519;
|
||
--creation-surface-muted: #1e2127;
|
||
--creation-surface-hover: #262a31;
|
||
--creation-surface-selected: #343841;
|
||
--creation-border: rgba(255, 255, 255, .105);
|
||
--creation-border-strong: rgba(255, 255, 255, .2);
|
||
--creation-text: #f3f4f6;
|
||
--creation-muted: #737985;
|
||
--creation-faint: #4d535e;
|
||
background: var(--creation-bg);
|
||
backdrop-filter: none;
|
||
-webkit-backdrop-filter: none;
|
||
}
|
||
|
||
html:not(.dark) .creation-home {
|
||
--creation-bg: var(--workspace-page);
|
||
--creation-surface: #ffffff;
|
||
--creation-surface-muted: #f0f2f5;
|
||
--creation-surface-hover: #e9edf1;
|
||
--creation-surface-selected: #dde1e7;
|
||
--creation-border: rgba(32, 37, 45, .13);
|
||
--creation-border-strong: rgba(32, 37, 45, .25);
|
||
--creation-text: #17191d;
|
||
--creation-muted: #89919d;
|
||
--creation-faint: #abb2bb;
|
||
}
|
||
|
||
.creation-empty-workspace {
|
||
width: min(1280px, calc(100% - 80px));
|
||
padding: 0 0 12px;
|
||
}
|
||
|
||
.creation-studio-composer {
|
||
width: 100%;
|
||
overflow: hidden;
|
||
border: 1px solid var(--creation-border);
|
||
border-radius: 26px;
|
||
background: var(--creation-surface);
|
||
box-shadow: 0 28px 70px rgba(0, 0, 0, .18);
|
||
animation: creation-workbench-enter var(--motion-dur-slow-calc) var(--motion-ease-out) both;
|
||
}
|
||
|
||
html:not(.dark) .creation-studio-composer {
|
||
box-shadow: 0 24px 62px rgba(25, 31, 41, .08);
|
||
}
|
||
|
||
.creation-studio-composer:focus-within {
|
||
border-color: var(--creation-border-strong);
|
||
box-shadow: 0 28px 70px rgba(0, 0, 0, .22);
|
||
}
|
||
|
||
.creation-studio-writing-surface {
|
||
display: grid;
|
||
min-height: 232px;
|
||
grid-template-columns: 82px minmax(0, 1fr);
|
||
gap: 22px;
|
||
padding: 28px 34px 18px;
|
||
}
|
||
|
||
.creation-studio-reference {
|
||
display: flex;
|
||
width: 74px;
|
||
height: 92px;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-direction: column;
|
||
gap: 6px;
|
||
align-self: start;
|
||
border: 1px solid rgba(132, 143, 161, .24);
|
||
border-radius: 8px;
|
||
background: #1c1f25;
|
||
color: #c8cdd5;
|
||
transform: rotate(-7deg);
|
||
transition: transform 180ms var(--motion-ease-out), border-color 180ms ease, background-color 180ms ease;
|
||
}
|
||
|
||
html:not(.dark) .creation-studio-reference {
|
||
background: #f1f3f6;
|
||
color: #69717c;
|
||
}
|
||
|
||
.creation-studio-reference:hover:not(:disabled) {
|
||
border-color: rgba(6, 182, 212, .55);
|
||
background: #22262d;
|
||
transform: rotate(-3deg) translateY(-3px);
|
||
}
|
||
|
||
.creation-studio-reference:disabled { cursor: wait; opacity: .5; }
|
||
.creation-studio-reference svg { width: 23px; height: 23px; }
|
||
.creation-studio-reference span { font-size: 11px; font-weight: 600; }
|
||
|
||
.creation-studio-editor { min-width: 0; }
|
||
|
||
.creation-studio-editor textarea {
|
||
display: block;
|
||
width: 100%;
|
||
min-height: 170px;
|
||
resize: none;
|
||
border: 0;
|
||
outline: 0;
|
||
background: transparent;
|
||
color: var(--creation-text);
|
||
font-size: 17px;
|
||
line-height: 1.75;
|
||
}
|
||
|
||
.creation-studio-editor textarea::placeholder { color: var(--creation-muted); opacity: .72; }
|
||
.creation-studio-editor textarea:disabled { cursor: wait; opacity: .56; }
|
||
|
||
.creation-studio-attachment-strip {
|
||
display: flex;
|
||
gap: 8px;
|
||
padding-top: 6px;
|
||
overflow-x: auto;
|
||
}
|
||
|
||
.creation-studio-attachment {
|
||
position: relative;
|
||
width: 54px;
|
||
height: 54px;
|
||
flex: 0 0 auto;
|
||
overflow: hidden;
|
||
border: 1px solid var(--creation-border);
|
||
border-radius: 10px;
|
||
background: var(--creation-surface-muted);
|
||
}
|
||
|
||
.creation-studio-attachment img { width: 100%; height: 100%; object-fit: cover; }
|
||
.creation-studio-attachment button {
|
||
position: absolute;
|
||
top: 4px;
|
||
right: 4px;
|
||
display: grid;
|
||
width: 18px;
|
||
height: 18px;
|
||
place-items: center;
|
||
border-radius: 50%;
|
||
background: rgba(0, 0, 0, .7);
|
||
color: white;
|
||
opacity: 0;
|
||
transition: opacity 140ms ease;
|
||
}
|
||
.creation-studio-attachment:hover button,
|
||
.creation-studio-attachment button:focus-visible { opacity: 1; }
|
||
.creation-studio-attachment button svg { width: 11px; height: 11px; }
|
||
|
||
.creation-studio-dock {
|
||
display: flex;
|
||
min-height: 80px;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 16px;
|
||
border-top: 1px solid var(--creation-border);
|
||
padding: 14px 32px 14px 34px;
|
||
}
|
||
|
||
.creation-studio-controls {
|
||
display: flex;
|
||
min-width: 0;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
.creation-studio-control,
|
||
.creation-model-picker.canvas-composer-model-picker {
|
||
display: inline-flex;
|
||
height: 48px !important;
|
||
min-width: 0;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 10px;
|
||
border: 1px solid rgba(255, 255, 255, .12) !important;
|
||
border-radius: 14px !important;
|
||
background: #202329 !important;
|
||
color: #f1f3f5 !important;
|
||
padding: 0 15px !important;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
white-space: nowrap;
|
||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .055);
|
||
transition: transform 150ms var(--motion-ease-out), border-color 150ms ease, background-color 150ms ease;
|
||
}
|
||
|
||
html:not(.dark) .creation-studio-control,
|
||
html:not(.dark) .creation-model-picker.canvas-composer-model-picker {
|
||
border-color: rgba(32, 37, 45, .12) !important;
|
||
background: #f0f2f5 !important;
|
||
color: #20242a !important;
|
||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85);
|
||
}
|
||
|
||
.creation-studio-control:hover,
|
||
.creation-studio-control[aria-expanded="true"],
|
||
.creation-model-picker.canvas-composer-model-picker:hover,
|
||
.creation-model-picker.canvas-composer-model-picker[aria-expanded="true"] {
|
||
border-color: rgba(255, 255, 255, .25) !important;
|
||
background: #292d34 !important;
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
html:not(.dark) .creation-studio-control:hover,
|
||
html:not(.dark) .creation-studio-control[aria-expanded="true"],
|
||
html:not(.dark) .creation-model-picker.canvas-composer-model-picker:hover,
|
||
html:not(.dark) .creation-model-picker.canvas-composer-model-picker[aria-expanded="true"] { background: #e7eaee !important; border-color: rgba(32, 37, 45, .22) !important; }
|
||
|
||
.creation-studio-control:active { transform: scale(.98); }
|
||
.creation-studio-control.is-mode { border-color: rgba(6, 182, 212, .36) !important; background: rgba(4, 73, 89, .28) !important; color: #18c2e1 !important; }
|
||
.creation-studio-control > svg { width: 19px; height: 19px; flex: 0 0 auto; }
|
||
.creation-studio-control > svg:last-child { width: 17px; height: 17px; color: var(--creation-muted); transition: transform 160ms var(--motion-ease-out); }
|
||
.creation-studio-control > svg:last-child.is-open { transform: rotate(180deg); }
|
||
|
||
.creation-model-picker.canvas-composer-model-picker {
|
||
width: min(328px, 30vw) !important;
|
||
justify-content: flex-start;
|
||
font-size: 15px;
|
||
}
|
||
.creation-model-picker .canvas-model-picker-trigger-icon { width: 25px; height: 25px; border-radius: 8px; }
|
||
|
||
.creation-studio-submit {
|
||
display: grid;
|
||
width: 58px;
|
||
height: 58px;
|
||
flex: 0 0 auto;
|
||
place-items: center;
|
||
border: 1px solid rgba(255, 255, 255, .15);
|
||
border-radius: 50%;
|
||
background: #383d47;
|
||
color: #e5e8ec;
|
||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .13);
|
||
cursor: pointer;
|
||
transition: transform 150ms var(--motion-ease-out), background-color 150ms ease, color 150ms ease;
|
||
}
|
||
.creation-studio-submit:hover:not(:disabled) { background: #f4f5f6; color: #111317; transform: translateY(-1px); }
|
||
.creation-studio-submit:active:not(:disabled) { transform: scale(.96); }
|
||
.creation-studio-submit:disabled { cursor: not-allowed; background: #2d3139; color: #5a606b; }
|
||
.creation-studio-submit.is-stopping { background: #bd4949; color: white; }
|
||
|
||
/* 对话态不沿用空态大面板：编辑、控制与消息流各自保持紧凑的固定职责。 */
|
||
.creation-empty-workspace {
|
||
width: min(1120px, calc(100% - 64px));
|
||
justify-content: center;
|
||
padding-bottom: 6vh;
|
||
}
|
||
|
||
.creation-empty-composer { width: 100%; margin: 0; }
|
||
|
||
.creation-chat-intro {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
margin: 0 0 28px;
|
||
}
|
||
.creation-chat-intro-mark {
|
||
display: grid;
|
||
width: 30px;
|
||
height: 30px;
|
||
place-items: center;
|
||
margin-bottom: 10px;
|
||
border-radius: 10px;
|
||
background: rgba(255, 255, 255, .055);
|
||
color: var(--creation-accent);
|
||
animation: creation-intro-mark 2.8s var(--motion-ease-out) infinite;
|
||
}
|
||
.creation-chat-intro-mark svg { width: 16px; height: 16px; }
|
||
.creation-chat-headline {
|
||
margin: 0;
|
||
color: var(--creation-text);
|
||
font-size: 26px;
|
||
font-weight: 620;
|
||
line-height: 1.25;
|
||
text-align: center;
|
||
}
|
||
.creation-chat-headline span { display: inline-block; margin-left: 4px; color: var(--creation-accent); animation: creation-intro-word 2.8s var(--motion-ease-out) infinite; }
|
||
.creation-chat-intro p { margin: 8px 0 0; color: var(--creation-muted); font-size: 12px; }
|
||
|
||
.creation-chat-composer {
|
||
width: 100%;
|
||
overflow: hidden;
|
||
border: 0;
|
||
border-radius: 22px;
|
||
background: #1a1c21;
|
||
box-shadow: none;
|
||
}
|
||
|
||
html:not(.dark) .creation-chat-composer {
|
||
background: #fff;
|
||
box-shadow: 0 10px 32px rgba(20, 26, 35, .05);
|
||
}
|
||
|
||
.creation-chat-composer:focus-within { box-shadow: none; }
|
||
|
||
.creation-chat-writing-surface {
|
||
display: grid;
|
||
min-height: 92px;
|
||
grid-template-columns: 42px minmax(0, 1fr);
|
||
gap: 14px;
|
||
padding: 15px 18px 8px;
|
||
}
|
||
|
||
.creation-chat-reference {
|
||
display: grid;
|
||
width: 42px;
|
||
height: 42px;
|
||
place-items: center;
|
||
border: 0;
|
||
border-radius: 12px;
|
||
background: #242730;
|
||
color: #eef1f4;
|
||
box-shadow: none;
|
||
transition: transform 140ms var(--motion-ease-out), background-color 140ms ease, border-color 140ms ease;
|
||
}
|
||
|
||
.creation-chat-reference:hover:not(:disabled) {
|
||
background: #2c3039;
|
||
transform: translateY(-1px);
|
||
}
|
||
.creation-chat-reference:active:not(:disabled) { transform: scale(.96); }
|
||
.creation-chat-reference:disabled { cursor: wait; opacity: .45; }
|
||
.creation-chat-reference svg { width: 21px; height: 21px; }
|
||
|
||
html:not(.dark) .creation-chat-reference { background: #eff2f5; color: #1d2229; box-shadow: none; }
|
||
|
||
.creation-chat-composer.is-empty .creation-chat-writing-surface {
|
||
min-height: 126px;
|
||
grid-template-columns: 62px minmax(0, 1fr);
|
||
gap: 16px;
|
||
padding: 20px 24px 9px;
|
||
}
|
||
.creation-chat-reference.is-paper {
|
||
width: 56px;
|
||
height: 72px;
|
||
flex-direction: column;
|
||
gap: 4px;
|
||
border-radius: 4px;
|
||
background: #242730;
|
||
color: #bec5ce;
|
||
transform: rotate(-7deg);
|
||
}
|
||
.creation-chat-reference.is-paper:hover:not(:disabled) { background: #2c3039; transform: rotate(-4deg) translateY(-2px); }
|
||
.creation-chat-reference.is-paper svg { width: 18px; height: 18px; }
|
||
.creation-chat-reference.is-paper span { font-size: 9px; font-weight: 600; }
|
||
|
||
.creation-chat-editor { min-width: 0; }
|
||
.creation-chat-editor textarea {
|
||
display: block;
|
||
width: 100%;
|
||
min-height: 78px;
|
||
resize: none;
|
||
border: 0;
|
||
outline: 0;
|
||
background: transparent;
|
||
color: var(--creation-text);
|
||
font-size: 14px;
|
||
line-height: 1.7;
|
||
}
|
||
.creation-chat-editor textarea::placeholder { color: var(--creation-muted); opacity: .76; }
|
||
.creation-chat-editor textarea:disabled { cursor: wait; opacity: .55; }
|
||
|
||
.creation-chat-attachment-strip { display: flex; gap: 7px; padding-top: 6px; overflow-x: auto; }
|
||
.creation-chat-attachment { position: relative; width: 42px; height: 42px; flex: 0 0 auto; overflow: hidden; border: 1px solid var(--creation-border); border-radius: 8px; }
|
||
.creation-chat-attachment img { width: 100%; height: 100%; object-fit: cover; }
|
||
.creation-chat-attachment button { position: absolute; top: 2px; right: 2px; display: grid; width: 16px; height: 16px; place-items: center; border-radius: 50%; background: rgba(0, 0, 0, .7); color: white; opacity: 0; transition: opacity 140ms ease; }
|
||
.creation-chat-attachment:hover button, .creation-chat-attachment button:focus-visible { opacity: 1; }
|
||
.creation-chat-attachment button svg { width: 10px; height: 10px; }
|
||
|
||
.creation-chat-dock {
|
||
display: flex;
|
||
min-height: 58px;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 12px;
|
||
border-top: 0;
|
||
padding: 8px 14px 12px;
|
||
}
|
||
.creation-chat-controls { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: 6px; }
|
||
.creation-chat-control,
|
||
.creation-chat-composer .creation-model-picker.canvas-composer-model-picker {
|
||
display: inline-flex;
|
||
height: 32px !important;
|
||
min-width: 0;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 6px;
|
||
border: 1px solid rgba(255, 255, 255, .055) !important;
|
||
border-radius: 8px !important;
|
||
background: rgba(30, 33, 39, .78) !important;
|
||
color: #e6e9ed !important;
|
||
padding: 0 9px !important;
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
white-space: nowrap;
|
||
box-shadow: none;
|
||
transition: border-color 140ms ease, background-color 140ms ease, transform 140ms var(--motion-ease-out);
|
||
}
|
||
.creation-chat-control:hover,
|
||
.creation-chat-control[aria-expanded="true"],
|
||
.creation-chat-composer .creation-model-picker.canvas-composer-model-picker:hover,
|
||
.creation-chat-composer .creation-model-picker.canvas-composer-model-picker[aria-expanded="true"] { border-color: rgba(255, 255, 255, .12) !important; background: #272b32 !important; transform: translateY(-1px); }
|
||
.creation-chat-control:active { transform: scale(.98); }
|
||
.creation-chat-control.is-mode { border-color: rgba(6, 182, 212, .36) !important; background: rgba(5, 80, 98, .24) !important; color: #17c4e2 !important; }
|
||
.creation-chat-control > svg { width: 15px; height: 15px; flex: 0 0 auto; }
|
||
.creation-chat-control > svg:last-child { width: 14px; height: 14px; color: var(--creation-muted); transition: transform 160ms var(--motion-ease-out); }
|
||
.creation-chat-control > svg:last-child.is-open { transform: rotate(180deg); }
|
||
.creation-chat-composer .creation-model-picker.canvas-composer-model-picker { width: min(196px, 26vw) !important; justify-content: flex-start; }
|
||
.creation-chat-composer .creation-model-picker .canvas-model-picker-trigger-icon { width: 19px; height: 19px; border-radius: 5px; }
|
||
|
||
html:not(.dark) .creation-chat-control,
|
||
html:not(.dark) .creation-chat-composer .creation-model-picker.canvas-composer-model-picker { border-color: transparent !important; background: #f1f3f5 !important; color: #262b32 !important; }
|
||
html:not(.dark) .creation-chat-control:hover,
|
||
html:not(.dark) .creation-chat-composer .creation-model-picker.canvas-composer-model-picker:hover { border-color: rgba(20, 26, 35, .2) !important; background: #e9edf1 !important; }
|
||
|
||
.creation-chat-submit {
|
||
display: grid;
|
||
width: 38px;
|
||
height: 38px;
|
||
flex: 0 0 auto;
|
||
place-items: center;
|
||
border: 0;
|
||
border-radius: 50%;
|
||
background: #303540;
|
||
color: #f1f3f5;
|
||
transition: background-color 140ms ease, color 140ms ease, transform 140ms var(--motion-ease-out);
|
||
}
|
||
.creation-chat-submit:hover:not(:disabled) { background: #f3f4f6; color: #121417; transform: translateY(-1px); }
|
||
.creation-chat-submit:active:not(:disabled) { transform: scale(.96); }
|
||
.creation-chat-submit:disabled { cursor: not-allowed; background: #282c33; color: #5c6370; }
|
||
.creation-chat-submit.is-stopping { background: #bd4949; color: white; }
|
||
|
||
.creation-control-popover-surface {
|
||
border: 0 !important;
|
||
border-radius: 12px !important;
|
||
background: #202227 !important;
|
||
box-shadow: 0 16px 38px rgba(0, 0, 0, .36) !important;
|
||
backdrop-filter: none !important;
|
||
-webkit-backdrop-filter: none !important;
|
||
}
|
||
|
||
.creation-parameter-menu { width: 292px; padding: 12px; }
|
||
.creation-parameter-section + .creation-parameter-section { margin-top: 14px; }
|
||
.creation-parameter-section h3 { margin: 0 0 8px; color: #858c97; font-size: 11px; font-weight: 500; }
|
||
.creation-choice-grid { display: grid; gap: 4px; }
|
||
.creation-choice-grid.is-ratio { grid-template-columns: repeat(6, minmax(0, 1fr)); }
|
||
.creation-choice-grid.is-resolution { grid-template-columns: repeat(4, minmax(0, 1fr)); }
|
||
.creation-choice-grid.is-quality, .creation-choice-grid.is-count { grid-template-columns: repeat(4, minmax(0, 1fr)); }
|
||
.creation-choice-grid button {
|
||
display: flex;
|
||
min-width: 0;
|
||
min-height: 42px;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 4px;
|
||
border-radius: 8px;
|
||
color: #cdd1d7;
|
||
font-size: 11px;
|
||
transition: background-color 140ms ease, color 140ms ease;
|
||
}
|
||
.creation-choice-grid button:hover { background: rgba(255, 255, 255, .055); }
|
||
.creation-choice-grid button.is-selected { background: rgba(255, 255, 255, .12); color: #fff; }
|
||
.creation-choice-grid button small { display: none; }
|
||
.creation-choice-grid.is-resolution button, .creation-choice-grid.is-count button { min-height: 34px; font-size: 12px; }
|
||
.creation-choice-grid .creation-ratio-preview { width: 24px; height: 15px; }
|
||
.creation-choice-grid .creation-ratio-preview > span { border-width: 1px; border-radius: 2px; }
|
||
|
||
.creation-duration-menu { width: 250px; padding: 12px 14px; }
|
||
.creation-duration-menu > div:first-child { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; color: #858c97; font-size: 11px; }
|
||
.creation-duration-menu strong { color: #f3f4f6; font-size: 12px; font-weight: 600; }
|
||
.creation-range-wrap input { height: 18px; }
|
||
.creation-range-wrap input::-webkit-slider-runnable-track { height: 5px; }
|
||
.creation-range-wrap input::-webkit-slider-thumb { width: 7px; height: 19px; margin-top: -7px; border-radius: 4px; }
|
||
.creation-range-wrap input::-moz-range-track { height: 5px; }
|
||
.creation-range-wrap input::-moz-range-thumb { width: 7px; height: 19px; border-radius: 4px; }
|
||
.creation-range-labels { margin-top: 3px; font-size: 10px; }
|
||
html:not(.dark) .creation-control-popover-surface { background: #fff !important; box-shadow: 0 14px 34px rgba(20, 26, 35, .14) !important; }
|
||
html:not(.dark) .creation-parameter-section h3, html:not(.dark) .creation-duration-menu > div:first-child { color: #7b8490; }
|
||
html:not(.dark) .creation-choice-grid button { color: #4d5661; }
|
||
html:not(.dark) .creation-choice-grid button.is-selected { background: #e8ecf0; color: #20242a; }
|
||
html:not(.dark) .creation-duration-menu strong { color: #20242a; }
|
||
|
||
@keyframes creation-intro-mark {
|
||
0%, 100% { transform: translateY(0) rotate(0deg); opacity: .72; }
|
||
44% { transform: translateY(-3px) rotate(5deg); opacity: 1; }
|
||
}
|
||
@keyframes creation-intro-word {
|
||
0%, 100% { transform: translateY(0); filter: brightness(1); }
|
||
44% { transform: translateY(-2px); filter: brightness(1.18); }
|
||
}
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.creation-chat-intro-mark,
|
||
.creation-chat-headline span {
|
||
animation: none;
|
||
}
|
||
}
|
||
|
||
.creation-thread-stage { width: min(960px, calc(100% - 48px)); padding: 48px 0 28px; }
|
||
.creation-thread-composer { width: min(960px, calc(100% - 48px)); padding: 10px 0 18px; }
|
||
.creation-chat-composer.is-thread .creation-chat-writing-surface { min-height: 76px; padding-top: 12px; }
|
||
.creation-chat-composer.is-thread .creation-chat-editor textarea { min-height: 50px; }
|
||
|
||
.creation-user-message { width: fit-content; max-width: min(70%, 520px); margin: 0 0 34px auto; border-radius: 16px 16px 5px 16px; background: rgba(255, 255, 255, .075); padding: 10px 14px; font-size: 14px; line-height: 1.65; }
|
||
html:not(.dark) .creation-user-message { background: rgba(20, 26, 35, .065); }
|
||
.creation-user-message-attachments { display: flex; gap: 6px; margin-top: 8px; }
|
||
.creation-user-message-attachments img { width: 44px; height: 44px; border-radius: 7px; object-fit: cover; }
|
||
|
||
.creation-assistant-message { max-width: 760px; margin: 0 0 42px; }
|
||
.creation-message-heading { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--creation-muted); font-size: 12px; }
|
||
.creation-message-mark { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; background: #f3f4f6; color: #15171b; }
|
||
.creation-message-mark svg { width: 18px; height: 18px; }
|
||
.creation-message-model { max-width: min(400px, 48vw); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
.creation-message-state { border-radius: 6px; background: rgba(255, 255, 255, .08); padding: 3px 6px; color: var(--creation-muted); }
|
||
.creation-message-state.is-error { background: rgba(185, 61, 61, .18); color: #ec7474; }
|
||
.creation-message-content { padding: 14px 0 0 42px; color: var(--creation-text); font-size: 15px; line-height: 1.8; white-space: pre-wrap; }
|
||
.creation-message-content > span { color: var(--creation-muted); }
|
||
.creation-message-error { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 15px 0 0 42px; color: #ef5350; font-size: 14px; line-height: 1.6; }
|
||
.creation-message-error button { display: inline-flex; align-items: center; gap: 6px; border: 1px solid rgba(255, 255, 255, .13); border-radius: 8px; background: rgba(255, 255, 255, .06); color: var(--creation-text); padding: 6px 9px; font-size: 12px; transition: background-color 140ms ease; }
|
||
.creation-message-error button:hover { background: rgba(255, 255, 255, .11); }
|
||
.creation-message-error button svg { width: 14px; height: 14px; }
|
||
|
||
@media (max-width: 800px) {
|
||
.creation-empty-workspace, .creation-thread-stage, .creation-thread-composer { width: calc(100% - 28px); }
|
||
.creation-empty-workspace { padding-bottom: 5vh; }
|
||
.creation-chat-writing-surface { grid-template-columns: 38px minmax(0, 1fr); gap: 10px; padding: 13px 14px 8px; }
|
||
.creation-chat-reference { width: 38px; height: 38px; border-radius: 11px; }
|
||
.creation-chat-editor textarea { min-height: 68px; font-size: 14px; }
|
||
.creation-chat-dock { align-items: flex-end; padding: 8px 9px 9px 12px; }
|
||
.creation-chat-controls { max-width: calc(100% - 42px); gap: 5px; }
|
||
.creation-chat-control, .creation-chat-composer .creation-model-picker.canvas-composer-model-picker { height: 34px !important; padding: 0 8px !important; font-size: 11px; }
|
||
.creation-chat-composer .creation-model-picker.canvas-composer-model-picker { width: min(152px, 48vw) !important; }
|
||
.creation-chat-submit { width: 36px; height: 36px; }
|
||
.creation-thread-stage { padding-top: 28px; }
|
||
.creation-assistant-message { margin-bottom: 32px; }
|
||
.creation-message-content, .creation-message-error { padding-left: 0; }
|
||
.creation-user-message { max-width: 82%; }
|
||
}
|
||
|
||
@media (min-width: 1024px) {
|
||
.app-workspace-shell.is-spatial {
|
||
gap: 0;
|
||
padding: 0;
|
||
background: var(--workspace-canvas);
|
||
}
|
||
.app-workspace-shell.is-spatial .app-workspace-sidebar {
|
||
width: 88px !important;
|
||
border: 0;
|
||
border-radius: 0;
|
||
background: var(--workspace-canvas);
|
||
box-shadow: none;
|
||
backdrop-filter: none;
|
||
-webkit-backdrop-filter: none;
|
||
}
|
||
.dark .app-workspace-shell.is-spatial .app-workspace-sidebar { box-shadow: none; }
|
||
.app-workspace-shell.is-spatial .app-workspace-stage {
|
||
border-radius: 0;
|
||
background: transparent;
|
||
}
|
||
.app-workspace-shell.is-spatial .app-workspace-sidebar > div:first-child {
|
||
height: 96px;
|
||
border-bottom: 0;
|
||
}
|
||
.app-workspace-shell.is-spatial .app-workspace-sidebar > div:first-child a > span:not(.app-workspace-brand-mark) { display: none; }
|
||
.app-workspace-shell.is-spatial .app-workspace-sidebar .app-workspace-brand-mark {
|
||
width: 34px;
|
||
height: 34px;
|
||
border-radius: 10px;
|
||
background: transparent;
|
||
color: var(--foreground);
|
||
}
|
||
.app-workspace-shell.is-spatial .app-workspace-sidebar nav { padding: 18px 10px; }
|
||
.app-workspace-shell.is-spatial .app-workspace-sidebar nav > div { display: none; }
|
||
.app-workspace-shell.is-spatial .app-workspace-nav-link {
|
||
height: 62px !important;
|
||
flex-direction: column;
|
||
justify-content: center !important;
|
||
gap: 5px !important;
|
||
margin: 0 0 9px;
|
||
padding: 0 !important;
|
||
color: var(--foreground);
|
||
font-size: 10px;
|
||
}
|
||
.app-workspace-shell.is-spatial .app-workspace-nav-link > svg { width: 20px; height: 20px; }
|
||
.app-workspace-shell.is-spatial .app-workspace-nav-link > span { display: block !important; font-size: 10px; line-height: 1.1; }
|
||
.app-workspace-shell.is-spatial .app-workspace-nav-link.is-active { background: transparent; color: var(--foreground); box-shadow: none; }
|
||
.app-workspace-shell.is-spatial .app-workspace-nav-link.is-active::before { display: none; }
|
||
.app-workspace-shell.is-spatial .app-workspace-sidebar > div:last-child { border-top: 0; padding: 12px 10px 18px; }
|
||
}
|
||
|
||
@media (max-width: 800px) {
|
||
.creation-new-button {
|
||
top: 16px;
|
||
right: 16px;
|
||
}
|
||
|
||
.creation-empty-workspace {
|
||
width: calc(100% - 32px);
|
||
padding: 72px 0 36px;
|
||
}
|
||
|
||
.creation-headline {
|
||
max-width: 300px;
|
||
font-size: 24px;
|
||
line-height: 1.35;
|
||
}
|
||
|
||
.creation-empty-composer {
|
||
margin-top: 28px;
|
||
}
|
||
|
||
.creation-prompt-area {
|
||
min-height: 158px;
|
||
grid-template-columns: 50px minmax(0, 1fr);
|
||
gap: 12px;
|
||
padding: 20px 16px 8px;
|
||
}
|
||
|
||
.creation-reference-tile {
|
||
width: 46px;
|
||
height: 62px;
|
||
}
|
||
|
||
.creation-reference-tile span {
|
||
font-size: 9px;
|
||
}
|
||
|
||
.creation-prompt-editor textarea {
|
||
min-height: 96px;
|
||
font-size: 15px;
|
||
}
|
||
|
||
.creation-composer-toolbar {
|
||
align-items: flex-end;
|
||
padding: 8px 12px 12px;
|
||
}
|
||
|
||
.creation-composer-primary-tools {
|
||
max-width: calc(100% - 46px);
|
||
gap: 2px;
|
||
}
|
||
|
||
.creation-chip {
|
||
height: 34px;
|
||
padding: 0 9px;
|
||
}
|
||
|
||
.creation-model-picker.canvas-composer-model-picker {
|
||
width: min(194px, 62vw) !important;
|
||
height: 34px !important;
|
||
}
|
||
|
||
.creation-submit-button {
|
||
width: 38px;
|
||
height: 38px;
|
||
}
|
||
|
||
.creation-inspiration-strip {
|
||
grid-template-columns: 1fr;
|
||
gap: 8px;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.creation-inspiration-strip button {
|
||
height: 66px;
|
||
}
|
||
|
||
.creation-inspiration-strip img {
|
||
width: 48px;
|
||
height: 48px;
|
||
}
|
||
|
||
.creation-settings-panel {
|
||
width: min(440px, calc(100vw - 96px));
|
||
padding: 10px;
|
||
}
|
||
|
||
.creation-model-picker-menu,
|
||
.creation-duration-panel {
|
||
width: min(440px, calc(100vw - 96px)) !important;
|
||
}
|
||
|
||
.creation-settings-section + .creation-settings-section {
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.creation-settings-section h3,
|
||
.creation-duration-panel h3 {
|
||
margin-bottom: 6px;
|
||
font-size: 11px;
|
||
}
|
||
|
||
.creation-segmented-grid.is-ratio {
|
||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||
}
|
||
|
||
.creation-segmented-grid {
|
||
gap: 2px;
|
||
padding: 2px;
|
||
}
|
||
|
||
.creation-segmented-grid.is-ratio button {
|
||
min-height: 42px;
|
||
}
|
||
|
||
.creation-segmented-grid.is-quality,
|
||
.creation-segmented-grid.is-quality {
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
}
|
||
|
||
.creation-segmented-grid.is-quality button {
|
||
min-height: 40px;
|
||
}
|
||
|
||
.creation-segmented-grid.is-quality button small {
|
||
display: none;
|
||
}
|
||
|
||
.creation-segmented-grid.is-count {
|
||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||
}
|
||
|
||
.creation-segmented-grid.is-count button {
|
||
min-height: 36px;
|
||
}
|
||
|
||
.creation-duration-panel {
|
||
padding: 14px;
|
||
}
|
||
|
||
.creation-duration-control {
|
||
grid-template-columns: 1fr;
|
||
gap: 18px;
|
||
}
|
||
|
||
.creation-duration-value {
|
||
height: 50px;
|
||
}
|
||
|
||
.creation-thread-stage,
|
||
.creation-thread-composer {
|
||
width: calc(100% - 24px);
|
||
}
|
||
}
|
||
|
||
@media (max-width: 800px) {
|
||
.creation-empty-workspace {
|
||
width: calc(100% - 16px);
|
||
padding: 0 0 18px;
|
||
}
|
||
|
||
.creation-studio-composer { border-radius: 22px; }
|
||
|
||
.creation-studio-writing-surface {
|
||
min-height: 214px;
|
||
grid-template-columns: 64px minmax(0, 1fr);
|
||
gap: 14px;
|
||
padding: 24px 18px 14px;
|
||
}
|
||
|
||
.creation-studio-reference { width: 58px; height: 76px; }
|
||
.creation-studio-reference svg { width: 19px; height: 19px; }
|
||
.creation-studio-reference span { font-size: 9px; }
|
||
.creation-studio-editor textarea { min-height: 150px; font-size: 14px; }
|
||
|
||
.creation-studio-dock {
|
||
min-height: 0;
|
||
align-items: flex-end;
|
||
gap: 10px;
|
||
padding: 12px 14px 14px 18px;
|
||
}
|
||
|
||
.creation-studio-controls { max-width: calc(100% - 58px); gap: 8px; }
|
||
.creation-studio-control,
|
||
.creation-model-picker.canvas-composer-model-picker { height: 42px !important; border-radius: 12px !important; padding: 0 11px !important; font-size: 12px; }
|
||
.creation-model-picker.canvas-composer-model-picker { width: min(150px, 44vw) !important; }
|
||
.creation-studio-control > svg { width: 16px; height: 16px; }
|
||
.creation-studio-submit { width: 50px; height: 50px; }
|
||
}
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.creation-reference-tile,
|
||
.creation-reference-button,
|
||
.creation-empty-composer,
|
||
.creation-submit-button,
|
||
.creation-results {
|
||
animation: none;
|
||
transition: none;
|
||
}
|
||
}
|
||
.app-workspace-surface {
|
||
border-color: var(--workspace-border);
|
||
background: var(--workspace-surface);
|
||
box-shadow: 0 18px 54px color-mix(in srgb, var(--workspace-canvas) 62%, transparent), inset 0 1px 0 color-mix(in srgb, white 7%, transparent);
|
||
}
|
||
|
||
.credit-balance-card {
|
||
border-color: rgba(225, 185, 74, 0.3);
|
||
background: #11100d;
|
||
color: #f8edc5;
|
||
box-shadow: 0 28px 78px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 228, 145, 0.16);
|
||
}
|
||
|
||
.credit-balance-card::before {
|
||
position: absolute;
|
||
z-index: 1;
|
||
inset: 0;
|
||
border-radius: inherit;
|
||
background-image:
|
||
linear-gradient(to right, rgba(232, 193, 86, 0.055) 1px, transparent 1px),
|
||
linear-gradient(to bottom, rgba(232, 193, 86, 0.055) 1px, transparent 1px);
|
||
background-size: 28px 28px;
|
||
content: "";
|
||
pointer-events: none;
|
||
}
|
||
|
||
.credit-balance-card > * {
|
||
position: relative;
|
||
z-index: 3;
|
||
}
|
||
|
||
.app-collection-card {
|
||
position: relative;
|
||
overflow: hidden;
|
||
border: 1px solid var(--border);
|
||
border-radius: 10px;
|
||
background: var(--workspace-surface-strong);
|
||
transition:
|
||
background-color var(--motion-instant) ease-out,
|
||
border-color var(--motion-instant) ease-out,
|
||
box-shadow var(--motion-instant) ease-out;
|
||
}
|
||
|
||
.app-collection-card:hover,
|
||
.app-collection-card:focus-within {
|
||
border-color: color-mix(in srgb, var(--foreground) 22%, var(--border));
|
||
background: color-mix(in srgb, var(--workspace-surface-strong) 96%, var(--foreground) 4%);
|
||
box-shadow: none;
|
||
}
|
||
|
||
.canvas-library-search {
|
||
max-width: 680px;
|
||
}
|
||
|
||
.canvas-library-page .app-page-header {
|
||
border-bottom: 0;
|
||
padding-bottom: 8px;
|
||
}
|
||
|
||
.canvas-library-toolbar {
|
||
min-height: 56px;
|
||
border: 0;
|
||
border-radius: 8px;
|
||
background: color-mix(in srgb, var(--workspace-surface-strong) 66%, transparent);
|
||
padding: 8px;
|
||
}
|
||
|
||
.canvas-library-grid {
|
||
grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
|
||
align-items: start;
|
||
gap: 20px 16px;
|
||
}
|
||
|
||
.canvas-library-page .app-pagination-bar {
|
||
position: static;
|
||
margin-top: var(--space-4);
|
||
border-color: var(--workspace-border);
|
||
background: transparent;
|
||
padding: var(--space-1-half) var(--space-2);
|
||
backdrop-filter: none;
|
||
}
|
||
|
||
/* 画布文件是单个可点击对象，缩略图与元信息共用一个容器，避免视觉割裂。 */
|
||
.app-canvas-project-card {
|
||
min-width: 0;
|
||
color: var(--foreground);
|
||
}
|
||
|
||
.app-canvas-project-card.is-library {
|
||
border-color: var(--workspace-border);
|
||
background: color-mix(in srgb, var(--workspace-surface-strong) 76%, transparent);
|
||
content-visibility: auto;
|
||
contain-intrinsic-size: 0 260px;
|
||
transition:
|
||
border-color var(--motion-instant) ease-out,
|
||
background-color var(--motion-instant) ease-out,
|
||
box-shadow var(--motion-instant) ease-out,
|
||
transform var(--motion-instant) ease-out;
|
||
}
|
||
|
||
.app-canvas-project-card.is-library .app-canvas-project-preview {
|
||
overflow: hidden;
|
||
border-bottom: 1px solid var(--workspace-border);
|
||
background: var(--workspace-surface-strong);
|
||
}
|
||
|
||
.app-canvas-project-card.is-library:hover,
|
||
.app-canvas-project-card.is-library:focus-within {
|
||
border-color: color-mix(in srgb, var(--foreground) 24%, var(--workspace-border));
|
||
background: color-mix(in srgb, var(--workspace-surface-strong) 90%, transparent);
|
||
box-shadow: 0 10px 28px rgba(15, 23, 42, 0.07);
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
.app-canvas-project-card.is-library.is-selected {
|
||
border-color: var(--workspace-accent);
|
||
box-shadow: 0 0 0 2px color-mix(in srgb, var(--workspace-accent) 22%, transparent);
|
||
}
|
||
|
||
.app-canvas-project-card.is-library .app-canvas-project-body {
|
||
min-height: 82px;
|
||
}
|
||
|
||
.app-canvas-project-card.is-recent .app-canvas-project-preview {
|
||
overflow: hidden;
|
||
border: 1px solid var(--workspace-border);
|
||
border-radius: 8px;
|
||
background: var(--workspace-surface-strong);
|
||
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
|
||
transition:
|
||
border-color var(--motion-instant) ease-out,
|
||
box-shadow var(--motion-instant) ease-out;
|
||
}
|
||
|
||
.app-canvas-project-card.is-recent:hover .app-canvas-project-preview,
|
||
.app-canvas-project-card.is-recent:focus-within .app-canvas-project-preview {
|
||
border-color: color-mix(in srgb, var(--foreground) 24%, var(--workspace-border));
|
||
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
|
||
}
|
||
|
||
.app-canvas-project-checkbox {
|
||
accent-color: var(--workspace-accent);
|
||
}
|
||
|
||
.app-canvas-selection-toolbar {
|
||
border-color: color-mix(in srgb, var(--workspace-accent) 24%, var(--workspace-border));
|
||
background: var(--workspace-accent-soft);
|
||
color: color-mix(in srgb, var(--workspace-accent) 48%, var(--foreground));
|
||
}
|
||
|
||
.dark .app-canvas-project-card.is-library:hover,
|
||
.dark .app-canvas-project-card.is-library:focus-within {
|
||
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.32);
|
||
}
|
||
|
||
.dark .app-canvas-project-card.is-recent .app-canvas-project-preview {
|
||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
|
||
}
|
||
|
||
.dark .app-canvas-project-card.is-recent:hover .app-canvas-project-preview,
|
||
.dark .app-canvas-project-card.is-recent:focus-within .app-canvas-project-preview {
|
||
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.34);
|
||
}
|
||
|
||
@media (max-width: 639px) {
|
||
.canvas-library-search {
|
||
max-width: none;
|
||
}
|
||
|
||
.canvas-library-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
|
||
.app-data-table .ant-table-pagination {
|
||
position: sticky;
|
||
z-index: 10;
|
||
bottom: 0;
|
||
margin: 0 !important;
|
||
border-top: 1px solid var(--border);
|
||
background: color-mix(in srgb, var(--background) 94%, transparent);
|
||
padding: 12px 16px;
|
||
backdrop-filter: blur(12px);
|
||
}
|
||
|
||
.app-list-search {
|
||
width: 100%;
|
||
}
|
||
|
||
@media (min-width: 640px) {
|
||
.app-list-search {
|
||
width: 20rem !important;
|
||
flex: 0 0 20rem;
|
||
}
|
||
}
|
||
|
||
.app-table-surface {
|
||
box-shadow: 0 14px 38px color-mix(in srgb, var(--foreground) 5%, transparent), inset 0 1px 0 color-mix(in srgb, var(--background) 72%, transparent);
|
||
}
|
||
|
||
.app-data-table .ant-table-container,
|
||
.app-data-table .ant-table-content,
|
||
.app-data-table .ant-table-body {
|
||
min-width: 0;
|
||
}
|
||
|
||
.app-data-table .ant-table-thead > tr > th,
|
||
.app-data-table .ant-table-tbody > tr > td {
|
||
overflow: hidden;
|
||
}
|
||
|
||
.app-data-table .ant-table-thead > tr > th {
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.task-table-surface {
|
||
border-radius: 6px;
|
||
box-shadow: none;
|
||
}
|
||
|
||
.task-table-surface .ant-table-thead > tr > th {
|
||
height: 38px;
|
||
padding: 8px 12px !important;
|
||
background: color-mix(in srgb, var(--foreground) 4%, var(--background)) !important;
|
||
color: color-mix(in srgb, var(--foreground) 52%, transparent) !important;
|
||
font-size: 11px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.task-table-surface .ant-table-tbody > tr > td {
|
||
height: 72px;
|
||
padding: 10px 12px !important;
|
||
background: var(--background);
|
||
transition: background-color var(--motion-instant) ease-out;
|
||
}
|
||
|
||
.task-table-surface .ant-table-tbody > tr:hover > td {
|
||
background: color-mix(in srgb, var(--foreground) 2.5%, var(--background)) !important;
|
||
}
|
||
|
||
.task-media-preview-modal .ant-modal-body {
|
||
display: grid;
|
||
min-height: 240px;
|
||
place-items: center;
|
||
padding: 0 !important;
|
||
background: #000;
|
||
}
|
||
|
||
@media (max-width: 767px) {
|
||
.task-table-surface .ant-table-content table {
|
||
width: 100% !important;
|
||
min-width: 100% !important;
|
||
}
|
||
|
||
.task-table-surface .ant-table-tbody > tr > td {
|
||
height: auto;
|
||
padding: 12px !important;
|
||
}
|
||
}
|
||
|
||
.wallet-ledger-table .ant-table-cell:nth-last-child(-n + 2) {
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.app-pagination-bar .ant-pagination {
|
||
display: flex;
|
||
min-width: 0;
|
||
flex-wrap: wrap;
|
||
justify-content: flex-end;
|
||
gap: var(--space-1) 0;
|
||
}
|
||
|
||
:where(.ant-modal-content, .ant-drawer-content) {
|
||
border: 1px solid var(--border);
|
||
box-shadow: 0 28px 84px rgba(15, 23, 42, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
|
||
backdrop-filter: blur(24px);
|
||
}
|
||
|
||
:where(.ant-modal) .ant-modal-content {
|
||
padding: 0;
|
||
overflow: hidden;
|
||
}
|
||
|
||
:where(.ant-modal) .ant-modal-header {
|
||
margin: 0;
|
||
border-bottom: 1px solid var(--border);
|
||
padding: 13px 16px 12px;
|
||
}
|
||
|
||
:where(.ant-modal) .ant-modal-body {
|
||
padding: 14px 16px;
|
||
}
|
||
|
||
:where(.ant-modal) .ant-modal-footer {
|
||
margin: 0;
|
||
border-top: 1px solid var(--border);
|
||
padding: 10px 16px;
|
||
}
|
||
|
||
:where(.ant-modal) .ant-modal-close {
|
||
top: 9px;
|
||
right: 10px;
|
||
}
|
||
|
||
.ant-drawer .ant-drawer-header {
|
||
min-height: 48px;
|
||
padding: 10px 14px;
|
||
}
|
||
|
||
.ant-drawer .ant-drawer-body {
|
||
padding: 14px;
|
||
}
|
||
|
||
.dark :where(.ant-modal-content, .ant-drawer-content) {
|
||
box-shadow: 0 32px 96px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
|
||
}
|
||
|
||
:where(.ant-modal-mask, .ant-drawer-mask) {
|
||
backdrop-filter: blur(5px);
|
||
}
|
||
|
||
/* 画风选择器自身就是完整工作区表面，移除 AntD 外壳避免形成双层厚边。 */
|
||
.canvas-style-picker-modal .ant-modal-container,
|
||
.canvas-style-detail-modal .ant-modal-container {
|
||
overflow: hidden;
|
||
border: var(--stroke-1) solid var(--border) !important;
|
||
border-radius: var(--r-2xl) !important;
|
||
padding: 0 !important;
|
||
background: transparent !important;
|
||
}
|
||
|
||
.canvas-style-picker-modal .ant-modal-body,
|
||
.canvas-style-detail-modal .ant-modal-body {
|
||
padding: 0 !important;
|
||
}
|
||
|
||
.canvas-style-picker-modal .ant-modal-close,
|
||
.canvas-style-detail-modal .ant-modal-close {
|
||
top: var(--space-2);
|
||
right: var(--space-2);
|
||
color: var(--cn-text);
|
||
background: color-mix(in srgb, var(--cn-spatial-elevated) 84%, transparent);
|
||
backdrop-filter: blur(var(--space-2));
|
||
}
|
||
|
||
.canvas-toolbar-settings-modal {
|
||
max-width: calc(100vw - var(--space-8));
|
||
}
|
||
|
||
.canvas-toolbar-settings-modal .ant-modal-container,
|
||
.canvas-toolbar-settings-modal .ant-modal-content {
|
||
overflow: hidden;
|
||
border: 0 !important;
|
||
border-radius: var(--r-xl);
|
||
padding: 0 !important;
|
||
background: var(--cn-spatial-elevated) !important;
|
||
}
|
||
|
||
.canvas-toolbar-settings-modal .ant-modal-content {
|
||
box-shadow: var(--workspace-overlay-shadow) !important;
|
||
}
|
||
|
||
.canvas-toolbar-settings-modal .ant-modal-container {
|
||
box-shadow: none !important;
|
||
}
|
||
|
||
.canvas-toolbar-settings-modal .ant-modal-body {
|
||
padding: 0 !important;
|
||
}
|
||
|
||
.canvas-toolbar-settings-card {
|
||
background: var(--cn-spatial-surface);
|
||
transition: background-color var(--motion-dur-fast) var(--motion-ease-out), opacity var(--motion-dur-fast) var(--motion-ease-out);
|
||
}
|
||
|
||
.canvas-toolbar-settings-card:hover {
|
||
background: color-mix(in srgb, var(--cn-spatial-surface) 72%, var(--cn-spatial-elevated));
|
||
}
|
||
|
||
.canvas-toolbar-settings-card.is-hidden {
|
||
background: color-mix(in srgb, var(--cn-spatial-surface) 52%, transparent);
|
||
}
|
||
|
||
.canvas-toolbar-settings-card.is-hidden .canvas-toolbar-settings-card-content {
|
||
opacity: var(--opa-subtle);
|
||
}
|
||
|
||
.canvas-toolbar-settings-card.is-dragging {
|
||
opacity: var(--opa-muted);
|
||
}
|
||
|
||
:where(.ant-select-dropdown, .ant-dropdown-menu, .ant-popover-inner) {
|
||
border: 1px solid var(--border);
|
||
box-shadow: 0 20px 56px rgba(15, 23, 42, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
|
||
backdrop-filter: blur(22px);
|
||
}
|
||
|
||
.dark :where(.ant-select-dropdown, .ant-dropdown-menu, .ant-popover-inner) {
|
||
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.44), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
|
||
}
|
||
|
||
:where(.ant-input, .ant-input-affix-wrapper, .ant-input-number, .ant-select-content) {
|
||
transition:
|
||
border-color var(--motion-instant) ease-out,
|
||
background-color var(--motion-instant) ease-out,
|
||
box-shadow var(--motion-instant) ease-out !important;
|
||
}
|
||
|
||
.auth-card-tabs .ant-tabs-nav {
|
||
margin: 0;
|
||
}
|
||
|
||
.auth-card-tabs .ant-tabs-nav::before {
|
||
display: none;
|
||
}
|
||
|
||
.auth-card-tabs .ant-tabs-nav-list {
|
||
width: 100%;
|
||
}
|
||
|
||
.auth-card-tabs .ant-tabs-tab {
|
||
position: relative;
|
||
flex: 1;
|
||
justify-content: center;
|
||
margin: 0 !important;
|
||
padding: 8px 0 12px !important;
|
||
color: rgba(255, 255, 255, 0.38);
|
||
font-weight: 500;
|
||
transition: color var(--motion-instant) ease-out;
|
||
}
|
||
|
||
.auth-card-tabs .ant-tabs-tab:hover {
|
||
color: rgba(255, 255, 255, 0.68);
|
||
}
|
||
|
||
.auth-card-tabs .ant-tabs-tab-active::after {
|
||
position: absolute;
|
||
bottom: 3px;
|
||
left: 50%;
|
||
width: 20px;
|
||
height: 2px;
|
||
border-radius: 1px;
|
||
background: rgba(255, 255, 255, 0.82);
|
||
content: "";
|
||
transform: translateX(-50%);
|
||
}
|
||
|
||
.auth-card-tabs .ant-tabs-tab-active .ant-tabs-tab-btn {
|
||
color: rgba(255, 255, 255, 0.94) !important;
|
||
text-shadow: none;
|
||
}
|
||
|
||
.auth-card-tabs .ant-tabs-tab-btn:focus-visible {
|
||
border-radius: 3px;
|
||
outline: 1px solid rgba(255, 255, 255, 0.48);
|
||
outline-offset: 3px;
|
||
}
|
||
|
||
.auth-card-tabs .ant-tabs-ink-bar {
|
||
display: none;
|
||
}
|
||
|
||
.auth-card-dark :where(.ant-input, .ant-input-affix-wrapper) {
|
||
border-color: transparent !important;
|
||
background: rgba(255, 255, 255, 0.055) !important;
|
||
box-shadow: none !important;
|
||
transition: border-color var(--motion-instant) ease-out, background-color var(--motion-instant) ease-out !important;
|
||
}
|
||
|
||
.auth-card-dark .ant-input-affix-wrapper > .ant-input {
|
||
background: transparent !important;
|
||
}
|
||
|
||
.auth-card-dark :where(.ant-input:hover, .ant-input-affix-wrapper:hover) {
|
||
border-color: rgba(255, 255, 255, 0.08) !important;
|
||
background: rgba(255, 255, 255, 0.07) !important;
|
||
}
|
||
|
||
.auth-card-dark :where(.ant-input:focus, .ant-input-focused, .ant-input-affix-wrapper-focused) {
|
||
border-color: transparent !important;
|
||
background: rgba(255, 255, 255, 0.085) !important;
|
||
outline: none !important;
|
||
box-shadow: none !important;
|
||
}
|
||
|
||
.auth-card-dark .ant-input-affix-wrapper-focused .ant-input-prefix svg {
|
||
color: rgba(255, 255, 255, 0.62) !important;
|
||
}
|
||
|
||
.auth-card-dark input:-webkit-autofill,
|
||
.auth-card-dark input:-webkit-autofill:hover,
|
||
.auth-card-dark input:-webkit-autofill:focus {
|
||
box-shadow: 0 0 0 1000px #17181c inset !important;
|
||
-webkit-text-fill-color: #f5f5f5 !important;
|
||
caret-color: #f5f5f5;
|
||
}
|
||
|
||
:where(.ant-modal, .ant-drawer, .ant-select-dropdown, .ant-dropdown, .ant-popover) {
|
||
overscroll-behavior: contain;
|
||
}
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.app-collection-card {
|
||
transition: none;
|
||
}
|
||
.app-collection-card:hover,
|
||
.app-collection-card:focus-within {
|
||
transform: none;
|
||
}
|
||
|
||
:where(.ant-input, .ant-input-affix-wrapper, .ant-input-number, .ant-select-content) {
|
||
transition: none !important;
|
||
}
|
||
}
|
||
|
||
.ant-table-wrapper .ant-table-thead > tr > th {
|
||
font-size: 12px;
|
||
font-weight: 500;
|
||
letter-spacing: 0.015em;
|
||
}
|
||
|
||
.ant-form-item-label > label {
|
||
font-weight: 500;
|
||
letter-spacing: 0.01em;
|
||
}
|
||
|
||
.aceternity-floating-dock {
|
||
isolation: isolate;
|
||
transform-origin: bottom center;
|
||
box-shadow: 0 24px 72px rgba(15, 23, 42, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.16);
|
||
}
|
||
|
||
.aceternity-dock-command {
|
||
border-color: color-mix(in srgb, currentColor 11%, transparent);
|
||
background: var(--dock-command-bg);
|
||
color: inherit;
|
||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 5px 15px rgba(15, 23, 42, 0.08);
|
||
transition:
|
||
border-color var(--motion-instant) ease-out,
|
||
background-color var(--motion-instant) ease-out,
|
||
color var(--motion-instant) ease-out,
|
||
box-shadow var(--motion-instant) ease-out;
|
||
}
|
||
|
||
.aceternity-dock-command > span:first-child svg {
|
||
width: 100%;
|
||
height: 100%;
|
||
stroke-width: 1.8;
|
||
}
|
||
|
||
.aceternity-dock-command:hover:not(:disabled) {
|
||
border-color: color-mix(in srgb, currentColor 20%, transparent);
|
||
background: var(--dock-command-hover);
|
||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 12px 30px rgba(15, 23, 42, 0.14);
|
||
}
|
||
|
||
.aceternity-dock-command.is-labeled {
|
||
border-color: transparent;
|
||
background: transparent;
|
||
box-shadow: none;
|
||
}
|
||
|
||
.aceternity-dock-command.is-labeled:hover:not(:disabled) {
|
||
border-color: transparent;
|
||
background: var(--dock-command-hover);
|
||
box-shadow: none;
|
||
}
|
||
|
||
.aceternity-dock-command.is-labeled.is-active {
|
||
border-color: transparent;
|
||
box-shadow: none;
|
||
}
|
||
|
||
.aceternity-dock-command.is-active {
|
||
border-color: color-mix(in srgb, var(--dock-command-active) 28%, transparent);
|
||
background: var(--dock-command-active);
|
||
color: var(--dock-command-active-text);
|
||
box-shadow: 0 12px 30px color-mix(in srgb, var(--dock-command-active) 22%, transparent);
|
||
}
|
||
|
||
.aceternity-dock-command.is-active > span:first-child,
|
||
.aceternity-dock-command.is-active > span:first-child svg {
|
||
color: var(--dock-command-active-text);
|
||
stroke: currentColor;
|
||
opacity: 1;
|
||
}
|
||
|
||
.aceternity-dock-command.is-quiet {
|
||
border-color: transparent;
|
||
background: transparent;
|
||
box-shadow: none;
|
||
}
|
||
|
||
.aceternity-dock-command.is-quiet:hover:not(:disabled),
|
||
.aceternity-dock-command.is-quiet.is-active {
|
||
border-color: transparent;
|
||
background: var(--dock-command-hover);
|
||
box-shadow: none;
|
||
}
|
||
|
||
.aceternity-dock-command.is-danger {
|
||
color: var(--dock-command-danger);
|
||
}
|
||
|
||
.aceternity-dock-danger-group {
|
||
background: color-mix(in srgb, var(--dock-command-danger) 8%, transparent);
|
||
}
|
||
|
||
.aceternity-dock-command:focus-visible {
|
||
box-shadow: 0 0 0 2px var(--dock-command-bg), 0 0 0 4px var(--dock-command-active);
|
||
}
|
||
|
||
.aceternity-dock-command:disabled {
|
||
cursor: not-allowed;
|
||
opacity: 0.3;
|
||
box-shadow: none;
|
||
}
|
||
|
||
.canvas-image-tool-checkbox .ant-checkbox-inner {
|
||
border-color: color-mix(in srgb, var(--tool-accent) 44%, transparent) !important;
|
||
background: transparent !important;
|
||
}
|
||
|
||
.canvas-image-tool-checkbox.ant-checkbox-wrapper-checked .ant-checkbox-inner,
|
||
.canvas-image-tool-checkbox .ant-checkbox-checked .ant-checkbox-inner {
|
||
border-color: var(--tool-accent) !important;
|
||
background: var(--tool-accent) !important;
|
||
}
|
||
|
||
.aceternity-dock-separator {
|
||
background: color-mix(in srgb, currentColor 13%, transparent);
|
||
}
|
||
|
||
.aceternity-dock-tooltip {
|
||
border-color: var(--dock-tooltip-border);
|
||
background: var(--dock-tooltip-bg);
|
||
color: inherit;
|
||
}
|
||
|
||
.aceternity-floating-panel {
|
||
transform-origin: bottom center;
|
||
box-shadow: 0 30px 90px rgba(15, 23, 42, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.12);
|
||
}
|
||
|
||
.app-workspace-canvas {
|
||
background: var(--workspace-content);
|
||
}
|
||
|
||
.dark .app-workspace-canvas {
|
||
background: var(--workspace-content);
|
||
}
|
||
|
||
.app-spatial-surface {
|
||
border: 1px solid rgba(17, 24, 39, 0.1);
|
||
background: rgba(255, 255, 255, 0.88);
|
||
box-shadow: 0 18px 48px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.72);
|
||
backdrop-filter: blur(22px);
|
||
}
|
||
|
||
.dark .app-spatial-surface {
|
||
border-color: rgba(255, 255, 255, 0.11);
|
||
background: rgba(28, 28, 30, 0.88);
|
||
box-shadow: 0 22px 60px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.07);
|
||
}
|
||
|
||
.app-spatial-interactive {
|
||
transition:
|
||
transform var(--motion-state) cubic-bezier(0.16, 1, 0.3, 1),
|
||
border-color var(--motion-state) ease-out,
|
||
box-shadow var(--motion-state) ease-out;
|
||
}
|
||
|
||
.app-spatial-interactive:hover {
|
||
transform: translateY(-2px);
|
||
border-color: rgba(79, 110, 232, 0.34);
|
||
box-shadow: 0 24px 68px rgba(15, 23, 42, 0.14), 0 0 0 1px rgba(79, 110, 232, 0.08);
|
||
}
|
||
|
||
.dark .app-spatial-interactive:hover {
|
||
border-color: rgba(130, 144, 240, 0.42);
|
||
box-shadow: 0 28px 76px rgba(0, 0, 0, 0.46), 0 0 0 1px rgba(130, 144, 240, 0.1);
|
||
}
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.app-spatial-interactive {
|
||
transition: none;
|
||
}
|
||
|
||
.app-spatial-interactive:hover {
|
||
transform: none;
|
||
}
|
||
}
|
||
|
||
.aceternity-zoom-range {
|
||
appearance: none;
|
||
border-radius: 999px;
|
||
background: color-mix(in srgb, currentColor 12%, transparent);
|
||
cursor: ew-resize;
|
||
outline: none;
|
||
}
|
||
|
||
.aceternity-zoom-range::-webkit-slider-thumb {
|
||
width: 14px;
|
||
height: 14px;
|
||
appearance: none;
|
||
border: 2px solid currentColor;
|
||
border-radius: 999px;
|
||
background: var(--background);
|
||
box-shadow: 0 5px 16px rgba(15, 23, 42, 0.22);
|
||
}
|
||
|
||
.aceternity-zoom-range:focus-visible {
|
||
box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 18%, transparent);
|
||
}
|
||
|
||
.aceternity-comet-perspective[data-comet-active="true"] {
|
||
perspective: 1200px;
|
||
transform-style: preserve-3d;
|
||
}
|
||
|
||
.aceternity-comet-card {
|
||
transform-origin: center center;
|
||
}
|
||
|
||
.aceternity-comet-card[data-comet-active="true"] {
|
||
transform-style: preserve-3d;
|
||
backface-visibility: hidden;
|
||
will-change: transform;
|
||
}
|
||
|
||
.aceternity-comet-card::after {
|
||
position: absolute;
|
||
z-index: 2;
|
||
inset: 0;
|
||
border-radius: inherit;
|
||
background: linear-gradient(145deg, rgba(255, 255, 255, 0.16), transparent 24%, transparent 72%, rgba(255, 255, 255, 0.08));
|
||
content: "";
|
||
pointer-events: none;
|
||
}
|
||
|
||
.aceternity-drop-grid {
|
||
background-image:
|
||
linear-gradient(color-mix(in srgb, currentColor 14%, transparent) 1px, transparent 1px),
|
||
linear-gradient(90deg, color-mix(in srgb, currentColor 14%, transparent) 1px, transparent 1px);
|
||
background-position: center;
|
||
background-size: 34px 34px;
|
||
mask-image: radial-gradient(circle at center, black 12%, transparent 72%);
|
||
}
|
||
|
||
.ai-title-aurora {
|
||
background: linear-gradient(90deg, #111827 0%, #111827 36%, #6b7280 54%, #111827 72%, #111827 100%);
|
||
background-size: 220% 100%;
|
||
-webkit-background-clip: text;
|
||
background-clip: text;
|
||
color: transparent;
|
||
animation: ai-title-aurora 7s var(--motion-ease-in-out) infinite;
|
||
}
|
||
|
||
.dark .ai-title-aurora {
|
||
background: linear-gradient(90deg, #fafaf9 0%, #fafaf9 36%, #a8a29e 54%, #fafaf9 72%, #fafaf9 100%);
|
||
background-size: 220% 100%;
|
||
-webkit-background-clip: text;
|
||
background-clip: text;
|
||
}
|
||
|
||
@keyframes ai-title-aurora {
|
||
0%,
|
||
100% {
|
||
background-position: 0% 50%;
|
||
filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));
|
||
}
|
||
50% {
|
||
background-position: 100% 50%;
|
||
filter: drop-shadow(0 12px 28px rgba(28, 25, 23, 0.08));
|
||
}
|
||
}
|
||
|
||
.hide-scrollbar {
|
||
-ms-overflow-style: none;
|
||
scrollbar-width: none;
|
||
}
|
||
|
||
.hide-scrollbar::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
|
||
.prompt-filter-tag.ant-tag-checkable {
|
||
margin: 0;
|
||
border: 1px solid transparent;
|
||
border-radius: 6px;
|
||
padding: 5px 10px;
|
||
color: #57534e;
|
||
font-size: 14px;
|
||
line-height: 1;
|
||
transition:
|
||
background 0.15s ease,
|
||
border-color 0.15s ease,
|
||
box-shadow 0.15s ease,
|
||
color 0.15s ease;
|
||
}
|
||
|
||
.prompt-filter-tag.ant-tag-checkable:hover {
|
||
background: rgba(28, 25, 23, 0.06);
|
||
color: #1c1917;
|
||
}
|
||
|
||
.prompt-filter-tag.ant-tag-checkable.is-active,
|
||
.prompt-filter-tag.ant-tag-checkable-checked {
|
||
background: #111111;
|
||
border-color: #111111;
|
||
color: #ffffff;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.dark .prompt-filter-tag.ant-tag-checkable {
|
||
color: #e7e5e4;
|
||
}
|
||
|
||
.dark .prompt-filter-tag.ant-tag-checkable:hover {
|
||
background: rgba(255, 255, 255, 0.1);
|
||
color: #ffffff;
|
||
}
|
||
|
||
.dark .prompt-filter-tag.ant-tag-checkable.is-active,
|
||
.dark .prompt-filter-tag.ant-tag-checkable-checked {
|
||
background: rgba(250, 250, 249, 0.96);
|
||
border-color: rgba(255, 255, 255, 0.88);
|
||
box-shadow:
|
||
0 0 0 1px rgba(255, 255, 255, 0.18),
|
||
0 6px 18px rgba(0, 0, 0, 0.22);
|
||
color: #0c0a09 !important;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.thin-scrollbar {
|
||
scrollbar-color: rgba(120, 113, 108, 0.45) transparent;
|
||
scrollbar-width: thin;
|
||
}
|
||
|
||
.script-column-picker {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 6px 12px;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.script-column-picker .ant-checkbox-wrapper {
|
||
margin-inline-start: 0;
|
||
color: inherit;
|
||
}
|
||
|
||
.script-column-picker .ant-checkbox-inner {
|
||
width: 15px;
|
||
height: 15px;
|
||
border-radius: 4px;
|
||
border-color: rgba(120, 113, 108, 0.58);
|
||
background: transparent;
|
||
}
|
||
|
||
.script-column-picker .ant-checkbox-checked .ant-checkbox-inner {
|
||
border-color: #5b6ee1;
|
||
background: #5b6ee1;
|
||
}
|
||
|
||
.script-column-picker .ant-checkbox-checked .ant-checkbox-inner::after {
|
||
width: 4px;
|
||
height: 7px;
|
||
}
|
||
|
||
.script-column-picker .ant-checkbox-wrapper:hover .ant-checkbox-inner,
|
||
.script-column-picker .ant-checkbox:hover .ant-checkbox-inner {
|
||
border-color: #7485ee;
|
||
}
|
||
|
||
.thin-scrollbar::-webkit-scrollbar {
|
||
height: 4px;
|
||
width: 4px;
|
||
}
|
||
|
||
.thin-scrollbar::-webkit-scrollbar-thumb {
|
||
background: rgba(120, 113, 108, 0.45);
|
||
border-radius: 999px;
|
||
}
|
||
|
||
.storyboard-scrollbar {
|
||
overscroll-behavior: contain;
|
||
scrollbar-color: rgba(148, 163, 184, 0.72) rgba(120, 113, 108, 0.14);
|
||
scrollbar-gutter: stable;
|
||
scrollbar-width: auto;
|
||
}
|
||
|
||
.storyboard-scrollbar::-webkit-scrollbar {
|
||
width: 12px;
|
||
}
|
||
|
||
.storyboard-scrollbar::-webkit-scrollbar-track {
|
||
background: rgba(120, 113, 108, 0.14);
|
||
border-left: 1px solid rgba(120, 113, 108, 0.18);
|
||
}
|
||
|
||
.storyboard-scrollbar::-webkit-scrollbar-thumb {
|
||
min-height: 40px;
|
||
border: 2px solid transparent;
|
||
border-radius: 999px;
|
||
background: rgba(148, 163, 184, 0.72);
|
||
background-clip: content-box;
|
||
}
|
||
|
||
.storyboard-scrollbar::-webkit-scrollbar-thumb:hover {
|
||
background: rgba(186, 196, 210, 0.9);
|
||
background-clip: content-box;
|
||
}
|
||
|
||
.hover-scrollbar {
|
||
scrollbar-color: transparent transparent;
|
||
scrollbar-width: thin;
|
||
}
|
||
|
||
.hover-scrollbar:hover {
|
||
scrollbar-color: rgba(120, 113, 108, 0.5) transparent;
|
||
}
|
||
|
||
.hover-scrollbar::-webkit-scrollbar {
|
||
height: 6px;
|
||
width: 6px;
|
||
}
|
||
|
||
.hover-scrollbar::-webkit-scrollbar-thumb {
|
||
background: transparent;
|
||
border-radius: 999px;
|
||
}
|
||
|
||
.hover-scrollbar:hover::-webkit-scrollbar-track {
|
||
background: rgba(120, 113, 108, 0.12);
|
||
border-radius: 999px;
|
||
}
|
||
|
||
.hover-scrollbar:hover::-webkit-scrollbar-thumb {
|
||
background: rgba(120, 113, 108, 0.5);
|
||
}
|
||
|
||
.hover-scrollbar-hint {
|
||
position: relative;
|
||
}
|
||
|
||
.hover-scrollbar-hint::after {
|
||
background: rgba(120, 113, 108, 0.42);
|
||
border-radius: 999px;
|
||
bottom: 4px;
|
||
content: "";
|
||
height: 3px;
|
||
left: 12px;
|
||
opacity: 0;
|
||
pointer-events: none;
|
||
position: absolute;
|
||
right: 12px;
|
||
transition: opacity 0.18s ease;
|
||
}
|
||
|
||
.hover-scrollbar-hint:hover::after {
|
||
opacity: 1;
|
||
}
|
||
|
||
.canvas-control-select.ant-select .ant-select-content,
|
||
.canvas-control-number.ant-input-number {
|
||
border-color: rgba(120, 113, 108, 0.32) !important;
|
||
box-shadow: none !important;
|
||
}
|
||
|
||
.canvas-compact-control.canvas-control-select.ant-select {
|
||
height: 100%;
|
||
}
|
||
|
||
.canvas-compact-control.canvas-control-select.ant-select .ant-select-content,
|
||
.canvas-compact-control.canvas-control-number.ant-input-number {
|
||
height: 100% !important;
|
||
}
|
||
|
||
.canvas-compact-control.canvas-control-select.ant-select .ant-select-content > :first-child {
|
||
align-items: center;
|
||
display: flex;
|
||
}
|
||
|
||
.canvas-compact-control.canvas-control-select.ant-select .ant-select-content,
|
||
.canvas-compact-control.canvas-control-select.ant-select .ant-select-input,
|
||
.canvas-compact-control.canvas-control-number.ant-input-number .ant-input-number-input {
|
||
height: 100% !important;
|
||
line-height: 1 !important;
|
||
}
|
||
|
||
.canvas-composer-icon.ant-btn {
|
||
flex: 0 0 32px;
|
||
width: 32px;
|
||
}
|
||
|
||
.canvas-composer-tools {
|
||
container-type: inline-size;
|
||
}
|
||
|
||
.canvas-composer-mode-button {
|
||
width: 32px;
|
||
}
|
||
|
||
.canvas-composer-tools .canvas-composer-mode-button span,
|
||
.canvas-composer-tools .canvas-model-picker-label > span:nth-child(n + 2),
|
||
.canvas-composer-tools .canvas-composer-icon.ant-btn > span:not(.ant-btn-icon) {
|
||
display: none;
|
||
}
|
||
|
||
.canvas-composer-tools .canvas-composer-model-picker {
|
||
width: 32px;
|
||
min-width: 32px;
|
||
}
|
||
|
||
.canvas-composer-tools .canvas-composer-model-picker {
|
||
padding-inline: 7px !important;
|
||
}
|
||
|
||
.canvas-composer-tools .canvas-model-picker-label {
|
||
min-width: 0;
|
||
}
|
||
|
||
.canvas-composer-model-picker {
|
||
align-items: center;
|
||
appearance: none;
|
||
background: color-mix(in srgb, var(--workspace-surface-strong) 94%, var(--workspace-accent) 6%);
|
||
border: 0;
|
||
border-radius: 9px;
|
||
color: var(--foreground);
|
||
cursor: pointer;
|
||
display: flex;
|
||
font: inherit;
|
||
gap: 8px;
|
||
height: 32px;
|
||
justify-content: space-between;
|
||
line-height: 1;
|
||
max-width: 100%;
|
||
min-width: 0;
|
||
outline: none !important;
|
||
padding: 0 9px;
|
||
text-align: left;
|
||
transition: background-color var(--motion-instant) ease-out, color var(--motion-instant) ease-out;
|
||
}
|
||
|
||
.canvas-composer-model-picker:hover {
|
||
background: color-mix(in srgb, var(--workspace-surface-strong) 88%, var(--workspace-accent) 12%);
|
||
}
|
||
|
||
.canvas-composer-model-picker:focus,
|
||
.canvas-composer-model-picker:focus-visible,
|
||
.canvas-composer-model-picker[aria-expanded="true"] {
|
||
background: color-mix(in srgb, var(--workspace-surface-strong) 84%, var(--workspace-accent) 16%);
|
||
box-shadow: none !important;
|
||
outline: none !important;
|
||
}
|
||
|
||
.canvas-model-picker-label {
|
||
flex: 1 1 auto;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.canvas-model-picker-trigger-icon {
|
||
align-items: center;
|
||
border-radius: 6px;
|
||
display: inline-flex;
|
||
flex: 0 0 22px;
|
||
height: 22px;
|
||
justify-content: center;
|
||
width: 22px;
|
||
}
|
||
|
||
.canvas-model-picker-chevron {
|
||
color: color-mix(in srgb, var(--foreground) 52%, transparent);
|
||
flex: 0 0 14px;
|
||
height: 14px;
|
||
transition: transform var(--motion-instant) ease-out;
|
||
width: 14px;
|
||
}
|
||
|
||
.canvas-model-picker-chevron.is-open {
|
||
transform: rotate(180deg);
|
||
}
|
||
|
||
.canvas-model-picker-popover,
|
||
.canvas-preset-picker-popover {
|
||
filter: none !important;
|
||
}
|
||
|
||
.canvas-composer-popover-surface {
|
||
border: 0 !important;
|
||
border-radius: 10px !important;
|
||
background: var(--workspace-surface-strong) !important;
|
||
box-shadow: 0 14px 38px rgba(0, 0, 0, 0.22) !important;
|
||
overflow: hidden;
|
||
padding: 0 !important;
|
||
backdrop-filter: blur(22px) saturate(118%);
|
||
-webkit-backdrop-filter: blur(22px) saturate(118%);
|
||
}
|
||
|
||
.dark .canvas-composer-popover-surface {
|
||
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.34) !important;
|
||
}
|
||
|
||
.canvas-composer-popover-content {
|
||
padding: 0 !important;
|
||
}
|
||
|
||
.canvas-model-picker-menu {
|
||
max-height: min(420px, calc(100vh - 32px));
|
||
min-width: 0;
|
||
overflow-x: hidden;
|
||
overflow-y: auto;
|
||
padding: 4px;
|
||
}
|
||
|
||
.canvas-model-picker-group + .canvas-model-picker-group {
|
||
border-top: 1px solid var(--workspace-border);
|
||
margin-top: 5px;
|
||
padding-top: 5px;
|
||
}
|
||
|
||
.canvas-model-picker-group-label {
|
||
align-items: center;
|
||
display: flex;
|
||
font-size: 10px;
|
||
font-weight: 600;
|
||
gap: 6px;
|
||
letter-spacing: 0.02em;
|
||
min-width: 0;
|
||
padding: 5px 7px 4px;
|
||
}
|
||
|
||
.canvas-model-picker-option {
|
||
align-items: center;
|
||
border: 0;
|
||
border-radius: 7px;
|
||
cursor: pointer;
|
||
display: flex;
|
||
gap: 8px;
|
||
max-width: 100%;
|
||
min-height: 44px;
|
||
min-width: 0;
|
||
outline: none;
|
||
overflow: hidden;
|
||
padding: 6px 7px;
|
||
text-align: left;
|
||
transition: background-color var(--motion-instant) ease-out;
|
||
width: 100%;
|
||
}
|
||
|
||
.canvas-model-picker-option:hover {
|
||
background: color-mix(in srgb, var(--workspace-accent) 9%, transparent) !important;
|
||
}
|
||
|
||
.canvas-model-picker-option:focus-visible {
|
||
background: color-mix(in srgb, var(--workspace-accent) 13%, transparent) !important;
|
||
outline: none;
|
||
}
|
||
|
||
.canvas-model-picker-option > span:first-child {
|
||
flex: 1 1 auto;
|
||
min-width: 0;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.canvas-model-picker-option-check {
|
||
flex: 0 0 14px;
|
||
height: 14px;
|
||
width: 14px;
|
||
}
|
||
|
||
.canvas-model-picker-empty {
|
||
font-size: 11px;
|
||
padding: 22px 12px;
|
||
text-align: center;
|
||
}
|
||
|
||
.canvas-preset-picker-trigger:focus-visible,
|
||
.canvas-preset-picker-trigger[aria-expanded="true"] {
|
||
background: color-mix(in srgb, var(--workspace-accent) 18%, transparent) !important;
|
||
outline: none;
|
||
}
|
||
|
||
.canvas-preset-picker-trigger {
|
||
cursor: pointer;
|
||
transition: background-color var(--motion-instant) ease-out, color var(--motion-instant) ease-out, transform 90ms ease-out;
|
||
}
|
||
|
||
.canvas-preset-picker-trigger:active {
|
||
transform: scale(0.97);
|
||
}
|
||
|
||
.canvas-generation-settings-trigger.ant-btn {
|
||
background: color-mix(in srgb, var(--workspace-surface-strong) 94%, var(--workspace-accent) 6%) !important;
|
||
border: 0 !important;
|
||
color: var(--foreground) !important;
|
||
cursor: pointer;
|
||
transition: background-color var(--motion-instant) ease-out, color var(--motion-instant) ease-out, transform 90ms ease-out;
|
||
}
|
||
|
||
.canvas-generation-settings-trigger.ant-btn:hover,
|
||
.canvas-generation-settings-trigger.ant-btn:focus-visible,
|
||
.canvas-generation-settings-trigger.ant-btn[aria-expanded="true"] {
|
||
background: color-mix(in srgb, var(--workspace-surface-strong) 86%, var(--workspace-accent) 14%) !important;
|
||
box-shadow: none !important;
|
||
outline: none !important;
|
||
}
|
||
|
||
.canvas-generation-settings-trigger.ant-btn .ant-btn-icon {
|
||
color: color-mix(in srgb, var(--workspace-accent) 72%, var(--foreground));
|
||
}
|
||
|
||
html:not(.dark) .canvas-composer-model-picker,
|
||
html:not(.dark) .canvas-generation-settings-trigger.ant-btn {
|
||
background: rgba(15, 23, 42, 0.045) !important;
|
||
color: #1f2937 !important;
|
||
}
|
||
|
||
html:not(.dark) .canvas-composer-model-picker:hover,
|
||
html:not(.dark) .canvas-composer-model-picker[aria-expanded="true"],
|
||
html:not(.dark) .canvas-generation-settings-trigger.ant-btn:hover,
|
||
html:not(.dark) .canvas-generation-settings-trigger.ant-btn:focus-visible,
|
||
html:not(.dark) .canvas-generation-settings-trigger.ant-btn[aria-expanded="true"] {
|
||
background: rgba(15, 23, 42, 0.075) !important;
|
||
}
|
||
|
||
html:not(.dark) .canvas-generation-cost-badge {
|
||
background: rgba(79, 110, 232, 0.09) !important;
|
||
color: #4f6ee8 !important;
|
||
}
|
||
|
||
.canvas-preset-picker-menu {
|
||
padding: 6px;
|
||
}
|
||
|
||
.canvas-preset-picker-search.ant-input-affix-wrapper {
|
||
border: 0 !important;
|
||
border-radius: 8px;
|
||
background: color-mix(in srgb, var(--workspace-accent) 7%, transparent) !important;
|
||
box-shadow: none !important;
|
||
color: color-mix(in srgb, var(--foreground) 66%, transparent);
|
||
height: 32px;
|
||
padding-inline: 9px;
|
||
}
|
||
|
||
.canvas-preset-picker-search.ant-input-affix-wrapper:focus,
|
||
.canvas-preset-picker-search.ant-input-affix-wrapper:focus-within {
|
||
background: color-mix(in srgb, var(--workspace-accent) 11%, transparent) !important;
|
||
box-shadow: none !important;
|
||
}
|
||
|
||
.canvas-preset-picker-option {
|
||
align-items: center;
|
||
background: transparent;
|
||
border: 0;
|
||
border-radius: 7px;
|
||
cursor: pointer;
|
||
display: flex;
|
||
gap: 9px;
|
||
min-height: 48px;
|
||
outline: none;
|
||
padding: 6px 8px;
|
||
text-align: left;
|
||
transition: background-color var(--motion-instant) ease-out;
|
||
width: 100%;
|
||
}
|
||
|
||
.canvas-preset-picker-option:hover,
|
||
.canvas-preset-picker-option:focus-visible {
|
||
background: color-mix(in srgb, var(--workspace-accent) 9%, transparent);
|
||
outline: none;
|
||
}
|
||
|
||
.canvas-preset-picker-option-icon {
|
||
align-items: center;
|
||
border-radius: 7px;
|
||
display: inline-flex;
|
||
flex: 0 0 28px;
|
||
height: 28px;
|
||
justify-content: center;
|
||
width: 28px;
|
||
}
|
||
|
||
body.app-spatial-overlays .canvas-composer-popover-surface {
|
||
border: 0 !important;
|
||
background: var(--workspace-surface-strong) !important;
|
||
}
|
||
|
||
html:not(.dark) body.app-spatial-overlays .canvas-composer-popover-surface {
|
||
background: #ffffff !important;
|
||
box-shadow: 0 14px 34px rgba(15, 23, 42, 0.13) !important;
|
||
}
|
||
|
||
.dark body.app-spatial-overlays .canvas-composer-popover-surface {
|
||
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3) !important;
|
||
}
|
||
|
||
.agent-text-model-select .ant-select-content {
|
||
padding-inline: 6px !important;
|
||
}
|
||
|
||
.agent-text-model-select .ant-select-content {
|
||
min-width: 0;
|
||
}
|
||
|
||
@container (min-width: 440px) {
|
||
.canvas-composer-mode-button {
|
||
padding-inline: 8px;
|
||
width: auto;
|
||
}
|
||
|
||
.canvas-composer-tools .canvas-composer-mode-button span {
|
||
display: inline;
|
||
font-size: 12px;
|
||
line-height: 1;
|
||
}
|
||
|
||
.canvas-composer-icon.ant-btn {
|
||
flex: 0 1 auto;
|
||
max-width: 170px;
|
||
width: auto !important;
|
||
}
|
||
|
||
.canvas-composer-tools .canvas-composer-icon.ant-btn > span:not(.ant-btn-icon) {
|
||
display: inline-flex;
|
||
min-width: 0;
|
||
}
|
||
|
||
.canvas-composer-tools .canvas-composer-model-picker {
|
||
width: auto;
|
||
min-width: 9rem;
|
||
}
|
||
|
||
.canvas-composer-tools .canvas-composer-model-picker {
|
||
padding-inline: 10px !important;
|
||
}
|
||
|
||
.canvas-composer-tools .canvas-model-picker-label > span:nth-child(n + 2) {
|
||
display: inline-flex;
|
||
}
|
||
}
|
||
|
||
.canvas-control-select.ant-select-focused .ant-select-content,
|
||
.canvas-control-number.ant-input-number-focused {
|
||
border-color: #a8a29e !important;
|
||
}
|
||
|
||
.dark .canvas-control-select.ant-select .ant-select-content,
|
||
.dark .canvas-control-number.ant-input-number {
|
||
border-color: rgba(214, 211, 209, 0.2) !important;
|
||
}
|
||
|
||
.dark .canvas-control-select.ant-select-focused .ant-select-content,
|
||
.dark .canvas-control-number.ant-input-number-focused {
|
||
border-color: #78716c !important;
|
||
}
|
||
|
||
.canvas-image-settings-popover .ant-popover-inner {
|
||
border-radius: 18px;
|
||
box-shadow: 0 18px 54px rgba(28, 25, 23, 0.16);
|
||
padding: 18px;
|
||
}
|
||
|
||
.canvas-image-settings-popover .ant-popover-inner-content {
|
||
max-height: calc(100vh - 96px);
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.canvas-image-settings-popover .ant-segmented {
|
||
border-radius: 999px;
|
||
padding: 3px;
|
||
}
|
||
|
||
.canvas-image-settings-popover .ant-segmented-item {
|
||
border-radius: 999px;
|
||
}
|
||
|
||
.dark .canvas-image-settings-popover .ant-popover-inner {
|
||
box-shadow: 0 18px 54px rgba(0, 0, 0, 0.45);
|
||
}
|
||
|
||
.canvas-floating-dock,
|
||
.canvas-floating-panel,
|
||
.canvas-node-toolbar {
|
||
animation: canvas-panel-in var(--motion-dur-fast-calc) var(--motion-ease-out) both;
|
||
}
|
||
|
||
/* 覆盖工具栏与节点之间的视觉留白，避免鼠标途中被相邻节点抢走悬浮状态。 */
|
||
.canvas-node-toolbar::after {
|
||
position: absolute;
|
||
top: 100%;
|
||
right: -8px;
|
||
left: -8px;
|
||
height: 14px;
|
||
content: "";
|
||
}
|
||
|
||
.canvas-floating-dock {
|
||
box-shadow:
|
||
0 1px 2px rgba(15, 23, 42, 0.06),
|
||
0 10px 26px rgba(15, 23, 42, 0.08);
|
||
}
|
||
|
||
.dark .canvas-floating-dock {
|
||
box-shadow:
|
||
0 1px 1px rgba(0, 0, 0, 0.28),
|
||
0 12px 28px rgba(0, 0, 0, 0.3);
|
||
}
|
||
|
||
.canvas-floating-panel {
|
||
box-shadow:
|
||
0 1px 2px rgba(15, 23, 42, 0.06),
|
||
0 14px 34px rgba(15, 23, 42, 0.1);
|
||
}
|
||
|
||
@media (max-width: 1024px) {
|
||
.aceternity-mode-switch {
|
||
top: 56px;
|
||
}
|
||
}
|
||
|
||
.dark .canvas-floating-panel {
|
||
box-shadow:
|
||
0 1px 1px rgba(0, 0, 0, 0.28),
|
||
0 14px 34px rgba(0, 0, 0, 0.34);
|
||
}
|
||
|
||
.canvas-tool-button,
|
||
.canvas-menu-item,
|
||
.canvas-node-tool-button {
|
||
transform: translate3d(0, 0, 0) scale(1);
|
||
transition:
|
||
background-color 140ms ease,
|
||
color 140ms ease,
|
||
opacity 140ms ease,
|
||
box-shadow 140ms ease,
|
||
transform 160ms var(--motion-ease-out);
|
||
}
|
||
|
||
.canvas-connection-handle {
|
||
touch-action: none;
|
||
}
|
||
|
||
@media (pointer: coarse) {
|
||
.canvas-connection-handle {
|
||
width: 44px !important;
|
||
height: 44px !important;
|
||
}
|
||
}
|
||
|
||
.canvas-tool-button:not(:disabled):hover,
|
||
.canvas-node-tool-button:not(:disabled):hover {
|
||
transform: translate3d(0, -1px, 0) scale(1.04);
|
||
}
|
||
|
||
.canvas-tool-button:not(:disabled):active,
|
||
.canvas-node-tool-button:not(:disabled):active,
|
||
.canvas-menu-item:not(:disabled):active {
|
||
transform: translate3d(0, 0, 0) scale(0.94);
|
||
}
|
||
|
||
.canvas-menu-item:not(:disabled):hover {
|
||
transform: translate3d(4px, 0, 0);
|
||
}
|
||
|
||
.canvas-menu-item:not(:disabled):hover .canvas-menu-item-icon,
|
||
.canvas-node-tool-button:not(:disabled):hover .canvas-node-tool-icon {
|
||
transform: scale(1.08);
|
||
}
|
||
|
||
.canvas-menu-item-icon,
|
||
.canvas-node-tool-icon {
|
||
transition: transform 160ms var(--motion-ease-out);
|
||
}
|
||
|
||
.canvas-node-shell {
|
||
transition:
|
||
border-color 160ms ease,
|
||
box-shadow 160ms ease,
|
||
background-color 160ms ease;
|
||
}
|
||
|
||
.canvas-node-shell.aceternity-comet-card {
|
||
box-shadow: 0 18px 48px rgba(15, 23, 42, 0.1), 0 2px 6px rgba(15, 23, 42, 0.06);
|
||
}
|
||
|
||
.canvas-node-shell.aceternity-comet-card:hover {
|
||
box-shadow: 0 30px 80px rgba(15, 23, 42, 0.18), 0 6px 20px rgba(15, 23, 42, 0.1);
|
||
}
|
||
|
||
.dark .canvas-node-shell.aceternity-comet-card {
|
||
box-shadow: 0 22px 60px rgba(0, 0, 0, 0.34), 0 2px 8px rgba(0, 0, 0, 0.3);
|
||
}
|
||
|
||
.dark .canvas-node-shell.aceternity-comet-card:hover {
|
||
box-shadow: 0 34px 90px rgba(0, 0, 0, 0.52), 0 8px 26px rgba(0, 0, 0, 0.36);
|
||
}
|
||
|
||
[data-canvas-viewport-interacting="true"] .canvas-node-shell,
|
||
[data-canvas-viewport-interacting="true"] .aceternity-comet-card {
|
||
transition: none !important;
|
||
}
|
||
|
||
/* 静止期用最终倍率重新排版 DOM，避免 Windows Chromium 复用交互期的低分辨率合成纹理。 */
|
||
.canvas-world-layer {
|
||
transform: translate(var(--canvas-live-x), var(--canvas-live-y)) scale(var(--canvas-live-scale-ratio));
|
||
transform-origin: 0 0;
|
||
}
|
||
|
||
.canvas-world-raster-layer {
|
||
zoom: var(--canvas-committed-scale);
|
||
}
|
||
|
||
[data-canvas-viewport-interacting="true"] .canvas-world-layer {
|
||
transform: translate3d(var(--canvas-live-x), var(--canvas-live-y), 0) scale(var(--canvas-live-scale-ratio));
|
||
will-change: transform;
|
||
}
|
||
|
||
[data-canvas-viewport-interacting="true"] .canvas-node-shell.aceternity-comet-card,
|
||
[data-canvas-viewport-interacting="true"] .canvas-node-shell.aceternity-comet-card:hover {
|
||
box-shadow: none !important;
|
||
}
|
||
|
||
[data-canvas-viewport-interacting="true"] :where(.canvas-node-shell-generating::before, .canvas-connection-flow, .canvas-connection-draft) {
|
||
animation: none !important;
|
||
}
|
||
|
||
/* 节点状态徽章 success 淡出动画（对应 #97 决策2）*/
|
||
@keyframes canvas-status-success-fade {
|
||
0% { opacity: 1; transform: scale(1); }
|
||
70% { opacity: 1; transform: scale(1); }
|
||
100% { opacity: 0; transform: scale(0.9); }
|
||
}
|
||
|
||
/* 任务进度条 shimmer 扫描动画（对应 #98 决策3）*/
|
||
@keyframes canvas-task-progress-shimmer {
|
||
0% { transform: translateX(-100%); }
|
||
100% { transform: translateX(200%); }
|
||
}
|
||
.canvas-task-progress-shimmer {
|
||
animation: canvas-task-progress-shimmer 1.4s linear infinite;
|
||
}
|
||
|
||
.canvas-node-shell-generating::before {
|
||
position: absolute;
|
||
z-index: 45;
|
||
inset: -1.5px;
|
||
padding: 1px;
|
||
border-radius: 19px;
|
||
background: linear-gradient(110deg, rgba(91, 110, 225, 0.66), rgba(96, 165, 250, 0.62), rgba(167, 139, 250, 0.58), rgba(244, 114, 182, 0.54), rgba(250, 204, 21, 0.5), rgba(52, 211, 153, 0.58), rgba(91, 110, 225, 0.66));
|
||
background-size: 300% 100%;
|
||
content: "";
|
||
filter: drop-shadow(0 0 3px rgba(96, 165, 250, 0.2));
|
||
pointer-events: none;
|
||
animation: canvas-generation-border-flow 2.4s var(--motion-ease-linear) infinite;
|
||
-webkit-mask:
|
||
linear-gradient(#000 0 0) content-box,
|
||
linear-gradient(#000 0 0);
|
||
-webkit-mask-composite: xor;
|
||
mask-composite: exclude;
|
||
}
|
||
|
||
.dark .canvas-node-shell-generating::before {
|
||
filter: drop-shadow(0 0 4px rgba(91, 110, 225, 0.22));
|
||
}
|
||
|
||
.canvas-connection-flow {
|
||
animation: canvas-connection-flow 1.25s var(--motion-ease-linear) infinite;
|
||
}
|
||
|
||
.canvas-connection-draft {
|
||
animation: canvas-connection-flow 0.9s var(--motion-ease-linear) infinite;
|
||
}
|
||
|
||
@keyframes canvas-panel-in {
|
||
from {
|
||
opacity: 0;
|
||
filter: saturate(0.92);
|
||
}
|
||
|
||
to {
|
||
opacity: 1;
|
||
filter: saturate(1);
|
||
}
|
||
}
|
||
|
||
@keyframes canvas-connection-flow {
|
||
to {
|
||
stroke-dashoffset: -44;
|
||
}
|
||
}
|
||
|
||
@keyframes canvas-generation-border-flow {
|
||
to {
|
||
background-position: 300% 0;
|
||
}
|
||
}
|
||
|
||
.canvas-node-info-modal .ant-modal-header {
|
||
padding-right: 0;
|
||
}
|
||
|
||
.canvas-node-info-modal .ant-modal-title {
|
||
line-height: 1;
|
||
}
|
||
|
||
.canvas-node-info-modal .ant-modal-close {
|
||
top: 21px;
|
||
}
|
||
|
||
@keyframes canvas-batch-child-in {
|
||
from {
|
||
opacity: 0;
|
||
transform: translate(var(--batch-from-x), var(--batch-from-y)) rotate(var(--batch-from-rotate)) scale(0.72);
|
||
}
|
||
|
||
72% {
|
||
opacity: 1;
|
||
transform: translate(0, 0) rotate(-1deg) scale(1.015);
|
||
}
|
||
|
||
to {
|
||
opacity: 1;
|
||
transform: translate(0, 0) rotate(0) scale(1);
|
||
}
|
||
}
|
||
|
||
@keyframes canvas-batch-child-out {
|
||
from {
|
||
opacity: 1;
|
||
transform: translate(0, 0) rotate(0) scale(1);
|
||
}
|
||
|
||
to {
|
||
opacity: 0;
|
||
transform: translate(var(--batch-from-x), var(--batch-from-y)) rotate(var(--batch-from-rotate)) scale(0.72);
|
||
}
|
||
}
|
||
}
|
||
|
||
@keyframes workspace-state-enter {
|
||
from { opacity: 0; transform: translateY(6px); }
|
||
to { opacity: 1; transform: translateY(0); }
|
||
}
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.workspace-state { animation: none; }
|
||
:where(.ant-btn:not(:disabled)):active { transform: none; }
|
||
}
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.aceternity-comet-card,
|
||
.aceternity-dock-command,
|
||
.aceternity-floating-panel,
|
||
.canvas-menu-item {
|
||
transform: none !important;
|
||
transition-duration: 0.01ms !important;
|
||
}
|
||
|
||
.canvas-node-shell-generating::before,
|
||
.canvas-connection-flow,
|
||
.canvas-connection-draft {
|
||
animation: none;
|
||
}
|
||
|
||
.canvas-node-shell-generating::before {
|
||
background-position: 50% 0;
|
||
}
|
||
}
|
||
|
||
/* 章节编辑区用清晰边界区分工具栏与正文，同时保留连续写作空间。 */
|
||
.project-workbench-page .project-chapter-editor-wrap {
|
||
min-height: 100%;
|
||
}
|
||
|
||
.project-chapter-editor {
|
||
min-height: 100%;
|
||
width: 100%;
|
||
padding: 24px 28px 48px;
|
||
color: var(--foreground);
|
||
font-size: 15px;
|
||
line-height: 1.8;
|
||
}
|
||
|
||
.project-chapter-editor p {
|
||
margin: 0 0 1em;
|
||
}
|
||
|
||
.project-chapter-editor h1,
|
||
.project-chapter-editor h2,
|
||
.project-chapter-editor h3 {
|
||
margin: 1.35em 0 0.55em;
|
||
font-weight: 650;
|
||
line-height: 1.3;
|
||
letter-spacing: -0.02em;
|
||
}
|
||
|
||
.project-chapter-editor h1 { font-size: 1.55em; }
|
||
.project-chapter-editor h2 { font-size: 1.3em; }
|
||
.project-chapter-editor h3 { font-size: 1.12em; }
|
||
|
||
.project-chapter-editor ul,
|
||
.project-chapter-editor ol {
|
||
margin: 0 0 1em;
|
||
padding-left: 1.4em;
|
||
}
|
||
|
||
.project-chapter-editor blockquote {
|
||
margin: 1.2em 0;
|
||
border-left: 2px solid color-mix(in srgb, var(--workspace-accent) 55%, transparent);
|
||
padding-left: 1em;
|
||
color: color-mix(in srgb, var(--foreground) 66%, transparent);
|
||
}
|
||
|
||
.project-chapter-editor p.is-editor-empty:first-child::before {
|
||
float: left;
|
||
height: 0;
|
||
color: color-mix(in srgb, var(--foreground) 34%, transparent);
|
||
content: attr(data-placeholder);
|
||
pointer-events: none;
|
||
}
|
||
|
||
@media (max-width: 1023px) {
|
||
.project-workbench-page .project-chapter-editor-wrap {
|
||
min-height: 100%;
|
||
}
|
||
|
||
.project-chapter-editor {
|
||
min-height: 420px;
|
||
padding: 18px 20px 36px;
|
||
font-size: 15px;
|
||
}
|
||
}
|
||
|
||
::view-transition-old(root),
|
||
::view-transition-new(root) {
|
||
animation: none;
|
||
mix-blend-mode: normal;
|
||
}
|
||
|
||
html[data-theme-switching="true"] :where(.canvas-node-shell, .aceternity-comet-card, .aceternity-floating-panel, .canvas-connection-flow, .canvas-connection-draft) {
|
||
animation: none !important;
|
||
transition: none !important;
|
||
}
|
||
|
||
/* 创作页是工作舞台，不使用管理台的边框、卡片和分段控件语言。 */
|
||
.creation-home {
|
||
--creation-accent: var(--workspace-accent);
|
||
--creation-bg: var(--workspace-page);
|
||
--creation-surface: #191b20;
|
||
--creation-surface-raised: #22252b;
|
||
--creation-text: #f2f3f4;
|
||
--creation-muted: #838991;
|
||
--creation-faint: #555b64;
|
||
min-width: 0;
|
||
background: var(--creation-bg);
|
||
color: var(--creation-text);
|
||
}
|
||
|
||
.creation-scrollbar {
|
||
scrollbar-color: rgba(255, 255, 255, .22) transparent;
|
||
scrollbar-gutter: stable;
|
||
scrollbar-width: auto;
|
||
}
|
||
|
||
.creation-scrollbar::-webkit-scrollbar { width: 10px; }
|
||
.creation-scrollbar::-webkit-scrollbar-track { background: transparent; }
|
||
.creation-scrollbar::-webkit-scrollbar-thumb {
|
||
border: 3px solid transparent;
|
||
border-radius: 999px;
|
||
background: rgba(255, 255, 255, .22);
|
||
background-clip: content-box;
|
||
}
|
||
.creation-scrollbar::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, .34); }
|
||
|
||
html:not(.dark) .creation-scrollbar {
|
||
scrollbar-color: rgba(35, 41, 49, .24) transparent;
|
||
}
|
||
html:not(.dark) .creation-scrollbar::-webkit-scrollbar-thumb { background-color: rgba(35, 41, 49, .24); }
|
||
html:not(.dark) .creation-scrollbar::-webkit-scrollbar-thumb:hover { background-color: rgba(35, 41, 49, .38); }
|
||
|
||
html:not(.dark) .creation-home {
|
||
--creation-bg: var(--workspace-page);
|
||
--creation-surface: #ffffff;
|
||
--creation-surface-raised: #f0f1ee;
|
||
--creation-text: #1d2024;
|
||
--creation-muted: #7c838b;
|
||
--creation-faint: #b5babf;
|
||
}
|
||
|
||
.creation-empty-workspace {
|
||
width: min(1000px, calc(100% - 56px));
|
||
min-height: 100%;
|
||
margin: 0 auto;
|
||
padding: 0 0 5vh;
|
||
}
|
||
|
||
.creation-empty-composer {
|
||
width: 100%;
|
||
margin: 0;
|
||
animation: creation-composer-arrive var(--motion-dur-slow-calc) var(--motion-ease-out) both;
|
||
}
|
||
|
||
.creation-chat-composer {
|
||
width: 100%;
|
||
overflow: hidden;
|
||
border: 0;
|
||
border-radius: 16px;
|
||
background: var(--creation-surface);
|
||
box-shadow: 0 20px 58px rgba(0, 0, 0, .15);
|
||
}
|
||
|
||
html:not(.dark) .creation-chat-composer {
|
||
box-shadow: 0 18px 48px rgba(30, 34, 38, .08);
|
||
}
|
||
|
||
.creation-chat-composer:focus-within { box-shadow: 0 20px 58px rgba(0, 0, 0, .18); }
|
||
|
||
.creation-chat-writing-surface,
|
||
.creation-chat-composer.is-empty .creation-chat-writing-surface {
|
||
display: grid;
|
||
min-height: 88px;
|
||
grid-template-columns: 34px minmax(0, 1fr);
|
||
gap: 12px;
|
||
padding: 16px 18px 6px;
|
||
}
|
||
|
||
.creation-chat-reference,
|
||
.creation-chat-reference.is-paper {
|
||
display: grid;
|
||
width: 32px;
|
||
height: 32px;
|
||
place-items: center;
|
||
align-self: start;
|
||
border: 0;
|
||
border-radius: 8px;
|
||
background: transparent;
|
||
color: var(--creation-muted);
|
||
box-shadow: none;
|
||
transform: none;
|
||
transition: color 140ms ease, background-color 140ms ease, transform 140ms var(--motion-ease-out);
|
||
}
|
||
|
||
.creation-chat-reference svg,
|
||
.creation-chat-reference.is-paper svg { width: 17px; height: 17px; }
|
||
.creation-chat-reference.is-paper span { display: none; }
|
||
.creation-chat-reference:hover:not(:disabled),
|
||
.creation-chat-reference.is-paper:hover:not(:disabled) { background: rgba(255, 255, 255, .07); color: var(--creation-text); transform: translateY(-1px); }
|
||
html:not(.dark) .creation-chat-reference:hover:not(:disabled) { background: rgba(28, 32, 36, .06); }
|
||
|
||
.creation-chat-editor textarea {
|
||
display: block;
|
||
width: 100%;
|
||
min-height: 60px;
|
||
border: 0;
|
||
outline: 0;
|
||
background: transparent;
|
||
color: var(--creation-text);
|
||
font-size: 14px;
|
||
line-height: 1.65;
|
||
}
|
||
|
||
.creation-chat-editor textarea::placeholder { color: var(--creation-muted); opacity: .72; }
|
||
|
||
.creation-chat-mention-container { min-height: 76px; }
|
||
.creation-chat-mention-editor {
|
||
display: block;
|
||
width: 100%;
|
||
min-height: 76px;
|
||
max-height: 220px;
|
||
overflow-y: auto;
|
||
border: 0;
|
||
outline: 0;
|
||
background: transparent;
|
||
color: var(--creation-text);
|
||
font-size: 14px;
|
||
line-height: 1.65;
|
||
resize: none;
|
||
}
|
||
|
||
.creation-chat-mention-editor:empty::before { color: var(--creation-muted); opacity: .72; }
|
||
.creation-chat-mention-editor[aria-disabled="true"],
|
||
.creation-chat-mention-editor:disabled { cursor: wait; opacity: .55; }
|
||
|
||
.creation-chat-dock {
|
||
display: flex;
|
||
min-height: 46px;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 12px;
|
||
padding: 4px 10px 10px 14px;
|
||
}
|
||
|
||
.creation-chat-controls {
|
||
display: flex;
|
||
min-width: 0;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
gap: 2px;
|
||
}
|
||
|
||
.creation-chat-control,
|
||
.creation-chat-composer .creation-model-picker.canvas-composer-model-picker {
|
||
display: inline-flex;
|
||
height: 30px !important;
|
||
min-width: 0;
|
||
align-items: center;
|
||
gap: 5px;
|
||
border: 0 !important;
|
||
border-radius: 7px !important;
|
||
background: transparent !important;
|
||
color: var(--creation-muted) !important;
|
||
padding: 0 8px !important;
|
||
font-size: 11px;
|
||
font-weight: 500;
|
||
box-shadow: none !important;
|
||
transition: color 140ms ease, background-color 140ms ease, transform 140ms var(--motion-ease-out);
|
||
}
|
||
|
||
.creation-chat-control:hover,
|
||
.creation-chat-control[aria-expanded="true"],
|
||
.creation-chat-composer .creation-model-picker.canvas-composer-model-picker:hover,
|
||
.creation-chat-composer .creation-model-picker.canvas-composer-model-picker[aria-expanded="true"] {
|
||
border: 0 !important;
|
||
background: rgba(255, 255, 255, .075) !important;
|
||
color: var(--creation-text) !important;
|
||
transform: none;
|
||
}
|
||
|
||
.creation-chat-control.is-mode {
|
||
background: rgba(255, 255, 255, .075) !important;
|
||
color: var(--creation-text) !important;
|
||
}
|
||
|
||
.creation-chat-control > svg { width: 14px; height: 14px; }
|
||
.creation-chat-control > svg:last-child { width: 12px; height: 12px; color: var(--creation-faint); }
|
||
.creation-chat-composer .creation-model-picker.canvas-composer-model-picker { width: min(180px, 30vw) !important; justify-content: flex-start; }
|
||
.creation-chat-composer .creation-model-picker .canvas-model-picker-trigger-icon { width: 16px; height: 16px; border-radius: 4px; background: transparent !important; }
|
||
|
||
html:not(.dark) .creation-chat-control,
|
||
html:not(.dark) .creation-chat-composer .creation-model-picker.canvas-composer-model-picker { background: transparent !important; color: var(--creation-muted) !important; }
|
||
html:not(.dark) .creation-chat-control.is-mode,
|
||
html:not(.dark) .creation-chat-control:hover,
|
||
html:not(.dark) .creation-chat-composer .creation-model-picker.canvas-composer-model-picker:hover { background: rgba(29, 33, 37, .06) !important; color: var(--creation-text) !important; }
|
||
|
||
.creation-chat-submit {
|
||
display: grid;
|
||
width: 32px;
|
||
height: 32px;
|
||
flex: 0 0 auto;
|
||
place-items: center;
|
||
border: 0;
|
||
border-radius: 9px;
|
||
background: #f3f4f5;
|
||
color: #1b1d21;
|
||
cursor: pointer;
|
||
transition: transform 140ms var(--motion-ease-out), background-color 140ms ease;
|
||
}
|
||
|
||
.creation-chat-submit:hover:not(:disabled) { background: #fff; transform: translateY(-1px); }
|
||
.creation-chat-submit:disabled { background: #292d34; color: #606771; cursor: not-allowed; }
|
||
.creation-chat-submit.is-stopping { background: #d06060; color: #fff; }
|
||
html:not(.dark) .creation-chat-submit { background: #202328; color: #fff; }
|
||
html:not(.dark) .creation-chat-submit:hover:not(:disabled) { background: #2d3139; }
|
||
|
||
.creation-control-popover-surface,
|
||
.creation-model-picker-surface {
|
||
overflow: hidden;
|
||
border: 0 !important;
|
||
border-radius: 10px !important;
|
||
background: rgba(30, 32, 37, .92) !important;
|
||
box-shadow: 0 18px 44px rgba(0, 0, 0, .3) !important;
|
||
backdrop-filter: blur(18px) saturate(120%);
|
||
-webkit-backdrop-filter: blur(18px) saturate(120%);
|
||
}
|
||
|
||
.creation-control-popover-content,
|
||
.creation-model-picker-surface .ant-popover-inner-content { padding: 0 !important; }
|
||
|
||
.creation-parameter-menu { width: 274px; padding: 10px 12px 12px; }
|
||
.creation-parameter-section { display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: start; gap: 8px; }
|
||
.creation-parameter-section + .creation-parameter-section { margin-top: 12px; }
|
||
.creation-parameter-section h3 { margin: 7px 0 0; color: var(--creation-muted); font-size: 10px; font-weight: 500; }
|
||
.creation-choice-grid { display: grid; gap: 2px; }
|
||
.creation-choice-grid.is-ratio { grid-template-columns: repeat(6, minmax(0, 1fr)); }
|
||
.creation-choice-grid.is-resolution { grid-template-columns: repeat(4, minmax(0, 1fr)); }
|
||
.creation-choice-grid.is-quality, .creation-choice-grid.is-count { grid-template-columns: repeat(4, minmax(0, 1fr)); }
|
||
|
||
.creation-choice-grid button {
|
||
display: flex;
|
||
min-width: 0;
|
||
min-height: 36px;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 3px;
|
||
border: 0;
|
||
border-radius: 5px;
|
||
background: transparent;
|
||
color: #989ea7;
|
||
font-size: 10px;
|
||
line-height: 1;
|
||
transition: color 120ms ease, background-color 120ms ease;
|
||
}
|
||
|
||
.creation-choice-grid button:hover { background: rgba(255, 255, 255, .06); color: #e9ebed; }
|
||
.creation-choice-grid button.is-selected { background: rgba(255, 255, 255, .11); color: #fff; }
|
||
.creation-choice-grid button small { display: none; }
|
||
.creation-choice-grid.is-resolution button, .creation-choice-grid.is-count button { min-height: 30px; font-size: 11px; }
|
||
.creation-choice-grid .creation-ratio-preview { width: 20px; height: 13px; }
|
||
.creation-choice-grid .creation-ratio-preview > span { border-width: 1px; border-radius: 2px; }
|
||
|
||
.creation-duration-menu { display: flex; width: 212px; align-items: center; gap: 10px; padding: 10px 12px; }
|
||
.creation-duration-menu > div:first-child { display: flex; flex: 0 0 auto; flex-direction: column; gap: 2px; color: var(--creation-muted); font-size: 10px; }
|
||
.creation-duration-menu strong { color: #f1f2f3; font-size: 12px; font-weight: 600; }
|
||
.creation-range-wrap { min-width: 0; flex: 1; }
|
||
.creation-range-wrap input { height: 14px; }
|
||
.creation-range-wrap input::-webkit-slider-runnable-track { height: 3px; }
|
||
.creation-range-wrap input::-webkit-slider-thumb { width: 6px; height: 14px; margin-top: -5px; border-radius: 4px; }
|
||
.creation-range-wrap input::-moz-range-track { height: 3px; }
|
||
.creation-range-wrap input::-moz-range-thumb { width: 6px; height: 14px; border-radius: 4px; }
|
||
.creation-range-labels { margin-top: 2px; color: var(--creation-faint); font-size: 9px; }
|
||
|
||
.creation-mode-picker-menu { width: 158px; padding: 5px; color: #f0f1f2; }
|
||
.creation-mode-picker-menu button { display: flex; width: 100%; height: 34px; align-items: center; gap: 8px; border: 0; border-radius: 6px; background: transparent; color: inherit; padding: 0 7px; font-size: 11px; text-align: left; }
|
||
.creation-mode-picker-menu button:hover, .creation-mode-picker-menu button.is-selected { background: rgba(255, 255, 255, .075); }
|
||
.creation-mode-picker-menu button > svg { width: 13px; height: 13px; margin-left: auto; }
|
||
.creation-menu-icon { display: grid; width: 19px; height: 19px; place-items: center; border: 0; border-radius: 5px; background: rgba(255, 255, 255, .07); }
|
||
.creation-menu-icon svg { width: 12px; height: 12px; }
|
||
|
||
.creation-model-picker-menu { width: min(332px, calc(100vw - 24px)) !important; max-height: min(420px, calc(100vh - 24px)); padding: 7px !important; background: transparent !important; color: #f0f1f2 !important; }
|
||
.creation-model-picker-heading { display: flex; align-items: center; gap: 6px; padding: 4px 7px 7px; color: #8e949d; font-size: 10px; }
|
||
.creation-model-picker-heading strong { color: #e6e8eb; font-weight: 500; }
|
||
.creation-model-picker-menu .canvas-model-picker-group-label { padding: 6px 7px 5px; font-size: 10px; }
|
||
.creation-model-picker-menu .canvas-model-picker-option { min-height: 43px; border-radius: 6px; padding: 5px 7px; }
|
||
.creation-model-picker-menu .canvas-model-picker-option:hover { transform: none; }
|
||
.creation-model-picker-menu .canvas-model-picker-option > span:first-child { gap: 8px; }
|
||
.creation-model-picker-menu .canvas-model-picker-option > span:first-child > span:first-child { width: 26px; height: 26px; border: 0; border-radius: 5px; background: rgba(255, 255, 255, .07) !important; }
|
||
.creation-model-picker-menu .canvas-model-picker-option > span:first-child > span:nth-child(2) > span:first-child { font-size: 11px; }
|
||
.creation-model-picker-menu .canvas-model-picker-option > span:first-child > span:nth-child(2) > span:nth-child(2) { margin-top: 3px; font-size: 9px; }
|
||
|
||
.creation-thread-stage { width: min(820px, calc(100% - 48px)); padding: 44px 0 22px; }
|
||
.creation-thread-composer { width: min(820px, calc(100% - 48px)); padding: 8px 0 16px; }
|
||
.creation-chat-composer.is-thread .creation-chat-writing-surface { min-height: 70px; padding: 12px 14px 4px; }
|
||
.creation-chat-composer.is-thread .creation-chat-editor textarea { min-height: 48px; }
|
||
.creation-user-message { border-radius: 13px 13px 4px 13px; background: rgba(255, 255, 255, .07); box-shadow: none; }
|
||
.creation-assistant-message { margin-bottom: 36px; }
|
||
.creation-message-mark { width: 28px; height: 28px; border-radius: 8px; background: #f0f1f2; color: #1c1e22; }
|
||
|
||
.creation-new-button { border: 0; border-radius: 8px; background: rgba(255, 255, 255, .06); box-shadow: none; }
|
||
.creation-new-button:hover { border: 0; background: rgba(255, 255, 255, .12); }
|
||
|
||
html:not(.dark) .creation-control-popover-surface,
|
||
html:not(.dark) .creation-model-picker-surface { background: rgba(255, 255, 255, .94) !important; box-shadow: 0 16px 38px rgba(28, 32, 37, .12) !important; }
|
||
html:not(.dark) .creation-parameter-section h3,
|
||
html:not(.dark) .creation-duration-menu > div:first-child,
|
||
html:not(.dark) .creation-mode-picker-menu,
|
||
html:not(.dark) .creation-model-picker-menu { color: #727980 !important; }
|
||
html:not(.dark) .creation-choice-grid button { color: #737a82; }
|
||
html:not(.dark) .creation-choice-grid button:hover { background: rgba(28, 32, 37, .06); color: #25292e; }
|
||
html:not(.dark) .creation-choice-grid button.is-selected { background: rgba(28, 32, 37, .09); color: #20242a; }
|
||
html:not(.dark) .creation-duration-menu strong,
|
||
html:not(.dark) .creation-model-picker-heading strong { color: #20242a; }
|
||
html:not(.dark) .creation-mode-picker-menu button:hover,
|
||
html:not(.dark) .creation-mode-picker-menu button.is-selected,
|
||
html:not(.dark) .creation-model-picker-menu .canvas-model-picker-option > span:first-child > span:first-child { background: rgba(28, 32, 37, .06) !important; }
|
||
|
||
@keyframes creation-composer-arrive {
|
||
from { opacity: 0; transform: translateY(8px); }
|
||
to { opacity: 1; transform: translateY(0); }
|
||
}
|
||
|
||
@media (max-width: 680px) {
|
||
.creation-empty-workspace { width: calc(100% - 28px); padding-bottom: 8vh; }
|
||
.creation-chat-writing-surface, .creation-chat-composer.is-empty .creation-chat-writing-surface { grid-template-columns: 30px minmax(0, 1fr); gap: 8px; padding: 14px 12px 5px; }
|
||
.creation-chat-dock { align-items: flex-end; padding: 4px 7px 8px 8px; }
|
||
.creation-chat-controls { max-width: calc(100% - 38px); }
|
||
.creation-chat-control, .creation-chat-composer .creation-model-picker.canvas-composer-model-picker { height: 29px !important; padding: 0 6px !important; font-size: 10px; }
|
||
.creation-chat-composer .creation-model-picker.canvas-composer-model-picker { width: min(136px, 42vw) !important; }
|
||
.creation-thread-stage, .creation-thread-composer { width: calc(100% - 28px); }
|
||
.creation-parameter-menu { width: min(274px, calc(100vw - 24px)); }
|
||
}
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.creation-empty-composer,
|
||
.creation-chat-reference,
|
||
.creation-chat-submit { animation: none; transition: none; }
|
||
}
|
||
|
||
/* 创作入口与空间导航在同一块画布上，避免视觉断层。 */
|
||
|
||
.director-sequencer {
|
||
position: relative;
|
||
color: rgba(255, 255, 255, 0.86);
|
||
font-size: var(--fs-caption);
|
||
}
|
||
|
||
.director-viewport-dock {
|
||
position: absolute;
|
||
z-index: var(--z-toolbar);
|
||
bottom: var(--director-dock-bottom);
|
||
left: 50%;
|
||
display: flex;
|
||
max-width: calc(100% - var(--space-6));
|
||
align-items: center;
|
||
gap: var(--space-half);
|
||
padding: var(--space-1);
|
||
overflow-x: auto;
|
||
border: var(--stroke-1) solid var(--director-sequencer-border);
|
||
border-radius: var(--r-lg);
|
||
background: var(--director-dock-surface);
|
||
box-shadow: var(--shadow-xl);
|
||
color: var(--director-dock-fg);
|
||
transform: translateX(-50%);
|
||
backdrop-filter: blur(var(--space-4));
|
||
}
|
||
|
||
.director-viewport-dock-button {
|
||
display: grid;
|
||
width: var(--director-dock-button-size);
|
||
height: var(--director-dock-button-size);
|
||
flex: 0 0 var(--director-dock-button-size);
|
||
place-items: center;
|
||
border-radius: var(--r-md);
|
||
transition: background var(--motion-dur-fast) var(--motion-ease-out), color var(--motion-dur-fast) var(--motion-ease-out), transform var(--motion-dur-fast) var(--motion-ease-out);
|
||
}
|
||
|
||
.director-viewport-dock-button > svg {
|
||
width: var(--space-4);
|
||
height: var(--space-4);
|
||
}
|
||
|
||
.director-viewport-dock-button:hover {
|
||
background: var(--director-control-hover);
|
||
color: var(--director-dock-fg-strong);
|
||
}
|
||
|
||
.director-viewport-dock-button:active {
|
||
transform: translateY(1px);
|
||
}
|
||
|
||
.director-viewport-dock-button.is-active {
|
||
background: var(--director-dock-active-surface);
|
||
color: var(--director-dock-fg-strong);
|
||
box-shadow: inset 0 0 0 var(--stroke-1) var(--director-sequencer-border);
|
||
}
|
||
|
||
.director-viewport-dock-divider {
|
||
width: var(--stroke-1);
|
||
height: var(--space-5);
|
||
flex: 0 0 var(--stroke-1);
|
||
margin: 0 var(--space-half);
|
||
background: var(--director-sequencer-border);
|
||
}
|
||
|
||
.director-actor-colors {
|
||
display: flex;
|
||
min-width: 0;
|
||
align-items: center;
|
||
gap: var(--space-1-half);
|
||
}
|
||
|
||
.director-actor-color {
|
||
width: var(--director-color-swatch-size);
|
||
height: var(--director-color-swatch-size);
|
||
flex: 0 0 var(--director-color-swatch-size);
|
||
border: var(--stroke-1) solid var(--director-sequencer-border);
|
||
border-radius: var(--r-full);
|
||
box-shadow: inset 0 0 0 var(--stroke-1) var(--director-swatch-inset);
|
||
}
|
||
|
||
.director-actor-color.is-active {
|
||
outline: var(--stroke-2) solid var(--workspace-accent);
|
||
outline-offset: var(--space-half);
|
||
}
|
||
|
||
.director-pose-section {
|
||
display: grid;
|
||
gap: var(--space-2);
|
||
}
|
||
|
||
.director-inspector-section-title {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
color: var(--cn-muted);
|
||
font-size: var(--fs-label);
|
||
}
|
||
|
||
.director-inspector-section-title > span:last-child {
|
||
color: var(--workspace-accent);
|
||
}
|
||
|
||
.director-pose-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||
gap: var(--space-1);
|
||
}
|
||
|
||
.director-pose-button {
|
||
min-width: 0;
|
||
height: var(--director-pose-button-height);
|
||
padding: 0 var(--space-1);
|
||
overflow: hidden;
|
||
border: var(--stroke-1) solid var(--cn-stroke);
|
||
border-radius: var(--r-sm);
|
||
color: var(--cn-muted);
|
||
font-size: var(--fs-tiny);
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
transition: border-color var(--motion-dur-fast) var(--motion-ease-out), background var(--motion-dur-fast) var(--motion-ease-out), color var(--motion-dur-fast) var(--motion-ease-out);
|
||
}
|
||
|
||
.director-pose-button:hover {
|
||
border-color: var(--workspace-accent);
|
||
color: var(--cn-text);
|
||
}
|
||
|
||
.director-pose-button.is-active {
|
||
border-color: var(--workspace-accent);
|
||
background: var(--workspace-accent-soft);
|
||
color: var(--workspace-accent);
|
||
}
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.director-viewport-dock-button,
|
||
.director-pose-button {
|
||
transition: none;
|
||
}
|
||
}
|
||
|
||
.director-sequencer-resizer {
|
||
position: absolute;
|
||
z-index: 2;
|
||
inset: -4px 0 auto;
|
||
height: 8px;
|
||
cursor: ns-resize;
|
||
}
|
||
|
||
.director-sequencer-resizer::after {
|
||
content: "";
|
||
position: absolute;
|
||
top: 3px;
|
||
left: 50%;
|
||
width: 44px;
|
||
height: 2px;
|
||
border-radius: var(--r-full);
|
||
background: rgba(255, 255, 255, 0.28);
|
||
transform: translateX(-50%);
|
||
opacity: 0;
|
||
transition: opacity var(--motion-dur-fast) var(--motion-ease-out);
|
||
}
|
||
|
||
.director-sequencer:hover .director-sequencer-resizer::after,
|
||
.director-sequencer-resizer:focus-visible::after {
|
||
opacity: 1;
|
||
}
|
||
|
||
.director-sequencer-body {
|
||
position: relative;
|
||
height: calc(100% - 40px);
|
||
min-height: 0;
|
||
}
|
||
|
||
.director-sequencer-grid {
|
||
position: relative;
|
||
display: grid;
|
||
min-width: calc(var(--director-sequencer-base-width) * var(--director-sequencer-track-scale, 1));
|
||
grid-template-columns: var(--director-sequencer-label-width) minmax(640px, 1fr);
|
||
}
|
||
|
||
.director-sequencer-global-playhead {
|
||
position: absolute;
|
||
z-index: 1;
|
||
top: 28px;
|
||
bottom: 0;
|
||
right: 0;
|
||
left: var(--director-sequencer-label-width);
|
||
pointer-events: none;
|
||
}
|
||
|
||
.director-sequencer-global-playhead > i {
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
width: 1px;
|
||
background: #f0b36a;
|
||
}
|
||
|
||
.director-sequencer-label,
|
||
.director-sequencer-track {
|
||
min-width: 0;
|
||
height: var(--director-sequencer-row-height);
|
||
border-bottom: 1px solid var(--director-sequencer-border);
|
||
}
|
||
|
||
.director-sequencer-row {
|
||
display: contents;
|
||
}
|
||
|
||
.director-sequencer-label {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-2);
|
||
width: var(--director-sequencer-label-width);
|
||
padding: 0 var(--space-3);
|
||
color: rgba(255, 255, 255, 0.64);
|
||
text-align: left;
|
||
white-space: nowrap;
|
||
transition: background var(--motion-dur-fast) var(--motion-ease-out), color var(--motion-dur-fast) var(--motion-ease-out);
|
||
}
|
||
|
||
.director-sequencer-label:hover,
|
||
.director-sequencer-row.is-selected > .director-sequencer-label {
|
||
background: rgba(255, 255, 255, 0.075);
|
||
color: rgba(255, 255, 255, 0.96);
|
||
}
|
||
|
||
.director-sequencer-label.is-indent {
|
||
padding-left: var(--space-6);
|
||
color: rgba(255, 255, 255, 0.46);
|
||
}
|
||
|
||
.director-sequencer-ruler-label,
|
||
.director-sequencer-ruler {
|
||
height: 28px;
|
||
border-bottom-color: var(--director-sequencer-border);
|
||
background: var(--director-sequencer-surface-raised);
|
||
}
|
||
|
||
.director-sequencer-ruler-label {
|
||
padding-left: var(--space-3);
|
||
color: rgba(255, 255, 255, 0.42);
|
||
font-size: var(--fs-micro);
|
||
letter-spacing: 0.06em;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.director-sequencer-ruler {
|
||
position: relative;
|
||
cursor: ew-resize;
|
||
background-image: repeating-linear-gradient(to right, transparent 0, transparent calc(20% - 1px), var(--director-sequencer-grid) 20%);
|
||
}
|
||
|
||
.director-sequencer-tick {
|
||
position: absolute;
|
||
top: var(--space-2);
|
||
color: rgba(255, 255, 255, 0.38);
|
||
font-size: var(--fs-micro);
|
||
transform: translateX(-50%);
|
||
}
|
||
|
||
.director-sequencer-playhead {
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
width: 1px;
|
||
background: #f0b36a;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.director-sequencer-track {
|
||
position: relative;
|
||
overflow: hidden;
|
||
background-image: repeating-linear-gradient(to right, transparent 0, transparent calc(20% - 1px), var(--director-sequencer-grid) 20%);
|
||
}
|
||
|
||
.director-sequencer-track-content {
|
||
position: absolute;
|
||
inset: 0;
|
||
}
|
||
|
||
.director-sequencer-key {
|
||
position: absolute;
|
||
top: 50%;
|
||
width: 8px;
|
||
height: 8px;
|
||
border-radius: var(--r-xs);
|
||
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.38);
|
||
transform: translate(-50%, -50%) rotate(45deg);
|
||
}
|
||
|
||
.director-sequencer-clip {
|
||
position: absolute;
|
||
top: 5px;
|
||
bottom: 5px;
|
||
display: flex;
|
||
align-items: center;
|
||
min-width: 30px;
|
||
padding: 0 var(--space-2);
|
||
overflow: hidden;
|
||
border: 1px solid;
|
||
border-radius: var(--r-xs);
|
||
font-size: var(--fs-micro);
|
||
}
|
||
|
||
.director-sequencer-transport,
|
||
.director-sequencer-icon,
|
||
.director-sequencer-tool {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
height: var(--space-8);
|
||
border-radius: var(--r-sm);
|
||
color: rgba(255, 255, 255, 0.62);
|
||
transition: background var(--motion-dur-fast) var(--motion-ease-out), color var(--motion-dur-fast) var(--motion-ease-out);
|
||
}
|
||
|
||
.director-sequencer-transport,
|
||
.director-sequencer-icon {
|
||
width: var(--space-8);
|
||
}
|
||
|
||
.director-sequencer-tool {
|
||
gap: var(--space-1);
|
||
padding: 0 var(--space-2);
|
||
font-size: var(--fs-micro);
|
||
}
|
||
|
||
.director-sequencer-shot-select {
|
||
width: var(--director-sequencer-shot-select-width);
|
||
height: var(--space-8);
|
||
padding: 0 var(--space-2);
|
||
overflow: hidden;
|
||
border: 1px solid var(--director-sequencer-border);
|
||
border-radius: var(--r-sm);
|
||
background: var(--director-sequencer-surface-raised);
|
||
color: rgba(255, 255, 255, 0.72);
|
||
font-size: var(--fs-micro);
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.director-sequencer-transport:hover,
|
||
.director-sequencer-icon:hover,
|
||
.director-sequencer-tool:hover,
|
||
.director-sequencer-icon.is-active,
|
||
.director-sequencer-tool.is-active {
|
||
background: rgba(255, 255, 255, 0.1);
|
||
color: #ffffff;
|
||
}
|
||
.app-workspace-shell.is-creation-workspace,
|
||
.app-workspace-shell.is-creation-workspace .app-workspace-sidebar,
|
||
.app-workspace-shell.is-creation-workspace .app-workspace-stage {
|
||
background: var(--workspace-page) !important;
|
||
}
|
||
|
||
html:not(.dark) .app-workspace-shell.is-creation-workspace,
|
||
html:not(.dark) .app-workspace-shell.is-creation-workspace .app-workspace-sidebar,
|
||
html:not(.dark) .app-workspace-shell.is-creation-workspace .app-workspace-stage {
|
||
background: var(--workspace-page) !important;
|
||
}
|
||
|
||
.creation-empty-workspace {
|
||
display: flex;
|
||
flex: 1 0 auto;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.creation-chat-intro {
|
||
position: relative;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
margin: 0 0 24px;
|
||
text-align: center;
|
||
animation: creation-intro-arrive var(--motion-dur-slow-calc) var(--motion-ease-out) both;
|
||
}
|
||
|
||
.creation-chat-intro p {
|
||
margin: 0 0 7px;
|
||
color: var(--creation-faint);
|
||
font-size: 10px;
|
||
font-weight: 500;
|
||
letter-spacing: .12em;
|
||
}
|
||
|
||
.creation-chat-intro h1 {
|
||
margin: 0;
|
||
color: var(--creation-text);
|
||
font-size: 24px;
|
||
font-weight: 580;
|
||
line-height: 1.3;
|
||
letter-spacing: 0;
|
||
}
|
||
|
||
.creation-intro-signal {
|
||
position: absolute;
|
||
top: -12px;
|
||
left: calc(50% - 50px);
|
||
width: 16px;
|
||
height: 1px;
|
||
background: linear-gradient(90deg, transparent, rgba(227, 231, 235, .88), transparent);
|
||
animation: creation-intro-signal 2.8s var(--motion-ease-out) infinite;
|
||
}
|
||
|
||
.creation-chat-reference.is-paper {
|
||
display: flex;
|
||
width: 58px;
|
||
height: 74px;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
align-self: start;
|
||
justify-content: center;
|
||
gap: 7px;
|
||
border: 1px dashed rgba(255, 255, 255, .09);
|
||
border-radius: 4px;
|
||
background: #242730;
|
||
color: #9097a1;
|
||
transform: rotate(-7deg);
|
||
}
|
||
|
||
.creation-chat-reference.is-paper svg { width: 21px; height: 21px; }
|
||
.creation-chat-reference.is-paper span { display: block; font-size: 10px; font-weight: 520; line-height: 1; white-space: nowrap; }
|
||
.creation-chat-reference.is-paper:hover:not(:disabled) { background: #2b2e37; color: #f1f3f5; transform: rotate(-4deg) translateY(-2px); }
|
||
.creation-chat-reference.is-paper:active:not(:disabled) { transform: rotate(-4deg) translateY(0) scale(.97); }
|
||
.creation-chat-reference.is-paper:focus-visible { outline: 2px solid color-mix(in srgb, #83d6ec 68%, transparent); outline-offset: 3px; }
|
||
.creation-chat-composer .creation-chat-writing-surface { grid-template-columns: 62px minmax(0, 1fr); gap: 16px; }
|
||
|
||
.creation-custom-value {
|
||
display: flex;
|
||
height: 28px;
|
||
align-items: center;
|
||
gap: 6px;
|
||
margin-top: 5px;
|
||
padding: 0 7px;
|
||
border-radius: 5px;
|
||
background: rgba(255, 255, 255, .045);
|
||
color: var(--creation-faint);
|
||
font-size: 10px;
|
||
}
|
||
|
||
.creation-custom-value span { flex: 0 0 auto; }
|
||
.creation-custom-value input {
|
||
width: 100%;
|
||
min-width: 0;
|
||
border: 0;
|
||
outline: 0;
|
||
background: transparent;
|
||
color: #edf0f2;
|
||
font-size: 11px;
|
||
line-height: 1;
|
||
}
|
||
|
||
.creation-custom-value input::-webkit-inner-spin-button,
|
||
.creation-custom-value input::-webkit-outer-spin-button { margin: 0; }
|
||
.creation-custom-value em { font-style: normal; }
|
||
|
||
.creation-duration-menu {
|
||
display: grid;
|
||
width: 224px;
|
||
grid-template-columns: 36px minmax(0, 1fr);
|
||
align-items: center;
|
||
gap: 7px 8px;
|
||
padding: 10px 11px;
|
||
}
|
||
|
||
.creation-duration-heading { display: flex; flex-direction: column; gap: 2px; color: var(--creation-muted); font-size: 10px; }
|
||
.creation-duration-heading strong { color: #f1f2f3; font-size: 12px; font-weight: 600; }
|
||
.creation-duration-choices { display: flex; min-width: 0; align-items: center; gap: 2px; }
|
||
.creation-duration-choices button { height: 26px; min-width: 0; flex: 1; border: 0; border-radius: 5px; background: transparent; color: #969ca5; font-size: 10px; transition: color 120ms ease, background-color 120ms ease; }
|
||
.creation-duration-choices button:hover { background: rgba(255, 255, 255, .06); color: #eef0f2; }
|
||
.creation-duration-choices button.is-selected { background: rgba(255, 255, 255, .11); color: #fff; }
|
||
.creation-custom-value.is-duration { grid-column: 2; width: 100%; margin-top: 0; }
|
||
|
||
html:not(.dark) .creation-chat-reference.is-paper { border-color: rgba(28, 32, 37, .10); background: #e9ebed; color: #626b75; }
|
||
html:not(.dark) .creation-chat-reference.is-paper:hover:not(:disabled) { background: #dfe3e6; color: #1c2025; }
|
||
html:not(.dark) .creation-custom-value { background: rgba(28, 32, 37, .055); }
|
||
html:not(.dark) .creation-custom-value input,
|
||
html:not(.dark) .creation-duration-heading strong { color: #23272c; }
|
||
html:not(.dark) .creation-duration-choices button:hover { background: rgba(28, 32, 37, .06); color: #23272c; }
|
||
html:not(.dark) .creation-duration-choices button.is-selected { background: rgba(28, 32, 37, .10); color: #23272c; }
|
||
|
||
@keyframes creation-intro-arrive {
|
||
from { opacity: 0; transform: translateY(6px); }
|
||
to { opacity: 1; transform: translateY(0); }
|
||
}
|
||
|
||
@keyframes creation-intro-signal {
|
||
0%, 100% { opacity: .3; transform: translateX(-14px) scaleX(.55); }
|
||
50% { opacity: 1; transform: translateX(14px) scaleX(1); }
|
||
}
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.creation-chat-intro,
|
||
.creation-intro-signal { animation: none; }
|
||
}
|
||
|
||
/* 创作对话使用同一套 Composer 规格；空态仅改变位置，不改变组件密度。 */
|
||
.creation-home .creation-chat-composer { border-radius: 18px; }
|
||
.creation-home .creation-chat-writing-surface,
|
||
.creation-home .creation-chat-composer.is-empty .creation-chat-writing-surface,
|
||
.creation-home .creation-chat-composer.is-thread .creation-chat-writing-surface {
|
||
min-height: 140px;
|
||
padding: 18px 20px 8px;
|
||
}
|
||
|
||
.creation-home .creation-chat-composer.is-empty .creation-chat-writing-surface,
|
||
.creation-home .creation-chat-composer.is-thread .creation-chat-writing-surface { grid-template-columns: 62px minmax(0, 1fr); gap: 16px; }
|
||
.creation-home .creation-chat-editor textarea,
|
||
.creation-home .creation-chat-composer.is-thread .creation-chat-editor textarea,
|
||
.creation-home .creation-chat-mention-container,
|
||
.creation-home .creation-chat-mention-editor { min-height: 76px; }
|
||
.creation-home .creation-chat-dock { min-height: 48px; padding: 4px 12px 12px 16px; }
|
||
|
||
.creation-home .creation-chat-control,
|
||
.creation-home .creation-chat-composer .creation-model-picker.canvas-composer-model-picker,
|
||
.creation-home .creation-chat-control.is-mode {
|
||
border: 0 !important;
|
||
background: transparent !important;
|
||
box-shadow: none !important;
|
||
color: var(--creation-muted) !important;
|
||
}
|
||
|
||
.creation-home .creation-chat-control:hover,
|
||
.creation-home .creation-chat-control[aria-expanded="true"],
|
||
.creation-home .creation-chat-composer .creation-model-picker.canvas-composer-model-picker:hover,
|
||
.creation-home .creation-chat-composer .creation-model-picker.canvas-composer-model-picker[aria-expanded="true"] {
|
||
border: 0 !important;
|
||
background: rgba(255, 255, 255, .065) !important;
|
||
color: var(--creation-text) !important;
|
||
transform: none;
|
||
}
|
||
|
||
.creation-home .creation-chat-control.is-mode { color: var(--creation-text) !important; }
|
||
.creation-home .creation-chat-control.is-mode > svg:first-child { color: #81d3e6; }
|
||
html:not(.dark) .creation-home .creation-chat-control:hover,
|
||
html:not(.dark) .creation-home .creation-chat-control[aria-expanded="true"],
|
||
html:not(.dark) .creation-home .creation-chat-composer .creation-model-picker.canvas-composer-model-picker:hover { background: rgba(28, 32, 37, .06) !important; }
|
||
|
||
.creation-chat-intro h1 span {
|
||
display: inline-block;
|
||
margin: 0 4px;
|
||
color: #83d6ec;
|
||
font-size: 1.25em;
|
||
font-weight: 760;
|
||
text-shadow: 0 0 24px rgba(89, 202, 232, .24);
|
||
animation: creation-intro-emphasis 2.6s var(--motion-ease-out) infinite;
|
||
}
|
||
|
||
.creation-thread-stage,
|
||
.creation-thread-composer { width: min(1068px, calc(100% - 56px)); }
|
||
.creation-thread-stage { padding: 52px 0 24px; }
|
||
.creation-thread-composer { padding: 10px 0 18px; }
|
||
|
||
.creation-results { width: 100%; }
|
||
.creation-user-message {
|
||
max-width: min(62%, 640px);
|
||
margin: 0 0 42px auto;
|
||
border-radius: 14px 14px 5px 14px;
|
||
background: rgba(255, 255, 255, .07);
|
||
padding: 11px 14px;
|
||
color: var(--creation-text);
|
||
font-size: 14px;
|
||
line-height: 1.7;
|
||
white-space: pre-wrap;
|
||
}
|
||
|
||
.creation-user-message-references { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
|
||
.creation-user-message-reference { display: inline-flex; min-width: 0; max-width: 180px; height: 25px; align-items: center; gap: 5px; border-radius: 6px; background: rgba(255, 255, 255, .075); padding: 0 7px; color: var(--creation-muted); font-size: 10px; line-height: 1; }
|
||
.creation-user-message-reference img { width: 17px; height: 17px; flex: 0 0 auto; border-radius: 4px; object-fit: cover; }
|
||
.creation-user-message-reference svg { width: 12px; height: 12px; flex: 0 0 auto; }
|
||
.creation-user-message-reference span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||
html:not(.dark) .creation-user-message-reference { background: rgba(28, 32, 37, .07); }
|
||
.creation-user-message-attachments button { position: relative; width: 44px; height: 44px; flex: 0 0 auto; overflow: hidden; border: 0; border-radius: 7px; background: transparent; padding: 0; }
|
||
.creation-user-message-attachments button:focus-visible { outline: 2px solid var(--creation-text); outline-offset: 2px; }
|
||
.creation-user-message-attachments button > span { position: absolute; right: 3px; bottom: 3px; display: grid; width: 17px; height: 17px; place-items: center; border-radius: 5px; background: rgba(0, 0, 0, .68); color: #fff; opacity: 0; transition: opacity 140ms ease; }
|
||
.creation-user-message-attachments button:hover > span,
|
||
.creation-user-message-attachments button:focus-visible > span { opacity: 1; }
|
||
.creation-user-message-attachments button > span svg { width: 10px; height: 10px; }
|
||
|
||
.creation-assistant-message { max-width: 900px; margin: 0 0 48px; }
|
||
.creation-message-heading { gap: 7px; color: var(--creation-faint); font-size: 11px; }
|
||
.creation-message-mark { width: 26px; height: 26px; border-radius: 8px; background: #eff1f3; color: #202329; }
|
||
.creation-message-mark svg { width: 15px; height: 15px; }
|
||
.creation-message-model { max-width: 300px; color: var(--creation-faint); }
|
||
.creation-message-state { border: 0; border-radius: 5px; background: rgba(255, 255, 255, .06); padding: 2px 5px; color: var(--creation-muted); font-size: 10px; }
|
||
|
||
.creation-message-content { max-width: 800px; padding: 14px 0 0 34px; color: var(--creation-text); font-size: 15px; line-height: 1.8; }
|
||
.creation-message-content p { margin: 0 0 12px; }
|
||
.creation-message-content p:last-child { margin-bottom: 0; }
|
||
.creation-message-content h1, .creation-message-content h2, .creation-message-content h3 { margin: 20px 0 8px; color: var(--creation-text); font-weight: 650; line-height: 1.35; }
|
||
.creation-message-content h1 { font-size: 21px; }
|
||
.creation-message-content h2 { font-size: 18px; }
|
||
.creation-message-content h3 { font-size: 16px; }
|
||
.creation-message-content ul, .creation-message-content ol { margin: 10px 0; padding-left: 22px; }
|
||
.creation-message-content li + li { margin-top: 4px; }
|
||
.creation-message-content blockquote { margin: 14px 0; border-left: 2px solid rgba(131, 214, 236, .65); padding: 2px 0 2px 12px; color: var(--creation-muted); }
|
||
.creation-message-content code { border-radius: 4px; background: rgba(255, 255, 255, .08); padding: 2px 5px; font-size: .88em; }
|
||
.creation-message-content pre { overflow-x: auto; border-radius: 8px; background: #181b20; padding: 12px 14px; }
|
||
.creation-message-content pre code { background: transparent; padding: 0; }
|
||
.creation-message-content a { color: #83d6ec; text-decoration: none; }
|
||
|
||
.creation-message-error { display: flex; max-width: 760px; align-items: center; gap: 10px; padding: 16px 0 0 34px; color: #ee8585; font-size: 13px; line-height: 1.6; }
|
||
.creation-message-error button { display: inline-flex; height: 28px; align-items: center; gap: 5px; border: 0; border-radius: 6px; background: rgba(226, 96, 96, .12); color: #ef8b8b; padding: 0 8px; font-size: 11px; }
|
||
.creation-message-error button:hover { background: rgba(226, 96, 96, .2); }
|
||
|
||
.creation-media-pending,
|
||
.creation-media-empty { display: inline-flex; min-height: 42px; align-items: center; gap: 8px; margin: 14px 0 0 34px; border: 0; border-radius: 8px; background: rgba(255, 255, 255, .055); padding: 0 12px; color: var(--creation-muted); font-size: 12px; }
|
||
.creation-media-empty button { border: 0; background: transparent; color: #83d6ec; font-size: 12px; }
|
||
.creation-media-result { max-width: 860px; padding: 14px 0 0 34px; }
|
||
.creation-image-result-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
|
||
.creation-image-result { position: relative; aspect-ratio: 1; overflow: hidden; border: 0; border-radius: 9px; background: #181a1e; }
|
||
.creation-image-result img { width: 100%; height: 100%; object-fit: cover; transition: transform 220ms var(--motion-ease-out); }
|
||
.creation-image-result span, .creation-video-result > span { position: absolute; right: 8px; bottom: 8px; display: grid; width: 27px; height: 27px; place-items: center; border-radius: 7px; background: rgba(13, 14, 16, .62); color: #fff; opacity: 0; transition: opacity 160ms ease; backdrop-filter: blur(8px); }
|
||
.creation-image-result span svg, .creation-video-result span svg { width: 14px; height: 14px; }
|
||
.creation-image-result:hover img { transform: scale(1.025); }
|
||
.creation-image-result:hover span, .creation-video-result:hover > span { opacity: 1; }
|
||
|
||
.creation-video-result { position: relative; display: block; width: min(760px, 100%); aspect-ratio: 16 / 9; overflow: hidden; border: 0; border-radius: 10px; background: #121316; }
|
||
.creation-video-result > span { display: inline-flex; width: auto; height: 30px; align-items: center; gap: 5px; padding: 0 9px; font-size: 11px; }
|
||
.creation-media-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; color: var(--creation-faint); font-size: 11px; }
|
||
.creation-media-actions > span { margin-right: 2px; }
|
||
.creation-media-actions a, .creation-media-actions button { display: inline-flex; align-items: center; gap: 4px; border: 0; background: transparent; color: var(--creation-muted); font-size: 11px; text-decoration: none; }
|
||
.creation-media-actions a:hover, .creation-media-actions button:hover { color: var(--creation-text); }
|
||
.creation-media-actions svg { width: 13px; height: 13px; }
|
||
|
||
.creation-media-preview-modal .ant-modal-content { overflow: hidden; border: 0; border-radius: 12px; background: #111215; padding: 0; }
|
||
.creation-media-preview-modal .ant-modal-close { color: #fff; }
|
||
.creation-media-preview-image, .creation-media-preview-video { display: block; max-width: 100%; max-height: 82vh; margin: 0 auto; object-fit: contain; }
|
||
.creation-media-preview-video { width: 100%; background: #050505; }
|
||
|
||
html:not(.dark) .creation-user-message { background: rgba(28, 32, 37, .07); }
|
||
html:not(.dark) .creation-message-content pre,
|
||
html:not(.dark) .creation-video-result,
|
||
html:not(.dark) .creation-media-preview-modal .ant-modal-content { background: #1f2227; }
|
||
html:not(.dark) .creation-message-content code { background: rgba(28, 32, 37, .08); }
|
||
|
||
@keyframes creation-intro-emphasis {
|
||
0%, 100% { transform: translateY(0); filter: brightness(1); }
|
||
45% { transform: translateY(-1px); filter: brightness(1.14); }
|
||
}
|
||
|
||
@media (max-width: 800px) {
|
||
.creation-home .creation-chat-writing-surface,
|
||
.creation-home .creation-chat-composer.is-empty .creation-chat-writing-surface,
|
||
.creation-home .creation-chat-composer.is-thread .creation-chat-writing-surface { min-height: 96px; padding: 14px 13px 6px; }
|
||
.creation-home .creation-chat-editor textarea,
|
||
.creation-home .creation-chat-composer.is-thread .creation-chat-editor textarea,
|
||
.creation-home .creation-chat-mention-container,
|
||
.creation-home .creation-chat-mention-editor { min-height: 64px; }
|
||
.creation-thread-stage, .creation-thread-composer { width: calc(100% - 28px); }
|
||
.creation-thread-stage { padding-top: 36px; }
|
||
.creation-user-message { max-width: 78%; }
|
||
.creation-assistant-message { max-width: 100%; }
|
||
.creation-message-content, .creation-message-error, .creation-media-result { padding-left: 0; }
|
||
.creation-media-pending, .creation-media-empty { margin-left: 0; }
|
||
.creation-image-result-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||
}
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.creation-chat-intro h1 span { animation: none; }
|
||
}
|
||
|
||
/* 旧创作规则位于 utilities 层且使用 !important；必须在同层覆盖。 */
|
||
@layer utilities {
|
||
.creation-home .creation-chat-control,
|
||
.creation-home .creation-chat-composer .creation-model-picker.canvas-composer-model-picker,
|
||
.creation-home .creation-chat-control.is-mode {
|
||
border: 0 !important;
|
||
background: transparent !important;
|
||
box-shadow: none !important;
|
||
color: var(--creation-muted) !important;
|
||
}
|
||
|
||
.creation-home .creation-chat-control:hover,
|
||
.creation-home .creation-chat-control[aria-expanded="true"],
|
||
.creation-home .creation-chat-composer .creation-model-picker.canvas-composer-model-picker:hover,
|
||
.creation-home .creation-chat-composer .creation-model-picker.canvas-composer-model-picker[aria-expanded="true"] {
|
||
border: 0 !important;
|
||
background: rgba(255, 255, 255, .065) !important;
|
||
color: var(--creation-text) !important;
|
||
transform: none;
|
||
}
|
||
|
||
.creation-home .creation-chat-control.is-mode { color: var(--creation-text) !important; }
|
||
|
||
.creation-parameter-menu {
|
||
width: 304px;
|
||
padding: 13px 14px 14px;
|
||
}
|
||
|
||
.creation-parameter-section {
|
||
display: block;
|
||
margin: 0;
|
||
}
|
||
|
||
.creation-parameter-section + .creation-parameter-section { margin-top: 16px; }
|
||
.creation-parameter-section h3 {
|
||
margin: 0 0 8px;
|
||
color: var(--creation-muted);
|
||
font-size: 11px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.creation-parameter-content { min-width: 0; }
|
||
.creation-choice-grid { gap: 3px; }
|
||
.creation-choice-grid.is-ratio { grid-template-columns: repeat(6, minmax(0, 1fr)); }
|
||
.creation-choice-grid button {
|
||
min-height: 46px;
|
||
border: 0;
|
||
border-radius: 6px;
|
||
background: transparent;
|
||
color: #959ca5;
|
||
font-size: 10px;
|
||
}
|
||
|
||
.creation-choice-grid button:hover { background: rgba(255, 255, 255, .055); color: #edf0f2; }
|
||
.creation-choice-grid button.is-selected { background: rgba(255, 255, 255, .12); color: #fff; }
|
||
.creation-choice-grid .creation-ratio-preview { width: 25px; height: 17px; }
|
||
.creation-choice-grid .creation-ratio-preview > span { border-width: 1px; }
|
||
.creation-choice-grid.is-resolution button,
|
||
.creation-choice-grid.is-count button { min-height: 32px; font-size: 11px; }
|
||
|
||
.creation-custom-trigger {
|
||
display: inline-flex;
|
||
height: 27px;
|
||
align-items: center;
|
||
border: 0;
|
||
background: transparent;
|
||
color: #8bcfe0;
|
||
padding: 0 4px;
|
||
font-size: 10px;
|
||
}
|
||
|
||
.creation-custom-trigger:hover { color: #c4edf6; }
|
||
.creation-custom-value {
|
||
display: flex;
|
||
width: 100%;
|
||
height: 32px;
|
||
align-items: center;
|
||
gap: 7px;
|
||
margin-top: 7px;
|
||
border-radius: 6px;
|
||
background: rgba(255, 255, 255, .055);
|
||
padding: 0 9px;
|
||
color: var(--creation-muted);
|
||
font-size: 11px;
|
||
}
|
||
|
||
.creation-custom-value input {
|
||
min-width: 0;
|
||
border: 0;
|
||
outline: 0;
|
||
background: transparent;
|
||
color: #edf0f2;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.creation-duration-menu {
|
||
display: block;
|
||
width: 270px;
|
||
padding: 13px 14px 14px;
|
||
}
|
||
|
||
.creation-duration-heading {
|
||
display: flex;
|
||
align-items: baseline;
|
||
justify-content: space-between;
|
||
margin-bottom: 8px;
|
||
color: var(--creation-muted);
|
||
font-size: 11px;
|
||
}
|
||
|
||
.creation-duration-heading strong { color: #f1f3f4; font-size: 13px; font-weight: 600; }
|
||
.creation-duration-choices { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 3px; }
|
||
.creation-duration-choices button {
|
||
height: 30px;
|
||
border: 0;
|
||
border-radius: 6px;
|
||
background: transparent;
|
||
color: #969ca5;
|
||
font-size: 11px;
|
||
}
|
||
|
||
.creation-duration-choices button:hover { background: rgba(255, 255, 255, .055); color: #eff1f2; }
|
||
.creation-duration-choices button.is-selected { background: rgba(255, 255, 255, .12); color: #fff; }
|
||
.creation-custom-value.is-duration { width: 100%; grid-column: auto; margin-top: 7px; }
|
||
}
|
||
|
||
/* 解除旧版参数侧栏 Grid，Popover 必须是纵向信息分组。 */
|
||
.creation-parameter-section {
|
||
display: block !important;
|
||
grid-template-columns: none !important;
|
||
gap: 0 !important;
|
||
}
|
||
|
||
.creation-parameter-section h3 { margin: 0 0 8px !important; }
|
||
.creation-parameter-content { min-width: 0; }
|
||
.creation-choice-grid { gap: 3px; }
|
||
.creation-choice-grid.is-ratio { grid-template-columns: repeat(6, minmax(0, 1fr)); }
|
||
.creation-choice-grid button { min-height: 46px; }
|
||
.creation-choice-grid.is-resolution button,
|
||
.creation-choice-grid.is-count button { min-height: 32px; }
|
||
.creation-duration-menu { display: block !important; width: 270px !important; grid-template-columns: none !important; padding: 13px 14px 14px !important; }
|
||
.creation-duration-heading { display: flex !important; flex-direction: row !important; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
|
||
.creation-duration-choices { display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 3px; }
|
||
.creation-duration-choices button { height: 30px; }
|
||
.creation-custom-value.is-duration { grid-column: auto !important; width: 100%; margin-top: 7px; }
|
||
|
||
/* 创作参数是即时选择，不使用后台式表单控件。 */
|
||
.creation-control-popover-surface {
|
||
border: 0 !important;
|
||
border-radius: 12px !important;
|
||
background: rgba(25, 27, 31, .96) !important;
|
||
box-shadow: 0 20px 48px rgba(0, 0, 0, .34) !important;
|
||
}
|
||
|
||
.creation-parameter-menu {
|
||
width: 288px !important;
|
||
padding: 12px !important;
|
||
}
|
||
|
||
.creation-parameter-section,
|
||
.creation-parameter-section + .creation-parameter-section {
|
||
display: block !important;
|
||
margin: 0 !important;
|
||
}
|
||
|
||
.creation-parameter-section + .creation-parameter-section { margin-top: 14px !important; }
|
||
|
||
.creation-parameter-section > header,
|
||
.creation-duration-heading {
|
||
display: flex !important;
|
||
flex-direction: row !important;
|
||
align-items: center !important;
|
||
justify-content: space-between;
|
||
min-height: 18px;
|
||
margin: 0 2px 7px !important;
|
||
}
|
||
|
||
.creation-parameter-section h3,
|
||
.creation-duration-heading > span {
|
||
margin: 0 !important;
|
||
color: var(--creation-muted) !important;
|
||
font-size: 11px !important;
|
||
font-weight: 500 !important;
|
||
letter-spacing: 0 !important;
|
||
}
|
||
|
||
.creation-parameter-section > header > span,
|
||
.creation-duration-heading strong {
|
||
color: var(--creation-text) !important;
|
||
font-size: 11px !important;
|
||
font-weight: 600 !important;
|
||
}
|
||
|
||
.creation-choice-grid { gap: 3px !important; }
|
||
.creation-choice-grid.is-ratio { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
|
||
.creation-choice-grid.is-resolution { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
|
||
|
||
.creation-choice-grid.is-ratio button,
|
||
.creation-choice-grid.is-resolution button,
|
||
.creation-choice-grid.is-quality button,
|
||
.creation-choice-grid.is-count button {
|
||
display: flex !important;
|
||
min-height: 34px !important;
|
||
align-items: center !important;
|
||
justify-content: center !important;
|
||
gap: 7px;
|
||
border: 0 !important;
|
||
border-radius: 6px !important;
|
||
background: transparent !important;
|
||
color: var(--creation-muted) !important;
|
||
font-size: 11px !important;
|
||
font-weight: 500;
|
||
transition: background-color 160ms var(--motion-ease-out), color 160ms var(--motion-ease-out), transform 160ms var(--motion-ease-out) !important;
|
||
}
|
||
|
||
.creation-choice-grid button:hover {
|
||
background: rgba(255, 255, 255, .055) !important;
|
||
color: var(--creation-text) !important;
|
||
}
|
||
|
||
.creation-choice-grid button.is-selected {
|
||
background: rgba(255, 255, 255, .105) !important;
|
||
color: var(--creation-text) !important;
|
||
}
|
||
|
||
.creation-choice-grid .creation-ratio-preview {
|
||
display: grid;
|
||
width: 18px !important;
|
||
height: 14px !important;
|
||
flex: 0 0 18px;
|
||
place-items: center;
|
||
}
|
||
|
||
.creation-choice-grid .creation-ratio-preview > span {
|
||
max-width: 18px;
|
||
max-height: 14px;
|
||
border-width: 1px !important;
|
||
border-radius: 2px !important;
|
||
}
|
||
|
||
.creation-custom-trigger {
|
||
display: inline-flex !important;
|
||
height: 26px !important;
|
||
align-items: center;
|
||
gap: 4px;
|
||
margin: 3px 0 0 2px;
|
||
border: 0 !important;
|
||
border-radius: 4px;
|
||
background: transparent !important;
|
||
padding: 0 2px !important;
|
||
color: var(--creation-muted) !important;
|
||
font-size: 10px !important;
|
||
transition: color 160ms var(--motion-ease-out), background-color 160ms var(--motion-ease-out) !important;
|
||
}
|
||
|
||
.creation-custom-trigger svg { width: 12px; height: 12px; }
|
||
.creation-custom-trigger:hover { background: rgba(255, 255, 255, .05) !important; color: var(--creation-text) !important; }
|
||
|
||
.creation-custom-value,
|
||
.creation-custom-value.is-duration {
|
||
display: flex !important;
|
||
width: 100% !important;
|
||
height: 32px !important;
|
||
align-items: center;
|
||
gap: 8px;
|
||
margin-top: 5px !important;
|
||
border: 0 !important;
|
||
border-radius: 6px !important;
|
||
background: rgba(255, 255, 255, .055) !important;
|
||
padding: 0 9px !important;
|
||
color: var(--creation-muted) !important;
|
||
font-size: 10px !important;
|
||
}
|
||
|
||
.creation-custom-value input {
|
||
min-width: 0;
|
||
flex: 1;
|
||
border: 0 !important;
|
||
outline: 0 !important;
|
||
background: transparent !important;
|
||
color: var(--creation-text) !important;
|
||
font-size: 11px !important;
|
||
}
|
||
|
||
.creation-custom-value em { color: var(--creation-muted); font-size: 11px; font-style: normal; }
|
||
|
||
.creation-duration-custom-field {
|
||
display: inline-flex;
|
||
min-width: 64px;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
gap: 3px;
|
||
margin-left: auto;
|
||
color: var(--creation-text);
|
||
font-size: 11px;
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
|
||
.creation-custom-value .creation-duration-custom-field input {
|
||
width: 42px;
|
||
flex: 0 0 42px;
|
||
padding: 0;
|
||
text-align: right;
|
||
}
|
||
|
||
.creation-duration-custom-field em { color: currentColor; }
|
||
|
||
.creation-duration-menu {
|
||
display: block !important;
|
||
width: 262px !important;
|
||
padding: 12px !important;
|
||
}
|
||
|
||
.creation-duration-choices {
|
||
display: grid !important;
|
||
grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
|
||
gap: 3px !important;
|
||
}
|
||
|
||
.creation-duration-choices button {
|
||
height: 32px !important;
|
||
min-width: 0;
|
||
border: 0 !important;
|
||
border-radius: 6px !important;
|
||
background: transparent !important;
|
||
color: var(--creation-muted) !important;
|
||
font-size: 11px !important;
|
||
font-weight: 500;
|
||
transition: background-color 160ms var(--motion-ease-out), color 160ms var(--motion-ease-out) !important;
|
||
}
|
||
|
||
.creation-duration-choices button:hover { background: rgba(255, 255, 255, .055) !important; color: var(--creation-text) !important; }
|
||
.creation-duration-choices button.is-selected { background: rgba(255, 255, 255, .105) !important; color: var(--creation-text) !important; }
|
||
|
||
html:not(.dark) .creation-control-popover-surface { background: rgba(255, 255, 255, .98) !important; box-shadow: 0 20px 48px rgba(25, 29, 35, .14) !important; }
|
||
html:not(.dark) .creation-choice-grid button:hover,
|
||
html:not(.dark) .creation-duration-choices button:hover,
|
||
html:not(.dark) .creation-custom-trigger:hover { background: rgba(28, 32, 37, .055) !important; }
|
||
html:not(.dark) .creation-choice-grid button.is-selected,
|
||
html:not(.dark) .creation-duration-choices button.is-selected { background: rgba(28, 32, 37, .09) !important; }
|
||
html:not(.dark) .creation-custom-value { background: rgba(28, 32, 37, .055) !important; }
|
||
|
||
/* 历史对话使用右侧时间轴，避免重新引入占据主舞台的常驻会话栏。 */
|
||
.creation-top-actions {
|
||
position: absolute;
|
||
z-index: 30;
|
||
top: 24px;
|
||
right: 28px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
}
|
||
|
||
.creation-top-action {
|
||
display: grid;
|
||
width: 36px;
|
||
height: 36px;
|
||
place-items: center;
|
||
border: 0;
|
||
border-radius: 8px;
|
||
background: rgba(255, 255, 255, .06);
|
||
color: var(--creation-muted);
|
||
transition: background-color 150ms ease, color 150ms ease, transform 150ms var(--motion-ease-out);
|
||
}
|
||
|
||
.creation-top-action svg { width: 16px; height: 16px; }
|
||
.creation-top-action:hover,
|
||
.creation-top-action[aria-expanded="true"] { background: rgba(255, 255, 255, .12); color: var(--creation-text); transform: translateY(-1px); }
|
||
.creation-top-action:focus-visible { outline: 2px solid color-mix(in srgb, #83d6ec 70%, transparent); outline-offset: 2px; }
|
||
html:not(.dark) .creation-top-action { background: rgba(28, 32, 37, .055); }
|
||
html:not(.dark) .creation-top-action:hover,
|
||
html:not(.dark) .creation-top-action[aria-expanded="true"] { background: rgba(28, 32, 37, .11); }
|
||
|
||
.creation-history-drawer,
|
||
.creation-history-drawer-root {
|
||
--creation-history-bg: #111316;
|
||
--creation-history-surface: #1a1d22;
|
||
--creation-history-hover: #20242a;
|
||
--creation-history-text: #f1f3f4;
|
||
--creation-history-muted: #858c96;
|
||
--creation-history-faint: #555c66;
|
||
--creation-history-line: rgba(255, 255, 255, .09);
|
||
--creation-history-accent: #83d6ec;
|
||
}
|
||
|
||
html:not(.dark) .creation-history-drawer,
|
||
html:not(.dark) .creation-history-drawer-root {
|
||
--creation-history-bg: #f8f8f6;
|
||
--creation-history-surface: #ffffff;
|
||
--creation-history-hover: #f0f1ee;
|
||
--creation-history-text: #202328;
|
||
--creation-history-muted: #747c85;
|
||
--creation-history-faint: #b0b6bc;
|
||
--creation-history-line: rgba(28, 32, 37, .11);
|
||
--creation-history-accent: #1688a3;
|
||
}
|
||
|
||
.creation-history-drawer.ant-drawer-content,
|
||
.creation-history-drawer .ant-drawer-content,
|
||
.creation-history-drawer-root .ant-drawer-content { background: var(--creation-history-bg); color: var(--creation-history-text); }
|
||
.creation-history-drawer .ant-drawer-header { min-height: 58px; border-bottom: 1px solid var(--creation-history-line); padding: 10px 14px 10px 18px; }
|
||
.creation-history-drawer .ant-drawer-title { color: var(--creation-history-text); }
|
||
.creation-history-drawer .ant-drawer-close { display: grid; width: 36px; height: 36px; place-items: center; margin-inline-end: 8px; border-radius: 8px; color: var(--creation-history-muted); }
|
||
.creation-history-drawer .ant-drawer-close:hover { background: var(--creation-history-hover); color: var(--creation-history-text); }
|
||
.creation-history-drawer .ant-drawer-close:focus-visible { outline: 2px solid color-mix(in srgb, var(--creation-history-accent) 66%, transparent); outline-offset: 1px; }
|
||
.creation-history-drawer .ant-drawer-body { overscroll-behavior: contain; }
|
||
|
||
.creation-history-title { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
|
||
.creation-history-title > span { font-size: 14px; font-weight: 650; letter-spacing: 0; }
|
||
.creation-history-title small { color: var(--creation-history-muted); font-size: 10px; font-weight: 500; }
|
||
|
||
.creation-history-timeline { margin: 0; padding: 8px 12px 18px 18px; list-style: none; }
|
||
.creation-history-timeline > li { position: relative; min-width: 0; padding-left: 14px; content-visibility: auto; contain-intrinsic-size: 0 68px; }
|
||
.creation-history-timeline > li::before { position: absolute; top: 0; bottom: 0; left: 2px; width: 1px; background: var(--creation-history-line); content: ""; }
|
||
.creation-history-timeline > li:first-child::before { top: 15px; }
|
||
.creation-history-timeline > li:last-child::before { bottom: calc(100% - 16px); }
|
||
.creation-history-dot { position: absolute; z-index: 1; top: 13px; left: 0; width: 5px; height: 5px; border: 1px solid var(--creation-history-bg); border-radius: 50%; background: var(--creation-history-faint); box-sizing: content-box; }
|
||
.creation-history-timeline > li.is-active .creation-history-dot { background: var(--creation-history-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--creation-history-accent) 12%, transparent); }
|
||
|
||
.creation-history-timeline button {
|
||
display: flex;
|
||
width: 100%;
|
||
min-height: 64px;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
justify-content: center;
|
||
gap: 2px;
|
||
border: 0;
|
||
border-radius: 7px;
|
||
background: transparent;
|
||
padding: 7px 9px;
|
||
color: var(--creation-history-text);
|
||
text-align: left;
|
||
transition: background-color 150ms ease;
|
||
}
|
||
|
||
.creation-history-timeline button:hover { background: var(--creation-history-hover); }
|
||
.creation-history-timeline button:focus-visible { outline: 2px solid color-mix(in srgb, var(--creation-history-accent) 68%, transparent); outline-offset: -2px; }
|
||
.creation-history-timeline > li.is-active button { background: color-mix(in srgb, var(--creation-history-accent) 5%, var(--creation-history-surface)); }
|
||
.creation-history-time { display: flex; width: 100%; align-items: center; justify-content: space-between; color: var(--creation-history-muted); font-size: 9px; font-variant-numeric: tabular-nums; line-height: 1.3; }
|
||
.creation-history-time em { color: var(--creation-history-faint); font-size: 9px; font-style: normal; }
|
||
.creation-history-item-heading { width: 100%; min-width: 0; overflow: hidden; font-size: 12px; font-weight: 630; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
|
||
.creation-history-snippet { display: block; width: 100%; overflow: hidden; color: var(--creation-history-muted); font-size: 10px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
|
||
|
||
@media (max-width: 640px) {
|
||
.creation-top-actions { top: 14px; right: 14px; }
|
||
.creation-top-action { width: 40px; height: 40px; }
|
||
.creation-history-drawer { width: 100vw !important; max-width: 100vw; }
|
||
.creation-history-drawer-root .ant-drawer-content-wrapper { width: 100vw !important; max-width: 100vw; }
|
||
.creation-history-timeline { padding-right: 12px; padding-left: 18px; }
|
||
}
|
||
|
||
/* -------------------------------------------------------------------------
|
||
Monochrome product surfaces
|
||
页面级黑白主题收口：焦点用边框表达，浮层使用单一表面，避免渐变、米色和蓝紫光圈在不同页面漂移。
|
||
------------------------------------------------------------------------- */
|
||
.creation-home {
|
||
--creation-accent: var(--workspace-accent);
|
||
--creation-bg: var(--workspace-page);
|
||
--creation-surface: color-mix(in srgb, var(--background) 96%, var(--foreground) 4%);
|
||
--creation-surface-muted: color-mix(in srgb, var(--background) 91%, var(--foreground) 9%);
|
||
--creation-surface-hover: color-mix(in srgb, var(--background) 86%, var(--foreground) 14%);
|
||
--creation-surface-selected: color-mix(in srgb, var(--background) 80%, var(--foreground) 20%);
|
||
--creation-border: color-mix(in srgb, var(--foreground) 14%, transparent);
|
||
--creation-border-strong: color-mix(in srgb, var(--foreground) 24%, transparent);
|
||
}
|
||
|
||
:where(.ant-input, .ant-input-affix-wrapper, .ant-input-number, .ant-select-selector, .ant-select-multiple .ant-select-selection-search-input) {
|
||
box-shadow: none !important;
|
||
}
|
||
|
||
:where(.ant-input:focus, .ant-input-focused, .ant-input-affix-wrapper-focused, .ant-input-number-focused, .ant-select-focused .ant-select-selector) {
|
||
border-color: var(--foreground) !important;
|
||
box-shadow: none !important;
|
||
outline: none !important;
|
||
}
|
||
|
||
:where(.ant-input:hover, .ant-input-affix-wrapper:hover, .ant-input-number:hover, .ant-select:not(.ant-select-disabled):hover .ant-select-selector) {
|
||
border-color: color-mix(in srgb, var(--foreground) 42%, var(--border)) !important;
|
||
}
|
||
|
||
:where(.ant-select-dropdown, .ant-dropdown-menu, .ant-popover-inner, .ant-picker-dropdown .ant-picker-panel-container) {
|
||
border: 1px solid var(--border) !important;
|
||
border-radius: var(--r-md) !important;
|
||
background: var(--popover) !important;
|
||
background-image: none !important;
|
||
box-shadow: var(--shadow-lg) !important;
|
||
backdrop-filter: none !important;
|
||
}
|
||
|
||
:where(.ant-select-item-option, .ant-dropdown-menu-item, .ant-cascader-menu-item) {
|
||
border-radius: var(--r-sm) !important;
|
||
color: var(--popover-foreground) !important;
|
||
}
|
||
|
||
:where(.ant-select-item-option-active:not(.ant-select-item-option-disabled), .ant-dropdown-menu-item:hover, .ant-cascader-menu-item-active) {
|
||
background: color-mix(in srgb, var(--popover-foreground) 6%, var(--popover)) !important;
|
||
}
|
||
|
||
:where(.ant-select-item-option-selected:not(.ant-select-item-option-disabled), .ant-dropdown-menu-item-selected) {
|
||
background: color-mix(in srgb, var(--popover-foreground) 12%, var(--popover)) !important;
|
||
color: var(--popover-foreground) !important;
|
||
font-weight: 600;
|
||
}
|
||
|
||
:where(.ant-tag-success, .ant-tag-warning, .ant-tag-processing, .ant-tag-cyan, .ant-tag-blue, .ant-tag-green, .ant-tag-gold, .ant-tag-orange) {
|
||
border-color: color-mix(in srgb, var(--foreground) 18%, transparent) !important;
|
||
background: color-mix(in srgb, var(--foreground) 7%, transparent) !important;
|
||
color: color-mix(in srgb, var(--foreground) 76%, transparent) !important;
|
||
}
|
||
|
||
body.app-spatial-overlays :where(.ant-dropdown-menu, .ant-select-dropdown, .ant-popover-inner, .ant-modal-content, .ant-drawer-content, .ant-message-notice-content, .ant-notification-notice) {
|
||
background: var(--popover) !important;
|
||
background-image: none !important;
|
||
box-shadow: var(--shadow-xl) !important;
|
||
backdrop-filter: none !important;
|
||
}
|
||
|
||
body.app-spatial-overlays :where(.ant-modal-mask, .ant-drawer-mask) {
|
||
background: color-mix(in srgb, var(--foreground) 48%, transparent) !important;
|
||
backdrop-filter: blur(3px) !important;
|
||
}
|
||
|
||
.app-workspace-shell.is-spatial .app-workspace-sidebar {
|
||
background: var(--workspace-navigation) !important;
|
||
background-image: none !important;
|
||
box-shadow: none !important;
|
||
backdrop-filter: none !important;
|
||
}
|