mep_carnet.css 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330
  1. :root {
  2. --cols: 8;
  3. --rows: 8;
  4. --guts: 4mm;
  5. --beige: #fbf2e7;
  6. --ocre: #d98a29;
  7. }
  8. @page {
  9. size: 165mm 230mm;
  10. margin-top: 16mm;
  11. margin-bottom: 16mm;
  12. bleed: 6mm;
  13. color: black;
  14. marks: crop;
  15. }
  16. @page:left {
  17. margin-left: 16mm;
  18. margin-right: 8mm;
  19. @left-middle {
  20. content: counter(page);
  21. display: flex;
  22. justify-content: center;
  23. align-items: center;
  24. font-family: 'Ortica';
  25. font-weight: bold;
  26. font-size: 8pt;
  27. color: var(--ocre);
  28. height: 30mm;
  29. }
  30. @left-top {
  31. content: 'Titre sous-section';
  32. white-space: nowrap;
  33. font-family: 'Ortica';
  34. font-weight: bold;
  35. font-size: 8pt;
  36. display: flex;
  37. flex-direction: column;
  38. align-items: center;
  39. justify-content: flex-start;
  40. text-align: right;
  41. }
  42. @left-bottom {
  43. content: 'Partie générale';
  44. white-space: nowrap;
  45. font-family: 'Ortica';
  46. font-weight: bold;
  47. font-size: 8pt;
  48. display: flex;
  49. flex-direction: column;
  50. align-items: center;
  51. justify-content: flex-end;
  52. }
  53. }
  54. .pagedjs_margin-left-top div, .pagedjs_margin-left-bottom div {
  55. display: block;
  56. min-width: max-content;
  57. transform: rotate(-90deg);
  58. }
  59. @page:right {
  60. margin-left: 8mm;
  61. margin-right: 16mm;
  62. }
  63. body {
  64. font-family: 'Public';
  65. }
  66. h2 {
  67. color: blue;
  68. }
  69. h3 {
  70. color: red;
  71. }
  72. .breakbefore {
  73. break-before: page;
  74. }
  75. .breakafter {
  76. break-after: page;
  77. }
  78. .moment {
  79. padding-left: calc(var(--pagedjs-pagebox-width) / var(--cols));
  80. display: block;
  81. font-size: 11pt;
  82. font-weight: bold;
  83. line-height: 1.1; /* LA IL FAUT AJUSTER CF TEMPS 14 */
  84. }
  85. .moment:first-of-type {
  86. break-before: left;
  87. }
  88. .moment .first-letter {
  89. font-size: 18pt;
  90. }
  91. .temps {
  92. padding-left: calc(var(--pagedjs-pagebox-width) / var(--cols));
  93. font-size: 9pt;
  94. margin-top: -3pt;
  95. margin-bottom: 8pt;
  96. font-weight: 500;
  97. }
  98. .temps:before {
  99. content: "> ";
  100. }
  101. .labeur {
  102. padding-left: calc(var(--pagedjs-pagebox-width) / var(--cols));
  103. line-height: 12pt;
  104. font-size: 9pt;
  105. text-align: justify;
  106. hyphens: auto;
  107. }
  108. .labeur p:before {
  109. content: '+ ';
  110. font-weight: bold;
  111. }
  112. .labeur ul {
  113. list-style: none;
  114. padding-left: 3mm;
  115. }
  116. .latour, .lampe {
  117. font-family: 'Novel';
  118. font-weight: normal;
  119. margin-top: 20mm;
  120. margin-left: calc(var(--pagedjs-pagebox-width) / var(--cols));
  121. margin-right: -16mm;
  122. margin-bottom: 20mm;
  123. background-color: var(--beige);
  124. line-height: 12pt;
  125. font-size: 9pt;
  126. padding-right: 18mm;
  127. padding-left: calc(var(--pagedjs-pagebox-width) / var(--cols));
  128. padding-bottom: 10mm;
  129. padding-top: 10mm;
  130. }
  131. .encart-split {
  132. position: absolute;
  133. margin-left: calc(var(--pagedjs-pagebox-width) / var(--cols));
  134. background-color: #fbf2e7;
  135. }
  136. .pagedjs_left_page .latour, .pagedjs_left_page .lampe {
  137. padding-right: 10mm;
  138. width: 128.375mm;
  139. }
  140. .latour[data-split-original="true"] {
  141. padding-bottom: 1mm !important;
  142. }
  143. .latour[data-split-from] {
  144. padding-top: 1mm !important;
  145. }
  146. .latour-header, .lampe-header {
  147. display: flex;
  148. flex-direction: row;
  149. align-items: center;
  150. line-height: 1.1;
  151. margin-bottom: 3mm;
  152. font-weight: bold;
  153. }
  154. .latour-header img:first-of-type,
  155. .lampe-header img:first-of-type {
  156. margin-top: 1mm;
  157. margin-right: 2mm;
  158. width: 8mm;
  159. }
  160. .lampe {
  161. padding-top: 3mm;
  162. padding-bottom: 3mm;
  163. }
  164. img {
  165. width: 100%;
  166. }
  167. .fullpage2imgs {
  168. width: 130mm;
  169. height: 210mm;
  170. }
  171. .fullpageimage {
  172. margin-top: -22mm;
  173. margin-left: -10mm;
  174. width: 171mm;
  175. height: 230mm;
  176. }
  177. .bottomimg {
  178. width: 100%;
  179. break-after: page;
  180. }
  181. .bottomimg img {
  182. height: 100%;
  183. }
  184. .tripleimgs,
  185. .tripleimgs_bottom {
  186. break-before: page;
  187. break-after: page
  188. }
  189. .tripleimgs img:nth-of-type(2),
  190. .tripleimgs_bottom img:first-of-type {
  191. width: calc(50% - 1mm);
  192. margin-right: 2mm;
  193. }
  194. .tripleimgs img:last-of-type,
  195. .tripleimgs_bottom img:nth-of-type(2) {
  196. width: calc(50% - 1mm);
  197. }
  198. .tripleimgs2,
  199. .tripleimgs2_bottom {
  200. break-before: page;
  201. break-after: page
  202. }
  203. .tripleimgs2 img:nth-of-type(2),
  204. .tripleimgs2_bottom img:first-of-type {
  205. width: calc(37.5% - 1mm);
  206. margin-right: 2mm;
  207. }
  208. .tripleimgs2 img:last-of-type,
  209. .tripleimgs2_bottom img:nth-of-type(2) {
  210. width: calc(62.5% - 1mm);
  211. }
  212. .imgfullspreadleft,
  213. .imgfullspreadright,
  214. .imgfullspreadright_bleedtop,
  215. .imgfullspreadright_bleed {
  216. break-before: left;
  217. break-after: left;
  218. width: 149mm;
  219. overflow: hidden;
  220. }
  221. .imgfullspreadright_bleedtop {
  222. margin-top: -22mm;
  223. height: 220mm;
  224. }
  225. .imgfullspreadright_bleed {
  226. margin-top: -22mm;
  227. height: 242mm;
  228. }
  229. .imgfullspreadleft img,
  230. .imgfullspreadright img {
  231. height: 198mm;
  232. width: auto;
  233. }
  234. .imgfullspreadright_bleedtop img {
  235. height: 220mm;
  236. width: auto;
  237. }
  238. .imgfullspreadright_bleed img {
  239. height: 242mm;
  240. width: auto;
  241. }
  242. .imgfullspreadleft-right {
  243. width: 149mm;
  244. overflow: hidden;
  245. margin-left: -16mm;
  246. }
  247. .imgfullspreadright-right {
  248. width: 143mm;
  249. margin-left: -8mm;
  250. overflow: hidden;
  251. display: flex;
  252. justify-content: flex-end;
  253. }
  254. .imgfullspreadright_bleedtop-right, .imgfullspreadright_bleed-right {
  255. width: 173mm;
  256. height: 220mm !important;
  257. margin-top: -22mm;
  258. margin-left: -8mm;
  259. overflow: hidden;
  260. display: flex;
  261. justify-content: flex-end;
  262. }
  263. .imgfullspreadright_bleed-right, .imgfullspreadright_bleed-right img {
  264. height: 242mm !important;
  265. }
  266. .imgfullspreadright_bleedtop-right img, .imgfullspreadright_bleed-right img {
  267. height: 220mm;
  268. width: auto;
  269. }
  270. .imgfullspreadright-right img {
  271. height: 198mm;
  272. width: auto;
  273. }
  274. .imgfullspreadleft-right img {
  275. height: 198mm;
  276. width: auto;
  277. margin-left: -141mm;
  278. }