refactor(platform): 用户工作台 - 收敛无框视觉并统一导航图标与列表间距
This commit is contained in:
ddCat committed
1 parent
f15a385ef3
commit
ed3757472f
5 files changed
+168
-205
No files matched your search
@@ -65,7 +65,7 @@ export function AppWorkspaceShell({ children }: { children: ReactNode }) {
|
||||
active ? "is-active font-medium" : "",
|
||||
)}
|
||||
>
|
||||
<Icon className="size-5 shrink-0" />
|
||||
<Icon className="app-workspace-nav-icon shrink-0" strokeWidth={1.8} />
|
||||
</Link>
|
||||
);
|
||||
};
|
||||
@@ -118,7 +118,7 @@ export function AppWorkspaceShell({ children }: { children: ReactNode }) {
|
||||
<div className="app-workspace-rail hidden min-h-0 flex-col overflow-y-auto lg:flex">
|
||||
<div className="app-workspace-rail-header flex h-16 shrink-0 items-center justify-center">
|
||||
<Link to="/home" className="grid size-10 shrink-0 place-items-center rounded-md text-foreground/55 transition-colors hover:bg-surface-hover hover:text-foreground" title="工作台首页">
|
||||
<Home className="size-4" />
|
||||
<Home className="app-workspace-nav-icon" strokeWidth={1.8} />
|
||||
</Link>
|
||||
</div>
|
||||
<div className="app-workspace-rail-middle flex min-h-0 w-full flex-1 flex-col items-center justify-start overflow-y-auto px-3 pt-3">
|
||||
@@ -141,7 +141,7 @@ export function AppWorkspaceShell({ children }: { children: ReactNode }) {
|
||||
|
||||
{/* 移动端：抽屉完整导航 */}
|
||||
<div className="app-workspace-mobile-nav flex min-h-0 flex-1 flex-col overflow-hidden lg:hidden">
|
||||
<div className="flex h-14 shrink-0 items-center gap-2 border-b border-border/55 px-3">
|
||||
<div className="flex h-14 shrink-0 items-center gap-2 px-3">
|
||||
<Link to="/" className="flex min-w-0 items-center gap-2" title="影策">
|
||||
<span className="app-workspace-brand-mark grid size-7 shrink-0 place-items-center rounded-md bg-foreground text-background"><InfinityIcon className="size-4" /></span>
|
||||
<span className="truncate text-[var(--fs-body)] font-semibold">影策</span>
|
||||
@@ -169,14 +169,14 @@ export function AppWorkspaceShell({ children }: { children: ReactNode }) {
|
||||
onClick={handleNavClick}
|
||||
className={cn("app-workspace-nav-link relative mb-1 flex h-11 shrink-0 items-center gap-3 rounded-md px-2.5 text-[var(--fs-body)] transition-colors", active ? "is-active font-medium" : "text-foreground/55 hover:bg-surface-hover hover:text-foreground/85")}
|
||||
>
|
||||
<Icon className="size-4 shrink-0" />
|
||||
<Icon className="app-workspace-nav-icon shrink-0" strokeWidth={1.8} />
|
||||
<span className="truncate">{tool.label}</span>
|
||||
</Link>
|
||||
</Fragment>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
<div className="shrink-0 border-t border-border/55 p-2">
|
||||
<div className="shrink-0 p-2">
|
||||
<WorkspaceSidebarFooter
|
||||
expandedClassName="flex"
|
||||
collapsedClassName="hidden"
|
||||
|
||||
@@ -31,7 +31,7 @@ export function PageHeader({ title, description, meta, actions }: { title: strin
|
||||
|
||||
export function ListToolbar({ children, trailing, active, onReset, className }: { children: ReactNode; trailing?: ReactNode; active?: boolean; onReset?: () => void; className?: string }) {
|
||||
return (
|
||||
<div className={cn("mt-3 flex min-h-12 flex-col gap-2 border-b border-border/75 pb-3 lg:flex-row lg:items-center lg:justify-between", className)}>
|
||||
<div className={cn("mt-3 flex min-h-12 flex-col gap-2 pb-3 lg:flex-row lg:items-center lg:justify-between", className)}>
|
||||
<div className="flex min-w-0 flex-1 flex-wrap items-center gap-2.5">{children}</div>
|
||||
<div className="flex shrink-0 flex-wrap items-center gap-2">
|
||||
{active && onReset ? <Button type="text" icon={<RotateCcw className="size-3.5" />} onClick={onReset}>重置</Button> : null}
|
||||
@@ -46,13 +46,13 @@ export function TableSurface({ children, className }: { children: ReactNode; cla
|
||||
}
|
||||
|
||||
export function CollectionGrid({ children, className }: { children: ReactNode; className?: string }) {
|
||||
return <div className={cn("mt-4 grid grid-cols-1 gap-x-4 gap-y-5 sm:grid-cols-[repeat(auto-fill,minmax(248px,1fr))]", className)}>{children}</div>;
|
||||
return <div className={cn("mt-4 grid grid-cols-1 gap-4 sm:grid-cols-[repeat(auto-fill,minmax(248px,1fr))]", className)}>{children}</div>;
|
||||
}
|
||||
|
||||
export function PaginationBar({ current, pageSize, total, onChange, pageSizeOptions = [20, 50, 100] }: { current: number; pageSize: number; total: number; onChange: (page: number, pageSize: number) => void; pageSizeOptions?: number[] }) {
|
||||
if (total <= pageSize && current === 1) return null;
|
||||
return (
|
||||
<div className="app-pagination-bar mt-4 flex min-h-10 min-w-0 items-center justify-end border-t border-border/70 px-2 py-1.5">
|
||||
<div className="app-pagination-bar mt-4 flex min-h-10 min-w-0 items-center justify-end px-2 py-1.5">
|
||||
<Pagination
|
||||
size="small"
|
||||
current={current}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Infinity as InfinityIcon, PanelLeftClose, PanelLeftOpen, Settings2 } from "lucide-react";
|
||||
import { Infinity as InfinityIcon, PanelLeftClose, PanelLeftOpen, Settings } from "lucide-react";
|
||||
import { Link } from "react-router";
|
||||
|
||||
import { SystemAnnouncementCenter } from "@/components/layout/system-announcement-center";
|
||||
@@ -12,7 +12,7 @@ export function WorkspaceTopBar({ sidebarOpen, onToggleSidebar }: { sidebarOpen:
|
||||
const user = useUserStore((state) => state.user);
|
||||
|
||||
return (
|
||||
<header className="app-workspace-topbar flex shrink-0 items-center justify-between gap-3 border-b px-4 sm:px-5">
|
||||
<header className="app-workspace-topbar flex shrink-0 items-center justify-between gap-3 px-4 sm:px-5">
|
||||
<div className="flex min-w-0 items-center gap-2">
|
||||
<button type="button" className="app-workspace-topbar-icon-button" aria-label={sidebarOpen ? "收起侧栏" : "展开侧栏"} onClick={onToggleSidebar}>
|
||||
{sidebarOpen ? <PanelLeftClose className="size-4" /> : <PanelLeftOpen className="size-4" />}
|
||||
@@ -28,7 +28,7 @@ export function WorkspaceTopBar({ sidebarOpen, onToggleSidebar }: { sidebarOpen:
|
||||
{user ? <SystemAnnouncementCenter userId={user.id} className="app-workspace-topbar-icon-button" /> : null}
|
||||
<AnimatedThemeToggler className="app-workspace-topbar-icon-button" theme={theme} onThemeChange={setTheme} aria-label="切换主题" />
|
||||
<Link to="/settings" className="app-workspace-topbar-icon-button" aria-label="设置" title="设置">
|
||||
<Settings2 className="size-4" />
|
||||
<Settings className="size-4" />
|
||||
</Link>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@@ -1,28 +1,28 @@
|
||||
import { BookOpenCheck, Coins, FolderKanban, Images, ListChecks, Maximize2, MessageSquarePlus, Settings2 } from "lucide-react";
|
||||
import { CircleDollarSign, Clapperboard, Images, LibraryBig, ListTodo, PanelsTopLeft, Settings, WandSparkles } from "lucide-react";
|
||||
|
||||
export const navigationTools = [
|
||||
{
|
||||
slug: "create",
|
||||
label: "创作",
|
||||
icon: MessageSquarePlus,
|
||||
icon: WandSparkles,
|
||||
section: "创作空间",
|
||||
},
|
||||
{
|
||||
slug: "projects",
|
||||
label: "短剧创作",
|
||||
icon: FolderKanban,
|
||||
icon: Clapperboard,
|
||||
section: "创作空间",
|
||||
},
|
||||
{
|
||||
slug: "canvas",
|
||||
label: "画布",
|
||||
icon: Maximize2,
|
||||
icon: PanelsTopLeft,
|
||||
section: "创作空间",
|
||||
},
|
||||
{
|
||||
slug: "tasks",
|
||||
label: "任务",
|
||||
icon: ListChecks,
|
||||
icon: ListTodo,
|
||||
section: "创作空间",
|
||||
},
|
||||
{
|
||||
@@ -34,19 +34,19 @@ export const navigationTools = [
|
||||
{
|
||||
slug: "skills",
|
||||
label: "技能库",
|
||||
icon: BookOpenCheck,
|
||||
icon: LibraryBig,
|
||||
section: "工作台管理",
|
||||
},
|
||||
{
|
||||
slug: "wallet",
|
||||
label: "积分中心",
|
||||
icon: Coins,
|
||||
icon: CircleDollarSign,
|
||||
section: "工作台管理",
|
||||
},
|
||||
{
|
||||
slug: "settings",
|
||||
label: "设置",
|
||||
icon: Settings2,
|
||||
icon: Settings,
|
||||
section: "工作台管理",
|
||||
},
|
||||
] as const;
|
||||
|
||||
+149
-186
@@ -123,26 +123,19 @@
|
||||
--project-library-surface: #f5f5f5;
|
||||
--project-library-cover-surface: #ececec;
|
||||
--project-library-icon-surface: #ffffff;
|
||||
--project-library-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
|
||||
--project-library-shadow: none;
|
||||
|
||||
/* === 新卡片系统 Token（对应 docs/ui-design-system.md）=== */
|
||||
/* 卡片表面 - 纯白卡片浮在浅灰页面上 */
|
||||
--card-surface: #ffffff;
|
||||
--card-surface-hover: #ffffff;
|
||||
--card-surface-raised: #f8f8f8;
|
||||
/* 卡片表面通过明度分层，普通卡片不依赖描边和投影。 */
|
||||
--card-surface: #f7f7f7;
|
||||
--card-surface-hover: #f0f0f0;
|
||||
--card-surface-raised: #ececec;
|
||||
|
||||
/* 卡片边框 - 极淡，靠投影建立层次 */
|
||||
--card-border: rgba(17, 17, 17, 0.06);
|
||||
--card-border-hover: rgba(17, 17, 17, 0.08);
|
||||
--card-border: transparent;
|
||||
--card-border-hover: transparent;
|
||||
|
||||
/* 卡片投影 - 微妙轻盈，像Apple/Figma */
|
||||
--card-elevation:
|
||||
0 1px 2px rgba(0, 0, 0, 0.04),
|
||||
0 2px 4px rgba(0, 0, 0, 0.02);
|
||||
--card-elevation-hover:
|
||||
0 4px 12px rgba(0, 0, 0, 0.06),
|
||||
0 8px 24px rgba(0, 0, 0, 0.04),
|
||||
0 12px 36px rgba(0, 0, 0, 0.02);
|
||||
--card-elevation: none;
|
||||
--card-elevation-hover: none;
|
||||
|
||||
/* 画布卡片封面区 - 浅灰衬托内容 */
|
||||
--canvas-cover-surface: #f5f5f5;
|
||||
@@ -391,7 +384,7 @@
|
||||
--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(--bg-secondary);
|
||||
--workspace-sidebar: var(--workspace-navigation);
|
||||
--workspace-accent: #171717;
|
||||
--workspace-accent-soft: rgba(17, 17, 17, 0.07);
|
||||
|
||||
@@ -521,7 +514,7 @@
|
||||
--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(--bg-secondary);
|
||||
--workspace-sidebar: var(--workspace-navigation);
|
||||
--workspace-accent: #f5f5f5;
|
||||
--workspace-accent-soft: rgba(255, 255, 255, 0.09);
|
||||
--chart-1: oklch(0.87 0 0);
|
||||
@@ -600,24 +593,18 @@
|
||||
--project-library-surface: #151515;
|
||||
--project-library-cover-surface: #1c1c1c;
|
||||
--project-library-icon-surface: #0d0d0d;
|
||||
--project-library-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
|
||||
--project-library-shadow: none;
|
||||
|
||||
/* === 新卡片系统 Token - Dark（对应 docs/ui-design-system.md）=== */
|
||||
--card-surface: #1f1f1f;
|
||||
--card-surface-hover: #242424;
|
||||
--card-surface-raised: #2a2a2a;
|
||||
--card-surface: #171717;
|
||||
--card-surface-hover: #1e1e1e;
|
||||
--card-surface-raised: #252525;
|
||||
|
||||
--card-border: rgba(255, 255, 255, 0.08);
|
||||
--card-border-hover: rgba(255, 255, 255, 0.14);
|
||||
--card-border: transparent;
|
||||
--card-border-hover: transparent;
|
||||
|
||||
--card-elevation:
|
||||
0 2px 6px rgba(0, 0, 0, 0.32),
|
||||
0 4px 12px rgba(0, 0, 0, 0.24),
|
||||
0 6px 20px rgba(0, 0, 0, 0.16);
|
||||
--card-elevation-hover:
|
||||
0 8px 20px rgba(0, 0, 0, 0.40),
|
||||
0 12px 32px rgba(0, 0, 0, 0.32),
|
||||
0 16px 48px rgba(0, 0, 0, 0.24);
|
||||
--card-elevation: none;
|
||||
--card-elevation-hover: none;
|
||||
|
||||
--canvas-cover-surface: #171717;
|
||||
--canvas-icon-surface: #0d0d0d;
|
||||
@@ -665,7 +652,7 @@
|
||||
--page-topbar-border: var(--workspace-border);
|
||||
--canvas-topbar-surface: var(--workspace-glass-surface);
|
||||
--canvas-topbar-border: var(--workspace-glass-border);
|
||||
--rail-icon-size: 20px;
|
||||
--rail-icon-size: 18px;
|
||||
|
||||
/* Canvas 创建菜单：固定行高保证图标、徽标和单行标签互不挤占 */
|
||||
--canvas-create-node-height: var(--space-12);
|
||||
@@ -864,7 +851,7 @@
|
||||
--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(--bg-secondary);
|
||||
--workspace-sidebar: var(--workspace-navigation);
|
||||
--workspace-accent: #171717;
|
||||
--workspace-accent-soft: rgba(17, 17, 17, 0.065);
|
||||
background-color: var(--workspace-canvas);
|
||||
@@ -885,7 +872,7 @@
|
||||
--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(--bg-secondary);
|
||||
--workspace-sidebar: var(--workspace-navigation);
|
||||
--workspace-accent: #f5f5f5;
|
||||
--workspace-accent-soft: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
@@ -907,7 +894,6 @@
|
||||
|
||||
.app-workspace-shell.is-spatial .app-workspace-sidebar {
|
||||
border: 0;
|
||||
border-right: 1px solid var(--workspace-border);
|
||||
border-radius: 0;
|
||||
background: var(--workspace-sidebar);
|
||||
box-shadow: none;
|
||||
@@ -1058,14 +1044,11 @@
|
||||
.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);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.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);
|
||||
display: none;
|
||||
}
|
||||
|
||||
.app-workspace-shell.is-spatial .app-workspace-stage {
|
||||
@@ -1207,7 +1190,7 @@
|
||||
}
|
||||
|
||||
.app-workspace-sidebar {
|
||||
border-right: 1px solid var(--workspace-border);
|
||||
border: 0;
|
||||
background: var(--workspace-sidebar);
|
||||
transition: width var(--motion-state) var(--ease-aceternity);
|
||||
}
|
||||
@@ -1233,8 +1216,8 @@
|
||||
min-height: var(--page-topbar-h);
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
background: var(--page-topbar-surface);
|
||||
border-bottom: 1px solid var(--page-topbar-border);
|
||||
background: var(--workspace-content);
|
||||
border-bottom: 0;
|
||||
backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
|
||||
}
|
||||
|
||||
@@ -1261,9 +1244,9 @@
|
||||
position: relative;
|
||||
z-index: var(--z-toolbar);
|
||||
height: var(--page-topbar-h);
|
||||
background: var(--page-topbar-surface);
|
||||
border-color: var(--page-topbar-border);
|
||||
box-shadow: 0 10px 24px -20px color-mix(in srgb, var(--workspace-border) 85%, transparent);
|
||||
background: var(--workspace-navigation);
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
|
||||
}
|
||||
|
||||
@@ -1279,6 +1262,14 @@
|
||||
transition: background-color var(--motion-instant) ease-out, color var(--motion-instant) ease-out;
|
||||
}
|
||||
|
||||
.app-workspace-topbar-icon-button > svg,
|
||||
.app-workspace-topbar-icon-button > span > svg,
|
||||
.app-workspace-nav-icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
stroke-width: 1.8;
|
||||
}
|
||||
|
||||
.app-workspace-topbar-icon-button:hover {
|
||||
background: var(--surface-hover);
|
||||
color: var(--foreground);
|
||||
@@ -1376,11 +1367,7 @@
|
||||
}
|
||||
|
||||
.app-workspace-rail .app-workspace-nav-link.is-active::before {
|
||||
display: block !important;
|
||||
left: -8px;
|
||||
width: 2px;
|
||||
height: 18px;
|
||||
background: var(--workspace-accent);
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* 底部账号区：40px 触点 + 头像 hover 反馈增强 */
|
||||
@@ -1398,13 +1385,7 @@
|
||||
}
|
||||
|
||||
.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: "";
|
||||
display: none;
|
||||
}
|
||||
|
||||
.app-workspace-icon-button {
|
||||
@@ -3352,20 +3333,19 @@
|
||||
.app-collection-card {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--border);
|
||||
border: 0;
|
||||
border-radius: 10px;
|
||||
background: var(--workspace-surface-strong);
|
||||
background: var(--card-surface);
|
||||
transition:
|
||||
background-color var(--motion-instant) ease-out,
|
||||
border-color var(--motion-instant) ease-out,
|
||||
box-shadow var(--motion-instant) ease-out;
|
||||
transform var(--motion-state) var(--motion-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%);
|
||||
background: var(--card-surface-hover);
|
||||
box-shadow: none;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
/* 画布库采用电影档案的浏览节奏：搜索轻、画面重、信息退后。 */
|
||||
@@ -3420,32 +3400,32 @@
|
||||
.canvas-library-count { display: flex; align-items: baseline; gap: 6px; justify-self: end; color: color-mix(in srgb, var(--foreground) 38%, transparent); font-size: var(--fs-micro); white-space: nowrap; }
|
||||
.canvas-library-count strong { color: var(--foreground); font-size: var(--fs-heading-lg); font-variant-numeric: tabular-nums; font-weight: 500; letter-spacing: .02em; }
|
||||
|
||||
/* 画布库网格 - 优化间距（对应 Bento Grid 原则）*/
|
||||
.canvas-library-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: start; gap: 28px 22px; }
|
||||
.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; }
|
||||
/* 画布库保持固定列节奏，行列间距一致。 */
|
||||
.canvas-library-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: stretch; gap: var(--space-5) var(--space-4); }
|
||||
.canvas-library-page .app-pagination-bar { position: static; margin-top: var(--space-4); border: 0; background: transparent; padding: var(--space-1-half) var(--space-2); backdrop-filter: none; }
|
||||
|
||||
/* === 画布卡片重构（对应 docs/ui-design-system.md）=== */
|
||||
.app-canvas-project-card { min-width: 0; cursor: pointer; color: var(--foreground); transition: transform 240ms var(--motion-ease-out), box-shadow 280ms var(--motion-ease-out), background-color 200ms ease-out, border-color 200ms ease-out; }
|
||||
.app-canvas-project-card { min-width: 0; cursor: pointer; color: var(--foreground); transition: transform var(--motion-state) var(--motion-ease-out), background-color var(--motion-state) ease-out; }
|
||||
|
||||
/* 创建卡片 - 更吸引人的设计 */
|
||||
.app-canvas-create-card { display: flex; min-width: 0; cursor: pointer; flex-direction: column; align-items: stretch; border: 0; background: transparent; padding: 0; color: var(--foreground); text-align: left; transition: transform 240ms var(--motion-ease-out); }
|
||||
.app-canvas-create-card:hover:not(:disabled), .app-canvas-create-card:focus-visible { transform: translateY(-6px); }
|
||||
.app-canvas-create-card:active:not(:disabled) { transform: translateY(-3px) scale(0.995); transition-duration: 120ms; }
|
||||
/* 创建卡与内容卡使用相同表面和克制位移。 */
|
||||
.app-canvas-create-card { display: flex; min-width: 0; cursor: pointer; flex-direction: column; align-items: stretch; border: 0; border-radius: var(--r-lg); background: var(--card-surface); padding: 0; color: var(--foreground); text-align: left; transition: transform var(--motion-state) var(--motion-ease-out), background-color var(--motion-state) ease-out; }
|
||||
.app-canvas-create-card:hover:not(:disabled), .app-canvas-create-card:focus-visible { background: var(--card-surface-hover); transform: translateY(-2px); }
|
||||
.app-canvas-create-card:active:not(:disabled) { transform: translateY(-1px) scale(0.995); transition-duration: var(--motion-instant); }
|
||||
.app-canvas-create-card:focus-visible { outline: 0; }
|
||||
.app-canvas-create-preview { display: grid; aspect-ratio: 16 / 9; place-items: center; overflow: hidden; border-radius: var(--r-xl); background: var(--card-surface); box-shadow: var(--card-elevation); border: 2px dashed rgba(17, 17, 17, 0.12); transition: background-color 240ms ease-out, box-shadow 280ms var(--motion-ease-out), border-color 200ms ease-out, border-style 200ms ease-out; }
|
||||
.app-canvas-create-card:hover:not(:disabled) .app-canvas-create-preview, .app-canvas-create-card:focus-visible .app-canvas-create-preview { background: var(--card-surface); border-color: var(--workspace-accent); border-style: solid; box-shadow: var(--card-elevation-hover), 0 0 0 3px color-mix(in srgb, var(--workspace-accent) 12%, transparent); }
|
||||
.app-canvas-create-icon { width: 38px; height: 38px; color: color-mix(in srgb, var(--foreground) 32%, transparent); stroke-width: 1.2; transition: color 240ms ease-out, transform 280ms var(--motion-ease-out); }
|
||||
.app-canvas-create-card:hover:not(:disabled) .app-canvas-create-icon { color: var(--workspace-accent); transform: scale(1.12) rotate(90deg); }
|
||||
.app-canvas-create-title { margin-top: 14px; font-size: var(--fs-heading-lg); font-weight: 620; line-height: 1.25; }
|
||||
.app-canvas-create-meta { margin-top: 6px; color: color-mix(in srgb, var(--foreground) 38%, transparent); font-size: var(--fs-caption); }
|
||||
.app-canvas-create-preview { display: grid; aspect-ratio: 16 / 9; place-items: center; overflow: hidden; border: 0; border-radius: var(--r-lg) var(--r-lg) 0 0; background: var(--canvas-cover-surface); box-shadow: none; }
|
||||
.app-canvas-create-card:hover:not(:disabled) .app-canvas-create-preview, .app-canvas-create-card:focus-visible .app-canvas-create-preview { background: var(--canvas-cover-surface); box-shadow: none; }
|
||||
.app-canvas-create-icon { width: 42px; height: 42px; border-radius: var(--r-md); background: var(--canvas-icon-surface); padding: 11px; color: color-mix(in srgb, var(--foreground) 42%, transparent); stroke-width: 1.8; transition: color var(--motion-state) ease-out; }
|
||||
.app-canvas-create-card:hover:not(:disabled) .app-canvas-create-icon { color: var(--foreground); }
|
||||
.app-canvas-create-title { margin: 14px 14px 0; font-size: var(--fs-heading-lg); font-weight: 620; line-height: 1.25; }
|
||||
.app-canvas-create-meta { margin: 6px 14px 16px; color: color-mix(in srgb, var(--foreground) 38%, transparent); font-size: var(--fs-caption); }
|
||||
.app-canvas-create-card:disabled { cursor: not-allowed; opacity: .5; }
|
||||
|
||||
/* 画布卡片 - 库视图 - 更明显的hover效果 */
|
||||
.app-canvas-project-card.is-library { overflow: hidden; border-radius: var(--r-xl); background: var(--card-surface); box-shadow: var(--card-elevation); border: 1px solid var(--card-border); content-visibility: auto; contain-intrinsic-size: 0 320px; }
|
||||
.app-canvas-project-card.is-library .app-canvas-project-preview { overflow: hidden; border-radius: var(--r-xl) var(--r-xl) 0 0; background: var(--canvas-cover-surface); }
|
||||
.app-canvas-project-card.is-library:hover, .app-canvas-project-card.is-library:focus-within { background: var(--card-surface); box-shadow: var(--card-elevation-hover); border-color: var(--card-border-hover); transform: translateY(-6px); }
|
||||
.app-canvas-project-card.is-library:active { transform: translateY(-3px) scale(0.995); transition-duration: 120ms; }
|
||||
.app-canvas-project-card.is-library.is-selected { box-shadow: var(--card-elevation), 0 0 0 2px color-mix(in srgb, var(--workspace-accent) 32%, transparent); border-color: var(--workspace-accent); border-radius: var(--r-xl); }
|
||||
/* 画布卡片依靠表面明度表达 hover，选中态才显示描边。 */
|
||||
.app-canvas-project-card.is-library { overflow: hidden; border: 0; border-radius: var(--r-lg); background: var(--card-surface); box-shadow: none; content-visibility: auto; contain-intrinsic-size: 0 320px; }
|
||||
.app-canvas-project-card.is-library .app-canvas-project-preview { overflow: hidden; border-radius: var(--r-lg) var(--r-lg) 0 0; background: var(--canvas-cover-surface); }
|
||||
.app-canvas-project-card.is-library:hover, .app-canvas-project-card.is-library:focus-within { background: var(--card-surface-hover); box-shadow: none; transform: translateY(-2px); }
|
||||
.app-canvas-project-card.is-library:active { transform: translateY(-1px) scale(0.995); transition-duration: var(--motion-instant); }
|
||||
.app-canvas-project-card.is-library.is-selected { box-shadow: 0 0 0 1px color-mix(in srgb, var(--workspace-accent) 52%, transparent); border-radius: var(--r-lg); }
|
||||
.app-canvas-project-card.is-recent .app-canvas-project-preview { overflow: hidden; border-radius: var(--r-2xl) var(--r-2xl) 0 0; background: var(--workspace-surface-strong); transition: box-shadow 420ms var(--motion-ease-out), transform 420ms var(--motion-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 { box-shadow: 0 18px 36px color-mix(in srgb, var(--foreground) 13%, transparent); transform: translateY(-4px); }
|
||||
|
||||
@@ -3473,8 +3453,8 @@
|
||||
.app-canvas-project-card:hover .app-canvas-project-body { background: transparent; }
|
||||
|
||||
/* Focus状态 - 键盘导航可见 */
|
||||
.app-canvas-project-card:focus:not(:focus-visible) { outline: none; box-shadow: var(--card-elevation); }
|
||||
.app-canvas-project-card:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; box-shadow: var(--card-elevation), 0 0 0 4px color-mix(in srgb, var(--ring) 16%, transparent); }
|
||||
.app-canvas-project-card:focus:not(:focus-visible) { outline: none; box-shadow: none; }
|
||||
.app-canvas-project-card:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; box-shadow: none; }
|
||||
.canvas-project-card-footer { margin-top: 12px; }
|
||||
.canvas-project-heading-row { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 10px; }
|
||||
.canvas-project-title-button { min-width: 0; flex: 1; cursor: pointer; border: 0; background: transparent; padding: 0; text-align: left; }
|
||||
@@ -3511,7 +3491,7 @@
|
||||
.app-projects-header-meta {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
border: 1px solid color-mix(in srgb, var(--foreground) 10%, transparent);
|
||||
border: 0;
|
||||
border-radius: var(--r-full);
|
||||
background: color-mix(in srgb, var(--foreground) 4%, transparent);
|
||||
padding: 3px 10px;
|
||||
@@ -3520,42 +3500,36 @@
|
||||
font-weight: 560;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
/* 全站统一页头毛玻璃 band：素材库、画布库、任务中心、短剧创作、技能库、积分中心、首页 */
|
||||
/* 页头与页面共用同一画布，仅通过间距和排版建立层级。 */
|
||||
.studio-band {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border: 1px solid color-mix(in srgb, var(--foreground) 7%, transparent);
|
||||
border-radius: var(--r-lg);
|
||||
background:
|
||||
radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--workspace-accent) 7%, transparent), transparent 38%),
|
||||
color-mix(in srgb, var(--foreground) 1.5%, transparent);
|
||||
box-shadow: var(--elevation-card), var(--elevation-hairline);
|
||||
padding: 2px 2px 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.studio-band .app-page-header {
|
||||
background: transparent;
|
||||
border-bottom: 0;
|
||||
padding-inline: 14px;
|
||||
padding-inline: 0;
|
||||
}
|
||||
|
||||
.canvas-library-page .studio-band .canvas-library-discovery {
|
||||
border: 0;
|
||||
border-top: 1px solid color-mix(in srgb, var(--foreground) 6%, transparent);
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
margin-top: 0;
|
||||
margin-top: var(--space-2);
|
||||
}
|
||||
|
||||
.canvas-library-page .canvas-library-frame {
|
||||
display: flex;
|
||||
min-height: 0;
|
||||
flex-direction: column;
|
||||
border: 1px solid color-mix(in srgb, var(--foreground) 7%, transparent);
|
||||
border-radius: var(--r-lg);
|
||||
background: color-mix(in srgb, var(--foreground) 1%, transparent);
|
||||
padding: 14px;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.assets-library-page .assets-library-frame,
|
||||
@@ -3721,10 +3695,10 @@
|
||||
}
|
||||
|
||||
.canvas-library-page .canvas-library-discovery {
|
||||
border-radius: var(--r-lg);
|
||||
background: color-mix(in srgb, var(--foreground) 2%, transparent);
|
||||
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--foreground) 6%, transparent);
|
||||
padding: 10px 12px;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
padding: 8px 0 12px;
|
||||
}
|
||||
|
||||
.canvas-library-page .canvas-library-grid {
|
||||
@@ -3734,11 +3708,11 @@
|
||||
.canvas-library-page .canvas-library-search {
|
||||
border-radius: var(--r-md);
|
||||
background: color-mix(in srgb, var(--foreground) 4%, transparent);
|
||||
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--foreground) 8%, transparent);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.canvas-library-page .canvas-library-search:focus-within {
|
||||
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--workspace-accent) 46%, transparent);
|
||||
box-shadow: 0 0 0 3px color-mix(in srgb, var(--workspace-accent) 10%, transparent);
|
||||
}
|
||||
|
||||
.canvas-library-page .app-canvas-project-card.is-library {
|
||||
@@ -3785,34 +3759,34 @@
|
||||
.library-toolbar-controls .ant-input-affix-wrapper { border-radius: var(--r-lg); }
|
||||
.library-toolbar-controls .ant-select-selector { border-radius: var(--r-md) !important; }
|
||||
.library-grid { display: grid; align-items: start; gap: 26px 18px; }
|
||||
.library-card { position: relative; min-width: 0; overflow: hidden; cursor: pointer; border: 0; border-radius: var(--r-2xl); background: transparent; color: var(--foreground); transition: transform 420ms var(--motion-ease-out), background-color 260ms ease-out, box-shadow 420ms var(--motion-ease-out); }
|
||||
.library-card-surface { background: var(--surface-card); box-shadow: var(--elevation-card), var(--elevation-hairline); }
|
||||
.library-card-surface:hover, .library-card-surface:focus-within { background: var(--surface-card-hover); box-shadow: var(--elevation-card-hover), var(--elevation-hairline); }
|
||||
.library-card:hover, .library-card:focus-within { transform: translateY(-7px); }
|
||||
.library-create-card { display: flex; min-width: 0; cursor: pointer; flex-direction: column; align-items: stretch; border: 0; background: transparent; padding: 0; color: var(--foreground); text-align: left; transition: transform 420ms var(--motion-ease-out); }
|
||||
.library-create-card:hover, .library-create-card:focus-visible { transform: translateY(-7px); outline: 0; }
|
||||
.library-create-cover { display: grid; aspect-ratio: 16 / 10; place-items: center; overflow: hidden; border-radius: var(--r-2xl); background: var(--surface-card); color: color-mix(in srgb, var(--foreground) 35%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--foreground) 11%, transparent); transition: background-color 320ms ease-out, color 260ms ease-out, box-shadow 420ms var(--motion-ease-out); }
|
||||
.library-card { position: relative; min-width: 0; overflow: hidden; cursor: pointer; border: 0; border-radius: var(--r-2xl); background: transparent; color: var(--foreground); transition: transform var(--motion-state) var(--motion-ease-out), background-color var(--motion-state) ease-out; }
|
||||
.library-card-surface { background: var(--card-surface); box-shadow: none; }
|
||||
.library-card-surface:hover, .library-card-surface:focus-within { background: var(--card-surface-hover); box-shadow: none; }
|
||||
.library-card:hover, .library-card:focus-within { transform: translateY(-2px); }
|
||||
.library-create-card { display: flex; min-width: 0; cursor: pointer; flex-direction: column; align-items: stretch; border: 0; background: transparent; padding: 0; color: var(--foreground); text-align: left; transition: transform var(--motion-state) var(--motion-ease-out); }
|
||||
.library-create-card:hover, .library-create-card:focus-visible { transform: translateY(-2px); outline: 0; }
|
||||
.library-create-cover { display: grid; aspect-ratio: 16 / 10; place-items: center; overflow: hidden; border-radius: var(--r-2xl); background: var(--card-surface); color: color-mix(in srgb, var(--foreground) 35%, transparent); box-shadow: none; transition: background-color var(--motion-state) ease-out, color var(--motion-state) ease-out; }
|
||||
/* 创建卡与同网格里的内容卡共用封面比例，否则首格会矮一截、网格底线对不齐。 */
|
||||
.project-library-grid .library-create-cover { aspect-ratio: 16 / 9; }
|
||||
.library-create-card:hover .library-create-cover, .library-create-card:focus-visible .library-create-cover { background: var(--surface-card-hover); color: var(--foreground); box-shadow: var(--elevation-card-hover), var(--elevation-hairline); }
|
||||
.library-create-cover svg { transition: transform 420ms var(--motion-ease-out); stroke-width: 1.2; }
|
||||
.library-create-card:hover .library-create-cover svg, .library-create-card:focus-visible .library-create-cover svg { transform: scale(1.12) rotate(90deg); }
|
||||
.library-create-card:hover .library-create-cover, .library-create-card:focus-visible .library-create-cover { background: var(--card-surface-hover); color: var(--foreground); box-shadow: none; }
|
||||
.library-create-cover svg { stroke-width: 1.8; }
|
||||
.library-create-card:hover .library-create-cover svg, .library-create-card:focus-visible .library-create-cover svg { transform: none; }
|
||||
.library-create-title { margin-top: 15px; font-size: var(--fs-heading-lg); font-weight: 620; line-height: 1.3; }
|
||||
.library-create-meta { margin-top: 6px; color: color-mix(in srgb, var(--foreground) 38%, transparent); font-size: var(--fs-caption); }
|
||||
/* 技能网格里的创建卡要和技能卡等高，不然首格会短一截。 */
|
||||
.skill-library-grid .library-create-card { justify-content: center; min-height: 218px; border-radius: var(--r-xl); background: var(--surface-card); padding: 16px; box-shadow: var(--elevation-card), var(--elevation-hairline); }
|
||||
.skill-library-grid .library-create-card { justify-content: center; min-height: 218px; border-radius: var(--r-xl); background: var(--card-surface); padding: 16px; box-shadow: none; }
|
||||
.skill-library-grid .library-create-cover { aspect-ratio: auto; min-height: 96px; flex: 1 1 auto; border-radius: var(--r-lg); }
|
||||
.skill-library-grid .library-create-title { margin-top: 13px; font-size: var(--fs-body-lg); }
|
||||
|
||||
/* 列数按内容体量分开定：项目卡是这些页面的主角，6 列会把它挤成缩略图；
|
||||
资产卡只承载一张图 + 标题，密一点反而好扫。 */
|
||||
.assets-library-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
|
||||
.project-library-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px 22px; align-items: stretch; }
|
||||
.project-library-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5) var(--space-4); align-items: stretch; }
|
||||
.skill-library-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
|
||||
/* 项目卡是一个完整实体表面；封面只是顶部内容区，避免透明主体和内嵌细线造成「镂空」感。 */
|
||||
.project-library-card { display: block; border-radius: var(--r-lg); background: var(--project-library-surface) !important; box-shadow: var(--project-library-shadow); transition: none; }
|
||||
.project-library-card:hover, .project-library-card:focus-within { background: var(--project-library-surface) !important; box-shadow: var(--project-library-shadow); }
|
||||
.project-library-card:hover, .project-library-card:focus-within, .project-library-grid .library-create-card:hover, .project-library-grid .library-create-card:focus-visible { transform: none; }
|
||||
.project-library-card { display: block; border-radius: var(--r-lg); background: var(--card-surface) !important; box-shadow: none; }
|
||||
.project-library-card:hover, .project-library-card:focus-within { background: var(--card-surface-hover) !important; box-shadow: none; }
|
||||
.project-library-card:hover, .project-library-card:focus-within, .project-library-grid .library-create-card:hover, .project-library-grid .library-create-card:focus-visible { transform: translateY(-2px); }
|
||||
.project-library-card:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
|
||||
.project-library-grid .library-create-cover, .project-library-grid .library-create-card:hover .library-create-cover, .project-library-grid .library-create-card:focus-visible .library-create-cover { border-radius: var(--r-lg); background: var(--project-library-cover-surface); box-shadow: none; }
|
||||
.project-library-grid .library-create-card:hover .library-create-cover svg, .project-library-grid .library-create-card:focus-visible .library-create-cover svg { transform: none; }
|
||||
@@ -4294,19 +4268,19 @@
|
||||
}
|
||||
|
||||
@media (max-width: 1600px) and (min-width: 1101px) {
|
||||
.canvas-library-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 30px 20px; }
|
||||
.canvas-library-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-5) var(--space-4); }
|
||||
}
|
||||
|
||||
@media (max-width: 1100px) and (min-width: 900px) {
|
||||
.canvas-library-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 18px; }
|
||||
.canvas-library-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5) var(--space-4); }
|
||||
}
|
||||
|
||||
@media (max-width: 899px) and (min-width: 640px) {
|
||||
.canvas-library-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 16px; }
|
||||
.canvas-library-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5) var(--space-4); }
|
||||
}
|
||||
|
||||
@media (max-width: 639px) {
|
||||
.canvas-library-grid { grid-template-columns: 1fr; gap: 18px; }
|
||||
.canvas-library-grid { grid-template-columns: 1fr; gap: var(--space-4); }
|
||||
.canvas-library-discovery { padding-inline: 0; }
|
||||
.canvas-library-filters { min-width: 0; }
|
||||
.canvas-library-filter { max-width: 150px; padding-inline: 6px; }
|
||||
@@ -7101,7 +7075,7 @@ html:not(.dark) .creation-user-message-reference { background: rgba(28, 32, 37,
|
||||
.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 { position: relative; display: block; width: min(920px, 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; }
|
||||
@@ -7879,24 +7853,10 @@ body.app-spatial-overlays :where(.ant-modal-mask, .ant-drawer-mask) {
|
||||
.app-story-create-panel {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--border);
|
||||
border: 0;
|
||||
border-radius: var(--r-lg);
|
||||
background:
|
||||
radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--workspace-accent) 7%, transparent), transparent 36%),
|
||||
radial-gradient(circle at 96% 100%, color-mix(in srgb, var(--workspace-accent) 5%, transparent), transparent 32%),
|
||||
var(--surface-card);
|
||||
box-shadow: var(--elevation-card), var(--elevation-hairline);
|
||||
}
|
||||
|
||||
.app-story-create-panel::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 3px;
|
||||
background: linear-gradient(180deg, var(--workspace-accent) 0%, color-mix(in srgb, var(--workspace-accent) 42%, transparent) 100%);
|
||||
opacity: 0.72;
|
||||
background: var(--card-surface);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.app-story-create-head {
|
||||
@@ -7906,8 +7866,7 @@ body.app-spatial-overlays :where(.ant-modal-mask, .ant-drawer-mask) {
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
padding: 14px 16px 14px 19px;
|
||||
border-bottom: 1px solid color-mix(in srgb, var(--foreground) 8%, transparent);
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.app-story-create-title {
|
||||
@@ -7952,28 +7911,33 @@ body.app-spatial-overlays :where(.ant-modal-mask, .ant-drawer-mask) {
|
||||
height: 34px;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
border: 1px solid color-mix(in srgb, var(--foreground) 12%, transparent);
|
||||
border: 0;
|
||||
border-radius: var(--r-md);
|
||||
background: color-mix(in srgb, var(--foreground) 3%, transparent);
|
||||
padding: 0 12px;
|
||||
color: color-mix(in srgb, var(--foreground) 62%, transparent);
|
||||
font-size: var(--fs-caption);
|
||||
font-weight: 520;
|
||||
transition: border-color 180ms ease-out, background-color 180ms ease-out, color 180ms ease-out;
|
||||
transition: background-color 180ms ease-out, color 180ms ease-out;
|
||||
}
|
||||
|
||||
.app-story-create-shortcut:hover {
|
||||
border-color: color-mix(in srgb, var(--foreground) 24%, transparent);
|
||||
background: color-mix(in srgb, var(--foreground) 6%, transparent);
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
.app-story-create-actions .ant-btn-default {
|
||||
border: 0;
|
||||
background: color-mix(in srgb, var(--foreground) 4%, transparent);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.app-story-create-main {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
padding: 12px 16px 14px 19px;
|
||||
padding: 12px 16px 14px;
|
||||
}
|
||||
|
||||
.app-story-create-input {
|
||||
@@ -7981,6 +7945,7 @@ body.app-spatial-overlays :where(.ant-modal-mask, .ant-drawer-mask) {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.app-story-create-input,
|
||||
.app-story-create-input textarea {
|
||||
resize: none !important;
|
||||
border-color: transparent !important;
|
||||
@@ -7991,11 +7956,13 @@ body.app-spatial-overlays :where(.ant-modal-mask, .ant-drawer-mask) {
|
||||
color: var(--foreground) !important;
|
||||
}
|
||||
|
||||
.app-story-create-input:focus,
|
||||
.app-story-create-input textarea:focus {
|
||||
border-color: transparent !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.app-story-create-input::placeholder,
|
||||
.app-story-create-input textarea::placeholder {
|
||||
color: color-mix(in srgb, var(--foreground) 38%, transparent) !important;
|
||||
}
|
||||
@@ -8007,17 +7974,17 @@ body.app-spatial-overlays :where(.ant-modal-mask, .ant-drawer-mask) {
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
max-width: 220px;
|
||||
border: 1px solid color-mix(in srgb, var(--foreground) 14%, transparent);
|
||||
border: 0;
|
||||
border-radius: var(--r-full);
|
||||
background: color-mix(in srgb, var(--foreground) 4%, transparent);
|
||||
padding: 0 11px 0 4px;
|
||||
color: color-mix(in srgb, var(--foreground) 72%, transparent);
|
||||
font-size: var(--fs-caption);
|
||||
transition: border-color 180ms ease-out, color 180ms ease-out;
|
||||
transition: background-color 180ms ease-out, color 180ms ease-out;
|
||||
}
|
||||
|
||||
.app-story-create-style-chip:hover {
|
||||
border-color: color-mix(in srgb, var(--foreground) 26%, transparent);
|
||||
background: color-mix(in srgb, var(--foreground) 7%, transparent);
|
||||
color: var(--foreground);
|
||||
}
|
||||
|
||||
@@ -8041,7 +8008,7 @@ body.app-spatial-overlays :where(.ant-modal-mask, .ant-drawer-mask) {
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 10px 14px;
|
||||
padding: 0 16px 14px 19px;
|
||||
padding: 0 16px 16px;
|
||||
}
|
||||
|
||||
.app-story-create-controls label {
|
||||
@@ -8057,7 +8024,7 @@ body.app-spatial-overlays :where(.ant-modal-mask, .ant-drawer-mask) {
|
||||
}
|
||||
|
||||
.app-story-create-controls .ant-select-selector {
|
||||
border-color: color-mix(in srgb, var(--foreground) 12%, transparent) !important;
|
||||
border: 0 !important;
|
||||
border-radius: var(--r-md) !important;
|
||||
background: color-mix(in srgb, var(--foreground) 3%, transparent) !important;
|
||||
box-shadow: none !important;
|
||||
@@ -8734,20 +8701,20 @@ html:not(.dark) .creation-home .storyboard-workbench-bar-action:hover { backgrou
|
||||
}
|
||||
|
||||
.creation-home .storyboard-workbench-stage-inner {
|
||||
width: min(920px, 100%);
|
||||
width: min(1120px, 100%);
|
||||
margin: 0 auto;
|
||||
animation: creation-composer-arrive var(--motion-dur-slow-calc) var(--motion-ease-out) both;
|
||||
}
|
||||
|
||||
.creation-home .storyboard-workbench-card {
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--creation-border);
|
||||
border-radius: 18px;
|
||||
border: 0;
|
||||
border-radius: var(--r-lg);
|
||||
background: var(--creation-surface);
|
||||
box-shadow: var(--elevation-card), var(--elevation-hairline);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.creation-home .storyboard-workbench-card.is-error { border-color: color-mix(in srgb, #ef5350 42%, transparent); }
|
||||
.creation-home .storyboard-workbench-card.is-error { background: color-mix(in srgb, #ef5350 6%, var(--creation-surface)); }
|
||||
|
||||
.creation-home .storyboard-workbench-card-head {
|
||||
display: flex;
|
||||
@@ -8756,7 +8723,6 @@ html:not(.dark) .creation-home .storyboard-workbench-bar-action:hover { backgrou
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 10px 14px;
|
||||
border-bottom: 1px solid var(--creation-border);
|
||||
padding: 14px 18px;
|
||||
}
|
||||
|
||||
@@ -8793,7 +8759,7 @@ html:not(.dark) .creation-home .storyboard-workbench-bar-action:hover { backgrou
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
border: 1px solid var(--creation-border);
|
||||
border: 0;
|
||||
border-radius: 999px;
|
||||
background: var(--creation-surface-muted);
|
||||
color: var(--creation-muted);
|
||||
@@ -8833,7 +8799,7 @@ html:not(.dark) .creation-home .storyboard-workbench-bar-action:hover { backgrou
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
border: 1px solid var(--creation-border);
|
||||
border: 0;
|
||||
border-radius: 8px;
|
||||
background: var(--creation-surface-muted);
|
||||
color: var(--creation-muted);
|
||||
@@ -8845,7 +8811,7 @@ html:not(.dark) .creation-home .storyboard-workbench-bar-action:hover { backgrou
|
||||
}
|
||||
|
||||
.creation-home .storyboard-workbench-card-actions button:hover,
|
||||
.creation-home .storyboard-workbench-card-actions a:hover { border-color: var(--creation-border-strong); background: var(--creation-surface-hover); color: var(--creation-text); }
|
||||
.creation-home .storyboard-workbench-card-actions a:hover { background: var(--creation-surface-hover); color: var(--creation-text); }
|
||||
.creation-home .storyboard-workbench-card-actions button:disabled { cursor: not-allowed; opacity: .5; }
|
||||
.creation-home .storyboard-workbench-card-actions button:focus-visible,
|
||||
.creation-home .storyboard-workbench-card-actions a:focus-visible { outline: 2px solid var(--creation-accent); outline-offset: 2px; }
|
||||
@@ -8856,7 +8822,7 @@ html:not(.dark) .creation-home .storyboard-workbench-bar-action:hover { backgrou
|
||||
/* 镜头脚本区 */
|
||||
.creation-home .storyboard-workbench-brief {
|
||||
margin-bottom: 18px;
|
||||
border: 1px solid var(--creation-border);
|
||||
border: 0;
|
||||
border-radius: 12px;
|
||||
background: var(--creation-surface-muted);
|
||||
padding: 13px 15px;
|
||||
@@ -8886,7 +8852,7 @@ html:not(.dark) .creation-home .storyboard-workbench-bar-action:hover { backgrou
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
border: 1px dashed var(--creation-border);
|
||||
border: 0;
|
||||
border-radius: 12px;
|
||||
background: var(--creation-surface-muted);
|
||||
color: var(--creation-muted);
|
||||
@@ -8909,7 +8875,7 @@ html:not(.dark) .creation-home .storyboard-workbench-bar-action:hover { backgrou
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
border: 1px solid color-mix(in srgb, #ef5350 38%, transparent);
|
||||
border: 0;
|
||||
border-radius: 12px;
|
||||
background: color-mix(in srgb, #ef5350 7%, transparent);
|
||||
padding: 13px 15px;
|
||||
@@ -8971,7 +8937,7 @@ html:not(.dark) .creation-home .storyboard-workbench-bar-action:hover { backgrou
|
||||
}
|
||||
|
||||
.creation-home .storyboard-workbench-composer .creation-chat-composer {
|
||||
width: min(920px, 100%);
|
||||
width: min(1120px, 100%);
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@@ -9136,7 +9102,7 @@ html:not(.dark) .creation-home .storyboard-workbench-bar-action:hover { backgrou
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.creation-home .storyboard-workbench-turn.is-user .storyboard-workbench-turn-copy { max-width: min(78%, 560px); align-items: flex-end; }
|
||||
.creation-home .storyboard-workbench-turn.is-user .storyboard-workbench-turn-copy { max-width: min(82%, 680px); align-items: flex-end; }
|
||||
.creation-home .storyboard-workbench-turn.is-ai .storyboard-workbench-turn-copy { flex: 1 1 auto; }
|
||||
|
||||
.creation-home .storyboard-workbench-turn-meta {
|
||||
@@ -9169,9 +9135,8 @@ html:not(.dark) .creation-home .storyboard-workbench-bar-action:hover { backgrou
|
||||
/* 用户气泡 */
|
||||
.creation-home .storyboard-workbench-turn.is-user .storyboard-workbench-turn-bubble {
|
||||
min-width: 0;
|
||||
border: 1px solid var(--creation-border);
|
||||
border-top-right-radius: 4px;
|
||||
border-radius: 12px;
|
||||
border: 0;
|
||||
border-radius: var(--r-lg) var(--r-sm) var(--r-lg) var(--r-lg);
|
||||
background: var(--creation-surface-muted);
|
||||
padding: 11px 14px;
|
||||
}
|
||||
@@ -9183,10 +9148,11 @@ html:not(.dark) .creation-home .storyboard-workbench-bar-action:hover { backgrou
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin: 4px 0;
|
||||
justify-content: center;
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.creation-home .storyboard-workbench-handoff-rail { height: 1px; flex: 1 1 auto; background: var(--creation-border); }
|
||||
.creation-home .storyboard-workbench-handoff-rail { display: none; }
|
||||
|
||||
.creation-home .storyboard-workbench-handoff-badge {
|
||||
display: inline-flex;
|
||||
@@ -9223,7 +9189,7 @@ html:not(.dark) .creation-home .storyboard-workbench-bar-action:hover { backgrou
|
||||
min-height: 0;
|
||||
align-items: stretch;
|
||||
justify-content: flex-start;
|
||||
border: 1px solid var(--creation-border);
|
||||
border: 0;
|
||||
border-radius: 12px;
|
||||
background: var(--creation-surface-muted);
|
||||
}
|
||||
@@ -9239,7 +9205,7 @@ html:not(.dark) .creation-home .storyboard-workbench-bar-action:hover { backgrou
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
border: 1px solid var(--creation-border);
|
||||
border: 0;
|
||||
border-radius: 999px;
|
||||
background: var(--creation-surface);
|
||||
color: var(--creation-faint);
|
||||
@@ -9252,7 +9218,7 @@ html:not(.dark) .creation-home .storyboard-workbench-bar-action:hover { backgrou
|
||||
}
|
||||
|
||||
.creation-home .storyboard-workbench-pipeline em i { color: var(--creation-text); font-size: var(--fs-micro); font-style: normal; font-variant-numeric: tabular-nums; font-weight: 600; }
|
||||
.creation-home .storyboard-workbench-pipeline em:last-child { border-color: color-mix(in srgb, var(--creation-accent) 40%, var(--creation-border)); color: var(--creation-text); }
|
||||
.creation-home .storyboard-workbench-pipeline em:last-child { background: color-mix(in srgb, var(--creation-accent) 10%, var(--creation-surface)); color: var(--creation-text); }
|
||||
|
||||
@keyframes creation-pipeline-step {
|
||||
0% { opacity: 0; transform: translateY(4px); }
|
||||
@@ -9265,8 +9231,7 @@ html:not(.dark) .creation-home .storyboard-workbench-bar-action:hover { backgrou
|
||||
align-items: flex-start;
|
||||
gap: 9px;
|
||||
margin-top: 12px;
|
||||
border: 1px solid var(--creation-border);
|
||||
border-left: 3px solid var(--creation-text);
|
||||
border: 0;
|
||||
border-radius: 10px;
|
||||
background: color-mix(in srgb, var(--creation-text) 4%, transparent);
|
||||
padding: 10px 13px;
|
||||
@@ -9358,9 +9323,7 @@ html:not(.dark) .creation-home .storyboard-workbench-bar-action:hover { backgrou
|
||||
|
||||
/* 舞台：下一镜草稿引导卡 */
|
||||
.creation-home .storyboard-workbench-card.is-next {
|
||||
border-style: dashed;
|
||||
border-color: var(--creation-border-strong);
|
||||
background: transparent;
|
||||
background: var(--creation-surface);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
@@ -9368,7 +9331,7 @@ html:not(.dark) .creation-home .storyboard-workbench-bar-action:hover { backgrou
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 14px;
|
||||
border: 1px dashed var(--creation-border);
|
||||
border: 0;
|
||||
border-radius: 12px;
|
||||
background: var(--creation-surface-muted);
|
||||
padding: 16px 18px;
|
||||
|
||||
Reference in new issue
Block a user