Download raw (9.4 KB)

/* __________________________________ LOCAL SETTINGS __________________________________ */


@page-height: 210mm;
@page-width: 148.5mm;
@spread: @page-width*2;

@crop-length: 7mm;
@crop-offset: 5mm;
@crop: @crop-length + @crop-offset;    // Based on Scribus cropmarks with 5mm of bleed -> 7mm of marks + 5mm of offset
@page-width-crop: @page-width + (@crop*2); 
@page-height-crop: @page-height + (@crop*2);

@page-margin-inside: 20mm;
@page-margin-outside: 10mm;
@page-margin-top: 10mm;
@page-margin-bottom: 15mm;

@header-height: 0mm;
@header-text: "";
@footer-height: 5mm;
@footer-text: counter(page-counter);


/* __________________________________ DEBUG __________________________________ */
html.debug {
    /*outline: 1pt solid purple;*/

    body {
        /*outline: 1pt solid pink;*/
    }
    div.preview-page {
        outline: 1pt solid blue;
        border: 1px solid red;
    }
    
    section.header {
        outline: 1pt solid pink;
    }

    section.page {
        outline: 1pt solid purple;
    }

    section.footer {
        outline: 1pt solid pink;
    }

    div#content {
        outline: 1pt solid red;
    }
    .region-break {
        border-top: 1pt dashed blue;
    }
    .moveable {
        outline: 1pt solid yellow;
    }
}

/* __________________________________ INTERFACE CLASSES  __________________________________ */
@media print {
    .button,
    #interface {
        display: none;
    }
}
.button {
    z-index: 1000;
    background-color: black;
    font-family:sans-serif; 
    text-transform: uppercase;
    font-size: 9pt !important;
    letter-spacing: 1pt;
    color: white;
    margin: 0;
    padding: 5pt 7pt;
    cursor: pointer;
    border: 0;

    &:hover {
        background-color: white;
        color: black;
        outline: 1pt solid black;
    }
}
.button-active {
    background-color: white;
    color: black;
    outline: 1pt solid black;
}

.lo-res {
    outline: 10px solid red;
}

div#interface {
    font-family:sans-serif; 
    text-transform: uppercase;
    font-size: 10pt !important;
    line-height: 14pt;
    letter-spacing: 1pt;
    position: fixed;
    bottom: 10pt;
    right: 10pt;

    a {
        text-decoration: none;
        position: static;
    }

    div#toc {
        display: inline-block;

        ul#toc-pages {
            padding: 0.5em 0;
            display: none;
            background-color: black;
            position: absolute;
            right: 0;
            bottom: 2em;
            height: 200pt;
            width: 80pt;
            overflow: auto;

            a {
                padding: 0 1em;
                color: white;

                &:hover {
                    background-color: white;
                    color: black;
                }
            }
        }
        button {
            width: 80pt;
        }
    }
}

/* __________________________________ ABSOLUTE POSITIONNED OBJECTS __________________________________ */
/* Adding .moveable class to an object makes it absolutely positionned on the page.
 * You can then move it around and resize it.
 * Copy its properties (i.e. "top: 22pt; left: 101pt; width: 212pt; height: 244pt;).
 * Paste those properties back to the object's "style" attribute.
 */
.moveable {
    position: absolute;
    float: left;
    overflow: hidden;

    &:hover {
        z-index: 1000;
    }
}
.moveable .properties {
    display: none;
}
.moveable:hover .properties {
    display: block;
}

