decor-6-site/assets/css/print-template.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;
  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;
}

.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 --------- */
/* 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;
  text-align: right;
}

#list-toc-generated li span{
  display: block;
}