s.esmaeili
b80fa9bcfb
- SingleProduct.vue: rebuild gallery/header/action bar as a self-scrolling layout with a sticky photo, solid-on-scroll header matching PageBar, and a full-screen image preview (blurred overlay, centered thumbnail strip) - Add GallerySlider.vue: pointer-based swipe carousel isolated in an LTR subtree, fixing RTL/transform sign mismatch that caused slide jumps - Fix Icon.vue: icon was read into a plain ref once at setup and never updated on prop change; switch to computed so icon swaps (e.g. cart qty stepper trash/minus toggle) actually re-render - Fix quantity stepper DOM order in SingleProduct.vue/CartItem.vue so plus/minus render correctly under RTL flex - prisma/assign-downloaded-images.js: seed real product photos (FEATURED/ FEATURED_MOBILE/GALLERY/GALLERY_MOBILE) onto the 5 placeholder products
2 lines
12 KiB
CSS
2 lines
12 KiB
CSS
.gs[data-v-c30d71a6]{position:relative;width:100%;height:100%;overflow:hidden;touch-action:pan-y;-moz-user-select:none;user-select:none;-webkit-user-select:none}.gs__track[data-v-c30d71a6]{direction:ltr;display:flex;height:100%;width:100%;transition:transform .42s cubic-bezier(.22,.61,.36,1);will-change:transform}.gs.is-dragging .gs__track[data-v-c30d71a6]{transition:none}.gs__cell[data-v-c30d71a6]{flex:0 0 100%;width:100%;height:100%}.gs__img[data-v-c30d71a6]{width:100%;height:100%;display:block;-webkit-user-drag:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.gs__img--cover[data-v-c30d71a6]{-o-object-fit:contain;object-fit:contain;padding:46px 20px 20px}.gs__img--contain[data-v-c30d71a6]{-o-object-fit:contain;object-fit:contain;padding:20px 22px}.gs__counter[data-v-c30d71a6]{position:absolute;bottom:14px;inset-inline-start:14px;padding:4px 9px;border-radius:999px;font-size:10.5px;font-weight:700;color:#fff;background:#14161a73;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);direction:ltr;pointer-events:none}.pd[data-v-d89aad97]{position:relative;height:100vh;overflow-y:auto;overflow-x:hidden;background:#fff;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}.pd__gallery[data-v-d89aad97]{position:sticky;top:0;z-index:1;margin-top:calc(-60px - env(safe-area-inset-top,0px))}.pd__header[data-v-d89aad97]{position:sticky;top:0;z-index:10;padding-top:env(safe-area-inset-top,0px);background:transparent;border-bottom:1px solid transparent;transition:background .28s ease,border-color .28s ease,backdrop-filter .28s ease}.pd__header.is-solid[data-v-d89aad97]{background:#ffffffe0;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom-color:#ecedef}.pd__headerTitle[data-v-d89aad97]{flex:1;min-width:0;margin:0;text-align:center;font-size:14.5px;font-weight:800;color:#14161a;letter-spacing:-.1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transition:opacity .28s ease}.is-solid .pd__headerTitle[data-v-d89aad97]{opacity:1}.pd__controls[data-v-d89aad97]{max-width:768px;margin:0 auto;padding:11px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px}.pd__controlsEnd[data-v-d89aad97]{display:flex;gap:9px}.pd__round[data-v-d89aad97]{position:relative;width:38px;height:38px;display:grid;place-items:center;border:0;border-radius:12px;cursor:pointer;text-decoration:none;color:#14161a;background:#ffffffe6;-webkit-backdrop-filter:blur(10px) saturate(140%);backdrop-filter:blur(10px) saturate(140%);box-shadow:0 10px 26px -16px #14161ab3;transition:transform .18s ease,color .28s ease,background .28s ease,box-shadow .28s ease}.pd__round[data-v-d89aad97]:active{transform:scale(.92)}.pd__round.is-on[data-v-d89aad97]{color:#fff;background:#7a1b33}.is-solid .pd__round[data-v-d89aad97]{color:#14161a;background:#f4f5f6;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}.is-solid .pd__round.is-on[data-v-d89aad97]{color:#fff;background:#7a1b33}.pd__roundBadge[data-v-d89aad97]{position:absolute;top:-5px;inset-inline-start:-5px;min-width:18px;height:18px;padding:0 5px;display:grid;place-items:center;border-radius:999px;font-size:10px;font-weight:800;color:#fff;background:#7a1b33}.pd__stage[data-v-d89aad97]{position:relative;height:54vh;min-height:320px;max-height:460px;overflow:hidden;background:#f4f5f6;touch-action:pan-y}.pd__stage--empty[data-v-d89aad97]{display:grid;place-items:center;color:#8a909c}.pd__rail[data-v-d89aad97]{position:absolute;top:50%;inset-inline-end:12px;transform:translateY(-50%);display:flex;flex-direction:column;gap:6px;padding:7px 5px;border-radius:999px;background:#14161a4d;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.pd__railDot[data-v-d89aad97]{width:6px;height:6px;padding:0;border:0;border-radius:999px;cursor:pointer;background:#ffffff80;transition:height .25s cubic-bezier(.32,.72,0,1),background .25s ease}.pd__railDot.is-on[data-v-d89aad97]{height:20px;background:#fff}.pd__expand[data-v-d89aad97]{position:absolute;bottom:12px;inset-inline-start:12px;width:30px;height:30px;display:grid;place-items:center;border-radius:10px;color:#fff;background:#14161a59;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);pointer-events:none}.pd__preview[data-v-d89aad97]{position:fixed;top:0;right:0;bottom:0;left:0;z-index:2000;display:flex;flex-direction:column;background:#0a0a0c8c;-webkit-backdrop-filter:blur(28px) saturate(140%);backdrop-filter:blur(28px) saturate(140%)}.pd__previewClose[data-v-d89aad97]{position:absolute;top:calc(14px + env(safe-area-inset-top,0px));inset-inline-end:14px;z-index:2;width:38px;height:38px;display:grid;place-items:center;border:0;border-radius:12px;cursor:pointer;color:#fff;background:#ffffff24;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transform:rotate(45deg);transition:transform .18s ease,background .18s ease}.pd__previewClose[data-v-d89aad97]:active{transform:rotate(45deg) scale(.92)}.pd__previewCounter[data-v-d89aad97]{position:absolute;top:calc(24px + env(safe-area-inset-top,0px));inset-inline-start:0;inset-inline-end:0;z-index:2;text-align:center;font-size:12px;font-weight:700;color:#ffffffbf;direction:ltr;pointer-events:none}.pd__previewStage[data-v-d89aad97]{flex:1;min-height:0}.pd__previewThumbs[data-v-d89aad97]{flex-shrink:0;display:flex;justify-content:center;gap:8px;overflow-x:auto;scroll-snap-type:x proximity;padding:10px 16px calc(18px + env(safe-area-inset-bottom,0px))}.pd__previewThumb[data-v-d89aad97]{scroll-snap-align:center;flex:0 0 auto;width:52px;height:52px;padding:6px;border:0;border-radius:12px;cursor:pointer;overflow:hidden;background:#fff;opacity:.65;outline:2px solid transparent;outline-offset:2px;transition:opacity .2s ease,outline-color .2s ease,transform .18s ease}.pd__previewThumb[data-v-d89aad97]:active{transform:scale(.94)}.pd__previewThumb.is-on[data-v-d89aad97]{opacity:1;outline-color:#fff}.pd__previewThumb img[data-v-d89aad97]{width:100%;height:100%;-o-object-fit:contain;object-fit:contain;display:block;-webkit-user-drag:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.pd-preview-enter-active[data-v-d89aad97],.pd-preview-leave-active[data-v-d89aad97]{transition:opacity .24s ease}.pd-preview-enter-from[data-v-d89aad97],.pd-preview-leave-to[data-v-d89aad97]{opacity:0}.pd__scroll[data-v-d89aad97]{position:relative;z-index:2}.pd__sheet[data-v-d89aad97]{position:relative;margin-top:-8px;border-radius:32px 32px 0 0;background:#fff;padding:8px 18px;box-shadow:0 -18px 40px -30px #14161a8c;min-height:calc(100vh - 132px - env(safe-area-inset-top,0px))}.pd__grip[data-v-d89aad97]{width:38px;height:4px;margin:0 auto 12px;border-radius:999px;background:#ecedef}.pd__eyebrow[data-v-d89aad97]{display:flex;align-items:center;justify-content:space-between;gap:12px}.pd__eyebrowText[data-v-d89aad97]{font-size:11.5px;font-weight:600;color:#8a909c}.pd__stock[data-v-d89aad97]{flex-shrink:0;display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;font-size:10.5px;font-weight:700;white-space:nowrap}.pd__stockDot[data-v-d89aad97]{width:5px;height:5px;border-radius:999px;background:currentColor}.pd__stock.is-in[data-v-d89aad97]{color:#16a34a;background:#16a34a14}.pd__stock.is-pre[data-v-d89aad97]{color:#7a1b33;background:#fbf2f4}.pd__stock.is-out[data-v-d89aad97]{color:#5b616e;background:#f4f5f6}.pd__head[data-v-d89aad97]{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;padding-top:10px}.pd__headMain[data-v-d89aad97]{min-width:0}.pd__title[data-v-d89aad97]{margin:0;font-size:14px;font-weight:700;line-height:1.7;color:#14161a}.pd__code[data-v-d89aad97]{margin:5px 0 0;direction:ltr;text-align:end;font-size:11px;font-weight:700;color:#8a909c}.pd__figures[data-v-d89aad97]{flex-shrink:0;display:flex;align-items:flex-end;gap:8px}.pd__figure[data-v-d89aad97]{display:flex;flex-direction:column;align-items:center;gap:2px;padding:7px 11px;border-radius:13px;color:#14161a;background:#f4f5f6}.pd__figure--accent[data-v-d89aad97]{color:#7a1b33;background:#fbf2f4}.pd__figureValue[data-v-d89aad97]{font-size:14px;font-weight:800;line-height:1.3;color:inherit;direction:ltr}.pd__figureLabel[data-v-d89aad97]{font-size:10px;font-weight:500;color:#8a909c}.pd__figure--accent .pd__figureLabel[data-v-d89aad97]{color:#7a1b33a6}.pd__chips[data-v-d89aad97]{display:flex;gap:8px;margin-top:20px;margin-inline:-18px;padding:3px 18px;overflow-x:auto}.pd__chip[data-v-d89aad97]{flex:0 0 auto;min-width:42px;height:34px;padding:0 14px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-family:inherit;font-size:12.5px;font-weight:700;white-space:nowrap;border-radius:999px;border:1px solid #ECEDEF;color:#5b616e;background:#fff;transition:transform .18s ease,background .2s ease,color .2s ease,border-color .2s ease}.pd__chip[data-v-d89aad97]:active{transform:scale(.95)}.pd__chip.is-on[data-v-d89aad97]{color:#fff;background:#14161a;border-color:#14161a}.pd__block[data-v-d89aad97]{margin-top:24px}.pd__blockTitle[data-v-d89aad97]{margin:0 0 11px;font-size:16px;font-weight:600;color:#14161a}.pd__body[data-v-d89aad97]{margin:0;font-size:12.5px;line-height:2.1;color:#5b616e;text-align:justify}.pd__body.is-clamped[data-v-d89aad97]{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.pd__more[data-v-d89aad97]{margin-top:8px;padding:0;border:0;background:none;cursor:pointer;font-family:inherit;font-size:11.5px;font-weight:800;color:#14161a;text-decoration:underline;text-underline-offset:4px}.pd__specs[data-v-d89aad97]{margin:0;border-radius:22px;background:#f4f5f6;overflow:hidden}.pd__spec[data-v-d89aad97]{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 16px;border-bottom:1px solid #ECEDEF}.pd__spec[data-v-d89aad97]:last-child{border-bottom:0}.pd__spec dt[data-v-d89aad97]{display:flex;align-items:center;gap:7px;margin:0;font-size:12.5px;color:#5b616e}.pd__spec dd[data-v-d89aad97]{margin:0;font-size:12.5px;font-weight:700;color:#14161a}.pd__bar[data-v-d89aad97]{position:sticky;bottom:0;z-index:20;display:flex;align-items:center;gap:10px;max-width:768px;margin:0 auto;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));background:#ffffffe6;-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);border-top:1px solid #ECEDEF}.pd__pill[data-v-d89aad97]{flex-shrink:0;max-width:44%;height:48px;padding:0 15px;display:inline-flex;align-items:center;gap:7px;cursor:pointer;font-family:inherit;font-size:12.5px;font-weight:700;border-radius:999px;border:1px solid #ECEDEF;color:#14161a;background:#fff;transition:transform .18s ease,background .2s ease}.pd__pill[data-v-d89aad97]:active{transform:scale(.97)}.pd__pillText[data-v-d89aad97]{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.pd__qty[data-v-d89aad97]{flex-shrink:0;height:48px;padding:0 6px;display:inline-flex;align-items:center;gap:4px;border-radius:999px;border:1px solid #ECEDEF;background:#fff}.pd__qtyBtn[data-v-d89aad97]{width:32px;height:32px;display:grid;place-items:center;border:0;border-radius:50%;cursor:pointer;color:#14161a;background:#f4f5f6;transition:transform .18s ease}.pd__qtyBtn[data-v-d89aad97]:active{transform:scale(.9)}.pd__qtyValue[data-v-d89aad97]{min-width:20px;text-align:center;font-size:13px;font-weight:800;color:#14161a}.pd__cta[data-v-d89aad97]{flex:1;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;border:0;border-radius:999px;cursor:pointer;font-family:inherit;font-size:13.5px;font-weight:800;white-space:nowrap;text-decoration:none;color:#fff;background:#14161a;box-shadow:0 14px 30px -18px #14161ae6;transition:transform .18s ease,opacity .18s ease}.pd__cta[data-v-d89aad97]:active{transform:scale(.985)}.pd__cta[data-v-d89aad97]:disabled{cursor:default;opacity:.4;box-shadow:none}
|