92 lines
2.2 KiB
CSS
92 lines
2.2 KiB
CSS
/**
|
|
* Defines and loads the rules that set the geometry of the page and its
|
|
* representation on screen. This is the core of html2print.
|
|
*
|
|
* Customize the variables to your needs.
|
|
*/
|
|
|
|
:root {
|
|
/* the geometry of the page */
|
|
--page-width: 148.5mm;
|
|
--page-height: 210mm;
|
|
}
|
|
|
|
|
|
/**
|
|
* DEFINITION OF THE PAPER SHEET
|
|
*/
|
|
|
|
/**
|
|
* The @page CSS at-rule is used to define some properties of printed
|
|
* documents. We make it the size of the elements with the .page class and
|
|
* remove any margins.
|
|
*/
|
|
@page {
|
|
/*
|
|
* 1. we would have liked to use
|
|
* `size: var(--page-width) var(--page-height);`
|
|
* but the page it does not work with css variables it seems.
|
|
* 2. the 1pt addition is to fix a rounding bug that makes the content
|
|
* overflow
|
|
*/
|
|
margin: 0;
|
|
size: 148.5mm calc(210mm + 1pt); /* [1] [2] */
|
|
/*Format cible ^ changer cette valeur et la variable pour changer de format*/
|
|
}
|
|
|
|
|
|
/**
|
|
* CANVAS
|
|
*/
|
|
|
|
@media all {
|
|
/* 1. allows for absolutely positioned elements as settings the position */
|
|
/* property to relative as the side effect of making this elements */
|
|
/* top-left corner the reference point */
|
|
/* 2. defines the page size */
|
|
body { margin: 0; }
|
|
|
|
.page {
|
|
position: relative; /* [1] */
|
|
|
|
width: var(--page-width); /* [2] */
|
|
height: var(--page-height); /* [2] */
|
|
}
|
|
|
|
/*ICI les styles du poster*/
|
|
|
|
|
|
|
|
}
|
|
/*Gère le rendu visuel de HTML2print*/
|
|
@media screen {
|
|
/* 1. defines the background color of the workspace */
|
|
/* 2. makes the page centered on screen */
|
|
body { background-color: #f0f0f0; }
|
|
|
|
#pages {
|
|
width: var(--page-width); /* [1] */
|
|
height: var(--page-height); /* [1] */
|
|
margin-right: auto; /* [2] */
|
|
margin-left: auto; /* [2] */
|
|
}
|
|
|
|
.page {
|
|
margin-top: 1em;
|
|
margin-bottom: 1em;
|
|
|
|
background-color: white;
|
|
}
|
|
}
|
|
|
|
@media print {
|
|
/* 1. allows for background colors printing */
|
|
html { width: var(--page-width); }
|
|
|
|
body {
|
|
background-color: transparent; /* [1] */
|
|
-webkit-print-color-adjust: exact; /* [1] */
|
|
print-color-adjust: exact; /* [1] */
|
|
}
|
|
}
|