{task.title} - {task.type} + {formatTaskType(task.type)} {task.prompt} - {task.status} - {task.createdAt} + {formatTaskStatus(task.status)} + {formatProfileDate(task.createdAt)}
{project.name} - {project.updatedAt} + {formatProfileDate(project.updatedAt)} {onDeleteProject ? ( {asset.name} - {asset.status} + {formatAssetStatus(asset.status)} {asset.description} {asset.type} - {asset.updatedAt} + {formatProfileDate(asset.updatedAt)} ))} @@ -587,15 +739,39 @@ function ProfilePage({ {displayName} - setProfileBio(event.target.value)} - onBlur={handleBioBlur} - placeholder={displayedBio} - rows={2} - maxLength={80} - /> + {isBioEditing ? ( + + setProfileBio(event.target.value)} + placeholder="填写一句个人签名" + rows={2} + maxLength={80} + autoFocus + /> + + + + 保存 + + + + 取消 + + + + ) : ( + + {displayedBio} + + + )} + {bioStatusNotice ? {bioStatusNotice} : null} {profileNotice ? {profileNotice} : null}
+ {String(index + 1).padStart(2, "0")} {card.label} {card.value} {card.hint} @@ -283,7 +281,7 @@ function TokenUsagePage({ 模型消耗分布 - {modelBreakdown.length ? `${modelBreakdown.length} 个模型` : "LIVE"} + {enterpriseUsageLoading ? "SYNC" : modelBreakdown.length ? `${modelBreakdown.length} 个模型` : "LIVE"}
- 系统状态 + + + 系统状态 + {systemStatus.map((item) => ( @@ -364,7 +365,10 @@ function TokenUsagePage({ - 调用记录 + + + 调用记录 + {records.length} 条记录 diff --git a/src/features/workbench/WorkbenchPage.tsx b/src/features/workbench/WorkbenchPage.tsx index 9777ba8..fcb8529 100644 --- a/src/features/workbench/WorkbenchPage.tsx +++ b/src/features/workbench/WorkbenchPage.tsx @@ -41,6 +41,7 @@ import { preUploadReference, resolvePreUploadedUrl } from "../../api/referenceUp import { assetClient } from "../../api/assetClient"; import { communityClient } from "../../api/communityClient"; import { RechargeModal } from "../../components/RechargeModal/RechargeModal"; +import { useGenerationTasks } from "../../hooks/useGenerationTasks"; import { conversationClient, type ConversationSummary } from "../../api/conversationClient"; import { modelCapabilitiesClient } from "../../api/modelCapabilitiesClient"; @@ -236,8 +237,10 @@ function WorkbenchPage({ const keepaliveTasksRef = useRef>(readStoredKeepaliveTasks()); const taskAbortControllersRef = useRef>(new Map()); const lastScrollTopRef = useRef(0); + const scrollActionsHideTimerRef = useRef(null); const shouldFollowNewMessagesRef = useRef(true); const pendingScrollToLatestRef = useRef(true); + const genTracker = useGenerationTasks({ sourceView: "workbench" }); const renderedMessageIdsRef = useRef([]); const hasHandledInitialMessagesRef = useRef(false); @@ -273,6 +276,8 @@ 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(() => { @@ -441,6 +446,27 @@ 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; @@ -451,6 +477,7 @@ function WorkbenchPage({ setComposerHidden(false); shouldFollowNewMessagesRef.current = true; + revealScrollActionsTemporarily("bottom"); surface.scrollTo({ top: surface.scrollHeight, behavior }); lastScrollTopRef.current = surface.scrollTop; }; @@ -459,7 +486,7 @@ function WorkbenchPage({ scroll(); window.setTimeout(scroll, 80); }); - }, []); + }, [revealScrollActionsTemporarily]); const imageSettingGroups = useMemo( () => [ @@ -1373,6 +1400,9 @@ 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); @@ -1384,7 +1414,7 @@ function WorkbenchPage({ surface.addEventListener("scroll", handleScroll, { passive: true }); return () => surface.removeEventListener("scroll", handleScroll); - }, [hasActivatedWorkspace]); + }, [hasActivatedWorkspace, revealScrollActionsTemporarily]); const scrollMessagesSurface = useCallback((direction: "top" | "bottom") => { const surface = messagesSurfaceRef.current; @@ -1392,8 +1422,9 @@ 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) => { @@ -1851,6 +1882,7 @@ function WorkbenchPage({ referenceUrls: refUrls.length ? refUrls : undefined, }); taskId = result.taskId; + genTracker.submitTask({ title: trimmedPrompt.slice(0, 60), type: "image", status: "running", progress: 5, prompt: trimmedPrompt, sourceView: "workbench", taskId }); } else { let requestModel = resolveVideoRequestModel({ model: taskInput.params?.model || ENTERPRISE_DEFAULT_VIDEO_MODEL, @@ -1870,6 +1902,7 @@ function WorkbenchPage({ hasReferenceVideo: requestReferenceItems.some((item) => item.kind === "video"), }); taskId = result.taskId; + genTracker.submitTask({ title: trimmedPrompt.slice(0, 60), type: "video", status: "running", progress: 5, prompt: trimmedPrompt, sourceView: "workbench", taskId }); } onRefreshUsage?.(); @@ -3022,10 +3055,13 @@ function WorkbenchPage({ {renderComposerToolbar(false, isGenerating)} - + scrollMessagesSurface("top")} @@ -3034,7 +3070,7 @@ function WorkbenchPage({ scrollMessagesSurface("bottom")} diff --git a/src/stores/index.ts b/src/stores/index.ts index 7c3ef7b..85cae04 100644 --- a/src/stores/index.ts +++ b/src/stores/index.ts @@ -3,6 +3,8 @@ export { useSessionStore } from './useSessionStore'; export { useProjectStore } from './useProjectStore'; export { useTaskStore } from './useTaskStore'; export { useAppStore } from './useAppStore'; +export { useGenerationStore } from './useGenerationStore'; +export type { GenerationQueueItem, QueueItemStatus } from './useGenerationStore'; // Type exports export type { PendingAction } from './useSessionStore'; diff --git a/src/styles/components/recharge-modal.css b/src/styles/components/recharge-modal.css index 94e1bdc..593813f 100644 --- a/src/styles/components/recharge-modal.css +++ b/src/styles/components/recharge-modal.css @@ -365,11 +365,113 @@ line-height: 1.55; } +.recharge-modal__checkout { + display: grid; + gap: 14px; + border: 1px solid rgba(var(--accent-rgb), 0.26); + border-radius: 14px; + background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.12), rgba(var(--accent-rgb), 0.05)); + padding: 18px; +} + +.recharge-modal__checkout-eyebrow { + color: var(--accent, #34d399); + font-size: 12px; + font-weight: 900; +} + +.recharge-modal__checkout h3, +.recharge-modal__checkout p { + margin: 0; +} + +.recharge-modal__checkout h3 { + margin-top: 4px; + color: var(--fg-body, #edf2f7); + font-size: 18px; +} + +.recharge-modal__checkout p { + color: var(--fg-muted, #9ba7b7); + font-size: 13px; + line-height: 1.6; +} + +.recharge-modal__payment-methods { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 10px; +} + +.recharge-modal__payment-methods button { + display: grid; + gap: 5px; + min-height: 68px; + padding: 12px; + border: 1px solid var(--border-subtle, rgb(255 255 255 / 10%)); + border-radius: 12px; + background: var(--bg-inset, rgb(0 0 0 / 18%)); + color: var(--fg-body, #edf2f7); + cursor: pointer; + text-align: left; +} + +.recharge-modal__payment-methods button.is-active { + border-color: rgba(var(--accent-rgb), 0.56); + background: rgba(var(--accent-rgb), 0.14); +} + +.recharge-modal__payment-methods span { + color: var(--fg-muted, #9ba7b7); + font-size: 12px; +} + +.recharge-modal__pay { + min-height: 42px; + border: 0; + border-radius: 12px; + background: var(--accent, #34d399); + color: #07110d; + cursor: pointer; + font-weight: 950; +} + +.recharge-modal__pay:disabled { + cursor: wait; + opacity: 0.7; +} + +.recharge-modal__order { + display: grid; + gap: 8px; + padding: 12px; + border: 1px solid var(--border-subtle, rgb(255 255 255 / 10%)); + border-radius: 12px; + background: var(--bg-inset, rgb(0 0 0 / 18%)); + color: var(--fg-muted, #9ba7b7); + font-size: 13px; +} + +.recharge-modal__order strong, +.recharge-modal__order a { + color: var(--accent, #34d399); +} + +.recharge-modal__order img { + width: 160px; + max-width: 100%; + border-radius: 10px; +} + @media (max-width: 980px) { .recharge-modal__grid[data-audience="personal"], .recharge-modal__grid[data-audience="enterprise"] { grid-template-columns: 1fr; } + + .recharge-modal__payment-methods { + grid-template-columns: 1fr; + } } @media (max-width: 640px) { diff --git a/src/styles/index.css b/src/styles/index.css index 781f5ab..e46fa73 100644 --- a/src/styles/index.css +++ b/src/styles/index.css @@ -29,6 +29,7 @@ @import "./pages/compliance.css"; @import "./pages/provider-health.css"; @import "./pages/legacy-pages.css"; +@import "./pages/not-found.css"; @import "./components/recharge-modal.css"; @import "./components/dropzone.css"; @import "./components/skeleton.css"; diff --git a/src/styles/pages/assets.css b/src/styles/pages/assets.css index 9c3fd3e..2ed2c44 100644 --- a/src/styles/pages/assets.css +++ b/src/styles/pages/assets.css @@ -189,6 +189,40 @@ cursor: zoom-in; } +.asset-card-wrapper { + position: relative; + display: inline-block; +} + +.asset-card__delete { + position: absolute; + top: 6px; + right: 6px; + z-index: 2; + display: none; + align-items: center; + justify-content: center; + width: 28px; + height: 28px; + border: 0; + border-radius: 6px; + background: var(--bg-panel); + color: var(--fg-muted); + cursor: pointer; + font-size: 14px; + opacity: 0.85; + transition: opacity 150ms, color 150ms; +} + +.asset-card-wrapper:hover .asset-card__delete { + display: flex; +} + +.asset-card__delete:hover { + opacity: 1; + color: var(--fg-danger); +} + @media (max-width: 720px) { .asset-preview-modal { padding: 14px; diff --git a/src/styles/pages/compliance.css b/src/styles/pages/compliance.css index cf51f51..ab3e1f3 100644 --- a/src/styles/pages/compliance.css +++ b/src/styles/pages/compliance.css @@ -725,9 +725,110 @@ font-size: 42px; } +.compliance-page { + min-height: 100%; + background: #0d0d0f; + color: var(--fg-body); +} + +.compliance-page__inner { + width: min(940px, calc(100% - 48px)); + margin: 0 auto; + padding: 40px 0 56px; +} + +.compliance-hero { + display: flex; + align-items: flex-start; + gap: 16px; + margin-bottom: 18px; +} + +.compliance-hero__icon { + display: grid; + place-items: center; + flex: 0 0 54px; + width: 54px; + height: 54px; + border: 1px solid rgba(var(--accent-rgb), 0.28); + border-radius: 16px; + background: rgba(var(--accent-rgb), 0.12); + color: var(--accent); + font-size: 24px; +} + +.compliance-hero__eyebrow { + color: var(--accent); + font-size: 12px; + font-weight: 900; +} + +.compliance-hero h1 { + margin: 4px 0 8px; + font-size: clamp(26px, 4vw, 38px); +} + +.compliance-hero p, +.compliance-section p, +.compliance-contact span { + color: var(--fg-muted); + line-height: 1.7; +} + +.compliance-card, +.compliance-contact { + border: 1px solid var(--border-subtle); + border-radius: 18px; + background: var(--bg-panel); + box-shadow: var(--shadow-tight); +} + +.compliance-card { + display: grid; + overflow: hidden; +} + +.compliance-section { + display: grid; + grid-template-columns: 52px minmax(0, 1fr); + gap: 16px; + padding: 22px; + border-bottom: 1px solid var(--border-weak); +} + +.compliance-section:last-child { + border-bottom: 0; +} + +.compliance-section > span { + color: var(--accent); + font-size: 13px; + font-weight: 950; +} + +.compliance-section h2, +.compliance-section p { + margin: 0; +} + +.compliance-section h2 { + margin-bottom: 8px; + font-size: 18px; +} + +.compliance-contact { + display: flex; + flex-wrap: wrap; + gap: 10px 16px; + margin-top: 16px; + padding: 16px 18px; + font-size: 13px; +} + @media (max-width: 900px) { .community-review-page__inner, - .report-page__inner { + .report-page__inner, + .compliance-page__inner { width: min(100% - 28px, 720px); padding-top: 24px; } @@ -786,4 +887,9 @@ display: grid; grid-template-columns: 1fr 1fr; } + + .compliance-hero, + .compliance-section { + grid-template-columns: 1fr; + } } diff --git a/src/styles/pages/ecommerce.css b/src/styles/pages/ecommerce.css index a56e61b..aef9845 100644 --- a/src/styles/pages/ecommerce.css +++ b/src/styles/pages/ecommerce.css @@ -2809,6 +2809,26 @@ line-height: 1.6; } +.clone-ai-retry-btn { + display: inline-flex; + align-items: center; + gap: 8px; + min-height: 40px; + padding: 0 20px; + border: 1px solid rgba(var(--accent-rgb), 0.32); + border-radius: 12px; + background: rgba(var(--accent-rgb), 0.12); + color: var(--accent); + font-weight: 900; + cursor: pointer; + transition: background 0.15s, transform 0.15s; +} + +.clone-ai-retry-btn:hover { + background: rgba(var(--accent-rgb), 0.22); + transform: translateY(-1px); +} + .product-clone-page[data-tool="clone"] .clone-ai-preview-showcase { display: grid; grid-template-columns: minmax(210px, 300px) 54px minmax(330px, 560px); @@ -8061,4 +8081,889 @@ .ecommerce-template-apple-carousel.is-resetting .ecommerce-template-apple-card, .ecommerce-template-apple-carousel.is-resetting .ecommerce-template-apple-card img { transition: none; +.clone-ai-video-outfit-upload { + display: flex; + align-items: center; + gap: 10px; + margin-top: 6px; +} + +.clone-ai-video-outfit-upload-btn { + padding: 7px 16px; + border: 1px solid var(--border-subtle); + border-radius: 8px; + background: var(--bg-inset); + color: var(--fg-body); + font-size: 13px; + cursor: pointer; + transition: border-color 150ms, background 150ms; +} + +.clone-ai-video-outfit-upload-btn:hover { + border-color: var(--border-default); + background: var(--bg-hover); +} + +.clone-ai-video-outfit-info { + 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 a42520a..65882af 100644 --- a/src/styles/pages/home.css +++ b/src/styles/pages/home.css @@ -148,37 +148,83 @@ min-width: 0; min-height: 72px; padding: 0 28px; - border: 1px solid var(--border-subtle); - border-radius: 8px; - background: var(--bg-inset); + 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); color: var(--fg-body); cursor: pointer; - font-size: 17px; - font-weight: 850; - transition: border-color 160ms ease, background 160ms ease, color 160ms ease, transform 160ms ease; + 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; } .omni-home__entry .anticon { - font-size: 18px; + font-size: 19px; + transition: color 240ms ease, transform 240ms ease; } .omni-home__entry:hover { - border-color: var(--border-default); - background: var(--bg-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); color: #ffffff; - transform: translateY(-1px); + 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; } .omni-home__entry--primary { - border-color: var(--accent); - background: var(--accent); - color: var(--dg-button-text, #061014); + 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; } .omni-home__entry--primary:hover { - border-color: var(--accent-hover, var(--accent)); - background: var(--accent-hover, var(--accent)); - color: var(--dg-button-text, #061014); + 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); } .omni-home__carousel { diff --git a/src/styles/pages/not-found.css b/src/styles/pages/not-found.css new file mode 100644 index 0000000..e704183 --- /dev/null +++ b/src/styles/pages/not-found.css @@ -0,0 +1,56 @@ +.not-found-page { + display: flex; + align-items: center; + justify-content: center; + min-height: calc(100vh - 60px); + padding: 48px 24px; + background: var(--app-bg, #0b0b0f); +} + +.not-found-page__content { + text-align: center; + max-width: 420px; +} + +.not-found-page__code { + font-size: 96px; + font-weight: 800; + line-height: 1; + letter-spacing: -0.03em; + color: var(--accent-teal, #2dd4bf); + margin-bottom: 12px; +} + +.not-found-page h1 { + font-size: 22px; + font-weight: 600; + color: var(--text-primary, #f1f5f9); + margin: 0 0 8px; +} + +.not-found-page p { + font-size: 14px; + color: var(--text-secondary, #94a3b8); + margin: 0 0 28px; + line-height: 1.6; +} + +.not-found-page__button { + display: inline-flex; + align-items: center; + gap: 8px; + padding: 10px 24px; + border: 1px solid var(--border-default, #334155); + border-radius: 8px; + background: var(--surface-elevated, #1e293b); + color: var(--text-primary, #f1f5f9); + font-size: 14px; + font-weight: 500; + cursor: pointer; + transition: background 0.2s, border-color 0.2s; +} + +.not-found-page__button:hover { + background: var(--surface-hover, #334155); + border-color: var(--accent-teal, #2dd4bf); +} diff --git a/src/styles/pages/script-tokens-v5.css b/src/styles/pages/script-tokens-v5.css index f07be33..932c360 100644 --- a/src/styles/pages/script-tokens-v5.css +++ b/src/styles/pages/script-tokens-v5.css @@ -2649,3 +2649,775 @@ 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 1871f51..3fdc2d0 100644 --- a/src/styles/pages/script-tokens.css +++ b/src/styles/pages/script-tokens.css @@ -3400,6 +3400,7 @@ width: 100%; height: 100%; min-height: 520px; + max-height: 520px; padding: 18px 22px; border: none; outline: none; @@ -3409,6 +3410,7 @@ font-size: 14px; line-height: 1.9; resize: none; + overflow-y: auto; } .script-eval-v4-text-input::placeholder { @@ -4268,6 +4270,11 @@ .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 { @@ -5370,3 +5377,559 @@ 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/shell/app-shell.css b/src/styles/shell/app-shell.css index da19b01..78610a9 100644 --- a/src/styles/shell/app-shell.css +++ b/src/styles/shell/app-shell.css @@ -826,3 +826,149 @@ border-color: var(--accent); color: var(--accent); } + +.cookie-consent { + position: fixed; + right: 18px; + bottom: 18px; + z-index: 1300; + display: grid; + grid-template-columns: minmax(0, 1fr) auto; + gap: 16px; + width: min(640px, calc(100vw - 36px)); + padding: 16px; + border: 1px solid rgba(var(--accent-rgb), 0.28); + border-radius: 16px; + background: var(--bg-panel); + color: var(--fg-body); + box-shadow: 0 18px 54px rgba(0, 0, 0, 0.34); +} + +.cookie-consent strong, +.cookie-consent p { + margin: 0; +} + +.cookie-consent p { + margin-top: 5px; + color: var(--fg-muted); + font-size: 13px; + line-height: 1.55; +} + +.cookie-consent__actions { + display: flex; + align-items: center; + gap: 10px; +} + +.cookie-consent__actions a, +.cookie-consent__actions button { + display: inline-flex; + align-items: center; + justify-content: center; + min-height: 36px; + padding: 0 12px; + border-radius: 999px; + font-size: 12px; + font-weight: 900; + white-space: nowrap; +} + +.cookie-consent__actions a { + color: var(--accent); + text-decoration: none; +} + +.cookie-consent__actions button { + border: 0; + background: var(--accent); + color: #07100b; + cursor: pointer; +} + +@media (max-width: 900px) { + .web-shell { + overflow: hidden; + } + + .web-topbar { + flex: 0 0 auto; + gap: 10px; + padding: 10px 12px; + } + + .brand-lockup__tone, + .profile-button span:not(.profile-button__avatar), + .member-button__label { + display: none; + } + + .web-topbar__actions { + gap: 6px; + } + + .member-button, + .profile-button, + .info-button { + width: 36px; + padding: 0; + } + + .floating-nav { + left: 50%; + top: auto; + bottom: max(10px, env(safe-area-inset-bottom)); + flex-direction: row; + width: min(calc(100vw - 20px), 560px); + overflow-x: auto; + justify-content: flex-start; + border-radius: 18px; + transform: translateX(-50%); + scrollbar-width: none; + } + + .floating-nav::-webkit-scrollbar { + display: none; + } + + .floating-nav__item { + flex: 0 0 44px; + } + + .floating-nav__label, + .floating-nav__submenu, + .floating-page-scroll-actions { + display: none; + } + + .web-shell__page { + padding-bottom: 78px; + } + + .info-popover, + .profile-popover { + right: -8px; + max-width: calc(100vw - 24px); + } +} + +@media (max-width: 640px) { + .brand-lockup__name { + font-size: 14px; + } + + .web-topbar__actions { + flex: 1; + } + + .cookie-consent { + right: 12px; + bottom: 12px; + grid-template-columns: 1fr; + } + + .cookie-consent__actions { + justify-content: space-between; + } +} diff --git a/src/styles/themes/dark-green.css b/src/styles/themes/dark-green.css index 24ae5b1..8517e96 100644 --- a/src/styles/themes/dark-green.css +++ b/src/styles/themes/dark-green.css @@ -3373,6 +3373,403 @@ 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; @@ -3782,21 +4179,12 @@ .web-shell[data-ui-theme="dark-green"] .community-page .project-card:not(.project-card--new) > .project-card__empty--dark { display: grid; place-items: center; - background: #202020; - color: rgba(255, 255, 255, 0.22); + background: var(--bg-inset, transparent); + color: rgba(255, 255, 255, 0.14); } .web-shell[data-ui-theme="dark-green"] .community-page .project-card:not(.project-card--new) > .project-card__empty--dark .anticon { - font-size: 34px; -} - -.web-shell[data-ui-theme="dark-green"] .community-page .project-card:not(.project-card--new)::after { - content: ""; - grid-area: 1 / 1; - align-self: end; - height: 58%; - background: rgba(0, 0, 0, 0.86); - pointer-events: none; + font-size: 40px; } .web-shell[data-ui-theme="dark-green"] .community-page .project-card:not(.project-card--new) .project-card__caption, @@ -3812,18 +4200,35 @@ padding-block: 0; background: none; color: rgba(255, 255, 255, 0.78); + text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); + opacity: 0; + transform: translateY(8px); + transition: opacity 220ms ease, transform 220ms ease; + pointer-events: none; +} + +.web-shell[data-ui-theme="dark-green"] .community-page .project-card:not(.project-card--new):hover .project-card__caption { opacity: 1; - transform: none; + transform: translateY(0); } .web-shell[data-ui-theme="dark-green"] .community-page .project-card:not(.project-card--new) .project-card__meta { align-self: end; padding-block: 0 16px; + opacity: 0; + transform: translateY(8px); + transition: opacity 220ms ease, transform 220ms ease; +} + +.web-shell[data-ui-theme="dark-green"] .community-page .project-card:not(.project-card--new):hover .project-card__meta { + opacity: 1; + transform: translateY(0); } .web-shell[data-ui-theme="dark-green"] .community-page .project-card:not(.project-card--new) .project-card__meta strong { color: #fff; font-size: 15px; + text-shadow: 0 1px 6px rgba(0, 0, 0, 0.72); } .web-shell[data-ui-theme="dark-green"] .community-filter-bar { @@ -4909,6 +5314,283 @@ 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; @@ -5394,6 +6076,787 @@ 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 { @@ -6398,21 +7861,43 @@ @media (max-width: 900px) { .web-shell[data-ui-theme="dark-green"] .auth-page { grid-template-columns: 1fr; - grid-template-rows: 200px 1fr; + grid-template-rows: 180px minmax(0, 1fr); + overflow-y: auto; } .web-shell[data-ui-theme="dark-green"] .auth-page__form-panel { - padding: 24px 20px; + align-items: flex-start; + padding: 22px 20px 36px; 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: 32px; + font-size: 34px; } .web-shell[data-ui-theme="dark-green"] .auth-page__tagline { - font-size: 16px; + 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; } .web-shell[data-ui-theme="dark-green"] .profile-page__body { @@ -6422,9 +7907,82 @@ } @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(2, minmax(0, 1fr)); + 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; } .web-shell[data-ui-theme="dark-green"] .profile-page__body { @@ -6667,3 +8225,1135 @@ 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; + } +} diff --git a/src/types.ts b/src/types.ts index 5eb1580..67555b0 100644 --- a/src/types.ts +++ b/src/types.ts @@ -14,7 +14,6 @@ export type WebViewKey = | "sizeTemplate" | "scriptTokens" | "tokenUsage" - | "settings" | "imageWorkbench" | "resolutionUpscale" | "digitalHuman" @@ -26,7 +25,10 @@ export type WebViewKey = | "communityReview" | "communityCaseAdd" | "report" - | "providerHealth"; + | "providerHealth" + | "userAgreement" + | "privacyPolicy" + | "not-found"; export type WebImageWorkbenchTool = "workbench" | "inpaint" | "camera"; diff --git a/src/utils/errorReporting.ts b/src/utils/errorReporting.ts index fb62355..3f2ec52 100644 --- a/src/utils/errorReporting.ts +++ b/src/utils/errorReporting.ts @@ -1,4 +1,5 @@ const ERROR_REPORT_ENDPOINT = "/api/client-errors"; +const CLIENT_ERROR_REPORTING_ENABLED = import.meta.env.VITE_ENABLE_CLIENT_ERROR_REPORTING === "1"; interface ErrorReport { message: string; @@ -44,6 +45,8 @@ function scheduleFlush() { } export function reportError(error: unknown, source: ErrorReport["source"] = "manual") { + if (!CLIENT_ERROR_REPORTING_ENABLED) return; + const err = error instanceof Error ? error : new Error(String(error)); const report: ErrorReport = { message: err.message,