* {
box-sizing: border-box;
}
html,
body {
margin: 0;
width: 100%;
height: 100%;
overflow: hidden;
font-family:
var(--font),
Arial,
sans-serif;
background:
var(--bg);
color:
var(--text);
}
.viewer {
width: 100%;
height: 100dvh;
display: flex;
flex-direction: column;
background:
radial-gradient(
circle at center,
#303030 0%,
#151515 55%,
#090909 100%
);
}
.topbar {
height: 58px;
display: flex;
align-items: center;
justify-content: space-between;
padding:
8px 14px;
background:
#00000099;
backdrop-filter:
blur(12px);
z-index: 20;
}
.brand {
font-weight: 700;
font-size:
clamp(
15px,
2vw,
21px
);
}
.tools {
display: flex;
gap: 6px;
}
.tools button {
width: 40px;
height: 40px;
border: 0;
border-radius: 10px;
color: white;
background:
#ffffff18;
font-size: 20px;
cursor: pointer;
}
.stage {
position: relative;
flex: 1;
min-height: 0;
display: flex;
align-items: center;
justify-content: center;
perspective:
1800px;
overflow: hidden;
}
.book {
position: relative;
width:
min(
92vw,
1000px
);
height:
min(
86vh,
1200px
);
display: flex;
align-items: center;
justify-content: center;
touch-action:
none;
user-select:
none;
transition:
transform .2s ease;
}
.page {
position: absolute;
width: 100%;
height: 100%;
object-fit: contain;
background: white;
box-shadow:
0 15px 50px
#00000099;
transform-origin:
left center;
backface-visibility:
hidden;
will-change:
transform;
}
.page.current {
z-index: 5;
}
.page.back {
z-index: 3;
}
.page.anim {
transition:
transform
.72s
cubic-bezier(
.22,
.75,
.25,
1
),
filter
.72s;
}
.page.flip-next {
transform:
rotateY(-180deg);
filter:
brightness(.72);
}
.page.flip-prev {
transform-origin:
right center;
transform:
rotateY(180deg);
filter:
brightness(.72);
}
/* ========================================
PROSPEKTSEITE
======================================== */
.viewer-page {
position: absolute;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: white;
box-shadow:
0 15px 50px
#00000099;
transform-origin:
left center;
backface-visibility:
hidden;
}
.viewer-page > img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
user-select: none;
pointer-events: none;
}
/* ========================================
TEXT AUF PROSPEKT
======================================== */
.viewer-text-layer {
position: absolute;
inset: 0;
pointer-events: none;
}
.viewer-text {
position: absolute;
transform:
translate(-50%, -50%);
line-height:
1.15;
white-space:
pre-wrap;
max-width:
90%;
text-shadow:
0 1px 3px
#00000033;
}
/* ========================================
BLÄTTERANIMATION
======================================== */
.viewer-page.anim {
transition:
transform
.72s
cubic-bezier(
.22,
.75,
.25,
1
),
filter
.72s;
}
.viewer-page.flip-next {
transform:
rotateY(-180deg);
filter:
brightness(.72);
}
.viewer-page.flip-prev {
transform-origin:
right center;
transform:
rotateY(180deg);
filter:
brightness(.72);
}
.viewer-page.back {
z-index:
3;
}
.viewer-page.current {
z-index:
5;
}
.nav {
position: absolute;
z-index: 10;
top: 50%;
transform:
translateY(-50%);
width: 58px;
height: 110px;
border: 0;
border-radius: 12px;
color: white;
background:
#00000077;
font-size: 55px;
cursor: pointer;
backdrop-filter:
blur(8px);
}
.nav:hover {
background:
#000000aa;
}
.prev {
left: 14px;
}
.next {
right: 14px;
}
.controls {
height: 64px;
display: flex;
align-items: center;
gap: 12px;
padding:
8px 14px;
background:
#000000aa;
z-index: 20;
}
.page-info {
min-width: 70px;
text-align: center;
font-weight: 700;
}
.controls input {
flex: 1;
accent-color:
var(--accent);
}
.controls button {
padding:
10px 14px;
border: 0;
border-radius: 10px;
color: white;
background:
#ffffff18;
cursor: pointer;
}
.thumbs {
position: absolute;
bottom: 64px;
left: 0;
right: 0;
z-index: 19;
display: none;
gap: 8px;
padding: 10px;
overflow-x: auto;
background:
#000000dd;
backdrop-filter:
blur(15px);
}
.thumbs.show {
display: flex;
}
.thumb {
height: 90px;
width: auto;
border: 2px solid transparent;
border-radius: 4px;
cursor: pointer;
}
.thumb.active {
border-color:
var(--accent);
}
.empty {
padding: 30px;
text-align: center;
}
@media (
max-width: 700px
) {
.topbar {
height: 50px;
}
.tools button {
width: 36px;
height: 36px;
}
.book {
width: 94vw;
height:
calc(
100dvh - 125px
);
}
.nav {
width: 44px;
height: 76px;
font-size: 42px;
}
.prev {
left: 5px;
}
.next {
right: 5px;
}
.controls {
height: 62px;
}
.thumb {
height: 70px;
}
}