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