Download raw (7.4 KB)

/* CSS for Paged.js interface – v0.2 */

/*
DONE:
* fixed spread mode so it's exactly aligned to pagewidth*2 minus the bleed
* rules always on top of everything (for the moment same z-index than the page)
* preview mode that hides all the rules

TODO:
* show margin boxes only when superior to 0 otherwise it overlays the stroke of pagebox!!
* centered zoom (not top left ?)
* position fixed for interface directly in css (use iframe!)
* correction of bug of 1mm added to body.spread .pagedjs_pages
* margin-bottom on last page does not work
 */

/* Change the look */
:root {
    --color-background: lightgrey;
    --color-pageSheet: #cfcfcf;
    --color-pageBox: lightsalmon;
    --color-paper: white;
    --color-marginBox: skyblue;

    /* --pagedjs-crop-color: black;
    --pagedjs-crop-shadow: white;
    --pagedjs-crop-stroke: 1px; */

    --interface-height: 40px;
    --interface-outline: 1px;
    --page-space: 5cm;
}

/* To define how the book look on the screen: */
@media screen {
    body {
        background-color: var(--color-background);
        margin: 0;
    }

    /* ___ display (single or spread) ___*/
    .pagedjs_pages {
      display: flex;
      /* width: calc(var(--pagedjs-width) + 2 * var(--page-space)); */
      flex: 0;
      flex-wrap: nowrap;
      /* margin: 0 auto; */
      position: relative;
      top: var(--interface-height);
    }

    .pagedjs_page {
      margin: 0;
      flex-shrink: 0;
      flex-grow: 0;
      margin-top: var(--page-space);
      margin-left: var(--page-space);
      margin-right: var(--page-space);
      background-color: var(--color-paper);
      position: relative;
    }

    .pagedjs_page:last-of-type {
      margin-bottom: var(--page-space);
    }

    /* spread mode */
    body.spread .pagedjs_pages{
      /* width: calc(var(--pagedjs-width) * 2 - var(--pagedjs-bleed-right) - var(--pagedjs-bleed-left) + 2 * var(--page-space) + 1mm); */
      /* width: calc(var(--pagedjs-width) * 2 + 5 * var(--page-space)); */
    }
    body.spread .pagedjs_page{
      /* width: calc(var(--pagedjs-width) * 2 - var(--pagedjs-bleed-right) - var(--pagedjs-bleed-left) + 2 * var(--page-space) + 1mm); */
      margin-right: var(--page-space);
    }
    /* body.spread .pagedjs_first_page {
      margin-left: calc(var(--pagedjs-width) - var(--pagedjs-bleed-left) - var(--pagedjs-bleed-right) + var(--page-space));
    } */
    /* body.spread .pagedjs_left_page{
      z-index: 2;
      width: calc(var(--pagedjs-bleed-left) + var(--pagedjs-pagebox-width));
      margin-right: 0;
    }
    body.spread .pagedjs_right_page:not(.pagedjs_first_page){
      z-index: 1;
      width: calc(var(--pagedjs-pagebox-width) + var(--pagedjs-bleed-right));
      margin-left: 0;
    }
    body.spread .pagedjs_right_page:not(.pagedjs_first_page) > .pagedjs_sheet{
      position: absolute; top: 0; right: 0;
    }
    body.spread .pagedjs_left_page .pagedjs_bleed-right{
      display: none;
    } */

    /* ___ show the rules ___ */

    /* only draw large boxes when not in preview */
    .pagedjs_page, .pagedjs_pagebox{
      position: relative;
    }
    body.preview .pagedjs_pagebox{
      overflow: hidden;
    }
    body.preview .pagedjs_pagebox::after{
      content: ""; position: absolute; inset: 0;
      z-index: 99999999; pointer-events: none;
      outline: var(--interface-outline) solid var(--color-pageSheet);
    }
    body:not(.preview) .pagedjs_page::after{
      content: ""; position: absolute; inset: 0;
      z-index: 99999999; pointer-events: none;
      outline: var(--interface-outline) solid var(--color-pageSheet);
    }
    body:not(.preview) .pagedjs_pagebox::after{
      content: ""; position: absolute; inset: 0;
      z-index: 99999999; pointer-events: none;
      outline: calc(var(--interface-outline) * 1) solid var(--color-pageBox);
      outline-offset: calc(var(--interface-outline) * -1/2);
    }
    .pagedjs_marks-crop {
      /* correcting the z-index so the interface bar can be on top */
    	z-index: 999999999;
    }

    /* hide crop marks */
    body.preview :is(
      .pagedjs_bleed-top,
      .pagedjs_bleed-left,
      .pagedjs_bleed-right,
      .pagedjs_bleed-bottom
    ) > * {
      border: none !important;
    }

    /* only show margins boxes when not in preview */
    body:not(.preview) :is(
    .pagedjs_margin-top-left-corner-holder,
    .pagedjs_margin-top,
    .pagedjs_margin-top-left,
    .pagedjs_margin-top-center,
    .pagedjs_margin-top-right,
    .pagedjs_margin-top-right-corner-holder,
    .pagedjs_margin-bottom-left-corner-holder,
    .pagedjs_margin-bottom,
    .pagedjs_margin-bottom-left,
    .pagedjs_margin-bottom-center,
    .pagedjs_margin-bottom-right,
    .pagedjs_margin-bottom-right-corner-holder,
    .pagedjs_margin-right,
    .pagedjs_margin-right-top,
    .pagedjs_margin-right-middle,
    .pagedjs_margin-right-bottom,
    .pagedjs_margin-left,
    .pagedjs_margin-left-top,
    .pagedjs_margin-left-middle,
    .pagedjs_margin-left-bottom ){
        /* outline: var(--interface-outline) solid var(--color-marginBox);
        outline-offset: calc(var(--interface-outline) / -2); */
    }

    /* hide the bleed zone and crop marks */
    body.preview .pagedjs_pages{
      /* width: calc(var(--pagedjs-width) - var(--pagedjs-bleed-left) - var(--pagedjs-bleed-right) + 2 * var(--page-space)); */
    }
    body.preview .pagedjs_page {
      width: var(--pagedjs-pagebox-width)!important;
      height: var(--pagedjs-pagebox-height)!important;
    }
    body.preview .pagedjs_page .pagedjs_sheet{
      position: absolute;
      top: calc(var(--pagedjs-bleed-top) * -1)!important;
      left: calc(var(--pagedjs-bleed-left) * -1)!important;
      right: 0 !important;
    }
    body.preview :is(.pagedjs_marks-crop, .pagedjs_marks-middle){
      /* hide crop marks */
      display: none;
    }

    /* if both preview and spread */
    body.preview.spread .pagedjs_pages{
      /* width: calc(calc(var(--pagedjs-width) - var(--pagedjs-bleed-left) - var(--pagedjs-bleed-right)) * 2 + 2 * var(--page-space)); */
    }
    /* body.preview.spread .pagedjs_first_page {
      margin-left: calc(var(--pagedjs-width) - var(--pagedjs-bleed-left) - var(--pagedjs-bleed-right) + var(--page-space));
    } */

    /* uncomment this par to see the baseline : -------------------------------------------*/
    /* .pagedjs_pagebox {
        --pagedjs-baseline: 22px;
        --pagedjs-baseline-position: 5px;
        --pagedjs-baseline-color: cyan;
        background: linear-gradient(transparent 0%, transparent calc(var(--pagedjs-baseline) - 1px), var(--pagedjs-baseline-color) calc(var(--pagedjs-baseline) - 1px), var(--pagedjs-baseline-color) var(--pagedjs-baseline)), transparent;
        background-size: 100% var(--pagedjs-baseline);
        background-repeat: repeat-y;
        background-position-y: var(--pagedjs-baseline-position);
    }  */

}

/* added by Dorian */
/* pagedjs seems to remove the "unused css" and because the interface is
added through js at the end it does not work */

body > .interface{
  display: none;
}
@media screen {
  body > .interface {
    font-size: 14px; /* fixed font-size so it doesn't interfere with user font-sizes */
    background: gainsboro;
    font-family: sans-serif;
    display: flex;
    gap: 1em;
    padding: 0 0.5em;
    width: 100%;

    height: var(--interface-height);
    align-items: stretch;

    /* pagedjs crop marks have index of 9999999999, so we put it just above */
    z-index: 1000000000;
  }
  body > .interface > .control {
    display: flex;
    align-items: center;
  }
}