/* 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. */ .bd-sqv-menu { position: fixed; z-index: 999999; 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; } .bd-sqv-menu[hidden] { display: none; } /* 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