xref: /template/ad-hominem/css/print.less (revision 3710f55e44343beb1e8caa80b90d4e0af6275b63) 
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,
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	box-shadow: 0 0 0 0 transparent;
109	font-variant-ligatures: common-ligatures discretionary-ligatures;
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	page-break-inside: avoid;
120	break-inside: avoid;
121	page-break-after: avoid;
122	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
133/* workaround: force headlines to keep with the next paragraph: */
134main h1::after, main h2::after, main h3::after, main h4::after, main h5::after, main h6::after,
135main dl:not(.compact) dt::after {
136	content: '';
137	display: block;
138	height: 4.5em;
139	margin-bottom: -4.5em;
140	page-break-inside: avoid;
141	break-inside: avoid;
142}
143
144main h1 + div, main h2 + div, main h3 + div, main h4 + div, main h5 + div, main h6 + div {
145	page-break-before: avoid;
146	break-before: avoid;
147}
148
149/* workaround until CSS orphans are widely supported: */
150main p::before {
151	content: '';
152	display: block;
153	height: 3.2em;
154	margin-bottom: -3.2em;
155	page-break-inside: avoid;
156	break-inside: avoid;
157}
158/* note: no workaround for missing CSS widows yet :-( */
159
160/* paragraph-level blocks */
161main p, main ul, main ol {
162	margin: .5em 0;
163}
164main p, main li {
165	widows: 2;
166	orphans: 2;
167	word-wrap: break-word;
168	overflow-wrap: break-word;
169	-ms-hyphens: auto;
170	-moz-hyphens: auto;
171	-webkit-hyphens: auto;
172	hyphens: auto;
173	hyphenate-limit-chars: 6 2 3;
174}
175main ul { list-style: square outside; }
176main ul ul { list-style-type: disc; }
177main ul ul ul { list-style-type: none; }
178main ol { list-style: decimal outside; }
179main ul ul ul li {margin-left: 1em; }
180main ul ul ul li:before { display: block; content: '\2043'; text-align:center; float: left; width: 1em; margin-left: -1em; }
181main ul ul ul ul li:before { content: '\FE63' }
182main ul ul ul ul ul li:before { content: '\00B7' }
183
184main ol ol { list-style-type: lower-alpha; }
185main ol ol ol { list-style-type: lower-roman; }
186main ol ol ol ol { list-style-type: lower-greek; }
187main ol ol ol ol ol { list-style-type: decimal-leading-zero; }
188main ul ul ul ol li { margin-left: 0; }
189main ul ul ul ol li:before { display: none; content: ''; }
190
191main li {
192	margin-left: 1.5em;
193}
194main blockquote {
195	border-left: @ini_blockquote solid 3pt;
196	padding: .25em 0 .25em .5em;
197	margin: 0 .25em 1em .25em;
198	widows: 2;
199	orphans: 2;
200	hyphens: auto;
201}
202main pre {
203	white-space: normal;
204}
205main figure {
206	break-inside: avoid;
207	page-break-inside: avoid;
208	background-color: transparent;
209	border: #666 solid .5pt;
210	margin: .5em 0;
211}
212main figure figcaption {
213	font-family: @ini_print_title_fonts;
214	margin-top: .5em;
215	font-size: small;
216	text-align: left;
217}
218main figure figcaption p,
219main figure figcaption li {
220	font-family: @ini_print_title_fonts;
221}
222body.print-compact main figure figcaption p {
223	text-indent: 0;
224}
225body.print-compact main figure table {
226	max-width: 100%;
227	border: #000 solid .5pt;
228}
229main footer {
230	margin-top: 2em;
231	border-top: #000 solid .5pt;
232	page-break-before: avoid;
233	break-before: avoid;
234}
235main footer p.docInfo,
236body.print-compact main p.docInfo {
237	display: block;
238	border: none;
239	padding: 0;
240	text-align: right;
241	color: #000;
242}
243#ftLicenseButtons p.license {
244	color: #000;
245}
246
247/* links overrides */
248main a:link,
249main a:visited {
250	text-decoration: underline;
251	text-decoration-style: dotted;
252}
253main a:link.text-link,
254main a:visited.text-link {
255	color: #000;
256}
257
258/* add URL after external links - optional!
259main a.interwiki:after,
260main a.urlextern:after {
261  content: ' <' attr(href) '>';
262  font-size: 90%;
263  color: #333;
264} */
265
266/* fixed-width elements: */
267main tt, main code, main pre,
268main blockquote tt, main blockquote code, main blockquote pre {
269	font-family:	@ini_mono_fonts;
270}
271
272/* text attributes */
273main s {
274	text-decoration: line-through rgba(255,0,0,0.5) solid 1pt;
275	-webkit-text-decoration: line-through rgba(255,0,0,0.5) solid 1pt;
276}
277main u {
278	-webkit-text-decoration-color: @ini_missing;
279	-webkit-text-decoration-line: underline;
280	-webkit-text-decoration-style: wavy;
281	-webkit-text-decoration-thickness: .7pt;
282	text-decoration: underline @ini_missing wavy .7pt;
283}
284main u.valid {
285	-webkit-text-decoration-color: @ini_existing;
286	text-decoration-color: @ini_existing;
287	text-decoration-style: dashed;
288}
289main abbr {
290	text-decoration: none;
291	font-size: 97%;
292	letter-spacing: .05em;
293}
294
295/* horizontal rules */
296main hr {
297	border: #000 solid 0;
298	border-top-width: 1pt;
299	height: 0;
300	margin: 3pt 0;
301}
302
303/* table styles */
304main table {
305	max-width: 100%;
306	border: #000 solid .5pt;
307	border-collapse: collapse;
308	line-height: 1.25em;
309	margin: .5em 0;
310	box-decoration-break: clone;
311	page-break-inside: avoid;
312	break-inside: avoid;
313	font-size: small;
314}
315main table td,
316main table th {
317	padding: 2pt 3pt;
318	vertical-align: top;
319}
320main table th,
321main table th * {
322	font-family: @ini_print_title_fonts;
323	color: @ini_print_title_color;
324}
325main table thead {
326	break-inside: avoid;
327	break-after: avoid;
328}
329main table thead tr {
330	background-color: #EEE;
331	border-bottom: #000 solid .5pt;
332	text-align: left;
333}
334main table thead tr th,
335main table thead tr td {
336	vertical-align: bottom;
337	border-right: #000 solid .5pt;
338}
339main table thead tr th:last-child,
340main table thead tr td:last-child {
341	border-right: none 0;
342}
343main table tbody tr {
344	border-bottom: #000 dashed .5pt;
345}
346main table tbody tr:nth-child(even) {
347	background-color: #EEE;
348}
349main table tbody th {
350	vertical-align: top;
351	border-right: #000 solid .5pt;
352}
353main table tbody td {
354	border-right: #000 dashed .5pt;
355}
356main table a:link {
357	text-decoration: none;
358}
359
360main table.layout,
361main table.layout tr,
362main table.layout th,
363main table.layout td {
364	border: none !important;
365	background: transparent none !important;
366}
367
368main blockquote table {
369	margin: 0;
370}
371
372/* image-related */
373main aside {
374	float: none;
375	width: 100%;
376	margin: .5em 0;
377	page-break-inside: avoid;
378	break-inside: avoid;
379}
380main img {
381	width: auto;
382	max-width: 100%;
383	height: auto;
384	break-inside: avoid;
385	page-break-inside: avoid;
386}
387
388/* footnotes */
389.dokuwiki div.footnotes {
390	border-top: transparent 0 none;
391	font-size: smaller;
392}
393
394.dokuwiki sup a.fn_top {
395	color: #000;
396}
397.dokuwiki sup a.fn_top::after {
398	font-size: 1.0rem;
399	font-weight: normal;
400}
401 #main-content h1 + div > p:first-child sup a.fn_top::after {
402	 font-weight: bold;
403 }
404
405.dokuwiki div.footnotes > .fn .fn_bot {
406	color: #000;
407}
408.dokuwiki div.footnotes > .fn .fn_bot::after {
409	font-size: .833rem;
410}
411
412main div.footnotes:before {
413	content: ' ';
414	display: block;
415	width: 50%;
416	min-width: 5em;
417	border-top: #000 solid .5pt;
418	height: .5em;
419}
420
421/* show language code, if configured as menu */
422#tbLanguages {
423	& {
424		display: block;
425		float:right;
426		position: relative;
427		top: -1.5rem;
428	}
429	button {
430		& {
431			border: transparent none 0;
432		}
433		svg {
434			& {
435				fill: transparent;
436				stroke: #000;
437				stroke-width: .5pt;
438				width: 1.75rem; height: 1.75rem;
439			}
440			text {
441				fill: #000;
442				text-transform: uppercase;
443				font-family: Arial, Helvetica, Verdana, sans;
444				stroke-width: 0;
445			}
446		}
447	}
448}
449
450/* alternative compact style: */
451body.print-compact #main-content {
452	columns: 2;
453	column-gap: 1.2em;
454	column-rule: .25pt solid #666;
455	font-size: 11pt;
456}
457body.print-compact main h1,
458body.print-compact main h2,
459body.print-compact main figure {
460	column-span: all;
461}
462body.print-compact main figure.print-narrow {
463	column-span: none;
464}
465
466#main-content h1 + div > p:first-child {
467	column-span: all;
468	font-weight: 600;
469	margin-bottom: 1.5em;
470	text-indent: 0;
471}
472
473body.print-compact main p {
474	margin: 0;
475	text-align: justify;
476	text-indent: 1.5em;
477}
478body.print-compact main h1 + div > p:first-child + p,
479body.print-compact main h2 + div > p:first-child,
480body.print-compact main h3 + div > p:first-child,
481body.print-compact main h4 + div > p:first-child,
482body.print-compact main h5 + div > p:first-child,
483body.print-compact main h6 + div > p:first-child,
484body.print-compact main figure + p + p,
485body.print-compact main div.table + p,
486body.print-compact main aside + p + p,
487body.print-compact main ul + p,
488body.print-compact main ol + p,
489body.print-compact main blockquote + p,
490body.print-compact main p.info-box,
491body.print-compact main p.info-box + p + p {
492	text-indent: 0;
493}
494
495body.print-compact main table {
496	border: none;
497}
498body.print-compact main figure {
499	border: none;
500	margin: 1em 0 .5em 0;
501	padding: .5em 0;
502}
503body.print-compact main blockquote {
504	margin: .5em 0;
505	padding: 0 0 0 .5em;
506}
507body.print-compact main figure blockquote {
508	margin: 0;
509}
510body.print-compact main p.info-box {
511	margin: .5em 0;
512}
513body.print-compact main ul,
514body.print-compact main ol {
515	margin-left: .5em;
516	margin: 0;
517	padding: 0;
518	list-style-position: inside;
519}
520body.print-compact main ul > li,
521body.print-compact main ol > li {
522	margin-left: 0;
523}
524body.print-compact main ul ul,
525body.print-compact main ul ol,
526body.print-compact main ol ul,
527body.print-compact main ol ol,
528body.print-compact main ul ul li,
529body.print-compact main ul ol li,
530body.print-compact main ol ul li,
531body.print-compact main ol ol li {
532	margin-left: .5em;
533}
534body.print-compact main ul li::marker,
535body.print-compact main ol li::marker {
536	display: inline-block;
537	float: none;
538}
539body.print-compact main ul li div.li,
540body.print-compact main ol li div.li {
541	display: inline;
542}
543body.print-compact main ul div.li,
544body.print-compact main ol div.li {
545	text-align: justify;
546}
547
548/* media detail */
549body.mediadetail figure {
550	border: none;
551	background:	transparent none;
552}
553body.mediadetail figure table ul {
554	margin: 0;
555}
556
557/* allow user to force keep-together rules: */
558.keep-together,
559.wrap_keep-together {
560	page-break-inside: avoid;
561	break-inside: avoid;
562}
563.break-before,
564.wrap_break-before {
565	page-break-before: always;
566	break-before: always;
567}
568.print-wide,
569.wrap_print-wide {
570	clear: both;
571	column-span: all;
572}
573.print-outline {
574	margin-top: 1em;
575	border: #666 solid .5pt;
576	border-radius:	1em;
577	padding: 0 1em;
578}
579
580/* site-banners */
581.site-banner {
582	clear: both;
583	column-span: all;
584	margin-top: 1em;
585	border: #666 solid 1pt;
586	border-radius: 1em;
587	padding: 0 1em;
588	page-break-inside: avoid;
589	break-inside: avoid;
590	text-align: left;
591}
592.site-banner h4 {
593	margin: .75em 0 .15em 0;
594	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
595	font-size: 11pt;
596	font-style: normal;
597}
598.site-banner p {
599	font-size: 9pt;
600	line-height: 13pt;
601}
602.site-banner img {
603	margin: 0 .25em .25em .5em;
604}
605
606/* boxes */
607main .box,
608main .wrap_box {
609	border: #666 solid 1px;
610	background-color: @ini_background_alt;
611	padding: .5em .25em .5em .5em;
612	font-size: small;
613	line-height: 1.5em;
614}
615