Download raw (9.3 KB)
/* __________________________________ LOCAL SETTINGS __________________________________ */
@page-width: 148mm;
@page-height: 105mm;
@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: 5mm;
@page-margin-outside: 5mm;
@page-margin-top: 5mm;
@page-margin-bottom: 5mm;
@header-height: 0mm;
@header-text: "";
@footer-height: 0mm;
@footer-text: "";
/* __________________________________ 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 {
.ui-resizable-handle,
.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;
}
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 + 1mm; // format avec cropmarks
margin: 0;
}
html {
width: @page-width-crop;
}
body {
position: absolute;
}
/* __________________________________ HEADER __________________________________ */
section.header {
position: absolute;
top: 10mm;
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;
top: 0;
left: 0;
overflow: hidden;
page-break-inside: avoid !important;
page-break-after: always !important;
page-break-before: always !important;
}
section#container {
-webkit-flow-into: myFlow;
}
/* __________________________________ FOOTER __________________________________ */
section.footer {
position: absolute;
bottom: 10mm;
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;
width: 100%;
}
@media print {
.page, .preview-page {
page-break-before: always !important;
page-break-inside: avoid !important;
page-break-after: always !important;
position: relative;
}
}
div.preview-page {
width: @page-width-crop;
height: @page-height-crop;
position: relative;
z-index: -10;
outline-offset: -@crop 282px;
counter-increment: page-counter;
page-break-before: always !important;
page-break-inside: avoid !important;
page-break-after: always !important;
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: 5px;
}
div.crop-bottom-left {
left: 0;
bottom: 5px;
}
div.crop-top,
div.crop-right,
div.crop-bottom,
div.crop-left {
width: @crop-length;
height: @crop-length;
position: absolute;
border-color: black !important;
}
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;*/
}