diff --git a/src/styles/ecommerce-standalone.css b/src/styles/ecommerce-standalone.css index 839e7c6..f5cb420 100644 --- a/src/styles/ecommerce-standalone.css +++ b/src/styles/ecommerce-standalone.css @@ -9478,6 +9478,446 @@ font-size: 14px !important; } +/* Quick tools polish: refined layout, controls, and preview surfaces. */ +.ecommerce-standalone .ecom-quick-page-wrap, +.ecommerce-standalone .ecom-quick-set-page, +.ecommerce-standalone .ecom-watermark-page, +.ecommerce-standalone .ecom-image-workbench-page { + --quick-border: rgba(26, 74, 108, 0.11); + --quick-border-strong: rgba(16, 115, 204, 0.2); + --quick-surface: #ffffff; + --quick-surface-soft: #f7f9fb; + --quick-surface-tint: #edf8ff; + --quick-text: #162535; + --quick-muted: #657686; + --quick-accent: #1073cc; + --quick-cyan: #1ebddb; +} + +.ecommerce-standalone .ecom-quick-page-wrap { + background: + linear-gradient(90deg, rgba(255, 255, 255, 0.82), transparent 420px), + linear-gradient(rgba(16, 115, 204, 0.025) 1px, transparent 1px), + linear-gradient(90deg, rgba(16, 115, 204, 0.02) 1px, transparent 1px), + #f6f8fa !important; + background-size: auto, 28px 28px, 28px 28px, auto !important; +} + +.ecommerce-standalone .ecom-quick-page-sidebar { + width: 76px !important; + flex: 0 0 76px !important; + gap: 8px !important; + padding: 16px 8px !important; + border-right: 1px solid var(--quick-border) !important; + background: + linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 253, 0.94)) !important; + box-shadow: 10px 0 28px rgba(16, 115, 204, 0.04) !important; +} + +.ecommerce-standalone .ecom-quick-page-sidebar button { + min-height: 64px !important; + padding: 8px 4px !important; + border: 1px solid transparent !important; + border-radius: 8px !important; + color: #506475 !important; + background: transparent !important; + box-shadow: none !important; +} + +.ecommerce-standalone .ecom-quick-page-sidebar button:hover { + border-color: rgba(30, 189, 219, 0.18) !important; + background: rgba(237, 248, 255, 0.82) !important; + box-shadow: 0 8px 18px rgba(16, 115, 204, 0.08) !important; +} + +.ecommerce-standalone .ecom-quick-page-sidebar button.is-active { + border-color: rgba(16, 115, 204, 0.22) !important; + color: var(--quick-accent) !important; + background: linear-gradient(180deg, #edf8ff, #f8fdff) !important; + box-shadow: 0 10px 24px rgba(16, 115, 204, 0.1) !important; +} + +.ecommerce-standalone .ecom-quick-page-sidebar button.is-active::before { + left: -8px !important; + top: 12px !important; + bottom: 12px !important; + width: 3px !important; + border-radius: 999px !important; + background: linear-gradient(180deg, var(--quick-cyan), var(--quick-accent)) !important; +} + +.ecommerce-standalone .ecom-quick-set-body { + grid-template-columns: minmax(386px, 420px) minmax(0, 1fr) !important; + background: transparent !important; +} + +.ecommerce-standalone .ecom-hot-video-page .ecom-quick-set-body { + grid-template-columns: minmax(366px, 404px) minmax(0, 1fr) !important; +} + +.ecommerce-standalone .ecom-quick-set-panel, +.ecommerce-standalone .ecom-watermark-side, +.ecommerce-standalone .ecom-image-workbench-side { + gap: 12px !important; + padding: 18px 16px !important; + border-color: var(--quick-border) !important; + border-radius: 0 !important; + background: + linear-gradient(180deg, rgba(247, 250, 252, 0.92), transparent 150px), + var(--quick-surface) !important; + box-shadow: 12px 0 32px rgba(16, 115, 204, 0.045) !important; + scrollbar-width: thin !important; + scrollbar-color: rgba(16, 115, 204, 0.32) transparent !important; +} + +.ecommerce-standalone .ecom-watermark-side, +.ecommerce-standalone .ecom-image-workbench-side { + border-radius: 8px !important; + box-shadow: 0 14px 34px rgba(16, 115, 204, 0.07) !important; +} + +.ecommerce-standalone .ecom-quick-set-panel-head { + position: sticky !important; + top: -18px !important; + z-index: 12 !important; + min-height: 42px !important; + margin: -18px -16px 2px !important; + padding: 14px 16px 10px !important; + border-bottom: 1px solid rgba(16, 115, 204, 0.08) !important; + background: rgba(255, 255, 255, 0.92) !important; + backdrop-filter: blur(14px) !important; + -webkit-backdrop-filter: blur(14px) !important; +} + +.ecommerce-standalone .ecom-quick-set-page-title { + color: var(--quick-text) !important; + font-size: 18px !important; + font-weight: 950 !important; + line-height: 1.2 !important; +} + +.ecommerce-standalone .ecom-quick-set-back { + min-height: 30px !important; + padding: 0 10px !important; + border: 1px solid rgba(16, 115, 204, 0.12) !important; + border-radius: 8px !important; + color: #526474 !important; + background: #f7fafc !important; + box-shadow: none !important; +} + +.ecommerce-standalone .ecom-quick-set-back:hover { + border-color: rgba(30, 189, 219, 0.32) !important; + color: var(--quick-accent) !important; + background: var(--quick-surface-tint) !important; +} + +.ecommerce-standalone .ecom-watermark-intro, +.ecommerce-standalone .ecom-image-workbench-intro { + margin: 0 2px 2px !important; + color: var(--quick-muted) !important; + font-size: 12px !important; + font-weight: 750 !important; + line-height: 1.65 !important; +} + +.ecommerce-standalone .ecom-quick-set-panel section, +.ecommerce-standalone .ecom-watermark-panel, +.ecommerce-standalone .ecom-image-workbench-panel { + gap: 10px !important; + padding: 13px !important; + border: 1px solid var(--quick-border) !important; + border-radius: 8px !important; + background: #ffffff !important; + box-shadow: none !important; +} + +.ecommerce-standalone .ecom-quick-set-panel section > strong, +.ecommerce-standalone .ecom-watermark-panel > strong, +.ecommerce-standalone .ecom-image-workbench-panel > strong, +.ecommerce-standalone .ecom-quick-set-panel section header strong, +.ecommerce-standalone .ecom-watermark-panel header strong, +.ecommerce-standalone .ecom-image-workbench-panel header strong { + color: var(--quick-text) !important; + font-size: 13px !important; + font-weight: 950 !important; +} + +.ecommerce-standalone .ecom-quick-set-panel header span, +.ecommerce-standalone .ecom-watermark-panel header span, +.ecommerce-standalone .ecom-image-workbench-panel header span { + border-radius: 999px !important; + color: #276987 !important; + background: #eef7fa !important; +} + +.ecommerce-standalone .ecom-quick-set-upload, +.ecommerce-standalone .ecom-watermark-upload-card, +.ecommerce-standalone .ecom-image-workbench-upload { + min-height: 112px !important; + border-color: rgba(30, 189, 219, 0.34) !important; + border-radius: 8px !important; + background: + linear-gradient(180deg, rgba(237, 248, 255, 0.72), rgba(255, 255, 255, 0.94)) !important; + transition: + border-color 160ms ease, + background 160ms ease, + box-shadow 160ms ease, + transform 160ms ease !important; +} + +.ecommerce-standalone .ecom-quick-set-upload:hover, +.ecommerce-standalone .ecom-watermark-upload-card:hover, +.ecommerce-standalone .ecom-image-workbench-upload:hover, +.ecommerce-standalone .ecom-watermark-upload-card.is-dragging, +.ecommerce-standalone .ecom-image-workbench-upload.is-dragging { + border-color: var(--quick-cyan) !important; + background: #f7fcff !important; + box-shadow: 0 10px 24px rgba(16, 115, 204, 0.09) !important; + transform: translateY(-1px) !important; +} + +.ecommerce-standalone .ecom-quick-upload-thumbs { + width: 100% !important; + padding-top: 4px !important; + justify-content: center !important; +} + +.ecommerce-standalone .ecom-command-asset-thumb.ecom-quick-upload-thumb { + border-radius: 8px !important; + box-shadow: 0 6px 16px rgba(16, 115, 204, 0.08) !important; +} + +.ecommerce-standalone .ecom-quick-set-selects button, +.ecommerce-standalone .ecom-quick-detail-types button, +.ecommerce-standalone .ecom-hot-video-options button, +.ecommerce-standalone .ecom-quick-detail-modules button, +.ecommerce-standalone .ecom-quick-set-counts article, +.ecommerce-standalone .ecom-image-workbench-ratios, +.ecommerce-standalone .ecom-image-workbench-clear, +.ecommerce-standalone .ecom-watermark-url-row input, +.ecommerce-standalone .ecom-image-workbench-url-row input, +.ecommerce-standalone .ecom-quick-set-panel textarea, +.ecommerce-standalone .ecom-image-workbench-panel textarea { + border-radius: 8px !important; +} + +.ecommerce-standalone .ecom-quick-set-selects button, +.ecommerce-standalone .ecom-quick-detail-types button, +.ecommerce-standalone .ecom-hot-video-options button, +.ecommerce-standalone .ecom-quick-detail-modules button, +.ecommerce-standalone .ecom-quick-set-counts article { + border-color: var(--quick-border) !important; + background: var(--quick-surface-soft) !important; + transition: + border-color 160ms ease, + background 160ms ease, + box-shadow 160ms ease, + transform 160ms ease !important; +} + +.ecommerce-standalone .ecom-quick-set-selects button:hover, +.ecommerce-standalone .ecom-quick-detail-types button:hover, +.ecommerce-standalone .ecom-hot-video-options button:hover, +.ecommerce-standalone .ecom-quick-detail-modules button:hover, +.ecommerce-standalone .ecom-quick-set-counts article:hover { + border-color: rgba(16, 115, 204, 0.24) !important; + background: #ffffff !important; + box-shadow: 0 8px 18px rgba(16, 115, 204, 0.07) !important; +} + +.ecommerce-standalone .ecom-quick-set-selects button.is-active, +.ecommerce-standalone .ecom-quick-detail-types button.is-active, +.ecommerce-standalone .ecom-hot-video-options button.is-active, +.ecommerce-standalone .ecom-quick-detail-modules button.is-active { + border-color: rgba(16, 115, 204, 0.34) !important; + background: linear-gradient(180deg, #edf8ff, #f8fdff) !important; + box-shadow: inset 0 0 0 1px rgba(30, 189, 219, 0.08), 0 8px 18px rgba(16, 115, 204, 0.07) !important; +} + +.ecommerce-standalone .ecom-quick-set-counts p { + border-radius: 8px !important; + background: #ffffff !important; +} + +.ecommerce-standalone .ecom-quick-set-counts p button:disabled { + color: #b3c1ca !important; + cursor: not-allowed !important; +} + +.ecommerce-standalone .ecom-quick-set-primary, +.ecommerce-standalone .ecom-watermark-primary, +.ecommerce-standalone .ecom-image-workbench-primary { + min-height: 48px !important; + border-radius: 8px !important; + background: linear-gradient(135deg, #0f6fbd 0%, #19adc8 100%) !important; + box-shadow: 0 12px 28px rgba(16, 115, 204, 0.18) !important; + transition: + transform 160ms ease, + box-shadow 160ms ease, + filter 160ms ease !important; +} + +.ecommerce-standalone .ecom-quick-set-primary:hover:not(:disabled), +.ecommerce-standalone .ecom-watermark-primary:hover:not(:disabled), +.ecommerce-standalone .ecom-image-workbench-primary:hover:not(:disabled) { + box-shadow: 0 16px 34px rgba(16, 115, 204, 0.22) !important; + filter: saturate(1.04) !important; + transform: translateY(-1px) !important; +} + +.ecommerce-standalone .ecom-quick-set-primary:disabled, +.ecommerce-standalone .ecom-watermark-primary:disabled, +.ecommerce-standalone .ecom-image-workbench-primary:disabled { + color: #8fa1af !important; + background: #edf1f4 !important; + box-shadow: none !important; + transform: none !important; +} + +.ecommerce-standalone .ecom-quick-set-stage, +.ecommerce-standalone .ecom-hot-video-page .ecom-quick-set-stage { + gap: 16px !important; + padding: 26px 32px !important; + background: + radial-gradient(circle at 20% 18%, rgba(30, 189, 219, 0.08), transparent 20rem), + radial-gradient(circle at 82% 22%, rgba(16, 115, 204, 0.055), transparent 22rem), + #f7f9fb !important; +} + +.ecommerce-standalone .ecom-quick-set-preview-head, +.ecommerce-standalone .ecom-hot-video-page .ecom-video-preview-head { + padding-bottom: 16px !important; + border-bottom-color: rgba(26, 74, 108, 0.1) !important; +} + +.ecommerce-standalone .ecom-quick-set-preview-head h1, +.ecommerce-standalone .ecom-hot-video-page .ecom-video-preview-copy h1 { + font-size: 24px !important; + font-weight: 950 !important; +} + +.ecommerce-standalone .ecom-quick-set-preview-head p, +.ecommerce-standalone .ecom-hot-video-page .ecom-video-preview-copy p { + max-width: 720px !important; + color: var(--quick-muted) !important; + line-height: 1.65 !important; +} + +.ecommerce-standalone .ecom-quick-set-preview-head div button, +.ecommerce-standalone .ecom-hot-video-page .ecom-video-flowbar__zoom button { + border: 1px solid rgba(16, 115, 204, 0.1) !important; + border-radius: 8px !important; + background: #edf8ff !important; +} + +.ecommerce-standalone .ecom-quick-set-canvas, +.ecommerce-standalone .ecom-hot-video-page .ecom-video-workspace, +.ecommerce-standalone .ecom-watermark-workspace, +.ecommerce-standalone .ecom-image-workbench-stage { + border-color: var(--quick-border) !important; + border-radius: 8px !important; + background: + linear-gradient(rgba(16, 115, 204, 0.026) 1px, transparent 1px), + linear-gradient(90deg, rgba(16, 115, 204, 0.022) 1px, transparent 1px), + #ffffff !important; + background-size: 26px 26px, 26px 26px, auto !important; + box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 12px 30px rgba(16, 115, 204, 0.05) !important; +} + +.ecommerce-standalone .ecom-quick-set-empty, +.ecommerce-standalone .ecom-watermark-dropzone, +.ecommerce-standalone .ecom-image-workbench-empty, +.ecommerce-standalone .ecom-watermark-empty, +.ecommerce-standalone .ecom-watermark-processing { + border-radius: 8px !important; + border-color: rgba(16, 115, 204, 0.13) !important; + background: rgba(255, 255, 255, 0.88) !important; + box-shadow: 0 12px 28px rgba(16, 115, 204, 0.055) !important; +} + +.ecommerce-standalone .ecom-quick-set-result-card, +.ecommerce-standalone .ecom-quick-detail-preview-card, +.ecommerce-standalone .ecom-quick-detail-result { + border-radius: 8px !important; + border-color: var(--quick-border) !important; + box-shadow: 0 18px 44px rgba(16, 115, 204, 0.08) !important; +} + +.ecommerce-standalone .ecom-quick-set-result-card figure, +.ecommerce-standalone .ecom-quick-detail-preview-card figure, +.ecommerce-standalone .ecom-quick-detail-result, +.ecommerce-standalone .ecom-watermark-preview-card > img, +.ecommerce-standalone .ecom-image-workbench-preview { + border-radius: 8px !important; +} + +.ecommerce-standalone .ecom-quick-set-prompt { + border-radius: 8px !important; + border-color: var(--quick-border) !important; + box-shadow: 0 12px 28px rgba(16, 115, 204, 0.055) !important; +} + +.ecommerce-standalone .ecom-quick-set-prompt textarea { + min-height: 70px !important; + font-size: 13px !important; +} + +.ecommerce-standalone .ecom-watermark-grid { + border: 0 !important; + border-radius: 8px !important; + gap: 1px !important; + background: rgba(16, 115, 204, 0.08) !important; +} + +.ecommerce-standalone .ecom-watermark-preview-card { + background: + linear-gradient(rgba(16, 115, 204, 0.024) 1px, transparent 1px), + linear-gradient(90deg, rgba(16, 115, 204, 0.02) 1px, transparent 1px), + #ffffff !important; + background-size: 24px 24px, 24px 24px, auto !important; +} + +.ecommerce-standalone .ecom-watermark-preview-card:first-child { + border-right: 0 !important; +} + +.ecommerce-standalone .ecom-image-workbench-canvas { + border-radius: 8px !important; +} + +.ecommerce-standalone .ecom-image-workbench-image-frame { + border-radius: 8px !important; + box-shadow: 0 16px 38px rgba(16, 115, 204, 0.1) !important; +} + +.ecommerce-standalone .ecom-hot-video-page .ecom-video-flow-canvas, +.ecommerce-standalone .ecom-hot-video-page .ecom-video-canvas { + background: + linear-gradient(rgba(16, 115, 204, 0.024) 1px, transparent 1px), + linear-gradient(90deg, rgba(16, 115, 204, 0.02) 1px, transparent 1px), + #ffffff !important; + background-size: 24px 24px, 24px 24px, auto !important; +} + +.ecommerce-standalone .ecom-quick-set-help { + border-radius: 8px !important; + color: #526474 !important; + background: rgba(255, 255, 255, 0.92) !important; + backdrop-filter: blur(12px) !important; + -webkit-backdrop-filter: blur(12px) !important; +} + +@media (max-width: 1280px) { + .ecommerce-standalone .ecom-quick-set-body { + grid-template-columns: minmax(330px, 370px) minmax(0, 1fr) !important; + } + + .ecommerce-standalone .ecom-hot-video-page .ecom-quick-set-body { + grid-template-columns: minmax(320px, 360px) minmax(0, 1fr) !important; + } +} + /* ── Quick Page Responsive ── */ @media (max-width: 1280px) { .ecommerce-standalone .ecom-quick-set-body {