This commit is contained in:
hamid zarghami
+72
-5
@@ -121,21 +121,21 @@ html {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* موبایل: بدون سایهٔ کادر کتاب تا لبهٔ صفحه هنگام ورق دیده شود؛ overflow و contain کمتر تا بریدگی ۳D نماند */
|
||||
/* موبایل: بدون سایهٔ کادر کتاب؛ overflow مخفی تا سایهٔ ورق باعث جابهجایی نشود */
|
||||
@media (max-width: 767px) {
|
||||
.flipbook-container {
|
||||
box-shadow: none;
|
||||
border-radius: 2px;
|
||||
overflow: visible;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.flipbook-container .stf__wrapper {
|
||||
overflow: visible !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.flipbook-container .stf__item {
|
||||
contain: none;
|
||||
overflow: visible !important;
|
||||
contain: layout style paint;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -159,6 +159,73 @@ html {
|
||||
isolation: isolate;
|
||||
}
|
||||
|
||||
/* سایهٔ هر ورق — فقط inset؛ بدون --simple تا موقع ورق هم بماند */
|
||||
.flipbook-container .stf__item.--left .page {
|
||||
box-shadow:
|
||||
inset -16px 0 24px -12px rgba(0, 0, 0, 0.2),
|
||||
inset 0 0 0 1px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.flipbook-container .stf__item.--right .page {
|
||||
box-shadow:
|
||||
inset 16px 0 24px -12px rgba(0, 0, 0, 0.2),
|
||||
inset 0 0 0 1px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.flipbook-container .stf__item.--left .page::after,
|
||||
.flipbook-container .stf__item.--right .page::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 28px;
|
||||
pointer-events: none;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.flipbook-container .stf__item.--left .page::after {
|
||||
right: 0;
|
||||
background: linear-gradient(to left, rgba(0, 0, 0, 0.14) 0%, rgba(0, 0, 0, 0.04) 35%, transparent 100%);
|
||||
}
|
||||
|
||||
.flipbook-container .stf__item.--right .page::after {
|
||||
left: 0;
|
||||
background: linear-gradient(to right, rgba(0, 0, 0, 0.14) 0%, rgba(0, 0, 0, 0.04) 35%, transparent 100%);
|
||||
}
|
||||
|
||||
/* تکصفحه (portrait): سایهٔ لبهٔ ورقزدن */
|
||||
.flipbook-container .stf__wrapper.--portrait .stf__item .page {
|
||||
box-shadow:
|
||||
inset 14px 0 22px -12px rgba(0, 0, 0, 0.16),
|
||||
inset 0 0 0 1px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.flipbook-container .stf__wrapper.--portrait .stf__item .page::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 32px;
|
||||
pointer-events: none;
|
||||
z-index: 5;
|
||||
background: linear-gradient(to right, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0.03) 40%, transparent 100%);
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.flipbook-container .stf__item.--left .page {
|
||||
box-shadow:
|
||||
inset -12px 0 20px -10px rgba(0, 0, 0, 0.18),
|
||||
inset 0 0 0 1px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.flipbook-container .stf__wrapper.--portrait .stf__item .page {
|
||||
box-shadow:
|
||||
inset 12px 0 18px -10px rgba(0, 0, 0, 0.14),
|
||||
inset 0 0 0 1px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
}
|
||||
|
||||
/* مخفی کردن محتوای صفحات غیرفعال - فقط صفحه فعلی قابل تعامل است */
|
||||
.flipbook-container .stf__wrapper {
|
||||
overflow: hidden;
|
||||
|
||||
@@ -442,8 +442,7 @@ const BookViewer: FC<BookViewerProps> = ({ pages, catalogSize, documentSettings
|
||||
dir="rtl"
|
||||
>
|
||||
<div
|
||||
className="relative w-full flex flex-col flex-1 max-md:min-h-0 pt-8 md:pt-12 min-h-0"
|
||||
style={{ overflow: isDesktop ? 'hidden' : 'visible' }}
|
||||
className="relative w-full flex flex-col flex-1 max-md:min-h-0 pt-8 md:pt-12 min-h-0 overflow-hidden"
|
||||
>
|
||||
<div className="relative flex flex-1 min-h-0 w-full items-center justify-center">
|
||||
{/* Border و Shadow عمودی در وسط (فقط حالت دوصفحهای دسکتاپ) */}
|
||||
@@ -461,8 +460,16 @@ const BookViewer: FC<BookViewerProps> = ({ pages, catalogSize, documentSettings
|
||||
*/}
|
||||
<div
|
||||
dir="ltr"
|
||||
className="max-w-full flex justify-center"
|
||||
style={{ overflow: isDesktop ? 'hidden' : 'visible', isolation: 'isolate' }}
|
||||
className="max-w-full flex justify-center shrink-0 rounded-sm"
|
||||
style={{
|
||||
overflow: 'hidden',
|
||||
isolation: 'isolate',
|
||||
width: usePortrait ? pagePixelWidth : pagePixelWidth * 2,
|
||||
height: pagePixelHeight,
|
||||
boxShadow: isDesktop
|
||||
? undefined
|
||||
: '0 8px 32px rgba(0, 0, 0, 0.14), 0 2px 8px rgba(0, 0, 0, 0.08)',
|
||||
}}
|
||||
>
|
||||
<HTMLFlipBook
|
||||
key={flipKey}
|
||||
@@ -474,12 +481,12 @@ const BookViewer: FC<BookViewerProps> = ({ pages, catalogSize, documentSettings
|
||||
minHeight={pagePixelHeight}
|
||||
maxWidth={pagePixelWidth}
|
||||
maxHeight={pagePixelHeight}
|
||||
drawShadow={isDesktop}
|
||||
drawShadow={true}
|
||||
flippingTime={800}
|
||||
usePortrait={usePortrait}
|
||||
startPage={startPage}
|
||||
autoSize={false}
|
||||
maxShadowOpacity={isDesktop ? 0.5 : 0}
|
||||
maxShadowOpacity={isDesktop ? 0.55 : 0.32}
|
||||
showCover={hasMultiplePages}
|
||||
mobileScrollSupport={!usePortrait}
|
||||
clickEventForward={true}
|
||||
|
||||
Reference in New Issue
Block a user