xref: /template/ad-hominem/css/print.less (revision ee4968b19d26f90695f4b6fc8b56ef6fa4dea5a1) 
1/**
2 * This contains the print layouts and styles
3 * @author Sascha Leib <sascha@leib.be>
4 */
5
6@page { margin: 2cm 4cm 3cm 2.5cm; }
7
8.noprint,
9.wrap_noprint {
10	display: none !important;
11}
12.nobreak,
13.wrap_nobreak {
14	white-space:	nowrap !important;
15}
16.printonly,
17.wrap_nobreak {
18	display: initial;
19}
20
21html, body, * {
22	font-family: @ini_print_default_fonts;
23	margin: 0;
24	padding: 0;
25	background-color: transparent;
26}
27
28body {
29	font-size: 12pt;
30	box-decoration-break: clone;
31}
32
33/* hide unneded page elements */
34#globalTools, #phSearch, #phTools, #phTools,
35#sidebar, #toc, #navYouAreHere,
36#footer-layout .ftSection {
37	display: none;
38}
39#header-layout {
40	display: table-header-group;
41	padding-bottom: .25em;
42	margin-bottom: 1em;
43}
44#header-layout > header {
45	display: block;
46	padding-bottom: .25em;
47	border-bottom: #000 solid .5pt;
48	margin-bottom: 1em;
49}
50#siteLogo {
51	display: grid;
52	grid-template-columns: min-content max-content auto;
53	align-items: center;
54}
55#siteLogo .logo {
56	grid-row: 1;
57}
58#siteLogo .logo img {
59	width: 12pt;
60	height: auto;
61}
62#siteLogo .title {
63	font-size: 10pt;
64	line-height: 1.2em;
65	font-weight: bold;
66}
67#siteLogo .title a:link,
68#siteLogo .title a:visited {
69	font-family: @ini_print_title_fonts;
70	color: @ini_print_title_color;
71	text-decoration: none;
72}
73#siteLogo .claim {
74	grid-row: 1; grid-column: 3;
75	align-self: center;
76	max-width: 100%;
77	font-size: 10pt;
78	line-height: 1.2em;
79}
80
81#header-layout #phInclude {
82	display: none;
83}
84
85#main-layout {
86	padding-top: .5em;
87	display: table-row-group;
88}
89
90#footer-layout {
91	display: block;
92	padding-top: 0;
93}
94#footer-layout footer {
95	display: block;
96	width: auto;
97}
98
99/* reset main borders and margins: */
100main {
101	display: table-row-group;
102	padding: 0;
103	border-width: 0;
104	line-height: 1.5em;
105	border: none 0;
106	word-break: break-word;
107	-moz-box-shadow: 0 0 0 0 transparent;
108	-webkit-box-shadow: 0 0 0 0 transparent;
109	box-shadow: 0 0 0 0 transparent;
110}
111
112/* headlines */
113main h1, main h2, main h3, main h4, main h5, main h6 {
114	font-family: @ini_print_title_fonts;
115	color: @ini_print_title_color;
116	line-height: 1.2em;
117	margin: 1em 0 .5em 0;
118	padding: 0 0 .25em 0;
119	break-inside: avoid;
120	page-break-inside: avoid;
121	break-after: avoid;
122	page-break-after: avoid;
123	clear: both;
124	position: relative;
125}
126main h1 { font-size: 18pt; margin-bottom: .5em; }
127main h2 { font-size: 14pt; margin-top: 2em; }
128main h3 { font-size: 12pt; }
129main h4 { font-size: 12pt; font-style: italic; }
130main h5 { font-size: 12pt; font-weight: normal; font-style: italic; }
131main h6 { font-size: 11pt; font-weight: normal; font-style: italic; }
132
133main h1 + div, main h2 + div, main h3 + div, main h4 + div, main h5 + div, main h6 + div {
134	page-break-before: avoid;
135	break-before: avoid;
136}
137
138/* paragraph-level blocks */
139main p, main ul, main ol {
140	margin: .5em 0;
141	widows: 2;
142	orphans: 2;
143	hyphens: auto;
144}
145main ul { list-style: square outside; }
146main ul ul { list-style-type: disc; }
147main ul ul ul { list-style-type: none; }
148main ol { list-style: decimal outside; }
149main ul ul ul li {margin-left: 1em; }
150main ul ul ul li:before { display: block; content: '\2043'; text-align:center; float: left; width: 1em; margin-left: -1em; }
151main ul ul ul ul li:before { content: '\FE63' }
152main ul ul ul ul ul li:before { content: '\00B7' }
153
154main ol ol { list-style-type: lower-alpha; }
155main ol ol ol { list-style-type: lower-roman; }
156main ol ol ol ol { list-style-type: lower-greek; }
157main ol ol ol ol ol { list-style-type: decimal-leading-zero; }
158main ul ul ul ol li { margin-left: 0; }
159main ul ul ul ol li:before { display: none; content: ''; }
160
161main li {
162	margin-left: 1.5em;
163}
164main blockquote {
165	border-left: @ini_blockquote solid 3pt;
166	padding: .25em 0 .25em .5em;
167	margin: 0 .25em 1em .25em;
168	widows: 2;
169	orphans: 2;
170	hyphens: auto;
171}
172main pre {
173	white-space: normal;
174}
175main figure {
176	break-inside: avoid;
177	page-break-inside: avoid;
178	background-color: transparent;
179	border: #666 solid .5pt;
180	margin: .5em 0;
181}
182main figure figcaption {
183	font-family: @ini_print_title_fonts;
184	margin-top: .5em;
185	font-size: small;
186	text-align: left;
187}
188main figure figcaption p,
189main figure figcaption li {
190	font-family: @ini_print_title_fonts;
191}
192body.print-compact main figure figcaption p {
193	text-indent: 0;
194}
195body.print-compact main figure table {
196	max-width: 100%;
197	border: #000 solid .5pt;
198}
199main footer {
200	margin-top: 2em;
201	border-top: #000 solid .5pt;
202	page-break-before: avoid;
203	break-before: avoid;
204}
205main footer p.docInfo,
206body.print-compact main p.docInfo {
207	display: block;
208	border: none;
209	padding: 0;
210	text-align: right;
211	color: #000;
212}
213#ftLicenseButtons p.license {
214	color: #000;
215}
216
217/* links overrides */
218main a:link,
219main a:visited {
220	text-decoration: underline;
221	text-decoration-style: dotted;
222}
223main a:link.text-link,
224main a:visited.text-link {
225	color: #000;
226}
227
228/* add URL after external links - optional!
229main a.interwiki:after,
230main a.urlextern:after {
231  content: ' <' attr(href) '>';
232  font-size: 90%;
233  color: #333;
234} */
235
236/* fixed-width elements: */
237main tt, main blockquote tt,
238main code, main blockquote code {
239	font-family:	@ini_mono_fonts;
240}
241
242/* text attributes */
243main s {
244	text-decoration: line-through rgba(255,0,0,0.5) solid 1pt;
245	-webkit-text-decoration: line-through rgba(255,0,0,0.5) solid 1pt;
246}
247main u {
248	-webkit-text-decoration-color: @ini_missing;
249	-webkit-text-decoration-line: underline;
250	-webkit-text-decoration-style: wavy;
251	-webkit-text-decoration-thickness: .7pt;
252	text-decoration: underline @ini_missing wavy .7pt;
253}
254main u.valid {
255	-webkit-text-decoration-color: @ini_existing;
256	text-decoration-color: @ini_existing;
257	text-decoration-style: dashed;
258}
259main abbr {
260	text-decoration: none;
261	font-size: 97%;
262	letter-spacing: .05em;
263}
264
265/* horizontal rules */
266main hr {
267	border: #000 solid 0;
268	border-top-width: 1pt;
269	height: 0;
270	margin: 3pt 0;
271}
272
273/* table styles */
274main table {
275	max-width: 100%;
276	border: #000 solid .5pt;
277	border-collapse: collapse;
278	line-height: 1.25em;
279	margin: .5em 0;
280	box-decoration-break: clone;
281	page-break-inside: avoid;
282	break-inside: avoid;
283	font-size: small;
284}
285main table td,
286main table th {
287	padding: 2pt 3pt;
288	vertical-align: top;
289}
290main table th,
291main table th * {
292	font-family: @ini_print_title_fonts;
293	color: @ini_print_title_color;
294}
295main table thead {
296	break-inside: avoid;
297	break-after: avoid;
298}
299main table thead tr {
300	background-color: #EEE;
301	border-bottom: #000 solid .5pt;
302	text-align: left;
303}
304main table thead tr th,
305main table thead tr td {
306	vertical-align: bottom;
307	border-right: #000 solid .5pt;
308}
309main table thead tr th:last-child,
310main table thead tr td:last-child {
311	border-right: none 0;
312}
313main table tbody tr {
314	border-bottom: #000 dashed .5pt;
315}
316main table tbody tr:nth-child(even) {
317	background-color: #EEE;
318}
319main table tbody th {
320	vertical-align: top;
321	border-right: #000 solid .5pt;
322}
323main table tbody td {
324	border-right: #000 dashed .5pt;
325}
326main table a:link {
327	text-decoration: none;
328}
329
330main table.layout,
331main table.layout tr,
332main table.layout th,
333main table.layout td {
334	border: none !important;
335	background: transparent none !important;
336}
337
338main blockquote table {
339	margin: 0;
340}
341
342/* image-related */
343main aside {
344	float: none;
345	width: 100%;
346	margin: .5em 0;
347	text-align: center;
348	font-size: smaller;
349	page-break-inside: avoid;
350	break-inside: avoid;
351	font-size: small;
352	line-height: 1.5em;
353}
354main img {
355	width: auto;
356	max-width: 100%;
357	height: auto;
358	break-inside: avoid;
359	page-break-inside: avoid;
360}
361
362/* alternative compact style: */
363body.print-compact #main-content {
364	columns: 2;
365	column-gap: 1.2em;
366	column-rule: .25pt solid #666;
367	font-size: 11pt;
368}
369body.print-compact main h1,
370body.print-compact main h2,
371body.print-compact main figure {
372	column-span: all;
373}
374body.print-compact main figure.print-narrow {
375	column-span: none;
376}
377
378#main-content h1 + div > p:first-child {
379	column-span: all;
380	font-weight: 600;
381	margin-bottom: 1.5em;
382	text-indent: 0;
383}
384
385body.print-compact main p {
386	margin: 0;
387	text-align: justify;
388	text-indent: 1.5em;
389}
390body.print-compact main h1 + div > p:first-child + p,
391body.print-compact main h2 + div > p:first-child,
392body.print-compact main h3 + div > p:first-child,
393body.print-compact main h4 + div > p:first-child,
394body.print-compact main h5 + div > p:first-child,
395body.print-compact main h6 + div > p:first-child,
396body.print-compact main figure + p + p,
397body.print-compact main div.table + p,
398body.print-compact main aside + p + p,
399body.print-compact main ul + p,
400body.print-compact main ol + p,
401body.print-compact main blockquote + p,
402body.print-compact main p.info-box,
403body.print-compact main p.info-box + p + p {
404	text-indent: 0;
405}
406
407body.print-compact main table {
408	border: none;
409}
410body.print-compact main figure {
411	border: none;
412	margin: 1em 0 .5em 0;
413	padding: .5em 0;
414}
415body.print-compact main blockquote {
416	margin: .5em 0;
417	padding: 0 0 0 .5em;
418}
419body.print-compact main figure blockquote {
420	margin: 0;
421}
422body.print-compact main p.info-box {
423	margin: .5em 0;
424}
425body.print-compact main ul,
426body.print-compact main ol {
427	margin-left: .5em;
428	margin: 0;
429	padding: 0;
430	list-style-position: inside;
431}
432body.print-compact main ul > li,
433body.print-compact main ol > li {
434	margin-left: 0;
435}
436body.print-compact main ul ul,
437body.print-compact main ul ol,
438body.print-compact main ol ul,
439body.print-compact main ol ol,
440body.print-compact main ul ul li,
441body.print-compact main ul ol li,
442body.print-compact main ol ul li,
443body.print-compact main ol ol li {
444	margin-left: .5em;
445}
446body.print-compact main ul li::marker,
447body.print-compact main ol li::marker {
448	display: inline-block;
449	float: none;
450}
451body.print-compact main ul li div.li,
452body.print-compact main ol li div.li {
453	display: inline;
454}
455body.print-compact main ul div.li,
456body.print-compact main ol div.li {
457	text-align: justify;
458}
459/* media detail */
460body.mediadetail figure {
461	border: none;
462	background:	transparent none;
463}
464body.mediadetail figure table ul {
465	margin: 0;
466}
467
468/* allow user to force keep-together rules: */
469.keep-together,
470.wrap_keep-together {
471	page-break-inside: avoid;
472	break-inside: avoid;
473}
474.break-before,
475.wrap_break-before {
476	page-break-before: always;
477	break-before: always;
478}
479.print-wide,
480.wrap_print-wide {
481	clear: both;
482	column-span: all;
483}
484.print-outline {
485	margin-top: 1em;
486	border: #666 solid .5pt;
487	border-radius:	1em;
488	padding: 0 1em;
489}
490
491/* site-banners */
492.site-banner {
493	clear: both;
494	column-span: all;
495	margin-top: 1em;
496	border: #666 solid 1pt;
497	border-radius: 1em;
498	padding: 0 1em;
499	page-break-inside: avoid;
500	break-inside: avoid;
501	text-align: left;
502}
503.site-banner h4 {
504	margin: .75em 0 .15em 0;
505	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
506	font-size: 11pt;
507	font-style: normal;
508}
509.site-banner p {
510	font-size: 9pt;
511	line-height: 13pt;
512}
513.site-banner img {
514	margin: 0 .25em .25em .5em;
515}
516
517/* boxes */
518main .info-box,
519main .wrap_info-box {
520	border: #666 solid 1px;
521	background-color: @ini_background_alt;
522	padding: .5em .25em .5em .5em;
523	font-size: small;
524	line-height: 1.5em;
525}
526
527main aside.info-box,
528main aside .wrap_info-box {
529	border: none;
530	background-color: transparent;
531}
532