1/**
2 * This contains the content styling
3 * @author Sascha Leib <sascha@leib.be>
4 */
5
6body {
7	overflow: hidden auto;
8}
9
10.dokuwiki main {
11	p,
12	blockquote,
13	div.table {
14		margin-bottom: .5em;
15		margin-top: .5em;
16	}
17
18/* headlines: */
19	h1, h2, h3, h4, h5, h6 {
20		font-family:	@ini_headline_fonts;
21		color:			@ini_headlines;
22		margin:			1em 0 1em 0;
23		line-height:	1.1em;
24	}
25	h1 { font-size: 2em; }
26	h2 { font-size: 1.5em; }
27	h3 { font-size: 1.125em; }
28	h4 { font-size: 1em; }
29	h5 { font-size: .875em; }
30	h6 { font-size: .75em; }
31	h1 *, h2 *, h3 *, h4 *, h5 *, h6 * {
32		font-family: inherit;
33		font-size: inherit;
34		color: inherit;
35		margin: inherit;
36		line-height: inherit;
37	}
38	/* Definition Terms are like Headlines in many ways */
39	dl dt {
40		font-family: @ini_headline_fonts;
41		color: @ini_headlines;
42	}
43	dl.compact dl { /* except in compact mode */
44		font-weight: 600;
45		font-family: inherit;
46		color: inherit;
47	}
48
49	/* make strike-through and underline more useful! */
50	u {
51		-webkit-text-decoration-color: #F30;
52		-webkit-text-decoration-line: underline;
53		-webkit-text-decoration-style: wavy;
54		-webkit-text-decoration-thickness: .7pt;
55		text-decoration: underline #F30 wavy .7pt;
56	}
57	s, del {
58		-webkit-text-decoration-color: rgba(255,0,0,.5);
59		-webkit-text-decoration-line: line-through;
60		-webkit-text-decoration-style: solid;
61		-webkit-text-decoration-thickness: .1em;
62		text-decoration: line-through rgba(255,0,0,.5) solid .1em;
63	}
64
65	/* lists: */
66	ul, ol {
67		margin: 0 2em 1em 1em;
68		padding-left: 1.75em;
69	}
70	ul { list-style: square outside; }
71	ul ul { list-style-type: disc; }
72	ul ul ul { list-style-type: none; }
73	ul ul ul li {margin-left: 1em; }
74	ul ul ul li:before { display: block; content: '\2043'; text-align:center; float: left; width: 1em; margin-left: -1em; }
75	ul ul ul ul li:before { content: '\FE63' }
76	ul ul ul ul ul li:before { content: '\00B7' }
77
78	/* numbered lists vary by nestling: */
79	ol { list-style: decimal outside; }
80	ol ol { list-style-type: lower-alpha; }
81	ol ol ol { list-style-type: lower-roman; }
82	ol ol ol ol { list-style-type: lower-greek; }
83	ol ol ol ol ol { list-style-type: decimal-leading-zero; font-size: .96em;}
84	ol ol ol ol ol ol { list-style-type: upper-alpha; font-size: .96em;}
85	ul ul ul ol li { margin-left: 0; }
86	ul ul ul ol li:before { display: none; content: ''; }
87
88	li::marker {
89		color: #666;
90	}
91
92	ul ul, ul ol,
93	ol ul, ol ol {
94		margin-bottom: 0;
95		padding-left: .25em;
96	}
97
98	/* horizontal rules */
99	hr {
100		border:				#666 solid 0;
101		border-top-width:	1pt;
102		height:				0;
103		margin:				3pt 0;
104	}
105
106	tt, blockquote tt,
107	pre, pre *,
108	code, code *,
109	blockquote code {
110		font-family: @ini_mono_fonts;
111	}
112	code, blockquote code {
113		border: @ini_border solid 1px;
114		border-radius: 3pt;
115		padding: 0 2pt;
116	}
117	pre {
118		max-width: calc(~"@{ini_site_width} - @{ini_sidebar_width} - .5em");
119		overflow: auto;
120		word-wrap: normal;
121		border: 1px solid @ini_border;
122		border-radius: 2px;
123		box-shadow: inset 0 0 .5em @ini_border;
124		padding: .3em;
125	}
126
127	/* overwrite pre styling for CodeMirror plugin: */
128	.CodeMirror pre {
129		max-width: 100%;
130	}
131	/* quotes: */
132	blockquote {
133		border: @ini_blockquote solid 0;
134		border-width: 0 0 0 .4em;
135		border-radius: .5em;
136		padding: .25em 0 .25em .75em;
137		margin: 0 2em 1em 1em;
138		font-family: @ini_alt_fonts;
139		font-size: @ini_alt_font_size;
140		hanging-punctuation: first allow-end;
141	}
142	blockquote * {
143		font-family: @ini_alt_fonts;
144	}
145
146	svg {
147		display: block;
148		fill-rule: evenodd;
149		clip-rule: evenodd;
150		stroke-linejoin: round;
151		stroke-miterlimit: 1.5;
152	}
153	svg.math {
154		margin-left: 15px
155	}
156
157	/*  tables */
158	div.table {
159		overflow-x: auto;
160	}
161	table {
162		& {
163			border-collapse: collapse;
164			empty-cells: show;
165			border-spacing: 0;
166			font-size: smaller;
167			border: 1px solid @ini_border;
168			margin-bottom: 1em;
169		}
170		th, td {
171			padding: .5em .3em;
172			vertical-align: top;
173			border: 1px solid @ini_border;
174			line-height: 1.25em;
175		}
176		th.centeralign, td.centeralign {
177			text-align: center;
178		}
179		th.rightalign, td.rightalign {
180			text-align: right;
181		}
182		th {
183			font-weight: bold;
184			background-color: @ini_background_alt;
185			text-align: left;
186		}
187		&.inline {
188			min-width: 50%;
189			margin-bottom: 0;
190		}
191		&.inline tr:hover td {
192			background-color: @ini_background_alt;
193		}
194		&.inline tr:hover th {
195			background-color: @ini_border;
196		}
197	}
198
199	/* asides */
200	aside {
201		& > * {
202			margin: .25em 0;
203		}
204		&.float-left, &.float-right {
205			width: 50%;
206			max-width: 220px;
207			min-width: 150px;
208			font-size: smaller;
209			line-height: 1.5em;
210		}
211		&.float-left {
212			clear: left;
213			float: left;
214			margin-right: .5em;
215		}
216		&.float-right {
217			clear: right;
218			float: right;
219			margin-left: .5em;
220		}
221		& footer {
222			line-height: 1.1em;
223		}
224	}
225
226	/* images */
227	img {
228		max-width: 100%;
229		height: auto;
230	}
231
232	/* abbbreviations a reslightly widened and made smaller */
233	abbr {
234		letter-spacing: .01em;
235		font-size: 97%;
236	}
237
238	/* extra styles for ad-hoc tags: */
239	kbd {
240		padding: .15em .25em;
241		margin: 0 .1em;
242		font-size: 85%;
243		color: @ini_headlines;
244		border: @ini_border solid 1px;
245		border-radius: .25em;
246		display: inline-block;
247		white-space: nowrap;
248		line-height: 1.2em;
249		letter-spacing: .03em;
250	}
251	kbd kbd {
252		background-color: @ini_background_alt;
253		-webkit-box-shadow: 0 .1em 0 rgba(0,0,0,0.25);
254		box-shadow: 0 .1em 0 rgba(0,0,0,0.25);
255		font-weight: bold;
256	}
257	samp {
258		background-color: @ini_background_alt;
259		font-family: @ini_mono_fonts;
260		white-space: nowrap;
261	}
262	mark {
263		background-color: @ini_highlight;
264	}
265
266	/* box / notification classes */
267	.box, .wrap_box,
268	.outline, .wrap_outline {
269		padding: 1pt .5em;
270		margin: .5em 0;
271	}
272	.box, .wrap_box {
273		background-color: @ini_background_alt;
274	}
275	.rounded, .wrap_rounded {
276		border-radius: .5em;
277	}
278
279	/* hyphenation only in the main-content */
280	p, li {
281		word-wrap: break-word;
282		overflow-wrap: break-word;
283		hyphens: auto;
284		-ms-hyphens: auto;
285		-moz-hyphens: auto;
286		-webkit-hyphens: auto;
287		hyphenate-limit-chars: 6 2 3;
288	}
289
290	/* footnotes section */
291	div.footnotes {
292		border-top: transparent 0 none;
293		margin-top: 1.5em;
294		font-size: smaller;
295	}
296	div.footnotes:before {
297		content: ' ';
298		display: block;
299		width: 33%;
300		min-width: 5em;
301		border-top: @ini_border solid 1.5pt;
302		height: .5em;
303	}
304	div.footnotes div.fn {
305		margin-left: 1em;
306	}
307}
308
309/* footnotes and similar poups: */
310.JSpopup {
311	background-color: @ini_background;
312	color: @ini_text;
313	border: @ini_border solid 1px;
314	padding: .25em;
315	box-shadow: 2px 2px 4px rgba(0, 0, 0, .5);
316}
317
318
319/* on the homepage only, reduce the H1 top margin: */
320body.home h1:first-child { margin-top: .5em; }
321
322
323[dir=rtl] {
324	main {
325		blockquote {
326			border-width: 0 .4em 0 0;
327			padding: .25em .75em .25em 0;
328			margin: 0 1em 1em 2em;
329		}
330
331		ul, ol {
332			margin-left: 0;
333			margin-right: .5em;
334			padding-left: 0;
335			padding-right: .25em;
336		}
337		ul li, ol li {
338			width: 100%;
339		}
340
341		ul ul ul li:before {
342			float: right;
343			margin-left: 0;
344			margin-right: -1em;
345		}
346
347	}
348}
349
350/* tablet break point: */
351@media (max-width: @ini_tablet_width) {
352
353	/* tighter hyphenation for narrower screens */
354	#main-content p, #main-content li {
355		hyphenate-limit-chars: 5 2 2;
356	}
357}
358
359/* phone break point: */
360@media (max-width: @ini_phone_width) {
361
362	.nophone, .wrap_nophone {
363		display: none !important;
364	}
365
366	main aside {
367		width:			100%;
368		max-width:		initial;
369		float:			none;
370		margin-left:	0;
371	}
372}
373
374/* dark mode overrides */
375@media (prefers-color-scheme: dark) {
376
377	body.darkmode {
378		main {
379			h1, h2, h3, h4, h5, h6, dt { color: @ini_headlines_dark; }
380			table {
381				& { border-color: @ini_border_dark; }
382				&.inline tr:hover td,
383				&.inline tr:hover th { background-color: @ini_border_dark; }
384				th { background-color: rgba(255,255,255,0.05); }
385			}
386			#acl_manager table tr:hover { background-color: rgba(255,255,255,0.1); }
387			code,
388			blockquote { border-color: @ini_blockquote_dark }
389			blockquote code { border-color: @ini_border_dark; }
390			kbd {color: @ini_headlines_dark;border-color: @ini_border_dark;}
391			kbd kbd {background-color: @ini_background_alt_dark;}
392			samp {background-color: @ini_background_alt_dark;}
393			pre {border-color: @ini_border_dark; box-shadow: inset 0 0 .5em @ini_background_site_dark;}
394			dl dt {	color: @ini_headlines_dark; }
395
396			/* overrides for PRE blocks: */
397			pre.code {
398				.me1 {color: #3C3;}
399				.kw2 {color: #0C7;}
400				.kw3 {color: #0CF;}
401			}
402
403			div.error {background-color: #4B2F36; color: #FFB3D2; border-color: #743E4C;}
404			div.success {background-color: #28381F; color: #FBE2A1; border-color: #37562E;}
405			div.notify {background-color: #42381F; color: #FCE2A1; border-color: #56562E;}
406
407			/* colour overrides for Wrap Plugin */
408			.wrap_hi {background-color: @ini_highlight; color: #000;}
409			.wrap_box, .box {background-color: @ini_background_alt_dark; color: inherit;}
410			.wrap_outline, .outline {border-color: @ini_border_dark; color: inherit}
411			.red, .wrap_red { color: #E53935; }
412			.green, .wrap_green { color: #00E676; }
413			.wrap_tip {background-color: #47391B;}
414			.wrap_important {background-color: #603000;}
415			.wrap_alert, .wrap_danger {background-color: #4C0909;}
416			.wrap_help, .wrap_info {background-color: #112847;}
417			.wrap_download, .wrap_safety {background-color: #1C3802;}
418			.wrap_todo, .wrap_notice {background-color: #004A7F;}
419			.wrap_caution {background-color: #fcffaa;}
420			.wrap_warning {background-color: #FFC9AA;}
421
422			/* MathML fixes */
423			merror { background-color: @ini_highlight; color: red; }
424
425		}
426
427		/* footnote and similar poups: */
428		.JSpopup {
429			background-color: @ini_background_site_dark;
430			color: @ini_text_dark;
431			border-color: @ini_border_dark;
432			box-shadow: 2px 2px 4px #000;
433		}
434	}
435}
436
437