Initial commit: OmniAI Web Frontend
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,373 @@
|
||||
/* Local preview theme parity: scoped to ecommerce/template pages, colors and border tones only. */
|
||||
|
||||
.product-clone-page[data-tool="clone"] {
|
||||
background: var(--bg-base);
|
||||
color: var(--fg-body);
|
||||
}
|
||||
|
||||
.product-clone-page[data-tool="clone"] > .product-clone-shell,
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-preview {
|
||||
background: var(--bg-base);
|
||||
}
|
||||
|
||||
.product-clone-page[data-tool="clone"] .product-clone-panel,
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-panel::-webkit-scrollbar-track {
|
||||
background: var(--bg-panel);
|
||||
}
|
||||
|
||||
.product-clone-page[data-tool="clone"] .product-clone-panel,
|
||||
.product-clone-page[data-tool="clone"] :is(
|
||||
.clone-ai-logo,
|
||||
.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,
|
||||
.clone-ai-empty-state .anticon,
|
||||
.clone-ai-main-result,
|
||||
.clone-ai-result-grid button,
|
||||
.clone-ai-input-wrapper
|
||||
) {
|
||||
border-color: var(--border-weak);
|
||||
}
|
||||
|
||||
.product-clone-page[data-tool="clone"] :is(
|
||||
.clone-ai-logo,
|
||||
.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,
|
||||
.clone-ai-empty-state .anticon,
|
||||
.clone-ai-main-result,
|
||||
.clone-ai-result-grid button,
|
||||
.clone-ai-input-wrapper
|
||||
) {
|
||||
background: var(--bg-panel);
|
||||
}
|
||||
|
||||
.product-clone-page[data-tool="clone"] :is(
|
||||
.clone-ai-logo em,
|
||||
.clone-ai-upload-zone,
|
||||
.clone-ai-upload-icon,
|
||||
.clone-ai-uploaded-file,
|
||||
.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-link input,
|
||||
.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,
|
||||
.clone-ai-video-smart i,
|
||||
.clone-ai-send-button
|
||||
) {
|
||||
border-color: var(--border-subtle);
|
||||
background: var(--bg-inset);
|
||||
color: var(--fg-muted);
|
||||
}
|
||||
|
||||
.product-clone-page[data-tool="clone"] :is(
|
||||
.clone-ai-upload-zone:hover,
|
||||
.clone-ai-upload-zone.is-dragging,
|
||||
.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-basic-select__menu button.is-active,
|
||||
.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-model-select__menu button.is-active,
|
||||
.clone-ai-video-options button:hover,
|
||||
.clone-ai-video-smart:hover,
|
||||
.clone-ai-send-button:hover:not(:disabled),
|
||||
.clone-ai-main-result:hover,
|
||||
.clone-ai-result-grid button:hover
|
||||
) {
|
||||
border-color: var(--border-default);
|
||||
background: var(--bg-hover);
|
||||
color: var(--fg-body);
|
||||
}
|
||||
|
||||
.product-clone-page[data-tool="clone"] :is(
|
||||
.clone-ai-logo em.is-ready,
|
||||
.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(--accent-rgb), 0.42);
|
||||
background: var(--accent-muted);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.product-clone-page[data-tool="clone"] :is(
|
||||
.clone-ai-logo strong,
|
||||
.clone-ai-card h2,
|
||||
.clone-ai-platform-spec strong,
|
||||
.clone-ai-basic-select > button strong,
|
||||
.clone-ai-model-select > button strong,
|
||||
.clone-ai-preview-header strong,
|
||||
.clone-ai-empty-state strong,
|
||||
.clone-ai-input-wrapper textarea
|
||||
) {
|
||||
color: var(--fg-body);
|
||||
}
|
||||
|
||||
.product-clone-page[data-tool="clone"] :is(
|
||||
.clone-ai-logo em,
|
||||
.clone-ai-card h2 .anticon,
|
||||
.clone-ai-upload-title,
|
||||
.clone-ai-upload-hint,
|
||||
.clone-ai-settings-label,
|
||||
.clone-ai-basic-select > button span,
|
||||
.clone-ai-model-select > button span,
|
||||
.clone-ai-preview-header span,
|
||||
.clone-ai-empty-state,
|
||||
.clone-ai-empty-state span,
|
||||
.clone-ai-char-count,
|
||||
.clone-ai-input-wrapper textarea::placeholder
|
||||
) {
|
||||
color: var(--fg-muted);
|
||||
}
|
||||
|
||||
.product-clone-page[data-tool="clone"] :is(
|
||||
.clone-ai-logo__mark,
|
||||
.clone-ai-upload-zone strong,
|
||||
.clone-ai-generate,
|
||||
.clone-ai-send-button
|
||||
) {
|
||||
background: var(--accent);
|
||||
color: var(--dg-button-text, #061014);
|
||||
}
|
||||
|
||||
.product-clone-page[data-tool="clone"] :is(
|
||||
.clone-ai-logo strong span,
|
||||
.clone-ai-upload-icon,
|
||||
.clone-ai-preview-header b,
|
||||
.clone-ai-video-smart.is-on i::after
|
||||
) {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.product-clone-page[data-tool="clone"] :is(
|
||||
.clone-ai-generate:disabled,
|
||||
.clone-ai-send-button:disabled
|
||||
) {
|
||||
background: var(--bg-inset);
|
||||
color: var(--fg-soft);
|
||||
}
|
||||
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-flow-arrow {
|
||||
background: var(--accent);
|
||||
}
|
||||
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-video-smart.is-on i {
|
||||
border-color: rgba(var(--accent-rgb), 0.42);
|
||||
background: var(--accent-muted);
|
||||
}
|
||||
|
||||
.product-clone-page[data-tool="clone"] .clone-ai-settings-toggle {
|
||||
border-color: var(--border-default);
|
||||
background: var(--bg-panel);
|
||||
color: var(--fg-muted);
|
||||
}
|
||||
|
||||
.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(--accent-rgb), 0.42);
|
||||
background: var(--bg-hover);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.size-template-workbench {
|
||||
--size-green: var(--accent);
|
||||
--size-cyan: var(--accent);
|
||||
--size-violet: var(--accent);
|
||||
--size-amber: var(--accent);
|
||||
}
|
||||
|
||||
.size-template-workbench .product-clone-panel,
|
||||
.size-template-workbench :is(
|
||||
.size-template-upload-card,
|
||||
.size-template-generate-card,
|
||||
.size-template-platform-dialog,
|
||||
.size-template-main-frame,
|
||||
.size-template-spec-grid,
|
||||
.size-template-preview-note,
|
||||
.size-template-empty-state__image
|
||||
) {
|
||||
border-color: var(--border-weak);
|
||||
background: var(--bg-panel);
|
||||
color: var(--fg-body);
|
||||
}
|
||||
|
||||
.size-template-workbench :is(.size-template-detail-card span, .size-template-check-list span) {
|
||||
border-color: var(--border-subtle);
|
||||
background: var(--bg-inset);
|
||||
color: var(--fg-muted);
|
||||
}
|
||||
|
||||
.size-template-workbench :is(
|
||||
.size-template-upload-card h2,
|
||||
.size-template-generate-card h2,
|
||||
.size-template-main-frame span,
|
||||
.size-template-spec-grid b,
|
||||
.size-template-preview-note > div:first-child
|
||||
) {
|
||||
color: var(--fg-body);
|
||||
}
|
||||
|
||||
.size-template-workbench :is(.size-template-platform-dialog button, .size-template-preview-note p) {
|
||||
color: var(--fg-muted);
|
||||
}
|
||||
|
||||
.size-template-workbench :is(
|
||||
.size-template-static-field.is-clickable > button:hover,
|
||||
.size-template-static-field.is-clickable > button[aria-expanded="true"],
|
||||
.size-template-platform-dialog button:hover,
|
||||
.size-template-platform-dialog button.is-active
|
||||
) {
|
||||
border-color: var(--border-default);
|
||||
background: var(--bg-hover);
|
||||
color: var(--fg-body);
|
||||
}
|
||||
|
||||
.size-template-workbench :is(
|
||||
.size-template-preview-note > div:first-child .anticon,
|
||||
.size-template-check-list .anticon
|
||||
) {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .omni-commerce-page {
|
||||
--commerce-accent: var(--accent);
|
||||
--commerce-accent-strong: var(--accent);
|
||||
--commerce-accent-rgb: var(--accent-rgb);
|
||||
--commerce-ink: var(--fg-body);
|
||||
--commerce-muted: var(--fg-muted);
|
||||
--commerce-line: var(--border-subtle);
|
||||
--commerce-panel: var(--bg-panel);
|
||||
--commerce-soft: var(--bg-inset);
|
||||
background: var(--bg-base);
|
||||
color: var(--fg-body);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .omni-commerce-page :is(
|
||||
.omni-commerce-panel,
|
||||
.omni-commerce-band,
|
||||
.omni-commerce-flow-head,
|
||||
.omni-commerce-template,
|
||||
.omni-commerce-project
|
||||
) {
|
||||
border-color: var(--border-weak);
|
||||
background: var(--bg-panel);
|
||||
color: var(--fg-body);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .omni-commerce-page :is(
|
||||
.omni-commerce-ghost-action,
|
||||
.omni-commerce-text-button,
|
||||
.omni-commerce-segmented button,
|
||||
.omni-commerce-ratio-grid button,
|
||||
.omni-commerce-filter button,
|
||||
.omni-commerce-flow-head button,
|
||||
.omni-commerce-template em,
|
||||
.omni-commerce-search,
|
||||
.omni-commerce-project__delete
|
||||
) {
|
||||
border-color: var(--border-subtle);
|
||||
background: var(--bg-inset);
|
||||
color: var(--fg-muted);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .omni-commerce-page :is(
|
||||
.omni-commerce-ghost-action:hover,
|
||||
.omni-commerce-text-button:hover,
|
||||
.omni-commerce-segmented button:hover,
|
||||
.omni-commerce-ratio-grid button:hover,
|
||||
.omni-commerce-filter button:hover,
|
||||
.omni-commerce-flow-head button:hover,
|
||||
.omni-commerce-template__select:hover em,
|
||||
.omni-commerce-project__delete:hover
|
||||
) {
|
||||
border-color: var(--border-default);
|
||||
background: var(--bg-hover);
|
||||
color: var(--fg-body);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .omni-commerce-page :is(
|
||||
.omni-commerce-segmented button.is-active,
|
||||
.omni-commerce-ratio-grid button.is-active,
|
||||
.omni-commerce-filter button.is-active,
|
||||
.omni-commerce-step-head > span,
|
||||
.omni-commerce-template span
|
||||
) {
|
||||
border-color: rgba(var(--accent-rgb), 0.42);
|
||||
background: var(--accent-muted);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .omni-commerce-page :is(
|
||||
.omni-commerce-section-head h2,
|
||||
.omni-commerce-template strong,
|
||||
.omni-commerce-project strong,
|
||||
.omni-commerce-search input
|
||||
) {
|
||||
color: var(--fg-body);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .omni-commerce-page :is(
|
||||
.omni-commerce-section-head span,
|
||||
.omni-commerce-template p,
|
||||
.omni-commerce-project span,
|
||||
.omni-commerce-search,
|
||||
.omni-commerce-search input::placeholder
|
||||
) {
|
||||
color: var(--fg-muted);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .omni-commerce-page .omni-commerce-section-head .anticon {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .ecommerce-template-apple-card {
|
||||
border: 1px solid var(--border-weak);
|
||||
background: var(--bg-panel);
|
||||
color: var(--fg-body);
|
||||
}
|
||||
|
||||
.web-shell[data-ui-theme="dark-green"] .ecommerce-template-apple-card:hover,
|
||||
.web-shell[data-ui-theme="dark-green"] .ecommerce-template-apple-card.is-active {
|
||||
border-color: rgba(var(--accent-rgb), 0.42);
|
||||
background: var(--bg-panel);
|
||||
}
|
||||
Reference in New Issue
Block a user