decor-6-expe/maquette-tests/assets/css/03_layout.css

@media print {

  @page {
    size: 165mm 240mm;
    margin-top: 22mm;
    margin-bottom: 22mm;
    bleed: 6mm;
    marks: crop;
    --symbol-top: 1px;
    --running-top: 8mm;
     --running-bottom: 10mm;
  }

  @page:left {
    margin-left: 18mm;
    margin-right: 26mm;

    @top-left-corner {
      content: var(--symbol) var(--symbol) var(--symbol);
      font-size: var(--sign-size);
     color: var(--sign-color);
     letter-spacing: var(--sign-spacing);
     line-height: var(--sign-baseline);
      vertical-align: top;
      padding-top: var(--running-top);
      text-align: left;
      margin-left: 3mm;

    }


    @top-left {
      content: element(decor);
      vertical-align: top;
      padding-top: calc(var(--running-top) - var(--symbol-top));
      width: calc(var(--unit)*2);
      font-size: var(--font-size);
      color: var(--sign-color);
    }

 

    @top-center{
      content: element(author);
      vertical-align: top;
      padding-top: calc(var(--running-top) - var(--symbol-top));
      text-align: left;
      white-space: nowrap;
      padding-right: 1.5ch;
      padding-left: 0.5ch;
        font-size: var(--font-size);
       color: var(--sign-color);

    }


    @top-right {
     content: var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) ;
      font-size: var(--sign-size);
      color: var(--sign-color);
      letter-spacing: var(--sign-spacing);
      line-height: var(--sign-baseline);
      vertical-align: top;
      padding-top: var(--running-top);
      width: 100%;
      white-space: nowrap;
 
    }

    @bottom-left {
        content: counter(page);
      vertical-align: top;
      padding-top: var(--running-bottom);
        white-space: nowrap;
        font-size: var(--font-size);
       color: var(--sign-color);
       z-index: 100;

    }



    


  }

  @page:right {
       margin-left: 26mm;
    margin-right: 18mm;

    @top-left-corner {
      content: var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol);
      font-size: var(--sign-size);
     color: var(--sign-color);
     letter-spacing: var(--sign-spacing);
     line-height: var(--sign-baseline);
      vertical-align: top;
      padding-top: var(--running-top);
      text-align: left;
      margin-left: 3mm;

    }

    @top-left {
        content: element(title);
      vertical-align: top;
      padding-top: var(--running-top);
        white-space: nowrap;
      padding-right: 1.5ch;
        font-size: var(--font-size);
       color: var(--sign-color);
    }

    @top-right {
     content: var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) ;
      font-size: var(--sign-size);
      color: var(--sign-color);
      letter-spacing: var(--sign-spacing);
      line-height: var(--sign-baseline);
      vertical-align: top;
      padding-top: var(--running-top);
      width: 100%;
      white-space: nowrap;
    }


        @bottom-right {
        content: counter(page);
      vertical-align: top;
      padding-top: var(--running-bottom);
      text-align: right;
        white-space: nowrap;
        font-size: var(--font-size);
       color: var(--sign-color);
       z-index: 100;

    }



  }





  @page:blank {
    @top-left {
      content: none;
    }
    @top-left-corner {
      content: none;
    }
      @top-right {
      content: none;
    }
        @top-center {
      content: none;
    }

    @bottom-center {
      content: none;
    }


  }
}



.nav-title {
  position: running(title);
}

.nav-author {
  position: running(author);
}

.nav-type {
  position: running(type);
}

.nav-decor {
  position: running(decor);
}

.pagedjs_area{
    position: relative;
}


.pagedjs_margin-top-left .pagedjs_margin-content .nav-decor::after{
      content: var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) ;
      font-size: var(--sign-size);
      color: var(--sign-color);
      letter-spacing: var(--sign-spacing);
      line-height: var(--sign-baseline);
      padding-left: 1ch;
      width: calc(var(--unit) + var(--sub-unit));
      position: relative;
      top: var(--symbol-top);
}

 .pagedjs_left_page   .pagedjs_margin-top{
      width: calc(100% + var(--pagedjs-margin-right));
      overflow: hidden;
    }


/* DELETE BEFORE PRINT */
/* .pagedjs_margin-top-right-corner-holder{
  background-color: white;
  width: 40px;
  position: absolute;
  right: -41px;
} */



/* DELETE BEFORE PRINT */




.pagedjs_left_page .pagedjs_margin-bottom-left .pagedjs_margin-content::after{
  background-color: white;
  display: inline-block;
  padding-left: 10px;
  position: relative;
  left: -10px;
  padding-right: 1.5ch;
}



.pagedjs_right_page .pagedjs_margin-bottom-right .pagedjs_margin-content::after{
  background-color: white;
  display: inline-block;
  padding-right: 10px;
  position: relative;
  left: 10px;
  padding-left: 10px;
  padding-right: 6px;
}