xref: /template/ad-hominem/css/layout.less (revision 6b8be8bdb588e730590d3a388319181f61b9f25d) 
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	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			&:last-child { flex-shrink: 1; }
369			&:nth-last-child(2) { flex-shrink: 2; }
370			&:nth-last-child(3) { flex-shrink: 3; }
371			&:nth-last-child(4) { flex-shrink: 4; }
372			&:nth-last-child(5) { flex-shrink: 5; }
373			&:nth-last-child(6) { flex-shrink: 6; }
374
375			&.home {
376				min-width:		14px;
377				flex-shrink:	0 !important;
378			}
379
380			&::before {
381				content:		'\25B8';
382				padding:		0 2pt;
383				color:			@ini_text_alt;
384			}
385			&.home::before {
386				content:		'';
387				padding:		0;
388			}
389			&.home a {
390				display:		inline-block;
391				width:			14px;
392				overflow:		hidden;
393			}
394			&.home a::before {
395				content:		' ';
396				display:		inline-block;
397				width:			14px;
398				height:			1em;
399				background:		transparent url('images/home.svg') no-repeat left bottom;
400				filter:			hue-rotate(-80deg);
401			}
402		}
403	}
404}
405
406/* fix for issue with homepage */
407body.home #navYouAreHere ol li:last-child {
408	display:		none;
409}
410
411/* Table of Contents */
412#toc {
413	& {
414		clear: both;
415		float: right;
416		width: auto;
417		min-width: 32px;
418		padding-left: .25em;
419		line-height: 1.5em;
420		text-align: left;
421		max-width: @ini_toc_width;
422		background-color: @ini_background;
423		border: transparent none 0;
424		border-left: @ini_border solid 1pt;
425	}
426	ol {
427		list-style: none inside;
428		padding: 0 0 0 1em;
429		margin: 0;
430	}
431	ol li {
432		font-size: small;
433		line-height: 1.25em;
434		margin: .5em 0;
435	}
436	a[href^='#']:link,
437	a[href^='#']:visited {
438		color: @ini_inpage;
439	}
440}
441
442#toc-menubutton {
443	background: transparent;
444	margin-left: .5em;
445	padding: 0 .25em;
446	width: auto;
447	height: auto;
448	overflow: hidden;
449	border: transparent 0 none;
450	border-radius: 3pt;
451}
452#toc-menubutton > span {
453	font-family: @ini_headline_fonts;
454	line-height: 1.5em;
455	font-weight: bold;
456	color: @ini_headlines;
457}
458#toc-menubutton::after {
459	content: '\203A';
460	display: inline-block;
461	width: 1.5em;
462	text-align: center;
463}
464
465.hide #toc-menubutton::after,
466.alt #toc-menubutton::after {
467	content: '\2630';
468}
469
470.hide #toc-menubutton>span,
471.alt #toc-menubutton>span {
472	display: none;
473}
474
475main {
476	& {
477		width: e("calc(90% - 5px)");
478		flex-grow: 100;
479		background-color: @ini_background;
480		color: @ini_text;
481		line-height: 1.5em;
482		padding: 1.5em 5% .75em 5%;
483		border: @ini_border solid 1px;
484		border-radius: 5px;
485	}
486
487	/* edit buttons */
488	.secedit {
489		float: right;
490		margin-top: -22pt;
491		line-height: 0;
492	}
493	.secedit button {
494		border: @ini_border solid 1pt;
495		background-color: transparent;
496		color: transparent;
497		width: 20pt;
498		height: 20pt;
499		border-radius: 50%;
500		font-size: 0;
501		cursor: pointer;
502	}
503	.secedit button::before {
504		content: ' ';
505		display: inline-block;
506		width: 13pt;
507		height: 13pt;
508		padding: 2pt;
509		background: transparent url('images/edit.svg') no-repeat center;
510		background-size: 10pt;
511	}
512	.secedit button:hover {
513		background-color: @ini_highlight;
514		border: @ini_text_alt solid 1pt;
515	}
516	.secedit button:focus {
517		background-color: @ini_highlight;
518		border: @ini_focus_color solid 2px;
519		outline: transparent none 0;
520	}
521	.secedit button:hover::before {
522	}
523
524	.section_highlight {
525		border-radius: .5em;
526		outline: orange dashed 3px;
527	}
528
529	/* math fonts */
530	math, .math, .math *,
531	.wrap_math, .wrap_math * {
532		font-family: @ini_math_fonts;
533		font-size: 12pt;
534		line-height: 1em;
535	}
536
537/* figure block */
538	figure {
539		& {
540			padding: .5em;
541			overflow: hidden;
542		}
543		figcaption {
544			clear: left;
545			margin-top: .5em;
546			font-size: smaller;
547			line-height: 1.4em;
548		}
549		figcaption p {
550			margin-bottom: 0;
551		}
552		figcaption.centered {
553			text-align: center;
554		}
555		& > *:first-child {
556			margin-top: .25em;
557		}
558		table {
559			background-color: @ini_background;
560			margin: 0;
561		}
562		div.table {
563			margin: 0;
564		}
565		& > p {
566			margin: 0;
567		}
568	}
569
570	& > footer {
571		margin-top: 1em;
572		padding-top: 1em;
573		text-align: right;
574	}
575	& > footer p.docInfo {
576		display: inline-block;
577		border-top: @ini_separator solid 1px;
578		padding-top: .5em;
579		padding-left: 5%;
580		font-size: small;
581		color: @ini_text_alt;
582	}
583}
584
585/* For both the sidebar and the main block */
586#main-layout {
587
588	/* Definition List styles: */
589	dl {
590		dt {
591			color: @ini_headlines;
592			font-weight: 600;
593		}
594		dd {
595			margin: .125em 1.25em;
596		}
597		&.compact {
598			& {
599				display: grid;
600				grid-template-columns: minmax(8em,min-content) auto;
601			}
602			dt {
603				grid-column-start: 1;
604				font-weight: 600;
605				margin: .125em .5em;
606			}
607			dd {
608				grid-column-start: 2;
609				margin-bottom: 0;
610				margin: .125em .5em;
611			}
612		}
613	}
614
615
616	/* details/summary styles */
617	details {
618		summary {
619			& {
620				display: inline-grid;
621				grid-template-columns: 1.25em auto;
622				column-gap: .125em;
623				align-items: center;
624				padding: .125em;
625				border-radius: .125em;
626				color: @ini_headlines;
627				font-weight: bold;
628				cursor: pointer;
629			}
630			&::before {
631				content: '';
632				display: inline-block;
633				background-color: @ini_link;
634				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");
635				width: 1.25em; height: 1.25em;
636				transform-origin: center;
637				transition-duration: .25s;
638				transition-timing-function: ease-in-out;
639				transform: rotate(-90deg);
640			}
641			&:hover {
642				& {
643					color: @ini_text;
644				}
645				&::before {
646					background-color: darken(@ini_link, 20%);
647				}
648			}
649			&::marker, &::-webkit-details-marker {
650				content: none;
651			}
652			&:focus {
653				outline: @ini_focus_color solid 2px;
654			}
655		}
656		&[open] summary::before {
657			transform: rotate(0deg);
658
659		}
660
661	}
662}
663
664body.mediadetail {
665	figure {
666		img {
667			background: transparent url('images/transparency.gif');
668		}
669		table {
670			&.img_detail,
671			&.img_detail th,
672			&.img_detail td {
673				border: none;
674			}
675			&.img_detail th {
676				text-align: right;
677				white-space: nowrap;
678				border: none;
679			}
680		}
681	}
682}
683
684#footer-layout {
685	& {
686		padding-top: 1.5em;
687	}
688	& > footer {
689		& {
690			width: 100%;
691			max-width: @ini_site_width;
692			margin: 0 auto;
693			display: grid;
694			grid-template-columns: @ini_sidebar_width 1fr 1fr 1fr;
695			grid-template-rows: auto auto;
696			grid-gap: 6pt;
697			align-items: stretch;
698		}
699		.ftSection {
700			padding-left: 1em;
701		}
702		.ftSection ul {
703			list-style: none inside;
704			padding-left: .5em;
705		}
706		.ftSection ul li {
707			margin-bottom: .5em;
708			font-size: small;
709		}
710		.ftSection ul li a {
711			white-space: nowrap;
712		}
713		h4 {
714			color: @ini_headlines;
715			margin: 0 0 1em 0;
716			font-family: @ini_headline_fonts;
717			font-size: 1rem;
718		}
719
720		#ftPlaceholder>* {
721			display: none;
722		}
723	}
724}
725
726#ftLicenseButtons {
727	& {
728		grid-row: 2;
729		grid-column: 2 / span 3;
730		text-align: center;
731		font-size: small;
732		padding-top: 1em;
733	}
734	hr {
735		border: 0;
736		height: 1pt;
737		background: #333;
738		background-image: linear-gradient(to right, @ini_background_alt, @ini_text_alt, @ini_background_alt);
739	}
740	p.license {
741		margin: .5em 0 1em 0;
742		font-size: small;
743		color: @ini_text_alt;
744	}
745	p.license bdi {
746		display: block;
747		width: 100%;
748	}
749}
750
751/* togglers */
752.toggle .tg_button.active {
753	color:			@ini_link;
754	cursor:			pointer;
755}
756.toggle .tg_content,
757.toggle.auto .tg_content,
758.toggle.show .tg_content {
759	display:		initial;
760}
761.toggle.hide .tg_content,
762.toggle.alt .tg_content {
763	display:		none;
764}
765
766/* config overrides */
767#config__manager {
768	#dw__configform {
769
770		.selectiondefault {
771			background-color: @ini_background_alt;
772		}
773		.selection input {
774			margin-left: .5em;
775		}
776
777		& p:last-child {
778			position: -webkit-sticky; /* Safari */
779			position: sticky;
780			bottom: 0;
781			box-sizing: border-box;
782			background-color: rgba(255,255,255,.67);
783			border: @ini_border solid 2pt;
784			padding: .5em 0;
785			z-index: 9;
786			display: grid;
787			grid-template-columns: auto auto;
788			justify-items: center;
789		}
790		 p:last-child button {
791			border: @ini_border solid 2pt;
792			padding: .25em .5em;
793			cursor: pointer;
794		}
795		p:last-child button[type=submit] {
796			background-color: #ccddff;
797		}
798	}
799
800	fieldset {
801		background-color: transparent;
802		color: inherit;
803	}
804
805	table {
806		th, td {
807			border: none;
808		}
809		td.label span.outkey {
810			background-color: inherit;
811		}
812
813		tr.default .input,
814		tr .input {
815			background-color: transparent;
816		}
817	}
818}
819#extension__list {
820	.legend a.info, .legend a.info.close {
821		width: 22px;
822		height: 22px;
823		background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 9H13V7H11M12 20C7.59 20 4 16.41 4 12C4 7.59 7.59 4 12 4C16.41 4 20 7.59 20 12C20 16.41 16.41 20 12 20M12 2A10 10 0 0 0 2 12A10 10 0 0 0 12 22A10 10 0 0 0 22 12A10 10 0 0 0 12 2M11 17H13V11H11V17Z' style='fill:%23ADADB3'/%3E%3C/svg%3E") center no-repeat;
824		background-size: 24px;
825		border-radius: 50%;
826		margin-bottom: .5em;
827	}
828}
829
830/* RTL Overrides */
831[dir=rtl] {
832	#phSearch form .search-popup {
833		margin-right: 0;
834		margin-left: 21pt;
835	}
836	#phSearch form > div input {
837		padding-right: 4pt;
838	}
839
840	#globalTools {
841		text-align: left;
842	}
843	#gUserTools {
844		padding: 0 0 0 .5rem;
845	}
846
847	#toc {
848		float: left;
849		border-left: transparent 0;
850		border-right: #CCC solid 1pt;
851	}
852	#toc ol {
853		padding: 0 1em 0 0;
854	}
855
856	.secedit {
857		float: left;
858	}
859
860	#navYouAreHere ol li::before {
861		content: '\25C2';
862	}
863	#navYouAreHere ol li.home::before {
864		content: '';
865	}
866
867	#sidebar {
868		> button.tg_button {
869			float: left;
870		}
871
872		p, ul, ol {
873			padding-left: 0;
874			padding-right: 1.25em;
875		}
876	}
877	#sbNavigation {
878		margin: 1em 1em 0 .25em;
879	}
880	main {
881		figure figcaption {
882			clear: right;
883		}
884
885		& > footer {
886			text-align: left;
887		}
888		& > footer p.docInfo {
889			padding-left: 0;
890			padding-right: 5%;
891		}
892	}
893}
894
895/* dark mode overrides */
896@media screen and (prefers-color-scheme: dark) {
897
898	body.darkmode {
899
900		#toc {
901			background-color: @ini_background_dark;
902			border-left: @ini_border_dark solid 1pt;
903		}
904
905		& { background-color: @ini_background_site_dark; color: @ini_text_dark; }
906		#skip-link a { background-color: @ini_background_dark;color: @ini_link_dark;}
907		#navYouAreHere ol {
908			li { color: @ini_headlines_dark;}
909			li::before { color: @ini_text_alt_dark;}
910		}
911		#phSearch form > div {
912			&.search-field { border-color: @ini_border_dark; background: @ini_background_dark; }
913			&.search-field:focus-within {
914				box-shadow: inset .125em .125em .25em fadeout(#000, 50%);
915			}
916			input { color: @ini_text_dark; }
917			button {color: @ini_text_dark; }
918			button[type="reset"] {border-right-color: @ini_border_dark; }
919		}
920		#qsearch__out {
921			& { background-color: @ini_background_site_dark; }
922			ul, li { border-color: @ini_border_dark; }
923		}
924
925		#config__manager {
926			#dw__configform {
927
928				.selectiondefault {
929					background-color: @ini_background_alt_dark;
930				}
931				.selectiondefault label {
932					color: @ini_text_dark;
933				}
934
935				p:last-child {
936					& {
937						background-color: rgba(57,57,61,.67);
938						border-color: @ini_border_dark;
939					}
940					button {
941						background-color: @ini_background_dark;
942						border-color: @ini_border_dark;
943						color: @ini_missing_dark;
944					}
945					button[type=submit] {
946						border-color: @ini_existing_dark;
947						background-color: @ini_background_dark;
948						color: @ini_existing_dark;
949					}
950				}
951			}
952		}
953
954		#toc {
955			& { border-color: @ini_border_dark; }
956			#toc-menubutton,
957			#toc-menubutton span { color: @ini_headlines_dark; }
958			a[href^='#']:link, a[href^='#']:visited { color: @ini_inpage_dark; }
959		}
960
961		main {
962			& { background-color: @ini_background_dark; color: @ini_text_dark; border-color: @ini_background_dark; }
963			h1, h2, h3, h4, h5, h6 { color: @ini_headlines_dark; }
964			& > footer p.docInfo { color: @ini_text_alt_dark; }
965			figure table { background-color: @ini_background_dark; }
966		}
967
968		#footer-layout > footer h4 { color: @ini_headlines_dark; }
969
970		#ftLicenseButtons {
971			p.license { color: @ini_text_alt_dark; }
972			hr { background-image: linear-gradient(to right, @ini_background_site_dark, @ini_text_dark, @ini_background_site_dark); }
973		}
974
975		/* Extension Manager: */
976		#extension__manager{
977			.panelHeader { background-color: @ini_background_alt_dark; }
978			ul.tabs li a { background-color: @ini_background_dark; border-color: @ini_border_dark; color: @ini_text_dark }
979			ul.tabs li.active a { background-color: @ini_background_alt_dark; border-color: @ini_text_dark; }
980			tr .input, tr.default .input { color: @ini_text_dark; }
981		}
982		#extension__list ul.extensionList li { color: @ini_text_dark; }
983	}
984
985	/* dark scrollbar styles for webkit browsers: */
986	&::-webkit-scrollbar-track {
987		background: @ini_background_site_dark;
988	}
989	&::-webkit-scrollbar-thumb {
990		background: @ini_background_alt_dark;
991	}
992	&::-webkit-scrollbar-thumb:hover {
993		background: @ini_background_dark;
994	}
995	/* dark scrollbars for firefox: */
996	* { scrollbar-color: @ini_background_alt_dark @ini_background_site_dark; }
997}
998
999/* tablet break point */
1000@media all and (max-width: @ini_tablet_width) {
1001	#header-layout > header {
1002		margin: 0;
1003		grid-template-columns: e("repeat(2, auto)");
1004		grid-template-rows: e("repeat(4, auto)");
1005	}
1006	#header-layout > header #siteLogo {
1007		grid-column: 1;
1008		grid-row: 1;
1009	}
1010	#header-layout > header #globalTools {
1011		grid-row: 1;
1012		grid-column: 2;
1013	}
1014	#header-layout>header #globalTools ul li {
1015		display: block;
1016		margin-bottom: .5em;
1017	}
1018	#header-layout>header #globalTools ul li:before {
1019		content: '';
1020	}
1021	#header-layout>header #phSearch {
1022		grid-row: 2;
1023		grid-column: 1 / span 2;
1024		padding: .5em 1em 0 68px;
1025	}
1026	[dir=rtl] #header-layout>header #phSearch {
1027		padding: .5em 68px 0 1em;
1028	}
1029	#header-layout>header #phTools {
1030		grid-row: 3;
1031		grid-column: 1 / span 2;
1032	}
1033	#header-layout>header #phInclude {
1034		grid-row: 4;
1035		grid-column: 1 / span 2;
1036		margin: 0 6pt 5pt 64px;
1037	}
1038
1039	#qsearch__out ul {
1040		max-height: 100%;
1041	}
1042
1043	#main-layout {
1044		display: block;
1045	}
1046
1047	#sidebar.toggle {
1048		width: auto;
1049		margin-left: .5em;
1050		padding: 0;
1051		position: relative;
1052		top: -2.25em;
1053		height: .25em;
1054	}
1055	#sidebar > button.tg_button,
1056	[dir=rtl] #sidebar > button.tg_button {
1057		float: none;
1058	}
1059	#sidebar.auto > button.tg_button,
1060	#sidebar.hide > button.tg_button,
1061	#sidebar.alt > button.tg_button,
1062	#sidebar.show > button.tg_button {
1063		width: 1.5em;
1064	}
1065	#sidebar > button.tg_button span {
1066		display: none;
1067	}
1068
1069	#sidebar > button.tg_button::after {
1070		content: '\2630';
1071	}
1072	#sidebar.hide>button.tg_button::after,
1073	#sidebar.alt>button.tg_button::after {
1074		content: '\2715';
1075	}
1076
1077	#sidebar .tg_content {
1078		min-width: @ini_sidebar_width;
1079		padding-right: 0;
1080		margin-top: 10px;
1081		padding-bottom: 1em;
1082		background-color: @ini_background_site;
1083		position: absolute;
1084		z-index: 18;
1085		border: @ini_border solid 1px;
1086		box-shadow: 2px 2px 2px @ini_border;
1087	}
1088
1089	#sidebar .tg_content:before {
1090		content: ' ';
1091		z-index: 19;
1092		width: 0;
1093		height: 0;
1094		position: absolute;
1095		top: -10px;
1096		left: 7px;
1097		border-width: 0 10px 10px;
1098		border-style: solid;
1099		border-color: transparent;
1100		border-bottom-color: @ini_border;
1101	}
1102	#sidebar .tg_content:after {
1103		content: ' ';
1104		z-index: 20;
1105		width: 0;
1106		height: 0;
1107		position: absolute;
1108		top: -8px;
1109		left: 8px;
1110		border-width: 0 9px 8px;
1111		border-style: solid;
1112		border-color: transparent;
1113		border-bottom-color: @ini_background_site;
1114	}
1115
1116	[dir=rtl] {
1117		#sidebar .tg_content {
1118			right: 5px;
1119		}
1120		#sidebar .tg_content:before {
1121			right: 7px;
1122		}
1123		#sidebar .tg_content:after {
1124			right: 8px;
1125		}
1126	}
1127
1128	#sbNavigation {
1129		padding-left: .5em;
1130		margin-left: 0;
1131	}
1132	#sidebar h3,
1133	#sidebar h4	{
1134		font-size: 1rem;
1135		padding: .25em 0 .25em 2pt;
1136	}
1137	#sidebar ul, #sidebar ol {
1138		margin-left: .5em;
1139	}
1140	#sidebar ul ul, #sidebar ol ol,
1141	#sidebar ul ol, #sidebar ol ul {
1142		margin-left: 0;
1143	}
1144	#sidebar p,
1145	#sidebar li	{
1146		font-size: small;
1147		padding: .25em 0 .25em .25em;
1148	}
1149
1150	main {
1151		width: auto;
1152		box-shadow: 0 0 0 0 transparent;
1153	}
1154
1155	.toggle .tg_content,
1156	.toggle.alt .tg_content,
1157	.toggle.show .tg_content {
1158		display: initial;
1159	}
1160	.toggle.auto .tg_content {
1161		display: none;
1162	}
1163
1164	#toc.hide h3::after,
1165	#toc.auto h3::after {
1166		content: '\2630';
1167	}
1168	#toc.alt h3::after {
1169		content: '\203A';
1170	}
1171
1172	#toc.hide h3 > span,
1173	#toc.auto h3 > span {
1174		display: none;
1175	}
1176	#toc.alt h3 > span {
1177		display: inline-block;
1178	}
1179
1180	#footer-layout > footer {
1181		grid-template-columns: 12pt 1fr 1fr 1fr;
1182	}
1183}
1184
1185@media all and (max-width: @ini_tablet_width) and (prefers-color-scheme: dark) {
1186	body.darkmode #sidebar {
1187		.tg_content {
1188			& {
1189				background-color: @ini_background_dark;
1190				border-color: @ini_border_dark;
1191				box-shadow: 3px 3px 3px @ini_background_site_dark;
1192			}
1193			&::before {
1194				border-bottom-color: @ini_border_dark;
1195			}
1196			&::after {
1197				border-bottom-color: @ini_background_dark;
1198			}
1199		}
1200		hr {
1201			background: @ini_link_dark;
1202			background-image: linear-gradient(to right, @ini_background_dark, @ini_headlines_dark, @ini_background_dark);
1203		}
1204	}
1205}
1206
1207/* medium break point: */
1208@media all and (max-width: @ini_phone_width) {
1209	#footer-layout {
1210		& {
1211			padding-top: .5em;
1212		}
1213		& > footer {
1214			& {
1215				grid-template-columns: 100%;
1216				grid-template-rows: auto auto auto auto auto;
1217			}
1218			.ftSection {
1219				grid-column: 1;
1220				padding: 0 .25em 0 .5em;
1221				white-space: normal;
1222			}
1223			.ftSection ul {
1224				padding-left: 0;
1225			}
1226			.ftSection li {
1227				display: inline-block;
1228			}
1229			.ftSection li::before {
1230				content: '\00B7';
1231				display: inline;
1232				width: .35em;
1233				padding: 0 .35em;
1234			}
1235			.ftSection li:first-child::before {
1236				content: '';
1237				padding-left: 0;
1238			}
1239
1240			#ftPlaceholder {
1241				grid-row: 1;
1242			}
1243			#ftInclude {
1244				grid-row: 2;
1245			}
1246			#ftSiteTools {
1247				grid-row: 3;
1248			}
1249			#ftPageTools {
1250				grid-row: 4;
1251			}
1252			#ftLicenseButtons {
1253				grid-column: 1;
1254				grid-row: 5;
1255			}
1256
1257			h4 {
1258				margin-bottom: .5em;
1259			}
1260		}
1261	}
1262
1263	main blockquote {
1264		margin-left: .15em;
1265		margin-right: 0;
1266	}
1267	main ul, main ol {
1268		margin-left: .5em;
1269		margin-right: 0;
1270		padding-left: .75em;
1271	}
1272
1273	/* compact lists: */
1274	.dokuwiki main dl.compact {
1275		& {
1276			display: block;
1277		}
1278		dd {
1279			margin: .125em 1em;
1280		}
1281	}
1282}