136 lines
No EOL
3.4 KiB
CSS
136 lines
No EOL
3.4 KiB
CSS
/* CSS for Paged.js interface – v0.2
|
||
Julie Blanc - 2020
|
||
MIT License https://opensource.org/licenses/MIT
|
||
A simple stylesheet to see pages on screen (with baseline included)
|
||
Adapted for this project */
|
||
|
||
|
||
/* Change the look */
|
||
:root {
|
||
--color-background: #efefef;
|
||
--color-pageSheet: #cfcfcf;
|
||
--color-pageBox: violet;
|
||
--color-paper: white;
|
||
--pagedjs-crop-color: #000;
|
||
--pagedjs-crop-stroke: 1px;
|
||
--color-preview: #222;
|
||
--pagedjs-margin-interface: 20px;
|
||
--pagedjs-header-height: 80px;
|
||
|
||
/* --pagedjs-bleed-left-right: 0mm!important; */
|
||
}
|
||
|
||
.pagedjs_marks-crop{
|
||
z-index: 999999999999;
|
||
}
|
||
|
||
/* To define how the book look on the screen: */
|
||
@media screen, pagedjs-ignore {
|
||
body {
|
||
background-color: var(--color-background);
|
||
padding-left: var(--pagedjs-margin-interface);
|
||
padding-right: var(--pagedjs-margin-interface);
|
||
min-width: calc(var(--pagedjs-width) * 2 + var(--pagedjs-margin-interface)*2);
|
||
}
|
||
body.no-spread{
|
||
min-width: calc(var(--pagedjs-width) + var(--pagedjs-margin-interface)*2);
|
||
|
||
}
|
||
|
||
.pagedjs_pages {
|
||
display: flex;
|
||
width: calc(var(--pagedjs-width) * 2);
|
||
flex: 0;
|
||
flex-wrap: wrap;
|
||
margin: 0 auto;
|
||
margin-bottom: var(--pagedjs-header-height);
|
||
margin-top: var(--pagedjs-header-height);
|
||
|
||
}
|
||
|
||
.pagedjs_page {
|
||
background-color: var(--color-paper);
|
||
box-shadow: 0 0 0 1px var(--color-pageSheet);
|
||
margin: 0;
|
||
flex-shrink: 0;
|
||
flex-grow: 0;
|
||
margin-top: 10mm;
|
||
}
|
||
|
||
.pagedjs_first_page {
|
||
margin-left: calc(var(--pagedjs-width) - var(--pagedjs-bleed-left));
|
||
}
|
||
|
||
.pagedjs_page:last-of-type {
|
||
margin-bottom: 10mm;
|
||
}
|
||
|
||
.pagedjs_pagebox{
|
||
box-shadow: 0 0 0 1px var(--color-pageBox);
|
||
}
|
||
|
||
.pagedjs_left_page{
|
||
z-index: 20;
|
||
width: calc(var(--pagedjs-bleed-left) + var(--pagedjs-pagebox-width))!important;
|
||
}
|
||
|
||
/* .pagedjs_left_page .pagedjs_sheet{
|
||
z-index: 20;
|
||
width: calc(var(--pagedjs-bleed-left) + var(--pagedjs-pagebox-width) + 1px)!important;
|
||
} */
|
||
|
||
.pagedjs_left_page .pagedjs_bleed-right .pagedjs_marks-crop {
|
||
border-color: transparent;
|
||
}
|
||
|
||
|
||
.pagedjs_left_page .pagedjs_bleed-right .pagedjs_marks-middle{
|
||
width: 0;
|
||
}
|
||
|
||
.pagedjs_right_page{
|
||
z-index: 10;
|
||
position: relative;
|
||
left: calc(var(--pagedjs-bleed-left)*-1);
|
||
}
|
||
|
||
/* show the margin-box */
|
||
|
||
.pagedjs_margin-top-left-corner-holder,
|
||
.pagedjs_margin-top,
|
||
.pagedjs_margin-top-left,
|
||
.pagedjs_margin-top-center,
|
||
.pagedjs_margin-top-right,
|
||
.pagedjs_margin-top-right-corner-holder,
|
||
.pagedjs_margin-bottom-left-corner-holder,
|
||
.pagedjs_margin-bottom,
|
||
.pagedjs_margin-bottom-left,
|
||
.pagedjs_margin-bottom-center,
|
||
.pagedjs_margin-bottom-right,
|
||
.pagedjs_margin-bottom-right-corner-holder,
|
||
.pagedjs_margin-right,
|
||
.pagedjs_margin-right-top,
|
||
.pagedjs_margin-right-middle,
|
||
.pagedjs_margin-right-bottom,
|
||
.pagedjs_margin-left,
|
||
.pagedjs_margin-left-top,
|
||
.pagedjs_margin-left-middle,
|
||
.pagedjs_margin-left-bottom {
|
||
box-shadow: 0 0 0 1px inset var(--color-marginBox);
|
||
}
|
||
|
||
}
|
||
|
||
|
||
|
||
.note {
|
||
float: footnote;
|
||
}
|
||
|
||
/* define the position of the footnote on the page (only bottom is possible for now) */
|
||
|
||
@page {
|
||
@footnote {
|
||
float: bottom;
|
||
}
|
||
} |