@primestyleai/tryon 3.6.4 → 3.6.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/react/index.js +12 -2
- package/package.json +1 -1
package/dist/react/index.js
CHANGED
|
@@ -814,6 +814,7 @@ function PrimeStyleTryonInner({
|
|
|
814
814
|
function UploadView() {
|
|
815
815
|
return /* @__PURE__ */ jsx(Fragment, { children: selectedFile && previewUrl ? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
816
816
|
/* @__PURE__ */ jsxs("div", { className: cx("ps-tryon-preview", cn.preview), children: [
|
|
817
|
+
/* @__PURE__ */ jsx("div", { className: "ps-tryon-preview-blur", style: { backgroundImage: `url(${previewUrl})` } }),
|
|
817
818
|
/* @__PURE__ */ jsx("img", { src: previewUrl, alt: "Your photo", className: cn.previewImage }),
|
|
818
819
|
/* @__PURE__ */ jsx("button", { onClick: handleRemovePreview, className: cx("ps-tryon-preview-remove", cn.removeButton), children: "×" })
|
|
819
820
|
] }),
|
|
@@ -1456,8 +1457,16 @@ const STYLES = `
|
|
|
1456
1457
|
.ps-tryon-upload svg { color: var(--ps-upload-icon-color, #bb945c); margin-bottom: clamp(7px, 0.63vw, 12px); }
|
|
1457
1458
|
.ps-tryon-upload-text { font-size: clamp(10px, 0.73vw, 14px); color: var(--ps-upload-color, #fff); margin: 0 0 clamp(2px, 0.21vw, 4px); }
|
|
1458
1459
|
.ps-tryon-upload-hint { font-size: clamp(9px, 0.63vw, 12px); color: #999; margin: 0; }
|
|
1459
|
-
.ps-tryon-preview {
|
|
1460
|
-
|
|
1460
|
+
.ps-tryon-preview {
|
|
1461
|
+
position: relative; margin-bottom: clamp(2px, 0.21vw, 4px);
|
|
1462
|
+
height: clamp(280px, 20vw, 380px); border-radius: clamp(8px, 0.63vw, 12px);
|
|
1463
|
+
overflow: hidden; background: #0a0a0a;
|
|
1464
|
+
}
|
|
1465
|
+
.ps-tryon-preview-blur {
|
|
1466
|
+
position: absolute; inset: -20px; background-size: cover; background-position: center;
|
|
1467
|
+
filter: blur(25px) brightness(0.4); transform: scale(1.2);
|
|
1468
|
+
}
|
|
1469
|
+
.ps-tryon-preview img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; display: block; }
|
|
1461
1470
|
.ps-tryon-preview-remove {
|
|
1462
1471
|
position: absolute; top: clamp(5px, 0.42vw, 8px); right: clamp(5px, 0.42vw, 8px); width: clamp(20px, 1.46vw, 28px); height: clamp(20px, 1.46vw, 28px);
|
|
1463
1472
|
border-radius: 50%; background: rgba(0,0,0,0.6); border: none; color: white;
|
|
@@ -1860,6 +1869,7 @@ const STYLES = `
|
|
|
1860
1869
|
.ps-tryon-modal-wide { max-width: 100%; }
|
|
1861
1870
|
.ps-tryon-modal > :last-child { flex: 1; }
|
|
1862
1871
|
.ps-tryon-header { border-radius: 0; }
|
|
1872
|
+
.ps-tryon-preview { height: 320px; }
|
|
1863
1873
|
}
|
|
1864
1874
|
@media (max-width: 720px) {
|
|
1865
1875
|
.ps-tryon-result-split { flex-direction: column; }
|