decor-6-expe/maquette-tests/assets/css/running-page.css

.running-page_container{
    --w-container: calc(var(--pagedjs-width) - var(--pagedjs-bleed-left)*2);
    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: bottom;
      padding-bottom: var(--running-bottom);
      width: 100%;


      position: absolute; 
      left: 0px;

        bottom: 0px;
      width: var( --w-container);
      overflow: hidden;
      /* background-color: red; */

}


.running-page{
    width: calc(var(--w-container)*2);
    padding-left: var(--running-left);
    padding-right: 6px;
    display: flex;
}

.running-page .symbols{
    flex-shrink: 0;
    /* background-color: white; */
      z-index: 20;

}
.running-page .dots{
    position: absolute;
    top: -5px;
    left: var(--running-left);
    z-index: 10;
}

.pagedjs_right_page .running-page_container .running-page{
    position: relative;
     /* left: calc(var( --w-container)*-1 + var(--pagedjs-margin-left)*-1 + 2px); */
          left: calc(var( --w-container)*-1 + 10px);
}


[data-chapter="entretiens"]{
    color: red;
}



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


@page chapter:first {

  @top-left-corner {
    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) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol);
  }

  @top-left {
    content: none;
  }

  @top-center {
    content: none;
  }

  @top-right {
    content: none;
  }

}



[data-chapter="essai"]{
    --sign-color: var(--blue);
   page: essai;
}


@page essai{
     --sign-color: var(--blue);
}

[data-chapter="entretien"]{
   --sign-color: var(--red);
   page: entretien;
}

@page entretien{
     --sign-color: var(--red);
}

[data-chapter="portfolio"]{
   --sign-color: var(--green);
   page: portfolio;
}

@page portfolio{
     --sign-color: var(--green);
}


@page essai:first {

  @top-left-corner {
    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) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol);
  }

  @top-left {
    content: none;
  }

  @top-center {
    content: none;
  }

  @top-right {
    content: none;
  }

}



@page entretien:first {

  @top-left-corner {
    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) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol);
  }

  @top-left {
    content: none;
  }

  @top-center {
    content: none;
  }

  @top-right {
    content: none;
  }

}



@page portfolio:first {

  @top-left-corner {
    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) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol) var(--symbol);
  }

  @top-left {
    content: none;
  }

  @top-center {
    content: none;
  }

  @top-right {
    content: none;
  }

}



/* TEMP */ 

@page entretien{
     --sign-color: var(--red);
}