1/**
2 * This contains the content styling
3 * @author Sascha Leib <sascha@leib.be>
4 */
5
6main {
7	/* simplified spacing in boxes: */
8	.outline > *, .box > *, .info > *, .tip > *, .important > *,
9	.alert > *, .help > *, .download > *, .todo > * {
10		margin: .5em 0;
11	}
12
13	/* plain box and outline are different from the other styles: */
14	.outline, .box {
15		box-sizing: border-box;
16		padding: .25em 1em .5em 1em;
17		margin: 1em 0;
18	}
19	.outline {
20		border: @ini_border solid 2pt;
21	}
22	.box {
23		background-color: @ini_background_alt;
24	}
25
26	/* icon-box classes: */
27	.info, .tip, .important, .alert, .help, .download, .todo {
28		background: transparent .25em center no-repeat;
29		background-size: 1em;
30		box-sizing: border-box;
31		border: @ini_border solid 1px;
32		border-left-width: 4pt;
33		border-radius: .25em;
34		padding: 1pt .25em 1pt 1.5em;
35		margin: .5em 0;
36		/* position: relative; */
37	}
38
39	.outline { border: #CCC solid 2pt; padding-left: .5em; }
40	.outline.filled { background-color: #EEE; }
41
42	.info {
43		border-left-color: #0085F2;
44		background-color: #E5F3FE;
45		background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEzLDlIMTFWN0gxM00xMywxN0gxMVYxMUgxM00xMiwyQTEwLDEwIDAgMCwwIDIsMTJBMTAsMTAgMCAwLDAgMTIsMjJBMTAsMTAgMCAwLDAgMjIsMTJBMTAsMTAgMCAwLDAgMTIsMloiIHN0eWxlPSJmaWxsOiMwMDg1RjI7IiAvPjwvc3ZnPg==");
46	}
47
48	.tip {
49		border-left-color: #FFCA28;
50		background-color: #FFF9C4;
51		background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEyLDZBNiw2IDAgMCwxIDE4LDEyQzE4LDE0LjIyIDE2Ljc5LDE2LjE2IDE1LDE3LjJWMTlBMSwxIDAgMCwxIDE0LDIwSDEwQTEsMSAwIDAsMSA5LDE5VjE3LjJDNy4yMSwxNi4xNiA2LDE0LjIyIDYsMTJBNiw2IDAgMCwxIDEyLDZNMTQsMjFWMjJBMSwxIDAgMCwxIDEzLDIzSDExQTEsMSAwIDAsMSAxMCwyMlYyMUgxNE0yMCwxMUgyM1YxM0gyMFYxMU0xLDExSDRWMTNIMVYxMU0xMywxVjRIMTFWMUgxM000LjkyLDMuNUw3LjA1LDUuNjRMNS42Myw3LjA1TDMuNSw0LjkzTDQuOTIsMy41TTE2Ljk1LDUuNjNMMTkuMDcsMy41TDIwLjUsNC45M0wxOC4zNyw3LjA1TDE2Ljk1LDUuNjNaIiBzdHlsZT0iZmlsbDojRkY5ODAwOyIgLz48L3N2Zz4=");
52	}
53
54	.important {
55		border-left-color: #FF9800;
56		background-color: #FFE0B2;
57		background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEzIDE0SDExVjlIMTNNMTMgMThIMTFWMTZIMTNNMSAyMUgyM0wxMiAyTDEgMjFaIiBzdHlsZT0iZmlsbDojRjU3QzAwOyIgLz48L3N2Zz4=");
58	}
59
60	.alert {
61		border-left-color: #B71C1C;
62		background-color: #FFCDD2;
63		background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTguMjcsM0wzLDguMjdWMTUuNzNMOC4yNywyMUgxNS43M0wyMSwxNS43M1Y4LjI3TDE1LjczLDNNOC40MSw3TDEyLDEwLjU5TDE1LjU5LDdMMTcsOC40MUwxMy40MSwxMkwxNywxNS41OUwxNS41OSwxN0wxMiwxMy40MUw4LjQxLDE3TDcsMTUuNTlMMTAuNTksMTJMNyw4LjQxIiBzdHlsZT0iZmlsbDojQjcxQzFDOyIgLz48L3N2Zz4=");
64	}
65
66	.help {
67		border-left-color: #7986CB;
68		background-color: #E8EAF6;
69		background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTE1LjA3LDExLjI1TDE0LjE3LDEyLjE3QzEzLjQ1LDEyLjg5IDEzLDEzLjUgMTMsMTVIMTFWMTQuNUMxMSwxMy4zOSAxMS40NSwxMi4zOSAxMi4xNywxMS42N0wxMy40MSwxMC40MUMxMy43OCwxMC4wNSAxNCw5LjU1IDE0LDlDMTQsNy44OSAxMy4xLDcgMTIsN0EyLDIgMCAwLDAgMTAsOUg4QTQsNCAwIDAsMSAxMiw1QTQsNCAwIDAsMSAxNiw5QzE2LDkuODggMTUuNjQsMTAuNjcgMTUuMDcsMTEuMjVNMTMsMTlIMTFWMTdIMTNNMTIsMkExMCwxMCAwIDAsMCAyLDEyQTEwLDEwIDAgMCwwIDEyLDIyQTEwLDEwIDAgMCwwIDIyLDEyQzIyLDYuNDcgMTcuNSwyIDEyLDJaIiBzdHlsZT0iZmlsbDojMUEyMzdFOyIgLz48L3N2Zz4=");
70	}
71
72	.download {
73		border-left-color: #66BB6A;
74		background-color: #E8F5E9;
75		background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEyIDJDMTcuNSAyIDIyIDYuNSAyMiAxMkMyMiAxNy41IDE3LjUgMjIgMTIgMjJDNi41IDIyIDIgMTcuNSAyIDEyQzIgNi41IDYuNSAyIDEyIDJNOCAxN0gxNlYxNUg4VjE3TTE2IDEwSDEzLjVWNkgxMC41VjEwSDhMMTIgMTRMMTYgMTBaIiBzdHlsZT0iZmlsbDojMUI1RTIwOyIgLz48L3N2Zz4=");
76	}
77
78	.todo {
79		border-left-color: #4DD0E1;
80		background-color: #E0F7FA;
81		background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTE3IDE1TDE4IDE5SDIxVjIySDNWMTlINkw3IDE1SDE3TTE1IDhMMTYgMTJIOEw5IDhIMTVNMTMgMUwxNCA1SDEwTDExIDFIMTNaIiBzdHlsZT0iZmlsbDojRjQ1MTFFOyIgLz48L3N2Zz4=");
82	}
83
84	/* modify spacing around headlines within blocks */
85	.outline h1, .outline h2, .outline h3, .outline h4, .outline h5, .outline h6,
86	.info h1, .info h2, .info h3, .info h4, .info h5, .info h6,
87	.tip h1, .tip h2, .tip h3, .tip h4, .tip h5, .tip h6,
88	.important h1, .important h2, .important h3, .important h4, .important h5, .important h6,
89	.alert h1, .alert h2, .alert h3, .alert h4, .alert h5, .alert h6,
90	.help h1, .help h2, .help h3, .help h4, .help h5, .help h6,
91	.download h1, .download h2, .download h3, .download h4, .download h5, .download h6,
92	.todo h1, .todo h2, .todo h3, .todo h4, .todo h5, .todo h6 {
93		margin: 6pt 0;
94	}
95
96	/* extra spacing for selected block-level elements: */
97	div.info, div.tip, div.important, div.alert, div.help, div.download, div.todo,
98	article.info, article.tip, article.important, article.alert, article.help, article.download, article.todo,
99	aside.info, aside.tip, aside.important, aside.alert, aside.help, aside.download, aside.todo,
100	section.info, section.tip, section.important, section.alert, section.help, section.download, section.todo,
101	figure.info, figure.tip, figure.important, figure.alert, figure.help, figure.download, figure.todo {
102		padding: .5em 1em .75em 2em;
103	}
104
105	/* notch down the icons for selected block-level elements: */
106	div.info, div.tip, div.important, div.alert, div.help, div.download, div.todo,
107	article.info, article.tip, article.important, article.alert, article.help, article.download, article.todo,
108	aside.info, aside.tip, aside.important, aside.alert, aside.help, aside.download, aside.todo,
109	section.info, section.tip, section.important, section.alert, section.help, section.download, section.todo,
110	figure.info, figure.tip, figure.important, figure.alert, figure.help, figure.download, figure.todo {
111		background-position: .5em 1.3em;
112	}
113
114	/* text colours: */
115	.yellow { color: #966C03; }
116	.orange { color: #B24103; }
117	.brown { color: #3E2723; }
118	.red { color: #B71C1C; }
119	.purple { color: #4A148C; }
120	.indigo { color: #1A237E; }
121	.blue { color: #0D47A1; }
122	.cyan { color: #006064; }
123	.teal { color: #004D40; }
124	.green { color: #1B5E20; }
125	.grey, .gray { color: #37474F; }
126
127	/* special case: markers: */
128	mark.yellow { background-color: #FFF176; color: #111; }
129	mark.orange { background-color: #FFB74D; color: #111; }
130	mark.brown { background-color: #BCAAA4; color: #111; }
131	mark.red { background-color: #E57373; color: #111; }
132	mark.purple { background-color: #CE93D8; color: #111; }
133	mark.indigo { background-color: #9FA8DA; color: #111; }
134	mark.blue { background-color: #64B5F6; color: #111; }
135	mark.cyan { background-color: #4DD0E1; color: #111; }
136	mark.teal { background-color: #4DB6AC; color: #111; }
137	mark.green { background-color: #81C784; color: #111; }
138	mark.grey, mark.gray { background-color: #B0BEC5; color: #111; }
139
140	/* text format helper classes: */
141	.nowrap {
142		white-space: nowrap !important;
143		overflow: hidden;
144		text-overflow: ellipsis;
145	}
146	.small-text {
147		font-size: smaller !important;
148		line-height: 1.4em;
149	}
150	.large-text {
151		font-size: larger !important;
152		line-height: 1.4em;
153	}
154	.clear-right {
155		clear: right;
156	}
157	.clear-left {
158		clear: left;
159	}
160	.clear {
161		clear: both;
162	}
163
164	/* repeating the float classes from the Ad-Hominem template: */
165	.float-left, .float-right {
166		width: 50%;
167		max-width: 220px;
168		min-width: 150px;
169		font-size: smaller;
170		line-height: 1.5em;
171	}
172	&.float-left {
173		clear: left;
174		float: left;
175		margin-right: .5em;
176	}
177	&.float-right {
178		clear: right;
179		float: right;
180		margin-left: .5em;
181	}
182
183	/* grid-layout classes */
184	.grid-2-columns,
185	.grid-3-columns,
186	.grid-4-columns {
187		display: grid;
188	}
189	.grid-2-columns {
190		grid-template-columns: 1fr 1fr;
191		grid-gap: 0 .5em;
192	}
193	.grid-3-columns {
194		grid-template-columns: 1fr 1fr 1fr;
195		grid-gap: 0 .33em;
196	}
197	.grid-4-columns {
198		grid-template-columns: 1fr 1fr 1fr 1fr;
199		grid-gap: 0 .25em;
200	}
201
202	/* grid cell classes: */
203	.colspan-2 { grid-column-end: span 2; }
204	.colspan-3 { grid-column-end: span 3; }
205	.colspan-4 { grid-column-end: span 4; }
206	.rowspan-2 { grid-row-end: span 2; }
207	.rowspan-3 { grid-row-end: span 3; }
208	.rowspan-4 { grid-row-end: span 4; }
209
210	/* Definition List styles: */
211	dt { font-weight: 600; }
212	dd { margin-left: 1.25em; margin-bottom: .5em; }
213	dl.compact { display: grid; grid-template-columns: min-content auto; }
214	dl.compact dt { grid-column-start: 1; }
215	dl.compact dd { grid-column-start: 2; margin-bottom: 0; }
216
217	/* disclosure and summary: */
218	details summary { cursor: pointer; }
219}
220
221/* RTL Overrides */
222main {
223	[dir=rtl] &,
224	& *[dir=rtl] {
225		.info, .tip, .important, .alert, .help, .download, .todo {
226			padding: 1pt 1.5em 1pt .25em;
227			border-width: 1px 4pt 1px 1px;
228			border-left-color: #CCC;
229			background-position: right .25em center;
230		}
231		div.info, div.tip, div.important, div.alert, div.help, div.download, div.todo,article.info, article.tip, article.important, article.alert, article.help, article.download, article.todo, aside.info, aside.tip, aside.important, aside.alert, aside.help, aside.download, aside.todo, section.info, section.tip, section.important, section.alert, section.help, section.download, section.todo, figure.info, figure.tip, figure.important, figure.alert, figure.help, figure.download, figure.todo {
232			padding-right: 2em;
233			background-position: right .5em 1.3em;
234		}
235		.info { border-right-color: #0085F2; }
236		.tip { border-right-color: #FFCA28; }
237		.important { border-right-color: #FF9800; }
238		.alert { border-right-color: #B71C1C; }
239		.help { border-right-color: #7986CB; }
240		.download { border-right-color: #66BB6A; }
241		.todo { border-right-color: #4DD0E1; }
242	}
243	.info[dir=rtl], .tip[dir=rtl], .important[dir=rtl],
244	.alert[dir=rtl], .help[dir=rtl], .download[dir=rtl], .todo[dir=rtl] {
245		padding: 1pt 1.5em 1pt .25em;
246		border-width: 1px 4pt 1px 1px;
247		border-right-color: #CCC;
248		background-position: right .25em center;
249	}
250	div.info[dir=rtl], div.tip[dir=rtl], div.important[dir=rtl], div.alert[dir=rtl], div.help[dir=rtl], div.download[dir=rtl], div.todo[dir=rtl],article.info[dir=rtl], article.tip[dir=rtl], article.important[dir=rtl], article.alert[dir=rtl], article.help[dir=rtl], article.download[dir=rtl], article.todo[dir=rtl], aside.info[dir=rtl], aside.tip[dir=rtl], aside.important[dir=rtl], aside.alert[dir=rtl], aside.help[dir=rtl], aside.download[dir=rtl], aside.todo[dir=rtl], section.info[dir=rtl], section.tip[dir=rtl], section.important[dir=rtl], section.alert[dir=rtl], section.help[dir=rtl], section.download[dir=rtl], section.todo[dir=rtl], figure.info[dir=rtl], figure.tip[dir=rtl], figure.important[dir=rtl], figure.alert[dir=rtl], figure.help[dir=rtl], figure.download[dir=rtl], figure.todo[dir=rtl] {
251		padding-right: 2em;
252		background-position: right .5em 1.3em;
253	}
254	.info[dir=rtl] { border-right-color: #0085F2; }
255	.tip[dir=rtl] { border-right-color: #FFCA28; }
256	.important[dir=rtl] { border-right-color: #FF9800; }
257	.alert[dir=rtl] { border-right-color: #B71C1C; }
258	.help[dir=rtl] { border-right-color: #7986CB; }
259	.download[dir=rtl] { border-right-color: #66BB6A; }
260	.todo[dir=rtl] { border-right-color: #4DD0E1; }
261
262}
263
264/* dark mode overrides */
265@media (prefers-color-scheme: dark) {
266
267	body.darkmode {
268		main {
269
270			.outline, .info, .tip, .important, .alert, .help, .download, .todo {
271				border-color: #39393D #39393D #39393D inherit;
272			}
273			.outline { border-color: #ADADB3; }
274			.info { border-color: #027BDF; background-color: #182631; color: inherit; }
275			.tip { border-color: #F9A825; background-color: #46361e; }
276			.important { border-color: #E57403; background-color: #532E1D; }
277			.alert { border-color: #FF2A2A; background-color: #482124; }
278			.help { border-color: #4157FF; background-color: #20233C; }
279			.download { border-color: #288D30; background-color: #203125; }
280			.todo { border-color: #006064; background-color: #1A3236; }
281
282			.alert::before { filter: brightness(1.5); }
283			.help::before { filter: brightness(2.5); }
284			.download::before { filter: brightness(1.5); }
285
286			/* text colours: */
287			.yellow { color: #FDD835; }
288			.orange { color: #FB8C00; }
289			.brown { color: #A5847E; }
290			.red { color: #FF4314; }
291			.purple { color: #BC6DCA; }
292			.indigo { color: #7986CB; }
293			.blue { color: #42A5F5; }
294			.cyan { color: #00BCD4; }
295			.teal { color: #26A69A; }
296			.green { color: #43A047; }
297			.grey, .gray { color: #78909C; }
298
299			/* special case: markers: */
300			mark.yellow { background-color: #754E00; color: #CCC; }
301			mark.orange { background-color: #943400; color: #CCC; }
302			mark.brown { background-color: #4E342E; color: #CCC; }
303			mark.red { background-color: #A81A1A; color: #CCC; }
304			mark.purple { background-color: #6A1B9A; color: #CCC; }
305			mark.indigo { background-color: #1A237E; color: #CCC; }
306			mark.blue { background-color: #0D47A1; color: #CCC; }
307			mark.cyan { background-color: #006064; color: #CCC; }
308			mark.teal { background-color: #004D40; color: #CCC; }
309			mark.green { background-color: #1B5E20; color: #CCC; }
310			mark.grey, mark.gray { background-color: #37474F; color: #CCC; }
311
312		}
313	}
314}
315
316/* layout overrides for narrow screens: */
317@media (max-width: 670px) {
318	body.dokuwiki main {
319		.grid-2-columns,
320		.grid-3-columns {
321			grid-template-columns: 100%;
322		}
323		.grid-4-columns {
324			grid-template-columns: 1fr 1fr;
325		}
326
327		.colspan-2,
328		.colspan-3,
329		.colspan-4 { grid-column-end: span 1; }
330
331		.float-left, .float-right {
332			float: none;
333			clear: both;
334			width: initial;
335			max-width: initial;
336			min-width: initial;
337			margin: 0;
338		}
339	}
340}
341@media (max-width: 440px) {
342	main {
343		.grid-4-columns {
344			grid-template-columns: 100%;
345		}
346	}
347}