xref: /template/ad-hominem/css/layout.less (revision 7c865ba571c136612adcb2a76921caeca02d107e) 
1/**
2 * This contains the most basic layouts and styles
3 * @author Sascha Leib <sascha@leib.be>
4 */
5
6html, body, * {
7	font-family:	@ini_default_fonts;
8	margin:			0;
9	padding:		0;
10}
11body {
12	background-color:	@ini_background_site;
13	font-size:			@ini_default_font_size;
14	letter-spacing:		@ini_default_letter_spacing;
15}
16
17#skip-link {
18	position:			fixed;
19	left:				4pt;
20	top:				4pt;
21	width:				auto;
22	z-index:			9999;
23}
24#skip-link a {
25    position:			absolute;
26	background-color:	@ini_background;
27	font-size:			1.25em;
28	color:				@ini_link;
29	height:				1px;
30	overflow:			hidden;
31	clip:				rect(1px, 1px, 1px, 1px);
32}
33#skip-link a:focus {
34	position:			static;
35	display:			inline-block;
36	padding:			8px;
37	height:				auto;
38	clip:				auto;
39	overflow:			visible;
40    outline: 			2px solid @ini_focus_color;
41}
42#skip-link:focus {
43	display:		block;
44}
45
46.sronly {
47	position: absolute;
48	width: 0;
49	height: 0;
50	overflow: hidden;
51	display: block;
52}
53.printonly {
54	display:		none;
55}
56div.no {
57	display: inline;
58	margin: 0;
59	padding: 0;
60}
61
62#globalTools a:link {
63	text-decoration:	none;
64}
65
66#gSiteTools {
67	justify-self: start;
68}
69#gSiteTools select {
70	display:	none;
71}
72#gUserTools {
73	justify-self:		end;
74	padding-right:		.5rem;
75}
76#gUserTools ul {
77	list-style:			none inside;
78	display:			block;
79}
80#gUserTools ul li {
81	display:			inline;
82}
83#gUserTools ul li::before {
84	content:		'\00B7';
85	display:		inline-block;
86	width:			.35em;
87	padding-right:	.35em;
88}
89#gUserTools ul li:first-child::before {
90	content:		'';
91}
92
93#header-layout,
94#footer-layout {
95	width:					100%;
96}
97
98#header-layout>header {
99	width:					100%;
100	max-width:				@ini_site_width;
101	margin:					0 auto;
102	padding-top:			.25rem;
103	display:				grid;
104	grid-template-columns:	@ini_sidebar_width auto @ini_sidebar_width;
105	grid-template-rows:		auto auto auto;
106	justify-items:			stretch;
107}
108
109#siteLogo {
110	grid-column:			1;
111	grid-row:				1 / span 3;
112	column-gap:				8px;
113	padding:				0 .25em 0 .5em;
114	display:				grid;
115	grid-template-columns:	64px auto;
116	grid-template-rows:		auto auto;
117}
118#siteLogo .logo {
119	margin-top:				3pt;
120	grid-column:			1;
121	grid-row:				1 / span 2;
122}
123#siteLogo .logo img {
124	width:					64px;
125	height:					auto;
126}
127#siteLogo .title,
128#siteLogo .claim {
129	grid-column:			2;
130	grid-row:				2;
131	align-self:				start;
132	font-size:				10pt;
133	padding-right:			.5em;
134	max-width:				e("calc(") @ini_sidebar_width e(" - 80px)")
135}
136#siteLogo .title {
137	grid-row:				1;
138	align-self:				center;
139	font-size:				14pt;
140	line-height:			1em;
141	margin:					0;
142}
143#siteLogo .title * {
144/*	font-family:			@ini_alt_fonts;
145	font-size:				13pt;	*/
146}
147
148#globalTools {
149	grid-column:			2 / span 2;
150	grid-row:				1;
151	text-align:				right;
152	font-size:				10pt;
153}
154#phSearch {
155	grid-column:			2;
156	grid-row:				2;
157	padding:				.5em 0;
158}
159#phSearch form {
160}
161#phSearch form>div.search-field {
162	width:					100%;
163	display:				grid;
164	grid-template-columns:	auto 20pt 20pt;
165	place-items:			stretch;
166	border:					@ini_border solid 1pt;
167	background:				@ini_background;
168	border-radius:			4pt;
169	-moz-box-shadow:		inset 0 0 3pt @ini_border;
170	-webkit-box-shadow:		inset 0 0 3pt @ini_border;
171	box-shadow:				inset 0 0 3pt @ini_border;
172	outline:				transparent solid 2pt;
173}
174#phSearch form>div.search-field.focus {
175	outline-color:		@ini_focus_color;
176}
177#phSearch form>div input {
178	grid-column:		1;
179	grid-row:			1;
180	z-index:			23;
181	font-size:			large;
182	padding:			2pt 0 2pt 4pt;
183	border:				transparent none 0;
184	border-radius:		3pt;
185	background-color:	transparent;
186}
187#phSearch form>div input:focus {
188	outline:		transparent none 0;
189}
190#phSearch form>div button {
191	border:				transparent solid 1pt;
192	background:			transparent none no-repeat center;
193	background-size:	13pt;
194	color:				transparent;
195	width:				2em;
196	height:				2em;
197	border-radius:		3pt;
198	overflow:			hidden;
199	margin:				1pt 1pt 1pt 0;
200	height:				auto;
201	outline:			transparent solid 2pt;
202}
203#phSearch form>div button[type=reset] {
204	background-image:	url('images/delete.svg');
205	border-right:		@ini_border solid 1pt;
206}
207#phSearch form>div button[type=submit] {
208	background-image:	url('images/search.svg');
209}
210#phSearch form>div button:hover {
211	background-color:	@ini_background_neu;
212	border-color:		@ini_border;
213}
214#phSearch form>div button:focus {
215	background-color:	@ini_background_neu;
216}
217
218#phSearch form .search-popup {
219	height:				5pt;
220	margin-right:		21pt;
221}
222#qsearch__out {
223	z-index:			20;
224	position:			relative;
225	left:				0;
226	width:				auto;
227	padding:			0;
228	white-space:		nowrap;
229	font-size:			1rem;
230	background-color:	@ini_background_site;
231	-moz-box-shadow:	2px 2px 2px 0 rgba(0,0,0,.5);
232	-webkit-box-shadow:	2px 2px 2px 0 rgba(0,0,0,.5);
233	box-shadow:			2px 2px 2px 0 rgba(0,0,0,.5);
234}
235#qsearch__out strong {
236	display:			none;
237	padding:			2pt;
238	font-weight:		normal;
239}
240#qsearch__out ul {
241	border:				@ini_border solid 1px;
242	border-top-width:	0;
243	max-height:			11em;
244}
245#qsearch__out li {
246	border-top:			@ini_border solid 1px;
247}
248#qsearch__out a {
249	display:			block;
250	padding:			2pt 0 2pt 4pt;
251    border: 			transparent solid 2px;
252}
253#qsearch__out a:focus {
254    border-color: 		@ini_focus_color;
255}
256
257#phTools{
258}
259#phInclude {
260	grid-column:		2 / span 2;
261	grid-row:			3;
262	margin-right:		2pt;
263}
264
265#main-layout {
266	width:					100%;
267	max-width:				@ini_site_width;
268	margin:					0 auto;
269	display:				flex;
270	flex-direction:			row;
271	flex-wrap:				nowrap;
272	justify-content:		space-between;
273	align-items:			stretch;
274	align-content:			flex-start;
275}
276
277#sidebar {
278	width:				100%;
279	max-width:			@ini_sidebar_width;
280	flex-grow:			0;
281}
282#sidebar.toggle.hide,
283#sidebar.toggle.alt {
284	max-width:			1em;
285}
286#sidebar p,
287#sidebar ul,
288#sidebar ol {
289	padding-left:		1.25em;
290}
291#sidebar ul {
292	list-style:			square outside;
293}
294#sidebar ul ~ ul, #sidebar ul ~ ol,
295#sidebar ol ~ ul, #sidebar ol ~ ol {
296	margin-top:			.5em;
297}
298#sidebar ul li,
299#sidebar ol li {
300	color:				@ini_text_alt;
301	padding:			.1em 0;
302}
303#sidebar dl dt {
304	font-weight:		bold;
305}
306#sidebar a:link,
307#sidebar a:visited {
308	color:		@ini_link;
309}
310
311#sidebar .home a::before {
312	content:	' ';
313	display:			inline-block;
314	width:				10pt;
315	height:				1em;
316	background:			transparent url('images/home.svg') no-repeat no-repeat 0 4px;
317	background-size:	.8em;
318	padding-right:		3pt;
319}
320#sidebar .curid {
321	font-weight:		bold;
322}
323#sidebar h4 {
324	font-size:			1rem;
325	margin:				0.25em 2pt;
326}
327#sidebar>button.tg_button {
328	float:					right;
329	display:				block;
330	background-color:		transparent;
331	border:					transparent none 0;
332	margin-right:			2px;
333	font-size:				1.5rem;
334}
335#sidebar>button:focus {
336	outline:	@ini_focus_color solid 2px;
337}
338#sidebar>button.tg_button span {
339	display:		none;
340}
341#sidebar.hide>button.tg_button,
342#sidebar.alt>button.tg_button {
343	margin-left:			0;
344	width:					11pt;
345}
346#sidebar>button.tg_button span {
347
348}
349#sidebar>button.tg_button::after {
350	content:				'\2039';
351	color:					@ini_link;
352	display:				inline-block;
353	width:					.75em;
354	height:					1.25em;
355	text-align:				center;
356}
357#sidebar.hide>button.tg_button span,
358#sidebar.alt>button.tg_button span {
359	display:				none;
360}
361#sidebar.hide>button.tg_button::after,
362#sidebar.alt>button.tg_button::after {
363	content:				'\203A';
364	width:					auto;
365}
366
367#sidebar .tg_content {
368	line-height:			1.5em;
369	font-size:				11.5pt;
370}
371
372#sidebar hr {
373	border:					0;
374	height:					1pt;
375	background:				@ini_text_alt;
376	background-image:		linear-gradient(to right, @ini_background_alt, @ini_text_alt, @ini_background_alt);
377	margin:					.5em 1em .5em 0;
378}
379
380#sbNavigation {
381	margin:				1em .25em 0 1em;
382}
383#navBreadCrumbs {
384	margin-left:		.5em;
385}
386#navBreadCrumbs ol {
387	list-style:			decimal outside;
388	padding-left:		2em;
389}
390
391main {
392	width:				e("calc(90% - 5px)");
393	flex-grow:			100;
394	background-color:	@ini_background;
395	color:				@ini_text;
396	line-height:		1.5em;
397	padding:			1.5em 5% .75em 5%;
398	border:				@ini_border solid 1px;
399	border-radius:		5px;
400}
401
402#navYouAreHere {
403	display:			flex;
404	flex-flow:			row nowrap;
405	position:			relative;
406	top:				0;
407	left:				0;
408	height:				16pt;
409	overflow:			hidden;
410	white-space:		nowrap;
411}
412#navYouAreHere h4 {
413	display:		none /*inline-block */;
414	font-family:	@ini_default_fonts;
415	font-weight:	normal;
416	font-size:		small;
417	line-height:	1.5em;
418	margin:			0 .5em 0 0;
419}
420
421#navYouAreHere ol {
422	list-style:			none inside;
423	display:			flex;
424	line-height:		1.5em;
425	height:				100pt;
426	padding-left:		0;
427	margin:				0 2pt 0 0;
428	font-size:			small;
429	overflow:			scroll hidden;
430}
431#navYouAreHere ol li {
432	color:			@ini_headlines;
433	display:		inline;
434	margin-bottom:	0;
435	max-width:		20em;
436	min-width:		2.2em;
437	overflow:		hidden;
438	text-overflow:	'\202F...';
439}
440
441#navYouAreHere ol li:last-child { flex-shrink: 1; }
442#navYouAreHere ol li:nth-last-child(2) { flex-shrink: 2; }
443#navYouAreHere ol li:nth-last-child(3) { flex-shrink: 3; }
444#navYouAreHere ol li:nth-last-child(4) { flex-shrink: 4; }
445#navYouAreHere ol li:nth-last-child(5) { flex-shrink: 5; }
446#navYouAreHere ol li:nth-last-child(6) { flex-shrink: 6; }
447
448#navYouAreHere ol li.home {
449	min-width:		14px;
450	flex-shrink:	0 !important;
451}
452
453#navYouAreHere ol li::before {
454	content:		'\25B8';
455	padding:		0 2pt;
456	color:			@ini_text_alt;
457}
458#navYouAreHere ol li.home::before {
459	content:		'';
460	padding:		0;
461}
462#navYouAreHere ol li.home a {
463	display:		inline-block;
464	width:			14px;
465	overflow:		hidden;
466}
467#navYouAreHere ol li.home a::before {
468	content:		' ';
469	display:		inline-block;
470	width:			14px;
471	height:			1em;
472	background:		transparent url('images/home.svg') no-repeat left bottom;
473	filter:			hue-rotate(-80deg);
474}
475
476/* fix for issue with homepage */
477body.home #navYouAreHere ol li:last-child {
478	display:		none;
479}
480
481main>footer {
482	margin-top:			1em;
483	padding-top:		1em;
484	text-align:			right;
485}
486main>footer p.docInfo {
487	display:			inline-block;
488	border-top:			@ini_separator solid 1px;
489	padding-top:		.5em;
490	padding-left:		5%;
491	font-size:			small;
492	color:				@ini_text_alt;
493}
494
495/* Table of Contents */
496#toc {
497	clear: both;
498	float: right;
499	width: auto;
500	min-width: 32px;
501	line-height: 1.5em;
502	text-align: left;
503	max-width: @ini_toc_width;
504	background-color: transparent;
505	border-left: @ini_border solid 1pt;
506}
507#toc ol {
508	list-style: none inside;
509	padding: 0 0 0 1em;
510	margin: 0;
511}
512#toc ol li {
513	font-size: small;
514	line-height: 1.25em;
515	margin: .5em 0;
516}
517#toc h3 {
518	margin: 0;
519	padding: 0 0 .5em .5em;
520	width: auto;
521	height: 1.2em;
522	font-family: @ini_alt_fonts;
523	font-size: small;
524	overflow: hidden;
525	font-weight: bold;
526	line-height: 1.5em;
527	border-radius: 3pt;
528	color: @ini_text_neu;
529}
530#toc h3::after {
531	content: '\203A';
532	display: inline-block;
533	width: 1.5em;
534	text-align: center;
535}
536#toc h3:focus {
537	outline: @ini_focus_color solid 2px;
538}
539#toc.hide h3::after,
540#toc.alt h3::after {
541	content: '\2630';
542}
543
544#toc.hide h3>span,
545#toc.alt h3>span {
546	display: none;
547}
548
549/* edit buttons */
550main .secedit {
551	float:				right;
552	margin-top:			-22pt;
553	line-height:		0;
554}
555main .secedit button {
556	border:				@ini_border solid 1pt;
557	background-color:	transparent;
558	color:				transparent;
559	width:				20pt;
560	height:				20pt;
561	border-radius:		50%;
562	font-size:			0;
563	cursor:				pointer;
564}
565main .secedit button::before {
566	content:			' ';
567	display:			inline-block;
568	width:				13pt;
569	height:				13pt;
570	padding:			2pt;
571	background:			transparent url('images/edit.svg') no-repeat center;
572	background-size:	10pt;
573}
574main .secedit button:hover {
575	background-color:	@ini_highlight;
576	border:				@ini_text_alt solid 1pt;
577}
578main .secedit button:focus {
579	background-color:	@ini_highlight;
580	border:				@ini_focus_color solid 2px;
581	outline:			transparent none 0;
582}
583main .secedit button:hover::before {
584}
585
586main .section_highlight {
587	border-radius:		.5em;
588	outline: 			orange dashed 3px;
589}
590
591/* math fonts */
592main math,
593main .math,
594main .math * {
595	font-family:		@ini_math_fonts;
596	font-size:			12pt;
597	line-height:		1em;
598}
599
600/* figure block */
601main figure {
602	background-color:	@ini_background_alt;
603	border:				@ini_border solid 1px;
604	padding:			.5em;
605}
606main figure figcaption {
607}
608main figure>*:first-child {
609	margin-top:			.25em;
610}
611
612body.mediadetail figure img {
613	background:			transparent url('images/transparency.gif');
614}
615body.mediadetail figure table.img_detail,
616body.mediadetail figure table.img_detail th,
617body.mediadetail figure table.img_detail td {
618	border:			none;
619}
620body.mediadetail figure table.img_detail th {
621	text-align:		right;
622	white-space:	nowrap;
623	border:			none;
624}
625
626#footer-layout {
627	padding-top:		1.5em;
628}
629#footer-layout > footer {
630	width:				100%;
631	max-width:			@ini_site_width;
632	margin:				0 auto;
633	display:			grid;
634	grid-template-columns: @ini_sidebar_width 1fr 1fr 1fr;
635	grid-template-rows:	auto auto;
636	grid-gap:			6pt;
637	align-items:		stretch;
638}
639#footer-layout > footer .ftSection {
640	padding-left:		1em;
641}
642#footer-layout > footer .ftSection ul {
643	list-style:			none inside;
644	padding-left:		.5em;
645}
646#footer-layout > footer .ftSection ul li {
647	margin-bottom:		.5em;
648	font-size:			small;
649}
650#footer-layout > footer .ftSection ul li a {
651	white-space: nowrap;
652}
653#footer-layout > footer h4 {
654	color:				@ini_headlines;
655	margin:				0 0 1em 0;
656	font-family:		@ini_alt_fonts;
657	font-size:			1rem;
658}
659
660#footer-layout > footer #ftPlaceholder>* {
661	display:			none;
662}
663
664#ftLicenseButtons {
665	grid-row:			2;
666	grid-column:		2 / span 3;
667	text-align:			center;
668	font-size:			small;
669	padding-top:		1em;
670}
671#ftLicenseButtons hr {
672	border:				0;
673	height:				1pt;
674	background:			#333;
675	background-image:	linear-gradient(to right, @ini_background_alt, @ini_text_alt, @ini_background_alt);
676}
677#ftLicenseButtons p.license {
678	margin:				.5em 0 1em 0;
679	font-size:			small;
680	color:				@ini_text_alt;
681}
682#ftLicenseButtons p.license bdi {
683	display:			block;
684	width:				100%;
685}
686
687/* togglers */
688.toggle .tg_button.active {
689	color:			@ini_link;
690	cursor:			pointer;
691}
692.toggle .tg_content,
693.toggle.auto .tg_content,
694.toggle.show .tg_content {
695	display:		initial;
696}
697.toggle.hide .tg_content,
698.toggle.alt .tg_content {
699	display:		none;
700}
701
702/* config overrides */
703#config__manager #dw__configform p:last-child {
704	position:			-webkit-sticky; /* Safari */
705	position:			sticky;
706	bottom:				0;
707	box-sizing:			border-box;
708	background-color:	rgba(255,255,255,.67);
709	border:				@ini_border solid 2pt;
710	padding:			.5em 0;
711	z-index:			9;
712	display:			grid;
713	grid-template-columns: auto auto;
714	justify-items:		center;
715}
716#config__manager #dw__configform p:last-child button {
717	border:				@ini_border solid 2pt;
718	padding:			.25em .5em;
719}
720#config__manager #dw__configform p:last-child button[type=submit] {
721	background-color:	#ccddff;
722}
723
724#config__manager fieldset {
725	background-color:	transparent;
726	color:				inherit;
727}
728
729#config__manager table, #config__manager table th, #config__manager table td {
730	border: none;
731}
732#config__manager td.label span.outkey {
733	background-color:		inherit;
734}
735
736#config__manager tr.default .input,
737#config__manager tr .input {
738	background-color:	transparent;
739}
740
741/* dark mode overrides */
742@media screen and (prefers-color-scheme: dark) {
743
744	body.darkmode { background-color: @ini_background_site_dark; color: @ini_text_dark; }
745	body.darkmode main { background-color: @ini_background_dark; color: @ini_text_dark; border-color: @ini_background_dark; }
746	body.darkmode #skip-link a { background-color: @ini_background_dark;color: @ini_link_dark;}
747	body.darkmode #navYouAreHere ol li { color: @ini_headlines_dark; }
748	body.darkmode main h1,
749	body.darkmode main h2,
750	body.darkmode main h3,
751	body.darkmode main h4,
752	body.darkmode main h5,
753	body.darkmode main h6 { color: @ini_headlines_dark; }
754	body.darkmode #sbNavigation h1,
755	body.darkmode #sbNavigation h2,
756	body.darkmode #sbNavigation h3,
757	body.darkmode #sbNavigation h4,
758	body.darkmode #sbNavigation h5,
759	body.darkmode #sbNavigation h6 { color: @ini_headlines_dark; }
760	body.darkmode #sidebar hr { background-image:	linear-gradient(to right, @ini_background_site_dark, @ini_text_alt, @ini_background_site_dark); }
761	body.darkmode #ftLicenseButtons hr { background-image: linear-gradient(to right, @ini_background_site_dark, @ini_text_dark, @ini_background_site_dark); }
762	body.darkmode #sidebar a:link,
763	body.darkmode #sidebar a:visited { color: @ini_link_dark; }
764	body.darkmode #footer-layout>footer h4 { color: @ini_headlines_dark; }
765
766	body.darkmode #phSearch form>div.search-field { border-color: @ini_border_dark; background: @ini_background_dark; }
767	body.darkmode #phSearch form>div input { color: @ini_text_dark; }
768	body.darkmode #phSearch form > div button[type="reset"] {border-right-color: @ini_border_dark; }
769
770	body.darkmode #config__manager #dw__configform p:last-child {
771		background-color: rgba(57,57,61,.67);
772		border-color:	@ini_border_dark;
773	}
774	body.darkmode #config__manager #dw__configform p:last-child button {
775		background-color:	@ini_background_dark;
776		border-color:		@ini_border_dark;
777		color:				@ini_missing_dark;
778	}
779	body.darkmode #config__manager #dw__configform p:last-child button[type=submit] {
780		border-color:		@ini_existing_dark;
781		background-color:	@ini_background_dark;
782		color:				@ini_existing_dark;
783	}
784
785	body.darkmode #toc { border-left-color: @ini_border_dark; }
786	body.darkmode #toc h3 { color: @ini_headlines_dark; }
787
788	body.darkmode #qsearch__out {
789		background-color:	@ini_background_site_dark;
790	}
791	body.darkmode #qsearch__out ul,
792	body.darkmode #qsearch__out li {
793		border-color:	@ini_border_dark;
794	}
795
796	body.darkmode #navYouAreHere ol li::before {
797		color: @ini_text_alt_dark;
798	}
799	body.darkmode main > footer p.docInfo {
800		color: @ini_text_alt_dark;
801	}
802	body.darkmode #ftLicenseButtons p.license {
803		color: @ini_text_alt_dark;
804	}
805
806	/* Extension Manager: */
807	body.darkmode #extension__manager .panelHeader {
808		background-color: @ini_background_alt_dark;
809	}
810	body.darkmode #extension__manager ul.tabs li a {
811		background-color: @ini_background_dark;
812		border-color: @ini_border_dark;
813		color: @ini_text_dark
814	}
815	body.darkmode #extension__manager ul.tabs li.active a {
816		background-color: @ini_background_alt_dark;
817		border-color: @ini_text_dark;
818	}
819	body.darkmode #extension__list ul.extensionList li {
820		color: @ini_text_dark
821	}
822	body.darkmode main figure {
823		background-color: rgba(0,0,0,.2);
824		border-color: @ini_border_dark;
825	}
826	body.darkmode #config__manager tr.default .input,
827	body.darkmode #config__manager tr .input {
828		color:	@ini_text_dark;
829	}
830}
831
832/* tablet break point */
833@media all and (max-width: @ini_tablet_width) {
834	#header-layout>header {
835		margin:				0;
836		grid-template-columns:	e("repeat(2, auto)");
837		grid-template-rows:		e("repeat(4, auto)");
838	}
839	#header-layout>header #siteLogo {
840		grid-column:		1;
841		grid-row:			1;
842	}
843	#header-layout>header #globalTools {
844		grid-row:			1;
845		grid-column:		2;
846	}
847	#header-layout>header #globalTools ul li {
848		display:			block;
849		margin-bottom:		.5em;
850	}
851	#header-layout>header #globalTools ul li:before {
852		content:			'';
853	}
854	#header-layout>header #phSearch {
855		grid-row:			2;
856		grid-column:		1 / span 2;
857		padding:			.5em 1em 0 68px;
858	}
859	#header-layout>header #phTools {
860		grid-row:			3;
861		grid-column:		1 / span 2;
862	}
863	#header-layout>header #phInclude {
864		grid-row:			4;
865		grid-column:		1 / span 2;
866		margin:				0 6pt 5pt 64px;
867	}
868
869	#qsearch__out ul {
870		max-height:		100%;
871	}
872
873	#main-layout {
874		display:			block;
875	}
876
877	#sidebar.toggle {
878		width:					auto;
879		margin-left:			.5em;
880		padding:				0;
881		position:				relative;
882		top:					-2.25em;
883		height:					.25em;
884	}
885	#sidebar>button.tg_button {
886		float:					none;
887	}
888	#sidebar.auto>button.tg_button,
889	#sidebar.hide>button.tg_button,
890	#sidebar.alt>button.tg_button,
891	#sidebar.show>button.tg_button {
892		width:					1.5em;
893	}
894	#sidebar>button.tg_button span {
895		display:				none;
896	}
897
898	#sidebar>button.tg_button::after {
899		content:				'\2630';
900	}
901	#sidebar.hide>button.tg_button::after,
902	#sidebar.alt>button.tg_button::after {
903		content:				'\2715';
904	}
905
906	#sidebar .tg_content {
907		min-width:				@ini_sidebar_width;
908		padding-right:			0;
909		margin-top:				10px;
910		padding-bottom:			1em;
911		background-color:		@ini_background_site;
912		position:				absolute;
913		z-index:				18;
914		border:					@ini_border solid 1px;
915		-moz-box-shadow:		2px 2px 2px @ini_border;
916		-webkit-box-shadow:		2px 2px 2px @ini_border;
917		box-shadow:				2px 2px 2px @ini_border;
918	}
919
920	#sidebar .tg_content:before {
921		content:				' ';
922		z-index:				19;
923		width:					0;
924		height:					0;
925		position:				absolute;
926		top:					-10px;
927		left:					7px;
928		border-width:			0 10px 10px;
929		border-style:			solid;
930		border-color:			transparent;
931		border-bottom-color:	@ini_border;
932	}
933	#sidebar .tg_content:after {
934		content:				' ';
935		z-index:				20;
936		width:					0;
937		height:					0;
938		position:				absolute;
939		top:					-8px;
940		left:					8px;
941		border-width:			0 9px 8px;
942		border-style:			solid;
943		border-color:			transparent;
944		border-bottom-color:	@ini_background_site;
945	}
946
947	#sbNavigation {
948		padding-left:		.5em;
949		margin-left:		0;
950	}
951	#sidebar h3,
952	#sidebar h4	{
953		font-size:			1rem;
954		padding:			.25em 0 .25em 2pt;
955	}
956	#sidebar ul, #sidebar ol {
957		margin-left:		.5em;
958	}
959	#sidebar ul ul, #sidebar ol ol,
960	#sidebar ul ol, #sidebar ol ul {
961		margin-left:		0;
962	}
963	#sidebar p,
964	#sidebar li	{
965		font-size:			small;
966		padding:			.25em 0 .25em .25em;
967	}
968
969	main {
970		width:				auto;
971		box-shadow:			0 0 0 0 transparent;
972	}
973
974	.toggle .tg_content,
975	.toggle.alt .tg_content,
976	.toggle.show .tg_content {
977		display:		initial;
978	}
979	.toggle.auto .tg_content {
980		display:		none;
981	}
982
983	#toc.hide h3::after,
984	#toc.auto h3::after {
985		content:			'\2630';
986	}
987	#toc.alt h3::after {
988		content:			'\203A';
989	}
990
991	#toc.hide h3>span,
992	#toc.auto h3>span {
993		display:			none;
994	}
995	#toc.alt h3>span {
996		display:			inline-block;
997	}
998
999	#footer-layout>footer {
1000		grid-template-columns: 12pt 1fr 1fr 1fr;
1001	}
1002
1003	/* admin interface */
1004	.dokuwiki div.ui-admin ul.admin_tasks {
1005		float: none;
1006		width: auto;
1007	}
1008	.dokuwiki div.ui-admin #admin__version {
1009		display: none;
1010	}
1011}
1012
1013@media all and (max-width: @ini_tablet_width) and (prefers-color-scheme: dark) {
1014	body.darkmode #sidebar .tg_content {
1015		background-color:	@ini_background_dark;
1016		border-color:		@ini_border_dark;
1017		-moz-box-shadow:		3px 3px 3px @ini_background_site_dark;
1018		-webkit-box-shadow:		3px 3px 3px @ini_background_site_dark;
1019		box-shadow:				3px 3px 3px @ini_background_site_dark;
1020	}
1021	body.darkmode #sidebar .tg_content:before {
1022		border-bottom-color:	@ini_border_dark;
1023	}
1024	body.darkmode #sidebar .tg_content:after {
1025		border-bottom-color:	@ini_background_dark;
1026	}
1027	body.darkmode #sidebar hr {
1028		background:				@ini_link_dark;
1029		background-image:		linear-gradient(to right, @ini_background_dark, @ini_headlines_dark, @ini_background_dark);
1030	}
1031}
1032
1033/* medium break point: */
1034@media all and (max-width: @ini_phone_width) {
1035	#footer-layout {
1036		padding-top:			.5em;
1037	}
1038	#footer-layout>footer {
1039		grid-template-columns: 100%;
1040		grid-template-rows: auto auto auto auto auto;
1041	}
1042	#footer-layout>footer .ftSection {
1043		grid-column:	1;
1044		padding: 		0 .25em 0 .5em;
1045		white-space:	normal;
1046	}
1047	#footer-layout>footer .ftSection ul {
1048		padding-left:	0;
1049	}
1050	#footer-layout>footer .ftSection li {
1051		display:		inline-block;
1052	}
1053	#footer-layout>footer .ftSection li::before {
1054		content:		'\00B7';
1055		display:		inline;
1056		width:			.35em;
1057		padding:		0 .35em;
1058	}
1059	#footer-layout>footer .ftSection li:first-child::before {
1060		content:		'';
1061		padding-left:	0;
1062	}
1063
1064	#footer-layout>footer #ftPlaceholder {
1065		grid-row:		1;
1066	}
1067	#footer-layout>footer #ftInclude {
1068		grid-row:		2;
1069	}
1070	#footer-layout>footer #ftSiteTools {
1071		grid-row:		3;
1072	}
1073	#footer-layout>footer #ftPageTools {
1074		grid-row:		4;
1075	}
1076	#footer-layout>footer #ftLicenseButtons {
1077		grid-column:	1;
1078		grid-row:		5;
1079	}
1080
1081	#footer-layout>footer h4 {
1082		margin-bottom:		.5em;
1083	}
1084
1085	main blockquote {
1086		margin-left:	.15em;
1087		margin-right:	0;
1088	}
1089	main ul, main ol {
1090		margin-left:	.5em;
1091		margin-right:	0;
1092		padding-left:	.75em;
1093	}
1094}