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

@media print {

  @page {
    size: 165mm 240mm;
    margin-top: 25mm;
    margin-bottom: 14mm;
    bleed: 6mm;
    marks: crop;
    --symbol-top: 1px;
  }

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

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

    @top-center{
      content: element(author);
      vertical-align: top;
      padding-top: calc(8mm - var(--symbol-top));
      text-align: left;
      white-space: nowrap;
      padding-right: 1.5ch;
      padding-left: 0.5ch;
      font-size: var(--fs-subtitle);
       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) ;
      font-size: var(--sign-size);
      color: var(--sign-color);
      letter-spacing: var(--sign-spacing);
      line-height: var(--sign-baseline);
            vertical-align: top;
      padding-top: 8mm;
      width: 100%;
 
    }



    @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: 8mm;
      text-align: left;
      margin-left: 3mm;

    }


  }

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

    @top-left {
      content: element(type);
      width: 0px;
      vertical-align: top;
      padding-top: 8mm;
    }

    @top-right {
      content: element(title);
      vertical-align: top;
      padding-top: calc(8mm + 20px);
      /* padding-right: 11mm; */
      text-align: left;
      position: relative;
      left: -11mm;
      width: 100%;
    }

    @top-right-corner {
      content: counter(page);
      width: 40px;
      position: relative;
      left: -40px;
      text-align: right;
      vertical-align: top;
      padding-top: 8mm;
    }

  }



  .chapter {
    break-before: right;
    page: chapter;
  }


  @page chapter:first {
    @top-right {
      content: none;
    }

  }

  @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_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);
}



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