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