452 lines
9.9 KiB
CSS
452 lines
9.9 KiB
CSS
/* -------- styles des images -------- s */
|
||
figure img.fill{ object-fit: fill; width:100%; height:100%;}
|
||
figure img.contain{ object-fit: contain; max-width: none; width:100%; height:100%;}
|
||
figure img.cover{ object-fit: cover; max-width: none; width:100%; height:100%;}
|
||
|
||
|
||
/* -------- sauts de pages -------- */
|
||
/* Class pour l‘ajout d'une page */
|
||
.page{
|
||
page-break-after: always;
|
||
}
|
||
|
||
/* Classe pour l'ajout d'un saut de page */
|
||
.pagebreak{
|
||
page-break-after: always;
|
||
}
|
||
|
||
/* Classe pour l'ajout d'une page blanche */
|
||
.blank-page{
|
||
page-break-after: always;
|
||
page: blank;
|
||
}
|
||
|
||
@page blank{
|
||
background: #FFF;
|
||
@top-left-corner {content: none;}
|
||
@top-left {content: none;}
|
||
@top-center {content: none;}
|
||
@top-right {content: none;}
|
||
@top-right-corner {content: none;}
|
||
@left-top {content: none;}
|
||
@left-middle {content: none;}
|
||
@left-bottom {content: none;}
|
||
@right-top {content: none;}
|
||
@right-middle {content: none;}
|
||
@right-bottom {content: none;}
|
||
@bottom-left-corner {content: none;}
|
||
@bottom-left {content: none;}
|
||
@bottom-center {content: none;}
|
||
@bottom-right {content: none;}
|
||
@bottom-right-corner {content: none;}
|
||
}
|
||
|
||
/* --------- Alignment for blocks ------- */
|
||
.chapter .content div.alignment-left,
|
||
.chapter .content div.alignment-left p{
|
||
text-align: left !important;
|
||
hyphens: none !important;
|
||
}
|
||
|
||
.chapter .content div.alignment-right,
|
||
.chapter .content div.alignment-right p{
|
||
text-align: right !important;
|
||
hyphens: none !important;
|
||
}
|
||
|
||
.chapter .content div.alignment-center,
|
||
.chapter .content div.alignment-center p{
|
||
text-align: center !important;
|
||
hyphens: none !important;
|
||
}
|
||
|
||
.chapter .content div.alignment-justify,
|
||
.chapter .content div.alignment-justify p{
|
||
text-align: justify !important;
|
||
hyphens: auto !important;
|
||
}
|
||
|
||
|
||
/* -------- BACKGROUND IMAGE --------- */
|
||
.spread-image {
|
||
--pagedjs-full-page: spread;
|
||
}
|
||
|
||
.full-bleed-image.full-page{
|
||
top: calc(var(--pagedjs-margin-top)*-1 - var(--pagedjs-bleed-top));
|
||
height: var(--pagedjs-height);
|
||
}
|
||
|
||
.pagedjs_left_page .full-bleed-image.full-page{
|
||
left: calc(var(--pagedjs-margin-left)*-1 - var(--pagedjs-bleed-left));
|
||
right: calc(var(--pagedjs-margin-right)*-1);
|
||
}
|
||
|
||
.pagedjs_right_page .full-bleed-image.full-page{
|
||
left: calc(var(--pagedjs-margin-left)*-1);
|
||
right: calc(var(--pagedjs-margin-right)*-1 - var(--pagedjs-bleed-right));
|
||
}
|
||
|
||
.spread-interval-image-left{
|
||
break-before: left;
|
||
page: spreadinterval;
|
||
}
|
||
|
||
.spread-interval-image-right{
|
||
page: spreadinterval;
|
||
position: relative;
|
||
}
|
||
|
||
.spread-interval-image-left figure,
|
||
.spread-interval-image-right figure{
|
||
width:200%;
|
||
}
|
||
|
||
.spread-interval-image-right figure{
|
||
margin-left: -100%;
|
||
}
|
||
|
||
.spread-interval-image-right .chapter-title-wrapper{
|
||
position: absolute;
|
||
bottom: 20mm;
|
||
right: 20mm;
|
||
}
|
||
|
||
.spread-interval-image-right .chapter-title-wrapper h1,
|
||
.spread-interval-image-right .chapter-title-wrapper .chapter-number{
|
||
color: #FFF;
|
||
border-color: #FFF;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
.spread-interval-image-right .chapter-title-spanish{
|
||
margin-left: 10mm;
|
||
}
|
||
|
||
@page spreadinterval{
|
||
background: var(--backgroundImage);
|
||
margin:0;
|
||
@top-left-corner {content: none;}
|
||
@top-left {content: none;}
|
||
@top-center {content: none;}
|
||
@top-right {content: none;}
|
||
@top-right-corner {content: none;}
|
||
@left-top {content: none;}
|
||
@left-middle {content: none;}
|
||
@left-bottom {content: none;}
|
||
@right-top {content: none;}
|
||
@right-middle {content: none;}
|
||
@right-bottom {content: none;}
|
||
@bottom-left-corner {content: none;}
|
||
@bottom-left {content: none;}
|
||
@bottom-center {content: none;}
|
||
@bottom-right {content: none;}
|
||
@bottom-right-corner {content: none;}
|
||
}
|
||
|
||
.pagedjs_spreadinterval_page .chapter{
|
||
margin-top: 0 !important;
|
||
}
|
||
|
||
.interval-image{
|
||
break-before: left;
|
||
page: interval;
|
||
}
|
||
|
||
@page interval{
|
||
background: var(--backgroundImage);
|
||
margin:0;
|
||
@top-left-corner {content: none;}
|
||
@top-left {content: none;}
|
||
@top-center {content: none;}
|
||
@top-right {content: none;}
|
||
@top-right-corner {content: none;}
|
||
@left-top {content: none;}
|
||
@left-middle {content: none;}
|
||
@left-bottom {content: none;}
|
||
@right-top {content: none;}
|
||
@right-middle {content: none;}
|
||
@right-bottom {content: none;}
|
||
@bottom-left-corner {content: none;}
|
||
@bottom-left {content: none;}
|
||
@bottom-center {content: none;}
|
||
@bottom-right {content: none;}
|
||
@bottom-right-corner {content: none;}
|
||
}
|
||
|
||
.interval-image figcaption{
|
||
background: rgba(255, 255, 255, 1);
|
||
border-radius: 10px;
|
||
position: absolute;
|
||
margin-top: 0;
|
||
padding: 1mm 3mm;
|
||
color: var(--green);
|
||
border: 1px solid var(--green);
|
||
max-width: calc(var(--pagedjs-width) - 30mm);
|
||
bottom: 8mm;
|
||
left: 15mm;
|
||
}
|
||
|
||
.pagedjs_interval_page .chapter{
|
||
margin-top: 0 !important;
|
||
}
|
||
|
||
.spread-image,
|
||
.full-bleed-image.full-page {
|
||
height: var(--pagedjs-height);
|
||
top: auto;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.spread-image figure,
|
||
.full-bleed-image figure{
|
||
height: calc(var(--pagedjs-height) + var(--pagedjs-margin-top) + var(--pagedjs-margin-bottom));
|
||
}
|
||
|
||
.spread-image figure.full-width,
|
||
.full-bleed-image figure.full-width{
|
||
height: auto;
|
||
width: calc(100% - 12mm);
|
||
margin: 6mm;
|
||
}
|
||
|
||
|
||
.spread-image figure.full-width img;
|
||
.full-bleed-image figure.full-width img{
|
||
max-width: 100%;
|
||
height: auto;
|
||
}
|
||
|
||
.full-bleed-image figure img{
|
||
object-fit: cover;
|
||
max-width: none;
|
||
width:100%;
|
||
height:100%;
|
||
}
|
||
|
||
.spread-image figure img{
|
||
object-fit: cover;
|
||
max-width: none;
|
||
width:100%;
|
||
height:100%;
|
||
}
|
||
|
||
.full-bleed-image figcaption,
|
||
.spread-image figcaption{
|
||
background: rgba(255, 255, 255, 1);
|
||
border-radius: 10px;
|
||
position: absolute;
|
||
margin-top: 0;
|
||
padding: 1mm 3mm;
|
||
color: var(--green);
|
||
border: 1px solid var(--green);
|
||
max-width: calc(var(--pagedjs-width) - 30mm);
|
||
}
|
||
|
||
.pagedjs_left_page .full-bleed-image figcaption {
|
||
left: 8mm;
|
||
}
|
||
|
||
.pagedjs_right_page .full-bleed-image figcaption{
|
||
right: 8mm;
|
||
}
|
||
|
||
.full-bleed-image figcaption {
|
||
bottom: -7mm;
|
||
}
|
||
|
||
.spread-image figcaption{
|
||
bottom: 15mm;
|
||
left: 15mm;
|
||
}
|
||
|
||
.background-image{
|
||
page: backgroundImage;
|
||
/* page-break-after: always;*/
|
||
margin-top: -1cm;
|
||
position: relative;
|
||
}
|
||
|
||
.background-image figcaption{
|
||
background: rgba(255, 255, 255, 0.9);
|
||
position: absolute;
|
||
margin-top: 0;
|
||
padding: 1mm 1mm;
|
||
top: 0;
|
||
/* left: 10mm;*/
|
||
/* top: calc(9in - 15mm);*/
|
||
}
|
||
|
||
.background-image figcaption p{
|
||
margin:0;
|
||
}
|
||
|
||
.pagedjs_page.pagedjs_right_page .background-image figure{
|
||
position: absolute;
|
||
top: calc(var(--pagedjs-bleed-top) * -1);
|
||
left:0;
|
||
width: calc(var(--pagedjs-width-right) - var(--pagedjs-bleed-right));
|
||
height: calc(var(--pagedjs-height-right));
|
||
}
|
||
|
||
.pagedjs_page.pagedjs_left_page .background-image figure{
|
||
position: absolute;
|
||
top: calc(var(--pagedjs-bleed-top) * -1);
|
||
left: calc(var(--pagedjs-bleed-left) * -1);
|
||
width: calc(var(--pagedjs-width-left) - var(--pagedjs-bleed-left));
|
||
height: var(--pagedjs-height-left);
|
||
}
|
||
|
||
@page backgroundImage{
|
||
margin: 0;
|
||
@top-left-corner {content: none;}
|
||
@top-left {content: none;}
|
||
@top-center {content: none;}
|
||
@top-right {content: none;}
|
||
@top-right-corner {content: none;}
|
||
@left-top {content: none;}
|
||
@left-middle {content: none;}
|
||
@left-bottom {content: none;}
|
||
@right-top {content: none;}
|
||
@right-middle {content: none;}
|
||
@right-bottom {content: none;}
|
||
@bottom-left-corner {content: none;}
|
||
@bottom-left {content: none;}
|
||
@bottom-center {content: none;}
|
||
@bottom-right {content: none;}
|
||
@bottom-right-corner {content: none;}
|
||
}
|
||
|
||
/* -------- FULL PAGE --------- */
|
||
|
||
.full-page{
|
||
position: absolute;
|
||
}
|
||
|
||
.full-page.bottom{
|
||
bottom: 0;
|
||
transform: none;
|
||
top: inherit;
|
||
}
|
||
|
||
/* ------ Colonnes de texte ------ */
|
||
|
||
.col-2{
|
||
columns: 2;
|
||
column-gap: 0.5cm;
|
||
}
|
||
|
||
.col-3{
|
||
columns: 3;
|
||
column-gap: 0.5cm;
|
||
}
|
||
|
||
/* ------- IMAGES --------- */
|
||
|
||
.grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(12,1fr);
|
||
grid-gap: 0.5cm;
|
||
align-content: start;
|
||
}
|
||
|
||
.grid figure {
|
||
grid-column: span 3;
|
||
align-self: start;
|
||
justify-self: start;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
/* largeur des .figure */
|
||
figure.offset2 { grid-column: 3 / span 3; }
|
||
figure.offset4 { grid-column: 5 / span 3; }
|
||
figure.offset6 { grid-column: 7 / span 3; }
|
||
figure.offset8 { grid-column: 9 / span 3; }
|
||
figure.third { grid-column: span 4; }
|
||
figure.third.offset2 { grid-column: 3 / span 4; }
|
||
figure.third.offset4 { grid-column: 5 / span 4; }
|
||
figure.third.offset6 { grid-column: 7 / span 4; }
|
||
figure.third.offset8 { grid-column: 9 / span 4; }
|
||
figure.half { grid-column: span 6; }
|
||
figure.half.offset2 { grid-column: 3 / span 6; }
|
||
figure.half.offset4 { grid-column: 5 / span 6; }
|
||
figure.half.offset6 { grid-column: 7 / span 6; }
|
||
figure.twothird { grid-column: span 8; }
|
||
figure.twothird.offset2 { grid-column: 3 / span 8; }
|
||
figure.twothird.offset4 { grid-column: 5 / span 8; }
|
||
figure.threequarter { grid-column: span 9; }
|
||
figure.threequarter.offset2 { grid-column: 3 / span 9; }
|
||
figure.full { grid-column: 1 / span 12; }
|
||
|
||
/* alignement vertical des figure */
|
||
figure.top { align-self: start;}
|
||
figure.center { align-self: center;}
|
||
figure.bottom { align-self: end;}
|
||
|
||
|
||
/* ------- TABLE OF CONTENTS --------- */
|
||
|
||
.toc{
|
||
break-before: right;
|
||
}
|
||
|
||
/* counters */
|
||
|
||
#list-toc-generated{
|
||
counter-reset: counterTocLevel1;
|
||
list-style: none;
|
||
overflow-x: visible !important;
|
||
}
|
||
|
||
#list-toc-generated .toc-element-level-1{
|
||
counter-increment: counterTocLevel1;
|
||
counter-reset: counterTocLevel2;
|
||
}
|
||
|
||
#list-toc-generated a{
|
||
text-decoration: none;
|
||
}
|
||
|
||
#list-toc-generated .toc-element a::after{
|
||
content: target-counter(attr(href), page);
|
||
position: absolute;
|
||
right:0;
|
||
font-size: 13pt;
|
||
text-align: right;
|
||
}
|
||
|
||
#list-toc-generated .toc-element-level-2 a::after{
|
||
font-size: 10pt;
|
||
}
|
||
|
||
#list-toc-generated .toc-element-level-1{
|
||
font-size: 13pt;
|
||
}
|
||
|
||
#list-toc-generated .toc-element-level-2{
|
||
font-weight: bold;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
#list-toc-generated li span{
|
||
display: block;
|
||
}
|
||
|
||
/* -------- FOOTNOTES ---------- */
|
||
/*span.footnote {
|
||
float: footnote;
|
||
}
|
||
|
||
.footnote::footnote-call {
|
||
content: counter(footnote, decimal) " ";
|
||
}*/
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|