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