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