/* Kendertér – XPreview (Quick View) * * Feature-specific styles. The generic popup shell lives in `assets/ktpop-display/css/ktpop-display.css`. */ .kt-x-preview-button .ktxpreview-button__icon { display: inline-flex; height: 1em; margin-right: 0.5em; vertical-align: middle; width: 1em; } .kt-x-preview-button .ktxpreview-button__icon svg { display: block; fill: currentColor; height: 1em; width: 1em; } /* Barn2 front-end.css injects a font-icon via `.with-icon:before`. * We render our own SVG, so hide the pseudo icon to avoid duplicates. */ .kt-x-preview-button.with-icon:before { content: none !important; } .kt-x-preview-button.no-text .ktxpreview-button__text { display: none; } .kt-x-preview-button.no-text .ktxpreview-button__icon { margin-right: 0; } /* Optional: show button only on hover/focus */ html.ktxpreview-hover-enabled .kt-x-preview-button { opacity: 0; pointer-events: none; transform: translateY(4px); transition: opacity 0.2s, transform 0.2s; } @media (prefers-reduced-motion: reduce) { html.ktxpreview-hover-enabled .kt-x-preview-button { transition: 0s; } } html.ktxpreview-hover-enabled .product:hover .kt-x-preview-button, html.ktxpreview-hover-enabled .product:focus-within .kt-x-preview-button, html.ktxpreview-hover-enabled .product:hover .kt-x-preview-button.xpv-show-on-hover, html.ktxpreview-hover-enabled .product:focus-within .kt-x-preview-button.xpv-show-on-hover { opacity: 1; pointer-events: auto; transform: translateY(0); } /* Modal container * * Note: The bulk of the modal "look" comes from the ported Barn2 CSS (`front-end.css`). * Keep this selector minimal to avoid fighting it. */ .kt-x-preview-modal.ktxpreview-window { box-sizing: border-box; position: relative; width: 100%; } /* Keep parity with Barn2: use xpv-modal-is-open on (optional). */ html.xpv-modal-is-open { overflow: hidden; } /* Modal loading state (Barn2 style: hide product until scripts init). */ .kt-x-preview-modal.ktxpreview-window .product { opacity: 1; transition: opacity 0.25s ease-in-out; visibility: visible; } @media (prefers-reduced-motion: reduce) { .kt-x-preview-modal.ktxpreview-window .product { transition: 0s; } } .kt-x-preview-modal.ktxpreview-window.ktxpreview-is-loading .product { opacity: 0; visibility: hidden; } .kt-x-preview-modal.ktxpreview-window .ktxpreview-modal-spinner { background-color: #111; border-radius: 5px; display: none; height: 20px; left: 50%; padding: 12px 16px; position: absolute; top: 50%; transform: translate(-50%, -50%); z-index: 99999; } .kt-x-preview-modal.ktxpreview-window.ktxpreview-is-loading .ktxpreview-modal-spinner { display: block; } .kt-x-preview-modal.ktxpreview-window .ktxpreview-modal-spinner > div { animation: ktxpreview-stretchdelay 1.2s infinite ease-in-out; background-color: #fff; border-radius: 100px; display: inline-block; height: 20px; margin: 0 1px; width: 2px; } .kt-x-preview-modal.ktxpreview-window .ktxpreview-modal-spinner .rect2 { animation-delay: -1.1s; } .kt-x-preview-modal.ktxpreview-window .ktxpreview-modal-spinner .rect3 { animation-delay: -1.0s; } .kt-x-preview-modal.ktxpreview-window .ktxpreview-modal-spinner .rect4 { animation-delay: -0.9s; } @keyframes ktxpreview-stretchdelay { 0%, 40%, 100% { transform: scaleY(0.5); } 20% { transform: scaleY(1); } } /* Side panel mode (slides from the right). */ .kt-x-preview-modal.ktxpreview-window.is-style-side { border-radius: 0; height: 100%; margin: 0 0 0 auto; max-width: 560px; min-height: 100%; overflow: auto !important; /* override Barn2 `overflow:visible!important` */ padding: 24px; transform: translateX(100%); } @media (min-width: 481px) { .kt-x-preview-modal.ktxpreview-window.is-style-side { padding: 32px 36px; } } .ktpop-overlay[aria-hidden='false'] .kt-x-preview-modal.ktxpreview-window.is-style-side { transform: translateX(0); } /* Close button */ .kt-x-preview-modal.ktxpreview-window .ktxpreview-close { align-items: center; appearance: none; background: #000; border: none; border-radius: 999px; color: #fff; cursor: pointer; display: inline-flex; height: 34px; justify-content: center; line-height: 1; padding: 0; position: absolute; right: 18px; top: 18px; width: 34px; z-index: 20; } .kt-x-preview-modal.ktxpreview-window.is-style-side .ktxpreview-close { right: 16px; top: 16px; } .kt-x-preview-modal.ktxpreview-window .ktxpreview-close svg { display: block; fill: currentColor; height: 22px; width: 22px; } /* Layout */ .kt-x-preview-modal.ktxpreview-window .ktxpreview-inner { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; } .kt-x-preview-modal.ktxpreview-window .ktxpreview-notices:empty { display: none; } .kt-x-preview-modal.ktxpreview-window .ktxpreview-notices:not(:empty) { padding: 18px 24px 0; } .kt-x-preview-modal.ktxpreview-window.is-style-side .ktxpreview-notices:not(:empty) { padding: 0 0 12px; } .kt-x-preview-modal.ktxpreview-window .ktxpreview-main { display: block; padding: 0; } .kt-x-preview-modal.ktxpreview-window.is-style-side .ktxpreview-main { display: flex; flex-direction: column; gap: 18px; } @media (min-width: 800px) { .kt-x-preview-modal.is-style-side.with-product-image.with-product-details .ktxpreview-main { align-items: flex-start; flex-direction: row; gap: 24px; } .kt-x-preview-modal.is-style-side.with-product-image.with-product-details .ktxpreview-media { flex: 0 0 46%; max-width: 46%; } .kt-x-preview-modal.is-style-side.with-product-image.with-product-details .ktxpreview-summary { flex: 1 1 auto; } } .kt-x-preview-modal.ktxpreview-window .ktxpreview-media { position: relative; } .kt-x-preview-modal.ktxpreview-window.is-style-side .ktxpreview-summary { width: 100%; } .kt-x-preview-modal.ktxpreview-window.is-style-side .ktxpreview-tabs { padding: 18px 0 0; } .kt-x-preview-modal.ktxpreview-window .view-product-details { margin: 1.6em 0 0; text-decoration: underline; } /* Notices */ .kt-x-preview-modal.ktxpreview-window .kt-x-preview-notice { line-height: 1.5; margin: 12px 0 0; } .kt-x-preview-modal.ktxpreview-window .kt-x-preview-notice.error-notice { color: #c01717; font-weight: 700; } .kt-x-preview-modal.ktxpreview-window .kt-x-preview-notice.success-notice { color: #0f834d; font-weight: 700; } /* Success overlay */ .kt-x-preview-success-wrap { align-items: center; background: rgba(0, 0, 0, 0.55); bottom: 0; display: flex; justify-content: center; left: 0; position: absolute; right: 0; top: 0; z-index: 9999; } .kt-x-preview-success-wrap .success-notice { background: #0f834d; border-radius: 12px; color: #fff; max-width: min(520px, 92%); padding: 18px 22px; text-align: center; } /* Navigation arrows */ .kt-x-preview-modal.with-navigation-arrows .x-preview-navigation { display: flex; gap: 10px; padding: 12px 24px 0; width: 100%; } .kt-x-preview-modal.with-navigation-arrows.is-style-side .x-preview-navigation { padding: 10px 0 0; } .kt-x-preview-modal.with-navigation-arrows .x-preview-navigation .x-preview-next { margin-left: auto; } .kt-x-preview-modal.with-navigation-arrows .x-preview-navigation button { align-items: center; appearance: none; background: #eee; border: 0; border-radius: 10px; color: #222; cursor: pointer; display: inline-flex; font-weight: 600; gap: 8px; height: 46px; padding: 0 14px; } .kt-x-preview-modal.with-navigation-arrows .x-preview-navigation button:hover { background: #ddd; } .kt-x-preview-modal.with-navigation-arrows .x-preview-navigation button svg { display: block; height: 18px; width: 18px; } @media (max-width: 1200px) { .kt-x-preview-modal.with-navigation-arrows .x-preview-navigation .text { display: none; } }