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

@media print {

  @page {
    size: 165mm 240mm;
    margin-top: 22mm;
    margin-bottom: 24mm;
    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);
      font-family: var(--sign-family);
      line-height: var(--sign-baseline);
      vertical-align: top;
      padding-top: var(--running-top);
      text-align: left;
      padding-left: 19px;

    }


    @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);
      font-family: var(--sign-family);
    }



    @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);
      font-family: var(--sign-family);

    }


    @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);
      font-family: var(--sign-family);
      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);
      font-family: var(--sign-family);
      line-height: var(--sign-baseline);
      vertical-align: top;
      padding-top: var(--running-top);
      text-align: left;
    padding-left: 19px;

    }

    @top-left {
      content: element(title);
      vertical-align: top;
      padding-top: var(--running-top);
      white-space: nowrap;
      padding-right: 1.5ch;
      font-family: var(--sign-family);
      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);
      font-family: var(--sign-family);
      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);
  font-family: var(--sign-family);
  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;
}