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