/* POPELT STYLES */
.noscroll {overflow:hidden;}
.pop-screen {
    background:#000; 
    opacity:0.9; 
    position:fixed; 
    left:0; top:0; right:0; bottom:0; 
    z-index:9994; 
    display:none;
}
.pop-wrap {position:fixed; left:0;right:0;top:0;bottom:0; z-index:9995; overflow:auto; display:none; }
.pop-container {margin:40pt auto; display:block; width: 50% !important; background:white; position:relative;}
.pop-block {
    position:relative;
    padding: 1em;
}
.pop-content {padding:20pt; color:#333; word-wrap:break-word; overflow:auto;
        outline: 2pt solid black;
        margin: 1em;
        font-family: monospace;
        font-size: 2em;
}
.pop-content h1:first-child, .pop-content h2:first-child, .pop-content p:first-child {margin-top:0;}
.pop-action-block {background:#eee; padding:15pt 20pt; border-top:1pt solid #ccc; text-align:right;}
.pop-title {margin:0;  padding:20pt; padding-bottom:0; font-size:26pt; font-weight:bold; line-height:28pt; margin-bottom:0; font-family: sans-serif;}
.pop-btn-close {
    position:absolute; 
    right:0pt; top:0pt; 
    width:30pt; height:30pt; 
    font-family:sans-serif; 
    font-size:28pt; 
    line-height:31pt; 
    text-align:center; 
    cursor:pointer; 

    &:hover {
        color: red;
    }
}

/* __________________________________ IMAGES __________________________________ */
/* Use those classes for images to fit width or height of parent elements or both. */

img.fit-height {
    height: 100%;
}
img.fit-width {
    width: 100%;
}

/* __________________________________ PAGE SETTINGS  __________________________________ */
* {
    -webkit-print-color-adjust: exact;  /* Allows printing of background colors */
    box-sizing: border-box;
    text-rendering: optimizeLegibility;
    -webkit-font-feature-settings: "liga", "dlig", "clig", "kern";
}

@page {
    //size: @page-width @page-height; // format coupé
    size: @page-width-crop @page-height-crop;  // format avec cropmarks
    margin: 0;
}

html.spread {
    width: @page-width-crop * 2;

    .preview-page {
        outline: 1px solid black;
        float: left;

        &:first-child {
            margin-left: @page-width !important;
        }
        &:nth-child(odd) {
            margin-left: -@crop * 2;
            left: 1px;
        }
    }
}


html {
    width: @page-width-crop;

}
html.spread {
    width: @page-width-crop * 2;
    .page {
        float: left;

        &:first-child {
            margin-left: @page-width + @crop !important;
        }
        &:nth-child(odd) {
            margin-left: -@crop;
        }
    }
}
body {
    position: absolute;
}

/* __________________________________ HEADER __________________________________ */
section.header {
    position: absolute;
    top: @crop;
    margin: 0 @crop;
    margin-top: @page-margin-top;
    width: @page-width;
    height: @header-height;
    text-align: left;

    &:after {
        content: @header-text;
    }
}
.page {
    height: @page-height - @header-height - @footer-height;
    width: @page-width;
    margin: @crop;
    margin-bottom: @page-margin-bottom;
    padding-top: @page-margin-top + @header-height;
    padding-bottom: @page-margin-bottom;
    -webkit-flow-from: myFlow;
    position: absolute;
}
#container {
    -webkit-flow-into: myFlow;
}
/* __________________________________ FOOTER __________________________________ */
section.footer {
    position: absolute;
    bottom: @crop;
    margin: 0 @crop;
    margin-top: @footer-height;
    margin-bottom: @page-margin-bottom;
    width: @page-width;
    height: @footer-height;
    text-align: center;

    &:after {
        content: @footer-text;
    }
}

/* __________________________________ PRINT MARKS  __________________________________ */
div#print-marks {
    position: absolute;
    top: 0;
    z-index: -1000;
}
div.preview-page {
    width: @page-width-crop; 
    height: @page-height-crop;
    position: relative;
    z-index: -10;
    outline-offset: -@crop;
    counter-increment: page-counter;
    page-break-inside: avoid;
    page-break-after: always;
    overflow: hidden;

    &:nth-child(odd) .header {
        text-align: right;
    }

    &:nth-child(odd) .header,
    &:nth-child(odd) .page,
    &:nth-child(odd) .footer {
        padding-left: @page-margin-inside;
        padding-right: @page-margin-outside;
    }
    &:nth-child(even) .header,
    &:nth-child(even) .page,
    &:nth-child(even) .footer {
        padding-left: @page-margin-outside;
        padding-right: @page-margin-inside;
    }
}
 
/* __________________________________ CROP MARKS  __________________________________ */
div.crop-top-left,
div.crop-top-right,
div.crop-bottom-right,
div.crop-bottom-left {
    height: @crop;
    width:  @crop;
    position: absolute;
}
 
div.crop-top-left {
    left: 0;
    top: 0;
}
div.crop-top-right {
    right: 0;
    top: 0;
}
div.crop-bottom-right {
    right: 0;
    bottom: 0;
}
div.crop-bottom-left {
    left: 0;
    bottom: 0;
}
div.crop-top,
div.crop-right,
div.crop-bottom,
div.crop-left {
    width: @crop-length;
    height: @crop-length;
    position: absolute;
}
div.crop-top {
    border-top: 1pt solid black;
}
div.crop-right {
    border-right: 1pt solid black;
}
div.crop-bottom {
    border-bottom: 1pt solid black;
}
div.crop-left {
    border-left: 1pt solid black;
}
 

/* __________________________________ CONTENT __________________________________ */
div#content {
}

h1, h2, h3, h4, h5, h6 {
    /* Avoids headings to be cut or to be orphans. 
     * But it doesn't seem to work 
     * if the element after has a page-break-inside avoid. It tries its best! */
    -webkit-region-break-inside: avoid;
    -webkit-region-break-after: avoid;
}
.region-break {
    /* Apply this class to an element to put it on a new region.
     * Hint: 
     * You can also use an empty <div class="page-break"></div> 
     * if you want to put manual page breaks without attaching it to an HTML element
     */
    -webkit-region-break-before: always;
}

/* AN EXAMPLE TO AVOID PAGE BREAK INSIDE, 
 * HERE NO PARAGRAPH WILL BE CUT, 
 * BUT YOU MIGHT WANT TO DEACTIVATE THIS */
p {
    /*-webkit-region-break-inside: avoid;*/
}