OmniAI/omniai-web
3
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat: 个人中心视觉重构、画布网点背景、剧本评分色调统一

Browse Source 
【个人中心视觉重构】
- 列表卡片新增媒体预览缩略图（图片/视频/项目/资产），支持 image/video 两种媒体类型
- 新增 renderCardPreview 通用预览组件，自动识别视频格式并渲染 <video> 标签
- 新增 formatAssetType 工具函数，资产类型中文化（角色/场景/道具/视频/图像/素材）
- 媒体卡片采用固定高度网格布局（标题行 18px/正文 36px/元信息 18px），保证列表节奏一致
- 卡片预览区左上角显示类型标签徽章（品牌绿边框+半透明背景）
- 删除按钮增加 hover 红色反馈（边框/背景/文字渐变至红色）
- 积分/任务面板从底部区域移至侧边栏头像下方，减少滚动距离
- 新增 account-card 容器包裹积分/任务切换面板
- 侧边栏统计数据改为 3 列网格布局，每项增加独立圆角卡片样式
- 作品/项目/资产/社区发布四个 Tab 改为均分 4 列网格
- 分区标题增加品牌绿圆点前缀装饰
- 响应式断点：960px（侧边栏双列+内容区单列）、640px（全部单列+标签横向滚动）、420px（紧凑间距）

【画布网点背景】
- 移除 ReactFlow <Background> 组件，改用纯 CSS radial-gradient 圆点背景
- 通过 CSS 自定义属性（--canvas-bg-size/--canvas-bg-dot/--canvas-bg-x/--canvas-bg-y）实现缩放/平移时网点同步
- 网点颜色使用半透明灰蓝（rgba(148,163,184,0.34)），随画布缩放动态调整点间距与大小

