186 lines
3.9 KiB
CSS
186 lines
3.9 KiB
CSS
.body {
|
|
-epub-writing-mode: horizontal-tb;
|
|
-webkit-writing-mode: horizontal-tb;
|
|
direction: ltr;
|
|
/* direction: rtl; */
|
|
writing-mode: horizontal-tb;
|
|
position: relative;
|
|
margin: 0;
|
|
|
|
max-width: 100vw;
|
|
max-height: 100vh;
|
|
overflow: clip;
|
|
display: flex;
|
|
|
|
--z-cover: 9;
|
|
ipub-cover > dialog[open] {
|
|
--ipub-accent-color: #fff;
|
|
z-index: var(--z-cover);
|
|
background-color: transparent;
|
|
border: none;
|
|
|
|
display: inline-block;
|
|
position: absolute;
|
|
backdrop-filter: blur(1rem);
|
|
background-image: linear-gradient(
|
|
rgba(from var(--ipub-accent-color) r g b / 0) 0%,
|
|
rgba(from var(--ipub-accent-color) r g b / 0.5)
|
|
calc(100% + calc(var(--ipub-fade, 50%) * -1))
|
|
);
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
ipub-body {
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
|
|
position: relative;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
overflow: scroll;
|
|
&:has(ipub-cover > dialog[open]) {
|
|
overflow: hidden;
|
|
}
|
|
|
|
--ipub-padding: 0%;
|
|
--ipub-gap: 0%;
|
|
--ipub-padding-x: var(--ipub-padding, 0%);
|
|
--ipub-padding-y: var(--ipub-padding, 0%);
|
|
--ipub-padding-t: var(--ipub-padding-y, 0%);
|
|
--ipub-padding-r: var(--ipub-padding-x, 0%);
|
|
--ipub-padding-b: var(--ipub-padding-y, 0%);
|
|
--ipub-padding-l: var(--ipub-padding-x, 0%);
|
|
|
|
& > article,
|
|
& > main,
|
|
& > section {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
|
|
& > *:first-child:not(ipub-background),
|
|
& > ipub-background:first-child + *:first-of-type {
|
|
margin-top: var(--ipub-padding-t);
|
|
}
|
|
|
|
& > *:not(ipub-background) {
|
|
margin-top: calc(var(--ipub-gap) / 2);
|
|
margin-right: var(--ipub-padding-r);
|
|
margin-left: var(--ipub-padding-l);
|
|
margin-bottom: calc(var(--ipub-gap) / 2);
|
|
}
|
|
|
|
& > *:last-child:not(ipub-background),
|
|
& > ipub-background:last-child + *:last-of-type {
|
|
margin-bottom: var(--ipub-padding-b);
|
|
}
|
|
}
|
|
}
|
|
|
|
ipub-background {
|
|
--ipub-width: 100vw;
|
|
--ipub-height: 100vh;
|
|
|
|
&[sticky] {
|
|
display: inline-block;
|
|
top: 0;
|
|
left: 0;
|
|
width: 0;
|
|
height: 0;
|
|
position: sticky;
|
|
align-self: start;
|
|
}
|
|
|
|
&[fade] img {
|
|
/* For testing */
|
|
/* background-image: linear-gradient( */
|
|
/* rgba(266, 0, 0, 1) 0%, */
|
|
/* rgba(0, 266, 0, 1) calc(100% + calc(var(--ipub-fade, 100%) * -1)), */
|
|
/* rgba(266, 0, 266, 1) 100% */
|
|
/* ) !important; */
|
|
--mask: linear-gradient(
|
|
rgba(0, 0, 0, 0) 0%,
|
|
rgba(0, 0, 0, 1) calc(100% + calc(var(--ipub-fade, 100%) * -1))
|
|
) !important;
|
|
/* background-image: var(--mask); */
|
|
mask-image: var(--mask);
|
|
-webkit-mask-image: var(--mask);
|
|
}
|
|
|
|
& > picture {
|
|
display: block;
|
|
width: var(--ipub-width);
|
|
height: var(--ipub-height);
|
|
& > img {
|
|
object-fit: cover;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
/* Support standalone img element */
|
|
& > img {
|
|
display: block;
|
|
object-fit: cover;
|
|
width: var(--ipub-width);
|
|
height: var(--ipub-height);
|
|
}
|
|
}
|
|
|
|
ipub-image {
|
|
position: relative;
|
|
display: inline-block;
|
|
flex-direction: column;
|
|
|
|
width: var(--ipub-width, unset);
|
|
height: var(--ipub-height, unset);
|
|
|
|
img {
|
|
display: block;
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
}
|
|
}
|
|
|
|
ipub-interaction {
|
|
position: absolute;
|
|
|
|
--ipub-x: 0px;
|
|
--ipub-y: 0px;
|
|
--ipub-size: 10%;
|
|
--ipub-width: var(--ipub-size, unset);
|
|
--ipub-height: unset;
|
|
--ipub-ratio: 1/1;
|
|
|
|
left: var(--ipub-x);
|
|
top: var(--ipub-y);
|
|
|
|
width: var(--ipub-width);
|
|
height: var(--ipub-height);
|
|
aspect-ratio: var(--ipub-ratio, unset);
|
|
transform: translate(var(--ipub-offset-x, -50%), var(--ipub-offset-y, -50%));
|
|
|
|
& > * {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
border-radius: var(--ipub-radius, unset);
|
|
|
|
/*
|
|
* The opacity would be, by default, zero. Here it is 0.3 for easier debugging and
|
|
* showing of the example ebook
|
|
*/
|
|
background-color: red;
|
|
opacity: 0.3;
|
|
}
|
|
&[circle] {
|
|
--ipub-radius: 100%;
|
|
}
|
|
}
|