xref: /template/ad-hominem/css/layout.less (revision 5061d95dcf9e1b44f347d654b9765ce2b7e68196) 
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: 21px;
854		height: 21px;
855		padding: 0;
856		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:%23888'/%3E%3C/svg%3E") center no-repeat;
857		background-size: 24px;
858		border-radius: 50%;
859		margin-bottom: .5em;
860		float: left;
861	}
862
863	/* minor fix for DW Librarian */
864	section.extension {
865		& > .main > h2 {
866			& {
867				font-size: 1.25rem;
868				margin: 0;
869			}
870			* {
871				margin: 0;
872			}
873			.version {
874				font-size: 1rem;
875				margin: .5rem 0;
876			}
877		}
878		& > .notices {
879			li.warning {
880				border: #D99C3C solid 1px;;
881				background-color: #FEA;
882				border-radius: 2pt;
883				padding: 0 1pt 2pt 0;
884				margin-bottom: 1.5pt;
885			}
886			li.error {
887				border: #F33 solid 1px;;
888				background-color: #FFDADA;
889				border-radius: 2pt;
890				padding: 0 1pt 2pt 0;
891				margin-bottom: 1.5pt;
892			}
893			span.icon {
894				align-self: flex-start;
895				margin: 1pt 0 0 1pt;
896			}
897		}
898	}
899	/* git warnings */
900	.actions {
901		p.permerror {
902			border: #D99C3C solid 1px;;
903			background-color: #FBF0C4;
904			background-position: 1px 1px;
905			border-radius: 2pt;
906			padding: 1.5px 1pt 0 22px;
907		}
908		.available {
909			border: #6EC247 solid 1px;
910			background-color: #C4FEB8;
911			padding: 1pt;
912			border-radius: 2pt;
913		}
914	}
915}
916
917/* RTL Overrides */
918[dir=rtl] {
919	#phSearch form .search-popup {
920		margin-right: 0;
921		margin-left: 21pt;
922	}
923	#phSearch form > div input {
924		padding-right: 4pt;
925	}
926
927	#globalTools {
928		text-align: left;
929	}
930	#gUserTools {
931		padding: 0 0 0 .5rem;
932	}
933
934	#toc {
935		float: left;
936		border-left: transparent 0;
937		border-right: #CCC solid 1pt;
938	}
939	#toc ol {
940		padding: 0 1em 0 0;
941	}
942
943	.secedit {
944		float: left;
945	}
946
947	#navYouAreHere ol li::before {
948		content: '\25C2';
949	}
950	#navYouAreHere ol li.home::before {
951		content: '';
952	}
953
954	#sidebar {
955		> button.tg_button {
956			float: left;
957		}
958
959		p, ul, ol {
960			padding-left: 0;
961			padding-right: 1.25em;
962		}
963	}
964	#sbNavigation {
965		margin: 1em 1em 0 .25em;
966	}
967	main {
968		figure figcaption {
969			clear: right;
970		}
971
972		& > footer {
973			text-align: left;
974		}
975		& > footer p.docInfo {
976			padding-left: 0;
977			padding-right: 5%;
978		}
979	}
980}
981
982/* dark mode overrides */
983@media screen and (prefers-color-scheme: dark) {
984
985	body.darkmode {
986
987		#toc {
988			background-color: @ini_background_dark;
989			border-left: @ini_border_dark solid 1pt;
990		}
991
992		& { background-color: @ini_background_site_dark; color: @ini_text_dark; }
993		#skip-link a { background-color: @ini_background_dark;color: @ini_link_dark;}
994		#navYouAreHere ol {
995			li { color: @ini_headlines_dark;}
996			li::before { color: @ini_text_alt_dark;}
997		}
998		#phSearch form > div {
999			&.search-field { border-color: @ini_border_dark; background: @ini_background_dark; }
1000			input { color: @ini_text_dark; }
1001			button {color: @ini_text_dark; }
1002			button[type="reset"] {border-right-color: @ini_border_dark; }
1003		}
1004		#qsearch__out {
1005			& { background-color: @ini_background_site_dark; }
1006			ul, li { border-color: @ini_border_dark; }
1007		}
1008
1009		#config__manager {
1010			#dw__configform {
1011
1012				.selectiondefault {
1013					background-color: @ini_background_alt_dark;
1014				}
1015				.selectiondefault label {
1016					color: @ini_text_dark;
1017				}
1018
1019				p:last-child {
1020					& {
1021						background-color: rgba(57,57,61,.67);
1022						border-color: @ini_border_dark;
1023					}
1024					button {
1025						background-color: @ini_background_dark;
1026						border-color: @ini_border_dark;
1027						color: @ini_missing_dark;
1028					}
1029					button[type=submit] {
1030						border-color: @ini_existing_dark;
1031						background-color: @ini_background_dark;
1032						color: @ini_existing_dark;
1033					}
1034				}
1035			}
1036		}
1037		#sbNavigation {
1038			h1, h2, h3, h4, h5, h6 { color: @ini_headlines_dark; }
1039		}
1040		#sidebar {
1041			hr { background-image:	linear-gradient(to right, @ini_background_site_dark, @ini_text_alt, @ini_background_site_dark); }
1042			a:link, a:visited { color: @ini_link_dark; }
1043			li::marker { color: @ini_text_dark; }
1044		}
1045
1046		#toc {
1047			& { border-color: @ini_border_dark; }
1048			#toc-menubutton,
1049			#toc-menubutton span { color: @ini_headlines_dark; }
1050			a[href^='#']:link, a[href^='#']:visited { color: @ini_inpage_dark; }
1051		}
1052
1053		main {
1054			& { background-color: @ini_background_dark; color: @ini_text_dark; border-color: @ini_background_dark; }
1055			h1, h2, h3, h4, h5, h6 { color: @ini_headlines_dark; }
1056			& > footer p.docInfo { color: @ini_text_alt_dark; }
1057			figure table { background-color: @ini_background_dark; }
1058		}
1059
1060		#footer-layout > footer h4 { color: @ini_headlines_dark; }
1061
1062		#ftLicenseButtons {
1063			p.license { color: @ini_text_alt_dark; }
1064			hr { background-image: linear-gradient(to right, @ini_background_site_dark, @ini_text_dark, @ini_background_site_dark); }
1065		}
1066
1067		/* Extension Manager: */
1068		#extension__manager{
1069			.panelHeader { background-color: @ini_background_alt_dark; }
1070			ul.tabs li a { background-color: @ini_background_dark; border-color: @ini_border_dark; color: @ini_text_dark }
1071			ul.tabs li.active a { background-color: @ini_background_alt_dark; border-color: @ini_text_dark; }
1072			tr .input, tr.default .input { color: @ini_text_dark; }
1073		}
1074
1075		#extension__list {
1076			ul.extensionList li { color: @ini_text_dark; }
1077			.actions {
1078				p.permerror {
1079					border-color: #86560A;
1080					background-color: #4D3F04;
1081				}
1082				.available {
1083					border-color: #4F7A0B;
1084					background-color: #333E03;
1085				}
1086			}
1087			section.extension > .notices {
1088				li.warning {
1089					border-color: #86560A;
1090					background-color: #4D3F04;
1091				}
1092				li.error {
1093					border-color: #A62A2A;
1094					background-color: #360505;
1095				}
1096			}
1097		}
1098	}
1099
1100	/* dark scrollbar styles for webkit browsers: */
1101	&::-webkit-scrollbar-track {
1102		background: @ini_background_site_dark;
1103	}
1104	&::-webkit-scrollbar-thumb {
1105		background: @ini_background_alt_dark;
1106	}
1107	&::-webkit-scrollbar-thumb:hover {
1108		background: @ini_background_dark;
1109	}
1110	/* dark scrollbars for firefox: */
1111	* { scrollbar-color: @ini_background_alt_dark @ini_background_site_dark; }
1112}
1113
1114/* tablet break point */
1115@media all and (max-width: @ini_tablet_width) {
1116	#header-layout > header {
1117		margin: 0;
1118		grid-template-columns: e("repeat(2, auto)");
1119		grid-template-rows: e("repeat(4, auto)");
1120	}
1121	#header-layout > header #siteLogo {
1122		grid-column: 1;
1123		grid-row: 1;
1124	}
1125	#header-layout > header #globalTools {
1126		grid-row: 1;
1127		grid-column: 2;
1128	}
1129	#header-layout>header #globalTools ul li {
1130		display: block;
1131		margin-bottom: .5em;
1132	}
1133	#header-layout>header #globalTools ul li:before {
1134		content: '';
1135	}
1136	#header-layout>header #phSearch {
1137		grid-row: 2;
1138		grid-column: 1 / span 2;
1139		padding: .5em 1em 0 68px;
1140	}
1141	[dir=rtl] #header-layout>header #phSearch {
1142		padding: .5em 68px 0 1em;
1143	}
1144	#header-layout>header #phTools {
1145		grid-row: 3;
1146		grid-column: 1 / span 2;
1147	}
1148	#header-layout>header #phInclude {
1149		grid-row: 4;
1150		grid-column: 1 / span 2;
1151		margin: 0 6pt 5pt 64px;
1152	}
1153
1154	#qsearch__out ul {
1155		max-height: 100%;
1156	}
1157
1158	#main-layout {
1159		display: block;
1160	}
1161
1162	#sidebar.toggle {
1163		width: auto;
1164		margin-left: .5em;
1165		padding: 0;
1166		position: relative;
1167		top: -2.25em;
1168		height: .25em;
1169	}
1170	#sidebar > button.tg_button,
1171	[dir=rtl] #sidebar > button.tg_button {
1172		float: none;
1173	}
1174	#sidebar.auto > button.tg_button,
1175	#sidebar.hide > button.tg_button,
1176	#sidebar.alt > button.tg_button,
1177	#sidebar.show > button.tg_button {
1178		width: 1.5em;
1179	}
1180	#sidebar > button.tg_button span {
1181		display: none;
1182	}
1183
1184	#sidebar > button.tg_button::after {
1185		content: '\2630';
1186	}
1187	#sidebar.hide>button.tg_button::after,
1188	#sidebar.alt>button.tg_button::after {
1189		content: '\2715';
1190	}
1191
1192	#sidebar .tg_content {
1193		min-width: @ini_sidebar_width;
1194		padding-right: 0;
1195		margin-top: 10px;
1196		padding-bottom: 1em;
1197		background-color: @ini_background_site;
1198		position: absolute;
1199		z-index: 18;
1200		border: @ini_border solid 1px;
1201		-moz-box-shadow: 2px 2px 2px @ini_border;
1202		-webkit-box-shadow: 2px 2px 2px @ini_border;
1203		box-shadow: 2px 2px 2px @ini_border;
1204	}
1205
1206	#sidebar .tg_content:before {
1207		content: ' ';
1208		z-index: 19;
1209		width: 0;
1210		height: 0;
1211		position: absolute;
1212		top: -10px;
1213		left: 7px;
1214		border-width: 0 10px 10px;
1215		border-style: solid;
1216		border-color: transparent;
1217		border-bottom-color: @ini_border;
1218	}
1219	#sidebar .tg_content:after {
1220		content: ' ';
1221		z-index: 20;
1222		width: 0;
1223		height: 0;
1224		position: absolute;
1225		top: -8px;
1226		left: 8px;
1227		border-width: 0 9px 8px;
1228		border-style: solid;
1229		border-color: transparent;
1230		border-bottom-color: @ini_background_site;
1231	}
1232
1233	[dir=rtl] {
1234		#sidebar .tg_content {
1235			right: 5px;
1236		}
1237		#sidebar .tg_content:before {
1238			right: 7px;
1239		}
1240		#sidebar .tg_content:after {
1241			right: 8px;
1242		}
1243	}
1244
1245	#sbNavigation {
1246		padding-left: .5em;
1247		margin-left: 0;
1248	}
1249	#sidebar h3,
1250	#sidebar h4	{
1251		font-size: 1rem;
1252		padding: .25em 0 .25em 2pt;
1253	}
1254	#sidebar ul, #sidebar ol {
1255		margin-left: .5em;
1256	}
1257	#sidebar ul ul, #sidebar ol ol,
1258	#sidebar ul ol, #sidebar ol ul {
1259		margin-left: 0;
1260	}
1261	#sidebar p,
1262	#sidebar li	{
1263		font-size: small;
1264		padding: .25em 0 .25em .25em;
1265	}
1266
1267	main {
1268		width: auto;
1269		box-shadow: 0 0 0 0 transparent;
1270	}
1271
1272	.toggle .tg_content,
1273	.toggle.alt .tg_content,
1274	.toggle.show .tg_content {
1275		display: initial;
1276	}
1277	.toggle.auto .tg_content {
1278		display: none;
1279	}
1280
1281	#toc.hide h3::after,
1282	#toc.auto h3::after {
1283		content: '\2630';
1284	}
1285	#toc.alt h3::after {
1286		content: '\203A';
1287	}
1288
1289	#toc.hide h3 > span,
1290	#toc.auto h3 > span {
1291		display: none;
1292	}
1293	#toc.alt h3 > span {
1294		display: inline-block;
1295	}
1296
1297	#footer-layout > footer {
1298		grid-template-columns: 12pt 1fr 1fr 1fr;
1299	}
1300}
1301
1302@media all and (max-width: @ini_tablet_width) and (prefers-color-scheme: dark) {
1303	body.darkmode #sidebar {
1304		.tg_content {
1305			& {
1306				background-color: @ini_background_dark;
1307				border-color: @ini_border_dark;
1308				-moz-box-shadow: 3px 3px 3px @ini_background_site_dark;
1309				-webkit-box-shadow: 3px 3px 3px @ini_background_site_dark;
1310				box-shadow: 3px 3px 3px @ini_background_site_dark;
1311			}
1312			&::before {
1313				border-bottom-color: @ini_border_dark;
1314			}
1315			&::after {
1316				border-bottom-color: @ini_background_dark;
1317			}
1318		}
1319		hr {
1320			background: @ini_link_dark;
1321			background-image: linear-gradient(to right, @ini_background_dark, @ini_headlines_dark, @ini_background_dark);
1322		}
1323	}
1324}
1325
1326/* medium break point: */
1327@media all and (max-width: @ini_phone_width) {
1328	#footer-layout {
1329		& {
1330			padding-top: .5em;
1331		}
1332		& > footer {
1333			& {
1334				grid-template-columns: 100%;
1335				grid-template-rows: auto auto auto auto auto;
1336			}
1337			.ftSection {
1338				grid-column: 1;
1339				padding: 0 .25em 0 .5em;
1340				white-space: normal;
1341			}
1342			.ftSection ul {
1343				padding-left: 0;
1344			}
1345			.ftSection li {
1346				display: inline-block;
1347			}
1348			.ftSection li::before {
1349				content: '\00B7';
1350				display: inline;
1351				width: .35em;
1352				padding: 0 .35em;
1353			}
1354			.ftSection li:first-child::before {
1355				content: '';
1356				padding-left: 0;
1357			}
1358
1359			#ftPlaceholder {
1360				grid-row: 1;
1361			}
1362			#ftInclude {
1363				grid-row: 2;
1364			}
1365			#ftSiteTools {
1366				grid-row: 3;
1367			}
1368			#ftPageTools {
1369				grid-row: 4;
1370			}
1371			#ftLicenseButtons {
1372				grid-column: 1;
1373				grid-row: 5;
1374			}
1375
1376			h4 {
1377				margin-bottom: .5em;
1378			}
1379		}
1380	}
1381
1382	main blockquote {
1383		margin-left: .15em;
1384		margin-right: 0;
1385	}
1386	main ul, main ol {
1387		margin-left: .5em;
1388		margin-right: 0;
1389		padding-left: .75em;
1390	}
1391}