314 lines
6.5 KiB
CSS
314 lines
6.5 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;
|
|
|
|
:root {
|
|
--z-controls: 10;
|
|
--z-cover: 9;
|
|
--z-overlays: 6;
|
|
}
|
|
|
|
[debug] {
|
|
--ipub-debug-bg-opacity: 30%;
|
|
background-color: rgba(
|
|
from var(--ipub-debug-color) r g b / var(--ipub-debug-bg-opacity, 30%)
|
|
);
|
|
outline-color: var(--ipub-debug-color);
|
|
outline-width: 1px;
|
|
outline-style: solid;
|
|
}
|
|
|
|
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):not(ipub-soundtrack),
|
|
& > ipub-background:first-of-type + *:first-of-type:not(ipub-soundtrack),
|
|
& > ipub-soundtrack:first-of-type + *:first-of-type:not(ipub-background) {
|
|
margin-top: var(--ipub-padding-t);
|
|
margin-bottom: calc(var(--ipub-gap) / 2);
|
|
}
|
|
|
|
& > *:not(ipub-background):not(ipub-soundtrack) {
|
|
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),
|
|
& > *:last-child:not(ipub-soundtrack),
|
|
& > ipub-background:last-of-type + *:last-of-type:not(ipub-soundtrack),
|
|
& > ipub-soundtrack:last-of-type + *:last-of-type:not(ipub-background) {
|
|
margin-top: calc(var(--ipub-gap) / 2);
|
|
margin-bottom: var(--ipub-padding-b);
|
|
}
|
|
}
|
|
}
|
|
|
|
ipub-soundtrack {
|
|
display: inline-block;
|
|
|
|
z-index: var(--z-overlays);
|
|
|
|
--ipub-color: red;
|
|
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 0;
|
|
position: sticky;
|
|
align-self: start;
|
|
|
|
border-top: 0.1rem dashed var(--ipub-color);
|
|
|
|
figure {
|
|
margin: 0;
|
|
height: 1.5rem;
|
|
font-size: small;
|
|
width: 100%;
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
flex-direction: row;
|
|
flex: 1;
|
|
|
|
label {
|
|
background-color: var(--ipub-color);
|
|
border-end-end-radius: 0.5rem;
|
|
|
|
padding: 0.1rem 0.4rem;
|
|
width: max-content;
|
|
max-width: 50%;
|
|
height: 100%;
|
|
white-space: nowrap;
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
&:has(input:checked) label {
|
|
border-end-end-radius: 0;
|
|
}
|
|
|
|
figcaption::before {
|
|
content: "0 "; /* TODO: change to an icon and better positioning */
|
|
}
|
|
|
|
figcaption::after {
|
|
content: " >"; /* TODO: change to an icon and better positioning */
|
|
}
|
|
&:has(input:checked) figcaption::after {
|
|
content: " <"; /* TODO: change to an icon and better positioning */
|
|
}
|
|
|
|
input {
|
|
width: 0;
|
|
height: 0;
|
|
display: none;
|
|
}
|
|
|
|
&:has(input) audio {
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
|
|
&:has(input:checked) audio {
|
|
width: 100%;
|
|
@media (width >= 40rem) {
|
|
width: 70%;
|
|
}
|
|
height: 100%;
|
|
|
|
background-color: var(--ipub-color);
|
|
@media (width >= 40rem) {
|
|
border-end-end-radius: 0.5rem;
|
|
}
|
|
|
|
padding: 0.1rem 0.4rem;
|
|
}
|
|
|
|
audio::-webkit-media-controls-enclosure {
|
|
background-color: transparent;
|
|
padding: 0;
|
|
border-radius: 0px;
|
|
}
|
|
audio::-webkit-media-controls-panel {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
&[playing] figure figcaption::before {
|
|
content: "P "; /* TODO: change to an icon and better positioning */
|
|
}
|
|
}
|
|
|
|
ipub-background {
|
|
--ipub-mask: linear-gradient(
|
|
rgba(0, 0, 0, 0) 0%,
|
|
rgba(0, 0, 0, 1) calc(100% + calc(var(--ipub-fade, 100%) * -1))
|
|
);
|
|
|
|
--ipub-width: 100vw;
|
|
--ipub-height: 100vh;
|
|
|
|
display: inline-block;
|
|
top: 0;
|
|
left: 0;
|
|
width: 0;
|
|
height: 0;
|
|
position: sticky;
|
|
align-self: start;
|
|
|
|
&:first-of-type,
|
|
&[nofade] {
|
|
--ipub-mask: unset;
|
|
}
|
|
|
|
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; */
|
|
/* background-image: var(--mask); */
|
|
mask-image: var(--ipub-mask);
|
|
-webkit-mask-image: var(--ipub-mask);
|
|
}
|
|
|
|
& > picture {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
display: block;
|
|
width: var(--ipub-width);
|
|
height: var(--ipub-height);
|
|
& > img {
|
|
object-fit: cover;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
/* Support standalone img element */
|
|
& > img {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
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%;
|
|
}
|
|
}
|