/** * 2019-2026 MEG Venture * * NOTICE OF LICENSE * * This source file is subject to the Academic Free License (AFL 3.0) * that is bundled with this package in the file LICENSE.txt. * It is also available through the world-wide-web at this URL: * http://opensource.org/licenses/afl-3.0.php * * @author MEG Venture * @copyright 2019-2026 MEG Venture * @license http://opensource.org/licenses/afl-3.0.php Academic Free License (AFL 3.0) */ /** * Everything is namespaced under .rbl- and styled from scratch rather than borrowing the * theme's Bootstrap classes: 3.x used .modal/.btn/.close and material-icons, which only exist * in the classic theme and left the button inert (or invisible) on custom themes. * * Colours come from CSS custom properties so a theme can restyle the module by redefining * them, without needing to out-specify these rules. * * They are declared on :root and NOT on .rbl-wrapper. front.js moves the modal to — * it has to, or the dialog sits inside the theme's add-to-cart

— and custom properties * inherit through the DOM, so scoping them to .rbl-wrapper left every var() inside the modal * unresolved once it was moved: the dialog rendered transparent over the page, the primary * button lost its fill, and inputs lost their borders entirely (an invalid var() in the * `border` shorthand unsets the whole property, taking border-style with it). */ :root { --rbl-accent: #2fb5d2; --rbl-accent-contrast: #ffffff; --rbl-text: #232323; --rbl-muted: #7a7a7a; --rbl-border: #dcdcdc; --rbl-surface: #ffffff; --rbl-error: #d9534f; --rbl-success: #4caf50; --rbl-radius: 4px; } .rbl-wrapper { margin: 10px 0; } /* ------------------------------------------------------------------ */ /* Trigger button */ /* ------------------------------------------------------------------ */ .rbl-open { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--rbl-border); border-radius: var(--rbl-radius); background: transparent; color: var(--rbl-muted); font-size: 0.875rem; line-height: 1.3; cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease; } .rbl-open:hover, .rbl-open:focus-visible { color: var(--rbl-accent); border-color: var(--rbl-accent); } /* Keep a visible focus ring for keyboard users even where the theme resets outlines. */ .rbl-open:focus-visible, .rbl-btn:focus-visible, .rbl-input:focus-visible, .rbl-modal__close:focus-visible { outline: 2px solid var(--rbl-accent); outline-offset: 2px; } .rbl-open__icon { flex: 0 0 auto; } /* ------------------------------------------------------------------ */ /* Modal */ /* ------------------------------------------------------------------ */ .rbl-modal[hidden] { display: none; } .rbl-modal { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 16px; } .rbl-modal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); } .rbl-modal__dialog { position: relative; width: 100%; max-width: 480px; /* The dialog itself scrolls when it is taller than the viewport, so the page behind it never has to. Combined with the scroll lock in front.js this keeps the background from jumping to the top when the modal opens. */ max-height: calc(100vh - 32px); overflow-y: auto; background: var(--rbl-surface); color: var(--rbl-text); border-radius: var(--rbl-radius); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25); animation: rbl-pop 0.15s ease-out; /* Baseline for anything the theme has opinions about inside the dialog. */ text-align: start; } @keyframes rbl-pop { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .rbl-modal__dialog { animation: none; } .rbl-spinner { animation-duration: 2s; } } .rbl-modal__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--rbl-border); } .rbl-modal__title { margin: 0; font-size: 1.05rem; font-weight: 700; } .rbl-modal__close { border: 0; background: none; color: var(--rbl-muted); font-size: 1.6rem; line-height: 1; padding: 0 4px; cursor: pointer; } .rbl-modal__close:hover { color: var(--rbl-text); } .rbl-modal__body { padding: 20px; } .rbl-modal__footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; } /* ------------------------------------------------------------------ */ /* Form */ /* ------------------------------------------------------------------ */ .rbl-intro { margin: 0 0 16px; color: var(--rbl-muted); font-size: 0.875rem; } .rbl-field { margin-bottom: 14px; } /** * Themes style bare element selectors, and those still reach the dialog after front.js moves * it to . PrestaShop's classic theme sets `label, .label { text-align: right }` on every * label in the shop, which pushed every label in this form to the right-hand edge. Namespaced * classes out-specify a bare element selector, so re-assert the alignment rather than fight it * with !important. `start` rather than `left` so RTL shops still read correctly. */ .rbl-label { display: block; margin-bottom: 4px; font-size: 0.8125rem; font-weight: 600; text-align: start; } .rbl-optional, .rbl-help { font-weight: 400; color: var(--rbl-muted); } .rbl-help { display: block; margin-top: 4px; font-size: 0.75rem; } .rbl-required { color: var(--rbl-error); } .rbl-input { width: 100%; padding: 8px 10px; border: 1px solid var(--rbl-border); border-radius: var(--rbl-radius); background: var(--rbl-surface); color: var(--rbl-text); font-size: 0.875rem; font-family: inherit; } .rbl-textarea { resize: vertical; min-height: 90px; } .rbl-input--invalid { border-color: var(--rbl-error); } .rbl-counter { display: block; margin-top: 4px; font-size: 0.75rem; color: var(--rbl-muted); /* `end`, not `right`, to match the `start` used on labels: the counter should hug the far edge of the field in RTL shops too. */ text-align: end; } .rbl-counter--limit { color: var(--rbl-error); } .rbl-field__error { display: none; margin-top: 4px; font-size: 0.75rem; color: var(--rbl-error); } .rbl-field__error--visible { display: block; } .rbl-alert { padding: 10px 12px; margin-bottom: 14px; border-radius: var(--rbl-radius); font-size: 0.8125rem; } .rbl-alert[hidden] { display: none; } .rbl-alert--error { background: #fdecea; border: 1px solid var(--rbl-error); color: #8b1f1c; } .rbl-gdpr { margin-bottom: 14px; font-size: 0.8125rem; } /* The honeypot must be unreachable for people but still present for bots, so it is moved out of view rather than display:none — some bots skip fields that are explicitly not displayed. */ .rbl-hp { position: absolute !important; left: -9999px !important; top: auto !important; width: 1px !important; height: 1px !important; overflow: hidden !important; } /* ------------------------------------------------------------------ */ /* Buttons */ /* ------------------------------------------------------------------ */ .rbl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 16px; border: 1px solid transparent; border-radius: var(--rbl-radius); font-size: 0.875rem; font-family: inherit; cursor: pointer; } .rbl-btn--primary { background: var(--rbl-accent); color: var(--rbl-accent-contrast); } .rbl-btn--primary:hover:not(:disabled) { filter: brightness(0.94); } .rbl-btn--ghost { background: transparent; border-color: var(--rbl-border); color: var(--rbl-muted); } .rbl-btn:disabled { opacity: 0.65; cursor: default; } .rbl-spinner { width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: rbl-spin 0.6s linear infinite; } .rbl-spinner[hidden] { display: none; } @keyframes rbl-spin { to { transform: rotate(360deg); } } /* ------------------------------------------------------------------ */ /* Success panel */ /* ------------------------------------------------------------------ */ .rbl-success { padding: 32px 20px; text-align: center; } .rbl-success[hidden] { display: none; } .rbl-success__icon { color: var(--rbl-success); } .rbl-success__text { margin: 12px 0 20px; font-size: 0.9375rem; } @media (max-width: 480px) { .rbl-modal { padding: 0; } .rbl-modal__dialog { max-width: none; max-height: 100vh; min-height: 100vh; border-radius: 0; } }