/* * PDF flipbook viewer ("เปิด PDF แบบ Flipbook", `pdf_flipbook`) — the overlay * assets/js/flipbook.js builds when a file card's PDF is opened in-page. * * Deliberately a separate stylesheet from showcase.css: the viewer is appended * to , not to the showcase wrapper, so it is outside the `@scope` a * preset's Custom CSS is confined to and none of the instance-level tokens * (--pcs-primary and friends) reach it. Its own --pcs-fb-* variables on * `.pcs-flipbook` are the retint point instead, settable from a theme * stylesheet — a preset's Custom CSS can't reach in here by design. */ .pcs-flipbook { --pcs-fb-backdrop: rgba(15, 23, 42, 0.92); --pcs-fb-surface: #f8fafc; --pcs-fb-text: #e2e8f0; --pcs-fb-muted: #94a3b8; --pcs-fb-control-bg: rgba(255, 255, 255, 0.08); --pcs-fb-control-bg-hover: rgba(255, 255, 255, 0.18); --pcs-fb-control-border: rgba(255, 255, 255, 0.16); --pcs-fb-page-shadow: 0 18px 45px rgba(0, 0, 0, 0.45); --pcs-fb-flip-duration: 620ms; position: fixed; inset: 0; z-index: 999999; display: flex; flex-direction: column; background: var(--pcs-fb-backdrop); color: var(--pcs-fb-text); font-family: inherit; /* The page behind keeps its scroll position; flipbook.js locks while this is open so a wheel gesture over the backdrop can't scroll it away. */ overscroll-behavior: contain; opacity: 0; transition: opacity 180ms ease; } .pcs-flipbook.is-open { opacity: 1; } /* Every element below that JS toggles with `.hidden` also sets its own `display`, which outranks the UA stylesheet's `[hidden] { display: none }` (a class beats an attribute selector) — so without this block the closed viewer, the loading spinner and the book would all stay on screen. Kept together rather than beside each rule: this is one trap, not five unrelated ones. */ .pcs-flipbook[hidden], .pcs-flipbook__status[hidden], .pcs-flipbook__book[hidden], .pcs-flipbook__spinner[hidden] { display: none; } /* ---------- header ---------- */ .pcs-flipbook__header { display: flex; align-items: center; gap: 12px; padding: 12px 16px; flex: 0 0 auto; } .pcs-flipbook__title { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.4; /* One line, ellipsised: a long document title must never push the controls beside it off the row on a narrow screen. */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; min-width: 0; } .pcs-flipbook__counter { flex: 0 0 auto; font-size: 13px; color: var(--pcs-fb-muted); font-variant-numeric: tabular-nums; } /* ---------- stage + book ---------- */ .pcs-flipbook__stage { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; padding: 0 16px; min-height: 0; overflow: auto; /* Horizontal swiping is the viewer's own gesture (flipbook.js reads it to turn pages), so the browser must not claim it for back-navigation. */ touch-action: pan-y pinch-zoom; } .pcs-flipbook__book { position: relative; display: flex; align-items: stretch; justify-content: center; /* The 3D space the turning leaf rotates in — without a perspective here the rotateY() below reads as a flat horizontal squash, not a page turn. */ perspective: 2400px; transform: scale(var(--pcs-fb-zoom, 1)); transform-origin: center center; transition: transform 160ms ease; } .pcs-flipbook__page { position: relative; display: block; background: var(--pcs-fb-surface); box-shadow: var(--pcs-fb-page-shadow); /* Sized by flipbook.js from the rendered page's own aspect ratio, so a portrait and a landscape PDF both fill the stage without letterboxing. */ width: auto; height: auto; max-width: 100%; object-fit: contain; } /* A spread with only one side (the cover, or the tail of an even-page document) keeps the empty half's space so the filled half stays where an open book would put it — hence visibility rather than display. */ .pcs-flipbook__page--empty { visibility: hidden; } /* One-page mode has no left-hand page at all, so it must not reserve half the book's width for one either. */ .pcs-flipbook__book--single .pcs-flipbook__page--left { display: none; } /* The gutter shading that makes two pages read as one open book rather than as two unrelated images sitting next to each other. */ .pcs-flipbook__book--spread .pcs-flipbook__page--left { box-shadow: var(--pcs-fb-page-shadow), inset -22px 0 26px -22px rgba(0, 0, 0, 0.5); } .pcs-flipbook__book--spread .pcs-flipbook__page--right { box-shadow: var(--pcs-fb-page-shadow), inset 22px 0 26px -22px rgba(0, 0, 0, 0.5); } /* ---------- the turning leaf ---------- */ .pcs-flipbook__leaf { position: absolute; top: 0; height: 100%; transform-style: preserve-3d; transition: transform var(--pcs-fb-flip-duration) ease-in-out; z-index: 2; /* Off until flipbook.js hands it a face to show — a stray empty leaf over the spread would swallow clicks meant for the page behind it. */ pointer-events: none; } .pcs-flipbook__leaf--next { transform-origin: left center; } .pcs-flipbook__leaf--prev { transform-origin: right center; } .pcs-flipbook__leaf-face { position: absolute; inset: 0; width: 100%; height: 100%; backface-visibility: hidden; background: var(--pcs-fb-surface); box-shadow: var(--pcs-fb-page-shadow); object-fit: contain; } .pcs-flipbook__leaf-face--back { transform: rotateY(180deg); } /* ---------- controls ---------- */ .pcs-flipbook__controls { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px)); } .pcs-flipbook__btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 40px; height: 40px; padding: 0 12px; border: 1px solid var(--pcs-fb-control-border); border-radius: 999px; background: var(--pcs-fb-control-bg); color: inherit; font: inherit; font-size: 13px; line-height: 1; cursor: pointer; transition: background-color 120ms ease, opacity 120ms ease; } .pcs-flipbook__btn:hover:not(:disabled) { background: var(--pcs-fb-control-bg-hover); } .pcs-flipbook__btn:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } .pcs-flipbook__btn:disabled { opacity: 0.4; cursor: default; } .pcs-flipbook__btn svg { width: 18px; height: 18px; flex: 0 0 auto; } .pcs-flipbook__btn--close { margin-left: auto; } .pcs-flipbook__header .pcs-flipbook__btn--close { margin-left: 0; } /* ---------- loading / error ---------- */ .pcs-flipbook__status { display: flex; flex-direction: column; align-items: center; gap: 12px; color: var(--pcs-fb-muted); font-size: 14px; text-align: center; padding: 24px; } .pcs-flipbook__spinner { /* A , so it needs a block-level display before width/height mean anything. */ display: block; width: 34px; height: 34px; border: 3px solid var(--pcs-fb-control-border); border-top-color: var(--pcs-fb-text); border-radius: 50%; animation: pcs-flipbook-spin 800ms linear infinite; } @keyframes pcs-flipbook-spin { to { transform: rotate(360deg); } } /* ---------- narrow screens ---------- */ @media (max-width: 782px) { .pcs-flipbook__stage { padding: 0 8px; } .pcs-flipbook__controls { gap: 6px; padding: 10px 8px calc(10px + env(safe-area-inset-bottom, 0px)); } .pcs-flipbook__btn { min-width: 36px; height: 36px; padding: 0 10px; } /* Labels drop out; the icons and the page counter carry the meaning, and each button keeps its aria-label for screen readers either way. */ .pcs-flipbook__btn-text { display: none; } } @media (prefers-reduced-motion: reduce) { .pcs-flipbook, .pcs-flipbook__book, .pcs-flipbook__leaf { transition: none; } .pcs-flipbook__spinner { animation-duration: 2s; } }