@primestyleai/tryon 3.12.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.
- package/dist/react/index.js +243 -243
- package/package.json +1 -1
package/dist/react/index.js
CHANGED
|
@@ -1787,17 +1787,17 @@ const STYLES = `
|
|
|
1787
1787
|
.ps-tryon-root { display: inline-block; }
|
|
1788
1788
|
|
|
1789
1789
|
.ps-tryon-btn {
|
|
1790
|
-
display: inline-flex; align-items: center; gap:
|
|
1791
|
-
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);
|
|
1792
1792
|
background: var(--ps-btn-bg, #bb945c); color: var(--ps-btn-color, #111211);
|
|
1793
1793
|
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,
|
|
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);
|
|
1796
1796
|
cursor: pointer; transition: all 0.2s ease;
|
|
1797
1797
|
width: var(--ps-btn-width, auto); height: var(--ps-btn-height, auto);
|
|
1798
1798
|
box-shadow: var(--ps-btn-shadow, none); line-height: 1; white-space: nowrap;
|
|
1799
1799
|
}
|
|
1800
|
-
.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; }
|
|
1801
1801
|
.ps-tryon-btn:hover { background: var(--ps-btn-hover-bg, #a07d4e); transform: translateY(-1px); }
|
|
1802
1802
|
.ps-tryon-btn:active { transform: translateY(0); }
|
|
1803
1803
|
|
|
@@ -1805,8 +1805,8 @@ const STYLES = `
|
|
|
1805
1805
|
position: fixed; inset: 0; background: var(--ps-modal-overlay, rgba(0,0,0,0.6));
|
|
1806
1806
|
display: flex; align-items: center; justify-content: center;
|
|
1807
1807
|
z-index: 999999;
|
|
1808
|
-
padding:
|
|
1809
|
-
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));
|
|
1810
1810
|
animation: ps-fade-in 0.2s ease;
|
|
1811
1811
|
overflow-y: auto; -webkit-overflow-scrolling: touch;
|
|
1812
1812
|
}
|
|
@@ -1814,46 +1814,46 @@ const STYLES = `
|
|
|
1814
1814
|
|
|
1815
1815
|
.ps-tryon-modal {
|
|
1816
1816
|
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,
|
|
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;
|
|
1819
1819
|
font-family: var(--ps-modal-font, system-ui, -apple-system, sans-serif);
|
|
1820
|
-
box-shadow: 0
|
|
1820
|
+
box-shadow: 0 1.3vw 2.6vw rgba(0,0,0,0.4); animation: ps-slide-up 0.3s ease;
|
|
1821
1821
|
scrollbar-width: thin; scrollbar-color: #333 transparent;
|
|
1822
1822
|
flex-shrink: 0;
|
|
1823
1823
|
}
|
|
1824
|
-
.ps-tryon-modal-wide { max-width:
|
|
1824
|
+
.ps-tryon-modal-wide { max-width: 48vw; }
|
|
1825
1825
|
.ps-tryon-modal:has(.ps-tryon-drawer-open) { overflow: hidden; }
|
|
1826
|
-
@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; } }
|
|
1827
1827
|
|
|
1828
1828
|
/* Header */
|
|
1829
1829
|
.ps-tryon-header {
|
|
1830
1830
|
display: flex; align-items: center; justify-content: space-between;
|
|
1831
|
-
padding:
|
|
1831
|
+
padding: 0.94vw 1.25vw; background: var(--ps-modal-header-bg, #1a1b1a);
|
|
1832
1832
|
border-bottom: 1px solid #333;
|
|
1833
|
-
border-radius: var(--ps-modal-radius,
|
|
1833
|
+
border-radius: var(--ps-modal-radius, 0.83vw) var(--ps-modal-radius, 0.83vw) 0 0;
|
|
1834
1834
|
}
|
|
1835
|
-
.ps-tryon-title { font-size:
|
|
1836
|
-
.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; }
|
|
1837
1837
|
.ps-tryon-header-icon {
|
|
1838
|
-
width:
|
|
1839
|
-
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;
|
|
1840
1840
|
cursor: pointer; color: #999; transition: all 0.2s;
|
|
1841
1841
|
}
|
|
1842
1842
|
.ps-tryon-header-icon:hover { border-color: #bb945c; color: #bb945c; }
|
|
1843
1843
|
.ps-tryon-header-icon svg { stroke: currentColor; fill: none; }
|
|
1844
1844
|
.ps-tryon-close {
|
|
1845
|
-
width:
|
|
1845
|
+
width: 1.67vw; height: 1.67vw; display: flex; align-items: center; justify-content: center;
|
|
1846
1846
|
background: none; border: none; color: var(--ps-modal-close-color, #999);
|
|
1847
|
-
cursor: pointer; border-radius:
|
|
1847
|
+
cursor: pointer; border-radius: 0.31vw; transition: background 0.15s;
|
|
1848
1848
|
}
|
|
1849
1849
|
.ps-tryon-close:hover { background: rgba(255,255,255,0.1); }
|
|
1850
1850
|
|
|
1851
1851
|
/* Language switcher */
|
|
1852
1852
|
.ps-tryon-lang-wrap { position: relative; z-index: 10; }
|
|
1853
1853
|
.ps-tryon-lang-trigger {
|
|
1854
|
-
display: flex; align-items: center; gap:
|
|
1855
|
-
padding:
|
|
1856
|
-
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;
|
|
1857
1857
|
background: transparent; cursor: pointer; color: #999;
|
|
1858
1858
|
transition: all 0.25s ease; font-family: inherit; white-space: nowrap;
|
|
1859
1859
|
}
|
|
@@ -1862,116 +1862,116 @@ const STYLES = `
|
|
|
1862
1862
|
}
|
|
1863
1863
|
.ps-tryon-lang-trigger svg { stroke: currentColor; fill: none; flex-shrink: 0; }
|
|
1864
1864
|
.ps-tryon-lang-current {
|
|
1865
|
-
font-size:
|
|
1865
|
+
font-size: 0.68vw; font-weight: 500; letter-spacing: 0.01em;
|
|
1866
1866
|
}
|
|
1867
1867
|
.ps-tryon-lang-arrow {
|
|
1868
|
-
font-size:
|
|
1868
|
+
font-size: 0.57vw; transition: transform 0.25s ease; display: inline-block;
|
|
1869
1869
|
}
|
|
1870
1870
|
.ps-tryon-lang-arrow.ps-open { transform: rotate(180deg); }
|
|
1871
1871
|
|
|
1872
1872
|
.ps-tryon-lang-dropdown {
|
|
1873
|
-
position: absolute; top: calc(100% +
|
|
1874
|
-
min-width:
|
|
1873
|
+
position: absolute; top: calc(100% + 0.42vw); right: 0;
|
|
1874
|
+
min-width: 13vw;
|
|
1875
1875
|
background: #1a1b1a; border: 1.5px solid #333;
|
|
1876
|
-
border-radius:
|
|
1877
|
-
box-shadow: 0
|
|
1876
|
+
border-radius: 0.73vw;
|
|
1877
|
+
box-shadow: 0 1vw 3vw rgba(0,0,0,0.5),
|
|
1878
1878
|
0 0 0 1px rgba(255,255,255,0.03);
|
|
1879
1879
|
overflow: hidden;
|
|
1880
1880
|
animation: ps-lang-open 0.2s ease both;
|
|
1881
1881
|
}
|
|
1882
1882
|
@keyframes ps-lang-open {
|
|
1883
|
-
from { opacity: 0; transform: translateY(
|
|
1883
|
+
from { opacity: 0; transform: translateY(-0.42vw) scale(0.96); }
|
|
1884
1884
|
to { opacity: 1; transform: translateY(0) scale(1); }
|
|
1885
1885
|
}
|
|
1886
1886
|
|
|
1887
1887
|
.ps-tryon-lang-list {
|
|
1888
|
-
max-height:
|
|
1888
|
+
max-height: 18vw; overflow-y: auto; padding: 0.31vw;
|
|
1889
1889
|
scrollbar-width: thin; scrollbar-color: #333 transparent;
|
|
1890
1890
|
}
|
|
1891
1891
|
.ps-tryon-lang-item {
|
|
1892
|
-
display: flex; align-items: center; gap:
|
|
1893
|
-
width: 100%; padding:
|
|
1892
|
+
display: flex; align-items: center; gap: 0.57vw;
|
|
1893
|
+
width: 100%; padding: 0.57vw 0.83vw;
|
|
1894
1894
|
border: none; background: transparent; color: #ccc; cursor: pointer;
|
|
1895
|
-
border-radius:
|
|
1895
|
+
border-radius: 0.47vw; transition: all 0.15s ease;
|
|
1896
1896
|
font-family: inherit; text-align: left;
|
|
1897
1897
|
}
|
|
1898
1898
|
.ps-tryon-lang-item:hover { background: rgba(255,255,255,0.06); color: #fff; }
|
|
1899
1899
|
.ps-tryon-lang-item.ps-selected { background: rgba(187,148,92,0.1); color: #bb945c; }
|
|
1900
1900
|
.ps-tryon-lang-name {
|
|
1901
|
-
flex: 1; font-size:
|
|
1901
|
+
flex: 1; font-size: 0.73vw; font-weight: 500;
|
|
1902
1902
|
}
|
|
1903
1903
|
.ps-tryon-lang-code {
|
|
1904
|
-
font-size:
|
|
1904
|
+
font-size: 0.52vw; color: #666; font-weight: 600;
|
|
1905
1905
|
letter-spacing: 0.05em; font-family: ui-monospace, monospace;
|
|
1906
1906
|
}
|
|
1907
1907
|
.ps-tryon-lang-item.ps-selected .ps-tryon-lang-code { color: #bb945c; opacity: 0.7; }
|
|
1908
1908
|
.ps-tryon-lang-check { color: #bb945c; display: flex; align-items: center; }
|
|
1909
1909
|
|
|
1910
1910
|
/* Stepper */
|
|
1911
|
-
.ps-tryon-stepper { padding:
|
|
1911
|
+
.ps-tryon-stepper { padding: 1.04vw 1.25vw 0.63vw; }
|
|
1912
1912
|
.ps-tryon-stepper-track { display: flex; align-items: flex-start; }
|
|
1913
1913
|
.ps-tryon-stepper-fragment { display: flex; align-items: flex-start; flex: 1; }
|
|
1914
1914
|
.ps-tryon-stepper-fragment:first-child { flex: 0 0 auto; }
|
|
1915
|
-
.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; }
|
|
1916
1916
|
.ps-tryon-stepper-line.ps-done { background: #bb945c; }
|
|
1917
1917
|
.ps-tryon-stepper-step { display: flex; flex-direction: column; align-items: center; }
|
|
1918
1918
|
.ps-tryon-stepper-circle {
|
|
1919
|
-
width:
|
|
1919
|
+
width: 1.46vw; height: 1.46vw; border-radius: 50%;
|
|
1920
1920
|
display: flex; align-items: center; justify-content: center;
|
|
1921
|
-
border: 2px solid #333; font-size:
|
|
1921
|
+
border: 2px solid #333; font-size: 0.63vw; font-weight: 600; color: #666;
|
|
1922
1922
|
transition: all 0.3s;
|
|
1923
1923
|
}
|
|
1924
1924
|
.ps-tryon-stepper-step.ps-done .ps-tryon-stepper-circle { background: #bb945c; border-color: #bb945c; color: #111; }
|
|
1925
1925
|
.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:
|
|
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; }
|
|
1928
1928
|
.ps-tryon-stepper-step.ps-done .ps-tryon-stepper-label { color: #bb945c; }
|
|
1929
1929
|
.ps-tryon-stepper-step.ps-active .ps-tryon-stepper-label { color: #bb945c; font-weight: 700; }
|
|
1930
1930
|
|
|
1931
1931
|
/* Body */
|
|
1932
|
-
.ps-tryon-body { padding:
|
|
1933
|
-
@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); } }
|
|
1934
1934
|
.ps-tryon-view-enter { animation: ps-fade-up 0.35s ease both; }
|
|
1935
1935
|
|
|
1936
1936
|
/* Welcome */
|
|
1937
1937
|
.ps-tryon-welcome { text-align: center; }
|
|
1938
|
-
.ps-tryon-welcome-hero { margin-bottom:
|
|
1938
|
+
.ps-tryon-welcome-hero { margin-bottom: 1.04vw; }
|
|
1939
1939
|
.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:
|
|
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; }
|
|
1949
1949
|
.ps-tryon-feature-icon svg { stroke: currentColor; fill: none; }
|
|
1950
|
-
.ps-tryon-feature-title { font-size:
|
|
1951
|
-
.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; }
|
|
1952
1952
|
.ps-tryon-cta {
|
|
1953
|
-
width: 100%; padding:
|
|
1954
|
-
border-radius:
|
|
1955
|
-
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;
|
|
1956
1956
|
font-family: var(--ps-modal-font, system-ui, sans-serif);
|
|
1957
1957
|
}
|
|
1958
1958
|
.ps-tryon-cta:hover { background: #a07d4e; transform: translateY(-1px); }
|
|
1959
1959
|
.ps-tryon-cta svg { stroke: #111; }
|
|
1960
|
-
.ps-tryon-welcome-note { font-size:
|
|
1960
|
+
.ps-tryon-welcome-note { font-size: 0.57vw; color: #666; margin-top: 0.63vw; }
|
|
1961
1961
|
|
|
1962
1962
|
/* Upload */
|
|
1963
1963
|
.ps-tryon-upload {
|
|
1964
|
-
border: 2px dashed var(--ps-upload-border, #333); border-radius:
|
|
1965
|
-
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;
|
|
1966
1966
|
background: var(--ps-upload-bg, transparent); display: flex; flex-direction: column; align-items: center;
|
|
1967
1967
|
}
|
|
1968
1968
|
.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:
|
|
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; }
|
|
1972
1972
|
.ps-tryon-preview {
|
|
1973
|
-
position: relative; margin-bottom:
|
|
1974
|
-
height:
|
|
1973
|
+
position: relative; margin-bottom: 0.21vw;
|
|
1974
|
+
height: 20vw; border-radius: 0.63vw;
|
|
1975
1975
|
overflow: hidden; background: #0a0a0a;
|
|
1976
1976
|
}
|
|
1977
1977
|
.ps-tryon-preview-blur {
|
|
@@ -1980,173 +1980,173 @@ const STYLES = `
|
|
|
1980
1980
|
}
|
|
1981
1981
|
.ps-tryon-preview img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; display: block; }
|
|
1982
1982
|
.ps-tryon-preview-remove {
|
|
1983
|
-
position: absolute; top:
|
|
1983
|
+
position: absolute; top: 0.42vw; right: 0.42vw; width: 1.46vw; height: 1.46vw;
|
|
1984
1984
|
border-radius: 50%; background: rgba(0,0,0,0.6); border: none; color: white;
|
|
1985
1985
|
cursor: pointer; display: flex; align-items: center; justify-content: center;
|
|
1986
|
-
font-size:
|
|
1986
|
+
font-size: 0.83vw; transition: background 0.15s;
|
|
1987
1987
|
}
|
|
1988
1988
|
.ps-tryon-preview-remove:hover { background: rgba(0,0,0,0.8); }
|
|
1989
1989
|
.ps-tryon-submit {
|
|
1990
|
-
width: 100%; padding:
|
|
1990
|
+
width: 100%; padding: 0.73vw; margin-top: 0.83vw;
|
|
1991
1991
|
background: var(--ps-modal-primary-bg, #bb945c); color: var(--ps-modal-primary-color, #111);
|
|
1992
1992
|
font-family: var(--ps-modal-font, system-ui, sans-serif);
|
|
1993
|
-
font-size:
|
|
1994
|
-
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);
|
|
1995
1995
|
cursor: pointer; transition: all 0.2s;
|
|
1996
|
-
display: flex; align-items: center; justify-content: center; gap:
|
|
1996
|
+
display: flex; align-items: center; justify-content: center; gap: 0.42vw;
|
|
1997
1997
|
}
|
|
1998
1998
|
.ps-tryon-submit:hover { opacity: 0.9; transform: translateY(-1px); }
|
|
1999
1999
|
.ps-tryon-submit svg { stroke: currentColor; }
|
|
2000
2000
|
|
|
2001
2001
|
/* Profile bar */
|
|
2002
|
-
.ps-tryon-profile-bar { margin-bottom:
|
|
2002
|
+
.ps-tryon-profile-bar { margin-bottom: 0.83vw; }
|
|
2003
2003
|
.ps-tryon-profile-select {
|
|
2004
|
-
width: 100%; padding:
|
|
2005
|
-
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;
|
|
2006
2006
|
appearance: none; -webkit-appearance: none; cursor: pointer; outline: none;
|
|
2007
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");
|
|
2008
|
-
background-repeat: no-repeat; background-position: right
|
|
2008
|
+
background-repeat: no-repeat; background-position: right 0.73vw center;
|
|
2009
2009
|
}
|
|
2010
2010
|
.ps-tryon-profile-select:focus { border-color: #bb945c; }
|
|
2011
2011
|
|
|
2012
2012
|
/* Sizing choice */
|
|
2013
2013
|
.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:
|
|
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; }
|
|
2016
2016
|
.ps-tryon-choice-card {
|
|
2017
|
-
display: flex; align-items: center; gap:
|
|
2018
|
-
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;
|
|
2019
2019
|
background: #1a1b1a; cursor: pointer; transition: all 0.25s; text-align: left;
|
|
2020
2020
|
width: 100%; font-family: inherit; position: relative; overflow: hidden;
|
|
2021
2021
|
}
|
|
2022
|
-
.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); }
|
|
2023
2023
|
.ps-tryon-choice-card:hover::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #bb945c; }
|
|
2024
2024
|
.ps-tryon-choice-icon { color: #bb945c; flex-shrink: 0; }
|
|
2025
2025
|
.ps-tryon-choice-icon svg { stroke: currentColor; fill: none; }
|
|
2026
2026
|
.ps-tryon-choice-info { flex: 1; min-width: 0; }
|
|
2027
|
-
.ps-tryon-choice-title { font-size:
|
|
2028
|
-
.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; }
|
|
2029
2029
|
.ps-tryon-choice-badge {
|
|
2030
|
-
padding:
|
|
2031
|
-
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;
|
|
2032
2032
|
}
|
|
2033
2033
|
.ps-tryon-sg-notice {
|
|
2034
|
-
font-size:
|
|
2035
|
-
margin-bottom:
|
|
2036
|
-
display: flex; flex-direction: column; align-items: center; gap:
|
|
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
2037
|
}
|
|
2038
2038
|
.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:
|
|
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
2043
|
transition: all 0.2s; font-family: inherit;
|
|
2044
2044
|
}
|
|
2045
2045
|
.ps-tryon-sg-notice-cta:hover { background: #a07d4e; }
|
|
2046
2046
|
.ps-tryon-sg-notice-cta svg { stroke: #111; }
|
|
2047
2047
|
.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:
|
|
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; }
|
|
2050
2050
|
.ps-tryon-sg-checking-icon svg { stroke: currentColor; fill: none; }
|
|
2051
2051
|
@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:
|
|
2052
|
+
.ps-tryon-sg-checking-bar-wrap { width: 9.4vw; height: 4px; background: #333; border-radius: 2px; overflow: hidden; margin-bottom: 1.04vw; }
|
|
2053
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; }
|
|
2054
2054
|
@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:
|
|
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; }
|
|
2057
2057
|
|
|
2058
2058
|
/* Back button */
|
|
2059
|
-
.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; }
|
|
2060
2060
|
.ps-tryon-back:hover { color: #fff; }
|
|
2061
2061
|
.ps-tryon-back svg { stroke: currentColor; fill: none; }
|
|
2062
2062
|
|
|
2063
2063
|
/* 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:
|
|
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; }
|
|
2067
2067
|
.ps-tryon-input-row input {
|
|
2068
|
-
flex: 1; padding:
|
|
2069
|
-
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;
|
|
2070
2070
|
transition: border-color 0.2s; -moz-appearance: textfield;
|
|
2071
2071
|
}
|
|
2072
2072
|
.ps-tryon-input-row input::-webkit-outer-spin-button,
|
|
2073
2073
|
.ps-tryon-input-row input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
|
|
2074
2074
|
.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:
|
|
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; }
|
|
2078
2078
|
.ps-tryon-height-ft input::-webkit-outer-spin-button, .ps-tryon-height-ft input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
|
|
2079
2079
|
.ps-tryon-height-ft input:focus { border-color: #bb945c; }
|
|
2080
|
-
.ps-tryon-height-ft span { font-size:
|
|
2080
|
+
.ps-tryon-height-ft span { font-size: 0.63vw; color: #666; }
|
|
2081
2081
|
.ps-tryon-country-select {
|
|
2082
|
-
flex: 1; padding:
|
|
2083
|
-
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;
|
|
2084
2084
|
appearance: none; -webkit-appearance: none; cursor: pointer; outline: none;
|
|
2085
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");
|
|
2086
|
-
background-repeat: no-repeat; background-position: right
|
|
2086
|
+
background-repeat: no-repeat; background-position: right 0.73vw center;
|
|
2087
2087
|
}
|
|
2088
2088
|
.ps-tryon-country-select:focus { border-color: #bb945c; }
|
|
2089
|
-
.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; }
|
|
2090
2090
|
.ps-tryon-unit-btn {
|
|
2091
|
-
padding:
|
|
2092
|
-
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;
|
|
2093
2093
|
}
|
|
2094
2094
|
.ps-tryon-unit-btn.ps-active { background: #bb945c; color: #111; }
|
|
2095
2095
|
|
|
2096
2096
|
/* Prominent unit switch (cm/in) */
|
|
2097
2097
|
.ps-tryon-unit-switch {
|
|
2098
|
-
display: flex; gap:
|
|
2098
|
+
display: flex; gap: 0.42vw; margin-bottom: 0.83vw;
|
|
2099
2099
|
}
|
|
2100
2100
|
.ps-tryon-unit-switch-btn {
|
|
2101
|
-
flex: 1; display: flex; flex-direction: column; align-items: center; gap:
|
|
2102
|
-
padding:
|
|
2103
|
-
border: 2px solid #333; border-radius:
|
|
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
2104
|
background: transparent; color: #666; cursor: pointer;
|
|
2105
2105
|
transition: all 0.25s ease; font-family: inherit;
|
|
2106
2106
|
}
|
|
2107
2107
|
.ps-tryon-unit-switch-btn:hover { border-color: #555; color: #999; }
|
|
2108
2108
|
.ps-tryon-unit-switch-btn.ps-active {
|
|
2109
2109
|
border-color: #bb945c; background: rgba(187,148,92,0.08); color: #bb945c;
|
|
2110
|
-
box-shadow: 0 0 0
|
|
2110
|
+
box-shadow: 0 0 0 0.21vw rgba(187,148,92,0.08);
|
|
2111
2111
|
}
|
|
2112
2112
|
.ps-tryon-unit-switch-label {
|
|
2113
|
-
font-size:
|
|
2113
|
+
font-size: 1.04vw; font-weight: 700; letter-spacing: 0.02em;
|
|
2114
2114
|
}
|
|
2115
2115
|
.ps-tryon-unit-switch-sub {
|
|
2116
|
-
font-size:
|
|
2116
|
+
font-size: 0.52vw; font-weight: 500; opacity: 0.6;
|
|
2117
2117
|
}
|
|
2118
|
-
.ps-tryon-section-label { font-size:
|
|
2119
|
-
.ps-tryon-optional-section { border-top: 1px solid #333; padding-top:
|
|
2120
|
-
.ps-tryon-optional-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: 1px solid #333; border-radius:
|
|
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; }
|
|
2121
2121
|
.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:
|
|
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; }
|
|
2128
2128
|
.ps-tryon-form-save-check {
|
|
2129
|
-
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;
|
|
2130
2130
|
}
|
|
2131
2131
|
.ps-tryon-form-save-check input[type="checkbox"] {
|
|
2132
|
-
width:
|
|
2132
|
+
width: 0.83vw; height: 0.83vw; accent-color: #bb945c; cursor: pointer;
|
|
2133
2133
|
}
|
|
2134
2134
|
.ps-tryon-form-save-name {
|
|
2135
|
-
padding:
|
|
2136
|
-
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;
|
|
2137
2137
|
transition: border-color 0.2s;
|
|
2138
2138
|
}
|
|
2139
2139
|
.ps-tryon-form-save-name:focus { border-color: #bb945c; }
|
|
2140
2140
|
|
|
2141
2141
|
/* Processing */
|
|
2142
|
-
.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; }
|
|
2143
2143
|
|
|
2144
2144
|
.ps-tryon-processing-image-wrap {
|
|
2145
|
-
position: relative; width:
|
|
2146
|
-
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;
|
|
2147
2147
|
}
|
|
2148
2148
|
.ps-tryon-processing-blur {
|
|
2149
|
-
position: absolute; inset:
|
|
2149
|
+
position: absolute; inset: -1.04vw; background-size: cover; background-position: center;
|
|
2150
2150
|
filter: blur(25px) brightness(0.5); transform: scale(1.2);
|
|
2151
2151
|
}
|
|
2152
2152
|
.ps-tryon-processing-model {
|
|
@@ -2160,7 +2160,7 @@ const STYLES = `
|
|
|
2160
2160
|
.ps-tryon-scan-line {
|
|
2161
2161
|
position: absolute; left: 0; right: 0; height: 3px;
|
|
2162
2162
|
background: linear-gradient(90deg, transparent, #bb945c 20%, #d6ba7d 50%, #bb945c 80%, transparent);
|
|
2163
|
-
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);
|
|
2164
2164
|
animation: ps-scan 2.5s ease-in-out infinite;
|
|
2165
2165
|
pointer-events: none; z-index: 2;
|
|
2166
2166
|
}
|
|
@@ -2172,35 +2172,35 @@ const STYLES = `
|
|
|
2172
2172
|
}
|
|
2173
2173
|
|
|
2174
2174
|
.ps-tryon-progress-section {
|
|
2175
|
-
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;
|
|
2176
2176
|
}
|
|
2177
2177
|
.ps-tryon-progress-bar-wrap {
|
|
2178
|
-
flex: 1; height:
|
|
2178
|
+
flex: 1; height: 0.31vw; background: #333; border-radius: 3px; overflow: hidden;
|
|
2179
2179
|
}
|
|
2180
2180
|
.ps-tryon-progress-bar-fill {
|
|
2181
2181
|
height: 100%; background: linear-gradient(90deg, #bb945c, #d6ba7d);
|
|
2182
2182
|
border-radius: 3px; transition: width 0.3s ease; width: 0%;
|
|
2183
2183
|
}
|
|
2184
2184
|
.ps-tryon-progress-pct {
|
|
2185
|
-
font-size:
|
|
2185
|
+
font-size: 0.68vw; font-weight: 700; color: #bb945c; min-width: 1.88vw; text-align: right;
|
|
2186
2186
|
font-variant-numeric: tabular-nums;
|
|
2187
2187
|
}
|
|
2188
2188
|
|
|
2189
2189
|
@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:
|
|
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; }
|
|
2192
2192
|
|
|
2193
2193
|
/* Result */
|
|
2194
2194
|
.ps-tryon-result-layout { text-align: center; }
|
|
2195
|
-
.ps-tryon-result-split { display: flex; gap:
|
|
2195
|
+
.ps-tryon-result-split { display: flex; gap: 1.25vw; text-align: left; align-items: stretch; }
|
|
2196
2196
|
.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:
|
|
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; }
|
|
2198
2198
|
.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:
|
|
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; }
|
|
2201
2201
|
.ps-tryon-result-actions button {
|
|
2202
|
-
flex: 1; padding:
|
|
2203
|
-
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;
|
|
2204
2204
|
}
|
|
2205
2205
|
.ps-tryon-btn-download { background: #bb945c; color: #111; }
|
|
2206
2206
|
.ps-tryon-btn-download:hover { opacity: 0.9; }
|
|
@@ -2208,172 +2208,172 @@ const STYLES = `
|
|
|
2208
2208
|
.ps-tryon-btn-retry:hover { background: rgba(255,255,255,0.12); }
|
|
2209
2209
|
|
|
2210
2210
|
/* Size recommendation */
|
|
2211
|
-
.ps-tryon-size-recommend { margin-bottom:
|
|
2212
|
-
.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; }
|
|
2213
2213
|
.ps-tryon-size-hero-row {
|
|
2214
|
-
display: flex; align-items: center; gap:
|
|
2215
|
-
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);
|
|
2216
2216
|
}
|
|
2217
2217
|
.ps-tryon-size-badge {
|
|
2218
2218
|
display: inline-flex; align-items: center; justify-content: center;
|
|
2219
|
-
min-width:
|
|
2219
|
+
min-width: 2.92vw; height: 2.92vw; padding: 0 0.63vw; border-radius: 0.63vw;
|
|
2220
2220
|
background: linear-gradient(135deg, #bb945c, #d6ba7d);
|
|
2221
|
-
color: #111; font-size:
|
|
2221
|
+
color: #111; font-size: 1.25vw; font-weight: 800; letter-spacing: -0.02em;
|
|
2222
2222
|
}
|
|
2223
|
-
.ps-tryon-size-conf-label { font-size:
|
|
2223
|
+
.ps-tryon-size-conf-label { font-size: 0.78vw; font-weight: 600; }
|
|
2224
2224
|
.ps-conf-high { color: #4ade80; } .ps-conf-medium { color: #bb945c; } .ps-conf-low { color: #ef4444; }
|
|
2225
2225
|
|
|
2226
|
-
.ps-tryon-sizing-loading { text-align: center; padding:
|
|
2226
|
+
.ps-tryon-sizing-loading { text-align: center; padding: 1.04vw 0; }
|
|
2227
2227
|
.ps-tryon-size-loading-spinner {
|
|
2228
|
-
width:
|
|
2228
|
+
width: 1.88vw; height: 1.88vw; border: 3px solid #333;
|
|
2229
2229
|
border-top-color: #bb945c; border-radius: 50%;
|
|
2230
|
-
animation: ps-spin 0.8s linear infinite; margin: 0 auto
|
|
2230
|
+
animation: ps-spin 0.8s linear infinite; margin: 0 auto 0.63vw;
|
|
2231
2231
|
}
|
|
2232
2232
|
@keyframes ps-spin { to { transform: rotate(360deg); } }
|
|
2233
2233
|
|
|
2234
2234
|
/* 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:
|
|
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; }
|
|
2238
2238
|
.ps-tryon-fit-icon {
|
|
2239
|
-
width:
|
|
2240
|
-
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;
|
|
2241
2241
|
}
|
|
2242
2242
|
.ps-fit-icon-good { background: rgba(74,222,128,0.15); color: #4ade80; }
|
|
2243
2243
|
.ps-fit-icon-tight { background: rgba(245,158,11,0.15); color: #f59e0b; }
|
|
2244
2244
|
.ps-fit-icon-loose { background: rgba(96,165,250,0.15); color: #60a5fa; }
|
|
2245
|
-
.ps-tryon-fit-text { font-size:
|
|
2245
|
+
.ps-tryon-fit-text { font-size: 0.73vw; color: #ccc; line-height: 1.4; }
|
|
2246
2246
|
.ps-tryon-fit-text strong { color: #fff; font-weight: 600; }
|
|
2247
2247
|
.ps-tryon-fit-details-toggle {
|
|
2248
|
-
display: inline-block; margin-top:
|
|
2248
|
+
display: inline-block; margin-top: 0.42vw; font-size: 0.68vw; color: #bb945c; cursor: pointer;
|
|
2249
2249
|
font-weight: 600; background: none; border: none; padding: 0; font-family: inherit;
|
|
2250
2250
|
}
|
|
2251
2251
|
.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:
|
|
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; }
|
|
2255
2255
|
.ps-fit-good { color: #4ade80; } .ps-fit-tight { color: #f59e0b; } .ps-fit-loose { color: #60a5fa; }
|
|
2256
2256
|
|
|
2257
2257
|
/* 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:
|
|
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; }
|
|
2261
2261
|
.ps-tryon-equiv-chip {
|
|
2262
|
-
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;
|
|
2263
2263
|
}
|
|
2264
|
-
.ps-tryon-equiv-region { padding:
|
|
2265
|
-
.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; }
|
|
2266
2266
|
|
|
2267
2267
|
/* 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:
|
|
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; }
|
|
2270
2270
|
.ps-tryon-section-row:last-child { border-bottom: none; }
|
|
2271
|
-
.ps-tryon-section-name { font-size:
|
|
2272
|
-
.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; }
|
|
2273
2273
|
|
|
2274
|
-
.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; }
|
|
2275
2275
|
|
|
2276
2276
|
/* 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:
|
|
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; }
|
|
2279
2279
|
.ps-tryon-btn-secondary {
|
|
2280
|
-
background: transparent; border: 1.5px solid #444; color: #999; font-size:
|
|
2281
|
-
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;
|
|
2282
2282
|
cursor: pointer; transition: all 0.2s;
|
|
2283
2283
|
}
|
|
2284
2284
|
.ps-tryon-btn-secondary:hover { border-color: #666; color: #ccc; }
|
|
2285
|
-
.ps-tryon-size-compact { padding:
|
|
2286
|
-
.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; }
|
|
2287
2287
|
|
|
2288
2288
|
/* 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:
|
|
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; }
|
|
2292
2292
|
.ps-tryon-save-row input {
|
|
2293
|
-
flex: 1; padding:
|
|
2294
|
-
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;
|
|
2295
2295
|
}
|
|
2296
2296
|
.ps-tryon-save-row input:focus { border-color: #bb945c; }
|
|
2297
2297
|
.ps-tryon-save-row button {
|
|
2298
|
-
padding:
|
|
2299
|
-
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;
|
|
2300
2300
|
}
|
|
2301
2301
|
.ps-tryon-save-row button:hover { opacity: 0.9; }
|
|
2302
|
-
.ps-tryon-save-btn-group { display: flex; gap:
|
|
2302
|
+
.ps-tryon-save-btn-group { display: flex; gap: 0.31vw; }
|
|
2303
2303
|
.ps-tryon-save-new-btn { background: transparent !important; border: 1.5px solid #bb945c !important; color: #bb945c !important; }
|
|
2304
2304
|
.ps-tryon-save-new-btn:hover { background: rgba(187,148,92,0.1) !important; }
|
|
2305
|
-
.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; }
|
|
2306
2306
|
.ps-tryon-save-done svg { stroke: currentColor; }
|
|
2307
2307
|
|
|
2308
2308
|
/* 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:
|
|
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; }
|
|
2312
2312
|
|
|
2313
2313
|
/* Footer */
|
|
2314
|
-
.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; }
|
|
2315
2315
|
.ps-tryon-powered a { color: #bb945c; text-decoration: none; }
|
|
2316
2316
|
.ps-tryon-powered a:hover { text-decoration: underline; }
|
|
2317
2317
|
|
|
2318
2318
|
/* Drawer */
|
|
2319
2319
|
.ps-tryon-drawer {
|
|
2320
2320
|
position: absolute; inset: 0; z-index: 20; background: var(--ps-modal-bg, #111211);
|
|
2321
|
-
overflow-y: auto; scrollbar-width: thin; padding:
|
|
2321
|
+
overflow-y: auto; scrollbar-width: thin; padding: 1.04vw 1.25vw;
|
|
2322
2322
|
transform: translateX(100%); transition: transform 0.25s cubic-bezier(0.4,0,0.2,1);
|
|
2323
2323
|
}
|
|
2324
2324
|
.ps-tryon-drawer-open { transform: translateX(0); }
|
|
2325
|
-
.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; }
|
|
2326
2326
|
.ps-tryon-drawer-back {
|
|
2327
|
-
width:
|
|
2328
|
-
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;
|
|
2329
2329
|
cursor: pointer; color: #999; transition: all 0.2s; flex-shrink: 0;
|
|
2330
2330
|
}
|
|
2331
2331
|
.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:
|
|
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; }
|
|
2335
2335
|
|
|
2336
2336
|
/* Profile items */
|
|
2337
2337
|
.ps-tryon-profile-item {
|
|
2338
|
-
display: flex; align-items: center; gap:
|
|
2339
|
-
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;
|
|
2340
2340
|
}
|
|
2341
2341
|
.ps-tryon-profile-item:hover { border-color: #bb945c; }
|
|
2342
2342
|
.ps-tryon-profile-avatar {
|
|
2343
|
-
width:
|
|
2343
|
+
width: 2.08vw; height: 2.08vw; border-radius: 50%;
|
|
2344
2344
|
display: flex; align-items: center; justify-content: center;
|
|
2345
2345
|
background: rgba(187,148,92,0.1); flex-shrink: 0;
|
|
2346
2346
|
}
|
|
2347
2347
|
.ps-tryon-profile-avatar svg { stroke: #bb945c; fill: none; }
|
|
2348
2348
|
.ps-tryon-profile-info { flex: 1; min-width: 0; }
|
|
2349
|
-
.ps-tryon-profile-name { font-size:
|
|
2350
|
-
.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; }
|
|
2351
2351
|
.ps-tryon-profile-item > svg:last-child { color: #666; flex-shrink: 0; transition: color 0.2s; }
|
|
2352
2352
|
.ps-tryon-profile-item:hover > svg:last-child { color: #bb945c; }
|
|
2353
2353
|
|
|
2354
2354
|
/* History items */
|
|
2355
2355
|
.ps-tryon-history-item {
|
|
2356
|
-
display: flex; gap:
|
|
2357
|
-
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;
|
|
2358
2358
|
}
|
|
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:
|
|
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; }
|
|
2362
2362
|
.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:
|
|
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; }
|
|
2367
2367
|
.ps-tryon-history-size-badge {
|
|
2368
|
-
flex-shrink: 0; width:
|
|
2368
|
+
flex-shrink: 0; width: 2.08vw; height: 2.08vw; border-radius: 50%;
|
|
2369
2369
|
display: flex; align-items: center; justify-content: center;
|
|
2370
2370
|
background: linear-gradient(135deg, #bb945c, #d6ba7d);
|
|
2371
|
-
color: #111; font-size:
|
|
2371
|
+
color: #111; font-size: 0.68vw; font-weight: 700;
|
|
2372
2372
|
}
|
|
2373
|
-
.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; }
|
|
2374
2374
|
.ps-tryon-history-delete {
|
|
2375
|
-
width:
|
|
2376
|
-
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;
|
|
2377
2377
|
}
|
|
2378
2378
|
.ps-tryon-history-delete:hover { background: rgba(239,68,68,0.1); color: #ef4444; }
|
|
2379
2379
|
.ps-tryon-history-delete svg { stroke: currentColor; fill: none; }
|
|
@@ -2382,33 +2382,33 @@ const STYLES = `
|
|
|
2382
2382
|
.ps-tryon-detail-overlay {
|
|
2383
2383
|
position: fixed; inset: 0; background: rgba(0,0,0,0.55);
|
|
2384
2384
|
display: flex; align-items: center; justify-content: center;
|
|
2385
|
-
z-index: 9999999; padding:
|
|
2385
|
+
z-index: 9999999; padding: 0.83vw; animation: ps-fade-in 0.2s ease;
|
|
2386
2386
|
}
|
|
2387
2387
|
.ps-tryon-detail-modal {
|
|
2388
|
-
background: #111211; border-radius:
|
|
2389
|
-
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;
|
|
2390
2390
|
font-family: var(--ps-modal-font, system-ui, sans-serif); color: #fff;
|
|
2391
2391
|
}
|
|
2392
2392
|
.ps-tryon-detail-header {
|
|
2393
2393
|
display: flex; align-items: center; justify-content: space-between;
|
|
2394
|
-
padding:
|
|
2394
|
+
padding: 0.94vw 1.25vw; border-bottom: 1px solid #333;
|
|
2395
2395
|
}
|
|
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:
|
|
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; }
|
|
2398
2398
|
.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:
|
|
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; }
|
|
2401
2401
|
.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:
|
|
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; }
|
|
2407
2407
|
.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:
|
|
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;
|
|
2412
2412
|
}
|
|
2413
2413
|
.ps-tryon-detail-delete:hover { background: rgba(239,68,68,0.06); border-color: #ef4444; }
|
|
2414
2414
|
.ps-tryon-detail-delete svg { stroke: currentColor; fill: none; }
|