html2print~20170626-103724.css 2.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
  1. /**
  2. * Defines and loads the rules that set the geometry of the page and its
  3. * representation on screen. This is the core of html2print.
  4. *
  5. * Customize the variables to your needs.
  6. */
  7. :root {
  8. /* the geometry of the page */
  9. --page-width: 148.5mm;
  10. --page-height: 210mm;
  11. }
  12. /**
  13. * DEFINITION OF THE PAPER SHEET
  14. */
  15. /**
  16. * The @page CSS at-rule is used to define some properties of printed
  17. * documents. We make it the size of the elements with the .page class and
  18. * remove any margins.
  19. */
  20. @page {
  21. /*
  22. * 1. we would have liked to use
  23. * `size: var(--page-width) var(--page-height);`
  24. * but the page it does not work with css variables it seems.
  25. * 2. the 1pt addition is to fix a rounding bug that makes the content
  26. * overflow
  27. */
  28. margin: 0;
  29. size: 148.5mm calc(210mm + 1pt); /* [1] [2] */
  30. /*Format cible ^ changer cette valeur et la variable pour changer de format*/
  31. }
  32. /**
  33. * CANVAS
  34. */
  35. @media all {
  36. /* 1. allows for absolutely positioned elements as settings the position */
  37. /* property to relative as the side effect of making this elements */
  38. /* top-left corner the reference point */
  39. /* 2. defines the page size */
  40. body { margin: 0; }
  41. .page {
  42. position: relative; /* [1] */
  43. width: var(--page-width); /* [2] */
  44. height: var(--page-height); /* [2] */
  45. }
  46. /*ICI les styles du poster*/
  47. }
  48. /*Gère le rendu visuel de HTML2print*/
  49. @media screen {
  50. /* 1. defines the background color of the workspace */
  51. /* 2. makes the page centered on screen */
  52. body { background-color: #f0f0f0; }
  53. #pages {
  54. width: var(--page-width); /* [1] */
  55. height: var(--page-height); /* [1] */
  56. margin-right: auto; /* [2] */
  57. margin-left: auto; /* [2] */
  58. }
  59. .page {
  60. margin-top: 1em;
  61. margin-bottom: 1em;
  62. background-color: white;
  63. }
  64. }
  65. @media print {
  66. /* 1. allows for background colors printing */
  67. html { width: var(--page-width); }
  68. body {
  69. background-color: transparent; /* [1] */
  70. -webkit-print-color-adjust: exact; /* [1] */
  71. print-color-adjust: exact; /* [1] */
  72. }
  73. }