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