{task.title} - {formatTaskType(task.type)} + {task.type} {task.prompt} - {formatTaskStatus(task.status)} - {formatProfileDate(task.createdAt)} + {task.status} + {task.createdAt}
{project.name} - {formatProfileDate(project.updatedAt)} + {project.updatedAt} {onDeleteProject ? ( {asset.name} - {formatAssetStatus(asset.status)} + {asset.status} {asset.description} {asset.type} - {formatProfileDate(asset.updatedAt)} + {asset.updatedAt} ))} @@ -737,39 +665,15 @@ function ProfilePage({ {displayName} - {isBioEditing ? ( - - setProfileBio(event.target.value)} - placeholder="填写一句个人签名" - rows={2} - maxLength={80} - autoFocus - /> - <div className="profile-page__bio-actions"> - <button type="button" className="profile-page__bio-action profile-page__bio-action--save" onClick={confirmBioEdit}> - <CheckOutlined /> - 保存 - </button> - <button type="button" className="profile-page__bio-action" onClick={cancelBioEdit}> - <CloseOutlined /> - 取消 - </button> - </div> - </div> - ) : ( - <button - type="button" - className={`profile-page__bio-display${profileBio.trim() ? "" : " is-empty"}`} - onClick={startBioEdit} - > - <span>{displayedBio}</span> - <EditOutlined className="profile-page__bio-edit-icon" /> - </button> - )} - {bioStatusNotice ? <span className="profile-page__bio-status">{bioStatusNotice}</span> : null} + <textarea + className="profile-page__bio" + value={profileBio} + onChange={(event) => setProfileBio(event.target.value)} + onBlur={handleBioBlur} + placeholder={displayedBio} + rows={2} + maxLength={80} + /> {profileNotice ? <span className="profile-page__sync-notice">{profileNotice}</span> : null} </div> @@ -788,21 +692,18 @@ function ProfilePage({ </div> </div> - <button type="button" className="profile-page__share-btn profile-page__share-btn--plan"> + <button type="button" className="profile-page__share-btn"> <ShareAltOutlined /> {packageLabel} </button> - <button type="button" className="profile-page__share-btn profile-page__share-btn--primary" onClick={onOpenWorkbench}> - <PlusOutlined /> + <button type="button" className="profile-page__share-btn" onClick={onOpenWorkbench}> 进入工作台 </button> - <button type="button" className="profile-page__share-btn profile-page__share-btn--secondary" onClick={onOpenCommunity}> - <ShareAltOutlined /> + <button type="button" className="profile-page__share-btn" onClick={onOpenCommunity}> 打开社区 </button> - <button type="button" className="profile-page__share-btn profile-page__share-btn--danger" onClick={onLogout}> - <LockOutlined /> + <button type="button" className="profile-page__share-btn" onClick={onLogout}> 退出登录 </button> </aside> @@ -858,25 +759,13 @@ function ProfilePage({ <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>当前账号：{displayName}</span> + <span>积分剩余：{(usage.balanceCents / 100).toFixed(2)}</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> + <span>任务总数：{tasks.length}</span> + <span>已完成：{completedTasks.length}</span> </> )} </div> @@ -895,30 +784,12 @@ function ProfilePage({ <source src={AUTH_SHOWCASE_VIDEO_URL} type="video/mp4" /> </video> <div className="auth-page__video-overlay"> - <div className="auth-page__showcase-content"> - <div className="auth-page__brand-row"> - <h1 className="auth-page__brand">OmniAI</h1> - </div> - <p className="auth-page__tagline">一句话，从创意到成片</p> - <div className="auth-page__features"> - <span>AI 视频生成</span> - <span>AI 图片创作</span> - <span>AI 电商素材</span> - </div> - <div className="auth-page__showcase-stats" aria-label="平台能力"> - <span> - <strong>Studio</strong> - 创作工作台 - </span> - <span> - <strong>Assets</strong> - 资产沉淀 - </span> - <span> - <strong>Team</strong> - 团队协作 - </span> - </div> + <h1 className="auth-page__brand">OmniAI</h1> + <p className="auth-page__tagline">一句话，从创意到成片</p> + <div className="auth-page__features"> + <span>AI 视频生成</span> + <span>AI 图片创作</span> + <span>AI 电商素材</span> </div> </div> </div> @@ -969,8 +840,7 @@ function ProfilePage({ <MailOutlined /> 邮箱 </button> <button type="button" className={authTab === "phone" ? "is-active" : ""} onClick={() => { setAuthTab("phone"); setFieldErrors({}); }}> - <MobileOutlined /> - <span className="auth-page__tab-label-short">手机</span> + <MobileOutlined /> 手机验证码 </button> </div> @@ -1050,11 +920,6 @@ function ProfilePage({ autoComplete={mode === "login" ? "current-password" : "new-password"} /> {fieldErrors.password ? <span className="auth-page__field-error">{fieldErrors.password}</span> : null} - {mode === "register" && passwordLooksReady && !fieldErrors.password ? ( - <span className="auth-page__field-hint"> - <CheckCircleFilled /> 密码长度符合要求 - </span> - ) : null} </label> {mode === "login" ? ( <div className="auth-page__forgot"> @@ -1092,11 +957,6 @@ function ProfilePage({ autoComplete="email" /> {fieldErrors.email ? <span className="auth-page__field-error">{fieldErrors.email}</span> : null} - {emailLooksValid && !fieldErrors.email ? ( - <span className="auth-page__field-hint"> - <CheckCircleFilled /> 邮箱格式正确 - </span> - ) : null} </label> <label className={`auth-page__field${fieldErrors.password ? " auth-page__field--error" : ""}`}> <span> @@ -1111,11 +971,6 @@ function ProfilePage({ autoComplete={mode === "login" ? "current-password" : "new-password"} /> {fieldErrors.password ? <span className="auth-page__field-error">{fieldErrors.password}</span> : null} - {mode === "register" && passwordLooksReady && !fieldErrors.password ? ( - <span className="auth-page__field-hint"> - <CheckCircleFilled /> 密码长度符合要求 - </span> - ) : null} </label> </> ) : null} @@ -1131,11 +986,6 @@ function ProfilePage({ <input type="tel" value={phone} onChange={(event) => { setPhone(event.target.value); clearFieldError("phone"); }} onBlur={() => handleFieldBlur("phone", phone)} placeholder="输入手机号" autoComplete="tel" /> </div> {fieldErrors.phone ? <span className="auth-page__field-error">{fieldErrors.phone}</span> : null} - {phoneLooksValid && !fieldErrors.phone ? ( - <span className="auth-page__field-hint"> - <CheckCircleFilled /> 手机号格式正确 - </span> - ) : null} </label> <label className={`auth-page__field${fieldErrors.smsCode ? " auth-page__field--error" : ""}`}> <span> @@ -1161,11 +1011,6 @@ function ProfilePage({ </span> <input type="password" value={password} onChange={(event) => { setPassword(event.target.value); clearFieldError("password"); }} onBlur={() => handleFieldBlur("password", password)} placeholder="至少 6 位" autoComplete="new-password" /> {fieldErrors.password ? <span className="auth-page__field-error">{fieldErrors.password}</span> : null} - {passwordLooksReady && !fieldErrors.password ? ( - <span className="auth-page__field-hint"> - <CheckCircleFilled /> 密码长度符合要求 - </span> - ) : null} </label> ) : null} </> diff --git a/src/features/script-tokens/ScriptTokensPage.tsx b/src/features/script-tokens/ScriptTokensPage.tsx index eac014f..9572dd3 100644 --- a/src/features/script-tokens/ScriptTokensPage.tsx +++ b/src/features/script-tokens/ScriptTokensPage.tsx @@ -1,11 +1,8 @@ import { - BarChartOutlined, CheckCircleFilled, CopyOutlined, DownloadOutlined, FileTextOutlined, - LoadingOutlined, - ThunderboltOutlined, UploadOutlined, } from "@ant-design/icons"; import { useEffect, useRef, useState, type ChangeEvent, type KeyboardEvent } from "react"; @@ -190,50 +187,6 @@ async function extractDocxText(bytes: Uint8Array): Promise<string> { entries.push({ name, offset: dataStart, size: compressedSize, compressed }); pos = dataStart + compressedSize; } - const docEntry = entries.find((e) => e.name === "word/document.xml"); - if (!docEntry) return ""; - const xmlBytes = bytes.slice(docEntry.offset, docEntry.offset + docEntry.size); - let xmlText: string; - if (docEntry.compressed) { - try { - const ds = new DecompressionStream("deflate-raw"); - const writer = ds.writable.getWriter(); - writer.write(xmlBytes); - writer.close(); - const reader = ds.readable.getReader(); - const chunks: Uint8Array[] = []; - while (true) { - const { done, value } = await reader.read(); - if (done) break; - chunks.push(value); - } - const totalLen = chunks.reduce((s, c) => s + c.length, 0); - const combined = new Uint8Array(totalLen); - let offset = 0; - for (const c of chunks) { combined.set(c, offset); offset += c.length; } - xmlText = new TextDecoder().decode(combined); - } catch { - xmlText = new TextDecoder().decode(xmlBytes); - } - } else { - xmlText = new TextDecoder().decode(xmlBytes); - } - const paraMatches = xmlText.match(/<w:p[ >][\s\S]*?<\/w:p>/g); - if (paraMatches) { - return paraMatches.map((p) => { - const tMatches = p.match(/<w:t[^>]*>([\s\S]*?)<\/w:t>/g); - if (!tMatches) return ""; - return tMatches.map((m) => m.replace(/<[^>]+>/g, "").replace(/</g, "<").replace(/>/g, ">").replace(/&/g, "&").replace(/"/g, "\"")).join(""); - }).filter(Boolean).join("\n").trim(); - } - return ""; -} - -function formatFileSize(size: number): string { - if (size < 1024) return `${size} B`; - if (size < 1024 * 1024) return `${(size / 1024).toFixed(1)} KB`; - return `${(size / 1024 / 1024).toFixed(1)} MB`; -} const docEntry = entries.find((e) => e.name === "word/document.xml"); if (!docEntry) return ""; const xmlBytes = bytes.slice(docEntry.offset, docEntry.offset + docEntry.size); @@ -280,12 +233,6 @@ function formatFileSize(size: number): string { }).filter(Boolean).join("\n").trim(); } return currentLine.trim(); -======= -function formatFileSize(size: number): string { - if (size < 1024) return `${size} B`; - if (size < 1024 * 1024) return `${(size / 1024).toFixed(1)} KB`; - return `${(size / 1024 / 1024).toFixed(1)} MB`; ->>>>>>> origin/master } const SCORE_DIMENSIONS: ScoreDimension[] = [ @@ -499,10 +446,9 @@ function ScriptTokensPage() { const compactTitle = uploadedFile?.name?.replace(/\.[^.]+$/, "") ?? "剧本评测"; const scriptMinutes = Math.max(8, Math.round(script.length / 460)); const reportDate = new Date().toLocaleDateString("zh-CN", { month: "2-digit", day: "2-digit" }); - const statusClass = loading ? "is-loading" : result ? "is-complete" : hasContent ? "is-ready" : "is-idle"; return ( - <section className={`script-eval-v5 page-motion ${statusClass}`}> + <section className="script-eval-v5 page-motion"> <div className="script-eval-v5-page"> {/* Left Panel */} <aside className="script-eval-v5-left"> @@ -518,10 +464,7 @@ function ScriptTokensPage() { {uploadedFile ? ( <div className="script-eval-v5-upload-done is-show"> <CheckCircleFilled /> - <span className="script-eval-v5-uf-meta"> - <span className="script-eval-v5-uf-name">{uploadedFile.name}</span> - <span className="script-eval-v5-uf-size">{formatFileSize(uploadedFile.size)}</span> - </span> + <span className="script-eval-v5-uf-name">{uploadedFile.name}</span> <span className="script-eval-v5-uf-re" onClick={(e) => { e.stopPropagation(); handleReset(); }}> 重新上传 </span> @@ -531,7 +474,7 @@ function ScriptTokensPage() { <div className="script-eval-v5-upload-icon"><UploadOutlined /></div> <div className="script-eval-v5-upload-text">拖拽或点击上传</div> <button type="button" className="script-eval-v5-upload-btn" onClick={(e) => { e.stopPropagation(); fileInputRef.current?.click(); }}> - <UploadOutlined /> 选择剧本 + + 上传剧本 </button> <div className="script-eval-v5-upload-hint">{TEXT_FILE_HINT}</div> </> @@ -604,12 +547,10 @@ function ScriptTokensPage() { disabled={loading || !hasContent} onClick={() => void handleEvaluate()} > - {loading ? <LoadingOutlined /> : <ThunderboltOutlined />} - <span>{loading ? "评测中..." : "开始评测"}</span> + {loading ? "◆ 评测中..." : "◆ 开始评测"} </button> <button type="button" className="script-eval-v5-export-btn" disabled={!result} onClick={handleExportMarkdown}> - <DownloadOutlined /> - <span>导出评测报告</span> + 导出评测报告 </button> </div> </aside> @@ -643,11 +584,6 @@ function ScriptTokensPage() { <div className="page-loading-spinner" /> <strong>AI 正在分析剧本...</strong> <p>正在调用模型进行六维评分，预计需要 15-30 秒</p> - <div className="script-eval-v5-loading-steps" aria-hidden="true"> - <span>结构识别</span> - <span>冲突评估</span> - <span>商业潜力</span> - </div> </div> </div> </div> @@ -734,23 +670,13 @@ function ScriptTokensPage() { <span>0%</span> </div> <div className="script-eval-report__chart-grid"> - {SCORE_DIMENSIONS.map((dim, dimIndex) => { + {SCORE_DIMENSIONS.map((dim) => { const score = result.dimensionScores[dim.key] ?? 0; const pct = Math.max(0, Math.min(1, score / dim.maxScore)); const lossPct = 1 - pct; const isPerfect = score === dim.maxScore; - const isActive = activeDim === null || activeDim === dimIndex; return ( - <button - key={dim.key} - type="button" - className={`script-eval-report__bar-col${isActive ? "" : " is-dimmed"}`} - onMouseEnter={() => setActiveDim(dimIndex)} - onFocus={() => setActiveDim(dimIndex)} - onMouseLeave={() => setActiveDim(null)} - onBlur={() => setActiveDim(null)} - aria-label={`${dim.label} ${score}/${dim.maxScore}，${dim.hint}`} - > + <button key={dim.key} type="button" className="script-eval-report__bar-col"> <div className="script-eval-report__bar-score"> <b>{score}</b><small>/{dim.maxScore}</small>{isPerfect ? <em>*</em> : null} </div> @@ -765,14 +691,6 @@ function ScriptTokensPage() { })} </div> </div> - <div className="script-eval-report__chart-note"> - <BarChartOutlined /> - <span> - {activeDim === null - ? "悬停维度可查看当前分项表现，优先从低分项制定改稿计划。" - : `${SCORE_DIMENSIONS[activeDim].label}：${SCORE_DIMENSIONS[activeDim].detail}`} - </span> - </div> </section> <div className="script-eval-report__findings"> diff --git a/src/features/script-tokens/TokenUsagePage.tsx b/src/features/script-tokens/TokenUsagePage.tsx index 23fc2d0..6b26f6b 100644 --- a/src/features/script-tokens/TokenUsagePage.tsx +++ b/src/features/script-tokens/TokenUsagePage.tsx @@ -142,8 +142,6 @@ function TokenUsagePage({ onSelectView, }: TokenUsagePageProps) { const [enterpriseUsage, setEnterpriseUsage] = useState<WebEnterpriseUsageSummary | null>(null); - const [enterpriseUsageLoading, setEnterpriseUsageLoading] = useState(false); - const [enterpriseUsageError, setEnterpriseUsageError] = useState<string | null>(null); const isEnterpriseAdmin = session?.user.enterpriseRole === "admin"; const isEnterpriseAccount = Boolean(session?.user.enterpriseId || session?.user.accountType === "enterprise"); @@ -154,15 +152,10 @@ function TokenUsagePage({ setEnterpriseUsage(null); return; } - setEnterpriseUsageLoading(true); - setEnterpriseUsageError(null); try { setEnterpriseUsage(await loader()); } catch (error) { setEnterpriseUsage(null); - setEnterpriseUsageError(error instanceof Error ? error.message : "加载失败"); - } finally { - setEnterpriseUsageLoading(false); } }, [session, isEnterpriseAdmin, loadEnterpriseUsage, loadPersonalUsage]); @@ -229,35 +222,22 @@ function TokenUsagePage({ { label: "账户类型", value: isEnterpriseAccount ? "企业账户" : "个人账户", tone: "good" }, { label: "企业空间", value: enterpriseUsage?.enterpriseName || session?.user.enterpriseName || "-" }, ]; - const pageStatusClass = enterpriseUsageLoading - ? "is-syncing" - : enterpriseUsageError - ? "has-sync-error" - : isLowBalance - ? "has-low-balance" - : "is-healthy"; return ( - <section className={`script-token-page token-usage-page management-center-page ${pageStatusClass}`} aria-label="管理中心"> + <section className="script-token-page token-usage-page management-center-page" aria-label="管理中心"> <main className="management-center-shell"> <header className="management-center-toolbar" aria-label="管理中心操作"> <div className="management-center-toolbar__title"> <button type="button" className="management-center-toolbar__back" aria-label="返回工具盒" onClick={onOpenMore}> <ArrowLeftOutlined /> </button> - <span> - <strong>管理中心</strong> - <small>用量、成员与模型调用监控</small> - </span> + <strong>管理中心</strong> </div> - <span className={`management-center-status-pill ${enterpriseUsageError ? "is-error" : enterpriseUsageLoading ? "is-loading" : "is-online"}`}> - {enterpriseUsageLoading ? "正在同步企业用量" : enterpriseUsageError || "服务器已连接"} - </span> - <button type="button" onClick={refreshEnterpriseUsage} disabled={enterpriseUsageLoading}> + <button type="button" onClick={refreshEnterpriseUsage}> <ReloadOutlined /> 刷新数据 </button> - <button type="button" className="is-muted-action"> + <button type="button"> <UserOutlined /> 成员管理 </button> @@ -271,9 +251,8 @@ function TokenUsagePage({ ) : null} <section className="management-metric-cards" aria-label="关键指标"> - {metricCards.map((card, index) => ( + {metricCards.map((card) => ( <article key={card.key} className={`management-metric-card is-${card.tone}`}> - <span className="management-metric-card__index">{String(index + 1).padStart(2, "0")}</span> <span className="management-metric-card__label">{card.label}</span> <strong className="management-metric-card__value">{card.value}</strong> <span className="management-metric-card__hint">{card.hint}</span> @@ -288,7 +267,7 @@ function TokenUsagePage({ <BarChartOutlined /> 模型消耗分布 </h2> - <span>{enterpriseUsageLoading ? "SYNC" : modelBreakdown.length ? `${modelBreakdown.length} 个模型` : "LIVE"}</span> + <span>{modelBreakdown.length ? `${modelBreakdown.length} 个模型` : "LIVE"}</span> </div> {modelBreakdown.length ? ( <div className="management-model-list"> @@ -315,10 +294,7 @@ function TokenUsagePage({ <article className="management-card management-status-card"> <div className="management-card__head"> - <h2> - <LineChartOutlined /> - 系统状态 - </h2> + <h2>系统状态</h2> </div> <dl> {systemStatus.map((item) => ( @@ -372,10 +348,7 @@ function TokenUsagePage({ <section className="management-card management-records"> <div className="management-card__head"> - <h2> - <BarChartOutlined /> - 调用记录 - </h2> + <h2>调用记录</h2> <span>{records.length} 条记录</span> </div> <div className="management-record-table" role="table" aria-label="调用记录"> diff --git a/src/features/workbench/WorkbenchPage.tsx b/src/features/workbench/WorkbenchPage.tsx index fcb8529..138f295 100644 --- a/src/features/workbench/WorkbenchPage.tsx +++ b/src/features/workbench/WorkbenchPage.tsx @@ -237,7 +237,6 @@ function WorkbenchPage({ const keepaliveTasksRef = useRef<Record<string, WorkbenchKeepaliveTask>>(readStoredKeepaliveTasks()); const taskAbortControllersRef = useRef<Map<string, AbortController>>(new Map()); const lastScrollTopRef = useRef(0); - const scrollActionsHideTimerRef = useRef<number | null>(null); const shouldFollowNewMessagesRef = useRef(true); const pendingScrollToLatestRef = useRef(true); const genTracker = useGenerationTasks({ sourceView: "workbench" }); @@ -276,8 +275,6 @@ function WorkbenchPage({ const [promptSelectionRange, setPromptSelectionRange] = useState({ start: 0, end: 0 }); const [mentionActiveIndex, setMentionActiveIndex] = useState(0); const [composerHidden, setComposerHidden] = useState(false); - const [scrollActionsVisible, setScrollActionsVisible] = useState(false); - const [scrollActionDirection, setScrollActionDirection] = useState<"top" | "bottom" | null>(null); const [workspaceStarted, setWorkspaceStarted] = useState(false); useEffect(() => { @@ -446,27 +443,6 @@ function WorkbenchPage({ "--accent-glow": `0 0 24px rgba(${accentRgb}, 0.22)`, } as CSSProperties; - const revealScrollActionsTemporarily = useCallback((direction: "top" | "bottom") => { - setScrollActionDirection(direction); - setScrollActionsVisible(true); - if (scrollActionsHideTimerRef.current !== null) { - window.clearTimeout(scrollActionsHideTimerRef.current); - } - scrollActionsHideTimerRef.current = window.setTimeout(() => { - setScrollActionsVisible(false); - setScrollActionDirection(null); - scrollActionsHideTimerRef.current = null; - }, 950); - }, []); - - useEffect(() => { - return () => { - if (scrollActionsHideTimerRef.current !== null) { - window.clearTimeout(scrollActionsHideTimerRef.current); - } - }; - }, []); - const scrollMessagesToLatest = useCallback((behavior: ScrollBehavior = "smooth") => { const scroll = () => { const surface = messagesSurfaceRef.current; @@ -477,7 +453,6 @@ function WorkbenchPage({ setComposerHidden(false); shouldFollowNewMessagesRef.current = true; - revealScrollActionsTemporarily("bottom"); surface.scrollTo({ top: surface.scrollHeight, behavior }); lastScrollTopRef.current = surface.scrollTop; }; @@ -486,7 +461,7 @@ function WorkbenchPage({ scroll(); window.setTimeout(scroll, 80); }); - }, [revealScrollActionsTemporarily]); + }, []); const imageSettingGroups = useMemo<WorkbenchFieldGroup[]>( () => [ @@ -1400,9 +1375,6 @@ function WorkbenchPage({ const delta = top - lastScrollTopRef.current; const atTop = top <= edgeThreshold; const atBottom = top + surface.clientHeight >= surface.scrollHeight - edgeThreshold; - if (surface.scrollHeight > surface.clientHeight + edgeThreshold && Math.abs(delta) > 1) { - revealScrollActionsTemporarily(delta > 0 ? "bottom" : "top"); - } shouldFollowNewMessagesRef.current = atBottom; if (atTop || atBottom) { setComposerHidden(false); @@ -1414,7 +1386,7 @@ function WorkbenchPage({ surface.addEventListener("scroll", handleScroll, { passive: true }); return () => surface.removeEventListener("scroll", handleScroll); - }, [hasActivatedWorkspace, revealScrollActionsTemporarily]); + }, [hasActivatedWorkspace]); const scrollMessagesSurface = useCallback((direction: "top" | "bottom") => { const surface = messagesSurfaceRef.current; @@ -1422,9 +1394,8 @@ function WorkbenchPage({ const top = direction === "top" ? 0 : surface.scrollHeight; setComposerHidden(false); - revealScrollActionsTemporarily(direction); surface.scrollTo({ top, behavior: "smooth" }); - }, [revealScrollActionsTemporarily]); + }, []); const closeToolbarMenus = () => setToolbarMenuId(null); const toggleToolbarMenu = (menuId: Exclude<ToolbarMenuId, null>) => { @@ -3055,13 +3026,10 @@ function WorkbenchPage({ {renderComposerToolbar(false, isGenerating)} </div> </section> - <div - className={`wb-chat-scroll-actions${scrollActionsVisible ? " is-visible" : ""}${scrollActionDirection ? ` is-${scrollActionDirection}` : ""}`} - aria-label="聊天滚动" - > + <div className="wb-chat-scroll-actions" aria-label="聊天滚动"> <button type="button" - className="wb-chat-scroll-actions__button wb-chat-scroll-actions__button--top" + className="wb-chat-scroll-actions__button" title="返回聊天顶部" aria-label="返回聊天顶部" onClick={() => scrollMessagesSurface("top")} @@ -3070,7 +3038,7 @@ function WorkbenchPage({ </button> <button type="button" - className="wb-chat-scroll-actions__button wb-chat-scroll-actions__button--bottom" + className="wb-chat-scroll-actions__button" title="到达聊天底部" aria-label="到达聊天底部" onClick={() => scrollMessagesSurface("bottom")} diff --git a/src/styles/pages/ecommerce.css b/src/styles/pages/ecommerce.css index d97b56d..181cc00 100644 --- a/src/styles/pages/ecommerce.css +++ b/src/styles/pages/ecommerce.css @@ -7981,863 +7981,3 @@ font-size: 12px; color: var(--accent); } - -/* Ecommerce generation page SaaS polish: visual-only refinement for the product creation workspace. */ -.product-clone-page { - --ecm-page: #0e1012; - --ecm-panel: rgba(20, 23, 25, 0.96); - --ecm-panel-strong: rgba(24, 28, 30, 0.98); - --ecm-inset: rgba(255, 255, 255, 0.035); - --ecm-inset-hover: rgba(255, 255, 255, 0.06); - --ecm-line: rgba(255, 255, 255, 0.095); - --ecm-line-strong: rgba(255, 255, 255, 0.14); - --ecm-text: #eef4f0; - --ecm-muted: rgba(232, 240, 235, 0.62); - --ecm-soft: rgba(232, 240, 235, 0.42); - --ecm-accent: var(--accent, #00ff88); - --ecm-accent-rgb: var(--accent-rgb, 0, 255, 136); - --ecm-radius-sm: 10px; - --ecm-radius-md: 14px; - --ecm-radius-lg: 18px; - --ecm-shadow-soft: 0 14px 38px rgba(0, 0, 0, 0.2); - --ecm-shadow-panel: 0 18px 54px rgba(0, 0, 0, 0.28); - background: - radial-gradient(circle at 26% 0%, rgba(var(--ecm-accent-rgb), 0.055), transparent 34%), - linear-gradient(180deg, rgba(255, 255, 255, 0.022), transparent 150px), - var(--ecm-page); - color: var(--ecm-text); - font-family: var(--font-sans, Inter, "PingFang SC", "Microsoft YaHei", Arial, sans-serif); -} - -.product-clone-page > .product-clone-shell { - background: - linear-gradient(90deg, rgba(255, 255, 255, 0.018), transparent 22%, transparent 76%, rgba(255, 255, 255, 0.014)), - transparent; -} - -.product-clone-page :is(button, select, textarea, input) { - font-family: inherit; - letter-spacing: 0; -} - -.product-clone-page :is(button, select, textarea):focus-visible { - outline: 2px solid rgba(var(--ecm-accent-rgb), 0.48); - outline-offset: 2px; -} - -.product-clone-page :is(button, select, textarea):disabled { - box-shadow: none; -} - -.product-clone-page[data-tool="clone"] { - --clone-settings-panel-width: clamp(420px, 36vw, 540px); - background: - radial-gradient(circle at 72% 12%, rgba(var(--ecm-accent-rgb), 0.045), transparent 31%), - linear-gradient(180deg, rgba(255, 255, 255, 0.018), transparent 180px), - var(--ecm-page); -} - -.product-clone-page[data-tool="clone"] > .product-clone-shell, -.product-clone-page[data-tool="clone"] .clone-ai-preview { - background: transparent; -} - -.product-clone-page[data-tool="clone"] .product-clone-panel { - border-right-color: var(--ecm-line); - background: - linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 150px), - var(--ecm-panel); -} - -.product-clone-page[data-tool="clone"] .clone-ai-panel { - gap: 12px; - padding: 18px; - scrollbar-color: rgba(255, 255, 255, 0.2) rgba(255, 255, 255, 0.035); -} - -.product-clone-page[data-tool="clone"] .clone-ai-logo { - position: sticky; - top: 0; - z-index: 3; - margin: -18px -18px 2px; - padding: 16px 18px 14px; - border-bottom-color: var(--ecm-line); - background: - linear-gradient(180deg, rgba(21, 24, 26, 0.98), rgba(21, 24, 26, 0.9)); - backdrop-filter: blur(16px); -} - -.product-clone-page[data-tool="clone"] .clone-ai-logo__mark { - border-radius: 9px; - box-shadow: 0 0 0 1px rgba(var(--ecm-accent-rgb), 0.18), 0 10px 24px rgba(var(--ecm-accent-rgb), 0.14); -} - -.product-clone-page[data-tool="clone"] .clone-ai-logo strong { - font-size: 15px; - line-height: 1.2; -} - -.product-clone-page[data-tool="clone"] .clone-ai-logo em { - border-color: var(--ecm-line); - background: var(--ecm-inset); - color: var(--ecm-muted); -} - -.product-clone-page[data-tool="clone"] :is( - .clone-ai-card, - .clone-ai-platform-spec, - .clone-ai-count-panel, - .clone-ai-replicate-panel, - .clone-ai-module-panel, - .clone-ai-model-panel, - .clone-ai-video-panel -) { - border-color: var(--ecm-line); - border-radius: var(--ecm-radius-md); - background: - linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 58%), - var(--ecm-panel-strong); - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025); -} - -.product-clone-page[data-tool="clone"] .clone-ai-card { - padding: 13px; -} - -.product-clone-page[data-tool="clone"] .clone-ai-card h2 { - margin-bottom: 10px; - color: var(--ecm-muted); - font-size: 11px; - line-height: 1.2; -} - -.product-clone-page[data-tool="clone"] .clone-ai-upload-zone { - min-height: 140px; - border-color: rgba(255, 255, 255, 0.16); - border-radius: var(--ecm-radius-md); - background: - radial-gradient(circle at 50% 0%, rgba(var(--ecm-accent-rgb), 0.09), transparent 58%), - var(--ecm-inset); -} - -.product-clone-page[data-tool="clone"] .clone-ai-upload-zone:hover, -.product-clone-page[data-tool="clone"] .clone-ai-upload-zone.is-dragging { - border-color: rgba(var(--ecm-accent-rgb), 0.55); - background: - radial-gradient(circle at 50% 0%, rgba(var(--ecm-accent-rgb), 0.14), transparent 60%), - rgba(var(--ecm-accent-rgb), 0.055); - transform: translateY(-1px); -} - -.product-clone-page[data-tool="clone"] .clone-ai-upload-icon { - background: rgba(var(--ecm-accent-rgb), 0.09); - color: var(--ecm-accent); -} - -.product-clone-page[data-tool="clone"] :is( - .clone-ai-tag-group button, - .clone-ai-basic-select > button, - .clone-ai-basic-select__menu, - .clone-ai-basic-select__menu button, - .clone-ai-replicate-tabs button, - .clone-ai-replicate-upload, - .clone-ai-replicate-levels button, - .clone-ai-count-row, - .clone-ai-count-stepper button, - .clone-ai-module-list button, - .clone-ai-model-tabs button, - .clone-ai-model-scene-grid button, - .clone-ai-model-select, - .clone-ai-model-select > button, - .clone-ai-model-select__menu, - .clone-ai-model-select__menu button, - .clone-ai-video-options button, - .clone-ai-video-smart -) { - border-color: var(--ecm-line); - background: var(--ecm-inset); - color: var(--ecm-muted); -} - -.product-clone-page[data-tool="clone"] :is( - .clone-ai-tag-group button:hover, - .clone-ai-basic-select > button:hover, - .clone-ai-basic-select > button.is-open, - .clone-ai-basic-select__menu button:hover, - .clone-ai-replicate-tabs button:hover, - .clone-ai-replicate-upload:hover, - .clone-ai-replicate-levels button:hover, - .clone-ai-count-stepper button:hover:not(:disabled), - .clone-ai-module-list button:hover, - .clone-ai-model-tabs button:hover, - .clone-ai-model-scene-grid button:hover, - .clone-ai-model-select > button:hover, - .clone-ai-model-select > button.is-open, - .clone-ai-model-select__menu button:hover, - .clone-ai-video-options button:hover, - .clone-ai-video-smart:hover -) { - border-color: var(--ecm-line-strong); - background: var(--ecm-inset-hover); - color: var(--ecm-text); -} - -.product-clone-page[data-tool="clone"] :is( - .clone-ai-tag-group button.is-active, - .clone-ai-basic-select__menu button.is-active, - .clone-ai-replicate-tabs button.is-active, - .clone-ai-replicate-levels button.is-active, - .clone-ai-module-list button.is-active, - .clone-ai-model-tabs button.is-active, - .clone-ai-model-scene-grid button.is-active, - .clone-ai-model-select__menu button.is-active, - .clone-ai-video-options button.is-active, - .clone-ai-video-smart.is-on -) { - border-color: rgba(var(--ecm-accent-rgb), 0.48); - background: - linear-gradient(180deg, rgba(var(--ecm-accent-rgb), 0.16), rgba(var(--ecm-accent-rgb), 0.07)); - color: var(--ecm-accent); -} - -.product-clone-page[data-tool="clone"] :is(.clone-ai-generate, .clone-ai-send-button, .clone-ai-upload-zone strong) { - background: var(--ecm-accent); - color: var(--dg-button-text, #061014); - box-shadow: 0 10px 28px rgba(var(--ecm-accent-rgb), 0.18); -} - -.product-clone-page[data-tool="clone"] :is(.clone-ai-generate:hover:not(:disabled), .clone-ai-send-button:hover:not(:disabled)) { - filter: brightness(1.03); - transform: translateY(-1px); -} - -.product-clone-page[data-tool="clone"] :is(.clone-ai-generate:disabled, .clone-ai-send-button:disabled) { - border-color: var(--ecm-line); - background: var(--ecm-inset); - color: var(--ecm-soft); - filter: none; -} - -.product-clone-page[data-tool="clone"] .clone-ai-settings-toggle { - border-color: var(--ecm-line-strong); - background: rgba(20, 23, 25, 0.86); - color: var(--ecm-muted); - box-shadow: var(--ecm-shadow-soft); - backdrop-filter: blur(14px); -} - -.product-clone-page[data-tool="clone"] .clone-ai-settings-toggle:hover, -.product-clone-page[data-tool="clone"] .clone-ai-settings-toggle:focus-visible { - border-color: rgba(var(--ecm-accent-rgb), 0.5); - background: rgba(var(--ecm-accent-rgb), 0.09); - color: var(--ecm-accent); -} - -.product-clone-page[data-tool="clone"] .clone-ai-preview { - align-content: center; - gap: 20px; - padding: 90px clamp(22px, 4vw, 46px) 134px; - background: - radial-gradient(circle at 50% 42%, rgba(var(--ecm-accent-rgb), 0.035), transparent 38%), - linear-gradient(180deg, rgba(255, 255, 255, 0.014), transparent 160px); -} - -.product-clone-page[data-tool="clone"] .clone-ai-preview-header { - top: 28px; - right: clamp(22px, 4vw, 46px); - left: clamp(22px, 4vw, 46px); - max-width: none; - padding-bottom: 16px; - border-bottom: 1px solid rgba(255, 255, 255, 0.055); -} - -.product-clone-page[data-tool="clone"] .clone-ai-preview-header strong { - font-size: clamp(18px, 1.6vw, 22px); -} - -.product-clone-page[data-tool="clone"] .clone-ai-preview-header span { - max-width: 620px; - color: var(--ecm-muted); - font-size: 13px; - line-height: 1.55; -} - -.product-clone-page[data-tool="clone"] .clone-ai-empty-state { - width: min(100%, 580px); - min-height: 260px; - padding: 28px; - border: 1px solid rgba(255, 255, 255, 0.055); - border-radius: 22px; - background: rgba(255, 255, 255, 0.014); -} - -.product-clone-page[data-tool="clone"] .clone-ai-empty-state .anticon { - width: 84px; - height: 84px; - border-color: var(--ecm-line); - background: - radial-gradient(circle at 50% 16%, rgba(var(--ecm-accent-rgb), 0.12), transparent 62%), - var(--ecm-panel-strong); - color: rgba(var(--ecm-accent-rgb), 0.46); -} - -.product-clone-page[data-tool="clone"] .clone-ai-preview-showcase { - gap: 18px; -} - -.product-clone-page[data-tool="clone"] :is(.clone-ai-main-result, .clone-ai-result-grid button) { - border-color: var(--ecm-line); - background: var(--ecm-panel-strong); - box-shadow: var(--ecm-shadow-soft); -} - -.product-clone-page[data-tool="clone"] :is(.clone-ai-main-result:hover, .clone-ai-result-grid button:hover) { - border-color: rgba(var(--ecm-accent-rgb), 0.38); - box-shadow: var(--ecm-shadow-panel); -} - -.product-clone-page[data-tool="clone"] .clone-ai-bottom-input { - right: clamp(18px, 4vw, 46px); - bottom: 20px; - left: clamp(18px, 4vw, 46px); -} - -.product-clone-page[data-tool="clone"] .clone-ai-input-wrapper { - border-color: var(--ecm-line); - border-radius: 18px; - background: - linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018)), - rgba(20, 24, 23, 0.92); - box-shadow: var(--ecm-shadow-panel); - backdrop-filter: blur(18px); -} - -.product-clone-page[data-tool="clone"] .clone-ai-input-wrapper:focus-within { - border-color: rgba(var(--ecm-accent-rgb), 0.42); - box-shadow: - 0 20px 58px rgba(0, 0, 0, 0.34), - 0 0 0 1px rgba(var(--ecm-accent-rgb), 0.08); -} - -.product-clone-page[data-tool="clone"] .clone-ai-input-wrapper textarea { - color: var(--ecm-text); -} - -.product-clone-page[data-tool="clone"] .clone-ai-char-count { - color: var(--ecm-soft); -} - -.product-clone-page:is([data-tool="set"], [data-tool="detail"], [data-tool="wear"]) { - background: var(--ecm-page); -} - -.product-clone-page:is([data-tool="set"], [data-tool="detail"], [data-tool="wear"]) .product-clone-panel, -.product-clone-page:is([data-tool="set"], [data-tool="detail"], [data-tool="wear"]) .product-clone-rail { - border-color: var(--ecm-line); - background: - linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 160px), - var(--ecm-panel); -} - -.product-clone-page:is([data-tool="detail"], [data-tool="wear"]) .product-clone-rail button { - border-radius: var(--ecm-radius-sm); - color: var(--ecm-muted); -} - -.product-clone-page:is([data-tool="detail"], [data-tool="wear"]) .product-clone-rail button:hover, -.product-clone-page:is([data-tool="detail"], [data-tool="wear"]) .product-clone-rail button.is-active { - background: rgba(var(--ecm-accent-rgb), 0.1); - color: var(--ecm-accent); -} - -.product-clone-page:is([data-tool="set"], [data-tool="detail"], [data-tool="wear"]) :is( - .product-clone-field, - .product-set-upload-section, - .product-set-settings-section, - .product-set-detail-section -) { - border-color: var(--ecm-line); - border-radius: var(--ecm-radius-lg); - background: - linear-gradient(180deg, rgba(255, 255, 255, 0.034), transparent 54%), - var(--ecm-panel-strong); - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025); -} - -.product-clone-page:is([data-tool="set"], [data-tool="detail"], [data-tool="wear"]) :is( - .product-clone-field h2, - .product-set-upload-section h2, - .product-set-settings-section h2, - .product-set-detail-section h2 -) { - color: var(--ecm-text); - font-size: 15px; - font-weight: 820; -} - -.product-clone-page:is([data-tool="set"], [data-tool="detail"], [data-tool="wear"]) :is( - select, - textarea, - .product-clone-upload-zone, - .product-set-upload, - .product-set-output-grid button, - .product-set-structure-grid button, - .product-detail-module-grid button, - .product-clone-scene-grid button, - .product-clone-ratio-row button, - .product-clone-segment button, - .product-clone-model-button, - .product-clone-switch-row, - .product-set-style-toggle -) { - border-color: var(--ecm-line); - border-radius: var(--ecm-radius-sm); - background: var(--ecm-inset); - color: var(--ecm-muted); -} - -.product-clone-page:is([data-tool="set"], [data-tool="detail"], [data-tool="wear"]) :is( - select:hover, - textarea:hover, - .product-clone-upload-zone:hover, - .product-set-upload:hover, - .product-set-output-grid button:hover, - .product-set-structure-grid button:hover, - .product-detail-module-grid button:hover, - .product-clone-scene-grid button:hover, - .product-clone-ratio-row button:hover, - .product-clone-segment button:hover, - .product-clone-model-button:hover, - .product-clone-switch-row:hover, - .product-set-style-toggle:hover -) { - border-color: var(--ecm-line-strong); - background: var(--ecm-inset-hover); - color: var(--ecm-text); -} - -.product-clone-page:is([data-tool="set"], [data-tool="detail"], [data-tool="wear"]) :is( - .product-set-output-grid button.is-active, - .product-set-structure-grid button.is-active, - .product-detail-module-grid button.is-active, - .product-clone-scene-grid button.is-active, - .product-clone-ratio-row button.is-active, - .product-clone-segment button.is-active, - .product-set-style-toggle.is-active -) { - border-color: rgba(var(--ecm-accent-rgb), 0.48); - background: rgba(var(--ecm-accent-rgb), 0.12); - color: var(--ecm-accent); -} - -.product-clone-page:is([data-tool="set"], [data-tool="detail"], [data-tool="wear"]) :is(.product-clone-primary, .product-set-floating-submit) { - border: 0; - background: var(--ecm-accent); - color: var(--dg-button-text, #061014); - box-shadow: 0 12px 30px rgba(var(--ecm-accent-rgb), 0.18); -} - -.product-clone-page:is([data-tool="set"], [data-tool="detail"], [data-tool="wear"]) :is(.product-clone-primary, .product-set-floating-submit):disabled { - background: var(--ecm-inset); - color: var(--ecm-soft); - box-shadow: none; -} - -.product-clone-page:is([data-tool="set"], [data-tool="detail"], [data-tool="wear"]) .product-clone-preview { - background: - radial-gradient(circle at 50% 40%, rgba(var(--ecm-accent-rgb), 0.032), transparent 40%), - transparent; -} - -.product-clone-page:is([data-tool="set"], [data-tool="detail"], [data-tool="wear"]) :is( - .product-set-empty-preview, - .product-clone-empty-panel -) { - border-color: rgba(255, 255, 255, 0.055); - border-radius: 22px; - background: rgba(255, 255, 255, 0.014); -} - -.product-clone-page[data-tool="set"] .product-set-floating-detail { - border-color: var(--ecm-line); - background: - linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018)), - rgba(20, 24, 23, 0.92); - box-shadow: var(--ecm-shadow-panel); - backdrop-filter: blur(18px); -} - -.ecommerce-progress-bar { - border-color: rgba(var(--ecm-accent-rgb), 0.22); - background: rgba(var(--ecm-accent-rgb), 0.07); -} - -.ecommerce-progress-bar__fill { - box-shadow: 0 0 18px rgba(var(--ecm-accent-rgb), 0.36); -} - -@media (max-width: 1180px) { - .product-clone-page[data-tool="clone"] { - --clone-settings-panel-width: clamp(390px, 45vw, 440px); - } - - .product-clone-page[data-tool="clone"] .clone-ai-preview { - padding-right: 28px; - padding-left: 28px; - } -} - -@media (max-width: 860px) { - .product-clone-page[data-tool="clone"] { - height: auto; - min-height: 100%; - overflow: auto; - } - - .product-clone-page[data-tool="clone"] > .product-clone-shell, - .product-clone-page[data-tool="clone"].is-settings-collapsed > .product-clone-shell { - grid-template-columns: 1fr; - grid-template-rows: auto minmax(620px, 1fr); - height: auto; - min-height: 100%; - } - - .product-clone-page[data-tool="clone"].is-settings-collapsed > .product-clone-shell { - grid-template-rows: 0 minmax(620px, 1fr); - } - - .product-clone-page[data-tool="clone"] .product-clone-panel { - border-right: 0; - border-bottom: 1px solid var(--ecm-line); - } - - .product-clone-page[data-tool="clone"] .clone-ai-panel { - width: 100%; - max-width: none; - max-height: none; - } - - .product-clone-page[data-tool="clone"] .clone-ai-settings-toggle, - .product-clone-page[data-tool="clone"].is-settings-collapsed .clone-ai-settings-toggle { - top: 14px; - right: 14px; - left: auto; - transform: none; - } - - .product-clone-page[data-tool="clone"] .clone-ai-settings-toggle:active { - transform: scale(0.94); - } - - .product-clone-page[data-tool="clone"] .clone-ai-preview { - min-height: 620px; - padding: 92px 18px 134px; - } - - .product-clone-page[data-tool="clone"] .clone-ai-preview-header { - top: 24px; - right: 18px; - left: 18px; - } - - .product-clone-page[data-tool="clone"] .clone-ai-preview-showcase { - grid-template-columns: 1fr; - width: min(100%, 520px); - } - - .product-clone-page[data-tool="clone"] .clone-ai-flow-arrow { - display: none; - } - - .product-clone-page[data-tool="clone"] .clone-ai-main-result { - height: 260px; - } -} - -@media (max-width: 620px) { - .product-clone-page:is([data-tool="set"], [data-tool="detail"], [data-tool="wear"]) .product-clone-panel__scroll, - .product-clone-page[data-tool="clone"] .clone-ai-panel { - padding: 14px; - } - - .product-clone-page[data-tool="clone"] .clone-ai-logo { - margin: -14px -14px 0; - padding: 14px 54px 12px 14px; - } - - .product-clone-page[data-tool="clone"] .clone-ai-card, - .product-clone-page[data-tool="clone"] :is(.clone-ai-platform-spec, .clone-ai-count-panel, .clone-ai-replicate-panel, .clone-ai-module-panel, .clone-ai-model-panel, .clone-ai-video-panel) { - padding: 11px; - } - - .product-clone-page[data-tool="clone"] .clone-ai-upload-zone { - min-height: 120px; - } - - .product-clone-page[data-tool="clone"] .clone-ai-tag-group, - .product-clone-page[data-tool="clone"] .clone-ai-basic-select-grid, - .product-clone-page[data-tool="clone"] .clone-ai-model-select-grid { - grid-template-columns: repeat(2, minmax(0, 1fr)); - } - - .product-clone-page[data-tool="clone"] .clone-ai-preview { - min-height: 560px; - padding: 86px 12px 128px; - } - - .product-clone-page[data-tool="clone"] .clone-ai-empty-state { - min-height: 220px; - padding: 22px 16px; - } - - .product-clone-page[data-tool="clone"] .clone-ai-bottom-input { - right: 10px; - bottom: 12px; - left: 10px; - } - - .product-clone-page[data-tool="clone"] .clone-ai-input-wrapper { - grid-template-columns: minmax(0, 1fr) 36px; - gap: 8px; - padding: 10px; - border-radius: 16px; - } - - .product-clone-page[data-tool="clone"] .clone-ai-send-button { - width: 36px; - height: 36px; - } -} - -@media (max-width: 900px) { - .product-clone-page { - box-sizing: border-box; - padding-top: 58px; - } - - .product-clone-page > .product-clone-shell { - min-height: calc(100% - 58px); - } -} - -@media (max-width: 480px) { - .product-clone-page { - padding-top: 56px; - } - - .product-clone-page > .product-clone-shell { - min-height: calc(100% - 56px); - } -} - -/* Ecommerce refinement pass: make the preview state more informative and selected controls quieter. */ -.product-clone-page[data-tool="clone"] .clone-ai-preview { - padding-top: 138px; -} - -.product-clone-page[data-tool="clone"] .clone-ai-preview-header { - gap: 9px; -} - -.product-clone-page[data-tool="clone"] .clone-ai-preview-summary { - display: flex; - flex-wrap: wrap; - gap: 7px; - max-width: min(100%, 720px); -} - -.product-clone-page[data-tool="clone"] .clone-ai-preview-summary span { - display: inline-flex; - align-items: center; - max-width: 180px; - min-height: 26px; - padding: 0 10px; - overflow: hidden; - border: 1px solid rgba(255, 255, 255, 0.095); - border-radius: 999px; - background: rgba(255, 255, 255, 0.035); - color: rgba(232, 240, 235, 0.68); - font-size: 11px; - font-weight: 780; - line-height: 1; - text-overflow: ellipsis; - white-space: nowrap; -} - -.product-clone-page[data-tool="clone"] .clone-ai-preview-summary span:first-child { - border-color: rgba(var(--ecm-accent-rgb), 0.28); - background: rgba(var(--ecm-accent-rgb), 0.08); - color: var(--ecm-accent); -} - -.product-clone-page[data-tool="clone"] :is( - .clone-ai-module-list button, - .clone-ai-model-scene-grid button, - .clone-ai-replicate-levels button, - .clone-ai-video-options button -), -.product-clone-page:is([data-tool="set"], [data-tool="detail"], [data-tool="wear"]) :is( - .product-set-structure-grid button, - .product-detail-module-grid button, - .product-clone-scene-grid button, - .product-clone-ratio-row button -) { - position: relative; - overflow: hidden; -} - -.product-clone-page[data-tool="clone"] :is( - .clone-ai-module-list button.is-active, - .clone-ai-model-scene-grid button.is-active, - .clone-ai-replicate-levels button.is-active, - .clone-ai-video-options button.is-active -), -.product-clone-page:is([data-tool="set"], [data-tool="detail"], [data-tool="wear"]) :is( - .product-set-structure-grid button.is-active, - .product-detail-module-grid button.is-active, - .product-clone-scene-grid button.is-active, - .product-clone-ratio-row button.is-active -) { - border-color: rgba(var(--ecm-accent-rgb), 0.5); - background: - linear-gradient(90deg, rgba(var(--ecm-accent-rgb), 0.13), rgba(var(--ecm-accent-rgb), 0.035)), - rgba(255, 255, 255, 0.035); - color: var(--ecm-text); -} - -.product-clone-page[data-tool="clone"] :is( - .clone-ai-module-list button.is-active, - .clone-ai-model-scene-grid button.is-active, - .clone-ai-replicate-levels button.is-active, - .clone-ai-video-options button.is-active -)::before, -.product-clone-page:is([data-tool="set"], [data-tool="detail"], [data-tool="wear"]) :is( - .product-set-structure-grid button.is-active, - .product-detail-module-grid button.is-active, - .product-clone-scene-grid button.is-active, - .product-clone-ratio-row button.is-active -)::before { - position: absolute; - inset: 8px auto 8px 0; - width: 3px; - border-radius: 999px; - background: var(--ecm-accent); - content: ""; -} - -.product-clone-page[data-tool="clone"] .clone-ai-module-list button.is-active span, -.product-clone-page:is([data-tool="set"], [data-tool="detail"], [data-tool="wear"]) :is( - .product-set-structure-grid button.is-active em, - .product-detail-module-grid button.is-active span -) { - color: rgba(232, 240, 235, 0.62); -} - -@media (max-width: 860px) { - .product-clone-page[data-tool="clone"] .clone-ai-preview { - padding-top: 148px; - } -} - -@media (max-width: 620px) { - .product-clone-page[data-tool="clone"] .clone-ai-preview { - padding-top: 158px; - } - - .product-clone-page[data-tool="clone"] .clone-ai-preview-summary { - gap: 6px; - } - - .product-clone-page[data-tool="clone"] .clone-ai-preview-summary span { - max-width: 138px; - min-height: 24px; - padding: 0 8px; - font-size: 10px; - } -} - -@media (max-height: 760px) { - .product-clone-page[data-tool="clone"].is-settings-collapsed .clone-ai-preview { - grid-template-rows: auto minmax(220px, 1fr) auto; - align-content: stretch; - justify-items: stretch; - overflow: auto; - padding-top: clamp(28px, 7vh, 72px); - padding-bottom: 20px; - } - - .product-clone-page[data-tool="clone"].is-settings-collapsed .clone-ai-preview-header { - position: static; - width: 100%; - max-width: none; - } - - .product-clone-page[data-tool="clone"].is-settings-collapsed .clone-ai-empty-state { - align-self: center; - justify-self: center; - min-height: min(260px, 36vh); - } - - .product-clone-page[data-tool="clone"].is-settings-collapsed .clone-ai-bottom-input { - position: static; - width: min(100%, 780px); - align-self: end; - justify-self: center; - } -} - -@media (max-width: 860px) { - .product-clone-page[data-tool="clone"] .clone-ai-preview { - grid-template-rows: auto minmax(220px, 1fr) auto; - align-content: stretch; - justify-items: stretch; - overflow: auto; - padding-bottom: 20px; - } - - .product-clone-page[data-tool="clone"] .clone-ai-preview-header { - position: static; - width: 100%; - max-width: none; - } - - .product-clone-page[data-tool="clone"] .clone-ai-empty-state { - align-self: center; - justify-self: center; - } - - .product-clone-page[data-tool="clone"] .clone-ai-bottom-input { - position: static; - width: min(100%, 780px); - align-self: end; - justify-self: center; - } -} - -@media (max-width: 620px) { - .product-clone-page[data-tool="clone"] .clone-ai-preview { - grid-template-rows: auto minmax(210px, 1fr) auto; - gap: 16px; - padding-bottom: 14px; - } - - .product-clone-page[data-tool="clone"] .clone-ai-empty-state { - min-height: min(220px, 34vh); - } -} - -/* Mobile preview rhythm: once the preview header is in normal flow, remove the desktop top reserve. */ -@media (max-width: 860px) { - .product-clone-page[data-tool="clone"] .clone-ai-preview { - min-height: 520px; - padding-top: 18px; - } -} - -@media (max-width: 620px) { - .product-clone-page[data-tool="clone"] .clone-ai-preview { - min-height: 440px; - padding-top: 14px; - } -} -} diff --git a/src/styles/pages/home.css b/src/styles/pages/home.css index f80f16c..d373993 100644 --- a/src/styles/pages/home.css +++ b/src/styles/pages/home.css @@ -148,83 +148,37 @@ min-width: 0; min-height: 72px; padding: 0 28px; - border: 1px solid rgba(255, 255, 255, 0.08); - border-radius: 12px; - background: linear-gradient(180deg, rgba(20, 23, 26, 0.72) 0%, rgba(15, 17, 19, 0.84) 100%); - backdrop-filter: blur(12px); - -webkit-backdrop-filter: blur(12px); - box-shadow: - 0 1px 0 rgba(255, 255, 255, 0.04) inset, - 0 2px 8px rgba(0, 0, 0, 0.28); + border: 1px solid var(--border-subtle); + border-radius: 8px; + background: var(--bg-inset); color: var(--fg-body); cursor: pointer; - font-size: 16px; - font-weight: 700; - letter-spacing: 0.03em; - transition: - border-color 240ms ease, - background 240ms ease, - color 240ms ease, - transform 240ms cubic-bezier(0.34, 1.2, 0.64, 1), - box-shadow 240ms ease; + font-size: 17px; + font-weight: 850; + transition: border-color 160ms ease, background 160ms ease, color 160ms ease, transform 160ms ease; } .omni-home__entry .anticon { - font-size: 19px; - transition: color 240ms ease, transform 240ms ease; + font-size: 18px; } .omni-home__entry:hover { - border-color: rgba(255, 255, 255, 0.16); - background: linear-gradient(180deg, rgba(28, 32, 36, 0.78) 0%, rgba(18, 22, 25, 0.88) 100%); - box-shadow: - 0 1px 0 rgba(255, 255, 255, 0.06) inset, - 0 0 24px rgba(var(--accent-rgb), 0.06), - 0 4px 16px rgba(0, 0, 0, 0.36); + border-color: var(--border-default); + background: var(--bg-hover); color: #ffffff; - transform: translateY(-2px); -} - -.omni-home__entry:hover .anticon { - color: var(--accent); - transform: scale(1.08); -} - -.omni-home__entry:active { - transform: translateY(0) scale(0.97); - box-shadow: - 0 1px 0 rgba(255, 255, 255, 0.02) inset, - 0 1px 4px rgba(0, 0, 0, 0.32); - transition-duration: 80ms; + transform: translateY(-1px); } .omni-home__entry--primary { - border-color: rgba(var(--accent-rgb), 0.48); - background: linear-gradient(180deg, rgba(0, 255, 136, 0.22) 0%, rgba(0, 220, 118, 0.14) 100%), var(--accent); - box-shadow: - 0 1px 0 rgba(255, 255, 255, 0.12) inset, - 0 0 28px rgba(var(--accent-rgb), 0.18), - 0 2px 12px rgba(0, 0, 0, 0.28); - color: #061014; + border-color: var(--accent); + background: var(--accent); + color: var(--dg-button-text, #061014); } .omni-home__entry--primary:hover { - border-color: rgba(var(--accent-rgb), 0.64); - background: linear-gradient(180deg, rgba(0, 255, 136, 0.28) 0%, rgba(0, 230, 124, 0.18) 100%), var(--accent-hover); - box-shadow: - 0 1px 0 rgba(255, 255, 255, 0.16) inset, - 0 0 40px rgba(var(--accent-rgb), 0.28), - 0 6px 24px rgba(0, 0, 0, 0.36); - color: #061014; -} - -.omni-home__entry--primary .anticon { - color: #061014; -} - -.omni-home__entry--primary:hover .anticon { - color: #061014; - transform: scale(1.12); + border-color: var(--accent-hover, var(--accent)); + background: var(--accent-hover, var(--accent)); + color: var(--dg-button-text, #061014); } .omni-home__carousel { diff --git a/src/styles/pages/script-tokens-v5.css b/src/styles/pages/script-tokens-v5.css index 932c360..f07be33 100644 --- a/src/styles/pages/script-tokens-v5.css +++ b/src/styles/pages/script-tokens-v5.css @@ -2649,775 +2649,3 @@ min-height: 52px; } } - -/* ===== Commercial SaaS polish for script review page ===== */ -.script-eval-v5 { - --v5-radius-xs: 6px; - --v5-radius-sm: 8px; - --v5-radius-md: 12px; - --v5-radius-lg: 16px; - --v5-panel: #131616; - --v5-panel-2: #181c1b; - --v5-panel-3: #101312; - --v5-line: rgb(255 255 255 / 7%); - --v5-line-strong: rgb(0 255 136 / 22%); - --v5-shadow-soft: 0 18px 48px rgb(0 0 0 / 24%); - --v5-shadow-tight: 0 10px 24px rgb(0 0 0 / 18%); - background: - linear-gradient(180deg, rgb(255 255 255 / 2.2%), transparent 220px), - var(--v5-bg); - letter-spacing: 0; -} - -.script-eval-v5-page { - background: linear-gradient(90deg, rgb(0 255 136 / 3%), transparent 28%); -} - -.script-eval-v5-left { - background: - linear-gradient(180deg, rgb(255 255 255 / 3.5%), transparent 180px), - var(--v5-panel); - border-right-color: var(--v5-line); - box-shadow: inset -1px 0 0 rgb(0 255 136 / 4%), 18px 0 38px rgb(0 0 0 / 18%); -} - -.script-eval-v5-lp-section { - border-bottom-color: var(--v5-line); -} - -.script-eval-v5-lp-label { - display: flex; - align-items: center; - gap: 8px; - color: #7f8d88; - font-size: 12px; - font-weight: 800; - letter-spacing: 0.06em; -} - -.script-eval-v5-lp-label::before { - content: ""; - width: 6px; - height: 6px; - border-radius: 999px; - background: rgb(0 255 136 / 42%); - box-shadow: 0 0 14px rgb(0 255 136 / 24%); -} - -.script-eval-v5-upload-zone { - position: relative; - min-height: 214px; - border: 1px dashed rgb(255 255 255 / 14%); - border-radius: var(--v5-radius-lg); - background: - linear-gradient(180deg, rgb(255 255 255 / 4%), transparent), - rgb(255 255 255 / 2.5%); - box-shadow: inset 0 1px 0 rgb(255 255 255 / 6%); -} - -.script-eval-v5-upload-zone:hover, -.script-eval-v5-upload-zone:focus-visible { - border-color: var(--v5-line-strong); - background: - linear-gradient(180deg, rgb(0 255 136 / 8%), transparent), - rgb(0 255 136 / 4%); - outline: none; - box-shadow: inset 0 1px 0 rgb(255 255 255 / 8%), 0 16px 36px rgb(0 0 0 / 16%); -} - -.script-eval-v5-upload-icon { - display: grid; - place-items: center; - width: 58px; - height: 58px; - margin: 0 auto 14px; - border: 1px solid rgb(255 255 255 / 7%); - border-radius: 18px; - background: rgb(0 255 136 / 8%); - color: color-mix(in srgb, var(--v5-green) 74%, #ffffff); -} - -.script-eval-v5-upload-text { - margin-bottom: 14px; - color: #d7dedb; - font-weight: 760; -} - -.script-eval-v5-upload-btn, -.script-eval-v5-eval-btn, -.script-eval-v5-export-btn, -.script-eval-v5-action-btn, -.script-eval-v5-retry-btn { - font-family: inherit; - letter-spacing: 0; -} - -.script-eval-v5-upload-btn, -.script-eval-v5-eval-btn, -.script-eval-v5-export-btn { - display: inline-flex; - align-items: center; - justify-content: center; - gap: 8px; -} - -.script-eval-v5-upload-btn, -.script-eval-v5-eval-btn { - background: linear-gradient(180deg, #34ffa9 0%, var(--v5-green) 52%, #07cf73 100%); - box-shadow: 0 12px 28px rgb(0 255 136 / 14%), inset 0 1px 0 rgb(255 255 255 / 36%); -} - -.script-eval-v5-upload-btn:hover, -.script-eval-v5-eval-btn:hover:not(:disabled) { - background: linear-gradient(180deg, #55ffb8 0%, #10f58c 56%, var(--v5-green-dim) 100%); - transform: translateY(-1px); -} - -.script-eval-v5-upload-hint { - max-width: 300px; - margin-inline: auto; - color: #74837e; - line-height: 1.6; -} - -.script-eval-v5-upload-done { - min-height: 86px; - border-color: var(--v5-line-strong); - border-radius: var(--v5-radius-md); - background: - linear-gradient(180deg, rgb(0 255 136 / 12%), rgb(0 255 136 / 5%)), - rgb(255 255 255 / 2%); -} - -.script-eval-v5-uf-meta { - min-width: 0; - flex: 1; - display: grid; - gap: 4px; - text-align: left; -} - -.script-eval-v5-uf-name { - display: block; - color: #e9fff5; - font-size: 14px; - line-height: 1.25; -} - -.script-eval-v5-uf-size { - color: #7f918a; - font-size: 11px; - font-weight: 700; -} - -.script-eval-v5-uf-re { - padding: 5px 8px; - border-radius: var(--v5-radius-xs); - color: #a2b0ab; - transition: color 160ms ease, background 160ms ease; -} - -.script-eval-v5-uf-re:hover { - background: rgb(255 255 255 / 6%); -} - -.script-eval-v5-info-grid { - gap: 8px; -} - -.script-eval-v5-info-item { - min-height: 38px; - padding: 0 12px; - border: 1px solid rgb(255 255 255 / 5%); - border-radius: var(--v5-radius-sm); - background: rgb(255 255 255 / 2.6%); -} - -.script-eval-v5-info-key { - color: #84928d; - font-size: 13px; - font-weight: 650; -} - -.script-eval-v5-info-val { - color: #e5ebe8; - font-size: 13px; - font-weight: 800; -} - -.script-eval-v5-info-tag { - border-radius: 999px; - padding: 4px 10px; -} - -.script-eval-v5-info-empty, -.script-eval-v5-history-empty { - min-height: 70px; - display: grid; - place-items: center; - border: 1px dashed rgb(255 255 255 / 9%); - border-radius: var(--v5-radius-md); - background: rgb(255 255 255 / 2%); - color: #75827e; - line-height: 1.5; -} - -.script-eval-v5-history-list { - gap: 8px; -} - -.script-eval-v5-history-item { - border: 1px solid rgb(255 255 255 / 5%); - border-radius: var(--v5-radius-md); - background: rgb(255 255 255 / 2.4%); - transition: border-color 160ms ease, background 160ms ease, transform 160ms ease, box-shadow 160ms ease; -} - -.script-eval-v5-history-item:hover { - border-color: rgb(255 255 255 / 10%); - background: rgb(255 255 255 / 4%); - transform: translateY(-1px); -} - -.script-eval-v5-history-item.is-active { - border-color: var(--v5-line-strong); - background: linear-gradient(90deg, rgb(0 255 136 / 10%), rgb(0 255 136 / 3%)); - box-shadow: inset 3px 0 0 var(--v5-green); -} - -.script-eval-v5-hi-name { - color: #dce5e1; - font-size: 14px; - font-weight: 760; -} - -.script-eval-v5-hi-date { - color: #73817c; - font-size: 11px; -} - -.script-eval-v5-hi-score { - font-variant-numeric: tabular-nums; - font-size: 28px; -} - -.script-eval-v5-hi-grade { - color: #7d8985; -} - -.script-eval-v5-lp-bottom { - border-top-color: var(--v5-line); - background: linear-gradient(180deg, rgb(19 22 22 / 72%), #111414); - box-shadow: 0 -18px 34px rgb(0 0 0 / 18%); -} - -.script-eval-v5-eval-btn { - min-height: 58px; - border-radius: var(--v5-radius-md); - font-size: 17px; - font-weight: 850; - transition: transform 160ms ease, box-shadow 160ms ease, opacity 160ms ease; -} - -.script-eval-v5-eval-btn:disabled { - opacity: 0.44; - box-shadow: none; -} - -.script-eval-v5-export-btn { - min-height: 50px; - border-color: rgb(255 255 255 / 9%); - border-radius: var(--v5-radius-md); - background: rgb(255 255 255 / 3.5%); - color: #aab8b2; - font-size: 14px; - font-weight: 760; -} - -.script-eval-v5-export-btn:hover:not(:disabled) { - border-color: var(--v5-line-strong); - background: rgb(0 255 136 / 7%); - color: #dcfff0; -} - -.script-eval-v5-right { - background: - linear-gradient(180deg, rgb(255 255 255 / 2.4%), transparent 240px), - #0d0f0f; -} - -.script-eval-v5-right-topbar { - min-height: 52px; - border-bottom-color: var(--v5-line); - background: rgb(13 15 15 / 88%); - backdrop-filter: blur(18px); -} - -.script-eval-v5-right-title { - color: #87938f; - font-size: 14px; - font-weight: 760; -} - -.script-eval-v5-rt-green { - color: #b7ffdc; -} - -.script-eval-v5-action-btn { - min-height: 32px; - border-color: rgb(255 255 255 / 9%); - border-radius: var(--v5-radius-sm); - background: rgb(255 255 255 / 3.8%); - color: #a8b5b0; - font-weight: 760; -} - -.script-eval-v5-action-btn:hover { - border-color: var(--v5-line-strong); - background: rgb(0 255 136 / 7%); - color: #dffff0; -} - -.script-eval-v5-right-content { - padding: 20px 32px 42px; -} - -.script-eval-v5-illustration-hit { - border: 1px solid rgb(255 255 255 / 7%); - background: - linear-gradient(180deg, rgb(255 255 255 / 4.5%), transparent), - var(--v5-panel-3); - box-shadow: var(--v5-shadow-soft); -} - -.script-eval-v5-illustration-hit:hover, -.script-eval-v5-illustration-hit:focus-visible { - border-color: var(--v5-line-strong); - background: - linear-gradient(180deg, rgb(0 255 136 / 7%), transparent), - var(--v5-panel-3); -} - -.script-eval-v5-upload-card-icon { - border: 1px solid var(--v5-line-strong); - background: - linear-gradient(180deg, rgb(0 255 136 / 18%), rgb(0 255 136 / 8%)), - #101714; -} - -.script-eval-v5-upload-card-title { - color: #f4fbf8; - font-size: 22px; - font-weight: 850; -} - -.script-eval-v5-upload-card-desc { - color: #91a19b; -} - -.script-eval-v5-loading { - min-width: min(520px, 92%); - border: 1px solid rgb(255 255 255 / 7%); - border-radius: var(--v5-radius-lg); - background: - linear-gradient(180deg, rgb(255 255 255 / 4%), transparent), - var(--v5-panel-3); - box-shadow: var(--v5-shadow-soft); -} - -.script-eval-v5-loading strong { - color: #f4fbf8; -} - -.script-eval-v5-loading p { - margin: 0; - color: #8f9f99; -} - -.script-eval-v5-loading-steps { - display: flex; - flex-wrap: wrap; - justify-content: center; - gap: 8px; - margin-top: 4px; -} - -.script-eval-v5-loading-steps span { - border: 1px solid rgb(0 255 136 / 18%); - border-radius: 999px; - background: rgb(0 255 136 / 7%); - color: #b6ffdc; - padding: 5px 10px; - font-size: 11px; - font-weight: 780; -} - -.script-eval-v5-error { - border-color: rgb(244 178 46 / 28%); - border-radius: var(--v5-radius-md); - background: rgb(244 178 46 / 8%); - color: #f4c767; - box-shadow: var(--v5-shadow-tight); -} - -.script-eval-v5-error span:first-child { - color: #ffe0a1; - font-weight: 850; -} - -.script-eval-v5-retry-btn { - border-color: rgb(244 178 46 / 32%); - color: #ffd47a; -} - -.script-eval-report { - --report-panel: #151918; - --report-panel-2: #111514; - --report-row: #181e1c; - --report-border: rgb(255 255 255 / 8%); - --report-muted: #93a29c; - --report-dim: #67736f; - background: - linear-gradient(180deg, rgb(255 255 255 / 3.2%), transparent 230px), - var(--report-bg); -} - -.script-eval-report::before, -.script-eval-report::after { - opacity: 0.75; -} - -.script-eval-report--inside .script-eval-report__body { - padding: 18px 32px 46px; -} - -.script-eval-report--inside .script-eval-report__hero { - align-items: center; - padding: 4px 0 22px; -} - -.script-eval-report__score-block { - min-height: 184px; - display: flex; - flex-direction: column; - justify-content: center; - padding: 18px 22px; - border: 1px solid rgb(255 255 255 / 7%); - border-radius: var(--v5-radius-lg); - background: - linear-gradient(180deg, rgb(0 255 136 / 9%), rgb(0 255 136 / 2%)), - #101413; - box-shadow: var(--v5-shadow-tight); -} - -.script-eval-report__score { - text-shadow: 0 0 28px rgb(0 255 136 / 14%); -} - -.script-eval-report__score-total { - color: #7e8b86; -} - -.script-eval-report__grade { - border-radius: 999px; - box-shadow: inset 0 1px 0 rgb(255 255 255 / 10%); -} - -.script-eval-report__beat { - color: #a6b4ae; -} - -.script-eval-report__summary { - padding: 6px 0; -} - -.script-eval-report__summary h1 { - color: #f6fbf9; - font-size: clamp(25px, 2vw, 32px); - font-weight: 900; -} - -.script-eval-report__summary p { - color: #7d8b86; -} - -.script-eval-report__desc { - max-width: 980px; - color: #cbd5d1 !important; - font-size: 14px !important; -} - -.script-eval-report__chart-card, -.script-eval-report__path-card { - border-color: var(--report-border); - border-radius: var(--v5-radius-lg); - background: - linear-gradient(180deg, rgb(255 255 255 / 3.8%), transparent), - var(--report-panel); - box-shadow: var(--v5-shadow-tight); -} - -.script-eval-report__card-head { - min-height: 50px; - padding-inline: 18px; - border-bottom: 1px solid rgb(255 255 255 / 5%); - color: #b5c0bc; - text-transform: none; -} - -.script-eval-report__legend { - color: #7e8a86; -} - -.script-eval-report__chart { - padding-bottom: 12px; -} - -.script-eval-report__chart-grid { - gap: clamp(18px, 3vw, 52px); -} - -.script-eval-report__bar-col { - cursor: pointer; - transition: opacity 180ms ease, transform 180ms ease; -} - -.script-eval-report__bar-col:hover, -.script-eval-report__bar-col:focus-visible { - outline: none; - transform: translateY(-2px); -} - -.script-eval-report__bar-col.is-dimmed { - opacity: 0.36; -} - -.script-eval-report__bar-fill { - box-shadow: inset 0 1px 0 rgb(255 255 255 / 18%), 0 10px 22px rgb(0 255 136 / 12%); -} - -.script-eval-report__bar-col:hover .script-eval-report__bar-fill, -.script-eval-report__bar-col:focus-visible .script-eval-report__bar-fill { - filter: brightness(1.08); -} - -.script-eval-report__bar-col strong { - color: #eef5f2; -} - -.script-eval-report__bar-col > span { - color: #74807c; -} - -.script-eval-report__chart-note { - display: flex; - align-items: center; - gap: 9px; - min-height: 44px; - margin: 0 18px 18px; - border: 1px solid rgb(0 255 136 / 14%); - border-radius: var(--v5-radius-md); - background: rgb(0 255 136 / 5%); - color: #a9bbb4; - padding: 10px 14px; - font-size: 13px; - font-weight: 700; - line-height: 1.45; -} - -.script-eval-report__chart-note .anticon { - flex-shrink: 0; - color: var(--report-green); -} - -.script-eval-report__findings { - gap: 18px; -} - -.script-eval-report__finding-group p { - border: 1px solid rgb(255 255 255 / 5%); - border-radius: var(--v5-radius-md); - background: linear-gradient(180deg, rgb(255 255 255 / 3%), transparent), var(--report-row); - color: #d7e0dc; - font-size: 14px; - font-weight: 650; -} - -.script-eval-report__path-table th { - color: #87938f; - font-size: 12px; -} - -.script-eval-report__path-table td { - color: #d8e1dd; - font-size: 14px; -} - -.script-eval-report__path-table tr:hover td { - background: rgb(255 255 255 / 2.8%); -} - -.script-eval-v5-statusbar { - height: 34px; - border-top-color: var(--v5-line); - background: rgb(18 21 21 / 94%); - color: #7c8984; - font-weight: 700; -} - -.script-eval-v5.is-loading .script-eval-v5-status-dot { - animation: v5-pulse 1.2s ease infinite; -} - -.script-eval-v5.is-complete .script-eval-v5-status-dot, -.script-eval-v5.is-ready .script-eval-v5-status-dot { - box-shadow: 0 0 16px rgb(0 255 136 / 34%); -} - -@media (max-width: 1180px) { - .script-eval-report--inside .script-eval-report__body { - padding-inline: 24px; - } -} - -@media (max-width: 900px) { - .script-eval-v5-page { - padding-left: 0; - padding-top: 74px; - scroll-padding-top: 74px; - } - - .script-eval-v5-left { - flex-basis: 320px; - } - - .script-eval-v5-right-content { - padding: 18px; - } -} - -@media (max-width: 680px) { - .script-eval-v5 { - overflow: hidden; - } - - .script-eval-v5-page { - min-height: 0; - overflow-y: auto; - } - - .script-eval-v5-left { - flex: 0 0 auto; - overflow: visible; - max-height: none; - border-right: 0; - border-bottom: 1px solid var(--v5-line); - } - - .script-eval-v5-lp-section.is-fill { - flex: 0 0 auto; - } - - .script-eval-v5-history-list { - flex: 0 0 auto; - max-height: 180px; - } - - .script-eval-v5-lp-section { - padding: 16px; - } - - .script-eval-v5-upload-zone { - min-height: 148px; - padding: 18px 14px; - } - - .script-eval-v5-upload-icon { - width: 48px; - height: 48px; - margin-bottom: 10px; - border-radius: 15px; - font-size: 30px; - } - - .script-eval-v5-upload-text { - margin-bottom: 10px; - font-size: 15px; - } - - .script-eval-v5-upload-btn { - padding: 9px 24px; - font-size: 14px; - } - - .script-eval-v5-upload-hint { - margin-top: 8px; - font-size: 12px; - line-height: 1.45; - } - - .script-eval-v5-info-item { - min-height: 36px; - } - - .script-eval-v5-info-empty, - .script-eval-v5-history-empty { - min-height: 56px; - } - - .script-eval-v5-lp-bottom { - gap: 8px; - padding: 12px 16px 14px; - } - - .script-eval-v5-eval-btn { - min-height: 48px; - font-size: 16px; - } - - .script-eval-v5-export-btn { - min-height: 42px; - font-size: 13px; - } - - .script-eval-v5-right-topbar { - padding-inline: 16px; - } - - .script-eval-v5-right { - flex: 0 0 auto; - min-height: 560px; - overflow: visible; - } - - .script-eval-report--inside .script-eval-report__body { - padding: 16px 16px 36px; - } - - .script-eval-report__score-block { - min-height: 150px; - padding: 16px; - } - - .script-eval-report--inside .script-eval-report__score { - font-size: clamp(62px, 22vw, 82px); - } - - .script-eval-report__score-total { - padding-top: 24px; - font-size: 18px; - } - - .script-eval-report__summary h1 { - font-size: 24px; - } - - .script-eval-report__chart-note { - margin-inline: 14px; - } - - .script-eval-report__finding-group p, - .script-eval-report__path-table td { - font-size: 13px; - } -} diff --git a/src/styles/pages/script-tokens.css b/src/styles/pages/script-tokens.css index a1f59de..a4b97e9 100644 --- a/src/styles/pages/script-tokens.css +++ b/src/styles/pages/script-tokens.css @@ -3400,7 +3400,6 @@ width: 100%; height: 100%; min-height: 520px; - max-height: 520px; padding: 18px 22px; border: none; outline: none; @@ -3410,7 +3409,6 @@ font-size: 14px; line-height: 1.9; resize: none; - overflow-y: auto; } .script-eval-v4-text-input::placeholder { @@ -4270,11 +4268,6 @@ .script-eval-v4-text-shell, .script-eval-v4-text-input { min-height: calc(100vh - 422px); - max-height: calc(100vh - 422px); -} - -.script-eval-v4-text-input { - overflow-y: auto; } .script-eval-v4-score-card { @@ -5377,559 +5370,3 @@ flex-shrink: 0; font-size: 16px; } - -/* ===== Token usage commercial SaaS polish ===== */ -.token-usage-page.management-center-page { - --usage-panel: rgba(17, 21, 21, 0.96); - --usage-panel-strong: rgba(21, 26, 25, 0.98); - --usage-inset: rgba(255, 255, 255, 0.035); - --usage-inset-strong: rgba(255, 255, 255, 0.055); - --usage-line: rgba(255, 255, 255, 0.08); - --usage-line-strong: rgba(var(--accent-rgb), 0.28); - --usage-muted: rgba(232, 240, 235, 0.66); - --usage-soft: rgba(232, 240, 235, 0.44); - --usage-card-shadow: 0 18px 46px rgba(0, 0, 0, 0.22); - background: - radial-gradient(circle at 18% 0%, rgba(var(--accent-rgb), 0.06), transparent 34%), - linear-gradient(180deg, rgba(255, 255, 255, 0.022), transparent 220px), - var(--bg-base); -} - -.token-usage-page .management-center-shell { - gap: 16px; - padding: 0 30px 42px; -} - -.token-usage-page .management-center-toolbar { - position: sticky; - top: 0; - z-index: 8; - min-height: 64px; - border-bottom-color: var(--usage-line); - border-bottom-left-radius: 18px; - background: rgba(14, 17, 17, 0.88); - backdrop-filter: blur(18px); - box-shadow: 0 14px 30px rgba(0, 0, 0, 0.16); -} - -.token-usage-page .management-center-toolbar__title { - gap: 10px; -} - -.token-usage-page .management-center-toolbar__title > span { - display: grid; - gap: 3px; - min-width: 0; -} - -.token-usage-page .management-center-toolbar__title strong { - color: #f2f8f5; - font-size: 15px; - letter-spacing: 0; -} - -.token-usage-page .management-center-toolbar__title small { - overflow: hidden; - color: var(--usage-soft); - font-size: 11px; - font-weight: 700; - line-height: 1.2; - text-overflow: ellipsis; - white-space: nowrap; -} - -.token-usage-page .management-center-toolbar button, -.token-usage-page .management-card__head button, -.token-usage-page .management-center-status-pill { - border-color: var(--usage-line); - border-radius: 10px; - background: var(--usage-inset); - color: var(--usage-muted); - transition: border-color 160ms ease, background 160ms ease, color 160ms ease, transform 160ms ease, opacity 160ms ease; -} - -.token-usage-page .management-center-toolbar button:hover:not(:disabled), -.token-usage-page .management-card__head button:hover { - border-color: var(--usage-line-strong); - background: rgba(var(--accent-rgb), 0.08); - color: var(--fg-body); - transform: translateY(-1px); -} - -.token-usage-page .management-center-toolbar button:disabled { - opacity: 0.52; - cursor: wait; -} - -.token-usage-page .management-center-toolbar__back { - border-radius: 999px !important; -} - -.token-usage-page .management-center-toolbar button.is-muted-action { - color: var(--usage-soft); -} - -.token-usage-page .management-center-toolbar button.is-primary { - border-color: rgba(var(--accent-rgb), 0.72); - background: linear-gradient(180deg, #2fffa5, var(--accent)); - color: rgb(5, 15, 11); - box-shadow: 0 12px 26px rgba(var(--accent-rgb), 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.3); -} - -.token-usage-page .management-center-status-pill { - position: relative; - gap: 7px; - border-radius: 999px; - padding-inline: 12px; -} - -.token-usage-page .management-center-status-pill::before { - width: 7px; - height: 7px; - border-radius: 50%; - background: var(--accent); - box-shadow: 0 0 14px rgba(var(--accent-rgb), 0.45); - content: ""; -} - -.token-usage-page .management-center-status-pill.is-loading::before { - animation: token-usage-pulse 1.2s ease infinite; -} - -.token-usage-page .management-center-status-pill.is-error { - border-color: rgba(245, 158, 11, 0.42); - background: rgba(245, 158, 11, 0.1); - color: #f7ca73; -} - -.token-usage-page .management-center-status-pill.is-error::before { - background: #f59e0b; - box-shadow: 0 0 14px rgba(245, 158, 11, 0.4); -} - -@keyframes token-usage-pulse { - 0%, 100% { opacity: 1; transform: scale(1); } - 50% { opacity: 0.42; transform: scale(0.76); } -} - -.token-usage-page .management-balance-alert { - margin: 2px 0 0; - border-color: rgba(245, 158, 11, 0.34); - border-radius: 14px; - background: - linear-gradient(90deg, rgba(245, 158, 11, 0.14), rgba(245, 158, 11, 0.045)), - var(--usage-panel); - box-shadow: var(--usage-card-shadow); -} - -.token-usage-page .management-balance-alert button { - border: 0; - border-radius: 999px; -} - -.token-usage-page .management-metric-cards { - gap: 12px; - margin: 0; -} - -.token-usage-page .management-metric-card { - position: relative; - min-height: 132px; - overflow: hidden; - gap: 8px; - padding: 18px; - border-color: var(--usage-line); - border-radius: 18px; - background: - linear-gradient(180deg, rgba(255, 255, 255, 0.048), transparent 70%), - var(--usage-panel-strong); - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035); -} - -.token-usage-page .management-metric-card::before { - position: absolute; - inset: 0 auto 0 0; - width: 3px; - border-radius: 999px; - background: rgba(255, 255, 255, 0.12); - content: ""; -} - -.token-usage-page .management-metric-card.is-accent { - border-color: rgba(var(--accent-rgb), 0.32); - background: - radial-gradient(circle at 88% 16%, rgba(var(--accent-rgb), 0.18), transparent 38%), - linear-gradient(180deg, rgba(255, 255, 255, 0.052), transparent 72%), - var(--usage-panel-strong); -} - -.token-usage-page .management-metric-card.is-accent::before { - background: var(--accent); - box-shadow: 0 0 18px rgba(var(--accent-rgb), 0.44); -} - -.token-usage-page .management-metric-card.is-warn::before { - background: #f59e0b; - box-shadow: 0 0 18px rgba(245, 158, 11, 0.32); -} - -.token-usage-page .management-metric-card__index { - position: absolute; - top: 14px; - right: 16px; - color: rgba(255, 255, 255, 0.14); - font-size: 22px; - font-weight: 950; - line-height: 1; -} - -.token-usage-page .management-metric-card__label { - color: var(--usage-muted); - font-size: 12px; - font-weight: 800; -} - -.token-usage-page .management-metric-card__value { - color: #f6fbf8; - font-size: clamp(24px, 2.5vw, 34px); - font-weight: 920; - letter-spacing: 0; -} - -.token-usage-page .management-metric-card__hint { - color: var(--usage-soft); - font-size: 12px; - font-weight: 700; -} - -.token-usage-page .management-center-overview { - gap: 14px; -} - -.token-usage-page .management-card { - border-color: var(--usage-line); - border-radius: 18px; - background: - linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 64%), - var(--usage-panel); - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.026); -} - -.token-usage-page .management-card__head { - min-height: 50px; - border-bottom-color: var(--usage-line); - padding-inline: 18px; -} - -.token-usage-page .management-card__head h2 { - color: #ecf5f0; - font-size: 14px; - letter-spacing: 0; -} - -.token-usage-page .management-card__head h2 .anticon { - color: var(--accent); -} - -.token-usage-page .management-card__head > span, -.token-usage-page .management-card__head button { - border-color: var(--usage-line); - border-radius: 999px; - background: var(--usage-inset); - color: var(--usage-muted); -} - -.token-usage-page .management-card--chart { - height: clamp(390px, 50vh, 580px); -} - -.token-usage-page .management-empty-chart, -.token-usage-page .management-record-empty, -.token-usage-page .management-status-trend__empty { - border: 1px dashed var(--usage-line); - border-radius: 14px; - background: rgba(255, 255, 255, 0.024); -} - -.token-usage-page .management-model-list { - gap: 10px; - padding: 14px 18px 18px; -} - -.token-usage-page .management-model-bar { - gap: 8px; - padding: 12px 14px; - border: 1px solid rgba(255, 255, 255, 0.045); - border-radius: 14px; - background: var(--usage-inset); - transition: border-color 160ms ease, background 160ms ease, transform 160ms ease; -} - -.token-usage-page .management-model-bar:hover { - border-color: var(--usage-line-strong); - background: rgba(var(--accent-rgb), 0.052); - transform: translateY(-1px); -} - -.token-usage-page .management-model-bar__top strong { - color: #eef6f2; - font-size: 13px; -} - -.token-usage-page .management-model-bar__track { - height: 7px; - background: rgba(255, 255, 255, 0.07); -} - -.token-usage-page .management-status-card dl { - padding: 14px 18px 10px; -} - -.token-usage-page .management-status-card div { - min-height: 38px; - border-bottom: 1px solid rgba(255, 255, 255, 0.045); -} - -.token-usage-page .management-status-card div:last-child { - border-bottom: 0; -} - -.token-usage-page .management-status-card dt { - color: var(--usage-soft); - font-weight: 780; -} - -.token-usage-page .management-status-trend { - padding: 14px 18px 18px; - border-top-color: var(--usage-line); -} - -.token-usage-page .management-status-trend__title { - margin-bottom: 8px; - color: var(--usage-muted); - font-weight: 820; -} - -.token-usage-page .usage-trend__svg { - min-height: 160px; -} - -.token-usage-page .usage-trend__line { - filter: drop-shadow(0 0 8px rgba(var(--accent-rgb), 0.22)); -} - -.token-usage-page .usage-trend__dot { - transition: r 160ms ease; -} - -.token-usage-page .usage-trend__meta { - border-top-color: var(--usage-line); - color: var(--usage-soft); -} - -.token-usage-page .management-members, -.token-usage-page .management-records { - padding-bottom: 14px; -} - -.token-usage-page .management-member-list { - gap: 10px; - padding: 12px 18px 2px; -} - -.token-usage-page .management-member-row { - min-height: 64px; - border: 1px solid rgba(255, 255, 255, 0.045); - border-radius: 14px; - background: var(--usage-inset); - transition: border-color 160ms ease, background 160ms ease, transform 160ms ease; -} - -.token-usage-page .management-member-row:hover { - border-color: var(--usage-line-strong); - background: rgba(var(--accent-rgb), 0.052); - transform: translateY(-1px); -} - -.token-usage-page .management-member-avatar { - color: rgb(5, 15, 11); - box-shadow: 0 8px 20px rgba(var(--accent-rgb), 0.16); -} - -.token-usage-page .management-member-role { - border-color: var(--usage-line); - border-radius: 999px; - background: rgba(255, 255, 255, 0.035); -} - -.token-usage-page .management-record-table { - min-width: 0; - padding: 14px 18px 0; - overflow-x: auto; -} - -.token-usage-page .management-record-table__head, -.token-usage-page .management-record-table__row { - min-width: 880px; - border: 1px solid transparent; - border-radius: 12px; -} - -.token-usage-page .management-record-table__head { - min-height: 38px; - background: rgba(255, 255, 255, 0.045); - color: var(--usage-muted); -} - -.token-usage-page .management-record-table__row { - min-height: 46px; - background: var(--usage-inset); - transition: border-color 160ms ease, background 160ms ease; -} - -.token-usage-page .management-record-table__row:hover { - border-color: rgba(255, 255, 255, 0.065); - background: rgba(255, 255, 255, 0.052); -} - -.token-usage-page .management-record-table__row span.is-good, -.token-usage-page .management-record-table__row span.is-error { - display: inline-flex; - align-items: center; - justify-content: center; - width: max-content; - min-width: 44px; - min-height: 24px; - border-radius: 999px; - padding: 0 9px; - font-size: 11px; - font-weight: 850; -} - -.token-usage-page .management-record-table__row span.is-good { - background: rgba(var(--accent-rgb), 0.1); -} - -.token-usage-page .management-record-table__row span.is-error { - background: rgba(239, 68, 68, 0.1); -} - -.token-usage-page .management-record-pagination { - border-top-color: var(--usage-line); -} - -.token-usage-page .management-record-pagination button { - border-color: var(--usage-line); - border-radius: 9px; - background: var(--usage-inset); - color: var(--usage-muted); -} - -.token-usage-page .management-record-pagination button:hover:not(:disabled) { - background: var(--accent); - border-color: var(--accent); - color: rgb(5, 15, 11); -} - -@media (max-width: 1180px) { - .token-usage-page.management-center-page { - padding-left: 20px; - } - - .token-usage-page .management-center-shell { - padding-inline: 22px; - } -} - -@media (min-width: 901px) and (max-width: 1180px) { - .token-usage-page.management-center-page { - padding-left: 82px; - } -} - -@media (max-width: 900px) { - .token-usage-page.management-center-page { - padding-top: 74px; - padding-left: 0; - } - - .token-usage-page .management-center-shell { - padding: 0 16px 34px; - } - - .token-usage-page .management-center-toolbar { - top: 0; - align-items: stretch; - margin: 0 -16px; - padding: 12px 16px; - border-radius: 0 0 18px 18px; - } - - .token-usage-page .management-center-toolbar__title { - width: 100%; - } - - .token-usage-page .management-center-status-pill { - order: 2; - } - - .token-usage-page .management-metric-cards { - grid-template-columns: minmax(0, 1fr); - } - - .token-usage-page .management-center-overview { - grid-template-columns: minmax(0, 1fr); - } - - .token-usage-page .management-card--chart { - height: auto; - min-height: 360px; - } - - .token-usage-page .management-member-row { - grid-template-columns: auto minmax(0, 1fr); - align-items: start; - gap: 10px 12px; - padding: 14px; - } - - .token-usage-page .management-member-role, - .token-usage-page .management-member-row > span:not(.management-member-avatar):not(.management-member-role):not(.management-member-meter), - .token-usage-page .management-member-meter, - .token-usage-page .management-member-row > .anticon { - grid-column: 2; - justify-self: start; - } -} - -@media (max-width: 560px) { - .token-usage-page .management-center-toolbar button:not(.management-center-toolbar__back) { - flex: 1 1 calc(50% - 6px); - padding-inline: 10px; - } - - .token-usage-page .management-center-status-pill { - flex: 1 1 100%; - justify-content: flex-start; - } - - .token-usage-page .management-metric-card { - min-height: 118px; - padding: 16px; - } - - .token-usage-page .management-metric-card__value { - font-size: 24px; - } - - .token-usage-page .management-card__head { - min-height: 46px; - padding-inline: 14px; - } - - .token-usage-page .management-model-list, - .token-usage-page .management-member-list, - .token-usage-page .management-record-table { - padding-inline: 14px; - } -} diff --git a/src/styles/themes/dark-green.css b/src/styles/themes/dark-green.css index 8517e96..78cbdf1 100644 --- a/src/styles/themes/dark-green.css +++ b/src/styles/themes/dark-green.css @@ -3373,403 +3373,6 @@ outline: none; } -/* Workbench SaaS polish: scoped visual refinement for the generation workspace. */ -.web-shell[data-ui-theme="dark-green"] .ai-workbench-page.is-active { - background: - linear-gradient(90deg, rgba(255, 255, 255, 0.018), transparent 20%, transparent 78%, rgba(255, 255, 255, 0.018)), - radial-gradient(circle at 30% 0%, rgba(var(--accent-rgb), 0.035), transparent 32%), - var(--dg-page); -} - -.web-shell[data-ui-theme="dark-green"] .ai-workbench-page.is-active .ai-chat-messages-surface { - padding: clamp(22px, 3vh, 36px) clamp(22px, 3.6vw, 46px) clamp(224px, 27vh, 292px); - background: - linear-gradient(180deg, rgba(255, 255, 255, 0.018), transparent 180px), - radial-gradient(circle at 50% 100%, rgba(var(--accent-rgb), 0.028), transparent 42%); - scrollbar-gutter: stable; -} - -.web-shell[data-ui-theme="dark-green"] .ai-workbench-page.is-active .ai-chat-message-list { - width: min(100%, 1040px); - gap: 26px; - padding: 0 clamp(18px, 4vw, 70px); -} - -.web-shell[data-ui-theme="dark-green"] .ai-chat-message-row { - gap: 12px; -} - -.web-shell[data-ui-theme="dark-green"] .ai-chat-avatar { - margin-top: 2px; - border: 1px solid rgba(255, 255, 255, 0.06); - background: rgba(255, 255, 255, 0.055); - color: var(--fg-soft); -} - -.web-shell[data-ui-theme="dark-green"] .ai-chat-avatar--user { - border-color: rgba(var(--accent-rgb), 0.18); - background: rgba(var(--accent-rgb), 0.14); - color: var(--accent); -} - -.web-shell[data-ui-theme="dark-green"] .ai-chat-message-stack { - gap: 6px; -} - -.web-shell[data-ui-theme="dark-green"] .ai-chat-message-author { - gap: 7px; - color: var(--fg-soft); - font-size: 11px; -} - -.web-shell[data-ui-theme="dark-green"] .ai-chat-message-bubble { - border-color: rgba(255, 255, 255, 0.095); - background: rgba(19, 22, 24, 0.92); - box-shadow: 0 12px 34px rgba(0, 0, 0, 0.12); -} - -.web-shell[data-ui-theme="dark-green"] .ai-chat-message-bubble--assistant { - background: - linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 52%), - rgba(12, 18, 16, 0.94); -} - -.web-shell[data-ui-theme="dark-green"] .ai-chat-message-bubble--user { - border-color: rgba(var(--accent-rgb), 0.3); - background: - linear-gradient(180deg, rgba(var(--accent-rgb), 0.16), rgba(var(--accent-rgb), 0.1)), - rgba(9, 38, 25, 0.9); -} - -.web-shell[data-ui-theme="dark-green"] .ai-chat-message-bubble.is-thinking { - border-color: rgba(var(--accent-rgb), 0.28); - background: - linear-gradient(90deg, rgba(var(--accent-rgb), 0.06), rgba(255, 255, 255, 0.018), rgba(var(--accent-rgb), 0.06)), - rgba(12, 18, 16, 0.94); -} - -.web-shell[data-ui-theme="dark-green"] .ai-chat-image-result-card { - border-color: rgba(255, 255, 255, 0.12); - border-radius: 12px; - background: - linear-gradient(180deg, rgba(255, 255, 255, 0.032), transparent 42%), - #111416; - box-shadow: 0 18px 50px rgba(0, 0, 0, 0.24); - transition: - border-color 180ms ease, - box-shadow 180ms ease, - transform 180ms ease; -} - -.web-shell[data-ui-theme="dark-green"] .ai-chat-image-result-card:hover { - border-color: rgba(var(--accent-rgb), 0.26); - box-shadow: 0 22px 58px rgba(0, 0, 0, 0.3); - transform: translateY(-1px); -} - -.web-shell[data-ui-theme="dark-green"] .ai-chat-image-frame { - background: - linear-gradient(135deg, rgba(255, 255, 255, 0.03), transparent), - #080a0b; -} - -.web-shell[data-ui-theme="dark-green"] .ai-chat-image-preview-button img { - transition: transform 220ms ease, filter 220ms ease; -} - -.web-shell[data-ui-theme="dark-green"] .ai-chat-image-preview-button:hover img { - filter: saturate(1.03) contrast(1.02); - transform: scale(1.006); -} - -.web-shell[data-ui-theme="dark-green"] .ai-chat-image-result-meta { - gap: 9px; - padding: 16px 18px 12px; -} - -.web-shell[data-ui-theme="dark-green"] .ai-chat-image-result-meta__top strong { - color: var(--fg-strong); - font-size: 15px; - font-weight: 760; -} - -.web-shell[data-ui-theme="dark-green"] .ai-chat-image-result-meta__top span { - padding: 3px 8px; - border-radius: 999px; - background: rgba(var(--accent-rgb), 0.08); - color: rgba(232, 255, 242, 0.72); - font-weight: 650; -} - -.web-shell[data-ui-theme="dark-green"] .ai-chat-chip { - min-height: 22px; - padding: 2px 8px; - border-color: rgba(255, 255, 255, 0.1); - border-radius: 6px; - background: rgba(255, 255, 255, 0.045); - color: rgba(230, 238, 233, 0.76); -} - -.web-shell[data-ui-theme="dark-green"] .ai-chat-image-actions { - gap: 8px; - padding: 12px 18px 16px; - border-top-color: rgba(255, 255, 255, 0.075); -} - -.web-shell[data-ui-theme="dark-green"] .ai-chat-image-actions__primary { - height: 34px; - padding: 0 14px; - border-radius: 10px; - font-weight: 760; -} - -.web-shell[data-ui-theme="dark-green"] .ai-chat-image-actions__icon { - width: 34px; - height: 34px; - border-radius: 10px; -} - -.web-shell[data-ui-theme="dark-green"] .ai-chat-result-flow { - gap: 8px; - padding: 0 18px 16px; -} - -.web-shell[data-ui-theme="dark-green"] .ai-chat-result-flow button { - min-height: 30px; - padding: 0 11px; - border-radius: 9px; - background: rgba(255, 255, 255, 0.018); -} - -.web-shell[data-ui-theme="dark-green"] .ai-generation-pending-card { - border-radius: 14px; - background: - linear-gradient(180deg, rgba(255, 255, 255, 0.032), transparent 48%), - rgba(13, 18, 17, 0.96); - box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22); -} - -.web-shell[data-ui-theme="dark-green"] .ai-workbench-page.is-active .wb-composer { - width: min(100%, 1010px); - max-width: 1010px; - padding-bottom: 20px; -} - -.web-shell[data-ui-theme="dark-green"] .ai-workbench-page.is-active .wb-composer__content { - gap: 15px; - padding: 18px 18px 14px; - border-color: rgba(255, 255, 255, 0.11); - background: - linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)), - rgba(18, 23, 22, 0.94); - box-shadow: - 0 20px 60px rgba(0, 0, 0, 0.34), - inset 0 1px 0 rgba(255, 255, 255, 0.04); - backdrop-filter: blur(18px); -} - -.web-shell[data-ui-theme="dark-green"] .ai-workbench-page.is-active .wb-composer__content:focus-within { - border-color: rgba(var(--accent-rgb), 0.38); - box-shadow: - 0 22px 64px rgba(0, 0, 0, 0.38), - 0 0 0 1px rgba(var(--accent-rgb), 0.08), - inset 0 1px 0 rgba(255, 255, 255, 0.05); -} - -.web-shell[data-ui-theme="dark-green"] .wb-composer__ref-upload { - border-radius: 16px; - background: - linear-gradient(180deg, rgba(var(--accent-rgb), 0.1), rgba(var(--accent-rgb), 0.035)), - rgba(255, 255, 255, 0.018); -} - -.web-shell[data-ui-theme="dark-green"] .wb-composer__textarea, -.web-shell[data-ui-theme="dark-green"] .wb-composer__highlight { - font-size: 15px; - line-height: 1.6; -} - -.web-shell[data-ui-theme="dark-green"] .wb-composer__toolbar { - border-top-color: rgba(255, 255, 255, 0.07); -} - -.web-shell[data-ui-theme="dark-green"] .wb-inline-chip__trigger, -.web-shell[data-ui-theme="dark-green"] .ai-workbench-mode-switch__button, -.web-shell[data-ui-theme="dark-green"] .ai-workbench-select-chip__trigger { - border-color: rgba(255, 255, 255, 0.095); - background: rgba(255, 255, 255, 0.045); - font-weight: 650; -} - -.web-shell[data-ui-theme="dark-green"] .wb-composer__send-primary { - width: 42px; - height: 42px; - border-radius: 14px; -} - -.web-shell[data-ui-theme="dark-green"] .conversation-sidebar { - width: 270px; - min-width: 270px; - border-left-color: rgba(255, 255, 255, 0.085); - background: - linear-gradient(180deg, rgba(255, 255, 255, 0.026), transparent 160px), - var(--bg-surface); -} - -.web-shell[data-ui-theme="dark-green"] .conversation-sidebar.is-collapsed { - width: 50px; - min-width: 50px; -} - -.web-shell[data-ui-theme="dark-green"] .conversation-sidebar__header { - padding: 12px 12px 11px; - border-bottom-color: rgba(255, 255, 255, 0.075); -} - -.web-shell[data-ui-theme="dark-green"] .conversation-sidebar__new { - border-color: rgba(255, 255, 255, 0.09); - background: rgba(255, 255, 255, 0.026); - font-weight: 720; -} - -.web-shell[data-ui-theme="dark-green"] .conversation-sidebar__new:hover { - border-color: rgba(var(--accent-rgb), 0.34); - background: rgba(var(--accent-rgb), 0.08); - color: var(--accent); -} - -.web-shell[data-ui-theme="dark-green"] .conversation-sidebar__list { - padding: 10px; -} - -.web-shell[data-ui-theme="dark-green"] .conversation-sidebar__item { - position: relative; - border: 1px solid transparent; - border-radius: 10px; -} - -.web-shell[data-ui-theme="dark-green"] .conversation-sidebar__item:hover { - border-color: rgba(255, 255, 255, 0.08); - background: rgba(255, 255, 255, 0.032); -} - -.web-shell[data-ui-theme="dark-green"] .conversation-sidebar__item.is-active { - border-color: rgba(var(--accent-rgb), 0.2); - background: - linear-gradient(90deg, rgba(var(--accent-rgb), 0.1), rgba(var(--accent-rgb), 0.025)), - rgba(255, 255, 255, 0.02); -} - -.web-shell[data-ui-theme="dark-green"] .conversation-sidebar__item.is-active::before { - position: absolute; - inset: 10px auto 10px 0; - width: 3px; - border-radius: 999px; - background: var(--accent); - content: ""; -} - -.web-shell[data-ui-theme="dark-green"] .conversation-sidebar__item-main { - padding: 11px 12px 11px 14px; -} - -.web-shell[data-ui-theme="dark-green"] .conversation-sidebar__item-title { - color: var(--fg-strong); - font-size: 13px; - font-weight: 720; -} - -.web-shell[data-ui-theme="dark-green"] .conversation-sidebar__item-time { - color: var(--fg-soft); -} - -.web-shell[data-ui-theme="dark-green"] .workbench-delete-modal__panel { - box-shadow: 0 24px 70px rgba(0, 0, 0, 0.42); -} - -@media (max-width: 860px) { - .web-shell[data-ui-theme="dark-green"] .ai-workbench-page.is-active > .conversation-sidebar:not(.is-collapsed) { - position: absolute; - inset: 0 0 auto auto; - z-index: 30; - flex: 0 0 auto; - width: min(270px, 82vw); - min-width: min(270px, 82vw); - height: 100%; - } - - .web-shell[data-ui-theme="dark-green"] .ai-workbench-page.is-active .ai-chat-messages-surface { - padding: 18px 12px clamp(216px, 34vh, 304px); - } - - .web-shell[data-ui-theme="dark-green"] .ai-workbench-page.is-active .ai-chat-message-list { - padding: 0 8px; - } - - .web-shell[data-ui-theme="dark-green"] .conversation-sidebar { - position: absolute; - inset: 0 0 auto auto; - z-index: 30; - width: min(270px, 82vw); - min-width: 0; - box-shadow: -18px 0 48px rgba(0, 0, 0, 0.28); - } - - .web-shell[data-ui-theme="dark-green"] .ai-workbench-page.is-active > .conversation-sidebar.is-collapsed, - .web-shell[data-ui-theme="dark-green"] .conversation-sidebar.is-collapsed { - width: 50px; - min-width: 50px; - flex-basis: 50px; - box-shadow: none; - } - - .web-shell[data-ui-theme="dark-green"] .ai-workbench-page.is-active .wb-composer { - padding: 0 10px 12px; - } -} - -@media (max-width: 620px) { - .web-shell[data-ui-theme="dark-green"] .ai-chat-message-stack { - max-width: 88%; - } - - .web-shell[data-ui-theme="dark-green"] .ai-chat-message-bubble:has(.ai-chat-image-result-card), - .web-shell[data-ui-theme="dark-green"] .ai-chat-message-bubble:has(.ai-generation-pending-card) { - width: min(100%, calc(100vw - 68px)); - } - - .web-shell[data-ui-theme="dark-green"] .ai-chat-image-actions, - .web-shell[data-ui-theme="dark-green"] .ai-chat-result-flow { - padding-right: 12px; - padding-left: 12px; - } - - .web-shell[data-ui-theme="dark-green"] .ai-workbench-page.is-active .wb-composer__content { - border-radius: 20px; - padding: 14px 13px 12px; - } - - .web-shell[data-ui-theme="dark-green"] .wb-composer__input-row { - gap: 12px; - } - - .web-shell[data-ui-theme="dark-green"] .wb-composer__refs { - width: 64px; - min-width: 64px; - } - - .web-shell[data-ui-theme="dark-green"] .wb-composer__ref-upload { - width: 62px; - height: 62px; - border-radius: 14px; - font-size: 18px; - } - - .web-shell[data-ui-theme="dark-green"] .wb-composer__toolbar { - padding-right: 50px; - } -} - .web-shell[data-ui-theme="dark-green"] .workbench-delete-modal { position: fixed; inset: 0; @@ -5314,283 +4917,6 @@ color: var(--accent); } -/* Auth page: refined SaaS entry surface, preserving the dark-green theme. */ -.web-shell[data-ui-theme="dark-green"] .auth-page { - grid-template-columns: minmax(0, 1.55fr) minmax(400px, 0.9fr); - background: - radial-gradient(circle at 68% 12%, rgba(var(--accent-rgb), 0.08), transparent 28%), - var(--dg-page); -} - -.web-shell[data-ui-theme="dark-green"] .auth-page__showcase { - background: - radial-gradient(circle at 18% 18%, rgba(var(--accent-rgb), 0.12), transparent 34%), - #0d0d0f; -} - -.web-shell[data-ui-theme="dark-green"] .auth-page__video { - opacity: 0.48; - filter: saturate(1.08) contrast(1.04); -} - -.web-shell[data-ui-theme="dark-green"] .auth-page__video-overlay { - align-items: center; - justify-content: center; - padding: clamp(36px, 6vw, 76px); - background: - linear-gradient(90deg, rgba(13, 13, 15, 0.86), rgba(13, 13, 15, 0.46) 58%, rgba(13, 13, 15, 0.72)), - linear-gradient(180deg, rgba(13, 13, 15, 0.28), rgba(13, 13, 15, 0.92)); - text-align: left; -} - -.web-shell[data-ui-theme="dark-green"] .auth-page__showcase-content { - display: grid; - gap: 14px; - width: min(620px, 100%); -} - -.web-shell[data-ui-theme="dark-green"] .auth-page__form-kicker { - color: var(--accent); - font-size: 12px; - font-weight: 700; - letter-spacing: 0; -} - -.web-shell[data-ui-theme="dark-green"] .auth-page__brand-row { - display: flex; - align-items: center; - gap: 16px; - min-width: 0; -} - -.web-shell[data-ui-theme="dark-green"] .auth-page__brand { - color: var(--accent); - font-size: clamp(44px, 7vw, 76px); - line-height: 0.96; -} - -.web-shell[data-ui-theme="dark-green"] .auth-page__tagline { - max-width: 480px; - color: var(--fg-muted); - font-size: clamp(18px, 2vw, 24px); - line-height: 1.45; -} - -.web-shell[data-ui-theme="dark-green"] .auth-page__features { - justify-content: flex-start; - gap: 10px; - margin-top: 2px; -} - -.web-shell[data-ui-theme="dark-green"] .auth-page__features span { - border-color: rgba(255, 255, 255, 0.12); - background: rgba(255, 255, 255, 0.06); - color: var(--fg-body); - backdrop-filter: blur(12px); -} - -.web-shell[data-ui-theme="dark-green"] .auth-page__showcase-stats { - display: grid; - grid-template-columns: repeat(3, minmax(0, 1fr)); - gap: 10px; - width: min(520px, 100%); - margin-top: 10px; -} - -.web-shell[data-ui-theme="dark-green"] .auth-page__showcase-stats span { - display: grid; - gap: 4px; - min-width: 0; - padding: 14px; - border: 1px solid rgba(255, 255, 255, 0.1); - border-radius: var(--radius-sm); - background: rgba(16, 18, 20, 0.58); - color: var(--fg-soft); - backdrop-filter: blur(14px); - font-size: 12px; -} - -.web-shell[data-ui-theme="dark-green"] .auth-page__showcase-stats strong { - color: var(--fg-body); - font-size: 14px; -} - -.web-shell[data-ui-theme="dark-green"] .auth-page__form-panel { - align-items: center; - padding: clamp(28px, 4vw, 48px); - border-left-color: rgba(255, 255, 255, 0.08); - background: - linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent), - var(--bg-surface); -} - -.web-shell[data-ui-theme="dark-green"] .auth-page__form-inner { - gap: 20px; - max-width: 420px; - padding: 0; - border: 0; - border-radius: 0; - background: transparent; - box-shadow: none; -} - -.web-shell[data-ui-theme="dark-green"] .auth-page__form-head { - gap: 7px; -} - -.web-shell[data-ui-theme="dark-green"] .auth-page__logo { - width: 54px; - height: 54px; - margin-bottom: 2px; - border: 1px solid rgba(255, 255, 255, 0.08); - border-radius: var(--radius-md); - background: rgba(255, 255, 255, 0.035); -} - -.web-shell[data-ui-theme="dark-green"] .auth-page__title { - font-size: 24px; - line-height: 1.2; -} - -.web-shell[data-ui-theme="dark-green"] .auth-page__subtitle { - color: var(--fg-soft); - line-height: 1.5; -} - -.web-shell[data-ui-theme="dark-green"] .auth-page__mode-tabs { - gap: 4px; - padding: 4px; - border: 1px solid rgba(255, 255, 255, 0.065); - border-radius: var(--radius-sm); - background: rgba(255, 255, 255, 0.022); -} - -.web-shell[data-ui-theme="dark-green"] .auth-page__mode-tabs button { - min-height: 38px; - padding: 0 12px; - border: 0; - border-radius: 9px; - font-weight: 700; - transition: background var(--transition-fast), color var(--transition-fast); -} - -.web-shell[data-ui-theme="dark-green"] .auth-page__mode-tabs button.is-active { - background: rgba(var(--accent-rgb), 0.13); - color: var(--accent); -} - -.web-shell[data-ui-theme="dark-green"] .auth-page__auth-tabs { - display: grid; - grid-template-columns: repeat(3, minmax(0, 1fr)); - gap: 8px; -} - -.web-shell[data-ui-theme="dark-green"] .auth-page__auth-tabs button { - min-height: 42px; - padding: 0 8px; - border-color: rgba(255, 255, 255, 0.07); - background: rgba(255, 255, 255, 0.018); - font-size: 12px; - font-weight: 600; - transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast); -} - -.web-shell[data-ui-theme="dark-green"] .auth-page__auth-tabs button .anticon { - font-size: 14px; -} - -.web-shell[data-ui-theme="dark-green"] .auth-page__auth-tabs button.is-active { - border-color: rgba(var(--accent-rgb), 0.42); - background: rgba(var(--accent-rgb), 0.1); -} - -.web-shell[data-ui-theme="dark-green"] .auth-page__form { - gap: 14px; -} - -.web-shell[data-ui-theme="dark-green"] .auth-page__field { - gap: 7px; -} - -.web-shell[data-ui-theme="dark-green"] .auth-page__field > span { - color: var(--fg-muted); - font-weight: 700; -} - -.web-shell[data-ui-theme="dark-green"] .auth-page__field input, -.web-shell[data-ui-theme="dark-green"] .auth-page__phone-row { - border-color: rgba(255, 255, 255, 0.075); - background: rgba(255, 255, 255, 0.026); - transition: border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast); -} - -.web-shell[data-ui-theme="dark-green"] .auth-page__field input { - min-height: 44px; - padding: 0 14px; -} - -.web-shell[data-ui-theme="dark-green"] .auth-page__field input:focus, -.web-shell[data-ui-theme="dark-green"] .auth-page__phone-row:focus-within { - border-color: rgba(var(--accent-rgb), 0.55); - background: var(--bg-elevated); - box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.08); -} - -.web-shell[data-ui-theme="dark-green"] .auth-page__field--error input, -.web-shell[data-ui-theme="dark-green"] .auth-page__field--error .auth-page__phone-row { - border-color: rgba(255, 90, 95, 0.64); - box-shadow: 0 0 0 3px rgba(255, 90, 95, 0.08); -} - -.web-shell[data-ui-theme="dark-green"] .auth-page__sms-row { - gap: 10px; -} - -.web-shell[data-ui-theme="dark-green"] .auth-page__sms-btn { - min-height: 44px; - border-color: rgba(var(--accent-rgb), 0.42); - background: rgba(var(--accent-rgb), 0.08); - font-weight: 700; -} - -.web-shell[data-ui-theme="dark-green"] .auth-page__sms-btn:disabled { - background: rgba(255, 255, 255, 0.018); -} - -.web-shell[data-ui-theme="dark-green"] .auth-page__submit { - min-height: 46px; - padding: 0 16px; - border-radius: var(--radius-sm); - font-size: 15px; - font-weight: 800; - transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast); -} - -.web-shell[data-ui-theme="dark-green"] .auth-page__submit:hover { - transform: translateY(-1px); - box-shadow: 0 12px 28px rgba(var(--accent-rgb), 0.16); -} - -.web-shell[data-ui-theme="dark-green"] .auth-page__notice { - border-color: rgba(255, 90, 95, 0.28); - background: rgba(255, 90, 95, 0.09); - line-height: 1.45; -} - -.web-shell[data-ui-theme="dark-green"] .auth-page__agreement { - line-height: 1.55; -} - -.web-shell[data-ui-theme="dark-green"] .auth-page__divider { - margin-top: 2px; -} - -.web-shell[data-ui-theme="dark-green"] .auth-page__social-btn { - width: 42px; - height: 42px; - background: rgba(255, 255, 255, 0.018); -} - .web-shell[data-ui-theme="dark-green"] .profile-page { height: 100%; overflow-y: auto; @@ -6076,787 +5402,6 @@ aspect-ratio: auto; } -/* Profile center: commercial SaaS polish while preserving the dark-green theme. */ -.web-shell[data-ui-theme="dark-green"] .profile-page { - background: - radial-gradient(circle at 18% 0%, rgba(var(--accent-rgb), 0.08), transparent 28%), - linear-gradient(180deg, rgba(255, 255, 255, 0.015), transparent 220px), - var(--dg-page); -} - -.web-shell[data-ui-theme="dark-green"] .profile-page__banner { - height: 214px; - background: - linear-gradient(135deg, rgba(var(--accent-rgb), 0.11), transparent 34%), - linear-gradient(180deg, var(--bg-elevated), var(--dg-page)); -} - -.web-shell[data-ui-theme="dark-green"] .profile-page__banner::after { - content: ""; - position: absolute; - inset: auto 0 0; - height: 1px; - background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.4), transparent); - opacity: 0.7; -} - -.web-shell[data-ui-theme="dark-green"] .profile-page__banner.has-image { - background-position: center; - background-size: cover; -} - -.web-shell[data-ui-theme="dark-green"] .profile-page__banner-overlay { - background: - linear-gradient(180deg, rgba(13, 13, 15, 0.18), rgba(13, 13, 15, 0.78)), - radial-gradient(circle at 50% 100%, rgba(var(--accent-rgb), 0.12), transparent 34%); -} - -.web-shell[data-ui-theme="dark-green"] .profile-page__banner-btn { - height: 36px; - padding: 0 14px; - border-color: rgba(255, 255, 255, 0.2); - background: rgba(10, 12, 13, 0.66); - backdrop-filter: blur(14px); - flex-direction: row; - justify-content: center; - min-width: 104px; - line-height: 1; - font-weight: 600; - transition: border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast); -} - -.web-shell[data-ui-theme="dark-green"] .profile-page__banner-btn .anticon { - display: inline-flex; - align-items: center; - justify-content: center; - width: 22px; - height: 22px; - border-radius: 999px; - background: rgba(255, 255, 255, 0.1); - color: #fff; - font-size: 13px; -} - -.web-shell[data-ui-theme="dark-green"] .profile-page__banner .profile-page__banner-btn { - top: 18px; - right: max(18px, calc((100vw - 1240px) / 2 + 18px)); - bottom: auto; -} - -.web-shell[data-ui-theme="dark-green"] .profile-page__banner-btn:hover { - border-color: rgba(var(--accent-rgb), 0.45); - background: rgba(12, 18, 16, 0.86); - transform: translateY(-1px); -} - -.web-shell[data-ui-theme="dark-green"] .profile-page__body { - grid-template-columns: 292px minmax(0, 1fr); - gap: 34px; - width: min(1240px, calc(100% - 56px)); - margin-top: -72px; - padding-bottom: 56px; -} - -.web-shell[data-ui-theme="dark-green"] .profile-page__sidebar, -.web-shell[data-ui-theme="dark-green"] .profile-page__list-card, -.web-shell[data-ui-theme="dark-green"] .profile-page__review-item, -.web-shell[data-ui-theme="dark-green"] .profile-page__empty-state, -.web-shell[data-ui-theme="dark-green"] .profile-page__upload-card { - border-color: rgba(255, 255, 255, 0.075); - background: - linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent), - var(--bg-surface); - box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22); -} - -.web-shell[data-ui-theme="dark-green"] .profile-page__sidebar { - gap: 18px; - padding: 22px; - border-radius: var(--radius-lg); -} - -.web-shell[data-ui-theme="dark-green"] .profile-page__sidebar-head { - gap: 10px; - width: 100%; - padding-bottom: 4px; -} - -.web-shell[data-ui-theme="dark-green"] .profile-page__avatar-ring::before { - content: ""; - position: absolute; - inset: -7px; - border-radius: 50%; - background: radial-gradient(circle, rgba(var(--accent-rgb), 0.22), transparent 68%); - opacity: 0.9; -} - -.web-shell[data-ui-theme="dark-green"] .profile-page__avatar-ring .profile-page__avatar, -.web-shell[data-ui-theme="dark-green"] .profile-page__avatar { - position: relative; - width: 88px; - height: 88px; - border: 4px solid var(--dg-page); - background: - linear-gradient(135deg, rgba(var(--accent-rgb), 0.26), rgba(var(--accent-rgb), 0.08)), - var(--bg-elevated); - box-shadow: 0 12px 26px rgba(0, 0, 0, 0.32); -} - -.web-shell[data-ui-theme="dark-green"] .profile-page__avatar-edit { - left: 50%; - top: 50%; - width: 88px; - height: 88px; - border-color: rgba(255, 255, 255, 0.18); - background: rgba(8, 10, 11, 0.68); - color: #fff; - font-size: 20px; - opacity: 0; - transform: translate(-50%, -50%); - transition: opacity var(--transition-fast), background var(--transition-fast), transform var(--transition-fast); -} - -.web-shell[data-ui-theme="dark-green"] .profile-page__avatar-badge { - right: -3px; - bottom: 10px; - z-index: 4; - border: 2px solid var(--bg-surface); - box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28); -} - -.web-shell[data-ui-theme="dark-green"] .profile-page__avatar-ring:hover .profile-page__avatar-edit, -.web-shell[data-ui-theme="dark-green"] .profile-page__avatar-ring:active .profile-page__avatar-edit, -.web-shell[data-ui-theme="dark-green"] .profile-page__avatar-edit:focus-visible { - opacity: 1; -} - -.web-shell[data-ui-theme="dark-green"] .profile-page__avatar-ring:hover .profile-page__avatar-edit:hover, -.web-shell[data-ui-theme="dark-green"] .profile-page__avatar-edit:focus-visible { - background: rgba(8, 10, 11, 0.82); - transform: translate(-50%, -50%) scale(1.02); -} - -.web-shell[data-ui-theme="dark-green"] .profile-page__username { - max-width: 100%; - overflow: hidden; - font-size: 21px; - letter-spacing: 0; - line-height: 1.25; - text-overflow: ellipsis; - white-space: nowrap; -} - -.web-shell[data-ui-theme="dark-green"] .profile-page__bio { - width: 100%; - min-height: 56px; - padding: 10px 12px; - border-color: rgba(255, 255, 255, 0.07); - background: rgba(255, 255, 255, 0.025); - color: var(--fg-muted); - transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast); -} - -.web-shell[data-ui-theme="dark-green"] .profile-page__bio:focus { - background: var(--bg-elevated); - box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.08); -} - -.web-shell[data-ui-theme="dark-green"] .profile-page__bio-editor { - display: grid; - gap: 8px; - width: 100%; -} - -.web-shell[data-ui-theme="dark-green"] .profile-page__bio-actions { - display: flex; - justify-content: center; - gap: 8px; -} - -.web-shell[data-ui-theme="dark-green"] .profile-page__bio-action { - display: inline-flex; - align-items: center; - justify-content: center; - gap: 5px; - min-width: 68px; - height: 30px; - padding: 0 10px; - border: 1px solid rgba(255, 255, 255, 0.075); - border-radius: 999px; - background: rgba(255, 255, 255, 0.025); - color: var(--fg-muted); - cursor: pointer; - font-size: 12px; - font-weight: 600; - transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast); -} - -.web-shell[data-ui-theme="dark-green"] .profile-page__bio-action:hover { - border-color: rgba(255, 255, 255, 0.14); - background: rgba(255, 255, 255, 0.045); - color: var(--fg-body); -} - -.web-shell[data-ui-theme="dark-green"] .profile-page__bio-action--save { - border-color: rgba(var(--accent-rgb), 0.34); - background: rgba(var(--accent-rgb), 0.1); - color: var(--accent); -} - -.web-shell[data-ui-theme="dark-green"] .profile-page__bio-action--save:hover { - border-color: rgba(var(--accent-rgb), 0.5); - background: rgba(var(--accent-rgb), 0.16); - color: var(--accent-hover); -} - -.web-shell[data-ui-theme="dark-green"] .profile-page__bio-display { - display: grid; - grid-template-columns: minmax(0, 1fr) auto; - align-items: center; - gap: 10px; - width: 100%; - min-height: 48px; - padding: 10px 12px; - border: 1px solid rgba(255, 255, 255, 0.055); - border-radius: var(--radius-sm); - background: rgba(255, 255, 255, 0.018); - color: var(--fg-muted); - cursor: pointer; - text-align: left; - transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast); -} - -.web-shell[data-ui-theme="dark-green"] .profile-page__bio-display span { - overflow: hidden; - font-size: 13px; - line-height: 1.45; - text-align: center; - text-overflow: ellipsis; - white-space: nowrap; -} - -.web-shell[data-ui-theme="dark-green"] .profile-page__bio-display.is-empty span { - color: var(--fg-soft); -} - -.web-shell[data-ui-theme="dark-green"] .profile-page__bio-edit-icon { - display: inline-flex; - align-items: center; - justify-content: center; - width: 24px; - height: 24px; - border-radius: 50%; - background: rgba(var(--accent-rgb), 0.08); - color: var(--accent); - font-size: 12px; - opacity: 0.78; -} - -.web-shell[data-ui-theme="dark-green"] .profile-page__bio-display:hover, -.web-shell[data-ui-theme="dark-green"] .profile-page__bio-display:focus-visible { - border-color: rgba(var(--accent-rgb), 0.28); - background: rgba(var(--accent-rgb), 0.055); - color: var(--fg-body); - outline: none; -} - -.web-shell[data-ui-theme="dark-green"] .profile-page__bio-display:hover .profile-page__bio-edit-icon, -.web-shell[data-ui-theme="dark-green"] .profile-page__bio-display:focus-visible .profile-page__bio-edit-icon { - opacity: 1; -} - -.web-shell[data-ui-theme="dark-green"] .profile-page__bio-status { - color: var(--accent); - font-size: 11px; - line-height: 1.3; -} - -.web-shell[data-ui-theme="dark-green"] .profile-page__counts { - gap: 0; - width: 100%; - padding: 12px 0; - border-top: 1px solid rgba(255, 255, 255, 0.065); - border-bottom: 1px solid rgba(255, 255, 255, 0.065); -} - -.web-shell[data-ui-theme="dark-green"] .profile-page__count strong { - font-size: 19px; - line-height: 1.1; -} - -.web-shell[data-ui-theme="dark-green"] .profile-page__count span { - margin-top: 4px; - color: var(--fg-soft); - font-size: 12px; -} - -.web-shell[data-ui-theme="dark-green"] .profile-page__share-btn { - min-height: 40px; - padding: 0 15px; - border-radius: var(--radius-sm); - transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast); -} - -.web-shell[data-ui-theme="dark-green"] .profile-page__share-btn--plan { - justify-content: center; - border-color: rgba(var(--accent-rgb), 0.24); - background: rgba(var(--accent-rgb), 0.07); - color: var(--accent); -} - -.web-shell[data-ui-theme="dark-green"] .profile-page__share-btn--primary { - border-color: rgba(var(--accent-rgb), 0.62); - background: var(--accent); - color: var(--dg-button-text); - font-weight: 700; -} - -.web-shell[data-ui-theme="dark-green"] .profile-page__share-btn--secondary { - background: rgba(255, 255, 255, 0.025); -} - -.web-shell[data-ui-theme="dark-green"] .profile-page__share-btn--danger { - margin-top: 2px; - border-color: transparent; - color: var(--fg-soft); -} - -.web-shell[data-ui-theme="dark-green"] .profile-page__share-btn:hover { - transform: translateY(-1px); -} - -.web-shell[data-ui-theme="dark-green"] .profile-page__share-btn--primary:hover { - border-color: var(--accent-hover); - background: var(--accent-hover); - color: var(--dg-button-text); -} - -.web-shell[data-ui-theme="dark-green"] .profile-page__share-btn--danger:hover { - border-color: rgba(255, 90, 95, 0.36); - background: rgba(255, 90, 95, 0.1); - color: #ff9a9d; -} - -.web-shell[data-ui-theme="dark-green"] .profile-page__main { - gap: 22px; -} - -.web-shell[data-ui-theme="dark-green"] .profile-page__main-tabs { - min-height: 52px; - margin-bottom: 2px; - padding: 4px; - border: 1px solid rgba(255, 255, 255, 0.065); - border-radius: var(--radius-md); - background: rgba(255, 255, 255, 0.022); -} - -.web-shell[data-ui-theme="dark-green"] .profile-page__main-tabs button { - min-height: 42px; - padding: 0 18px; - border: 0; - border-radius: var(--radius-sm); -} - -.web-shell[data-ui-theme="dark-green"] .profile-page__main-tabs button.is-active { - background: rgba(var(--accent-rgb), 0.12); - color: var(--accent); -} - -.web-shell[data-ui-theme="dark-green"] .profile-page__main-tabs button.is-active::after { - content: none; -} - -.web-shell[data-ui-theme="dark-green"] .profile-page__section { - gap: 14px; -} - -.web-shell[data-ui-theme="dark-green"] .profile-page__section-label { - margin-bottom: 0; - color: var(--fg-body); - font-size: 15px; - letter-spacing: 0; -} - -.web-shell[data-ui-theme="dark-green"] .profile-page__list-grid { - grid-template-columns: repeat(auto-fit, minmax(248px, 1fr)); - gap: 14px; - max-height: min(470px, 48vh); - overflow-y: auto; - overscroll-behavior: contain; - padding-right: 6px; - scrollbar-color: rgba(var(--accent-rgb), 0.42) transparent; - scrollbar-width: thin; -} - -.web-shell[data-ui-theme="dark-green"] .profile-page__list-grid::-webkit-scrollbar, -.web-shell[data-ui-theme="dark-green"] .profile-page__review-list::-webkit-scrollbar { - width: 6px; -} - -.web-shell[data-ui-theme="dark-green"] .profile-page__list-grid::-webkit-scrollbar-track, -.web-shell[data-ui-theme="dark-green"] .profile-page__review-list::-webkit-scrollbar-track { - background: transparent; -} - -.web-shell[data-ui-theme="dark-green"] .profile-page__list-grid::-webkit-scrollbar-thumb, -.web-shell[data-ui-theme="dark-green"] .profile-page__review-list::-webkit-scrollbar-thumb { - border-radius: 999px; - background: rgba(var(--accent-rgb), 0.28); -} - -.web-shell[data-ui-theme="dark-green"] .profile-page__list-grid::-webkit-scrollbar-thumb:hover, -.web-shell[data-ui-theme="dark-green"] .profile-page__review-list::-webkit-scrollbar-thumb:hover { - background: rgba(var(--accent-rgb), 0.42); -} - -.web-shell[data-ui-theme="dark-green"] .profile-page__list-card { - min-height: 136px; - padding: 16px; - border-radius: var(--radius-md); - transition: border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast); -} - -.web-shell[data-ui-theme="dark-green"] .profile-page__list-card:hover, -.web-shell[data-ui-theme="dark-green"] .profile-page__review-item:hover { - border-color: rgba(var(--accent-rgb), 0.28); - background: - linear-gradient(180deg, rgba(var(--accent-rgb), 0.045), transparent), - var(--bg-surface); -} - -.web-shell[data-ui-theme="dark-green"] .profile-page__list-card-head strong { - min-width: 0; - font-size: 14px; - line-height: 1.35; -} - -.web-shell[data-ui-theme="dark-green"] .profile-page__list-card-head span { - padding: 4px 8px; - border-radius: 999px; - background: rgba(var(--accent-rgb), 0.1); - color: var(--accent); - font-size: 11px; - line-height: 1; -} - -.web-shell[data-ui-theme="dark-green"] .profile-page__list-card p { - display: -webkit-box; - min-height: 38px; - overflow: hidden; - color: var(--fg-muted); - font-size: 12px; - line-height: 1.55; - text-overflow: ellipsis; - white-space: normal; - -webkit-box-orient: vertical; - -webkit-line-clamp: 2; -} - -.web-shell[data-ui-theme="dark-green"] .profile-page__list-card-meta { - padding-top: 10px; - border-top: 1px solid rgba(255, 255, 255, 0.055); - color: var(--fg-soft); - line-height: 1.35; -} - -.web-shell[data-ui-theme="dark-green"] .profile-page__empty-state { - position: relative; - min-height: 280px; - overflow: hidden; - padding: 46px 28px; -} - -.web-shell[data-ui-theme="dark-green"] .profile-page__empty-state::before { - content: ""; - position: absolute; - inset: 0; - background: radial-gradient(circle at 50% 0%, rgba(var(--accent-rgb), 0.09), transparent 42%); - pointer-events: none; -} - -.web-shell[data-ui-theme="dark-green"] .profile-page__empty-mark { - position: relative; - display: inline-flex; - align-items: center; - justify-content: center; - width: 52px; - height: 52px; - border: 1px solid rgba(var(--accent-rgb), 0.22); - border-radius: 50%; - background: rgba(var(--accent-rgb), 0.08); - color: var(--accent); - font-size: 18px; -} - -.web-shell[data-ui-theme="dark-green"] .profile-page__empty-text { - position: relative; - color: var(--fg-muted); - font-size: 13px; -} - -.web-shell[data-ui-theme="dark-green"] .profile-page__empty-btn { - position: relative; - min-height: 38px; - border-color: rgba(var(--accent-rgb), 0.32); - background: rgba(var(--accent-rgb), 0.08); - color: var(--accent); -} - -.web-shell[data-ui-theme="dark-green"] .profile-page__review-list { - grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); - gap: 14px; - max-height: min(470px, 48vh); - overflow-y: auto; - overscroll-behavior: contain; - padding-right: 6px; - scrollbar-color: rgba(var(--accent-rgb), 0.42) transparent; - scrollbar-width: thin; -} - -.web-shell[data-ui-theme="dark-green"] .profile-page__review-item { - min-height: 74px; - padding: 10px; - border-radius: var(--radius-md); - transition: border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast); -} - -.web-shell[data-ui-theme="dark-green"] .profile-page__review-item:hover { - transform: translateY(-2px); -} - -.web-shell[data-ui-theme="dark-green"] .profile-page__review-item img, -.web-shell[data-ui-theme="dark-green"] .profile-page__review-thumb { - flex-basis: 70px; - width: 70px; - height: 52px; -} - -.web-shell[data-ui-theme="dark-green"] .profile-page__review-item strong { - font-size: 13px; -} - -.web-shell[data-ui-theme="dark-green"] .profile-page__list-bar { - margin-bottom: 0; -} - -.web-shell[data-ui-theme="dark-green"] .profile-page__list-tabs { - gap: 4px; - padding: 3px; - border: 1px solid rgba(255, 255, 255, 0.065); - border-radius: var(--radius-sm); - background: rgba(255, 255, 255, 0.02); -} - -.web-shell[data-ui-theme="dark-green"] .profile-page__list-tabs button { - min-height: 32px; - padding: 0 14px; - border: 0; - border-radius: 8px; -} - -.web-shell[data-ui-theme="dark-green"] .profile-page__list-tabs button.is-active { - background: rgba(var(--accent-rgb), 0.1); -} - -.web-shell[data-ui-theme="dark-green"] .profile-page__upload-card--meta { - display: grid; - grid-template-columns: repeat(2, minmax(0, 1fr)); - gap: 12px; - padding: 14px; - border-radius: var(--radius-md); -} - -.web-shell[data-ui-theme="dark-green"] .profile-page__meta-item { - display: grid; - gap: 6px; - min-width: 0; - padding: 14px; - border: 1px solid rgba(255, 255, 255, 0.055); - border-radius: var(--radius-sm); - background: rgba(255, 255, 255, 0.025); -} - -.web-shell[data-ui-theme="dark-green"] .profile-page__meta-item small { - overflow: hidden; - color: var(--fg-soft); - font-size: 12px; - text-overflow: ellipsis; - white-space: nowrap; -} - -.web-shell[data-ui-theme="dark-green"] .profile-page__meta-item strong { - overflow: hidden; - color: var(--fg-body); - font-size: 17px; - line-height: 1.25; - text-overflow: ellipsis; - white-space: nowrap; -} - -@media (max-width: 900px) { - .web-shell[data-ui-theme="dark-green"] .profile-page__body { - grid-template-columns: 1fr; - width: min(100% - 36px, 760px); - margin-top: -54px; - } - - .web-shell[data-ui-theme="dark-green"] .profile-page__sidebar { - align-items: stretch; - } - - .web-shell[data-ui-theme="dark-green"] .profile-page__main-tabs { - overflow-x: auto; - } -} - -@media (max-width: 560px) { - .web-shell[data-ui-theme="dark-green"] .profile-page__banner { - height: 152px; - } - - .web-shell[data-ui-theme="dark-green"] .profile-page__banner .profile-page__banner-btn { - top: 10px; - right: 12px; - width: 36px; - min-width: 36px; - height: 36px; - padding: 0; - border-radius: 999px; - font-size: 0; - gap: 0; - } - - .web-shell[data-ui-theme="dark-green"] .profile-page__banner-btn .anticon { - width: 24px; - height: 24px; - background: transparent; - font-size: 14px; - } - - .web-shell[data-ui-theme="dark-green"] .profile-page__body { - width: min(100% - 28px, 560px); - margin-top: -32px; - padding-bottom: 88px; - } - - .web-shell[data-ui-theme="dark-green"] .profile-page__sidebar { - gap: 13px; - padding: 18px; - border-radius: var(--radius-md); - } - - .web-shell[data-ui-theme="dark-green"] .profile-page__sidebar-head { - gap: 7px; - } - - .web-shell[data-ui-theme="dark-green"] .profile-page__avatar-ring .profile-page__avatar, - .web-shell[data-ui-theme="dark-green"] .profile-page__avatar { - width: 76px; - height: 76px; - border-width: 3px; - font-size: 24px; - } - - .web-shell[data-ui-theme="dark-green"] .profile-page__avatar-edit { - width: 76px; - height: 76px; - } - - .web-shell[data-ui-theme="dark-green"] .profile-page__avatar-badge { - bottom: 6px; - width: 18px; - height: 18px; - } - - .web-shell[data-ui-theme="dark-green"] .profile-page__username { - font-size: 20px; - } - - .web-shell[data-ui-theme="dark-green"] .profile-page__bio { - min-height: 46px; - padding: 8px 10px; - font-size: 12px; - line-height: 1.45; - } - - .web-shell[data-ui-theme="dark-green"] .profile-page__bio-display { - min-height: 42px; - padding: 8px 10px; - } - - .web-shell[data-ui-theme="dark-green"] .profile-page__bio-display span { - font-size: 12px; - } - - .web-shell[data-ui-theme="dark-green"] .profile-page__counts { - padding: 9px 0; - } - - .web-shell[data-ui-theme="dark-green"] .profile-page__count strong { - font-size: 18px; - } - - .web-shell[data-ui-theme="dark-green"] .profile-page__share-btn { - min-height: 36px; - } - - .web-shell[data-ui-theme="dark-green"] .profile-page__main-tabs button { - flex: 0 0 auto; - padding: 0 14px; - } - - .web-shell[data-ui-theme="dark-green"] .profile-page__upload-card--meta { - grid-template-columns: 1fr; - } - - .web-shell[data-ui-theme="dark-green"] .profile-page__list-grid { - grid-template-columns: repeat(3, minmax(0, 1fr)); - gap: 8px; - max-height: min(312px, 46vh); - padding-right: 4px; - } - - .web-shell[data-ui-theme="dark-green"] .profile-page__list-card { - min-height: 112px; - padding: 9px; - gap: 8px; - } - - .web-shell[data-ui-theme="dark-green"] .profile-page__list-card-head { - align-items: flex-start; - flex-direction: column; - gap: 6px; - } - - .web-shell[data-ui-theme="dark-green"] .profile-page__list-card-head strong { - width: 100%; - font-size: 12px; - } - - .web-shell[data-ui-theme="dark-green"] .profile-page__list-card-head span { - max-width: 100%; - overflow: hidden; - padding: 3px 7px; - font-size: 10px; - text-overflow: ellipsis; - white-space: nowrap; - } - - .web-shell[data-ui-theme="dark-green"] .profile-page__list-card p { - min-height: 30px; - font-size: 11px; - line-height: 1.45; - } - - .web-shell[data-ui-theme="dark-green"] .profile-page__list-card-meta { - align-items: flex-start; - flex-direction: column; - gap: 4px; - padding-top: 8px; - font-size: 10px; - } -} - /* 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 { @@ -7861,43 +6406,21 @@ @media (max-width: 900px) { .web-shell[data-ui-theme="dark-green"] .auth-page { grid-template-columns: 1fr; - grid-template-rows: 180px minmax(0, 1fr); - overflow-y: auto; + grid-template-rows: 200px 1fr; } .web-shell[data-ui-theme="dark-green"] .auth-page__form-panel { - align-items: flex-start; - padding: 22px 20px 36px; + padding: 24px 20px; border-top: 1px solid var(--border-weak); border-left: 0; } - .web-shell[data-ui-theme="dark-green"] .auth-page__video-overlay { - align-items: flex-start; - justify-content: center; - padding: 22px 24px; - text-align: left; - } - - .web-shell[data-ui-theme="dark-green"] .auth-page__showcase-content { - gap: 9px; - } - .web-shell[data-ui-theme="dark-green"] .auth-page__brand { - font-size: 34px; + font-size: 32px; } .web-shell[data-ui-theme="dark-green"] .auth-page__tagline { - font-size: 15px; - } - - .web-shell[data-ui-theme="dark-green"] .auth-page__showcase-stats { - display: none; - } - - .web-shell[data-ui-theme="dark-green"] .auth-page__form-inner { - max-width: 520px; - margin: 0 auto; + font-size: 16px; } .web-shell[data-ui-theme="dark-green"] .profile-page__body { @@ -7907,82 +6430,9 @@ } @media (max-width: 560px) { - .web-shell[data-ui-theme="dark-green"] .auth-page { - grid-template-rows: 132px minmax(0, 1fr); - } - - .web-shell[data-ui-theme="dark-green"] .auth-page__video-overlay { - padding: 16px 18px; - } - - .web-shell[data-ui-theme="dark-green"] .auth-page__brand-row { - align-items: flex-start; - flex-direction: column; - gap: 6px; - } - - .web-shell[data-ui-theme="dark-green"] .auth-page__brand { - font-size: 28px; - } - - .web-shell[data-ui-theme="dark-green"] .auth-page__tagline { - font-size: 13px; - } - - .web-shell[data-ui-theme="dark-green"] .auth-page__features { - gap: 6px; - } - - .web-shell[data-ui-theme="dark-green"] .auth-page__features span { - padding: 4px 8px; - font-size: 11px; - } - - .web-shell[data-ui-theme="dark-green"] .auth-page__form-panel { - padding: 14px 14px 28px; - } - - .web-shell[data-ui-theme="dark-green"] .auth-page__form-inner { - gap: 16px; - } - - .web-shell[data-ui-theme="dark-green"] .auth-page__logo { - width: 46px; - height: 46px; - } - - .web-shell[data-ui-theme="dark-green"] .auth-page__title { - font-size: 21px; - } - .web-shell[data-ui-theme="dark-green"] .auth-page__auth-tabs { display: grid; - grid-template-columns: repeat(3, minmax(0, 1fr)); - gap: 6px; - } - - .web-shell[data-ui-theme="dark-green"] .auth-page__auth-tabs button { - min-height: 38px; - padding: 0 4px; - font-size: 10px; - } - - .web-shell[data-ui-theme="dark-green"] .auth-page__auth-tabs button .anticon { - font-size: 13px; - } - - .web-shell[data-ui-theme="dark-green"] .auth-page__field input, - .web-shell[data-ui-theme="dark-green"] .auth-page__sms-btn { - min-height: 42px; - } - - .web-shell[data-ui-theme="dark-green"] .auth-page__sms-row { - gap: 8px; - } - - .web-shell[data-ui-theme="dark-green"] .auth-page__sms-btn { - padding: 0 10px; - font-size: 12px; + grid-template-columns: repeat(2, minmax(0, 1fr)); } .web-shell[data-ui-theme="dark-green"] .profile-page__body { @@ -8225,1135 +6675,3 @@ background: var(--accent-soft); color: var(--accent); } - -/* Responsive floating navigation: prevent squeeze/warp on narrow workspaces. */ -.web-shell[data-ui-theme="dark-green"] .floating-nav { - flex-shrink: 0; - max-height: calc(100svh - 96px); - overflow-x: visible; - overflow-y: auto; - scrollbar-width: none; -} - -.web-shell[data-ui-theme="dark-green"] .floating-nav::-webkit-scrollbar { - display: none; -} - -.web-shell[data-ui-theme="dark-green"] .floating-nav__item, -.web-shell[data-ui-theme="dark-green"] .floating-nav__button { - flex: 0 0 auto; -} - -@media (min-width: 901px) { - .web-shell[data-ui-theme="dark-green"] .floating-nav { - top: 50%; - right: auto; - bottom: auto; - left: 16px; - display: flex; - flex-direction: column; - width: 52px; - transform: translateY(-50%); - } - - .web-shell[data-ui-theme="dark-green"] .floating-nav__item, - .web-shell[data-ui-theme="dark-green"] .floating-nav__button { - width: 40px; - } - - .web-shell[data-ui-theme="dark-green"] .floating-nav__button { - height: 40px; - } -} - -@media (max-width: 900px) { - .web-shell[data-ui-theme="dark-green"] .floating-nav { - top: calc(56px + env(safe-area-inset-top, 0px)); - right: 12px; - bottom: auto; - left: 12px; - display: flex; - flex-direction: row; - align-items: center; - justify-content: flex-start; - width: auto; - max-width: calc(100vw - 24px); - max-height: none; - min-height: 58px; - gap: 6px; - padding: 8px; - border-radius: 0 0 18px 18px; - transform: none; - overflow-x: auto; - overflow-y: visible; - overscroll-behavior-x: contain; - background: rgba(14, 14, 16, 0.94); - box-shadow: 0 16px 42px rgba(0, 0, 0, 0.28); - } - - .web-shell[data-ui-theme="dark-green"] .floating-nav.is-expanded, - .web-shell[data-ui-theme="dark-green"] .floating-nav.is-browse { - width: auto; - max-width: calc(100vw - 24px); - } - - .web-shell[data-ui-theme="dark-green"] .floating-nav__item { - width: 42px; - min-width: 42px; - } - - .web-shell[data-ui-theme="dark-green"] .floating-nav__button { - width: 42px; - height: 42px; - min-width: 42px; - border-radius: 13px; - font-size: 16px; - } - - .web-shell[data-ui-theme="dark-green"] .floating-nav__label, - .web-shell[data-ui-theme="dark-green"] .floating-nav__button.is-active .floating-nav__label { - display: none; - } - - .web-shell[data-ui-theme="dark-green"] .floating-nav__button.has-divider { - margin-top: 0; - } - - .web-shell[data-ui-theme="dark-green"] .floating-nav__button.has-divider::before { - display: none; - } - - .web-shell[data-ui-theme="dark-green"] .floating-nav__submenu { - top: calc(100% + 8px); - bottom: auto; - left: 50%; - transform: translate(-50%, -4px); - } - - .web-shell[data-ui-theme="dark-green"] .floating-nav__item.has-children.is-submenu-open .floating-nav__submenu { - transform: translate(-50%, 0); - } - - .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-workbench-page.is-active .ai-chat-messages-surface { - padding-top: 86px; - } -} - -@media (max-width: 480px) { - .web-shell[data-ui-theme="dark-green"] .floating-nav { - top: calc(56px + env(safe-area-inset-top, 0px)); - right: 10px; - left: 10px; - min-height: 54px; - padding: 7px; - border-radius: 0 0 16px 16px; - } - - .web-shell[data-ui-theme="dark-green"] .floating-nav__item { - width: 40px; - min-width: 40px; - } - - .web-shell[data-ui-theme="dark-green"] .floating-nav__button { - width: 40px; - height: 40px; - min-width: 40px; - } -} - -/* Floating nav labels: preserve icon-only density while keeping hover discoverability. */ -@media (min-width: 901px) { - .web-shell[data-ui-theme="dark-green"] .floating-nav { - overflow: visible; - } - - .web-shell[data-ui-theme="dark-green"] .floating-nav__button { - position: relative; - } - - .web-shell[data-ui-theme="dark-green"] .floating-nav__label { - position: absolute; - top: 50%; - left: calc(100% + 12px); - z-index: 80; - display: inline-flex; - align-items: center; - width: max-content; - max-width: 160px; - height: 30px; - padding: 0 11px; - border: 1px solid rgba(var(--accent-rgb), 0.18); - border-radius: 999px; - background: rgba(18, 21, 22, 0.96); - color: var(--fg-body); - font-size: 12px; - font-weight: 760; - line-height: 1; - opacity: 0; - pointer-events: none; - white-space: nowrap; - box-shadow: 0 12px 28px rgba(0, 0, 0, 0.32); - transform: translate(-6px, -50%); - transition: - opacity 160ms ease, - transform 160ms ease; - } - - .web-shell[data-ui-theme="dark-green"] .floating-nav__button:hover .floating-nav__label, - .web-shell[data-ui-theme="dark-green"] .floating-nav__item.is-submenu-open .floating-nav__button .floating-nav__label { - opacity: 1; - transform: translate(0, -50%); - } -} - -@media (max-width: 900px) { - .web-shell[data-ui-theme="dark-green"] .floating-nav__button { - position: relative; - } - - .web-shell[data-ui-theme="dark-green"] .floating-nav__label, - .web-shell[data-ui-theme="dark-green"] .floating-nav__button.is-active .floating-nav__label { - display: none; - opacity: 0; - visibility: hidden; - pointer-events: none; - } - - .web-shell[data-ui-theme="dark-green"] .floating-nav__button:hover .floating-nav__label, - .web-shell[data-ui-theme="dark-green"] .floating-nav__item.is-submenu-open .floating-nav__button .floating-nav__label { - display: none; - opacity: 0; - visibility: hidden; - } -} - -/* Workbench side rail and chat scroll controls: resolve narrow-screen collisions. */ -.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .conversation-sidebar.is-collapsed { - width: 56px; - min-width: 56px; - overflow: visible; - border-left-color: rgba(255, 255, 255, 0.07); - background: - linear-gradient(180deg, rgba(255, 255, 255, 0.022), transparent 150px), - rgba(12, 14, 16, 0.74); -} - -.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .conversation-sidebar.is-collapsed .conversation-sidebar__header { - justify-content: center; - width: 100%; - padding: 10px 8px; - border-bottom: 0; -} - -.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .conversation-sidebar.is-collapsed .conversation-sidebar__toggle { - flex: 0 0 36px; - width: 36px; - min-width: 36px; - height: 36px; - border: 1px solid rgba(255, 255, 255, 0.09); - border-radius: 12px; - background: rgba(255, 255, 255, 0.035); -} - -.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .conversation-sidebar.is-collapsed .conversation-sidebar__toggle:hover { - border-color: rgba(var(--accent-rgb), 0.32); - background: rgba(var(--accent-rgb), 0.08); - color: var(--accent); -} - -.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-chat-scroll-actions { - top: auto; - bottom: clamp(248px, 22vh, 308px); - left: clamp(82px, 7vw, 112px); - z-index: 23; - gap: 8px; -} - -.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-chat-scroll-actions__button { - width: 40px; - height: 40px; - border-radius: 13px; - background: - linear-gradient(180deg, rgba(255, 255, 255, 0.036), rgba(255, 255, 255, 0.012)), - rgba(16, 18, 20, 0.92); -} - -@media (max-width: 900px) { - .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-workbench-page.is-active .ai-workbench-shell > .conversation-sidebar, - .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-workbench-page.is-active > .conversation-sidebar { - top: 74px; - height: calc(100% - 74px); - max-height: calc(100svh - 130px); - border-top: 1px solid rgba(255, 255, 255, 0.08); - border-radius: 18px 0 0 18px; - } - - .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-workbench-page.is-active .ai-workbench-shell > .conversation-sidebar.is-collapsed, - .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-workbench-page.is-active > .conversation-sidebar.is-collapsed, - .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .conversation-sidebar.is-collapsed { - width: 56px; - min-width: 56px; - flex-basis: 56px; - } - - .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .conversation-sidebar__header { - min-height: 56px; - } - - .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-chat-scroll-actions { - top: 136px; - bottom: auto; - left: 16px; - z-index: 23; - } -} - -@media (max-width: 480px) { - .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-workbench-page.is-active .ai-workbench-shell > .conversation-sidebar, - .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-workbench-page.is-active > .conversation-sidebar { - top: 70px; - height: calc(100% - 70px); - max-height: calc(100svh - 126px); - } - - .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-chat-scroll-actions { - top: 128px; - left: 14px; - } -} - -/* Workbench final floating affordances: collapsed sidebar becomes one icon; scroll controls stay discoverable. */ -.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-workbench-page.is-active .ai-workbench-shell > .conversation-sidebar.is-collapsed, -.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-workbench-page.is-active > .conversation-sidebar.is-collapsed { - position: absolute; - inset: 50% 0 auto auto; - z-index: 32; - flex: 0 0 32px !important; - width: 32px !important; - min-width: 32px !important; - height: 72px !important; - min-height: 72px !important; - max-height: 72px !important; - overflow: visible; - border: 0; - border-radius: 18px 0 0 18px; - background: transparent; - box-shadow: none; - pointer-events: none; - transform: translateY(-50%); -} - -.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .conversation-sidebar.is-collapsed .conversation-sidebar__header { - display: grid; - place-items: center; - width: 32px; - height: 72px; - min-height: 72px; - padding: 0; - border: 0; - background: transparent; - pointer-events: none; -} - -.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .conversation-sidebar.is-collapsed .conversation-sidebar__toggle { - display: grid; - place-items: center; - flex: 0 0 30px; - width: 30px; - min-width: 30px; - height: 70px; - border: 1px solid rgba(var(--accent-rgb), 0.2); - border-right: 0; - border-radius: 16px 0 0 16px; - background: - linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(var(--accent-rgb), 0.05)), - rgba(12, 15, 16, 0.82); - color: rgba(230, 238, 233, 0.68); - box-shadow: - -12px 0 28px rgba(0, 0, 0, 0.22), - inset 1px 0 0 rgba(255, 255, 255, 0.045); - pointer-events: auto; - transform: translateX(0); - backdrop-filter: blur(14px); -} - -.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .conversation-sidebar.is-collapsed .conversation-sidebar__toggle:hover { - border-color: rgba(var(--accent-rgb), 0.42); - background: - linear-gradient(180deg, rgba(var(--accent-rgb), 0.14), rgba(var(--accent-rgb), 0.065)), - rgba(12, 15, 16, 0.94); - color: var(--accent); - transform: translateX(-2px); -} - -.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .conversation-sidebar.is-collapsed .conversation-sidebar__list, -.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .conversation-sidebar.is-collapsed .conversation-sidebar__header-actions, -.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .conversation-sidebar.is-collapsed .conversation-sidebar__new, -.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .conversation-sidebar.is-collapsed .conversation-sidebar__icon-button { - display: none; -} - -.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-workbench-page.is-active .wb-chat-scroll-actions { - --wb-scroll-action-x: calc((100vw - 270px) / 2); - - position: fixed; - inset: 0; - z-index: 22; - opacity: 0; - pointer-events: none; - visibility: hidden; - transition: - opacity 180ms ease, - visibility 180ms ease; -} - -.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-workbench-page.is-active:has(.conversation-sidebar.is-collapsed) .wb-chat-scroll-actions { - --wb-scroll-action-x: 50vw; -} - -.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-workbench-page.is-active .wb-chat-scroll-actions.is-visible, -.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-workbench-page.is-active .wb-chat-scroll-actions:focus-within { - opacity: 1; - visibility: visible; -} - -.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-chat-scroll-actions__button { - position: fixed; - left: var(--wb-scroll-action-x); - display: grid; - place-items: center; - width: 34px; - height: 34px; - border-color: rgba(255, 255, 255, 0.1); - border-radius: 999px; - background: - radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.08), transparent 58%), - rgba(12, 15, 16, 0.68); - color: rgba(230, 238, 233, 0.7); - box-shadow: - 0 10px 24px rgba(0, 0, 0, 0.18), - inset 0 1px 0 rgba(255, 255, 255, 0.035); - opacity: 0; - pointer-events: none; - transform: translateX(-50%) scale(0.96); - transition: - border-color 160ms ease, - background 160ms ease, - color 160ms ease, - opacity 160ms ease, - transform 160ms ease; - visibility: hidden; - backdrop-filter: blur(14px); -} - -.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-workbench-page.is-active .wb-chat-scroll-actions.is-visible.is-top .wb-chat-scroll-actions__button--top, -.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-workbench-page.is-active .wb-chat-scroll-actions.is-visible.is-bottom .wb-chat-scroll-actions__button--bottom { - opacity: 1; - pointer-events: auto; - visibility: visible; -} - -.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-chat-scroll-actions__button--top { - top: 18px; -} - -.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-chat-scroll-actions__button--bottom { - bottom: clamp(150px, 20vh, 240px); -} - -.web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-chat-scroll-actions__button:hover { - border-color: rgba(var(--accent-rgb), 0.4); - background: - linear-gradient(180deg, rgba(var(--accent-rgb), 0.14), rgba(var(--accent-rgb), 0.04)), - rgba(14, 16, 18, 0.88); - color: var(--accent); - transform: translateX(-50%) scale(1); -} - -@media (max-width: 900px) { - .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-workbench-page.is-active .ai-workbench-shell > .conversation-sidebar.is-collapsed, - .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-workbench-page.is-active > .conversation-sidebar.is-collapsed { - inset: 54% 0 auto auto; - } - - .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-workbench-page.is-active .wb-chat-scroll-actions { - --wb-scroll-action-x: 50vw; - } - - .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-chat-scroll-actions__button--top { - top: 72px; - } - - .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-chat-scroll-actions__button--bottom { - bottom: clamp(206px, 25vh, 280px); - } -} - -@media (max-width: 480px) { - .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-workbench-page.is-active .ai-workbench-shell > .conversation-sidebar.is-collapsed, - .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-workbench-page.is-active > .conversation-sidebar.is-collapsed { - inset: 56% 0 auto auto; - } - - .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-workbench-page.is-active .wb-chat-scroll-actions { - --wb-scroll-action-x: 50vw; - } - - .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-chat-scroll-actions__button { - width: 32px; - height: 32px; - } - - .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-chat-scroll-actions__button--top { - top: 66px; - } - - .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-chat-scroll-actions__button--bottom { - bottom: clamp(340px, 44vh, 390px); - } -} - -/* Workbench mobile density pass: keep the creation flow usable without crowding the message stream. */ -@media (max-width: 620px) { - .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-workbench-page.is-active .wb-composer { - padding: 0 10px 10px; - } - - .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-workbench-page.is-active .wb-composer__content { - gap: 9px; - padding: 10px 10px 8px; - border-radius: 18px; - } - - .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__input-row { - align-items: stretch; - gap: 9px; - } - - .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__refs { - width: 44px; - min-width: 44px; - } - - .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__ref-upload { - width: 42px; - height: 42px; - gap: 0; - border-radius: 13px; - font-size: 18px; - transform: none; - } - - .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__ref-upload:hover:not(:disabled) { - transform: translateY(-1px); - } - - .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__ref-label { - display: none; - } - - .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__ref-count { - position: absolute; - right: -3px; - bottom: -3px; - display: grid; - min-width: 18px; - height: 18px; - place-items: center; - padding: 0 4px; - border: 1px solid rgba(0, 0, 0, 0.38); - border-radius: 999px; - background: var(--accent); - color: var(--dg-button-text); - font-size: 10px; - font-weight: 800; - } - - .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__textarea, - .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__highlight { - min-height: 38px; - max-height: 88px; - padding: 8px 48px 8px 0; - font-size: 14px; - line-height: 1.45; - } - - .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__toolbar { - gap: 8px; - padding: 7px 46px 0 0; - } - - .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__toolbar-left { - flex: 1 1 auto; - flex-wrap: nowrap; - min-width: 0; - gap: 6px; - overflow-x: auto; - overflow-y: hidden; - scrollbar-width: none; - } - - .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__toolbar-left::-webkit-scrollbar { - display: none; - } - - .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-inline-chip__trigger, - .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-workbench-mode-switch__button, - .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-workbench-select-chip__trigger { - flex: 0 0 auto; - height: 30px; - padding: 0 9px; - border-radius: 10px; - font-size: 11px; - } - - .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__send-primary { - width: 36px; - height: 36px; - border-radius: 12px; - } - - .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-chat-image-result-card { - border-radius: 10px; - } - - .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-chat-image-result-meta { - gap: 7px; - padding: 12px 12px 8px; - } - - .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-chat-image-result-meta__prompt { - -webkit-line-clamp: 1; - } - - .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-chat-image-actions { - gap: 6px; - padding: 10px 12px 10px; - } - - .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-chat-image-actions__primary { - height: 32px; - padding: 0 12px; - } - - .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-chat-image-actions__icon, - .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-chat-result-flow button { - width: 32px; - min-width: 32px; - height: 32px; - min-height: 32px; - padding: 0; - justify-content: center; - border-radius: 10px; - font-size: 0; - } - - .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-chat-image-actions__icon .anticon, - .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-chat-result-flow button .anticon { - font-size: 14px; - } - - .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-chat-result-flow { - justify-content: flex-end; - gap: 6px; - padding: 0 12px 12px; - } -} - -@media (max-width: 420px) { - .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .ai-workbench-page.is-active .wb-composer__content { - padding: 9px 9px 7px; - } - - .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__refs { - width: 40px; - min-width: 40px; - } - - .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__ref-upload { - width: 38px; - height: 38px; - border-radius: 12px; - font-size: 17px; - } - - .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__textarea, - .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__highlight { - min-height: 34px; - max-height: 76px; - padding-top: 7px; - padding-bottom: 7px; - } - - .web-shell[data-ui-theme="dark-green"][data-view="workbench"] .wb-composer__toolbar { - padding-top: 6px; - } -} - -/* Ecommerce final polish: keep selected option states refined in the dark-green theme. */ -.web-shell[data-ui-theme="dark-green"][data-view="ecommerce"] .product-clone-page[data-tool="clone"] :is( - .clone-ai-module-list button, - .clone-ai-model-scene-grid button, - .clone-ai-replicate-levels button, - .clone-ai-video-options button -), -.web-shell[data-ui-theme="dark-green"][data-view="ecommerce"] .product-clone-page:is([data-tool="set"], [data-tool="detail"], [data-tool="wear"]) :is( - .product-set-structure-grid button, - .product-detail-module-grid button, - .product-clone-scene-grid button, - .product-clone-ratio-row button -) { - position: relative; - overflow: hidden; -} - -.web-shell[data-ui-theme="dark-green"][data-view="ecommerce"] .product-clone-page[data-tool="clone"] :is( - .clone-ai-module-list button.is-active, - .clone-ai-model-scene-grid button.is-active, - .clone-ai-replicate-levels button.is-active, - .clone-ai-video-options button.is-active -), -.web-shell[data-ui-theme="dark-green"][data-view="ecommerce"] .product-clone-page:is([data-tool="set"], [data-tool="detail"], [data-tool="wear"]) :is( - .product-set-structure-grid button.is-active, - .product-detail-module-grid button.is-active, - .product-clone-scene-grid button.is-active, - .product-clone-ratio-row button.is-active -) { - border-color: rgba(var(--accent-rgb), 0.48); - background: - linear-gradient(90deg, rgba(var(--accent-rgb), 0.12), rgba(var(--accent-rgb), 0.035)), - rgba(255, 255, 255, 0.032); - color: var(--fg-body); -} - -.web-shell[data-ui-theme="dark-green"][data-view="ecommerce"] .product-clone-page[data-tool="clone"] :is( - .clone-ai-module-list button.is-active, - .clone-ai-model-scene-grid button.is-active, - .clone-ai-replicate-levels button.is-active, - .clone-ai-video-options button.is-active -)::before, -.web-shell[data-ui-theme="dark-green"][data-view="ecommerce"] .product-clone-page:is([data-tool="set"], [data-tool="detail"], [data-tool="wear"]) :is( - .product-set-structure-grid button.is-active, - .product-detail-module-grid button.is-active, - .product-clone-scene-grid button.is-active, - .product-clone-ratio-row button.is-active -)::before { - position: absolute; - inset: 8px auto 8px 0; - width: 3px; - border-radius: 999px; - background: var(--accent); - content: ""; -} - -.web-shell[data-ui-theme="dark-green"][data-view="ecommerce"] .product-clone-page[data-tool="clone"] .clone-ai-module-list button.is-active span, -.web-shell[data-ui-theme="dark-green"][data-view="ecommerce"] .product-clone-page:is([data-tool="set"], [data-tool="detail"], [data-tool="wear"]) :is( - .product-set-structure-grid button.is-active em, - .product-detail-module-grid button.is-active span -) { - color: rgba(232, 240, 235, 0.62); -} - -/* 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: - 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); - background-size: - auto, - auto, - 24px 24px, - 24px 24px, - auto; - color: var(--fg-body); -} - -.web-shell[data-ui-theme="dark-green"][data-view="canvas"] .studio-canvas-project-bar, -.web-shell[data-ui-theme="dark-green"][data-view="canvas"] .studio-canvas-zoom-controls { - border-color: rgba(255, 255, 255, 0.105); - background: - linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)), - rgba(17, 20, 21, 0.88); - box-shadow: - 0 16px 42px rgba(0, 0, 0, 0.26), - inset 0 1px 0 rgba(255, 255, 255, 0.04); - backdrop-filter: blur(16px); -} - -.web-shell[data-ui-theme="dark-green"][data-view="canvas"] .studio-canvas-project-bar { - min-height: 42px; - border-radius: 13px; -} - -.web-shell[data-ui-theme="dark-green"][data-view="canvas"] .studio-canvas-project-bar__name { - color: var(--fg-strong); - font-size: 13px; - font-weight: 820; -} - -.web-shell[data-ui-theme="dark-green"][data-view="canvas"] .studio-canvas-project-bar__status, -.web-shell[data-ui-theme="dark-green"][data-view="canvas"] .studio-canvas-project-bar__autosave-status { - color: var(--fg-muted); -} - -.web-shell[data-ui-theme="dark-green"][data-view="canvas"] .studio-canvas-project-bar :is( - .studio-canvas-project-bar__rename, - .studio-canvas-project-bar__recent, - .studio-canvas-project-bar__export, - .studio-canvas-project-bar__publish -) { - border-color: rgba(255, 255, 255, 0.095); - background: rgba(255, 255, 255, 0.035); - color: var(--fg-muted); - box-shadow: none; -} - -.web-shell[data-ui-theme="dark-green"][data-view="canvas"] .studio-canvas-project-bar :is( - .studio-canvas-project-bar__rename, - .studio-canvas-project-bar__recent, - .studio-canvas-project-bar__export, - .studio-canvas-project-bar__publish -):hover:not(:disabled) { - border-color: rgba(var(--accent-rgb), 0.34); - background: rgba(var(--accent-rgb), 0.08); - color: var(--accent); -} - -.web-shell[data-ui-theme="dark-green"][data-view="canvas"] .studio-canvas-project-bar__save { - border-color: rgba(var(--accent-rgb), 0.72); - background: var(--accent); - color: var(--dg-button-text); - box-shadow: 0 10px 24px rgba(var(--accent-rgb), 0.18); -} - -.web-shell[data-ui-theme="dark-green"][data-view="canvas"] .studio-canvas-zoom-controls { - gap: 3px; - padding: 5px; - border-radius: 14px; -} - -.web-shell[data-ui-theme="dark-green"][data-view="canvas"] .studio-canvas-zoom-controls button { - min-width: 32px; - height: 30px; - border-radius: 9px; - color: var(--fg-muted); -} - -.web-shell[data-ui-theme="dark-green"][data-view="canvas"] .studio-canvas-zoom-controls button:hover { - background: rgba(var(--accent-rgb), 0.1); - color: var(--accent); -} - -.web-shell[data-ui-theme="dark-green"][data-view="canvas"] .studio-canvas-zoom-controls__pct { - color: var(--fg-body) !important; - font-weight: 780; -} - -.web-shell[data-ui-theme="dark-green"][data-view="canvas"] .canvas-page :is( - .studio-canvas-text-node__card, - .studio-canvas-image-node__card, - .studio-canvas-video-node__preview -) { - border-color: rgba(255, 255, 255, 0.11); - border-radius: 14px; - background: - linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 54%), - rgba(17, 20, 21, 0.96); - box-shadow: - 0 18px 42px rgba(0, 0, 0, 0.22), - inset 0 1px 0 rgba(255, 255, 255, 0.03); -} - -.web-shell[data-ui-theme="dark-green"][data-view="canvas"] .canvas-page :is( - .studio-canvas-text-node.is-selected .studio-canvas-text-node__card, - .studio-canvas-image-node.is-selected .studio-canvas-image-node__card, - .studio-canvas-video-node.is-selected .studio-canvas-video-node__preview -) { - border-color: rgba(var(--accent-rgb), 0.72); - box-shadow: - 0 0 0 2px rgba(var(--accent-rgb), 0.28), - 0 20px 48px rgba(0, 0, 0, 0.28); -} - -.web-shell[data-ui-theme="dark-green"][data-view="canvas"] .canvas-page :is( - .studio-canvas-text-node__title, - .studio-canvas-image-node__title, - .studio-canvas-video-node__title -) { - gap: 7px; - color: rgba(232, 240, 235, 0.68) !important; - font-size: 12px; - font-weight: 760; -} - -.web-shell[data-ui-theme="dark-green"][data-view="canvas"] .canvas-page :is( - .studio-canvas-text-composer, - .studio-canvas-image-composer, - .studio-canvas-video-composer, - .studio-canvas-context-menu, - .studio-canvas-node-context-menu, - .studio-canvas-selection-context-menu, - .studio-canvas-add-node-menu, - .studio-canvas-save-asset__modal, - .studio-canvas-save-asset__cover-menu, - .studio-canvas-save-asset__select-menu, - .canvas-select-chip__dropdown -) { - border-color: rgba(255, 255, 255, 0.11); - border-radius: 14px; - background: - linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015)), - rgba(18, 21, 22, 0.96); - box-shadow: - 0 18px 46px rgba(0, 0, 0, 0.26), - inset 0 1px 0 rgba(255, 255, 255, 0.035); - backdrop-filter: blur(16px); -} - -.web-shell[data-ui-theme="dark-green"][data-view="canvas"] .canvas-page :is( - .studio-canvas-text-composer textarea, - .studio-canvas-image-composer textarea, - .studio-canvas-video-composer textarea, - .studio-canvas-text-node__inline-input -) { - color: var(--fg-body); - line-height: 1.55; -} - -.web-shell[data-ui-theme="dark-green"][data-view="canvas"] .canvas-page :is( - .studio-canvas-text-composer__footer button, - .studio-canvas-image-composer__footer button, - .studio-canvas-image-composer__tools button, - .studio-canvas-video-composer__tabs button, - .studio-canvas-video-composer__tools button, - .studio-canvas-video-composer__footer button, - .studio-canvas-context-menu button, - .studio-canvas-node-context-menu button, - .studio-canvas-selection-context-menu button, - .studio-canvas-add-node-menu button, - .studio-canvas-save-asset__head button, - .studio-canvas-save-asset__cover-menu button, - .studio-canvas-save-asset__select-menu button, - .studio-canvas-save-asset__existing-grid button, - .canvas-select-chip__trigger, - .canvas-select-chip__option -) { - border-color: rgba(255, 255, 255, 0.095) !important; - background: rgba(255, 255, 255, 0.035) !important; - color: var(--fg-body) !important; -} - -.web-shell[data-ui-theme="dark-green"][data-view="canvas"] .canvas-page :is( - .studio-canvas-text-composer__footer button:hover, - .studio-canvas-image-composer__footer button:hover, - .studio-canvas-image-composer__tools button:hover, - .studio-canvas-video-composer__tabs button:hover, - .studio-canvas-video-composer__tools button:hover, - .studio-canvas-video-composer__footer button:hover, - .studio-canvas-context-menu button:hover:not(:disabled), - .studio-canvas-node-context-menu button:hover:not(:disabled), - .studio-canvas-selection-context-menu button:hover:not(:disabled), - .studio-canvas-add-node-menu button:hover:not(:disabled), - .studio-canvas-save-asset__head button:hover, - .studio-canvas-save-asset__cover-menu button:hover, - .studio-canvas-save-asset__select-menu button:hover, - .studio-canvas-save-asset__existing-grid button:hover, - .canvas-select-chip__trigger:hover, - .canvas-select-chip__option:hover, - .canvas-select-chip__option.is-active -) { - border-color: rgba(var(--accent-rgb), 0.34) !important; - background: rgba(var(--accent-rgb), 0.085) !important; - color: var(--accent) !important; -} - -.web-shell[data-ui-theme="dark-green"][data-view="canvas"] .canvas-page :is( - .studio-canvas-text-composer__send, - .studio-canvas-image-composer__footer .studio-canvas-text-composer__send, - .studio-canvas-video-composer__footer > button:last-child, - .studio-canvas-save-asset__create -) { - border-color: rgba(var(--accent-rgb), 0.72) !important; - background: var(--accent) !important; - color: var(--dg-button-text) !important; - box-shadow: 0 10px 24px rgba(var(--accent-rgb), 0.18) !important; -} - -.web-shell[data-ui-theme="dark-green"][data-view="canvas"] .canvas-page .studio-canvas-generate-button:not(.is-ready) { - border-color: rgba(255, 255, 255, 0.075) !important; - background: rgba(255, 255, 255, 0.028) !important; - color: var(--fg-soft) !important; - box-shadow: none !important; -} - -.web-shell[data-ui-theme="dark-green"][data-view="canvas"] .canvas-page :is( - .studio-canvas-text-node__connector span, - .studio-canvas-image-node__connector span, - .studio-canvas-video-node__connector span, - .studio-canvas-text-node__glyph span -) { - border-color: rgba(255, 255, 255, 0.16); - background: rgba(255, 255, 255, 0.055); -} - -.web-shell[data-ui-theme="dark-green"][data-view="canvas"] .canvas-page :is( - .studio-canvas-text-node__connector:hover span, - .studio-canvas-image-node__connector:hover span, - .studio-canvas-video-node__connector:hover span -) { - border-color: rgba(var(--accent-rgb), 0.56); - background: rgba(var(--accent-rgb), 0.14); - color: var(--accent) !important; -} - -.web-shell[data-ui-theme="dark-green"][data-view="canvas"] .canvas-page .studio-canvas-node-links path { - stroke: rgba(var(--accent-rgb), 0.48); - stroke-width: 2; -} - -.web-shell[data-ui-theme="dark-green"][data-view="canvas"] .canvas-page .studio-canvas-node-links circle { - fill: var(--accent); - stroke: rgba(10, 14, 13, 0.95); -} - -.web-shell[data-ui-theme="dark-green"][data-view="canvas"] .canvas-page .studio-canvas-selection-box { - border-color: rgba(var(--accent-rgb), 0.72); - background: rgba(var(--accent-rgb), 0.11); -} - -.web-shell[data-ui-theme="dark-green"][data-view="canvas"] .canvas-page .studio-canvas-node-resize-handle { - border-color: rgba(var(--accent-rgb), 0.72); - background: var(--accent); - box-shadow: 0 8px 18px rgba(var(--accent-rgb), 0.18); -} - -@media (max-width: 900px) { - .web-shell[data-ui-theme="dark-green"][data-view="canvas"] .studio-canvas-project-bar { - top: 70px; - right: 12px; - left: 12px; - max-width: none; - overflow-x: auto; - } - - .web-shell[data-ui-theme="dark-green"][data-view="canvas"] .studio-canvas-zoom-controls { - bottom: 14px; - left: 12px; - } -} - -@media (max-width: 560px) { - .web-shell[data-ui-theme="dark-green"][data-view="canvas"] .studio-canvas-project-bar { - display: grid; - grid-template-columns: repeat(4, minmax(0, 1fr)); - align-items: center; - gap: 7px; - min-height: 82px; - padding: 8px; - } - - .web-shell[data-ui-theme="dark-green"][data-view="canvas"] .studio-canvas-project-bar__identity { - grid-column: 1 / 4; - max-width: none; - } - - .web-shell[data-ui-theme="dark-green"][data-view="canvas"] .studio-canvas-project-bar__status, - .web-shell[data-ui-theme="dark-green"][data-view="canvas"] .studio-canvas-project-bar__autosave-status { - display: none; - } - - .web-shell[data-ui-theme="dark-green"][data-view="canvas"] .studio-canvas-project-bar__rename { - grid-column: 4; - } - - .web-shell[data-ui-theme="dark-green"][data-view="canvas"] .studio-canvas-project-bar__recent { - grid-column: 1; - } - - .web-shell[data-ui-theme="dark-green"][data-view="canvas"] .studio-canvas-project-bar__export { - grid-column: 2; - } - - .web-shell[data-ui-theme="dark-green"][data-view="canvas"] .studio-canvas-project-bar__save { - grid-column: 3; - } - - .web-shell[data-ui-theme="dark-green"][data-view="canvas"] .studio-canvas-project-bar__publish { - grid-column: 4; - } - - .web-shell[data-ui-theme="dark-green"][data-view="canvas"] .studio-canvas-project-bar :is( - .studio-canvas-project-bar__rename, - .studio-canvas-project-bar__recent, - .studio-canvas-project-bar__export, - .studio-canvas-project-bar__save, - .studio-canvas-project-bar__publish - ) { - display: inline-flex; - align-items: center; - justify-content: center; - gap: 5px; - width: 100%; - min-width: 0; - min-height: 32px; - padding: 0 7px; - border-radius: 10px; - font-size: 11px; - font-weight: 780; - line-height: 1; - white-space: nowrap; - } - - .web-shell[data-ui-theme="dark-green"][data-view="canvas"] .studio-canvas-project-bar__rename::after { - content: "编辑"; - } - - .web-shell[data-ui-theme="dark-green"][data-view="canvas"] .studio-canvas-project-bar__recent span, - .web-shell[data-ui-theme="dark-green"][data-view="canvas"] .studio-canvas-project-bar__export span, - .web-shell[data-ui-theme="dark-green"][data-view="canvas"] .studio-canvas-project-bar__publish span, - .web-shell[data-ui-theme="dark-green"][data-view="canvas"] .studio-canvas-project-bar__save span { - display: inline; - } - - .web-shell[data-ui-theme="dark-green"][data-view="canvas"] .studio-canvas-project-bar__recent span, - .web-shell[data-ui-theme="dark-green"][data-view="canvas"] .studio-canvas-project-bar__export span, - .web-shell[data-ui-theme="dark-green"][data-view="canvas"] .studio-canvas-project-bar__publish span { - width: 0; - max-width: 0; - overflow: hidden; - font-size: 0; - opacity: 0; - pointer-events: none; - } - - .web-shell[data-ui-theme="dark-green"][data-view="canvas"] .studio-canvas-project-bar__recent::after { - font-size: 11px; - content: "最近"; - } - - .web-shell[data-ui-theme="dark-green"][data-view="canvas"] .studio-canvas-project-bar__export::after { - font-size: 11px; - content: "导出"; - } - - .web-shell[data-ui-theme="dark-green"][data-view="canvas"] .studio-canvas-project-bar__publish::after { - font-size: 11px; - content: "提交"; - } - - .web-shell[data-ui-theme="dark-green"][data-view="canvas"] .studio-canvas-project-bar__recent em { - display: inline-flex; - min-width: 16px; - height: 16px; - align-items: center; - justify-content: center; - padding: 0 4px; - border-radius: 999px; - background: rgba(var(--accent-rgb), 0.16); - color: var(--accent); - font-size: 10px; - } -}