12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091 |
- /**
- * 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] */
- }
- }
|