xref: /template/ad-hominem/css/layout.less (revision 0a02431ce2b4f8bd8615b40468778b100a690bca) 
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
837/* RTL Overrides */
838[dir=rtl] {
839	#phSearch form .search-popup {
840		margin-right: 0;
841		margin-left: 21pt;
842	}
843	#phSearch form > div input {
844		padding-right: 4pt;
845	}
846
847	#globalTools {
848		text-align: left;
849	}
850	#gUserTools {
851		padding: 0 0 0 .5rem;
852	}
853
854	#toc {
855		float: left;
856		border-left: transparent 0;
857		border-right: #CCC solid 1pt;
858	}
859	#toc ol {
860		padding: 0 1em 0 0;
861	}
862
863	.secedit {
864		float: left;
865	}
866
867	#navYouAreHere ol li::before {
868		content: '\25C2';
869	}
870	#navYouAreHere ol li.home::before {
871		content: '';
872	}
873
874	#sidebar {
875		> button.tg_button {
876			float: left;
877		}
878
879		p, ul, ol {
880			padding-left: 0;
881			padding-right: 1.25em;
882		}
883	}
884	#sbNavigation {
885		margin: 1em 1em 0 .25em;
886	}
887	main {
888		figure figcaption {
889			clear: right;
890		}
891
892		& > footer {
893			text-align: left;
894		}
895		& > footer p.docInfo {
896			padding-left: 0;
897			padding-right: 5%;
898		}
899	}
900}
901
902/* dark mode overrides */
903@media screen and (prefers-color-scheme: dark) {
904
905	body.darkmode {
906
907		#toc {
908			background-color: @ini_background_dark;
909			border-left: @ini_border_dark solid 1pt;
910		}
911
912		& { background-color: @ini_background_site_dark; color: @ini_text_dark; }
913		#skip-link a { background-color: @ini_background_dark;color: @ini_link_dark;}
914		#navYouAreHere ol {
915			li { color: @ini_headlines_dark;}
916			li::before { color: @ini_text_alt_dark;}
917		}
918		#phSearch form > div {
919			&.search-field { border-color: @ini_border_dark; background: @ini_background_dark; }
920			&.search-field:focus-within {
921				box-shadow: inset .125em .125em .25em fadeout(#000, 50%);
922			}
923			input { color: @ini_text_dark; }
924			button {color: @ini_text_dark; }
925			button[type="reset"] {border-right-color: @ini_border_dark; }
926		}
927		#qsearch__out {
928			& { background-color: @ini_background_site_dark; }
929			ul, li { border-color: @ini_border_dark; }
930		}
931
932		#config__manager {
933			#dw__configform {
934
935				.selectiondefault {
936					background-color: @ini_background_alt_dark;
937				}
938				.selectiondefault label {
939					color: @ini_text_dark;
940				}
941
942				p:last-child {
943					& {
944						background-color: rgba(57,57,61,.67);
945						border-color: @ini_border_dark;
946					}
947					button {
948						background-color: @ini_background_dark;
949						border-color: @ini_border_dark;
950						color: @ini_missing_dark;
951					}
952					button[type=submit] {
953						border-color: @ini_existing_dark;
954						background-color: @ini_background_dark;
955						color: @ini_existing_dark;
956					}
957				}
958			}
959		}
960
961		#toc {
962			& { border-color: @ini_border_dark; }
963			#toc-menubutton,
964			#toc-menubutton span { color: @ini_headlines_dark; }
965			a[href^='#']:link, a[href^='#']:visited { color: @ini_inpage_dark; }
966		}
967
968		main {
969			& { background-color: @ini_background_dark; color: @ini_text_dark; border-color: @ini_background_dark; }
970			h1, h2, h3, h4, h5, h6 { color: @ini_headlines_dark; }
971			& > footer p.docInfo { color: @ini_text_alt_dark; }
972			figure table { background-color: @ini_background_dark; }
973		}
974
975		#footer-layout > footer h4 { color: @ini_headlines_dark; }
976
977		#ftLicenseButtons {
978			p.license { color: @ini_text_alt_dark; }
979			hr { background-image: linear-gradient(to right, @ini_background_site_dark, @ini_text_dark, @ini_background_site_dark); }
980		}
981
982		/* Extension Manager: */
983		#extension__manager{
984			.panelHeader { background-color: @ini_background_alt_dark; }
985			ul.tabs li a { background-color: @ini_background_dark; border-color: @ini_border_dark; color: @ini_text_dark }
986			ul.tabs li.active a { background-color: @ini_background_alt_dark; border-color: @ini_text_dark; }
987			tr .input, tr.default .input { color: @ini_text_dark; }
988		}
989		#extension__list ul.extensionList li { color: @ini_text_dark; }
990	}
991
992	/* dark scrollbar styles for webkit browsers: */
993	&::-webkit-scrollbar-track {
994		background: @ini_background_site_dark;
995	}
996	&::-webkit-scrollbar-thumb {
997		background: @ini_background_alt_dark;
998	}
999	&::-webkit-scrollbar-thumb:hover {
1000		background: @ini_background_dark;
1001	}
1002	/* dark scrollbars for firefox: */
1003	* { scrollbar-color: @ini_background_alt_dark @ini_background_site_dark; }
1004}
1005
1006/* tablet break point */
1007@media all and (max-width: @ini_tablet_width) {
1008	#header-layout > header {
1009		margin: 0;
1010		grid-template-columns: e("repeat(2, auto)");
1011		grid-template-rows: e("repeat(4, auto)");
1012	}
1013	#header-layout > header #siteLogo {
1014		grid-column: 1;
1015		grid-row: 1;
1016	}
1017	#header-layout > header #globalTools {
1018		grid-row: 1;
1019		grid-column: 2;
1020	}
1021	#header-layout>header #globalTools ul li {
1022		display: block;
1023		margin-bottom: .5em;
1024	}
1025	#header-layout>header #globalTools ul li:before {
1026		content: '';
1027	}
1028	#header-layout>header #phSearch {
1029		grid-row: 2;
1030		grid-column: 1 / span 2;
1031		padding: .5em 1em 0 68px;
1032	}
1033	[dir=rtl] #header-layout>header #phSearch {
1034		padding: .5em 68px 0 1em;
1035	}
1036	#header-layout>header #phTools {
1037		grid-row: 3;
1038		grid-column: 1 / span 2;
1039	}
1040	#header-layout>header #phInclude {
1041		grid-row: 4;
1042		grid-column: 1 / span 2;
1043		margin: 0 6pt 5pt 64px;
1044	}
1045
1046	#qsearch__out ul {
1047		max-height: 100%;
1048	}
1049
1050	#main-layout {
1051		display: block;
1052	}
1053
1054	#sidebar.toggle {
1055		width: auto;
1056		margin-left: .5em;
1057		padding: 0;
1058		position: relative;
1059		top: -2.25em;
1060		height: .25em;
1061	}
1062	#sidebar > button.tg_button,
1063	[dir=rtl] #sidebar > button.tg_button {
1064		float: none;
1065	}
1066	#sidebar.auto > button.tg_button,
1067	#sidebar.hide > button.tg_button,
1068	#sidebar.alt > button.tg_button,
1069	#sidebar.show > button.tg_button {
1070		width: 1.5em;
1071	}
1072	#sidebar > button.tg_button span {
1073		display: none;
1074	}
1075
1076	#sidebar > button.tg_button::after {
1077		content: '\2630';
1078	}
1079	#sidebar.hide>button.tg_button::after,
1080	#sidebar.alt>button.tg_button::after {
1081		content: '\2715';
1082	}
1083
1084	#sidebar .tg_content {
1085		min-width: @ini_sidebar_width;
1086		padding-right: 0;
1087		margin-top: 10px;
1088		padding-bottom: 1em;
1089		background-color: @ini_background_site;
1090		position: absolute;
1091		z-index: 18;
1092		border: @ini_border solid 1px;
1093		box-shadow: 2px 2px 2px @ini_border;
1094	}
1095
1096	#sidebar .tg_content:before {
1097		content: ' ';
1098		z-index: 19;
1099		width: 0;
1100		height: 0;
1101		position: absolute;
1102		top: -10px;
1103		left: 7px;
1104		border-width: 0 10px 10px;
1105		border-style: solid;
1106		border-color: transparent;
1107		border-bottom-color: @ini_border;
1108	}
1109	#sidebar .tg_content:after {
1110		content: ' ';
1111		z-index: 20;
1112		width: 0;
1113		height: 0;
1114		position: absolute;
1115		top: -8px;
1116		left: 8px;
1117		border-width: 0 9px 8px;
1118		border-style: solid;
1119		border-color: transparent;
1120		border-bottom-color: @ini_background_site;
1121	}
1122
1123	[dir=rtl] {
1124		#sidebar .tg_content {
1125			right: 5px;
1126		}
1127		#sidebar .tg_content:before {
1128			right: 7px;
1129		}
1130		#sidebar .tg_content:after {
1131			right: 8px;
1132		}
1133	}
1134
1135	#sbNavigation {
1136		padding-left: .5em;
1137		margin-left: 0;
1138	}
1139	#sidebar h3,
1140	#sidebar h4	{
1141		font-size: 1rem;
1142		padding: .25em 0 .25em 2pt;
1143	}
1144	#sidebar ul, #sidebar ol {
1145		margin-left: .5em;
1146	}
1147	#sidebar ul ul, #sidebar ol ol,
1148	#sidebar ul ol, #sidebar ol ul {
1149		margin-left: 0;
1150	}
1151	#sidebar p,
1152	#sidebar li	{
1153		font-size: small;
1154		padding: .25em 0 .25em .25em;
1155	}
1156
1157	main {
1158		width: auto;
1159		box-shadow: 0 0 0 0 transparent;
1160	}
1161
1162	.toggle .tg_content,
1163	.toggle.alt .tg_content,
1164	.toggle.show .tg_content {
1165		display: initial;
1166	}
1167	.toggle.auto .tg_content {
1168		display: none;
1169	}
1170
1171	#toc.hide h3::after,
1172	#toc.auto h3::after {
1173		content: '\2630';
1174	}
1175	#toc.alt h3::after {
1176		content: '\203A';
1177	}
1178
1179	#toc.hide h3 > span,
1180	#toc.auto h3 > span {
1181		display: none;
1182	}
1183	#toc.alt h3 > span {
1184		display: inline-block;
1185	}
1186
1187	#footer-layout > footer {
1188		grid-template-columns: 12pt 1fr 1fr 1fr;
1189	}
1190}
1191
1192@media all and (max-width: @ini_tablet_width) and (prefers-color-scheme: dark) {
1193	body.darkmode #sidebar {
1194		.tg_content {
1195			& {
1196				background-color: @ini_background_dark;
1197				border-color: @ini_border_dark;
1198				box-shadow: 3px 3px 3px @ini_background_site_dark;
1199			}
1200			&::before {
1201				border-bottom-color: @ini_border_dark;
1202			}
1203			&::after {
1204				border-bottom-color: @ini_background_dark;
1205			}
1206		}
1207		hr {
1208			background: @ini_link_dark;
1209			background-image: linear-gradient(to right, @ini_background_dark, @ini_headlines_dark, @ini_background_dark);
1210		}
1211	}
1212}
1213
1214/* medium break point: */
1215@media all and (max-width: @ini_phone_width) {
1216	#footer-layout {
1217		& {
1218			padding-top: .5em;
1219		}
1220		& > footer {
1221			& {
1222				grid-template-columns: 100%;
1223				grid-template-rows: auto auto auto auto auto;
1224			}
1225			.ftSection {
1226				grid-column: 1;
1227				padding: 0 .25em 0 .5em;
1228				white-space: normal;
1229			}
1230			.ftSection ul {
1231				padding-left: 0;
1232			}
1233			.ftSection li {
1234				display: inline-block;
1235			}
1236			.ftSection li::before {
1237				content: '\00B7';
1238				display: inline;
1239				width: .35em;
1240				padding: 0 .35em;
1241			}
1242			.ftSection li:first-child::before {
1243				content: '';
1244				padding-left: 0;
1245			}
1246
1247			#ftPlaceholder {
1248				grid-row: 1;
1249			}
1250			#ftInclude {
1251				grid-row: 2;
1252			}
1253			#ftSiteTools {
1254				grid-row: 3;
1255			}
1256			#ftPageTools {
1257				grid-row: 4;
1258			}
1259			#ftLicenseButtons {
1260				grid-column: 1;
1261				grid-row: 5;
1262			}
1263
1264			h4 {
1265				margin-bottom: .5em;
1266			}
1267		}
1268	}
1269
1270	main blockquote {
1271		margin-left: .15em;
1272		margin-right: 0;
1273	}
1274	main ul, main ol {
1275		margin-left: .5em;
1276		margin-right: 0;
1277		padding-left: .75em;
1278	}
1279
1280	/* compact lists: */
1281	.dokuwiki main dl.compact {
1282		& {
1283			display: block;
1284		}
1285		dd {
1286			margin: .125em 1em;
1287		}
1288	}
1289}