xref: /template/ad-hominem/css/layout.less (revision 69c057a226ef4bb77b58b5fb7da9e70f4a451d0c) 
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				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		-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	h3, h4 {
363		font-size: 1.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: 1em .25em 0 1em;
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: @ini_background;
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	a[href^='#']:link,
539	a[href^='#']:visited {
540		color: @ini_inpage;
541	}
542}
543
544#toc-menubutton {
545	background: transparent;
546	margin-left: .5em;
547	padding: 0 .25em;
548	width: auto;
549	height: auto;
550	overflow: hidden;
551	border: transparent 0 none;
552	border-radius: 3pt;
553}
554#toc-menubutton > span {
555	font-family: @ini_headline_fonts;
556	line-height: 1.5em;
557	font-weight: bold;
558	color: @ini_headlines;
559}
560#toc-menubutton::after {
561	content: '\203A';
562	display: inline-block;
563	width: 1.5em;
564	text-align: center;
565}
566
567.hide #toc-menubutton::after,
568.alt #toc-menubutton::after {
569	content: '\2630';
570}
571
572.hide #toc-menubutton>span,
573.alt #toc-menubutton>span {
574	display: none;
575}
576
577main {
578	& {
579		width: e("calc(90% - 5px)");
580		flex-grow: 100;
581		background-color: @ini_background;
582		color: @ini_text;
583		line-height: 1.5em;
584		padding: 1.5em 5% .75em 5%;
585		border: @ini_border solid 1px;
586		border-radius: 5px;
587	}
588
589	/* edit buttons */
590	.secedit {
591		float: right;
592		margin-top: -22pt;
593		line-height: 0;
594	}
595	.secedit button {
596		border: @ini_border solid 1pt;
597		background-color: transparent;
598		color: transparent;
599		width: 20pt;
600		height: 20pt;
601		border-radius: 50%;
602		font-size: 0;
603		cursor: pointer;
604	}
605	.secedit button::before {
606		content: ' ';
607		display: inline-block;
608		width: 13pt;
609		height: 13pt;
610		padding: 2pt;
611		background: transparent url('images/edit.svg') no-repeat center;
612		background-size: 10pt;
613	}
614	.secedit button:hover {
615		background-color: @ini_highlight;
616		border: @ini_text_alt solid 1pt;
617	}
618	.secedit button:focus {
619		background-color: @ini_highlight;
620		border: @ini_focus_color solid 2px;
621		outline: transparent none 0;
622	}
623	.secedit button:hover::before {
624	}
625
626	.section_highlight {
627		border-radius: .5em;
628		outline: orange dashed 3px;
629	}
630
631	/* Definition List styles: */
632	dt { font-weight: 600; }
633	dd { margin-left: 1.25em; margin-bottom: .5em; }
634	dl.compact {
635		display: grid;
636		grid-template-columns: minmax(8em,min-content) auto;
637	}
638	dl.compact dt { grid-column-start: 1; }
639	dl.compact dd { grid-column-start: 2; margin-bottom: 0; }
640
641	/* math fonts */
642	math, .math, .math *,
643	.wrap_math, .wrap_math * {
644		font-family: @ini_math_fonts;
645		font-size: 12pt;
646		line-height: 1em;
647	}
648
649/* figure block */
650	figure {
651		& {
652			padding: .5em;
653			overflow: hidden;
654		}
655		figcaption {
656			clear: left;
657			margin-top: .5em;
658			font-size: smaller;
659			line-height: 1.4em;
660		}
661		figcaption p {
662			margin-bottom: 0;
663		}
664		figcaption.centered {
665			text-align: center;
666		}
667		& > *:first-child {
668			margin-top: .25em;
669		}
670		table {
671			background-color: @ini_background;
672			margin: 0;
673		}
674		div.table {
675			margin: 0;
676		}
677		& > p {
678			margin: 0;
679		}
680	}
681
682	& > footer {
683		margin-top: 1em;
684		padding-top: 1em;
685		text-align: right;
686	}
687	& > footer p.docInfo {
688		display: inline-block;
689		border-top: @ini_separator solid 1px;
690		padding-top: .5em;
691		padding-left: 5%;
692		font-size: small;
693		color: @ini_text_alt;
694	}
695}
696
697body.mediadetail {
698	figure {
699		img {
700			background: transparent url('images/transparency.gif');
701		}
702		table {
703			&.img_detail,
704			&.img_detail th,
705			&.img_detail td {
706				border: none;
707			}
708			&.img_detail th {
709				text-align: right;
710				white-space: nowrap;
711				border: none;
712			}
713		}
714	}
715}
716
717#footer-layout {
718	& {
719		padding-top: 1.5em;
720	}
721	& > footer {
722		& {
723			width: 100%;
724			max-width: @ini_site_width;
725			margin: 0 auto;
726			display: grid;
727			grid-template-columns: @ini_sidebar_width 1fr 1fr 1fr;
728			grid-template-rows: auto auto;
729			grid-gap: 6pt;
730			align-items: stretch;
731		}
732		.ftSection {
733			padding-left: 1em;
734		}
735		.ftSection ul {
736			list-style: none inside;
737			padding-left: .5em;
738		}
739		.ftSection ul li {
740			margin-bottom: .5em;
741			font-size: small;
742		}
743		.ftSection ul li a {
744			white-space: nowrap;
745		}
746		h4 {
747			color: @ini_headlines;
748			margin: 0 0 1em 0;
749			font-family: @ini_headline_fonts;
750			font-size: 1rem;
751		}
752
753		#ftPlaceholder>* {
754			display: none;
755		}
756	}
757}
758
759#ftLicenseButtons {
760	& {
761		grid-row: 2;
762		grid-column: 2 / span 3;
763		text-align: center;
764		font-size: small;
765		padding-top: 1em;
766	}
767	hr {
768		border: 0;
769		height: 1pt;
770		background: #333;
771		background-image: linear-gradient(to right, @ini_background_alt, @ini_text_alt, @ini_background_alt);
772	}
773	p.license {
774		margin: .5em 0 1em 0;
775		font-size: small;
776		color: @ini_text_alt;
777	}
778	p.license bdi {
779		display: block;
780		width: 100%;
781	}
782}
783
784/* togglers */
785.toggle .tg_button.active {
786	color:			@ini_link;
787	cursor:			pointer;
788}
789.toggle .tg_content,
790.toggle.auto .tg_content,
791.toggle.show .tg_content {
792	display:		initial;
793}
794.toggle.hide .tg_content,
795.toggle.alt .tg_content {
796	display:		none;
797}
798
799/* config overrides */
800#config__manager {
801	#dw__configform {
802
803		.selectiondefault {
804			background-color: @ini_background_alt;
805		}
806		.selection input {
807			margin-left: .5em;
808		}
809
810		& p:last-child {
811			position: -webkit-sticky; /* Safari */
812			position: sticky;
813			bottom: 0;
814			box-sizing: border-box;
815			background-color: rgba(255,255,255,.67);
816			border: @ini_border solid 2pt;
817			padding: .5em 0;
818			z-index: 9;
819			display: grid;
820			grid-template-columns: auto auto;
821			justify-items: center;
822		}
823		 p:last-child button {
824			border: @ini_border solid 2pt;
825			padding: .25em .5em;
826		}
827		p:last-child button[type=submit] {
828			background-color: #ccddff;
829		}
830	}
831
832	fieldset {
833		background-color: transparent;
834		color: inherit;
835	}
836
837	table {
838		th, td {
839			border: none;
840		}
841		td.label span.outkey {
842			background-color: inherit;
843		}
844
845		tr.default .input,
846		tr .input {
847			background-color: transparent;
848		}
849	}
850}
851#extension__list {
852	.legend a.info, .legend a.info.close {
853		width: 22px;
854		height: 22px;
855		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;
856		background-size: 24px;
857		border-radius: 50%;
858		margin-bottom: .5em;
859	}
860
861	/* minor fix for DW Librarian */
862	section.extension > .main > h2 {
863		& {
864			font-size: 1.25rem;
865			margin: 0;
866		}
867		* {
868			margin: 0;
869		}
870		.version {
871			font-size: 1rem;
872			margin: .5rem 0;
873		}
874	}
875}
876
877/* RTL Overrides */
878[dir=rtl] {
879	#phSearch form .search-popup {
880		margin-right: 0;
881		margin-left: 21pt;
882	}
883	#phSearch form > div input {
884		padding-right: 4pt;
885	}
886
887	#globalTools {
888		text-align: left;
889	}
890	#gUserTools {
891		padding: 0 0 0 .5rem;
892	}
893
894	#toc {
895		float: left;
896		border-left: transparent 0;
897		border-right: #CCC solid 1pt;
898	}
899	#toc ol {
900		padding: 0 1em 0 0;
901	}
902
903	.secedit {
904		float: left;
905	}
906
907	#navYouAreHere ol li::before {
908		content: '\25C2';
909	}
910	#navYouAreHere ol li.home::before {
911		content: '';
912	}
913
914	#sidebar {
915		> button.tg_button {
916			float: left;
917		}
918
919		p, ul, ol {
920			padding-left: 0;
921			padding-right: 1.25em;
922		}
923	}
924	#sbNavigation {
925		margin: 1em 1em 0 .25em;
926	}
927	main {
928		figure figcaption {
929			clear: right;
930		}
931
932		& > footer {
933			text-align: left;
934		}
935		& > footer p.docInfo {
936			padding-left: 0;
937			padding-right: 5%;
938		}
939	}
940}
941
942/* dark mode overrides */
943@media screen and (prefers-color-scheme: dark) {
944
945	body.darkmode {
946
947		#toc {
948			background-color: @ini_background_dark;
949			border-left: @ini_border_dark solid 1pt;
950		}
951
952		& { background-color: @ini_background_site_dark; color: @ini_text_dark; }
953		#skip-link a { background-color: @ini_background_dark;color: @ini_link_dark;}
954		#navYouAreHere ol {
955			li { color: @ini_headlines_dark;}
956			li::before { color: @ini_text_alt_dark;}
957		}
958		#phSearch form > div {
959			&.search-field { border-color: @ini_border_dark; background: @ini_background_dark; }
960			input { color: @ini_text_dark; }
961			button {color: @ini_text_dark; }
962			button[type="reset"] {border-right-color: @ini_border_dark; }
963		}
964		#qsearch__out {
965			& { background-color: @ini_background_site_dark; }
966			ul, li { border-color: @ini_border_dark; }
967		}
968
969		#config__manager {
970			#dw__configform {
971
972				.selectiondefault {
973					background-color: @ini_background_alt_dark;
974				}
975				.selectiondefault label {
976					color: @ini_text_dark;
977				}
978
979				p:last-child {
980					& {
981						background-color: rgba(57,57,61,.67);
982						border-color: @ini_border_dark;
983					}
984					button {
985						background-color: @ini_background_dark;
986						border-color: @ini_border_dark;
987						color: @ini_missing_dark;
988					}
989					button[type=submit] {
990						border-color: @ini_existing_dark;
991						background-color: @ini_background_dark;
992						color: @ini_existing_dark;
993					}
994				}
995			}
996		}
997		#sbNavigation {
998			h1, h2, h3, h4, h5, h6 { color: @ini_headlines_dark; }
999		}
1000		#sidebar {
1001			hr { background-image:	linear-gradient(to right, @ini_background_site_dark, @ini_text_alt, @ini_background_site_dark); }
1002			a:link, a:visited { color: @ini_link_dark; }
1003			li::marker { color: @ini_text_dark; }
1004		}
1005
1006		#toc {
1007			& { border-color: @ini_border_dark; }
1008			#toc-menubutton,
1009			#toc-menubutton span { color: @ini_headlines_dark; }
1010			a[href^='#']:link, a[href^='#']:visited { color: @ini_inpage_dark; }
1011		}
1012
1013		main {
1014			& { background-color: @ini_background_dark; color: @ini_text_dark; border-color: @ini_background_dark; }
1015			h1, h2, h3, h4, h5, h6 { color: @ini_headlines_dark; }
1016			& > footer p.docInfo { color: @ini_text_alt_dark; }
1017			figure table { background-color: @ini_background_dark; }
1018		}
1019
1020		#footer-layout > footer h4 { color: @ini_headlines_dark; }
1021
1022		#ftLicenseButtons {
1023			p.license { color: @ini_text_alt_dark; }
1024			hr { background-image: linear-gradient(to right, @ini_background_site_dark, @ini_text_dark, @ini_background_site_dark); }
1025		}
1026
1027		/* Extension Manager: */
1028		#extension__manager{
1029			.panelHeader { background-color: @ini_background_alt_dark; }
1030			ul.tabs li a { background-color: @ini_background_dark; border-color: @ini_border_dark; color: @ini_text_dark }
1031			ul.tabs li.active a { background-color: @ini_background_alt_dark; border-color: @ini_text_dark; }
1032			tr .input, tr.default .input { color: @ini_text_dark; }
1033		}
1034		#extension__list ul.extensionList li { color: @ini_text_dark; }
1035	}
1036
1037	/* dark scrollbar styles for webkit browsers: */
1038	&::-webkit-scrollbar-track {
1039		background: @ini_background_site_dark;
1040	}
1041	&::-webkit-scrollbar-thumb {
1042		background: @ini_background_alt_dark;
1043	}
1044	&::-webkit-scrollbar-thumb:hover {
1045		background: @ini_background_dark;
1046	}
1047	/* dark scrollbars for firefox: */
1048	* { scrollbar-color: @ini_background_alt_dark @ini_background_site_dark; }
1049}
1050
1051/* tablet break point */
1052@media all and (max-width: @ini_tablet_width) {
1053	#header-layout > header {
1054		margin: 0;
1055		grid-template-columns: e("repeat(2, auto)");
1056		grid-template-rows: e("repeat(4, auto)");
1057	}
1058	#header-layout > header #siteLogo {
1059		grid-column: 1;
1060		grid-row: 1;
1061	}
1062	#header-layout > header #globalTools {
1063		grid-row: 1;
1064		grid-column: 2;
1065	}
1066	#header-layout>header #globalTools ul li {
1067		display: block;
1068		margin-bottom: .5em;
1069	}
1070	#header-layout>header #globalTools ul li:before {
1071		content: '';
1072	}
1073	#header-layout>header #phSearch {
1074		grid-row: 2;
1075		grid-column: 1 / span 2;
1076		padding: .5em 1em 0 68px;
1077	}
1078	[dir=rtl] #header-layout>header #phSearch {
1079		padding: .5em 68px 0 1em;
1080	}
1081	#header-layout>header #phTools {
1082		grid-row: 3;
1083		grid-column: 1 / span 2;
1084	}
1085	#header-layout>header #phInclude {
1086		grid-row: 4;
1087		grid-column: 1 / span 2;
1088		margin: 0 6pt 5pt 64px;
1089	}
1090
1091	#qsearch__out ul {
1092		max-height: 100%;
1093	}
1094
1095	#main-layout {
1096		display: block;
1097	}
1098
1099	#sidebar.toggle {
1100		width: auto;
1101		margin-left: .5em;
1102		padding: 0;
1103		position: relative;
1104		top: -2.25em;
1105		height: .25em;
1106	}
1107	#sidebar > button.tg_button,
1108	[dir=rtl] #sidebar > button.tg_button {
1109		float: none;
1110	}
1111	#sidebar.auto > button.tg_button,
1112	#sidebar.hide > button.tg_button,
1113	#sidebar.alt > button.tg_button,
1114	#sidebar.show > button.tg_button {
1115		width: 1.5em;
1116	}
1117	#sidebar > button.tg_button span {
1118		display: none;
1119	}
1120
1121	#sidebar > button.tg_button::after {
1122		content: '\2630';
1123	}
1124	#sidebar.hide>button.tg_button::after,
1125	#sidebar.alt>button.tg_button::after {
1126		content: '\2715';
1127	}
1128
1129	#sidebar .tg_content {
1130		min-width: @ini_sidebar_width;
1131		padding-right: 0;
1132		margin-top: 10px;
1133		padding-bottom: 1em;
1134		background-color: @ini_background_site;
1135		position: absolute;
1136		z-index: 18;
1137		border: @ini_border solid 1px;
1138		-moz-box-shadow: 2px 2px 2px @ini_border;
1139		-webkit-box-shadow: 2px 2px 2px @ini_border;
1140		box-shadow: 2px 2px 2px @ini_border;
1141	}
1142
1143	#sidebar .tg_content:before {
1144		content: ' ';
1145		z-index: 19;
1146		width: 0;
1147		height: 0;
1148		position: absolute;
1149		top: -10px;
1150		left: 7px;
1151		border-width: 0 10px 10px;
1152		border-style: solid;
1153		border-color: transparent;
1154		border-bottom-color: @ini_border;
1155	}
1156	#sidebar .tg_content:after {
1157		content: ' ';
1158		z-index: 20;
1159		width: 0;
1160		height: 0;
1161		position: absolute;
1162		top: -8px;
1163		left: 8px;
1164		border-width: 0 9px 8px;
1165		border-style: solid;
1166		border-color: transparent;
1167		border-bottom-color: @ini_background_site;
1168	}
1169
1170	[dir=rtl] {
1171		#sidebar .tg_content {
1172			right: 5px;
1173		}
1174		#sidebar .tg_content:before {
1175			right: 7px;
1176		}
1177		#sidebar .tg_content:after {
1178			right: 8px;
1179		}
1180	}
1181
1182	#sbNavigation {
1183		padding-left: .5em;
1184		margin-left: 0;
1185	}
1186	#sidebar h3,
1187	#sidebar h4	{
1188		font-size: 1rem;
1189		padding: .25em 0 .25em 2pt;
1190	}
1191	#sidebar ul, #sidebar ol {
1192		margin-left: .5em;
1193	}
1194	#sidebar ul ul, #sidebar ol ol,
1195	#sidebar ul ol, #sidebar ol ul {
1196		margin-left: 0;
1197	}
1198	#sidebar p,
1199	#sidebar li	{
1200		font-size: small;
1201		padding: .25em 0 .25em .25em;
1202	}
1203
1204	main {
1205		width: auto;
1206		box-shadow: 0 0 0 0 transparent;
1207	}
1208
1209	.toggle .tg_content,
1210	.toggle.alt .tg_content,
1211	.toggle.show .tg_content {
1212		display: initial;
1213	}
1214	.toggle.auto .tg_content {
1215		display: none;
1216	}
1217
1218	#toc.hide h3::after,
1219	#toc.auto h3::after {
1220		content: '\2630';
1221	}
1222	#toc.alt h3::after {
1223		content: '\203A';
1224	}
1225
1226	#toc.hide h3 > span,
1227	#toc.auto h3 > span {
1228		display: none;
1229	}
1230	#toc.alt h3 > span {
1231		display: inline-block;
1232	}
1233
1234	#footer-layout > footer {
1235		grid-template-columns: 12pt 1fr 1fr 1fr;
1236	}
1237}
1238
1239@media all and (max-width: @ini_tablet_width) and (prefers-color-scheme: dark) {
1240	body.darkmode #sidebar {
1241		.tg_content {
1242			& {
1243				background-color: @ini_background_dark;
1244				border-color: @ini_border_dark;
1245				-moz-box-shadow: 3px 3px 3px @ini_background_site_dark;
1246				-webkit-box-shadow: 3px 3px 3px @ini_background_site_dark;
1247				box-shadow: 3px 3px 3px @ini_background_site_dark;
1248			}
1249			&::before {
1250				border-bottom-color: @ini_border_dark;
1251			}
1252			&::after {
1253				border-bottom-color: @ini_background_dark;
1254			}
1255		}
1256		hr {
1257			background: @ini_link_dark;
1258			background-image: linear-gradient(to right, @ini_background_dark, @ini_headlines_dark, @ini_background_dark);
1259		}
1260	}
1261}
1262
1263/* medium break point: */
1264@media all and (max-width: @ini_phone_width) {
1265	#footer-layout {
1266		& {
1267			padding-top: .5em;
1268		}
1269		& > footer {
1270			& {
1271				grid-template-columns: 100%;
1272				grid-template-rows: auto auto auto auto auto;
1273			}
1274			.ftSection {
1275				grid-column: 1;
1276				padding: 0 .25em 0 .5em;
1277				white-space: normal;
1278			}
1279			.ftSection ul {
1280				padding-left: 0;
1281			}
1282			.ftSection li {
1283				display: inline-block;
1284			}
1285			.ftSection li::before {
1286				content: '\00B7';
1287				display: inline;
1288				width: .35em;
1289				padding: 0 .35em;
1290			}
1291			.ftSection li:first-child::before {
1292				content: '';
1293				padding-left: 0;
1294			}
1295
1296			#ftPlaceholder {
1297				grid-row: 1;
1298			}
1299			#ftInclude {
1300				grid-row: 2;
1301			}
1302			#ftSiteTools {
1303				grid-row: 3;
1304			}
1305			#ftPageTools {
1306				grid-row: 4;
1307			}
1308			#ftLicenseButtons {
1309				grid-column: 1;
1310				grid-row: 5;
1311			}
1312
1313			h4 {
1314				margin-bottom: .5em;
1315			}
1316		}
1317	}
1318
1319	main blockquote {
1320		margin-left: .15em;
1321		margin-right: 0;
1322	}
1323	main ul, main ol {
1324		margin-left: .5em;
1325		margin-right: 0;
1326		padding-left: .75em;
1327	}
1328}