【剧本评分色调统一】
- 变量 Token 体系重定义为电商同款暗色面板色调（--v5-bg: #0d0d0f, --v5-panel: #151719）
- 移除所有 box-shadow 和 depth 阴影，改用 inset 顶部光泽线
- 移除 backdrop-filter 毛玻璃效果，统一为纯色半透明背景
- hover 交互简化为边框+背景色变化，取消 transform 浮起动画
- 上传区移除 ::after 径向光晕伪元素
- 已上传态/选中态仅通过 border-color 和背景色微调区分
This commit is contained in:
ludan
2026-06-04 13:16:38 +08:00
parent b08a7918da
commit fb4011bf1f
4 changed files with 1002 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/features/canvas/CanvasPage.tsx
+3 -5
View File
@@ -26,7 +26,6 @@
VideoCameraOutlined,
} from "@ant-design/icons";
import {
Background,
ReactFlow,
} from "@xyflow/react";
import { useCallback, useEffect, useMemo, useRef, useState, type ChangeEvent, type CSSProperties, type MouseEvent, type WheelEvent } from "react";
@@ -3542,7 +3541,8 @@ function CanvasPage({
onMouseMove={(shouldShowEmptyProjectState || isWaitingForProjects) ? undefined : handleCanvasMouseMove}
onWheel={(shouldShowEmptyProjectState || isWaitingForProjects) ? undefined : handleCanvasWheel}
style={{
"--canvas-bg-size": `${24 * canvasViewport.zoom}px`,
"--canvas-bg-size": `${34 * canvasViewport.zoom}px`,
"--canvas-bg-dot": `${1.35 * canvasViewport.zoom}px`,
"--canvas-bg-x": `${canvasViewport.x}px`,
"--canvas-bg-y": `${canvasViewport.y}px`,
cursor: canvasPanDrag ? "grabbing" : spacePanning ? "grab" : undefined,
@@ -3727,9 +3727,7 @@ function CanvasPage({
proOptions={{ hideAttribution: true }}
onPaneClick={(shouldShowEmptyProjectState || isWaitingForProjects) ? undefined : handlePaneClick}
onPaneContextMenu={(shouldShowEmptyProjectState || isWaitingForProjects) ? undefined : handlePaneContextMenu}
>
<Background gap={24} color="transparent" className="studio-canvas__background" />
</ReactFlow>
/>
<div className="studio-canvas-zoom-controls" onMouseDown={(e) => e.stopPropagation()}>
<button type="button" title="缩小" onClick={zoomCanvasOut}>−</button>
<button type="button" className="studio-canvas-zoom-controls__pct" title="重置缩放" onClick={resetCanvasZoom}>
src/features/profile/ProfilePage.tsx
+130 -83
View File
@@ -5,10 +5,13 @@ import {
CloseOutlined,
DeleteOutlined,
EditOutlined,
FileImageOutlined,
FolderOpenOutlined,
LockOutlined,
MailOutlined,
MobileOutlined,
PhoneOutlined,
PlayCircleOutlined,
PlusOutlined,
SafetyOutlined,
ShareAltOutlined,
@@ -179,6 +182,19 @@ function formatAssetStatus(status: string | undefined): string {
return status || "资产";
}
function formatAssetType(type: SavedAssetItem["type"]): string {
const labels: Record<string, string> = {
character: "角色",
scene: "场景",
prop: "道具",
video: "视频",
image: "图像",
asset: "资产",
other: "素材",
};
return labels[type] || "素材";
}
function ProfilePage({
session,
usage,
@@ -527,20 +543,48 @@ function ProfilePage({
</div>
);
const renderCardPreview = (
url: string | null | undefined,
type: "image" | "video" | "project" | "asset",
label: string,
) => {
const mediaUrl = typeof url === "string" ? url.trim() : "";
const isVideoPreview = type === "video" || /\.(mp4|webm|mov)(\?|#|$)/i.test(mediaUrl);
const placeholderIcon =
type === "video" ? <PlayCircleOutlined /> : type === "project" ? <FolderOpenOutlined /> : <FileImageOutlined />;
return (
<div className={`profile-page__list-card-preview${mediaUrl ? " has-media" : ""}`} aria-hidden="true">
{mediaUrl ? (
isVideoPreview ? (
<video src={mediaUrl} muted playsInline preload="metadata" />
) : (
<img src={mediaUrl} alt="" loading="lazy" />
)
) : (
<span className="profile-page__list-card-placeholder">{placeholderIcon}</span>
)}
<span className="profile-page__media-badge">{label}</span>
</div>
);
};
const renderActivePanel = () => {
if (activePanel === "works") {
return visibleWorks.length ? (
<div className="profile-page__list-grid motion-stagger">
{visibleWorks.map((task) => (
<article key={task.id} className="profile-page__list-card">
<div className="profile-page__list-card-head">
<strong>{task.title}</strong>
<span>{formatTaskType(task.type)}</span>
</div>
<p>{task.prompt}</p>
<div className="profile-page__list-card-meta">
<span>{formatTaskStatus(task.status)}</span>
<span>{formatProfileDate(task.createdAt)}</span>
<article key={task.id} className="profile-page__list-card profile-page__media-card">
{renderCardPreview(task.outputUrl, task.type === "video" ? "video" : "image", formatTaskType(task.type))}
<div className="profile-page__list-card-body">
<div className="profile-page__list-card-head">
<strong>{task.title}</strong>
</div>
<p>{task.prompt}</p>
<div className="profile-page__list-card-meta">
<span>{formatTaskStatus(task.status)}</span>
<span>{formatProfileDate(task.createdAt)}</span>
</div>
</div>
</article>
))}
@@ -554,25 +598,27 @@ function ProfilePage({
return projects.length ? (
<div className="profile-page__list-grid motion-stagger">
{projects.map((project) => (
<article key={project.id} className="profile-page__list-card">
<div className="profile-page__list-card-head">
<strong>{project.name}</strong>
<span>{formatProfileDate(project.updatedAt)}</span>
{onDeleteProject ? (
<button
type="button"
className="profile-page__delete-project"
aria-label={`删除项目 ${project.name}`}
onClick={() => onDeleteProject(project)}
>
<DeleteOutlined />
</button>
) : null}
</div>
<p>{project.description || "最近更新的项目"}</p>
<div className="profile-page__list-card-meta">
<span>{project.storyboardCount} 节点</span>
<span>{project.imageCount} 图 / {project.videoCount} 视频</span>
<article key={project.id} className="profile-page__list-card profile-page__media-card">
{renderCardPreview(project.thumbnailUrl, "project", "项目")}
<div className="profile-page__list-card-body">
<div className="profile-page__list-card-head">
<strong>{project.name}</strong>
{onDeleteProject ? (
<button
type="button"
className="profile-page__delete-project"
aria-label={`删除项目 ${project.name}`}
onClick={() => onDeleteProject(project)}
>
<DeleteOutlined />
</button>
) : null}
</div>
<p>{project.description || "最近更新的项目"}</p>
<div className="profile-page__list-card-meta">
<span>{project.storyboardCount} 节点</span>
<span>{formatProfileDate(project.updatedAt)}</span>
</div>
</div>
</article>
))}
@@ -586,15 +632,18 @@ function ProfilePage({
return savedAssets.length ? (
<div className="profile-page__list-grid">
{savedAssets.map((asset) => (
<article key={asset.id} className="profile-page__list-card">
<div className="profile-page__list-card-head">
<strong>{asset.name}</strong>
<span>{formatAssetStatus(asset.status)}</span>
</div>
<p>{asset.description}</p>
<div className="profile-page__list-card-meta">
<span>{asset.type}</span>
<span>{formatProfileDate(asset.updatedAt)}</span>
<article key={asset.id} className="profile-page__list-card profile-page__media-card">
{renderCardPreview(asset.imageUrl || asset.url, asset.type === "video" ? "video" : "asset", formatAssetType(asset.type))}
<div className="profile-page__list-card-body">
<div className="profile-page__list-card-head">
<strong>{asset.name}</strong>
<span>{formatAssetStatus(asset.status)}</span>
</div>
<p>{asset.description}</p>
<div className="profile-page__list-card-meta">
<span>{formatAssetType(asset.type)}</span>
<span>{formatProfileDate(asset.updatedAt)}</span>
</div>
</div>
</article>
))}
@@ -708,6 +757,50 @@ function ProfilePage({
</div>
</div>
<div className="profile-page__account-card">
<div className="profile-page__list-tabs">
<button
type="button"
className={accountPanel === "credits" ? "is-active" : ""}
onClick={() => setAccountPanel("credits")}
>
积分 {(totalBalance / 100).toFixed(2)}
</button>
<button
type="button"
className={accountPanel === "tasks" ? "is-active" : ""}
onClick={() => setAccountPanel("tasks")}
>
任务 {tasks.length}
</button>
</div>
<div className="profile-page__upload-card profile-page__upload-card--meta">
{accountPanel === "credits" ? (
<>
<span className="profile-page__meta-item">
<small>当前账号</small>
<strong>{displayName}</strong>
</span>
<span className="profile-page__meta-item">
<small>积分剩余</small>
<strong>{(usage.balanceCents / 100).toFixed(2)}</strong>
</span>
</>
) : (
<>
<span className="profile-page__meta-item">
<small>任务总数</small>
<strong>{tasks.length}</strong>
</span>
<span className="profile-page__meta-item">
<small>已完成</small>
<strong>{completedTasks.length}</strong>
</span>
</>
)}
</div>
</div>
<button type="button" className="profile-page__share-btn profile-page__share-btn--plan">
<ShareAltOutlined />
{packageLabel}
@@ -755,52 +848,6 @@ function ProfilePage({
</span>
{renderActivePanel()}
</div>
<div className="profile-page__section">
<div className="profile-page__list-bar">
<div className="profile-page__list-tabs">
<button
type="button"
className={accountPanel === "credits" ? "is-active" : ""}
onClick={() => setAccountPanel("credits")}
>
积分 {(totalBalance / 100).toFixed(2)}
</button>
<button
type="button"
className={accountPanel === "tasks" ? "is-active" : ""}
onClick={() => setAccountPanel("tasks")}
>
任务 {tasks.length}
</button>
</div>
</div>
<div className="profile-page__upload-card profile-page__upload-card--meta">
{accountPanel === "credits" ? (
<>
<span className="profile-page__meta-item">
<small>当前账号</small>
<strong>{displayName}</strong>
</span>
<span className="profile-page__meta-item">
<small>积分剩余</small>
<strong>{(usage.balanceCents / 100).toFixed(2)}</strong>
</span>
</>
) : (
<>
<span className="profile-page__meta-item">
<small>任务总数</small>
<strong>{tasks.length}</strong>
</span>
<span className="profile-page__meta-item">
<small>已完成</small>
<strong>{completedTasks.length}</strong>
</span>
</>
)}
</div>
</div>
</main>
</div>
</section>
src/styles/pages/script-tokens-v5.css
+214
View File
@@ -3715,3 +3715,217 @@
padding-top: 22px;
}
}
/* Ecommerce-aligned tone pass: restrained dark SaaS surfaces, no depth shadows. */
.script-eval-v5 {
--v5-bg: #0d0d0f;
--v5-bg2: #151719;
--v5-bg3: #181b1d;
--v5-bg4: #1d2022;
--v5-bg5: #222629;
--v5-border: rgba(255, 255, 255, 0.08);
--v5-border2: rgba(255, 255, 255, 0.12);
--v5-panel: #151719;
--v5-panel-2: #181b1d;
--v5-panel-3: #101214;
--v5-line: rgba(255, 255, 255, 0.08);
--v5-line-strong: rgba(0, 255, 136, 0.24);
--v5-green-deep: rgba(0, 255, 136, 0.055);
--v5-green-soft: rgba(0, 255, 136, 0.09);
--v5-green-border: rgba(0, 255, 136, 0.24);
--v5-shadow-soft: none;
--v5-shadow-tight: none;
background:
radial-gradient(circle at 24% 0%, rgba(0, 255, 136, 0.038), transparent 34%),
linear-gradient(180deg, rgba(255, 255, 255, 0.018), transparent 160px),
var(--v5-bg);
}
.script-eval-v5-page {
background:
linear-gradient(90deg, rgba(255, 255, 255, 0.014), transparent 24%, transparent 76%, rgba(255, 255, 255, 0.012)),
transparent;
}
.script-eval-v5-left,
.script-eval-v5-right {
background: var(--v5-panel);
box-shadow: none;
}
.script-eval-v5-left {
border-right-color: var(--v5-line);
}
.script-eval-v5-left-main .script-eval-v5-lp-section,
.script-eval-v5-left-main .script-eval-v5-lp-section.is-fill {
background: transparent;
border-bottom-color: var(--v5-line);
box-shadow: none;
}
.script-eval-v5-lp-label {
color: #a7b3af;
letter-spacing: 0.02em;
}
.script-eval-v5-lp-label::before {
background: var(--v5-green);
box-shadow: none;
opacity: 0.72;
}
.script-eval-v5-upload-zone,
.script-eval-v5-info-empty,
.script-eval-v5-history-empty,
.script-eval-v5-info-item,
.script-eval-v5-history-item,
.script-eval-v5-loading,
.script-eval-v5-illustration-hit,
.script-eval-report__score-block,
.script-eval-report__chart-card,
.script-eval-report__path-card,
.script-eval-report__finding-group p {
border-color: var(--v5-line);
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.032), transparent 58%),
var(--v5-panel-2);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
}
.script-eval-v5-upload-zone {
border-style: dashed;
}
.script-eval-v5-upload-zone::after {
display: none;
}
.script-eval-v5-upload-zone:hover,
.script-eval-v5-upload-zone:focus-visible,
.script-eval-v5.is-ready .script-eval-v5-upload-zone,
.script-eval-v5.is-complete .script-eval-v5-upload-zone {
border-color: var(--v5-green-border);
background:
radial-gradient(circle at 50% 0%, rgba(0, 255, 136, 0.075), transparent 58%),
var(--v5-panel-3);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.028);
}
.script-eval-v5-upload-icon,
.script-eval-v5-upload-card-icon {
border-color: rgba(0, 255, 136, 0.18);
border-radius: 10px;
background: rgba(0, 255, 136, 0.09);
box-shadow: none;
}
.script-eval-v5-upload-btn,
.script-eval-v5-eval-btn {
background: var(--v5-green);
color: #061014;
box-shadow: none;
}
.script-eval-v5-upload-btn:hover,
.script-eval-v5-eval-btn:hover:not(:disabled) {
background: var(--v5-green-dim);
transform: none;
box-shadow: none;
}
.script-eval-v5-upload-done,
.script-eval-v5-history-item.is-active,
.script-eval-v5-error,
.script-eval-report__chart-note,
.script-eval-report__grade {
box-shadow: none;
}
.script-eval-v5-upload-done {
border-color: var(--v5-green-border);
background:
linear-gradient(180deg, rgba(0, 255, 136, 0.085), rgba(0, 255, 136, 0.035)),
var(--v5-panel-2);
}
.script-eval-v5-history-item:hover {
border-color: rgba(255, 255, 255, 0.13);
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 58%),
var(--v5-panel-2);
transform: none;
box-shadow: none;
}
.script-eval-v5-history-item.is-active {
border-color: var(--v5-green-border);
background:
linear-gradient(90deg, rgba(0, 255, 136, 0.08), rgba(0, 255, 136, 0.025)),
var(--v5-panel-2);
}
.script-eval-v5-lp-bottom,
.script-eval-v5-right-topbar,
.script-eval-v5-statusbar {
background: rgba(21, 23, 25, 0.96);
border-color: var(--v5-line);
box-shadow: none;
backdrop-filter: none;
}
.script-eval-v5-export-btn,
.script-eval-v5-action-btn,
.script-eval-v5-retry-btn {
border-color: var(--v5-line);
background: rgba(255, 255, 255, 0.035);
color: #aeb8b1;
box-shadow: none;
}
.script-eval-v5-export-btn:hover:not(:disabled),
.script-eval-v5-action-btn:hover,
.script-eval-v5-retry-btn:hover {
border-color: var(--v5-green-border);
background: rgba(0, 255, 136, 0.07);
color: #d9fff0;
}
.script-eval-v5-right-content:not(.is-report) {
background:
radial-gradient(circle at 50% 0%, rgba(0, 255, 136, 0.034), transparent 44%),
transparent;
}
.script-eval-v5-illustration-hit:hover,
.script-eval-v5-illustration-hit:focus-visible {
background:
linear-gradient(180deg, rgba(0, 255, 136, 0.06), transparent 58%),
var(--v5-panel-2);
box-shadow: none;
}
.script-eval-report {
--report-bg: #0d0d0f;
--report-panel: #151719;
--report-panel-2: #101214;
--report-row: #181b1d;
--report-border: rgba(255, 255, 255, 0.08);
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.018), transparent 180px),
var(--report-bg);
}
.script-eval-report::before,
.script-eval-report::after {
opacity: 0.28;
}
.script-eval-report__bar-fill {
box-shadow: none;
}
.script-eval-v5.is-complete .script-eval-v5-status-dot,
.script-eval-v5.is-ready .script-eval-v5-status-dot {
box-shadow: none;
}
src/styles/themes/dark-green.css
+655 -7
View File
@@ -6849,6 +6849,649 @@
}
}
/* Profile center: responsive workspace refinement. */
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard {
background:
linear-gradient(180deg, rgba(var(--accent-rgb), 0.035), transparent 220px),
var(--dg-page);
}
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__banner {
height: clamp(156px, 18vw, 214px);
background:
linear-gradient(135deg, rgba(var(--accent-rgb), 0.1), transparent 36%),
linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent),
var(--bg-surface);
}
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__banner-overlay {
background:
linear-gradient(180deg, rgba(13, 13, 15, 0.12), rgba(13, 13, 15, 0.72)),
linear-gradient(90deg, rgba(13, 13, 15, 0.68), transparent 42%);
}
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__body {
grid-template-columns: minmax(270px, 300px) minmax(0, 1fr);
gap: clamp(18px, 2.4vw, 30px);
width: min(1180px, calc(100% - 48px));
min-height: auto;
margin-top: -58px;
padding-bottom: clamp(36px, 5vw, 64px);
}
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__sidebar,
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__account-card,
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__main-tabs,
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__section,
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__list-card,
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__review-item,
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__empty-state,
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__upload-card {
border-color: rgba(255, 255, 255, 0.075);
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.026), transparent),
rgba(21, 23, 25, 0.96);
box-shadow: none;
}
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__sidebar {
gap: 16px;
padding: clamp(16px, 2vw, 22px);
border-radius: var(--radius-md);
}
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__avatar-ring::before {
opacity: 0.45;
}
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__avatar-ring .profile-page__avatar,
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__avatar {
width: 82px;
height: 82px;
border-width: 3px;
box-shadow: none;
}
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__avatar-edit {
width: 82px;
height: 82px;
}
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__avatar-badge {
box-shadow: none;
}
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__username {
font-size: clamp(19px, 1.7vw, 22px);
}
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__bio-display,
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__bio {
border-color: rgba(255, 255, 255, 0.07);
background: rgba(255, 255, 255, 0.024);
}
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__bio-display span {
text-align: left;
}
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__counts {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
padding: 0;
border: 0;
}
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__count {
min-width: 0;
padding: 12px 8px;
border: 1px solid rgba(255, 255, 255, 0.065);
border-radius: var(--radius-sm);
background: rgba(255, 255, 255, 0.024);
}
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__count strong {
font-size: clamp(18px, 1.5vw, 22px);
}
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__account-card {
display: grid;
gap: 10px;
width: 100%;
padding: 11px;
border: 1px solid rgba(255, 255, 255, 0.075);
border-radius: var(--radius-sm);
}
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__account-card .profile-page__list-tabs {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
width: 100%;
padding: 3px;
border-color: rgba(255, 255, 255, 0.06);
background: rgba(255, 255, 255, 0.02);
}
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__account-card .profile-page__list-tabs button {
min-width: 0;
min-height: 30px;
padding: 0 8px;
overflow: hidden;
font-size: 12px;
text-overflow: ellipsis;
white-space: nowrap;
}
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__account-card .profile-page__upload-card--meta {
grid-template-columns: 1fr;
gap: 8px;
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
}
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__account-card .profile-page__meta-item {
min-height: auto;
padding: 10px 11px;
background: rgba(255, 255, 255, 0.022);
}
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__account-card .profile-page__meta-item strong {
font-size: 15px;
}
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__share-btn {
min-height: 42px;
border-radius: 10px;
font-size: 13px;
font-weight: 650;
}
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__share-btn:hover {
transform: none;
}
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__share-btn--primary {
background: var(--accent);
}
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__share-btn--secondary {
border-color: rgba(255, 255, 255, 0.08);
}
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__main {
gap: 16px;
min-width: 0;
}
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__main-tabs {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 6px;
min-height: 50px;
margin: 0;
padding: 5px;
border-radius: var(--radius-md);
}
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__main-tabs button {
min-width: 0;
min-height: 40px;
padding: 0 12px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__section {
display: grid;
gap: 14px;
padding: clamp(14px, 1.8vw, 18px);
border: 1px solid rgba(255, 255, 255, 0.075);
border-radius: var(--radius-md);
}
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__section-label {
display: flex;
align-items: center;
gap: 8px;
color: var(--fg-body);
font-size: 15px;
font-weight: 700;
}
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__section-label::before {
content: "";
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--accent);
}
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__list-grid,
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__review-list {
gap: 12px;
max-height: none;
overflow: visible;
padding-right: 0;
}
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__list-grid {
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__review-list {
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__list-card {
min-height: 128px;
padding: 15px;
}
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__media-card {
grid-template-columns: 92px minmax(0, 1fr);
align-items: stretch;
gap: 12px;
min-height: 116px;
}
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__list-card-preview {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-width: 0;
min-height: 88px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.065);
border-radius: 10px;
background:
linear-gradient(135deg, rgba(var(--accent-rgb), 0.055), transparent 64%),
rgba(255, 255, 255, 0.024);
}
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__list-card-preview:not(.has-media) {
border-color: rgba(255, 255, 255, 0.07);
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent),
rgba(255, 255, 255, 0.018);
}
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__list-card-preview img,
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__list-card-preview video {
width: 100%;
height: 100%;
min-height: 88px;
object-fit: cover;
}
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__list-card-placeholder {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border: 1px solid rgba(var(--accent-rgb), 0.18);
border-radius: 12px;
background: rgba(var(--accent-rgb), 0.07);
color: rgba(var(--accent-rgb), 0.92);
font-size: 16px;
}
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__media-badge {
position: absolute;
top: 7px;
right: 7px;
max-width: calc(100% - 14px);
overflow: hidden;
padding: 3px 7px;
border-radius: 999px;
border: 1px solid rgba(var(--accent-rgb), 0.22);
background: rgba(8, 14, 12, 0.76);
color: var(--accent);
font-size: 10px;
font-weight: 700;
line-height: 1;
text-overflow: ellipsis;
white-space: nowrap;
}
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__media-card .profile-page__list-card-head {
gap: 8px;
}
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__media-card .profile-page__list-card-head strong {
min-width: 0;
}
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__media-card .profile-page__delete-project {
flex: 0 0 26px;
width: 26px;
height: 26px;
margin: -3px -2px 0 0;
border: 1px solid rgba(255, 255, 255, 0.075);
border-radius: 8px;
background: rgba(255, 255, 255, 0.026);
color: var(--fg-soft);
opacity: 0.72;
transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast), opacity var(--transition-fast);
}
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__media-card .profile-page__delete-project:hover,
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__media-card .profile-page__delete-project:focus-visible {
border-color: rgba(255, 118, 118, 0.28);
background: rgba(255, 118, 118, 0.08);
color: #ff9a9d;
opacity: 1;
outline: none;
}
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__list-card-body {
display: grid;
align-content: start;
gap: 8px;
min-width: 0;
}
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__list-card:hover,
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__review-item:hover {
border-color: rgba(var(--accent-rgb), 0.28);
transform: none;
}
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__empty-state {
min-height: 240px;
padding: clamp(30px, 4vw, 46px) 24px;
}
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__list-bar {
margin-bottom: 0;
}
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__list-tabs {
width: fit-content;
max-width: 100%;
}
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__list-tabs button {
white-space: nowrap;
}
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__upload-card--meta {
grid-template-columns: repeat(2, minmax(0, 1fr));
padding: 12px;
}
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__meta-item {
min-height: 78px;
}
@media (max-width: 960px) {
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__body {
grid-template-columns: 1fr;
width: min(760px, calc(100% - 36px));
margin-top: -44px;
}
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__sidebar {
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(220px, 0.8fr);
align-items: start;
}
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__sidebar-head {
grid-row: span 5;
align-items: flex-start;
text-align: left;
}
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__counts {
align-self: stretch;
}
}
@media (max-width: 640px) {
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__banner {
height: 140px;
}
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__body {
width: min(100% - 28px, 560px);
margin-top: -30px;
padding-bottom: 84px;
}
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__sidebar {
display: flex;
gap: 12px;
padding: 16px;
}
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__sidebar-head {
align-items: center;
text-align: center;
}
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__avatar-ring .profile-page__avatar,
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__avatar {
width: 72px;
height: 72px;
}
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__avatar-edit {
width: 72px;
height: 72px;
}
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__counts {
gap: 6px;
}
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__count {
padding: 10px 6px;
}
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__main-tabs {
display: flex;
overflow-x: auto;
scrollbar-width: none;
}
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__main-tabs::-webkit-scrollbar {
display: none;
}
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__main-tabs button {
flex: 0 0 auto;
min-width: 88px;
}
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__section {
padding: 14px;
}
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__list-grid,
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__review-list {
grid-template-columns: 1fr;
}
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__list-card {
min-height: 118px;
padding: 13px;
}
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__media-card {
grid-template-columns: 88px minmax(0, 1fr);
gap: 10px;
}
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__list-card-preview,
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__list-card-preview img,
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__list-card-preview video {
min-height: 82px;
}
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__list-card-head {
align-items: center;
flex-direction: row;
}
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__upload-card--meta {
grid-template-columns: 1fr;
}
}
@media (max-width: 420px) {
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__body {
width: min(100% - 20px, 420px);
}
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__counts {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__share-btn {
min-height: 40px;
}
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__media-card {
grid-template-columns: 78px minmax(0, 1fr);
}
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__list-card-preview,
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__list-card-preview img,
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__list-card-preview video {
min-height: 76px;
}
}
/* Profile center: lock media card rhythm for dense libraries. */
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__media-card {
grid-template-columns: 92px minmax(0, 1fr);
height: 126px;
min-height: 126px;
max-height: 126px;
}
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__media-card .profile-page__list-card-preview {
width: 92px;
height: 96px;
min-height: 96px;
max-height: 96px;
}
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__media-card .profile-page__list-card-preview img,
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__media-card .profile-page__list-card-preview video {
height: 96px;
min-height: 96px;
max-height: 96px;
}
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__media-card .profile-page__list-card-body {
display: grid;
grid-template-rows: 18px 36px 18px;
align-content: space-between;
gap: 8px;
height: 96px;
min-height: 96px;
}
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__media-card .profile-page__list-card-head {
min-height: 18px;
}
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__media-card .profile-page__list-card-head strong {
display: block;
width: 100%;
line-height: 1.25;
}
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__media-card p {
min-height: 36px;
max-height: 36px;
line-height: 1.5;
}
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__media-card .profile-page__list-card-meta {
align-self: end;
min-height: 18px;
}
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__media-card .profile-page__list-card-meta span:last-child {
color: var(--fg-soft);
}
@media (max-width: 640px) {
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__media-card {
grid-template-columns: 88px minmax(0, 1fr);
height: 112px;
min-height: 112px;
max-height: 112px;
}
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__media-card .profile-page__list-card-preview {
width: 88px;
height: 86px;
min-height: 86px;
max-height: 86px;
}
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__media-card .profile-page__list-card-preview img,
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__media-card .profile-page__list-card-preview video {
height: 86px;
min-height: 86px;
max-height: 86px;
}
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__media-card .profile-page__list-card-body {
grid-template-rows: 16px 32px 16px;
gap: 6px;
height: 86px;
min-height: 86px;
}
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__media-card p {
min-height: 32px;
max-height: 32px;
line-height: 1.45;
}
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__media-card .profile-page__list-card-meta {
min-height: 16px;
}
}
@media (max-width: 420px) {
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__media-card {
grid-template-columns: 78px minmax(0, 1fr);
height: 104px;
min-height: 104px;
max-height: 104px;
}
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__media-card .profile-page__list-card-preview {
width: 78px;
height: 78px;
min-height: 78px;
max-height: 78px;
}
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__media-card .profile-page__list-card-preview img,
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__media-card .profile-page__list-card-preview video {
height: 78px;
min-height: 78px;
max-height: 78px;
}
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__media-card .profile-page__list-card-body {
height: 78px;
min-height: 78px;
}
}
/* Ecommerce generation page: keep its carousel and composer independent from
the community carousel rules that share class names. */
.web-shell[data-ui-theme="dark-green"] .ecommerce-landing-page {
@@ -8948,18 +9591,23 @@
/* Canvas SaaS polish: refined production-tool surfaces without changing canvas behavior. */
.web-shell[data-ui-theme="dark-green"][data-view="canvas"] .canvas-page .studio-canvas {
background:
background-image:
radial-gradient(circle at 18% 8%, rgba(var(--accent-rgb), 0.055), transparent 30%),
radial-gradient(circle at 72% 88%, rgba(255, 255, 255, 0.035), transparent 28%),
linear-gradient(rgba(255, 255, 255, 0.026) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.026) 1px, transparent 1px),
var(--dg-page);
radial-gradient(
circle,
rgba(148, 163, 184, 0.34) 0 var(--canvas-bg-dot, 1.35px),
transparent calc(var(--canvas-bg-dot, 1.35px) + 0.55px)
);
background-color: var(--dg-page);
background-position:
center,
center,
var(--canvas-bg-x, 0px) var(--canvas-bg-y, 0px);
background-size:
auto,
auto,
24px 24px,
24px 24px,
auto;
var(--canvas-bg-size, 24px) var(--canvas-bg-size, 24px);
color: var(--fg-body);
}