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