/** * Product Image Configurator — editor dialog styles. * * Layout mirrors the reference journey: centred title with a close control, a * large stage, then Rotate and Scale sliders each flanked by minus / plus * steppers, and a full-width primary Save changes button with a reset beside it. * * The dialog is appended to , so it is deliberately not nested under * `.pic`: a theme that clips overflow on the product summary must not be able * to trap or crop it. * * @package ProductImageConfigurator */ .pic-editor { --pic-editor-brand: #f3bc09; --pic-editor-brand-dark: #d9a806; --pic-editor-on-brand: #000000; --pic-editor-bg: #ffffff; --pic-editor-ink: #161a1d; --pic-editor-muted: #6b7176; --pic-editor-line: #e5e5e5; --pic-editor-track: #e2e2e2; --pic-editor-stage: #17181c; position: fixed; inset: 0; z-index: 999999; display: flex; align-items: center; justify-content: center; padding: 20px; box-sizing: border-box; color: var( --pic-editor-ink ); font-size: 15px; line-height: 1.5; } .pic-editor[hidden] { display: none; } .pic-editor *, .pic-editor *::before, .pic-editor *::after { box-sizing: inherit; } body.pic-editor-open { overflow: hidden; } .pic-editor__backdrop { position: absolute; inset: 0; background: rgba( 22, 26, 29, 0.62 ); } .pic-editor__dialog { position: relative; display: flex; flex-direction: column; width: 100%; max-width: 720px; max-height: calc( 100vh - 40px ); overflow: hidden; background: var( --pic-editor-bg ); border-radius: 10px; box-shadow: 0 22px 60px rgba( 0, 0, 0, 0.36 ); } /* ------------------------------------------------------------------ Header */ .pic-editor__header { position: relative; display: flex; align-items: center; justify-content: center; padding: 16px 56px; border-bottom: 1px solid var( --pic-editor-line ); } .pic-editor__title { margin: 0; font-size: 18px; font-weight: 700; text-align: center; } .pic-editor__close { position: absolute; top: 50%; right: 14px; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; color: var( --pic-editor-ink ); cursor: pointer; background: none; border: 0; border-radius: 6px; transform: translateY( -50% ); transition: background-color 0.15s ease; } .pic-editor__close svg { width: 22px; height: 22px; } .pic-editor__close:hover, .pic-editor__close:focus-visible { background: #f2f2f2; outline: none; } .pic-editor__close:focus-visible { box-shadow: 0 0 0 3px rgba( 243, 188, 9, 0.45 ); } /* ------------------------------------------------------------------- Stage */ .pic-editor__stage { position: relative; flex: 1 1 auto; /* The mockup covers this box, so the closer it is to the mockup's own proportions the less gets cropped. Product shots are square, so a tall stage keeps almost all of the scene while still filling edge to edge. Capped against the viewport as well: the dialog hides its overflow, so a stage taller than the screen pushes the controls and Save changes out of reach rather than producing a scrollbar. */ min-height: min( 480px, 50vh ); background: var( --pic-editor-stage ); background-image: linear-gradient( 45deg, #1f2025 25%, transparent 25% ), linear-gradient( -45deg, #1f2025 25%, transparent 25% ), linear-gradient( 45deg, transparent 75%, #1f2025 75% ), linear-gradient( -45deg, transparent 75%, #1f2025 75% ); background-size: 20px 20px; background-position: 0 0, 0 10px, 10px -10px, -10px 0; } /* Absolute rather than 100%/100%: a canvas has an intrinsic 300x150 size, and in a flex column a percentage height does not always resolve against a flex-sized parent. The result is a canvas shorter than its stage, which shows up as a band of empty checkerboard under the artwork. Pinning to the stage's edges removes the ambiguity. */ .pic-editor__canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; } .pic-editor__canvas:active { cursor: grabbing; } .pic-editor__loading { position: absolute; top: 50%; left: 50%; margin: 0; color: #fff; font-size: 14px; transform: translate( -50%, -50% ); } .pic-editor__loading[hidden] { display: none; } /* ---------------------------------------------------------------- Controls */ .pic-editor__controls { display: flex; flex-wrap: wrap; gap: 14px 30px; align-items: center; padding: 18px 22px 4px; } .pic-editor__control { flex: 1 1 240px; min-width: 0; } .pic-editor__control-label { display: block; margin-bottom: 6px; font-size: 14.5px; font-weight: 600; color: var( --pic-editor-ink ); } .pic-editor__slider-row { display: flex; gap: 12px; align-items: center; } .pic-editor__step { display: flex; flex: none; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; color: var( --pic-editor-ink ); cursor: pointer; background: var( --pic-editor-bg ); border: 1px solid #d6d6d6; border-radius: 50%; transition: border-color 0.15s ease, background-color 0.15s ease; } .pic-editor__step svg { width: 15px; height: 15px; } .pic-editor__step:hover, .pic-editor__step:focus-visible { background: #fdf6df; border-color: var( --pic-editor-brand ); outline: none; } .pic-editor__step:focus-visible { box-shadow: 0 0 0 3px rgba( 243, 188, 9, 0.4 ); } /* Range inputs give no hook for styling the track either side of the thumb, so the fill percentage is published as --pic-fill by the editor script and the gradient is drawn here. */ .pic-editor__slider { --pic-fill: 0%; flex: 1 1 auto; width: 100%; height: 4px; margin: 0; appearance: none; -webkit-appearance: none; background: var( --pic-editor-track ); border-radius: 999px; outline: none; cursor: pointer; } .pic-editor__slider--filled { background: linear-gradient( to right, var( --pic-editor-brand ) 0, var( --pic-editor-brand ) var( --pic-fill ), var( --pic-editor-track ) var( --pic-fill ), var( --pic-editor-track ) 100% ); } .pic-editor__slider::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; background: var( --pic-editor-bg ); border: 1px solid #c4c4c4; border-radius: 50%; box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.22 ); cursor: grab; } .pic-editor__slider::-moz-range-thumb { width: 20px; height: 20px; background: var( --pic-editor-bg ); border: 1px solid #c4c4c4; border-radius: 50%; box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.22 ); cursor: grab; } .pic-editor__slider:focus-visible { box-shadow: 0 0 0 3px rgba( 243, 188, 9, 0.4 ); } .pic-editor__control--inline { display: flex; flex-wrap: wrap; gap: 8px; flex-basis: 100%; padding-top: 4px; } .pic-editor__chip { display: inline-flex; gap: 6px; align-items: center; padding: 8px 14px; font: inherit; font-size: 13px; font-weight: 600; color: var( --pic-editor-ink ); cursor: pointer; background: var( --pic-editor-bg ); border: 1px solid #d6d6d6; border-radius: 999px; transition: border-color 0.15s ease, background-color 0.15s ease; } .pic-editor__chip svg { width: 15px; height: 15px; } .pic-editor__chip:hover:not( [disabled] ), .pic-editor__chip:focus-visible { background: #fdf6df; border-color: var( --pic-editor-brand ); outline: none; } .pic-editor__chip[disabled] { cursor: default; opacity: 0.42; } /* ------------------------------------------------------------------ Footer */ .pic-editor__footer { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 16px 22px 20px; border-top: 1px solid var( --pic-editor-line, #e7e7e7 ); } /* Reset sits apart on the left: it undoes work, so it should not be adjacent to the button that commits it. */ .pic-editor__actions { display: flex; gap: 10px; align-items: center; } .pic-editor__save { flex: none; padding: 14px 30px; font: inherit; font-size: 16.5px; font-weight: 700; color: var( --pic-editor-on-brand ); cursor: pointer; background: var( --pic-editor-brand ); border: 0; border-radius: 8px; transition: background-color 0.16s ease; } .pic-editor__save:hover, .pic-editor__save:focus-visible { background: var( --pic-editor-brand-dark ); outline: none; } .pic-editor__save:focus-visible { box-shadow: 0 0 0 3px rgba( 243, 188, 9, 0.45 ); } .pic-editor__reset { display: inline-flex; flex: none; gap: 8px; align-items: center; justify-content: center; height: 46px; padding: 0 16px; font: inherit; font-size: 14.5px; font-weight: 600; color: var( --pic-editor-muted ); cursor: pointer; background: none; border: 1px solid transparent; border-radius: 8px; transition: color 0.15s ease, border-color 0.15s ease; } .pic-editor__reset svg { width: 19px; height: 19px; } .pic-editor__reset:hover, .pic-editor__reset:focus-visible { color: var( --pic-editor-ink ); border-color: #d6d6d6; outline: none; } .pic-editor__cancel { height: 46px; padding: 0 22px; font: inherit; font-size: 14.5px; font-weight: 600; color: var( --pic-editor-ink ); cursor: pointer; background: none; border: 1px solid var( --pic-editor-line, #d6d6d6 ); border-radius: 8px; transition: background-color 0.15s ease, border-color 0.15s ease; } .pic-editor__cancel:hover, .pic-editor__cancel:focus-visible { background: #f4f4f4; border-color: #bdbdbd; outline: none; } /* ----------------------------------------------------------- Small screens */ @media ( max-width: 700px ) { .pic-editor { padding: 0; } .pic-editor__dialog { max-width: none; height: 100%; max-height: none; border-radius: 0; } .pic-editor__controls { gap: 12px 16px; padding: 14px 16px 2px; } .pic-editor__control { flex-basis: 100%; } .pic-editor__footer { flex-wrap: wrap; gap: 10px; padding: 12px 16px 16px; } .pic-editor__reset { order: 2; flex: 1 1 100%; } .pic-editor__actions { order: 1; flex: 1 1 100%; } .pic-editor__cancel { flex: 0 0 auto; } .pic-editor__save { flex: 1 1 auto; padding: 14px 18px; font-size: 16px; } } /* --------------------------------------------------------- Tablet range */ /* Between the phone layout and a desktop: the dialog is still a dialog rather than a full screen, but there is less room around it and every control is being touched rather than clicked. */ @media ( min-width: 701px ) and ( max-width: 1024px ) { .pic-editor { padding: 20px; } .pic-editor__dialog { max-width: 100%; max-height: calc( 100vh - 40px ); } .pic-editor__controls { gap: 12px 22px; } } /* ------------------------------------------------------- Short viewports */ /* A phone held sideways, or a small laptop with a lot of browser chrome. The stage gives up its height first, because losing some of the mockup is a far better outcome than losing the button that saves the customer's work. */ @media ( max-height: 620px ) { .pic-editor__stage { min-height: 140px; } .pic-editor__header { padding-top: 10px; padding-bottom: 10px; } .pic-editor__controls { gap: 8px 20px; padding: 10px 18px 0; } .pic-editor__footer { padding: 10px 18px 12px; } .pic-editor__reset, .pic-editor__cancel { height: 40px; } .pic-editor__save { padding: 11px 22px; } } /* ------------------------------------------------------------- Touch input */ /* Fingers, not cursors: WCAG asks for 44px, and the round step buttons and chips were sized for a mouse. Only the hit area grows — the visible circle and pill stay as drawn. */ @media ( pointer: coarse ) { .pic-editor__step { width: 44px; height: 44px; } .pic-editor__chip { padding: 11px 16px; } .pic-editor__slider { height: 6px; } /* A 4px track is hard to grab; the thumb is what the finger finds. */ .pic-editor__slider::-webkit-slider-thumb { width: 26px; height: 26px; } .pic-editor__slider::-moz-range-thumb { width: 26px; height: 26px; } } @media ( prefers-reduced-motion: reduce ) { .pic-editor *, .pic-editor *::before, .pic-editor *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }