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