/* BD Shop Quickview — frontend styles. Namespaced under bd-sqv- to avoid colliding with the active theme/page-builder's own CSS. Override from a child theme (enqueue after this stylesheet) rather than editing this file directly if you only need visual tweaks; edit the templates in templates/ (or a theme override) for structural changes. */ .bd-sqv-wrap { position: relative; display: inline-block; } .bd-sqv-trigger { background: #fff; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 4px; cursor: pointer; line-height: 1; padding: 4px 10px; font-size: 18px; } /* Admin-configured icon (Settings tab) replacing the default "…" glyph. !important on sizing: this trigger renders once per product inside the shop loop, where WooCommerce's own core stylesheet applies a much more specific rule to every in that context — `.woocommerce ul.products li.product img { width: 100%; height: auto; ... }` (3 classes + 3 type selectors) — which otherwise wins over this plugin's single-class selector regardless of source order, blowing the icon up to the product thumbnail's full width. Confirmed live on a Divi Ajax Filter "Loop Archive" grid, where the WooCommerce loop markup wraps each item in exactly that `li.product` structure. */ .bd-sqv-trigger-icon { display: block; width: 18px !important; height: 18px !important; object-fit: contain; } /* `position: fixed`, not `absolute` — this menu is relocated to be a direct child of the first time it's opened (frontend.js's relocateMenuToBody()), the same fix already applied to the sidebar in 0.5.0 for the same underlying reason: a `.bd-sqv-wrap` inside the shop loop can sit under an ancestor (a Divi Row/Section using transform, or a product-card wrapper using `overflow: hidden`) that either clips an absolutely-positioned dropdown or traps a fixed-positioned one inside its own containing block/stacking context. Once relocated, `top`/`left` are computed and set inline by frontend.js from the trigger's `getBoundingClientRect()` (viewport coordinates, flipped to stay inside the viewport) — the static `top`/`right` this rule used to carry are gone because they only made sense relative to `.bd-sqv-wrap`. z-index sits above `.bd-sqv-overlay` below. `display: none` belongs in THIS rule and not only in the `[hidden]` rule below (0.28.1). The closed state must not depend on any attribute being present in the delivered markup: the loop layout this trigger renders inside is echoed through a sanitizer before it reaches the browser, and a sanitizer can only ever REMOVE markup — so a bare `hidden` may or may not survive, while the ABSENCE of `.is-open` always does. When it didn't survive, every product's dropdown painted expanded on page load and the first scroll of the page collapsed all of them at once. Same shape as `.bd-sqv-overlay`/`.is-visible` two rules below. */ .bd-sqv-menu { position: fixed; z-index: 999999; display: none; min-width: 200px; background: #fff; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 4px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35); padding: 4px; } /* Kept, and still mirrored by frontend.js on every open and close, so the markup stays correct with CSS disabled and for anything reading the attribute rather than the class. It is no longer what MAKES the menu closed — only a second opinion agreeing with the rule above, and a stronger one (0-2-0) against a theme rule that sets `display` on this element. */ .bd-sqv-menu[hidden] { display: none; } /* The only thing that opens the menu. Added by frontend.js's toggleMenu() before positionMenu() measures the element — a `display: none` element reports a 0x0 getBoundingClientRect(), which would silently defeat the flip-into-the-viewport arithmetic instead of failing loudly. Same specificity as the `[hidden]` rule above (both 0-2-0), so source order decides: this MUST stay after it. Moved before it, a menu whose `hidden` attribute did survive to the browser could never be opened at all. Pinned by tests/Unit/Frontend/MenuOpenStateTest.php. */ .bd-sqv-menu.is-open { display: block; } /* Dark backdrop shown behind an open trigger menu, to spotlight it against the rest of the page — created and toggled entirely by frontend.js (no shortcode/template renders this; a single shared node is enough since only one `.bd-sqv-menu` is ever open at a time, see closeAllMenus()). Sits just under the menu's own z-index so the menu remains clickable. */ .bd-sqv-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); z-index: 999998; } .bd-sqv-overlay.is-visible { display: block; } .bd-sqv-menu-item { display: flex; align-items: center; gap: 8px; width: 100%; background: none; border: 0; text-align: left; padding: 8px 12px; font-size: 14px; cursor: pointer; text-decoration: none; color: inherit; border-radius: 3px; } .bd-sqv-menu-item:hover, .bd-sqv-menu-item:focus { background: rgba(0, 0, 0, 0.06); } /* Never hidden — a link whose condition isn't met (not logged in, book not in the visitor's plan) renders like this instead, with the reason in its `title` tooltip. No pointer-events:none, so the tooltip still shows on hover; there's simply no href/click action to run. Shared with .bd-sqv-preview-action-btn.is-disabled in the sidebar. */ .bd-sqv-menu-item.is-disabled, .bd-sqv-preview-action-btn.is-disabled { cursor: not-allowed; opacity: 0.5; } .bd-sqv-menu-item.is-disabled:hover { background: none; } /* One static icon per fixed menu item (Scheda Libro / Leggi EPUB / Leggi PDF) — admin-uploaded (Settings tab) or the plugin's own bundled placeholder. !important on sizing for the same reason as .bd-sqv-trigger-icon above — this menu is nested inside the same per-product shop-loop item, subject to the same WooCommerce core `.woocommerce ul.products li.product img` override. */ .bd-sqv-menu-item-icon { flex: 0 0 auto; width: 16px !important; height: 16px !important; object-fit: contain; } /* Sidebar — a genuine right-hand panel (0.5.0), fixed to the viewport at full height, wherever [bd_shop_quickview_sidebar] is placed in the markup (position is irrelevant now — it's taken out of flow). Hidden by default and shown only once real content has loaded (see the visibility rule below); the close button hides the whole panel, not just its content — see frontend.js's simplified setSidebarCollapsed(). This reverses 0.3.0's "static in-flow block, not an overlay" decision. That change was prompted by a real bug where the theme's own default widget sidebar was bleeding through and the off-canvas/relocation machinery made it harder to diagnose — the actual cause (this plugin's template being named `sidebar.php`, colliding with a WordPress-reserved template filename) is unrelated and was fixed at the root in 0.3.4 (renamed to `preview-sidebar.php`). With that fixed, a fixed overlay panel is safe to use again and matches how the admin actually wants this presented — a proper sidebar, not a small popup. */ .bd-sqv-sidebar { display: none; position: fixed; top: 0; right: 0; /* ~50% of the viewport on desktop (0.8.0 redesign), never narrower than 360px nor wider than 720px so it stays readable on very small/large screens; collapses to full-width below the WP admin-bar mobile breakpoint (782px) — see the media query below. */ width: 50vw; min-width: 360px; max-width: 720px; height: 100vh; background: #fff; border-left: 1px solid rgba(0, 0, 0, 0.12); box-shadow: -4px 0 20px rgba(0, 0, 0, 0.12); /* High enough to clear typical page-builder headers/menus (Divi's own admin bar sits at 99999). frontend.js also relocates this element to be a direct child of on load — a z-index alone can't help if [bd_shop_quickview_sidebar] was placed inside an ancestor that traps `position: fixed` in its own stacking context (transform/filter/ opacity, common on Divi Row/Section wrappers). */ z-index: 999999; } @media (max-width: 782px) { .bd-sqv-sidebar { width: 100vw; min-width: 0; max-width: 100vw; } } /* Shown once real content has replaced the initial placeholder, and not closed. Keyed on the *absence* of the placeholder rather than the *presence* of `.bd-sqv-preview`, so the panel doesn't flicker closed while a subsequent "Anteprima" click is loading (frontend.js clears the content — removing `.bd-sqv-preview` — before the new one arrives; the placeholder itself never comes back once removed). */ .bd-sqv-sidebar:not(.is-collapsed):not(:has(.bd-sqv-sidebar-placeholder)) { display: flex; flex-direction: column; } /* Header simplified to just the close X (0.8.0) — no title/border, floats in the top-right corner over the content below. */ .bd-sqv-sidebar-header { display: flex; justify-content: flex-end; padding: 16px 20px 0; flex-shrink: 0; } .bd-sqv-sidebar-toggle { background: none; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 4px; width: 28px; height: 28px; line-height: 1; font-size: 18px; cursor: pointer; } .bd-sqv-sidebar-content { padding: 8px 32px 32px; flex: 1; overflow-y: auto; } .bd-sqv-sidebar-placeholder { color: #666; margin: 0; } .bd-sqv-sidebar-loading { text-align: center; padding: 24px 0; color: #666; } .bd-sqv-sidebar-loading[hidden] { display: none; } .bd-sqv-sidebar-error { text-align: center; padding: 24px 12px; color: #c00; } .bd-sqv-preview-title { margin: 0 0 4px; text-align: center; font-weight: 700; } .bd-sqv-preview-subtitle { margin: 0 0 4px; color: #555; font-style: italic; text-align: center; } /* Below the title/subtitle (0.9.1) — same 16px gap whether or not a subtitle is present, since the subtitle's own bottom margin is small. */ .bd-sqv-preview-image { display: block; max-width: 240px; max-height: 340px; width: auto; height: auto; margin: 12px auto 20px; } /* "Leggi EPUB"/"Leggi PDF" and, mutually exclusive with those, the reservation-status pill + "Richiedilo alla Biblioteca"/"Avvisami quando disponibile" — see miscellanea/Grafica/3_SCHEDA-LIBRO-OVERLAY.jpg and 4_SCHEDA-LIBRO-PRESTATO-OVERLAY.jpg for the visual this follows. */ .bd-sqv-preview-read-actions, .bd-sqv-preview-secondary-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 20px; } .bd-sqv-preview-action-btn { display: inline-flex; align-items: center; gap: 6px; flex: 0 1 auto; justify-content: center; background: #fff; border: 1px solid #1a3d7c; border-radius: 20px; padding: 8px 16px; font-size: 13px; font-weight: 600; color: #1a3d7c; text-decoration: none; cursor: pointer; white-space: nowrap; } .bd-sqv-preview-action-btn:hover, .bd-sqv-preview-action-btn:focus { background: rgba(26, 61, 124, 0.06); } .bd-sqv-preview-action-btn img { flex: 0 0 auto; width: 16px; height: 16px; } /* Wired to real bd-reservations capacity data since 0.7.0 — see BD_SQV_Frontend::get_reservation_status(). */ .bd-sqv-preview-reservation-status { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 8px 14px; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 20px; font-size: 13px; color: #333; } .bd-sqv-preview-reservation-status img { flex: 0 0 auto; width: 16px; height: 16px; } .bd-sqv-preview-missing-plan-notice { margin: 0 0 12px; padding: 8px 14px; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 20px; font-size: 13px; color: #333; text-align: center; } /* "Richiedilo alla Biblioteca" (bd-book-requests' .bd-br-request-btn) and "Avvisami quando disponibile" (bd-reservations' .bd-btn-watchlist) are reused, self-sufficient markup owned by their respective plugins — each already ships its own base style. These rules only reskin them to this sidebar's existing pill-button look, scoped to this container so the owning plugins' own default styling elsewhere on the site is untouched. */ .bd-sqv-preview-secondary-actions .bd-br-request-btn, .bd-sqv-preview-secondary-actions .bd-btn-watchlist { display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: 0 1 auto; background: #fff; border: 1px solid #1a3d7c; border-radius: 20px; padding: 8px 16px; font-size: 13px; font-weight: 600; color: #1a3d7c; text-decoration: none; cursor: pointer; white-space: nowrap; margin: 0; } .bd-sqv-preview-secondary-actions .bd-br-request-btn:hover, .bd-sqv-preview-secondary-actions .bd-br-request-btn:focus, .bd-sqv-preview-secondary-actions .bd-btn-watchlist:hover, .bd-sqv-preview-secondary-actions .bd-btn-watchlist:focus { background: rgba(26, 61, 124, 0.06); } /* bd-book-requests'/bd-reservations' reused button markup has no icon slot of its own (plain