@primestyleai/tryon 3.11.0 → 3.13.0
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.
|
@@ -207,6 +207,7 @@ const en = {
|
|
|
207
207
|
"Looking for size chart data for this product": "Looking for size chart data for this product",
|
|
208
208
|
"How would you like to find your size?": "How would you like to find your size?",
|
|
209
209
|
"Size guide is not available for this product — sizing will use standard measurements": "Size guide is not available for this product — sizing will use standard measurements",
|
|
210
|
+
"This product doesn't have a size guide — you can still see how it looks on you!": "This product doesn't have a size guide — you can still see how it looks on you!",
|
|
210
211
|
"Size guide found for this product": "Size guide found for this product",
|
|
211
212
|
"Enter my measurements": "Enter my measurements",
|
|
212
213
|
"Chest, waist, hips, shoes & more": "Chest, waist, hips, shoes & more",
|
package/dist/primestyle-tryon.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { c as createT, A as ApiClient, S as SseClient, i as isValidImageFile, a as compressImage } from "./index-
|
|
2
|
-
import { P, b, T, d, r } from "./index-
|
|
1
|
+
import { c as createT, A as ApiClient, S as SseClient, i as isValidImageFile, a as compressImage } from "./index-25Bm_pob.js";
|
|
2
|
+
import { P, b, T, d, r } from "./index-25Bm_pob.js";
|
|
3
3
|
function detectProductImage() {
|
|
4
4
|
const ogImage = document.querySelector(
|
|
5
5
|
'meta[property="og:image"]'
|
package/dist/react/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx, jsxs, Fragment } from "react/jsx-runtime";
|
|
3
3
|
import { useState, useEffect, useMemo, useRef, useCallback } from "react";
|
|
4
|
-
import { c as createT, A as ApiClient, S as SseClient, i as isValidImageFile, a as compressImage, P as PrimeStyleError, L as LOCALE_LABELS, b as SUPPORTED_LOCALES } from "../index-
|
|
4
|
+
import { c as createT, A as ApiClient, S as SseClient, i as isValidImageFile, a as compressImage, P as PrimeStyleError, L as LOCALE_LABELS, b as SUPPORTED_LOCALES } from "../index-25Bm_pob.js";
|
|
5
5
|
const HEADER_ALIASES = {
|
|
6
6
|
// ── Size label columns (skipped during field derivation) ──
|
|
7
7
|
size: "__size__",
|
|
@@ -406,20 +406,6 @@ const FALLBACK_FIELDS_MALE = [
|
|
|
406
406
|
{ key: "inseam", label: "Inseam", required: false, unit: "cm", placeholder: "e.g. 81", category: "body" },
|
|
407
407
|
{ key: "footLengthCm", label: "Foot length", required: false, unit: "cm", placeholder: "e.g. 27", category: "shoe" }
|
|
408
408
|
];
|
|
409
|
-
const SIZING_COUNTRIES = [
|
|
410
|
-
{ code: "US", label: "United States" },
|
|
411
|
-
{ code: "UK", label: "United Kingdom" },
|
|
412
|
-
{ code: "EU", label: "Europe (EU)" },
|
|
413
|
-
{ code: "FR", label: "France" },
|
|
414
|
-
{ code: "IT", label: "Italy" },
|
|
415
|
-
{ code: "DE", label: "Germany" },
|
|
416
|
-
{ code: "ES", label: "Spain" },
|
|
417
|
-
{ code: "JP", label: "Japan" },
|
|
418
|
-
{ code: "CN", label: "China" },
|
|
419
|
-
{ code: "KR", label: "South Korea" },
|
|
420
|
-
{ code: "AU", label: "Australia" },
|
|
421
|
-
{ code: "BR", label: "Brazil" }
|
|
422
|
-
];
|
|
423
409
|
const STEP_LABELS = ["", "Welcome", "Size", "Your Fit", "Try On"];
|
|
424
410
|
const TOTAL_STEPS = 4;
|
|
425
411
|
function detectLocale() {
|
|
@@ -1268,11 +1254,16 @@ function PrimeStyleTryonInner({
|
|
|
1268
1254
|
}
|
|
1269
1255
|
return /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sizing-choice", children: [
|
|
1270
1256
|
/* @__PURE__ */ jsx("h3", { className: "ps-tryon-section-title", children: t("How would you like to find your size?") }),
|
|
1271
|
-
sgChecked && !sgAvailable && /* @__PURE__ */
|
|
1272
|
-
|
|
1273
|
-
/* @__PURE__ */
|
|
1274
|
-
|
|
1275
|
-
|
|
1257
|
+
sgChecked && !sgAvailable && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-sg-notice", children: [
|
|
1258
|
+
t("This product doesn't have a size guide — you can still see how it looks on you!"),
|
|
1259
|
+
/* @__PURE__ */ jsxs("button", { className: "ps-tryon-sg-notice-cta", onClick: () => {
|
|
1260
|
+
setSizingMethod(null);
|
|
1261
|
+
setView("upload");
|
|
1262
|
+
}, children: [
|
|
1263
|
+
t("Try It On"),
|
|
1264
|
+
" ",
|
|
1265
|
+
/* @__PURE__ */ jsx(ArrowRightIcon, {})
|
|
1266
|
+
] })
|
|
1276
1267
|
] }),
|
|
1277
1268
|
/* @__PURE__ */ jsxs("div", { className: "ps-tryon-choice-cards", children: [
|
|
1278
1269
|
/* @__PURE__ */ jsxs("button", { className: "ps-tryon-choice-card", onClick: () => {
|
|
@@ -1331,28 +1322,24 @@ function PrimeStyleTryonInner({
|
|
|
1331
1322
|
")"
|
|
1332
1323
|
] }, p.id))
|
|
1333
1324
|
] }) }),
|
|
1334
|
-
/* @__PURE__ */ jsxs("div", { className: "ps-tryon-
|
|
1335
|
-
/* @__PURE__ */
|
|
1336
|
-
|
|
1337
|
-
|
|
1338
|
-
|
|
1339
|
-
|
|
1340
|
-
|
|
1341
|
-
/* @__PURE__ */ jsx("
|
|
1342
|
-
|
|
1343
|
-
|
|
1344
|
-
|
|
1325
|
+
sizingMethod === "exact" && /* @__PURE__ */ jsxs("div", { className: "ps-tryon-unit-switch", children: [
|
|
1326
|
+
/* @__PURE__ */ jsxs("button", { className: `ps-tryon-unit-switch-btn${isCm ? " ps-active" : ""}`, onClick: () => {
|
|
1327
|
+
setSizingUnit("cm");
|
|
1328
|
+
setHeightUnit("cm");
|
|
1329
|
+
setWeightUnit("kg");
|
|
1330
|
+
}, children: [
|
|
1331
|
+
/* @__PURE__ */ jsx("span", { className: "ps-tryon-unit-switch-label", children: t("cm") }),
|
|
1332
|
+
/* @__PURE__ */ jsx("span", { className: "ps-tryon-unit-switch-sub", children: "cm / kg" })
|
|
1333
|
+
] }),
|
|
1334
|
+
/* @__PURE__ */ jsxs("button", { className: `ps-tryon-unit-switch-btn${!isCm ? " ps-active" : ""}`, onClick: () => {
|
|
1335
|
+
setSizingUnit("in");
|
|
1336
|
+
setHeightUnit("ft");
|
|
1337
|
+
setWeightUnit("lbs");
|
|
1338
|
+
}, children: [
|
|
1339
|
+
/* @__PURE__ */ jsx("span", { className: "ps-tryon-unit-switch-label", children: t("in") }),
|
|
1340
|
+
/* @__PURE__ */ jsx("span", { className: "ps-tryon-unit-switch-sub", children: "in / lbs" })
|
|
1345
1341
|
] })
|
|
1346
1342
|
] }),
|
|
1347
|
-
/* @__PURE__ */ jsxs("div", { className: "ps-tryon-input-row", children: [
|
|
1348
|
-
/* @__PURE__ */ jsx("label", { children: t("Sizing region") }),
|
|
1349
|
-
/* @__PURE__ */ jsx("select", { className: "ps-tryon-country-select", value: sizingCountry, onChange: (e) => setSizingCountry(e.target.value), children: SIZING_COUNTRIES.map((c) => /* @__PURE__ */ jsx("option", { value: c.code, children: t(c.label) }, c.code)) })
|
|
1350
|
-
] }),
|
|
1351
|
-
sizingMethod === "exact" && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(UnitToggle, { options: [{ label: t("cm"), value: "cm" }, { label: t("in"), value: "in" }], value: sizingUnit, onChange: (v) => {
|
|
1352
|
-
setSizingUnit(v);
|
|
1353
|
-
setHeightUnit(v === "cm" ? "cm" : "ft");
|
|
1354
|
-
setWeightUnit(v === "cm" ? "kg" : "lbs");
|
|
1355
|
-
} }) }),
|
|
1356
1343
|
sizingMethod === "exact" ? /* @__PURE__ */ jsx(Fragment, { children: (() => {
|
|
1357
1344
|
const reqFields = dynamicFields.filter((f) => f.required);
|
|
1358
1345
|
const optFields = dynamicFields.filter((f) => !f.required);
|
|
@@ -1800,17 +1787,17 @@ const STYLES = `
|
|
|
1800
1787
|
.ps-tryon-root { display: inline-block; }
|
|
1801
1788
|
|
|
1802
1789
|
.ps-tryon-btn {
|
|
1803
|
-
display: inline-flex; align-items: center; gap:
|
|
1804
|
-
padding: var(--ps-btn-padding,
|
|
1790
|
+
display: inline-flex; align-items: center; gap: 0.42vw;
|
|
1791
|
+
padding: var(--ps-btn-padding, 0.63vw 1.25vw);
|
|
1805
1792
|
background: var(--ps-btn-bg, #bb945c); color: var(--ps-btn-color, #111211);
|
|
1806
1793
|
font-family: var(--ps-btn-font, system-ui, -apple-system, sans-serif);
|
|
1807
|
-
font-size: var(--ps-btn-font-size,
|
|
1808
|
-
border: var(--ps-btn-border, none); border-radius: var(--ps-btn-radius,
|
|
1794
|
+
font-size: var(--ps-btn-font-size, 0.73vw); font-weight: var(--ps-btn-font-weight, 600);
|
|
1795
|
+
border: var(--ps-btn-border, none); border-radius: var(--ps-btn-radius, 0.42vw);
|
|
1809
1796
|
cursor: pointer; transition: all 0.2s ease;
|
|
1810
1797
|
width: var(--ps-btn-width, auto); height: var(--ps-btn-height, auto);
|
|
1811
1798
|
box-shadow: var(--ps-btn-shadow, none); line-height: 1; white-space: nowrap;
|
|
1812
1799
|
}
|
|
1813
|
-
.ps-tryon-btn svg { width: var(--ps-btn-icon-size,
|
|
1800
|
+
.ps-tryon-btn svg { width: var(--ps-btn-icon-size, 0.94vw); height: var(--ps-btn-icon-size, 0.94vw); flex-shrink: 0; }
|
|
1814
1801
|
.ps-tryon-btn:hover { background: var(--ps-btn-hover-bg, #a07d4e); transform: translateY(-1px); }
|
|
1815
1802
|
.ps-tryon-btn:active { transform: translateY(0); }
|
|
1816
1803
|
|
|
@@ -1818,8 +1805,8 @@ const STYLES = `
|
|
|
1818
1805
|
position: fixed; inset: 0; background: var(--ps-modal-overlay, rgba(0,0,0,0.6));
|
|
1819
1806
|
display: flex; align-items: center; justify-content: center;
|
|
1820
1807
|
z-index: 999999;
|
|
1821
|
-
padding:
|
|
1822
|
-
padding: max(
|
|
1808
|
+
padding: 0.83vw;
|
|
1809
|
+
padding: max(0.83vw, env(safe-area-inset-top)) max(0.83vw, env(safe-area-inset-right)) max(0.83vw, env(safe-area-inset-bottom)) max(0.83vw, env(safe-area-inset-left));
|
|
1823
1810
|
animation: ps-fade-in 0.2s ease;
|
|
1824
1811
|
overflow-y: auto; -webkit-overflow-scrolling: touch;
|
|
1825
1812
|
}
|
|
@@ -1827,46 +1814,46 @@ const STYLES = `
|
|
|
1827
1814
|
|
|
1828
1815
|
.ps-tryon-modal {
|
|
1829
1816
|
background: var(--ps-modal-bg, #111211); color: var(--ps-modal-color, #fff);
|
|
1830
|
-
border-radius: var(--ps-modal-radius,
|
|
1831
|
-
max-width: var(--ps-modal-max-width,
|
|
1817
|
+
border-radius: var(--ps-modal-radius, 0.83vw); width: var(--ps-modal-width, 100%);
|
|
1818
|
+
max-width: var(--ps-modal-max-width, 27vw); max-height: 92vh; overflow-y: auto;
|
|
1832
1819
|
font-family: var(--ps-modal-font, system-ui, -apple-system, sans-serif);
|
|
1833
|
-
box-shadow: 0
|
|
1820
|
+
box-shadow: 0 1.3vw 2.6vw rgba(0,0,0,0.4); animation: ps-slide-up 0.3s ease;
|
|
1834
1821
|
scrollbar-width: thin; scrollbar-color: #333 transparent;
|
|
1835
1822
|
flex-shrink: 0;
|
|
1836
1823
|
}
|
|
1837
|
-
.ps-tryon-modal-wide { max-width:
|
|
1824
|
+
.ps-tryon-modal-wide { max-width: 48vw; }
|
|
1838
1825
|
.ps-tryon-modal:has(.ps-tryon-drawer-open) { overflow: hidden; }
|
|
1839
|
-
@keyframes ps-slide-up { from { transform: translateY(
|
|
1826
|
+
@keyframes ps-slide-up { from { transform: translateY(1.04vw) scale(0.97); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
|
|
1840
1827
|
|
|
1841
1828
|
/* Header */
|
|
1842
1829
|
.ps-tryon-header {
|
|
1843
1830
|
display: flex; align-items: center; justify-content: space-between;
|
|
1844
|
-
padding:
|
|
1831
|
+
padding: 0.94vw 1.25vw; background: var(--ps-modal-header-bg, #1a1b1a);
|
|
1845
1832
|
border-bottom: 1px solid #333;
|
|
1846
|
-
border-radius: var(--ps-modal-radius,
|
|
1833
|
+
border-radius: var(--ps-modal-radius, 0.83vw) var(--ps-modal-radius, 0.83vw) 0 0;
|
|
1847
1834
|
}
|
|
1848
|
-
.ps-tryon-title { font-size:
|
|
1849
|
-
.ps-tryon-header-actions { display: flex; align-items: center; gap:
|
|
1835
|
+
.ps-tryon-title { font-size: 0.78vw; font-weight: 600; color: var(--ps-modal-header-color, #fff); }
|
|
1836
|
+
.ps-tryon-header-actions { display: flex; align-items: center; gap: 0.42vw; }
|
|
1850
1837
|
.ps-tryon-header-icon {
|
|
1851
|
-
width:
|
|
1852
|
-
border: 1.5px solid #333; border-radius:
|
|
1838
|
+
width: 1.77vw; height: 1.77vw; display: flex; align-items: center; justify-content: center;
|
|
1839
|
+
border: 1.5px solid #333; border-radius: 0.52vw; background: transparent;
|
|
1853
1840
|
cursor: pointer; color: #999; transition: all 0.2s;
|
|
1854
1841
|
}
|
|
1855
1842
|
.ps-tryon-header-icon:hover { border-color: #bb945c; color: #bb945c; }
|
|
1856
1843
|
.ps-tryon-header-icon svg { stroke: currentColor; fill: none; }
|
|
1857
1844
|
.ps-tryon-close {
|
|
1858
|
-
width:
|
|
1845
|
+
width: 1.67vw; height: 1.67vw; display: flex; align-items: center; justify-content: center;
|
|
1859
1846
|
background: none; border: none; color: var(--ps-modal-close-color, #999);
|
|
1860
|
-
cursor: pointer; border-radius:
|
|
1847
|
+
cursor: pointer; border-radius: 0.31vw; transition: background 0.15s;
|
|
1861
1848
|
}
|
|
1862
1849
|
.ps-tryon-close:hover { background: rgba(255,255,255,0.1); }
|
|
1863
1850
|
|
|
1864
1851
|
/* Language switcher */
|
|
1865
1852
|
.ps-tryon-lang-wrap { position: relative; z-index: 10; }
|
|
1866
1853
|
.ps-tryon-lang-trigger {
|
|
1867
|
-
display: flex; align-items: center; gap:
|
|
1868
|
-
padding:
|
|
1869
|
-
border: 1.5px solid #333; border-radius:
|
|
1854
|
+
display: flex; align-items: center; gap: 0.36vw;
|
|
1855
|
+
padding: 0.36vw 0.73vw;
|
|
1856
|
+
border: 1.5px solid #333; border-radius: 0.57vw;
|
|
1870
1857
|
background: transparent; cursor: pointer; color: #999;
|
|
1871
1858
|
transition: all 0.25s ease; font-family: inherit; white-space: nowrap;
|
|
1872
1859
|
}
|
|
@@ -1875,116 +1862,116 @@ const STYLES = `
|
|
|
1875
1862
|
}
|
|
1876
1863
|
.ps-tryon-lang-trigger svg { stroke: currentColor; fill: none; flex-shrink: 0; }
|
|
1877
1864
|
.ps-tryon-lang-current {
|
|
1878
|
-
font-size:
|
|
1865
|
+
font-size: 0.68vw; font-weight: 500; letter-spacing: 0.01em;
|
|
1879
1866
|
}
|
|
1880
1867
|
.ps-tryon-lang-arrow {
|
|
1881
|
-
font-size:
|
|
1868
|
+
font-size: 0.57vw; transition: transform 0.25s ease; display: inline-block;
|
|
1882
1869
|
}
|
|
1883
1870
|
.ps-tryon-lang-arrow.ps-open { transform: rotate(180deg); }
|
|
1884
1871
|
|
|
1885
1872
|
.ps-tryon-lang-dropdown {
|
|
1886
|
-
position: absolute; top: calc(100% +
|
|
1887
|
-
min-width:
|
|
1873
|
+
position: absolute; top: calc(100% + 0.42vw); right: 0;
|
|
1874
|
+
min-width: 13vw;
|
|
1888
1875
|
background: #1a1b1a; border: 1.5px solid #333;
|
|
1889
|
-
border-radius:
|
|
1890
|
-
box-shadow: 0
|
|
1876
|
+
border-radius: 0.73vw;
|
|
1877
|
+
box-shadow: 0 1vw 3vw rgba(0,0,0,0.5),
|
|
1891
1878
|
0 0 0 1px rgba(255,255,255,0.03);
|
|
1892
1879
|
overflow: hidden;
|
|
1893
1880
|
animation: ps-lang-open 0.2s ease both;
|
|
1894
1881
|
}
|
|
1895
1882
|
@keyframes ps-lang-open {
|
|
1896
|
-
from { opacity: 0; transform: translateY(
|
|
1883
|
+
from { opacity: 0; transform: translateY(-0.42vw) scale(0.96); }
|
|
1897
1884
|
to { opacity: 1; transform: translateY(0) scale(1); }
|
|
1898
1885
|
}
|
|
1899
1886
|
|
|
1900
1887
|
.ps-tryon-lang-list {
|
|
1901
|
-
max-height:
|
|
1888
|
+
max-height: 18vw; overflow-y: auto; padding: 0.31vw;
|
|
1902
1889
|
scrollbar-width: thin; scrollbar-color: #333 transparent;
|
|
1903
1890
|
}
|
|
1904
1891
|
.ps-tryon-lang-item {
|
|
1905
|
-
display: flex; align-items: center; gap:
|
|
1906
|
-
width: 100%; padding:
|
|
1892
|
+
display: flex; align-items: center; gap: 0.57vw;
|
|
1893
|
+
width: 100%; padding: 0.57vw 0.83vw;
|
|
1907
1894
|
border: none; background: transparent; color: #ccc; cursor: pointer;
|
|
1908
|
-
border-radius:
|
|
1895
|
+
border-radius: 0.47vw; transition: all 0.15s ease;
|
|
1909
1896
|
font-family: inherit; text-align: left;
|
|
1910
1897
|
}
|
|
1911
1898
|
.ps-tryon-lang-item:hover { background: rgba(255,255,255,0.06); color: #fff; }
|
|
1912
1899
|
.ps-tryon-lang-item.ps-selected { background: rgba(187,148,92,0.1); color: #bb945c; }
|
|
1913
1900
|
.ps-tryon-lang-name {
|
|
1914
|
-
flex: 1; font-size:
|
|
1901
|
+
flex: 1; font-size: 0.73vw; font-weight: 500;
|
|
1915
1902
|
}
|
|
1916
1903
|
.ps-tryon-lang-code {
|
|
1917
|
-
font-size:
|
|
1904
|
+
font-size: 0.52vw; color: #666; font-weight: 600;
|
|
1918
1905
|
letter-spacing: 0.05em; font-family: ui-monospace, monospace;
|
|
1919
1906
|
}
|
|
1920
1907
|
.ps-tryon-lang-item.ps-selected .ps-tryon-lang-code { color: #bb945c; opacity: 0.7; }
|
|
1921
1908
|
.ps-tryon-lang-check { color: #bb945c; display: flex; align-items: center; }
|
|
1922
1909
|
|
|
1923
1910
|
/* Stepper */
|
|
1924
|
-
.ps-tryon-stepper { padding:
|
|
1911
|
+
.ps-tryon-stepper { padding: 1.04vw 1.25vw 0.63vw; }
|
|
1925
1912
|
.ps-tryon-stepper-track { display: flex; align-items: flex-start; }
|
|
1926
1913
|
.ps-tryon-stepper-fragment { display: flex; align-items: flex-start; flex: 1; }
|
|
1927
1914
|
.ps-tryon-stepper-fragment:first-child { flex: 0 0 auto; }
|
|
1928
|
-
.ps-tryon-stepper-line { flex: 1; height: 2px; background: #333; margin-top:
|
|
1915
|
+
.ps-tryon-stepper-line { flex: 1; height: 2px; background: #333; margin-top: 0.73vw; transition: background 0.4s; }
|
|
1929
1916
|
.ps-tryon-stepper-line.ps-done { background: #bb945c; }
|
|
1930
1917
|
.ps-tryon-stepper-step { display: flex; flex-direction: column; align-items: center; }
|
|
1931
1918
|
.ps-tryon-stepper-circle {
|
|
1932
|
-
width:
|
|
1919
|
+
width: 1.46vw; height: 1.46vw; border-radius: 50%;
|
|
1933
1920
|
display: flex; align-items: center; justify-content: center;
|
|
1934
|
-
border: 2px solid #333; font-size:
|
|
1921
|
+
border: 2px solid #333; font-size: 0.63vw; font-weight: 600; color: #666;
|
|
1935
1922
|
transition: all 0.3s;
|
|
1936
1923
|
}
|
|
1937
1924
|
.ps-tryon-stepper-step.ps-done .ps-tryon-stepper-circle { background: #bb945c; border-color: #bb945c; color: #111; }
|
|
1938
1925
|
.ps-tryon-stepper-step.ps-done .ps-tryon-stepper-circle svg { stroke: #111; }
|
|
1939
|
-
.ps-tryon-stepper-step.ps-active .ps-tryon-stepper-circle { border-color: #bb945c; color: #bb945c; box-shadow: 0 0 0
|
|
1940
|
-
.ps-tryon-stepper-label { font-size:
|
|
1926
|
+
.ps-tryon-stepper-step.ps-active .ps-tryon-stepper-circle { border-color: #bb945c; color: #bb945c; box-shadow: 0 0 0 0.21vw rgba(187,148,92,0.15); }
|
|
1927
|
+
.ps-tryon-stepper-label { font-size: 0.52vw; margin-top: 0.26vw; color: #666; font-weight: 500; text-align: center; white-space: nowrap; }
|
|
1941
1928
|
.ps-tryon-stepper-step.ps-done .ps-tryon-stepper-label { color: #bb945c; }
|
|
1942
1929
|
.ps-tryon-stepper-step.ps-active .ps-tryon-stepper-label { color: #bb945c; font-weight: 700; }
|
|
1943
1930
|
|
|
1944
1931
|
/* Body */
|
|
1945
|
-
.ps-tryon-body { padding:
|
|
1946
|
-
@keyframes ps-fade-up { from { opacity: 0; transform: translateY(
|
|
1932
|
+
.ps-tryon-body { padding: 1.25vw; min-height: 15.6vw; }
|
|
1933
|
+
@keyframes ps-fade-up { from { opacity: 0; transform: translateY(0.63vw); } to { opacity: 1; transform: translateY(0); } }
|
|
1947
1934
|
.ps-tryon-view-enter { animation: ps-fade-up 0.35s ease both; }
|
|
1948
1935
|
|
|
1949
1936
|
/* Welcome */
|
|
1950
1937
|
.ps-tryon-welcome { text-align: center; }
|
|
1951
|
-
.ps-tryon-welcome-hero { margin-bottom:
|
|
1938
|
+
.ps-tryon-welcome-hero { margin-bottom: 1.04vw; }
|
|
1952
1939
|
.ps-tryon-welcome-img-wrap { position: relative; display: inline-block; }
|
|
1953
|
-
.ps-tryon-welcome-product { width:
|
|
1954
|
-
.ps-tryon-welcome-sparkle { position: absolute; top:
|
|
1955
|
-
.ps-tryon-welcome-sparkle svg { stroke: #111; width:
|
|
1956
|
-
@keyframes ps-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(
|
|
1957
|
-
.ps-tryon-welcome-title { font-size:
|
|
1958
|
-
.ps-tryon-welcome-sub { font-size:
|
|
1959
|
-
.ps-tryon-features { display: flex; gap:
|
|
1960
|
-
.ps-tryon-feature { flex: 1; padding:
|
|
1961
|
-
.ps-tryon-feature-icon { margin-bottom:
|
|
1940
|
+
.ps-tryon-welcome-product { width: 6.25vw; height: 7.3vw; object-fit: cover; border-radius: 0.73vw; border: 2px solid #333; }
|
|
1941
|
+
.ps-tryon-welcome-sparkle { position: absolute; top: -0.42vw; right: -0.42vw; width: 1.46vw; height: 1.46vw; background: #bb945c; border-radius: 50%; display: flex; align-items: center; justify-content: center; animation: ps-float 3s ease-in-out infinite; }
|
|
1942
|
+
.ps-tryon-welcome-sparkle svg { stroke: #111; width: 0.73vw; height: 0.73vw; }
|
|
1943
|
+
@keyframes ps-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-0.31vw); } }
|
|
1944
|
+
.ps-tryon-welcome-title { font-size: 1.04vw; font-weight: 700; color: #fff; margin: 0.73vw 0 0.21vw; }
|
|
1945
|
+
.ps-tryon-welcome-sub { font-size: 0.68vw; color: #999; margin: 0; }
|
|
1946
|
+
.ps-tryon-features { display: flex; gap: 0.52vw; margin: 1.04vw 0; }
|
|
1947
|
+
.ps-tryon-feature { flex: 1; padding: 0.73vw 0.52vw; border: 1px solid #333; border-radius: 0.63vw; text-align: center; }
|
|
1948
|
+
.ps-tryon-feature-icon { margin-bottom: 0.31vw; color: #bb945c; display: flex; justify-content: center; }
|
|
1962
1949
|
.ps-tryon-feature-icon svg { stroke: currentColor; fill: none; }
|
|
1963
|
-
.ps-tryon-feature-title { font-size:
|
|
1964
|
-
.ps-tryon-feature-desc { font-size:
|
|
1950
|
+
.ps-tryon-feature-title { font-size: 0.63vw; font-weight: 600; color: #fff; margin-bottom: 2px; }
|
|
1951
|
+
.ps-tryon-feature-desc { font-size: 0.52vw; color: #999; }
|
|
1965
1952
|
.ps-tryon-cta {
|
|
1966
|
-
width: 100%; padding:
|
|
1967
|
-
border-radius:
|
|
1968
|
-
display: flex; align-items: center; justify-content: center; gap:
|
|
1953
|
+
width: 100%; padding: 0.73vw; background: #bb945c; color: #111; border: none;
|
|
1954
|
+
border-radius: 0.63vw; font-size: 0.78vw; font-weight: 700; cursor: pointer;
|
|
1955
|
+
display: flex; align-items: center; justify-content: center; gap: 0.42vw; transition: all 0.2s;
|
|
1969
1956
|
font-family: var(--ps-modal-font, system-ui, sans-serif);
|
|
1970
1957
|
}
|
|
1971
1958
|
.ps-tryon-cta:hover { background: #a07d4e; transform: translateY(-1px); }
|
|
1972
1959
|
.ps-tryon-cta svg { stroke: #111; }
|
|
1973
|
-
.ps-tryon-welcome-note { font-size:
|
|
1960
|
+
.ps-tryon-welcome-note { font-size: 0.57vw; color: #666; margin-top: 0.63vw; }
|
|
1974
1961
|
|
|
1975
1962
|
/* Upload */
|
|
1976
1963
|
.ps-tryon-upload {
|
|
1977
|
-
border: 2px dashed var(--ps-upload-border, #333); border-radius:
|
|
1978
|
-
padding:
|
|
1964
|
+
border: 2px dashed var(--ps-upload-border, #333); border-radius: 0.63vw;
|
|
1965
|
+
padding: 2.08vw 1.25vw; text-align: center; cursor: pointer; transition: all 0.2s;
|
|
1979
1966
|
background: var(--ps-upload-bg, transparent); display: flex; flex-direction: column; align-items: center;
|
|
1980
1967
|
}
|
|
1981
1968
|
.ps-tryon-upload:hover, .ps-tryon-drag-over { border-color: #bb945c; background: rgba(187,148,92,0.05); }
|
|
1982
|
-
.ps-tryon-upload svg { color: var(--ps-upload-icon-color, #bb945c); margin-bottom:
|
|
1983
|
-
.ps-tryon-upload-text { font-size:
|
|
1984
|
-
.ps-tryon-upload-hint { font-size:
|
|
1969
|
+
.ps-tryon-upload svg { color: var(--ps-upload-icon-color, #bb945c); margin-bottom: 0.63vw; }
|
|
1970
|
+
.ps-tryon-upload-text { font-size: 0.73vw; color: var(--ps-upload-color, #fff); margin: 0 0 0.21vw; }
|
|
1971
|
+
.ps-tryon-upload-hint { font-size: 0.63vw; color: #999; margin: 0; }
|
|
1985
1972
|
.ps-tryon-preview {
|
|
1986
|
-
position: relative; margin-bottom:
|
|
1987
|
-
height:
|
|
1973
|
+
position: relative; margin-bottom: 0.21vw;
|
|
1974
|
+
height: 20vw; border-radius: 0.63vw;
|
|
1988
1975
|
overflow: hidden; background: #0a0a0a;
|
|
1989
1976
|
}
|
|
1990
1977
|
.ps-tryon-preview-blur {
|
|
@@ -1993,144 +1980,173 @@ const STYLES = `
|
|
|
1993
1980
|
}
|
|
1994
1981
|
.ps-tryon-preview img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; display: block; }
|
|
1995
1982
|
.ps-tryon-preview-remove {
|
|
1996
|
-
position: absolute; top:
|
|
1983
|
+
position: absolute; top: 0.42vw; right: 0.42vw; width: 1.46vw; height: 1.46vw;
|
|
1997
1984
|
border-radius: 50%; background: rgba(0,0,0,0.6); border: none; color: white;
|
|
1998
1985
|
cursor: pointer; display: flex; align-items: center; justify-content: center;
|
|
1999
|
-
font-size:
|
|
1986
|
+
font-size: 0.83vw; transition: background 0.15s;
|
|
2000
1987
|
}
|
|
2001
1988
|
.ps-tryon-preview-remove:hover { background: rgba(0,0,0,0.8); }
|
|
2002
1989
|
.ps-tryon-submit {
|
|
2003
|
-
width: 100%; padding:
|
|
1990
|
+
width: 100%; padding: 0.73vw; margin-top: 0.83vw;
|
|
2004
1991
|
background: var(--ps-modal-primary-bg, #bb945c); color: var(--ps-modal-primary-color, #111);
|
|
2005
1992
|
font-family: var(--ps-modal-font, system-ui, sans-serif);
|
|
2006
|
-
font-size:
|
|
2007
|
-
border-radius: var(--ps-modal-primary-radius,
|
|
1993
|
+
font-size: 0.73vw; font-weight: 600; border: none;
|
|
1994
|
+
border-radius: var(--ps-modal-primary-radius, 0.52vw);
|
|
2008
1995
|
cursor: pointer; transition: all 0.2s;
|
|
2009
|
-
display: flex; align-items: center; justify-content: center; gap:
|
|
1996
|
+
display: flex; align-items: center; justify-content: center; gap: 0.42vw;
|
|
2010
1997
|
}
|
|
2011
1998
|
.ps-tryon-submit:hover { opacity: 0.9; transform: translateY(-1px); }
|
|
2012
1999
|
.ps-tryon-submit svg { stroke: currentColor; }
|
|
2013
2000
|
|
|
2014
2001
|
/* Profile bar */
|
|
2015
|
-
.ps-tryon-profile-bar { margin-bottom:
|
|
2002
|
+
.ps-tryon-profile-bar { margin-bottom: 0.83vw; }
|
|
2016
2003
|
.ps-tryon-profile-select {
|
|
2017
|
-
width: 100%; padding:
|
|
2018
|
-
background: #1a1b1a; color: #fff; font-size:
|
|
2004
|
+
width: 100%; padding: 0.52vw 1.88vw 0.52vw 0.73vw; border: 1.5px solid #333; border-radius: 0.52vw;
|
|
2005
|
+
background: #1a1b1a; color: #fff; font-size: 0.68vw; font-family: inherit;
|
|
2019
2006
|
appearance: none; -webkit-appearance: none; cursor: pointer; outline: none;
|
|
2020
2007
|
background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 4.5L6 8L9.5 4.5' stroke='%23999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
|
|
2021
|
-
background-repeat: no-repeat; background-position: right
|
|
2008
|
+
background-repeat: no-repeat; background-position: right 0.73vw center;
|
|
2022
2009
|
}
|
|
2023
2010
|
.ps-tryon-profile-select:focus { border-color: #bb945c; }
|
|
2024
2011
|
|
|
2025
2012
|
/* Sizing choice */
|
|
2026
2013
|
.ps-tryon-sizing-choice { text-align: center; }
|
|
2027
|
-
.ps-tryon-section-title { font-size:
|
|
2028
|
-
.ps-tryon-choice-cards { display: flex; flex-direction: column; gap:
|
|
2014
|
+
.ps-tryon-section-title { font-size: 0.83vw; font-weight: 600; color: #fff; margin: 0 0 0.83vw; }
|
|
2015
|
+
.ps-tryon-choice-cards { display: flex; flex-direction: column; gap: 0.52vw; }
|
|
2029
2016
|
.ps-tryon-choice-card {
|
|
2030
|
-
display: flex; align-items: center; gap:
|
|
2031
|
-
border: 1.5px solid #333; border-radius:
|
|
2017
|
+
display: flex; align-items: center; gap: 0.73vw; padding: 0.83vw;
|
|
2018
|
+
border: 1.5px solid #333; border-radius: 0.63vw;
|
|
2032
2019
|
background: #1a1b1a; cursor: pointer; transition: all 0.25s; text-align: left;
|
|
2033
2020
|
width: 100%; font-family: inherit; position: relative; overflow: hidden;
|
|
2034
2021
|
}
|
|
2035
|
-
.ps-tryon-choice-card:hover { border-color: #bb945c; transform: translateY(-1px); box-shadow: 0
|
|
2022
|
+
.ps-tryon-choice-card:hover { border-color: #bb945c; transform: translateY(-1px); box-shadow: 0 0.31vw 1.04vw rgba(187,148,92,0.08); }
|
|
2036
2023
|
.ps-tryon-choice-card:hover::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #bb945c; }
|
|
2037
2024
|
.ps-tryon-choice-icon { color: #bb945c; flex-shrink: 0; }
|
|
2038
2025
|
.ps-tryon-choice-icon svg { stroke: currentColor; fill: none; }
|
|
2039
2026
|
.ps-tryon-choice-info { flex: 1; min-width: 0; }
|
|
2040
|
-
.ps-tryon-choice-title { font-size:
|
|
2041
|
-
.ps-tryon-choice-desc { font-size:
|
|
2027
|
+
.ps-tryon-choice-title { font-size: 0.73vw; font-weight: 600; color: #fff; }
|
|
2028
|
+
.ps-tryon-choice-desc { font-size: 0.63vw; color: #999; margin-top: 2px; }
|
|
2042
2029
|
.ps-tryon-choice-badge {
|
|
2043
|
-
padding:
|
|
2044
|
-
background: rgba(187,148,92,0.12); color: #bb945c; font-size:
|
|
2030
|
+
padding: 0.16vw 0.52vw; border-radius: 1.04vw; flex-shrink: 0;
|
|
2031
|
+
background: rgba(187,148,92,0.12); color: #bb945c; font-size: 0.52vw; font-weight: 600;
|
|
2045
2032
|
}
|
|
2046
2033
|
.ps-tryon-sg-notice {
|
|
2047
|
-
font-size:
|
|
2048
|
-
margin-bottom:
|
|
2049
|
-
|
|
2050
|
-
|
|
2051
|
-
|
|
2052
|
-
display: flex; align-items: center;
|
|
2053
|
-
|
|
2034
|
+
font-size: 0.68vw; color: #999; text-align: center; padding: 0.73vw 0.83vw;
|
|
2035
|
+
margin-bottom: 0.73vw; border: 1px solid #333; border-radius: 0.63vw; background: #1a1b1a;
|
|
2036
|
+
display: flex; flex-direction: column; align-items: center; gap: 0.57vw;
|
|
2037
|
+
}
|
|
2038
|
+
.ps-tryon-sg-notice-cta {
|
|
2039
|
+
display: inline-flex; align-items: center; gap: 0.31vw;
|
|
2040
|
+
padding: 0.42vw 1vw;
|
|
2041
|
+
background: #bb945c; color: #111; border: none; border-radius: 0.42vw;
|
|
2042
|
+
font-size: 0.68vw; font-weight: 700; cursor: pointer;
|
|
2043
|
+
transition: all 0.2s; font-family: inherit;
|
|
2044
|
+
}
|
|
2045
|
+
.ps-tryon-sg-notice-cta:hover { background: #a07d4e; }
|
|
2046
|
+
.ps-tryon-sg-notice-cta svg { stroke: #111; }
|
|
2054
2047
|
.ps-tryon-sg-found svg { stroke: #4ade80; }
|
|
2055
|
-
.ps-tryon-sg-checking { display: flex; flex-direction: column; align-items: center; padding:
|
|
2056
|
-
.ps-tryon-sg-checking-icon { color: #bb945c; margin-bottom:
|
|
2048
|
+
.ps-tryon-sg-checking { display: flex; flex-direction: column; align-items: center; padding: 2.08vw 1.04vw; text-align: center; }
|
|
2049
|
+
.ps-tryon-sg-checking-icon { color: #bb945c; margin-bottom: 0.83vw; animation: ps-pulse-ruler 1.5s ease-in-out infinite; }
|
|
2057
2050
|
.ps-tryon-sg-checking-icon svg { stroke: currentColor; fill: none; }
|
|
2058
2051
|
@keyframes ps-pulse-ruler { 0%, 100% { transform: scale(1); opacity: 0.7; } 50% { transform: scale(1.15); opacity: 1; } }
|
|
2059
|
-
.ps-tryon-sg-checking-bar-wrap { width:
|
|
2052
|
+
.ps-tryon-sg-checking-bar-wrap { width: 9.4vw; height: 4px; background: #333; border-radius: 2px; overflow: hidden; margin-bottom: 1.04vw; }
|
|
2060
2053
|
.ps-tryon-sg-checking-bar { height: 100%; width: 40%; background: linear-gradient(90deg, #bb945c, #d6ba7d); border-radius: 2px; animation: ps-sg-bar 1.5s ease-in-out infinite; }
|
|
2061
2054
|
@keyframes ps-sg-bar { 0% { transform: translateX(-100%); } 100% { transform: translateX(350%); } }
|
|
2062
|
-
.ps-tryon-sg-checking .ps-tryon-section-title { margin-bottom:
|
|
2063
|
-
.ps-tryon-sg-checking-sub { font-size:
|
|
2055
|
+
.ps-tryon-sg-checking .ps-tryon-section-title { margin-bottom: 0.31vw; }
|
|
2056
|
+
.ps-tryon-sg-checking-sub { font-size: 0.68vw; color: #999; margin: 0; }
|
|
2064
2057
|
|
|
2065
2058
|
/* Back button */
|
|
2066
|
-
.ps-tryon-back { display: flex; align-items: center; gap:
|
|
2059
|
+
.ps-tryon-back { display: flex; align-items: center; gap: 0.31vw; background: none; border: none; color: #999; font-size: 0.68vw; cursor: pointer; padding: 0; margin-bottom: 0.63vw; font-family: inherit; transition: color 0.2s; }
|
|
2067
2060
|
.ps-tryon-back:hover { color: #fff; }
|
|
2068
2061
|
.ps-tryon-back svg { stroke: currentColor; fill: none; }
|
|
2069
2062
|
|
|
2070
2063
|
/* Sizing form */
|
|
2071
|
-
.ps-tryon-sizing-form { display: flex; flex-direction: column; gap:
|
|
2072
|
-
.ps-tryon-input-row { display: flex; align-items: center; gap:
|
|
2073
|
-
.ps-tryon-input-row label { font-size:
|
|
2064
|
+
.ps-tryon-sizing-form { display: flex; flex-direction: column; gap: 0.63vw; }
|
|
2065
|
+
.ps-tryon-input-row { display: flex; align-items: center; gap: 0.52vw; }
|
|
2066
|
+
.ps-tryon-input-row label { font-size: 0.68vw; font-weight: 500; color: #ccc; min-width: 4.7vw; flex-shrink: 0; }
|
|
2074
2067
|
.ps-tryon-input-row input {
|
|
2075
|
-
flex: 1; padding:
|
|
2076
|
-
background: #1a1b1a; color: #fff; font-size:
|
|
2068
|
+
flex: 1; padding: 0.52vw 0.73vw; border: 1.5px solid #333; border-radius: 0.52vw;
|
|
2069
|
+
background: #1a1b1a; color: #fff; font-size: 0.73vw; font-family: inherit; outline: none;
|
|
2077
2070
|
transition: border-color 0.2s; -moz-appearance: textfield;
|
|
2078
2071
|
}
|
|
2079
2072
|
.ps-tryon-input-row input::-webkit-outer-spin-button,
|
|
2080
2073
|
.ps-tryon-input-row input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
|
|
2081
2074
|
.ps-tryon-input-row input:focus { border-color: #bb945c; }
|
|
2082
|
-
.ps-tryon-input-unit { font-size:
|
|
2083
|
-
.ps-tryon-height-ft { display: flex; align-items: center; gap:
|
|
2084
|
-
.ps-tryon-height-ft input { width:
|
|
2075
|
+
.ps-tryon-input-unit { font-size: 0.63vw; color: #666; flex-shrink: 0; }
|
|
2076
|
+
.ps-tryon-height-ft { display: flex; align-items: center; gap: 0.31vw; flex: 1; }
|
|
2077
|
+
.ps-tryon-height-ft input { width: 3.13vw; padding: 0.52vw; border: 1.5px solid #333; border-radius: 0.52vw; background: #1a1b1a; color: #fff; font-size: 0.73vw; font-family: inherit; outline: none; text-align: center; -moz-appearance: textfield; }
|
|
2085
2078
|
.ps-tryon-height-ft input::-webkit-outer-spin-button, .ps-tryon-height-ft input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
|
|
2086
2079
|
.ps-tryon-height-ft input:focus { border-color: #bb945c; }
|
|
2087
|
-
.ps-tryon-height-ft span { font-size:
|
|
2080
|
+
.ps-tryon-height-ft span { font-size: 0.63vw; color: #666; }
|
|
2088
2081
|
.ps-tryon-country-select {
|
|
2089
|
-
flex: 1; padding:
|
|
2090
|
-
background: #1a1b1a; color: #fff; font-size:
|
|
2082
|
+
flex: 1; padding: 0.52vw 1.88vw 0.52vw 0.73vw; border: 1.5px solid #333; border-radius: 0.52vw;
|
|
2083
|
+
background: #1a1b1a; color: #fff; font-size: 0.68vw; font-family: inherit;
|
|
2091
2084
|
appearance: none; -webkit-appearance: none; cursor: pointer; outline: none;
|
|
2092
2085
|
background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 4.5L6 8L9.5 4.5' stroke='%23999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
|
|
2093
|
-
background-repeat: no-repeat; background-position: right
|
|
2086
|
+
background-repeat: no-repeat; background-position: right 0.73vw center;
|
|
2094
2087
|
}
|
|
2095
2088
|
.ps-tryon-country-select:focus { border-color: #bb945c; }
|
|
2096
|
-
.ps-tryon-unit-toggle { display: flex; gap: 0; border: 1.5px solid #333; border-radius:
|
|
2089
|
+
.ps-tryon-unit-toggle { display: flex; gap: 0; border: 1.5px solid #333; border-radius: 0.42vw; overflow: hidden; }
|
|
2097
2090
|
.ps-tryon-unit-btn {
|
|
2098
|
-
padding:
|
|
2099
|
-
font-size:
|
|
2091
|
+
padding: 0.31vw 0.73vw; background: transparent; border: none; color: #999;
|
|
2092
|
+
font-size: 0.63vw; font-weight: 600; cursor: pointer; transition: all 0.2s; font-family: inherit;
|
|
2100
2093
|
}
|
|
2101
2094
|
.ps-tryon-unit-btn.ps-active { background: #bb945c; color: #111; }
|
|
2102
|
-
|
|
2103
|
-
|
|
2104
|
-
.ps-tryon-
|
|
2095
|
+
|
|
2096
|
+
/* Prominent unit switch (cm/in) */
|
|
2097
|
+
.ps-tryon-unit-switch {
|
|
2098
|
+
display: flex; gap: 0.42vw; margin-bottom: 0.83vw;
|
|
2099
|
+
}
|
|
2100
|
+
.ps-tryon-unit-switch-btn {
|
|
2101
|
+
flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.16vw;
|
|
2102
|
+
padding: 0.73vw 0.57vw;
|
|
2103
|
+
border: 2px solid #333; border-radius: 0.73vw;
|
|
2104
|
+
background: transparent; color: #666; cursor: pointer;
|
|
2105
|
+
transition: all 0.25s ease; font-family: inherit;
|
|
2106
|
+
}
|
|
2107
|
+
.ps-tryon-unit-switch-btn:hover { border-color: #555; color: #999; }
|
|
2108
|
+
.ps-tryon-unit-switch-btn.ps-active {
|
|
2109
|
+
border-color: #bb945c; background: rgba(187,148,92,0.08); color: #bb945c;
|
|
2110
|
+
box-shadow: 0 0 0 0.21vw rgba(187,148,92,0.08);
|
|
2111
|
+
}
|
|
2112
|
+
.ps-tryon-unit-switch-label {
|
|
2113
|
+
font-size: 1.04vw; font-weight: 700; letter-spacing: 0.02em;
|
|
2114
|
+
}
|
|
2115
|
+
.ps-tryon-unit-switch-sub {
|
|
2116
|
+
font-size: 0.52vw; font-weight: 500; opacity: 0.6;
|
|
2117
|
+
}
|
|
2118
|
+
.ps-tryon-section-label { font-size: 0.57vw; font-weight: 700; color: #bb945c; text-transform: uppercase; letter-spacing: 0.08em; margin: 0.21vw 0 0.1vw; }
|
|
2119
|
+
.ps-tryon-optional-section { border-top: 1px solid #333; padding-top: 0.52vw; margin-top: 0.31vw; }
|
|
2120
|
+
.ps-tryon-optional-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: 1px solid #333; border-radius: 0.52vw; padding: 0.52vw 0.73vw; color: #999; font-size: 0.68vw; font-weight: 600; cursor: pointer; font-family: inherit; transition: all 0.2s; }
|
|
2105
2121
|
.ps-tryon-optional-toggle:hover { border-color: #555; color: #ccc; }
|
|
2106
|
-
.ps-tryon-chevron { transition: transform 0.2s; font-size:
|
|
2107
|
-
.ps-tryon-optional-fields { display: flex; flex-direction: column; gap:
|
|
2108
|
-
.ps-tryon-shoe-section { border-top: 1px solid #333; padding-top:
|
|
2109
|
-
.ps-tryon-shoe-title { font-size:
|
|
2110
|
-
.ps-tryon-disclaimer { font-size:
|
|
2111
|
-
.ps-tryon-form-save-toggle { margin-top:
|
|
2122
|
+
.ps-tryon-chevron { transition: transform 0.2s; font-size: 0.73vw; }
|
|
2123
|
+
.ps-tryon-optional-fields { display: flex; flex-direction: column; gap: 0.52vw; padding-top: 0.63vw; }
|
|
2124
|
+
.ps-tryon-shoe-section { border-top: 1px solid #333; padding-top: 0.73vw; margin-top: 0.31vw; display: flex; flex-direction: column; gap: 0.52vw; }
|
|
2125
|
+
.ps-tryon-shoe-title { font-size: 0.68vw; font-weight: 600; color: #999; }
|
|
2126
|
+
.ps-tryon-disclaimer { font-size: 0.57vw; color: #666; margin: 0.21vw 0 0; }
|
|
2127
|
+
.ps-tryon-form-save-toggle { margin-top: 0.52vw; display: flex; flex-direction: column; gap: 0.42vw; }
|
|
2112
2128
|
.ps-tryon-form-save-check {
|
|
2113
|
-
display: flex; align-items: center; gap:
|
|
2129
|
+
display: flex; align-items: center; gap: 0.42vw; font-size: 0.68vw; color: #ccc; cursor: pointer; user-select: none;
|
|
2114
2130
|
}
|
|
2115
2131
|
.ps-tryon-form-save-check input[type="checkbox"] {
|
|
2116
|
-
width:
|
|
2132
|
+
width: 0.83vw; height: 0.83vw; accent-color: #bb945c; cursor: pointer;
|
|
2117
2133
|
}
|
|
2118
2134
|
.ps-tryon-form-save-name {
|
|
2119
|
-
padding:
|
|
2120
|
-
background: #1a1b1a; color: #fff; font-size:
|
|
2135
|
+
padding: 0.42vw 0.63vw; border: 1.5px solid #333; border-radius: 0.52vw;
|
|
2136
|
+
background: #1a1b1a; color: #fff; font-size: 0.68vw; font-family: inherit; outline: none;
|
|
2121
2137
|
transition: border-color 0.2s;
|
|
2122
2138
|
}
|
|
2123
2139
|
.ps-tryon-form-save-name:focus { border-color: #bb945c; }
|
|
2124
2140
|
|
|
2125
2141
|
/* Processing */
|
|
2126
|
-
.ps-tryon-processing { text-align: center; padding:
|
|
2142
|
+
.ps-tryon-processing { text-align: center; padding: 1.25vw; display: flex; flex-direction: column; align-items: center; }
|
|
2127
2143
|
|
|
2128
2144
|
.ps-tryon-processing-image-wrap {
|
|
2129
|
-
position: relative; width:
|
|
2130
|
-
border-radius:
|
|
2145
|
+
position: relative; width: 11.5vw; height: 14.6vw; margin: 0 auto 1.25vw;
|
|
2146
|
+
border-radius: 0.83vw; overflow: hidden; border: 2px solid #333;
|
|
2131
2147
|
}
|
|
2132
2148
|
.ps-tryon-processing-blur {
|
|
2133
|
-
position: absolute; inset:
|
|
2149
|
+
position: absolute; inset: -1.04vw; background-size: cover; background-position: center;
|
|
2134
2150
|
filter: blur(25px) brightness(0.5); transform: scale(1.2);
|
|
2135
2151
|
}
|
|
2136
2152
|
.ps-tryon-processing-model {
|
|
@@ -2144,7 +2160,7 @@ const STYLES = `
|
|
|
2144
2160
|
.ps-tryon-scan-line {
|
|
2145
2161
|
position: absolute; left: 0; right: 0; height: 3px;
|
|
2146
2162
|
background: linear-gradient(90deg, transparent, #bb945c 20%, #d6ba7d 50%, #bb945c 80%, transparent);
|
|
2147
|
-
box-shadow: 0 0
|
|
2163
|
+
box-shadow: 0 0 0.78vw rgba(187,148,92,0.6), 0 0 2.08vw rgba(187,148,92,0.2);
|
|
2148
2164
|
animation: ps-scan 2.5s ease-in-out infinite;
|
|
2149
2165
|
pointer-events: none; z-index: 2;
|
|
2150
2166
|
}
|
|
@@ -2156,35 +2172,35 @@ const STYLES = `
|
|
|
2156
2172
|
}
|
|
2157
2173
|
|
|
2158
2174
|
.ps-tryon-progress-section {
|
|
2159
|
-
display: flex; align-items: center; gap:
|
|
2175
|
+
display: flex; align-items: center; gap: 0.63vw; width: 100%; max-width: 15.6vw; margin-bottom: 0.83vw;
|
|
2160
2176
|
}
|
|
2161
2177
|
.ps-tryon-progress-bar-wrap {
|
|
2162
|
-
flex: 1; height:
|
|
2178
|
+
flex: 1; height: 0.31vw; background: #333; border-radius: 3px; overflow: hidden;
|
|
2163
2179
|
}
|
|
2164
2180
|
.ps-tryon-progress-bar-fill {
|
|
2165
2181
|
height: 100%; background: linear-gradient(90deg, #bb945c, #d6ba7d);
|
|
2166
2182
|
border-radius: 3px; transition: width 0.3s ease; width: 0%;
|
|
2167
2183
|
}
|
|
2168
2184
|
.ps-tryon-progress-pct {
|
|
2169
|
-
font-size:
|
|
2185
|
+
font-size: 0.68vw; font-weight: 700; color: #bb945c; min-width: 1.88vw; text-align: right;
|
|
2170
2186
|
font-variant-numeric: tabular-nums;
|
|
2171
2187
|
}
|
|
2172
2188
|
|
|
2173
2189
|
@keyframes ps-scale-in { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } }
|
|
2174
|
-
.ps-tryon-processing-text { font-size:
|
|
2175
|
-
.ps-tryon-processing-sub { font-size:
|
|
2190
|
+
.ps-tryon-processing-text { font-size: 0.73vw; color: #fff; margin: 0 0 0.21vw; }
|
|
2191
|
+
.ps-tryon-processing-sub { font-size: 0.63vw; color: #999; margin: 0; }
|
|
2176
2192
|
|
|
2177
2193
|
/* Result */
|
|
2178
2194
|
.ps-tryon-result-layout { text-align: center; }
|
|
2179
|
-
.ps-tryon-result-split { display: flex; gap:
|
|
2195
|
+
.ps-tryon-result-split { display: flex; gap: 1.25vw; text-align: left; align-items: stretch; }
|
|
2180
2196
|
.ps-tryon-result-image-col { flex: 0 0 45%; min-width: 0; display: flex; align-items: center; justify-content: center; }
|
|
2181
|
-
.ps-tryon-result-image-col img { width: 100%; max-height:
|
|
2197
|
+
.ps-tryon-result-image-col img { width: 100%; max-height: 20.8vw; object-fit: contain; border-radius: 0.73vw; box-shadow: 0 0.42vw 1.67vw rgba(0,0,0,0.2); animation: ps-scale-in 0.5s ease both; }
|
|
2182
2198
|
.ps-tryon-result-info-col { flex: 1; min-width: 0; }
|
|
2183
|
-
.ps-tryon-result-layout:not(.ps-tryon-result-split) img { width: 100%; border-radius:
|
|
2184
|
-
.ps-tryon-result-actions { display: flex; gap:
|
|
2199
|
+
.ps-tryon-result-layout:not(.ps-tryon-result-split) img { width: 100%; border-radius: 0.63vw; margin-bottom: 0.83vw; }
|
|
2200
|
+
.ps-tryon-result-actions { display: flex; gap: 0.42vw; margin-top: 0.83vw; }
|
|
2185
2201
|
.ps-tryon-result-actions button {
|
|
2186
|
-
flex: 1; padding:
|
|
2187
|
-
font-size:
|
|
2202
|
+
flex: 1; padding: 0.63vw; font-family: var(--ps-modal-font, system-ui, sans-serif);
|
|
2203
|
+
font-size: 0.68vw; font-weight: 600; border-radius: 0.52vw; cursor: pointer; transition: all 0.2s; border: none;
|
|
2188
2204
|
}
|
|
2189
2205
|
.ps-tryon-btn-download { background: #bb945c; color: #111; }
|
|
2190
2206
|
.ps-tryon-btn-download:hover { opacity: 0.9; }
|
|
@@ -2192,172 +2208,172 @@ const STYLES = `
|
|
|
2192
2208
|
.ps-tryon-btn-retry:hover { background: rgba(255,255,255,0.12); }
|
|
2193
2209
|
|
|
2194
2210
|
/* Size recommendation */
|
|
2195
|
-
.ps-tryon-size-recommend { margin-bottom:
|
|
2196
|
-
.ps-tryon-size-title { font-size:
|
|
2211
|
+
.ps-tryon-size-recommend { margin-bottom: 0.83vw; }
|
|
2212
|
+
.ps-tryon-size-title { font-size: 0.94vw; font-weight: 700; color: #fff; margin: 0 0 0.73vw; }
|
|
2197
2213
|
.ps-tryon-size-hero-row {
|
|
2198
|
-
display: flex; align-items: center; gap:
|
|
2199
|
-
border: 1.5px solid #333; border-radius:
|
|
2214
|
+
display: flex; align-items: center; gap: 0.83vw; padding: 0.83vw 1.04vw;
|
|
2215
|
+
border: 1.5px solid #333; border-radius: 0.73vw; margin-bottom: 0.94vw; background: rgba(255,255,255,0.02);
|
|
2200
2216
|
}
|
|
2201
2217
|
.ps-tryon-size-badge {
|
|
2202
2218
|
display: inline-flex; align-items: center; justify-content: center;
|
|
2203
|
-
min-width:
|
|
2219
|
+
min-width: 2.92vw; height: 2.92vw; padding: 0 0.63vw; border-radius: 0.63vw;
|
|
2204
2220
|
background: linear-gradient(135deg, #bb945c, #d6ba7d);
|
|
2205
|
-
color: #111; font-size:
|
|
2221
|
+
color: #111; font-size: 1.25vw; font-weight: 800; letter-spacing: -0.02em;
|
|
2206
2222
|
}
|
|
2207
|
-
.ps-tryon-size-conf-label { font-size:
|
|
2223
|
+
.ps-tryon-size-conf-label { font-size: 0.78vw; font-weight: 600; }
|
|
2208
2224
|
.ps-conf-high { color: #4ade80; } .ps-conf-medium { color: #bb945c; } .ps-conf-low { color: #ef4444; }
|
|
2209
2225
|
|
|
2210
|
-
.ps-tryon-sizing-loading { text-align: center; padding:
|
|
2226
|
+
.ps-tryon-sizing-loading { text-align: center; padding: 1.04vw 0; }
|
|
2211
2227
|
.ps-tryon-size-loading-spinner {
|
|
2212
|
-
width:
|
|
2228
|
+
width: 1.88vw; height: 1.88vw; border: 3px solid #333;
|
|
2213
2229
|
border-top-color: #bb945c; border-radius: 50%;
|
|
2214
|
-
animation: ps-spin 0.8s linear infinite; margin: 0 auto
|
|
2230
|
+
animation: ps-spin 0.8s linear infinite; margin: 0 auto 0.63vw;
|
|
2215
2231
|
}
|
|
2216
2232
|
@keyframes ps-spin { to { transform: rotate(360deg); } }
|
|
2217
2233
|
|
|
2218
2234
|
/* Fit Summary */
|
|
2219
|
-
.ps-tryon-fit-summary { margin-bottom:
|
|
2220
|
-
.ps-tryon-fit-summary-title { font-size:
|
|
2221
|
-
.ps-tryon-fit-row { display: flex; align-items: center; gap:
|
|
2235
|
+
.ps-tryon-fit-summary { margin-bottom: 0.83vw; }
|
|
2236
|
+
.ps-tryon-fit-summary-title { font-size: 0.78vw; font-weight: 700; color: #fff; margin: 0 0 0.52vw; }
|
|
2237
|
+
.ps-tryon-fit-row { display: flex; align-items: center; gap: 0.52vw; padding: 0.42vw 0; }
|
|
2222
2238
|
.ps-tryon-fit-icon {
|
|
2223
|
-
width:
|
|
2224
|
-
font-size:
|
|
2239
|
+
width: 1.15vw; height: 1.15vw; border-radius: 50%; display: flex; align-items: center; justify-content: center;
|
|
2240
|
+
font-size: 0.63vw; font-weight: 700; flex-shrink: 0;
|
|
2225
2241
|
}
|
|
2226
2242
|
.ps-fit-icon-good { background: rgba(74,222,128,0.15); color: #4ade80; }
|
|
2227
2243
|
.ps-fit-icon-tight { background: rgba(245,158,11,0.15); color: #f59e0b; }
|
|
2228
2244
|
.ps-fit-icon-loose { background: rgba(96,165,250,0.15); color: #60a5fa; }
|
|
2229
|
-
.ps-tryon-fit-text { font-size:
|
|
2245
|
+
.ps-tryon-fit-text { font-size: 0.73vw; color: #ccc; line-height: 1.4; }
|
|
2230
2246
|
.ps-tryon-fit-text strong { color: #fff; font-weight: 600; }
|
|
2231
2247
|
.ps-tryon-fit-details-toggle {
|
|
2232
|
-
display: inline-block; margin-top:
|
|
2248
|
+
display: inline-block; margin-top: 0.42vw; font-size: 0.68vw; color: #bb945c; cursor: pointer;
|
|
2233
2249
|
font-weight: 600; background: none; border: none; padding: 0; font-family: inherit;
|
|
2234
2250
|
}
|
|
2235
2251
|
.ps-tryon-fit-details-toggle:hover { color: #d6ba7d; }
|
|
2236
|
-
.ps-tryon-fit-table { width: 100%; border-collapse: collapse; margin-top:
|
|
2237
|
-
.ps-tryon-fit-table th { text-align: left; padding:
|
|
2238
|
-
.ps-tryon-fit-table td { padding:
|
|
2252
|
+
.ps-tryon-fit-table { width: 100%; border-collapse: collapse; margin-top: 0.52vw; font-size: 0.68vw; }
|
|
2253
|
+
.ps-tryon-fit-table th { text-align: left; padding: 0.42vw 0.52vw; border-bottom: 1px solid #333; color: #999; font-weight: 600; }
|
|
2254
|
+
.ps-tryon-fit-table td { padding: 0.42vw 0.52vw; border-bottom: 1px solid #222; color: #ccc; }
|
|
2239
2255
|
.ps-fit-good { color: #4ade80; } .ps-fit-tight { color: #f59e0b; } .ps-fit-loose { color: #60a5fa; }
|
|
2240
2256
|
|
|
2241
2257
|
/* Equivalent Sizes */
|
|
2242
|
-
.ps-tryon-equiv-section { margin-bottom:
|
|
2243
|
-
.ps-tryon-equiv-title { font-size:
|
|
2244
|
-
.ps-tryon-equiv-chips { display: flex; flex-wrap: wrap; gap:
|
|
2258
|
+
.ps-tryon-equiv-section { margin-bottom: 0.83vw; }
|
|
2259
|
+
.ps-tryon-equiv-title { font-size: 0.78vw; font-weight: 700; color: #fff; margin: 0 0 0.52vw; }
|
|
2260
|
+
.ps-tryon-equiv-chips { display: flex; flex-wrap: wrap; gap: 0.42vw; }
|
|
2245
2261
|
.ps-tryon-equiv-chip {
|
|
2246
|
-
display: flex; align-items: center; border: 1.5px solid #333; border-radius:
|
|
2262
|
+
display: flex; align-items: center; border: 1.5px solid #333; border-radius: 0.52vw; overflow: hidden;
|
|
2247
2263
|
}
|
|
2248
|
-
.ps-tryon-equiv-region { padding:
|
|
2249
|
-
.ps-tryon-equiv-value { padding:
|
|
2264
|
+
.ps-tryon-equiv-region { padding: 0.36vw 0.52vw; font-size: 0.63vw; color: #999; font-weight: 600; background: rgba(255,255,255,0.03); }
|
|
2265
|
+
.ps-tryon-equiv-value { padding: 0.36vw 0.63vw; font-size: 0.73vw; color: #fff; font-weight: 700; }
|
|
2250
2266
|
|
|
2251
2267
|
/* Multi-section garment sizing (tuxedo/set) */
|
|
2252
|
-
.ps-tryon-multi-section { margin-bottom:
|
|
2253
|
-
.ps-tryon-section-row { display: flex; align-items: center; justify-content: space-between; padding:
|
|
2268
|
+
.ps-tryon-multi-section { margin-bottom: 0.83vw; }
|
|
2269
|
+
.ps-tryon-section-row { display: flex; align-items: center; justify-content: space-between; padding: 0.52vw 0; border-bottom: 1px solid #222; }
|
|
2254
2270
|
.ps-tryon-section-row:last-child { border-bottom: none; }
|
|
2255
|
-
.ps-tryon-section-name { font-size:
|
|
2256
|
-
.ps-tryon-section-badge { font-size:
|
|
2271
|
+
.ps-tryon-section-name { font-size: 0.78vw; color: #ccc; font-weight: 500; }
|
|
2272
|
+
.ps-tryon-section-badge { font-size: 0.83vw; min-width: auto; padding: 0.26vw 0.83vw; }
|
|
2257
2273
|
|
|
2258
|
-
.ps-tryon-size-reasoning { font-size:
|
|
2274
|
+
.ps-tryon-size-reasoning { font-size: 0.73vw; color: #ccc; line-height: 1.6; margin-bottom: 0.73vw; }
|
|
2259
2275
|
|
|
2260
2276
|
/* Size Result View (standalone sizing result before try-on) */
|
|
2261
|
-
.ps-tryon-size-result-view { display: flex; flex-direction: column; gap:
|
|
2262
|
-
.ps-tryon-tryon-cta { display: flex; flex-direction: column; gap:
|
|
2277
|
+
.ps-tryon-size-result-view { display: flex; flex-direction: column; gap: 1vw; }
|
|
2278
|
+
.ps-tryon-tryon-cta { display: flex; flex-direction: column; gap: 0.7vw; margin-top: 0.7vw; }
|
|
2263
2279
|
.ps-tryon-btn-secondary {
|
|
2264
|
-
background: transparent; border: 1.5px solid #444; color: #999; font-size:
|
|
2265
|
-
font-weight: 600; padding:
|
|
2280
|
+
background: transparent; border: 1.5px solid #444; color: #999; font-size: 0.83vw;
|
|
2281
|
+
font-weight: 600; padding: 0.7vw 1.3vw; border-radius: 0.52vw;
|
|
2266
2282
|
cursor: pointer; transition: all 0.2s;
|
|
2267
2283
|
}
|
|
2268
2284
|
.ps-tryon-btn-secondary:hover { border-color: #666; color: #ccc; }
|
|
2269
|
-
.ps-tryon-size-compact { padding:
|
|
2270
|
-
.ps-tryon-size-compact-label { font-size:
|
|
2285
|
+
.ps-tryon-size-compact { padding: 0.5vw 0; }
|
|
2286
|
+
.ps-tryon-size-compact-label { font-size: 0.78vw; color: #999; font-weight: 500; }
|
|
2271
2287
|
|
|
2272
2288
|
/* Save profile prompt */
|
|
2273
|
-
.ps-tryon-save-prompt { margin-top:
|
|
2274
|
-
.ps-tryon-save-label { font-size:
|
|
2275
|
-
.ps-tryon-save-row { display: flex; gap:
|
|
2289
|
+
.ps-tryon-save-prompt { margin-top: 0.73vw; padding: 0.73vw; border: 1px solid #333; border-radius: 0.63vw; background: #1a1b1a; }
|
|
2290
|
+
.ps-tryon-save-label { font-size: 0.63vw; color: #999; margin-bottom: 0.52vw; }
|
|
2291
|
+
.ps-tryon-save-row { display: flex; gap: 0.42vw; }
|
|
2276
2292
|
.ps-tryon-save-row input {
|
|
2277
|
-
flex: 1; padding:
|
|
2278
|
-
background: #111211; color: #fff; font-size:
|
|
2293
|
+
flex: 1; padding: 0.52vw 0.73vw; border: 1.5px solid #333; border-radius: 0.52vw;
|
|
2294
|
+
background: #111211; color: #fff; font-size: 0.68vw; font-family: inherit; outline: none;
|
|
2279
2295
|
}
|
|
2280
2296
|
.ps-tryon-save-row input:focus { border-color: #bb945c; }
|
|
2281
2297
|
.ps-tryon-save-row button {
|
|
2282
|
-
padding:
|
|
2283
|
-
font-size:
|
|
2298
|
+
padding: 0.52vw 1.04vw; background: #bb945c; color: #111; border: none; border-radius: 0.52vw;
|
|
2299
|
+
font-size: 0.68vw; font-weight: 600; cursor: pointer; transition: opacity 0.2s; font-family: inherit;
|
|
2284
2300
|
}
|
|
2285
2301
|
.ps-tryon-save-row button:hover { opacity: 0.9; }
|
|
2286
|
-
.ps-tryon-save-btn-group { display: flex; gap:
|
|
2302
|
+
.ps-tryon-save-btn-group { display: flex; gap: 0.31vw; }
|
|
2287
2303
|
.ps-tryon-save-new-btn { background: transparent !important; border: 1.5px solid #bb945c !important; color: #bb945c !important; }
|
|
2288
2304
|
.ps-tryon-save-new-btn:hover { background: rgba(187,148,92,0.1) !important; }
|
|
2289
|
-
.ps-tryon-save-done { font-size:
|
|
2305
|
+
.ps-tryon-save-done { font-size: 0.63vw; color: #4ade80; margin-top: 0.52vw; display: flex; align-items: center; gap: 0.31vw; justify-content: center; }
|
|
2290
2306
|
.ps-tryon-save-done svg { stroke: currentColor; }
|
|
2291
2307
|
|
|
2292
2308
|
/* Error */
|
|
2293
|
-
.ps-tryon-error { text-align: center; padding:
|
|
2294
|
-
.ps-tryon-error svg { color: #ef4444; margin-bottom:
|
|
2295
|
-
.ps-tryon-error-text { font-size:
|
|
2309
|
+
.ps-tryon-error { text-align: center; padding: 1.25vw; display: flex; flex-direction: column; align-items: center; }
|
|
2310
|
+
.ps-tryon-error svg { color: #ef4444; margin-bottom: 0.63vw; }
|
|
2311
|
+
.ps-tryon-error-text { font-size: 0.73vw; color: #ef4444; margin: 0 0 0.83vw; }
|
|
2296
2312
|
|
|
2297
2313
|
/* Footer */
|
|
2298
|
-
.ps-tryon-powered { text-align: center; padding:
|
|
2314
|
+
.ps-tryon-powered { text-align: center; padding: 0.63vw 1.25vw 0.83vw; font-size: 0.57vw; color: #666; }
|
|
2299
2315
|
.ps-tryon-powered a { color: #bb945c; text-decoration: none; }
|
|
2300
2316
|
.ps-tryon-powered a:hover { text-decoration: underline; }
|
|
2301
2317
|
|
|
2302
2318
|
/* Drawer */
|
|
2303
2319
|
.ps-tryon-drawer {
|
|
2304
2320
|
position: absolute; inset: 0; z-index: 20; background: var(--ps-modal-bg, #111211);
|
|
2305
|
-
overflow-y: auto; scrollbar-width: thin; padding:
|
|
2321
|
+
overflow-y: auto; scrollbar-width: thin; padding: 1.04vw 1.25vw;
|
|
2306
2322
|
transform: translateX(100%); transition: transform 0.25s cubic-bezier(0.4,0,0.2,1);
|
|
2307
2323
|
}
|
|
2308
2324
|
.ps-tryon-drawer-open { transform: translateX(0); }
|
|
2309
|
-
.ps-tryon-drawer-header { display: flex; align-items: center; gap:
|
|
2325
|
+
.ps-tryon-drawer-header { display: flex; align-items: center; gap: 0.52vw; padding-bottom: 0.73vw; margin-bottom: 0.73vw; border-bottom: 1px solid #333; }
|
|
2310
2326
|
.ps-tryon-drawer-back {
|
|
2311
|
-
width:
|
|
2312
|
-
border: 1.5px solid #333; border-radius:
|
|
2327
|
+
width: 1.67vw; height: 1.67vw; display: flex; align-items: center; justify-content: center;
|
|
2328
|
+
border: 1.5px solid #333; border-radius: 0.52vw; background: transparent;
|
|
2313
2329
|
cursor: pointer; color: #999; transition: all 0.2s; flex-shrink: 0;
|
|
2314
2330
|
}
|
|
2315
2331
|
.ps-tryon-drawer-back:hover { border-color: #bb945c; color: #bb945c; }
|
|
2316
|
-
.ps-tryon-drawer-title { font-size:
|
|
2317
|
-
.ps-tryon-drawer-list { display: flex; flex-direction: column; gap:
|
|
2318
|
-
.ps-tryon-drawer-empty { text-align: center; padding:
|
|
2332
|
+
.ps-tryon-drawer-title { font-size: 0.83vw; font-weight: 600; color: #fff; }
|
|
2333
|
+
.ps-tryon-drawer-list { display: flex; flex-direction: column; gap: 0.52vw; }
|
|
2334
|
+
.ps-tryon-drawer-empty { text-align: center; padding: 1.67vw 0.83vw; color: #666; font-size: 0.73vw; }
|
|
2319
2335
|
|
|
2320
2336
|
/* Profile items */
|
|
2321
2337
|
.ps-tryon-profile-item {
|
|
2322
|
-
display: flex; align-items: center; gap:
|
|
2323
|
-
border: 1px solid #333; border-radius:
|
|
2338
|
+
display: flex; align-items: center; gap: 0.63vw; padding: 0.73vw;
|
|
2339
|
+
border: 1px solid #333; border-radius: 0.63vw; cursor: pointer; transition: all 0.2s;
|
|
2324
2340
|
}
|
|
2325
2341
|
.ps-tryon-profile-item:hover { border-color: #bb945c; }
|
|
2326
2342
|
.ps-tryon-profile-avatar {
|
|
2327
|
-
width:
|
|
2343
|
+
width: 2.08vw; height: 2.08vw; border-radius: 50%;
|
|
2328
2344
|
display: flex; align-items: center; justify-content: center;
|
|
2329
2345
|
background: rgba(187,148,92,0.1); flex-shrink: 0;
|
|
2330
2346
|
}
|
|
2331
2347
|
.ps-tryon-profile-avatar svg { stroke: #bb945c; fill: none; }
|
|
2332
2348
|
.ps-tryon-profile-info { flex: 1; min-width: 0; }
|
|
2333
|
-
.ps-tryon-profile-name { font-size:
|
|
2334
|
-
.ps-tryon-profile-detail { font-size:
|
|
2349
|
+
.ps-tryon-profile-name { font-size: 0.73vw; font-weight: 600; color: #fff; }
|
|
2350
|
+
.ps-tryon-profile-detail { font-size: 0.57vw; color: #999; margin-top: 2px; }
|
|
2335
2351
|
.ps-tryon-profile-item > svg:last-child { color: #666; flex-shrink: 0; transition: color 0.2s; }
|
|
2336
2352
|
.ps-tryon-profile-item:hover > svg:last-child { color: #bb945c; }
|
|
2337
2353
|
|
|
2338
2354
|
/* History items */
|
|
2339
2355
|
.ps-tryon-history-item {
|
|
2340
|
-
display: flex; gap:
|
|
2341
|
-
border: 1px solid #333; border-radius:
|
|
2356
|
+
display: flex; gap: 0.73vw; padding: 0.73vw;
|
|
2357
|
+
border: 1px solid #333; border-radius: 0.63vw; align-items: flex-start; transition: all 0.2s;
|
|
2342
2358
|
}
|
|
2343
|
-
.ps-tryon-history-item:hover { border-color: #bb945c; box-shadow: 0
|
|
2344
|
-
.ps-tryon-history-images { display: flex; gap:
|
|
2345
|
-
.ps-tryon-history-thumb { width:
|
|
2359
|
+
.ps-tryon-history-item:hover { border-color: #bb945c; box-shadow: 0 0.21vw 0.63vw rgba(187,148,92,0.06); }
|
|
2360
|
+
.ps-tryon-history-images { display: flex; gap: 0.42vw; flex-shrink: 0; }
|
|
2361
|
+
.ps-tryon-history-thumb { width: 3.33vw; height: 4.17vw; border-radius: 0.52vw; object-fit: cover; flex-shrink: 0; }
|
|
2346
2362
|
.ps-tryon-history-info { flex: 1; min-width: 0; }
|
|
2347
|
-
.ps-tryon-history-product { font-size:
|
|
2348
|
-
.ps-tryon-history-meta { font-size:
|
|
2349
|
-
.ps-tryon-history-sizing { display: flex; align-items: center; gap:
|
|
2350
|
-
.ps-tryon-history-sizing-reason { font-size:
|
|
2363
|
+
.ps-tryon-history-product { font-size: 0.68vw; font-weight: 600; color: #fff; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
|
|
2364
|
+
.ps-tryon-history-meta { font-size: 0.57vw; color: #666; margin-top: 3px; }
|
|
2365
|
+
.ps-tryon-history-sizing { display: flex; align-items: center; gap: 0.42vw; margin-top: 0.31vw; }
|
|
2366
|
+
.ps-tryon-history-sizing-reason { font-size: 0.57vw; color: #999; flex: 1; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
|
|
2351
2367
|
.ps-tryon-history-size-badge {
|
|
2352
|
-
flex-shrink: 0; width:
|
|
2368
|
+
flex-shrink: 0; width: 2.08vw; height: 2.08vw; border-radius: 50%;
|
|
2353
2369
|
display: flex; align-items: center; justify-content: center;
|
|
2354
2370
|
background: linear-gradient(135deg, #bb945c, #d6ba7d);
|
|
2355
|
-
color: #111; font-size:
|
|
2371
|
+
color: #111; font-size: 0.68vw; font-weight: 700;
|
|
2356
2372
|
}
|
|
2357
|
-
.ps-tryon-history-result-img { width:
|
|
2373
|
+
.ps-tryon-history-result-img { width: 3.33vw; height: 4.17vw; border-radius: 0.52vw; object-fit: cover; flex-shrink: 0; border: 2px solid #bb945c; }
|
|
2358
2374
|
.ps-tryon-history-delete {
|
|
2359
|
-
width:
|
|
2360
|
-
border: none; background: transparent; cursor: pointer; color: #666; border-radius:
|
|
2375
|
+
width: 1.46vw; height: 1.46vw; display: flex; align-items: center; justify-content: center;
|
|
2376
|
+
border: none; background: transparent; cursor: pointer; color: #666; border-radius: 0.31vw; transition: all 0.2s; flex-shrink: 0;
|
|
2361
2377
|
}
|
|
2362
2378
|
.ps-tryon-history-delete:hover { background: rgba(239,68,68,0.1); color: #ef4444; }
|
|
2363
2379
|
.ps-tryon-history-delete svg { stroke: currentColor; fill: none; }
|
|
@@ -2366,33 +2382,33 @@ const STYLES = `
|
|
|
2366
2382
|
.ps-tryon-detail-overlay {
|
|
2367
2383
|
position: fixed; inset: 0; background: rgba(0,0,0,0.55);
|
|
2368
2384
|
display: flex; align-items: center; justify-content: center;
|
|
2369
|
-
z-index: 9999999; padding:
|
|
2385
|
+
z-index: 9999999; padding: 0.83vw; animation: ps-fade-in 0.2s ease;
|
|
2370
2386
|
}
|
|
2371
2387
|
.ps-tryon-detail-modal {
|
|
2372
|
-
background: #111211; border-radius:
|
|
2373
|
-
overflow-y: auto; box-shadow: 0
|
|
2388
|
+
background: #111211; border-radius: 0.83vw; width: 100%; max-width: 23vw; max-height: 85vh;
|
|
2389
|
+
overflow-y: auto; box-shadow: 0 1.67vw 3.33vw rgba(0,0,0,0.3); animation: ps-slide-up 0.25s ease;
|
|
2374
2390
|
font-family: var(--ps-modal-font, system-ui, sans-serif); color: #fff;
|
|
2375
2391
|
}
|
|
2376
2392
|
.ps-tryon-detail-header {
|
|
2377
2393
|
display: flex; align-items: center; justify-content: space-between;
|
|
2378
|
-
padding:
|
|
2394
|
+
padding: 0.94vw 1.25vw; border-bottom: 1px solid #333;
|
|
2379
2395
|
}
|
|
2380
|
-
.ps-tryon-detail-header span { font-size:
|
|
2381
|
-
.ps-tryon-detail-header button { background: none; border: none; color: #999; cursor: pointer; display: flex; align-items: center; border-radius:
|
|
2396
|
+
.ps-tryon-detail-header span { font-size: 0.78vw; font-weight: 600; }
|
|
2397
|
+
.ps-tryon-detail-header button { background: none; border: none; color: #999; cursor: pointer; display: flex; align-items: center; border-radius: 0.31vw; padding: 0.21vw; transition: background 0.15s; }
|
|
2382
2398
|
.ps-tryon-detail-header button:hover { background: rgba(255,255,255,0.1); }
|
|
2383
|
-
.ps-tryon-detail-body { padding:
|
|
2384
|
-
.ps-tryon-detail-gender { display: flex; align-items: center; gap:
|
|
2399
|
+
.ps-tryon-detail-body { padding: 1.04vw 1.25vw; }
|
|
2400
|
+
.ps-tryon-detail-gender { display: flex; align-items: center; gap: 0.42vw; font-size: 0.73vw; font-weight: 600; padding-bottom: 0.73vw; border-bottom: 1px solid #333; margin-bottom: 0.73vw; }
|
|
2385
2401
|
.ps-tryon-detail-gender svg { stroke: #bb945c; fill: none; }
|
|
2386
|
-
.ps-tryon-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap:
|
|
2387
|
-
.ps-tryon-detail-cell { background: #1a1b1a; border-radius:
|
|
2388
|
-
.ps-tryon-detail-cell-label { font-size:
|
|
2389
|
-
.ps-tryon-detail-cell-value { font-size:
|
|
2390
|
-
.ps-tryon-detail-date { font-size:
|
|
2402
|
+
.ps-tryon-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.52vw; margin-bottom: 0.83vw; }
|
|
2403
|
+
.ps-tryon-detail-cell { background: #1a1b1a; border-radius: 0.52vw; padding: 0.63vw 0.73vw; }
|
|
2404
|
+
.ps-tryon-detail-cell-label { font-size: 0.57vw; color: #999; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.21vw; }
|
|
2405
|
+
.ps-tryon-detail-cell-value { font-size: 0.83vw; font-weight: 600; color: #fff; }
|
|
2406
|
+
.ps-tryon-detail-date { font-size: 0.57vw; color: #666; text-align: center; margin-top: 0.42vw; }
|
|
2391
2407
|
.ps-tryon-detail-delete {
|
|
2392
|
-
width: 100%; display: flex; align-items: center; justify-content: center; gap:
|
|
2393
|
-
padding:
|
|
2394
|
-
color: #ef4444; font-size:
|
|
2395
|
-
font-family: inherit; margin-top:
|
|
2408
|
+
width: 100%; display: flex; align-items: center; justify-content: center; gap: 0.31vw;
|
|
2409
|
+
padding: 0.63vw; border: 1px solid #333; border-radius: 0.52vw; background: none;
|
|
2410
|
+
color: #ef4444; font-size: 0.68vw; font-weight: 500; cursor: pointer; transition: all 0.2s;
|
|
2411
|
+
font-family: inherit; margin-top: 0.83vw;
|
|
2396
2412
|
}
|
|
2397
2413
|
.ps-tryon-detail-delete:hover { background: rgba(239,68,68,0.06); border-color: #ef4444; }
|
|
2398
2414
|
.ps-tryon-detail-delete svg { stroke: currentColor; fill: none; }
|