chore: re-upload current web project code
This commit is contained in:
File diff suppressed because it is too large
Load Diff
@@ -3,24 +3,6 @@ import type { ReactNode } from "react";
|
|||||||
import type { WorkbenchOption, WorkbenchFieldGroup } from "./workbenchConstants";
|
import type { WorkbenchOption, WorkbenchFieldGroup } from "./workbenchConstants";
|
||||||
import { getRatioOptionClassName, getSettingsGridColumnsClassName } from "./workbenchReferenceUtils";
|
import { getRatioOptionClassName, getSettingsGridColumnsClassName } from "./workbenchReferenceUtils";
|
||||||
|
|
||||||
const VIDEO_MODEL_ICON_URLS = {
|
|
||||||
happyHorse: "https://stringtest.oss-cn-hangzhou.aliyuncs.com/static/model-icons/HappyHorse.svg",
|
|
||||||
pixverse: "https://stringtest.oss-cn-hangzhou.aliyuncs.com/static/model-icons/Pixverse.svg",
|
|
||||||
vidu: "https://stringtest.oss-cn-hangzhou.aliyuncs.com/static/model-icons/viduQ3.svg",
|
|
||||||
wanxiang: "https://stringtest.oss-cn-hangzhou.aliyuncs.com/static/model-icons/wan.svg",
|
|
||||||
kling: "https://stringtest.oss-cn-hangzhou.aliyuncs.com/static/model-icons/kling.svg",
|
|
||||||
} as const;
|
|
||||||
|
|
||||||
function getVideoModelIconUrl(option: WorkbenchOption): string | null {
|
|
||||||
const text = `${option.value} ${option.label}`.toLowerCase();
|
|
||||||
if (text.includes("happyhorse")) return VIDEO_MODEL_ICON_URLS.happyHorse;
|
|
||||||
if (text.includes("pixverse")) return VIDEO_MODEL_ICON_URLS.pixverse;
|
|
||||||
if (text.includes("vidu")) return VIDEO_MODEL_ICON_URLS.vidu;
|
|
||||||
if (text.includes("wan") || text.includes("万相")) return VIDEO_MODEL_ICON_URLS.wanxiang;
|
|
||||||
if (text.includes("kling") || text.includes("可灵")) return VIDEO_MODEL_ICON_URLS.kling;
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
export function SelectChip({
|
export function SelectChip({
|
||||||
chipId,
|
chipId,
|
||||||
value,
|
value,
|
||||||
@@ -74,7 +56,6 @@ export function SelectChip({
|
|||||||
>
|
>
|
||||||
{options.map((option, index) => {
|
{options.map((option, index) => {
|
||||||
const active = option.value === value;
|
const active = option.value === value;
|
||||||
const iconUrl = chipId === "video-model" ? getVideoModelIconUrl(option) : null;
|
|
||||||
return (
|
return (
|
||||||
<button
|
<button
|
||||||
key={option.value}
|
key={option.value}
|
||||||
@@ -90,11 +71,6 @@ export function SelectChip({
|
|||||||
>
|
>
|
||||||
<span className="ai-workbench-select-chip__option-label">
|
<span className="ai-workbench-select-chip__option-label">
|
||||||
<span className="ai-workbench-select-chip__option-dot" aria-hidden="true" />
|
<span className="ai-workbench-select-chip__option-dot" aria-hidden="true" />
|
||||||
{iconUrl ? (
|
|
||||||
<span className="ai-workbench-select-chip__option-icon" aria-hidden="true">
|
|
||||||
<img src={iconUrl} alt="" loading="lazy" />
|
|
||||||
</span>
|
|
||||||
) : null}
|
|
||||||
<span className="ai-workbench-select-chip__option-copy">
|
<span className="ai-workbench-select-chip__option-copy">
|
||||||
<span className="ai-workbench-select-chip__option-title">
|
<span className="ai-workbench-select-chip__option-title">
|
||||||
<span>{option.label}</span>
|
<span>{option.label}</span>
|
||||||
@@ -285,4 +261,4 @@ export function InlineOptionChip({
|
|||||||
) : null}
|
) : null}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@@ -1,13 +1 @@
|
|||||||
/* Agent page rules move here as they are retired from legacy-pages.css. */
|
/* Agent page rules move here as they are retired from legacy-pages.css. */
|
||||||
|
|
||||||
@media (max-width: 900px) {
|
|
||||||
.agent-page {
|
|
||||||
padding: 16px 16px 80px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 560px) {
|
|
||||||
.agent-page {
|
|
||||||
padding: 12px 10px 80px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -243,24 +243,3 @@
|
|||||||
max-height: calc(100vh - 190px);
|
max-height: calc(100vh - 190px);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 560px) {
|
|
||||||
.asset-preview-modal {
|
|
||||||
padding: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.asset-preview-modal__panel {
|
|
||||||
width: calc(100vw - 16px);
|
|
||||||
max-height: calc(100vh - 16px);
|
|
||||||
border-radius: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.asset-preview-modal__body {
|
|
||||||
padding: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.asset-preview-modal__body img,
|
|
||||||
.asset-preview-modal__body video {
|
|
||||||
max-height: calc(100vh - 160px);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -4211,30 +4211,3 @@
|
|||||||
grid-template-columns: minmax(0, 1fr);
|
grid-template-columns: minmax(0, 1fr);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 560px) {
|
|
||||||
.avatar-console-page {
|
|
||||||
height: auto;
|
|
||||||
min-height: 100%;
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.avatar-console-main {
|
|
||||||
min-height: 100vh;
|
|
||||||
padding-bottom: 80px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.avatar-console-scroll {
|
|
||||||
padding: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.avatar-console-toolbar {
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.avatar-console-video-actions {
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -910,94 +910,3 @@
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
cursor: crosshair;
|
cursor: crosshair;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ═══════════════════════════════════════════════════════
|
|
||||||
Responsive: Canvas
|
|
||||||
Breakpoints: 900px / 560px
|
|
||||||
═══════════════════════════════════════════════════════ */
|
|
||||||
|
|
||||||
@media (max-width: 900px) {
|
|
||||||
.studio-canvas-page {
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.studio-canvas-toolbar {
|
|
||||||
flex: 0 0 auto;
|
|
||||||
flex-direction: row;
|
|
||||||
width: 100%;
|
|
||||||
padding: 8px 12px;
|
|
||||||
gap: 6px;
|
|
||||||
overflow-x: auto;
|
|
||||||
border-right: none;
|
|
||||||
border-bottom: 1px solid var(--border-weak);
|
|
||||||
-webkit-overflow-scrolling: touch;
|
|
||||||
}
|
|
||||||
|
|
||||||
.studio-canvas-toolbar__group {
|
|
||||||
flex-direction: row;
|
|
||||||
flex-shrink: 0;
|
|
||||||
gap: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.studio-canvas-toolbar button {
|
|
||||||
min-width: 36px;
|
|
||||||
height: 36px;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.studio-canvas-main {
|
|
||||||
flex: 1;
|
|
||||||
min-height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.studio-canvas-node {
|
|
||||||
min-width: 140px;
|
|
||||||
min-height: 60px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 560px) {
|
|
||||||
.studio-canvas-page {
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.studio-canvas-toolbar {
|
|
||||||
flex: 0 0 auto;
|
|
||||||
padding: 6px 8px;
|
|
||||||
gap: 4px;
|
|
||||||
border-bottom: 1px solid var(--border-weak);
|
|
||||||
}
|
|
||||||
|
|
||||||
.studio-canvas-toolbar button {
|
|
||||||
min-width: 30px;
|
|
||||||
height: 30px;
|
|
||||||
padding: 0 6px;
|
|
||||||
font-size: 12px;
|
|
||||||
border-radius: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.studio-canvas-main {
|
|
||||||
flex: 1;
|
|
||||||
min-height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.studio-canvas-node {
|
|
||||||
min-width: 110px;
|
|
||||||
min-height: 48px;
|
|
||||||
border-radius: 10px;
|
|
||||||
padding: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.studio-canvas-project-bar {
|
|
||||||
right: 8px;
|
|
||||||
left: 8px;
|
|
||||||
bottom: 80px;
|
|
||||||
gap: 4px;
|
|
||||||
border-radius: 10px;
|
|
||||||
padding: 8px 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.studio-canvas-project-bar__name-form {
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -117,52 +117,3 @@
|
|||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ═══════════════════════════════════════════════════════
|
|
||||||
Responsive: Community
|
|
||||||
Breakpoints: 900px / 560px
|
|
||||||
═══════════════════════════════════════════════════════ */
|
|
||||||
|
|
||||||
@media (max-width: 900px) {
|
|
||||||
.community-page {
|
|
||||||
padding: 12px 16px 80px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.community-carousel__slide--video {
|
|
||||||
min-height: 200px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.community-carousel__video {
|
|
||||||
max-height: 220px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.community-case-card__preview {
|
|
||||||
min-height: 140px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 560px) {
|
|
||||||
.community-page {
|
|
||||||
padding: 10px 10px 80px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.community-carousel__slide--video {
|
|
||||||
min-height: 160px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.community-carousel__video {
|
|
||||||
max-height: 180px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.community-case-card__preview {
|
|
||||||
min-height: 110px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.community-case-empty {
|
|
||||||
padding: 32px 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.community-case-empty__icon {
|
|
||||||
font-size: 18px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -1166,25 +1166,6 @@
|
|||||||
background: #202c28;
|
background: #202c28;
|
||||||
}
|
}
|
||||||
|
|
||||||
.product-clone-page[data-tool="clone"] .clone-ai-upload-zone.is-full {
|
|
||||||
cursor: default;
|
|
||||||
}
|
|
||||||
|
|
||||||
.product-clone-page[data-tool="clone"] .clone-ai-upload-zone.is-full strong {
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
||||||
background: rgba(255, 255, 255, 0.08);
|
|
||||||
color: #aeb8c4;
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.product-clone-page[data-tool="clone"] .clone-ai-upload-zone.is-full:hover {
|
|
||||||
border-color: rgba(255, 255, 255, 0.16);
|
|
||||||
background:
|
|
||||||
radial-gradient(circle at 50% 0%, rgba(var(--ecm-accent-rgb), 0.09), transparent 58%),
|
|
||||||
var(--ecm-inset);
|
|
||||||
transform: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.product-clone-page[data-tool="clone"] .clone-ai-upload-zone:active {
|
.product-clone-page[data-tool="clone"] .clone-ai-upload-zone:active {
|
||||||
transform: scale(0.98);
|
transform: scale(0.98);
|
||||||
}
|
}
|
||||||
@@ -1302,27 +1283,6 @@
|
|||||||
transform: scale(0.92);
|
transform: scale(0.92);
|
||||||
}
|
}
|
||||||
|
|
||||||
.product-clone-page[data-tool="clone"] .clone-ai-card,
|
|
||||||
.product-clone-page[data-tool="clone"] .clone-ai-upload-zone,
|
|
||||||
.product-clone-page[data-tool="clone"] .clone-ai-uploaded-files {
|
|
||||||
position: relative;
|
|
||||||
overflow: visible;
|
|
||||||
}
|
|
||||||
|
|
||||||
.product-clone-page[data-tool="clone"] .clone-ai-upload-zone {
|
|
||||||
z-index: 8;
|
|
||||||
}
|
|
||||||
|
|
||||||
.product-clone-page[data-tool="clone"] .clone-ai-upload-zone:has(.clone-ai-uploaded-file:hover),
|
|
||||||
.product-clone-page[data-tool="clone"] .clone-ai-upload-zone:has(.clone-ai-uploaded-file:focus-within) {
|
|
||||||
z-index: 90;
|
|
||||||
}
|
|
||||||
|
|
||||||
.product-clone-page[data-tool="clone"] .clone-ai-uploaded-file:hover,
|
|
||||||
.product-clone-page[data-tool="clone"] .clone-ai-uploaded-file:focus-within {
|
|
||||||
z-index: 95;
|
|
||||||
}
|
|
||||||
|
|
||||||
.product-clone-page[data-tool="clone"] .clone-ai-settings-section {
|
.product-clone-page[data-tool="clone"] .clone-ai-settings-section {
|
||||||
display: grid;
|
display: grid;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
@@ -3514,7 +3474,7 @@
|
|||||||
|
|
||||||
.uploaded-image-zoom {
|
.uploaded-image-zoom {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
z-index: 220;
|
z-index: 70;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
bottom: calc(100% + 10px);
|
bottom: calc(100% + 10px);
|
||||||
display: block;
|
display: block;
|
||||||
@@ -3535,18 +3495,6 @@
|
|||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.product-clone-page[data-tool="clone"] .clone-ai-uploaded-file .uploaded-image-zoom {
|
|
||||||
left: 0;
|
|
||||||
bottom: calc(100% + 12px);
|
|
||||||
width: min(240px, 58vw);
|
|
||||||
transform: translate(0, 8px) scale(0.96);
|
|
||||||
}
|
|
||||||
|
|
||||||
.product-clone-page[data-tool="clone"] .clone-ai-uploaded-file:hover .uploaded-image-zoom,
|
|
||||||
.product-clone-page[data-tool="clone"] .clone-ai-uploaded-file:focus-within .uploaded-image-zoom {
|
|
||||||
transform: translate(0, 0) scale(1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.uploaded-image-zoom img {
|
.uploaded-image-zoom img {
|
||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@@ -3569,233 +3517,6 @@
|
|||||||
visibility: visible;
|
visibility: visible;
|
||||||
}
|
}
|
||||||
|
|
||||||
.product-clone-page[data-tool="clone"] .clone-ai-upload-zone:has(.clone-ai-upload-preview-wrap) {
|
|
||||||
align-content: start;
|
|
||||||
justify-items: stretch;
|
|
||||||
gap: 10px;
|
|
||||||
min-height: 0;
|
|
||||||
padding: 12px;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.product-clone-page[data-tool="clone"] .clone-ai-upload-zone:has(.clone-ai-upload-preview-wrap) .clone-ai-upload-main {
|
|
||||||
grid-template-columns: 34px minmax(0, 1fr) auto;
|
|
||||||
width: 100%;
|
|
||||||
align-items: center;
|
|
||||||
justify-items: start;
|
|
||||||
gap: 4px 9px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.product-clone-page[data-tool="clone"] .clone-ai-upload-zone:has(.clone-ai-upload-preview-wrap) .clone-ai-upload-icon {
|
|
||||||
grid-row: span 2;
|
|
||||||
width: 34px;
|
|
||||||
height: 34px;
|
|
||||||
border-radius: 10px;
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.product-clone-page[data-tool="clone"] .clone-ai-upload-zone:has(.clone-ai-upload-preview-wrap) .clone-ai-upload-title {
|
|
||||||
min-width: 0;
|
|
||||||
color: #c9d2dd;
|
|
||||||
font-size: 12px;
|
|
||||||
line-height: 1.2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.product-clone-page[data-tool="clone"] .clone-ai-upload-zone:has(.clone-ai-upload-preview-wrap) strong {
|
|
||||||
grid-row: span 2;
|
|
||||||
min-width: 96px;
|
|
||||||
height: 34px;
|
|
||||||
padding: 0 12px;
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.product-clone-page[data-tool="clone"] .clone-ai-upload-zone:has(.clone-ai-upload-preview-wrap) .clone-ai-upload-hint {
|
|
||||||
grid-column: 2;
|
|
||||||
min-width: 0;
|
|
||||||
font-size: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.product-clone-page[data-tool="clone"] .clone-ai-upload-preview-wrap {
|
|
||||||
display: grid;
|
|
||||||
gap: 7px;
|
|
||||||
min-width: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.product-clone-page[data-tool="clone"] .clone-ai-upload-preview {
|
|
||||||
position: relative;
|
|
||||||
display: grid;
|
|
||||||
width: 100%;
|
|
||||||
min-height: 126px;
|
|
||||||
overflow: hidden;
|
|
||||||
border: 1px solid rgba(var(--ecm-accent-rgb), 0.2);
|
|
||||||
border-radius: 10px;
|
|
||||||
background:
|
|
||||||
linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 48%),
|
|
||||||
rgba(8, 10, 12, 0.56);
|
|
||||||
}
|
|
||||||
|
|
||||||
.product-clone-page[data-tool="clone"] .clone-ai-upload-preview img {
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
height: 126px;
|
|
||||||
object-fit: contain;
|
|
||||||
}
|
|
||||||
|
|
||||||
.product-clone-page[data-tool="clone"] .clone-ai-upload-preview__meta {
|
|
||||||
display: flex;
|
|
||||||
min-width: 0;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
gap: 8px;
|
|
||||||
padding: 0 2px;
|
|
||||||
color: #eef2f6;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.product-clone-page[data-tool="clone"] .clone-ai-upload-preview__meta span {
|
|
||||||
display: grid;
|
|
||||||
min-width: 0;
|
|
||||||
gap: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.product-clone-page[data-tool="clone"] .clone-ai-upload-preview__meta b,
|
|
||||||
.product-clone-page[data-tool="clone"] .clone-ai-upload-preview__meta em {
|
|
||||||
display: block;
|
|
||||||
overflow: hidden;
|
|
||||||
max-width: 260px;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.product-clone-page[data-tool="clone"] .clone-ai-upload-preview__meta b {
|
|
||||||
color: var(--ecm-accent);
|
|
||||||
font-size: 10px;
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 900;
|
|
||||||
}
|
|
||||||
|
|
||||||
.product-clone-page[data-tool="clone"] .clone-ai-upload-preview__meta em {
|
|
||||||
color: #aeb8c4;
|
|
||||||
font-size: 10px;
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: 700;
|
|
||||||
}
|
|
||||||
|
|
||||||
.product-clone-page[data-tool="clone"] .clone-ai-uploaded-files {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 7px;
|
|
||||||
margin-top: 0;
|
|
||||||
padding-top: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.product-clone-page[data-tool="clone"] .clone-ai-uploaded-stack {
|
|
||||||
display: grid;
|
|
||||||
gap: 7px;
|
|
||||||
min-width: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.product-clone-page[data-tool="clone"] .clone-ai-uploaded-head {
|
|
||||||
display: flex;
|
|
||||||
min-width: 0;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
gap: 8px;
|
|
||||||
color: #768292;
|
|
||||||
font-size: 10px;
|
|
||||||
font-weight: 900;
|
|
||||||
}
|
|
||||||
|
|
||||||
.product-clone-page[data-tool="clone"] .clone-ai-uploaded-head span {
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.product-clone-page[data-tool="clone"] .clone-ai-uploaded-head b {
|
|
||||||
flex: 0 0 auto;
|
|
||||||
padding: 2px 7px;
|
|
||||||
border: 1px solid rgba(var(--ecm-accent-rgb), 0.18);
|
|
||||||
border-radius: 999px;
|
|
||||||
background: rgba(var(--ecm-accent-rgb), 0.07);
|
|
||||||
color: var(--ecm-accent);
|
|
||||||
font-size: 10px;
|
|
||||||
line-height: 1.4;
|
|
||||||
}
|
|
||||||
|
|
||||||
.product-clone-page[data-tool="clone"] .clone-ai-uploaded-file {
|
|
||||||
width: 46px;
|
|
||||||
height: 46px;
|
|
||||||
overflow: hidden;
|
|
||||||
border-color: rgba(255, 255, 255, 0.12);
|
|
||||||
border-radius: 9px;
|
|
||||||
background: rgba(255, 255, 255, 0.035);
|
|
||||||
transition:
|
|
||||||
border-color 160ms ease,
|
|
||||||
box-shadow 160ms ease,
|
|
||||||
transform 160ms ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.product-clone-page[data-tool="clone"] .clone-ai-uploaded-file > button:not(.clone-ai-uploaded-file__thumb) {
|
|
||||||
top: 2px;
|
|
||||||
right: 2px;
|
|
||||||
width: 16px;
|
|
||||||
height: 16px;
|
|
||||||
background: rgba(8, 10, 12, 0.82);
|
|
||||||
color: #fff;
|
|
||||||
font-size: 9px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.product-clone-page[data-tool="clone"] .clone-ai-uploaded-file.is-active {
|
|
||||||
border-color: rgba(var(--ecm-accent-rgb), 0.86);
|
|
||||||
box-shadow: 0 0 0 2px rgba(var(--ecm-accent-rgb), 0.12);
|
|
||||||
}
|
|
||||||
|
|
||||||
.product-clone-page[data-tool="clone"] .clone-ai-uploaded-file .clone-ai-uploaded-file__thumb {
|
|
||||||
position: static;
|
|
||||||
inset: auto;
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
padding: 0;
|
|
||||||
border: 0;
|
|
||||||
border-radius: inherit;
|
|
||||||
background: transparent;
|
|
||||||
color: inherit;
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: inherit;
|
|
||||||
opacity: 1;
|
|
||||||
transform: none;
|
|
||||||
transition: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.product-clone-page[data-tool="clone"] .clone-ai-uploaded-file .clone-ai-uploaded-file__thumb img {
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
object-fit: cover;
|
|
||||||
}
|
|
||||||
|
|
||||||
.product-clone-page[data-tool="clone"] .clone-ai-uploaded-file__thumb span {
|
|
||||||
position: absolute;
|
|
||||||
left: 3px;
|
|
||||||
bottom: 3px;
|
|
||||||
min-width: 14px;
|
|
||||||
height: 14px;
|
|
||||||
border-radius: 999px;
|
|
||||||
background: rgba(8, 10, 12, 0.76);
|
|
||||||
color: #eef2f6;
|
|
||||||
font-size: 9px;
|
|
||||||
font-weight: 900;
|
|
||||||
line-height: 14px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.product-clone-page[data-tool="clone"] .clone-ai-uploaded-file:hover {
|
|
||||||
border-color: rgba(var(--ecm-accent-rgb), 0.62);
|
|
||||||
transform: translateY(-1px);
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes image-mention-menu-rise {
|
@keyframes image-mention-menu-rise {
|
||||||
from {
|
from {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
@@ -8661,147 +8382,6 @@
|
|||||||
.clone-ai-adwizard__risk.is-low { color: #52c41a; }
|
.clone-ai-adwizard__risk.is-low { color: #52c41a; }
|
||||||
.clone-ai-adwizard__risk.is-medium { color: #faad14; }
|
.clone-ai-adwizard__risk.is-medium { color: #faad14; }
|
||||||
.clone-ai-adwizard__risk.is-high { color: #ff4d4f; }
|
.clone-ai-adwizard__risk.is-high { color: #ff4d4f; }
|
||||||
|
|
||||||
/* ═══════════════════════════════════════════════════════
|
|
||||||
Responsive: Ecommerce Tools
|
|
||||||
Breakpoints: 1180px / 900px / 560px
|
|
||||||
═══════════════════════════════════════════════════════ */
|
|
||||||
|
|
||||||
/* ── 1180px: Narrower panels ── */
|
|
||||||
@media (max-width: 1180px) {
|
|
||||||
.product-clone-page[data-tool="clone"] > .product-clone-shell {
|
|
||||||
grid-template-columns: minmax(360px, 440px) minmax(0, 1fr);
|
|
||||||
}
|
|
||||||
.product-clone-page[data-tool="set"] > .product-clone-shell {
|
|
||||||
grid-template-columns: minmax(320px, 420px) minmax(0, 1fr);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ── 900px: Tablet — stacked layout ── */
|
|
||||||
@media (max-width: 900px) {
|
|
||||||
/* All tools: collapse shell to single column */
|
|
||||||
.product-clone-page > .product-clone-shell,
|
|
||||||
.product-clone-page[data-tool="clone"] > .product-clone-shell,
|
|
||||||
.product-clone-page[data-tool="set"] > .product-clone-shell {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
grid-template-rows: auto minmax(0, 1fr);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Rail becomes horizontal tab bar */
|
|
||||||
.product-clone-rail {
|
|
||||||
display: flex !important;
|
|
||||||
flex-direction: row;
|
|
||||||
gap: 4px;
|
|
||||||
width: 100%;
|
|
||||||
height: auto;
|
|
||||||
padding: 8px 12px;
|
|
||||||
overflow-x: auto;
|
|
||||||
border-right: none;
|
|
||||||
border-bottom: 1px solid var(--border-weak, #2a3032);
|
|
||||||
-webkit-overflow-scrolling: touch;
|
|
||||||
}
|
|
||||||
|
|
||||||
.product-clone-rail button {
|
|
||||||
flex-shrink: 0;
|
|
||||||
white-space: nowrap;
|
|
||||||
flex-direction: row;
|
|
||||||
gap: 6px;
|
|
||||||
padding: 8px 14px;
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Panel: full-width, reduced height */
|
|
||||||
.product-clone-panel {
|
|
||||||
width: 100%;
|
|
||||||
max-height: 45vh;
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.product-clone-page[data-tool="clone"] .product-clone-panel {
|
|
||||||
--clone-settings-panel-width: 100%;
|
|
||||||
max-height: 45vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Preview: independent scroll area */
|
|
||||||
.product-clone-preview {
|
|
||||||
min-height: 40vh;
|
|
||||||
overflow-y: auto;
|
|
||||||
padding: 20px 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.product-clone-page[data-tool="set"] .product-clone-preview {
|
|
||||||
padding: 20px 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Collapse toggle tweak */
|
|
||||||
.product-clone-page[data-tool="clone"] .product-clone-panel {
|
|
||||||
transition: max-height 320ms ease, opacity 320ms ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.product-clone-page.is-settings-collapsed .product-clone-panel {
|
|
||||||
max-height: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ── 560px: Phone — further compression ── */
|
|
||||||
@media (max-width: 560px) {
|
|
||||||
.product-clone-page {
|
|
||||||
grid-template-rows: 44px minmax(0, 1fr);
|
|
||||||
}
|
|
||||||
|
|
||||||
.product-clone-rail {
|
|
||||||
padding: 6px 8px;
|
|
||||||
gap: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.product-clone-rail button {
|
|
||||||
padding: 6px 10px;
|
|
||||||
font-size: 11px;
|
|
||||||
gap: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.product-clone-panel {
|
|
||||||
max-height: 38vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
.product-clone-page[data-tool="clone"] .product-clone-panel {
|
|
||||||
max-height: 38vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
.product-clone-page[data-tool="set"] .product-clone-panel__scroll {
|
|
||||||
padding: 20px 14px 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.product-clone-page[data-tool="set"] :is(.product-set-upload-section, .product-set-settings-section) {
|
|
||||||
padding: 18px;
|
|
||||||
border-radius: 14px;
|
|
||||||
margin-bottom: 18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.product-clone-page[data-tool="set"] .product-set-upload {
|
|
||||||
min-height: 180px;
|
|
||||||
padding: 16px;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.product-clone-page[data-tool="set"] .product-set-upload-title {
|
|
||||||
font-size: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.product-clone-page[data-tool="set"] .product-set-upload strong {
|
|
||||||
height: 42px;
|
|
||||||
min-width: 140px;
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Preview full-width */
|
|
||||||
.product-clone-preview {
|
|
||||||
padding: 12px 10px !important;
|
|
||||||
min-height: 50vh;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.clone-ai-adwizard__issues { margin: 0; padding-left: 16px; font-size: 12px; display: flex; flex-direction: column; gap: 4px; }
|
.clone-ai-adwizard__issues { margin: 0; padding-left: 16px; font-size: 12px; display: flex; flex-direction: column; gap: 4px; }
|
||||||
|
|
||||||
/* ===== Ecommerce Template Apple Carousel ===== */
|
/* ===== Ecommerce Template Apple Carousel ===== */
|
||||||
@@ -9183,13 +8763,6 @@
|
|||||||
box-shadow: 0 10px 28px rgba(var(--ecm-accent-rgb), 0.18);
|
box-shadow: 0 10px 28px rgba(var(--ecm-accent-rgb), 0.18);
|
||||||
}
|
}
|
||||||
|
|
||||||
.product-clone-page[data-tool="clone"] .clone-ai-upload-zone.is-full strong {
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
||||||
background: rgba(255, 255, 255, 0.08);
|
|
||||||
color: #aeb8c4;
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.product-clone-page[data-tool="clone"] :is(.clone-ai-generate:hover:not(:disabled), .clone-ai-send-button:hover:not(:disabled)) {
|
.product-clone-page[data-tool="clone"] :is(.clone-ai-generate:hover:not(:disabled), .clone-ai-send-button:hover:not(:disabled)) {
|
||||||
filter: brightness(1.03);
|
filter: brightness(1.03);
|
||||||
transform: translateY(-1px);
|
transform: translateY(-1px);
|
||||||
|
|||||||
@@ -1776,28 +1776,3 @@ textarea.image-workbench-prompt {
|
|||||||
.image-workbench-result-card:nth-child(2) { animation-delay: 0.08s; }
|
.image-workbench-result-card:nth-child(2) { animation-delay: 0.08s; }
|
||||||
.image-workbench-result-card:nth-child(3) { animation-delay: 0.16s; }
|
.image-workbench-result-card:nth-child(3) { animation-delay: 0.16s; }
|
||||||
.image-workbench-result-card:nth-child(4) { animation-delay: 0.24s; }
|
.image-workbench-result-card:nth-child(4) { animation-delay: 0.24s; }
|
||||||
|
|
||||||
@media (max-width: 900px) {
|
|
||||||
.image-workbench-page {
|
|
||||||
padding: 12px;
|
|
||||||
}
|
|
||||||
.image-workbench-toolbar {
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 560px) {
|
|
||||||
.image-workbench-page {
|
|
||||||
padding: 8px 8px 80px;
|
|
||||||
}
|
|
||||||
.image-workbench-toolbar {
|
|
||||||
gap: 4px;
|
|
||||||
}
|
|
||||||
.image-workbench-toolbar button {
|
|
||||||
min-width: 36px;
|
|
||||||
height: 36px;
|
|
||||||
padding: 0 10px;
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -1286,23 +1286,3 @@ textarea.image-workbench-prompt,
|
|||||||
justify-items: start;
|
justify-items: start;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 560px) {
|
|
||||||
.token-usage-page {
|
|
||||||
padding: 0 8px 80px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.token-usage-page .script-token-page__scroll,
|
|
||||||
.script-token-page__scroll {
|
|
||||||
padding-inline: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.token-member-card {
|
|
||||||
padding: 14px;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.token-member-card__head {
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -313,39 +313,3 @@
|
|||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 560px) {
|
|
||||||
.more-page-v2 {
|
|
||||||
padding-left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.more-page-v2__header {
|
|
||||||
padding: 10px 12px 8px;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.more-page-v2__scroll {
|
|
||||||
padding: 12px 10px 72px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.more-page-v2__grid {
|
|
||||||
grid-template-columns: repeat(2, 1fr);
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.more-page-v2__featured-grid {
|
|
||||||
gap: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.more-card--featured {
|
|
||||||
padding: 14px;
|
|
||||||
gap: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.more-card__featured-icon {
|
|
||||||
width: 36px;
|
|
||||||
height: 36px;
|
|
||||||
border-radius: 10px;
|
|
||||||
font-size: 18px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -2,32 +2,16 @@
|
|||||||
|
|
||||||
/* ── 代表作滚动容器：固定3列，刚好显示9个（3行），超出可滚动，隐藏滚动条 ── */
|
/* ── 代表作滚动容器：固定3列，刚好显示9个（3行），超出可滚动，隐藏滚动条 ── */
|
||||||
.profile-page__works-scroll {
|
.profile-page__works-scroll {
|
||||||
max-height: 390px;
|
max-height: 390px; /* 3行卡片：3 × 120(min-height) + 2 × 10(gap) = 380px，留10px余量 */
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
scrollbar-width: none;
|
scrollbar-width: none; /* Firefox */
|
||||||
-ms-overflow-style: none;
|
-ms-overflow-style: none; /* IE/Edge */
|
||||||
}
|
}
|
||||||
|
|
||||||
.profile-page__works-scroll::-webkit-scrollbar {
|
.profile-page__works-scroll::-webkit-scrollbar {
|
||||||
display: none;
|
display: none; /* Chrome/Safari/Edge */
|
||||||
}
|
}
|
||||||
|
|
||||||
.profile-page__works-scroll .profile-page__list-grid {
|
.profile-page__works-scroll .profile-page__list-grid {
|
||||||
grid-template-columns: repeat(3, 1fr);
|
grid-template-columns: repeat(3, 1fr); /* 固定3列，刚好3×3=9个可见 */
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 900px) {
|
|
||||||
.profile-page,
|
|
||||||
.auth-page,
|
|
||||||
.settings-page {
|
|
||||||
padding: 16px 16px 80px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 560px) {
|
|
||||||
.profile-page,
|
|
||||||
.auth-page,
|
|
||||||
.settings-page {
|
|
||||||
padding: 12px 10px 80px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -163,41 +163,4 @@
|
|||||||
|
|
||||||
.provider-health-table tr:hover td {
|
.provider-health-table tr:hover td {
|
||||||
background: var(--surface-elevated);
|
background: var(--surface-elevated);
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 900px) {
|
|
||||||
.provider-health-page__inner {
|
|
||||||
padding: 16px;
|
|
||||||
gap: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.provider-health-grid {
|
|
||||||
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 560px) {
|
|
||||||
.provider-health-page__inner {
|
|
||||||
padding: 12px 12px 80px;
|
|
||||||
gap: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.provider-health-grid {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
gap: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.provider-health-toolbar {
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.provider-health-table {
|
|
||||||
font-size: 11px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.provider-health-table th,
|
|
||||||
.provider-health-table td {
|
|
||||||
padding: 6px 8px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
@@ -474,24 +474,3 @@
|
|||||||
width: min(100%, 430px);
|
width: min(100%, 430px);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 560px) {
|
|
||||||
.size-template-page {
|
|
||||||
padding: 12px 10px 80px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.size-template-main-frame {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
gap: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.size-template-spec-grid {
|
|
||||||
grid-template-columns: repeat(2, 1fr);
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.size-template-preview-note,
|
|
||||||
.size-template-detail-card {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -674,19 +674,3 @@
|
|||||||
max-height: 320px;
|
max-height: 320px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 560px) {
|
|
||||||
.studio-tool-layout {
|
|
||||||
grid-template-rows: 40px auto minmax(200px, 1fr) 32px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.studio-tool-layout__toolstrip {
|
|
||||||
padding: 6px 8px;
|
|
||||||
gap: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.studio-panel {
|
|
||||||
max-height: 240px;
|
|
||||||
padding: 12px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -133,15 +133,3 @@
|
|||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 900px) {
|
|
||||||
.subtitle-removal-page {
|
|
||||||
padding: 12px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 560px) {
|
|
||||||
.subtitle-removal-page {
|
|
||||||
padding: 8px 8px 80px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -440,137 +440,3 @@
|
|||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ═══════════════════════════════════════════════════════
|
|
||||||
Responsive: Workbench Launch & Active State
|
|
||||||
Breakpoints: 900px / 560px
|
|
||||||
═══════════════════════════════════════════════════════ */
|
|
||||||
|
|
||||||
/* ── 900px: Tablet — launch state ── */
|
|
||||||
@media (max-width: 900px) {
|
|
||||||
.wb-home {
|
|
||||||
padding: 36px 16px 80px;
|
|
||||||
gap: 18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wb-home__title {
|
|
||||||
font-size: clamp(24px, 6vw, 36px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.wb-home__composer {
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wb-home__suggestions {
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wb-showcase {
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wb-showcase__grid {
|
|
||||||
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
|
||||||
gap: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Active state: message thread */
|
|
||||||
.ai-workbench-content-scroll {
|
|
||||||
width: 100%;
|
|
||||||
padding: 16px 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ai-chat-message-stack {
|
|
||||||
max-width: 86%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ai-chat-message-bubble {
|
|
||||||
padding: 10px 12px;
|
|
||||||
font-size: 13px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Composer in active state */
|
|
||||||
.wb-composer {
|
|
||||||
width: 100%;
|
|
||||||
padding: 8px 0 12px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ── 560px: Phone — full-width compact ── */
|
|
||||||
@media (max-width: 560px) {
|
|
||||||
.wb-home {
|
|
||||||
padding: 24px 10px 72px;
|
|
||||||
gap: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wb-home__title {
|
|
||||||
font-size: clamp(20px, 7vw, 28px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.wb-home__glow {
|
|
||||||
width: 240px;
|
|
||||||
height: 120px;
|
|
||||||
top: -40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wb-showcase__grid {
|
|
||||||
grid-template-columns: repeat(2, 1fr);
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wb-suggestion-chip {
|
|
||||||
font-size: 12px;
|
|
||||||
padding: 7px 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Active state: messages fill screen */
|
|
||||||
.ai-workbench-content-scroll {
|
|
||||||
padding: 12px 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ai-workbench-thread-shell {
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ai-chat-message-list {
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ai-chat-message-stack {
|
|
||||||
max-width: 90%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ai-chat-message-bubble {
|
|
||||||
padding: 8px 10px;
|
|
||||||
font-size: 13px;
|
|
||||||
border-radius: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ai-chat-message-bubble--user {
|
|
||||||
border-radius: 12px 12px 4px 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ai-chat-message-bubble--ai {
|
|
||||||
border-radius: 12px 12px 12px 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ai-chat-avatar {
|
|
||||||
width: 26px;
|
|
||||||
height: 26px;
|
|
||||||
flex: 0 0 26px;
|
|
||||||
font-size: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ai-chat-message-row {
|
|
||||||
gap: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Composer at bottom */
|
|
||||||
.wb-composer {
|
|
||||||
padding: 6px 0 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wb-chat-scroll-actions {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -896,21 +896,6 @@
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 1180px) {
|
|
||||||
.brand-lockup__tone {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.creator-button {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.member-button {
|
|
||||||
max-width: 148px;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 900px) {
|
@media (max-width: 900px) {
|
||||||
.web-shell {
|
.web-shell {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
@@ -977,7 +962,6 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ── 640px: Narrower topbar adjustments ── */
|
|
||||||
@media (max-width: 640px) {
|
@media (max-width: 640px) {
|
||||||
.brand-lockup__name {
|
.brand-lockup__name {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
@@ -997,33 +981,3 @@
|
|||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ── 560px: Phone-sized compact layout ── */
|
|
||||||
@media (max-width: 560px) {
|
|
||||||
.web-topbar {
|
|
||||||
flex: 0 0 44px;
|
|
||||||
padding: 6px 10px;
|
|
||||||
gap: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.brand-lockup {
|
|
||||||
gap: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.brand-lockup__mark {
|
|
||||||
width: 24px;
|
|
||||||
height: 24px;
|
|
||||||
border-radius: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.brand-lockup__name {
|
|
||||||
font-size: 13px;
|
|
||||||
max-width: 80px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.profile-button,
|
|
||||||
.icon-button {
|
|
||||||
min-width: 36px;
|
|
||||||
height: 36px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -1485,40 +1485,6 @@
|
|||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.web-shell[data-ui-theme="dark-green"] .ai-workbench-select-chip__option-icon {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
flex: 0 0 24px;
|
|
||||||
width: 24px;
|
|
||||||
height: 24px;
|
|
||||||
margin-top: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.075);
|
|
||||||
border-radius: 8px;
|
|
||||||
background: rgba(255, 255, 255, 0.04);
|
|
||||||
}
|
|
||||||
|
|
||||||
.web-shell[data-ui-theme="dark-green"] .ai-workbench-select-chip__option-icon img {
|
|
||||||
display: block;
|
|
||||||
width: 16px;
|
|
||||||
height: 16px;
|
|
||||||
object-fit: contain;
|
|
||||||
filter: brightness(0) invert(1);
|
|
||||||
opacity: 0.86;
|
|
||||||
}
|
|
||||||
|
|
||||||
.web-shell[data-ui-theme="dark-green"] .ai-workbench-select-chip__option:hover .ai-workbench-select-chip__option-icon,
|
|
||||||
.web-shell[data-ui-theme="dark-green"] .ai-workbench-select-chip__option.is-active .ai-workbench-select-chip__option-icon {
|
|
||||||
border-color: rgba(var(--accent-rgb), 0.2);
|
|
||||||
background: rgba(var(--accent-rgb), 0.08);
|
|
||||||
}
|
|
||||||
|
|
||||||
.web-shell[data-ui-theme="dark-green"] .ai-workbench-select-chip__option:hover .ai-workbench-select-chip__option-icon img,
|
|
||||||
.web-shell[data-ui-theme="dark-green"] .ai-workbench-select-chip__option.is-active .ai-workbench-select-chip__option-icon img {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.web-shell[data-ui-theme="dark-green"] .ai-workbench-select-chip__option-copy {
|
.web-shell[data-ui-theme="dark-green"] .ai-workbench-select-chip__option-copy {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
@@ -7399,93 +7365,6 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Profile center: align with the ecommerce generator's flatter dark-green tone. */
|
|
||||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard {
|
|
||||||
background: var(--bg-base);
|
|
||||||
}
|
|
||||||
|
|
||||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__banner {
|
|
||||||
background: var(--bg-panel);
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__banner.has-image {
|
|
||||||
background-color: var(--bg-panel);
|
|
||||||
background-blend-mode: luminosity;
|
|
||||||
}
|
|
||||||
|
|
||||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__banner-overlay {
|
|
||||||
background:
|
|
||||||
linear-gradient(180deg, rgba(13, 15, 15, 0.7), rgba(13, 15, 15, 0.88)),
|
|
||||||
linear-gradient(90deg, rgba(13, 15, 15, 0.62), rgba(13, 15, 15, 0.28) 44%, rgba(13, 15, 15, 0.68));
|
|
||||||
}
|
|
||||||
|
|
||||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__sidebar,
|
|
||||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__account-card,
|
|
||||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__main-tabs,
|
|
||||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__section,
|
|
||||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__list-card,
|
|
||||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__review-item,
|
|
||||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__empty-state,
|
|
||||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__upload-card {
|
|
||||||
border-color: var(--border-weak);
|
|
||||||
background: var(--bg-panel);
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__main-tabs,
|
|
||||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__account-card .profile-page__list-tabs {
|
|
||||||
background: var(--bg-inset);
|
|
||||||
}
|
|
||||||
|
|
||||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__main-tabs button,
|
|
||||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__account-card .profile-page__list-tabs button {
|
|
||||||
border: 1px solid transparent;
|
|
||||||
background: transparent;
|
|
||||||
color: var(--fg-soft);
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__main-tabs button.is-active,
|
|
||||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__account-card .profile-page__list-tabs button.is-active {
|
|
||||||
border-color: rgba(var(--accent-rgb), 0.42);
|
|
||||||
background: rgba(var(--accent-rgb), 0.12);
|
|
||||||
color: var(--accent);
|
|
||||||
}
|
|
||||||
|
|
||||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__bio-display,
|
|
||||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__bio,
|
|
||||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__count,
|
|
||||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__account-summary,
|
|
||||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__account-card .profile-page__meta-item {
|
|
||||||
border-color: rgba(255, 255, 255, 0.065);
|
|
||||||
background: rgba(255, 255, 255, 0.024);
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__list-card-preview,
|
|
||||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__list-card-preview:not(.has-media) {
|
|
||||||
border-color: rgba(255, 255, 255, 0.065);
|
|
||||||
background: rgba(255, 255, 255, 0.024);
|
|
||||||
}
|
|
||||||
|
|
||||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__list-card-placeholder {
|
|
||||||
border-color: rgba(var(--accent-rgb), 0.2);
|
|
||||||
background: rgba(var(--accent-rgb), 0.08);
|
|
||||||
color: var(--accent);
|
|
||||||
}
|
|
||||||
|
|
||||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__media-badge {
|
|
||||||
background: rgba(8, 14, 12, 0.78);
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__share-btn,
|
|
||||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__avatar,
|
|
||||||
.web-shell[data-ui-theme="dark-green"] .profile-page--dashboard .profile-page__avatar-ring .profile-page__avatar {
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Ecommerce generation page: keep its carousel and composer independent from
|
/* Ecommerce generation page: keep its carousel and composer independent from
|
||||||
the community carousel rules that share class names. */
|
the community carousel rules that share class names. */
|
||||||
.web-shell[data-ui-theme="dark-green"] .ecommerce-landing-page {
|
.web-shell[data-ui-theme="dark-green"] .ecommerce-landing-page {
|
||||||
|
|||||||
@@ -84,14 +84,3 @@
|
|||||||
--danger: var(--error);
|
--danger: var(--error);
|
||||||
--shadow-soft: var(--shadow-panel);
|
--shadow-soft: var(--shadow-panel);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ═══════════════════════════════════════════════════════
|
|
||||||
Responsive Breakpoints (standardized)
|
|
||||||
Reference-only — CSS custom properties cannot be used
|
|
||||||
inside @media queries, but all pages should align to
|
|
||||||
these three breakpoints for consistency.
|
|
||||||
|
|
||||||
Phone : 560px (max-width — portrait / landscape)
|
|
||||||
Tablet : 900px (max-width — tablet / small desktop)
|
|
||||||
Desktop: 1180px (max-width — large desktop)
|
|
||||||
═══════════════════════════════════════════════════════ */
|
|
||||||
|
|||||||
Reference in New Issue
Block a user