xref: /template/ad-hominem/css/layout.less (revision 845e3befd6238b99b51cbd16d651202368d36456) 
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}
14body {
15	background-color:	@ini_background_site;
16	font-size:			@ini_default_font_size;
17	letter-spacing:		@ini_default_letter_spacing;
18}
19
20/* scrollbar styles */
21::-webkit-scrollbar {
22	width: .5rem;
23}
24::-webkit-scrollbar-track {
25	background: @ini_background_site;
26}
27::-webkit-scrollbar-thumb {
28	border-radius: .25rem;
29	background: @ini_blockquote;
30}
31::-webkit-scrollbar-thumb:hover {
32	background: @ini_separator;
33}
34
35#skip-link {
36	& {
37		position: fixed;
38		left: 4pt;
39		top: 4pt;
40		width: auto;
41		z-index: 9999;
42	}
43	a {
44		position: absolute;
45		background-color: @ini_background;
46		font-size: 1.25em;
47		color: @ini_link;
48		height: 1px;
49		overflow: hidden;
50		clip: rect(1px, 1px, 1px, 1px);
51	}
52	a:focus {
53		position: static;
54		display: inline-block;
55		padding: 8px;
56		height: auto;
57		clip: auto;
58		overflow: visible;
59		outline: 2px solid @ini_focus_color;
60	}
61	&:focus {
62		display: block;
63	}
64}
65
66.sronly {
67	position: absolute;
68	width: 0;
69	height: 0;
70	overflow: hidden;
71	display: block;
72}
73.printonly,
74.print-only,
75.wrap_print-only {
76	display: none;
77}
78div.no {
79	display: inline;
80	margin: 0;
81	padding: 0;
82}
83
84#globalTools {
85	& {
86		grid-column: 2 / span 2;
87		grid-row: 1;
88		text-align: right;
89		font-size: 10pt;
90	}
91	a:link {
92		text-decoration: none;
93	}
94}
95#gSiteTools {
96	& {
97		justify-self: start;
98	}
99	& select {
100		display:	none;
101	}
102}
103#gUserTools {
104	& {
105		justify-self: end;
106		padding-right: .5rem;
107	}
108	ul {
109		list-style: none inside;
110		display: block;
111	}
112	ul li {
113		display: inline;
114	}
115	ul li::before {
116		content: '\00B7';
117		display: inline-block;
118		width: .35em;
119		padding-right: .35em;
120	}
121	ul li:first-child::before {
122		content:		'';
123	}
124}
125
126#header-layout,
127#footer-layout {
128	width: 100%;
129}
130
131#header-layout > header {
132	width: 100%;
133	max-width: @ini_site_width;
134	margin: 0 auto;
135	padding-top: .25rem;
136	display: grid;
137	grid-template-columns: @ini_sidebar_width auto @ini_sidebar_width;
138	grid-template-rows: auto auto auto;
139	justify-items: stretch;
140}
141
142#siteLogo {
143	& {
144		grid-column: 1;
145		grid-row: 1 / span 3;
146		column-gap: 8px;
147		padding: 0 .25em 0 .5em;
148		display: grid;
149		grid-template-columns: 64px auto;
150		grid-template-rows: auto auto;
151	}
152	.logo {
153		margin-top: 3pt;
154		grid-column: 1;
155		grid-row: 1 / span 2;
156	}
157	.logo img {
158		width:					64px;
159		height:					auto;
160	}
161	.title,
162	.claim {
163		grid-column:			2;
164		grid-row:				2;
165		align-self:				start;
166		font-size:				10pt;
167		padding-right:			.5em;
168		max-width:				e("calc(") @ini_sidebar_width e(" - 80px)")
169	}
170	.title {
171		grid-row:				1;
172		align-self:				center;
173		font-size:				14pt;
174		line-height:			1em;
175		margin:					0;
176	}
177	.title * {
178	/*	font-family:			@ini_alt_fonts;
179		font-size:				13pt;	*/
180	}
181}
182
183#phSearch {
184	& {
185		grid-column: 2;
186		grid-row: 2;
187		padding: .5em 0;
188	}
189	form {
190
191		& > div.search-field {
192			width: 100%;
193			display: grid;
194			grid-template-columns: auto 20pt 20pt;
195			place-items: stretch;
196			border: @ini_border solid 1pt;
197			background: @ini_background;
198			border-radius: 4pt;
199			-moz-box-shadow: inset 0 0 3pt @ini_border;
200			-webkit-box-shadow: inset 0 0 3pt @ini_border;
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 {
214				outline-color: @ini_focus_color;
215			}
216			input {
217				grid-column: 1;
218				grid-row: 1;
219				z-index: 23;
220				font-size: large;
221				padding: 2pt 0 2pt 4pt;
222				border: transparent none 0;
223				border-radius: 3pt;
224				background-color: transparent;
225			}
226			input:focus {
227				outline: transparent none 0;
228			}
229			button {
230				border: transparent solid 1pt;
231				background: transparent none no-repeat center;
232				background-size: 13pt;
233				color: transparent;
234				width: 2em;
235				height: 2em;
236				border-radius: 3pt;
237				overflow: hidden;
238				margin: 1pt 1pt 1pt 0;
239				height: auto;
240				outline: transparent solid 2pt;
241			}
242			button[type=reset] {
243				background-image: url('images/delete.svg');
244				border-right: @ini_border solid 1pt;
245			}
246			button[type=submit] {
247				background-image: url('images/search.svg');
248			}
249			button:hover {
250				background-color: @ini_background_neu;
251				border-color: @ini_border;
252			}
253			button:focus {
254				background-color: @ini_background_neu;
255			}
256		}
257
258	}
259}
260#qsearch__out {
261	& {
262		z-index: 20;
263		position: relative;
264		left: 0;
265		width: auto;
266		padding: 0;
267		white-space: nowrap;
268		font-size: 1rem;
269		background-color: @ini_background_site;
270		-moz-box-shadow:	2px 2px 2px 0 rgba(0,0,0,.5);
271		-webkit-box-shadow:	2px 2px 2px 0 rgba(0,0,0,.5);
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#sidebar {
319	& {
320		width: 100%;
321		max-width: @ini_sidebar_width;
322		flex-grow: 0;
323	}
324	&.toggle.hide,
325	&.toggle.alt {
326		max-width: 1em;
327	}
328	p, ul, ol {
329		padding-left: 1.25em;
330	}
331	ul {
332		list-style: square outside;
333	}
334	ul ~ ul, ul ~ ol,
335	ol ~ ul, ol ~ ol {
336		margin-top: .5em;
337	}
338	ul li, ol li {
339		color: @ini_text_alt;
340		padding: .1em 0;
341	}
342	dl dt {
343		font-weight: bold;
344	}
345	a:link, a:visited {
346		color: @ini_link;
347	}
348	.home a::before {
349		content: ' ';
350		display: inline-block;
351		width: 10pt;
352		height: 1em;
353		background: transparent url('images/home.svg') no-repeat no-repeat 0 4px;
354		background-size: .8em;
355		padding-right: 3pt;
356	}
357	.curid {
358		font-weight: bold;
359	}
360	h4 {
361		font-size: 1rem;
362		margin: 0.25em 2pt;
363	}
364	& > button.tg_button {
365		float: right;
366		display: block;
367		background-color: transparent;
368		border: transparent none 0;
369		margin-right: 2px;
370		font-size: 1.5rem;
371	}
372	& > button:focus {
373		outline: @ini_focus_color solid 2px;
374	}
375	& > button.tg_button span {
376		display: none;
377	}
378	&.hide > button.tg_button,
379	&.alt > button.tg_button {
380		margin-left: 0;
381		width: 11pt;
382	}
383	& > button.tg_button span {
384
385	}
386	& > button.tg_button::after {
387		content: '\2039';
388		color: @ini_link;
389		display: inline-block;
390		width: .75em;
391		height: 1.25em;
392		text-align: center;
393	}
394	&.hide>button.tg_button span,
395	&.alt>button.tg_button span {
396		display: none;
397	}
398	&.hide>button.tg_button::after,
399	&.alt>button.tg_button::after {
400		content: '\203A';
401		width: auto;
402	}
403
404	.tg_content {
405		line-height: 1.5em;
406		font-size: 11.5pt;
407	}
408
409	hr {
410		border: 0;
411		height: 1pt;
412		background: @ini_text_alt;
413		background-image: linear-gradient(to right, @ini_background_alt, @ini_text_alt, @ini_background_alt);
414		margin: .5em 1em .5em 0;
415	}
416}
417
418#sbNavigation {
419	margin: 1em .25em 0 1em;
420}
421#navBreadCrumbs {
422	margin-left: .5em;
423}
424#navBreadCrumbs ol {
425	list-style: decimal outside;
426	padding-left: 2em;
427}
428
429
430#navYouAreHere {
431	& {
432		display: flex;
433		flex-flow: row nowrap;
434		position: relative;
435		top: 0;
436		left: 0;
437		height: 16pt;
438		overflow: hidden;
439		white-space: nowrap;
440	}
441	h4 {
442		display: none /*inline-block */;
443		font-family: @ini_default_fonts;
444		font-weight: normal;
445		font-size: small;
446		line-height: 1.5em;
447		margin: 0 .5em 0 0;
448	}
449	ol {
450		& {
451			list-style: none inside;
452			display: flex;
453			line-height: 1.5em;
454			height: 100pt;
455			padding-left: 0;
456			margin: 0 2pt 0 0;
457			font-size: small;
458			overflow: scroll hidden;
459		}
460		li {
461			& {
462				color: @ini_headlines;
463				display: inline;
464				margin-bottom: 0;
465				max-width: 20em;
466				min-width: 2.2em;
467				overflow: hidden;
468				text-overflow: '\202F...';
469			}
470
471			&:last-child { flex-shrink: 1; }
472			&:nth-last-child(2) { flex-shrink: 2; }
473			&:nth-last-child(3) { flex-shrink: 3; }
474			&:nth-last-child(4) { flex-shrink: 4; }
475			&:nth-last-child(5) { flex-shrink: 5; }
476			&:nth-last-child(6) { flex-shrink: 6; }
477
478			&.home {
479				min-width:		14px;
480				flex-shrink:	0 !important;
481			}
482
483			&::before {
484				content:		'\25B8';
485				padding:		0 2pt;
486				color:			@ini_text_alt;
487			}
488			&.home::before {
489				content:		'';
490				padding:		0;
491			}
492			&.home a {
493				display:		inline-block;
494				width:			14px;
495				overflow:		hidden;
496			}
497			&.home a::before {
498				content:		' ';
499				display:		inline-block;
500				width:			14px;
501				height:			1em;
502				background:		transparent url('images/home.svg') no-repeat left bottom;
503				filter:			hue-rotate(-80deg);
504			}
505		}
506	}
507}
508
509/* fix for issue with homepage */
510body.home #navYouAreHere ol li:last-child {
511	display:		none;
512}
513
514/* Table of Contents */
515#toc {
516	& {
517		clear: both;
518		float: right;
519		width: auto;
520		min-width: 32px;
521		padding-left: .25em;
522		line-height: 1.5em;
523		text-align: left;
524		max-width: @ini_toc_width;
525		background-color: transparent;
526		border: transparent none 0;
527		border-left: @ini_border solid 1pt;
528	}
529	ol {
530		list-style: none inside;
531		padding: 0 0 0 1em;
532		margin: 0;
533	}
534	ol li {
535		font-size: small;
536		line-height: 1.25em;
537		margin: .5em 0;
538	}
539}
540
541#toc-menubutton {
542	background: transparent;
543	margin-left: .5em;
544	padding: 0 .25em;
545	width: auto;
546	height: auto;
547	overflow: hidden;
548	border: transparent 0 none;
549	border-radius: 3pt;
550}
551#toc-menubutton > span {
552	font-family: @ini_alt_fonts;
553	line-height: 1.5em;
554	font-weight: bold;
555	color: @ini_headlines;
556}
557#toc-menubutton::after {
558	content: '\203A';
559	display: inline-block;
560	width: 1.5em;
561	text-align: center;
562}
563
564.hide #toc-menubutton::after,
565.alt #toc-menubutton::after {
566	content: '\2630';
567}
568
569.hide #toc-menubutton>span,
570.alt #toc-menubutton>span {
571	display: none;
572}
573
574main {
575	& {
576		width: e("calc(90% - 5px)");
577		flex-grow: 100;
578		background-color: @ini_background;
579		color: @ini_text;
580		line-height: 1.5em;
581		padding: 1.5em 5% .75em 5%;
582		border: @ini_border solid 1px;
583		border-radius: 5px;
584	}
585
586	/* edit buttons */
587	.secedit {
588		float: right;
589		margin-top: -22pt;
590		line-height: 0;
591	}
592	.secedit button {
593		border: @ini_border solid 1pt;
594		background-color: transparent;
595		color: transparent;
596		width: 20pt;
597		height: 20pt;
598		border-radius: 50%;
599		font-size: 0;
600		cursor: pointer;
601	}
602	.secedit button::before {
603		content: ' ';
604		display: inline-block;
605		width: 13pt;
606		height: 13pt;
607		padding: 2pt;
608		background: transparent url('images/edit.svg') no-repeat center;
609		background-size: 10pt;
610	}
611	.secedit button:hover {
612		background-color: @ini_highlight;
613		border: @ini_text_alt solid 1pt;
614	}
615	.secedit button:focus {
616		background-color: @ini_highlight;
617		border: @ini_focus_color solid 2px;
618		outline: transparent none 0;
619	}
620	.secedit button:hover::before {
621	}
622
623	.section_highlight {
624		border-radius: .5em;
625		outline: orange dashed 3px;
626	}
627
628	/* math fonts */
629	math, .math, .math *,
630	.wrap_math, .wrap_math * {
631		font-family: @ini_math_fonts;
632		font-size: 12pt;
633		line-height: 1em;
634	}
635
636/* figure block */
637	figure {
638		& {
639			padding: .5em;
640			overflow: hidden;
641		}
642		figcaption {
643			margin-top: .5em;
644			font-size: smaller;
645		}
646		figcaption p {
647			margin-bottom: 0;
648		}
649		> *:first-child {
650			margin-top: .25em;
651		}
652		table {
653			background-color: @ini_background;
654			margin: 0;
655		}
656		div.table {
657			margin: 0;
658		}
659		> p {
660			margin: 0;
661		}
662	}
663
664	& > footer {
665		margin-top: 1em;
666		padding-top: 1em;
667		text-align: right;
668	}
669	& > footer p.docInfo {
670		display: inline-block;
671		border-top: @ini_separator solid 1px;
672		padding-top: .5em;
673		padding-left: 5%;
674		font-size: small;
675		color: @ini_text_alt;
676	}
677}
678
679body.mediadetail {
680	figure {
681		img {
682			background: transparent url('images/transparency.gif');
683		}
684		table {
685			&.img_detail,
686			&.img_detail th,
687			&.img_detail td {
688				border: none;
689			}
690			&.img_detail th {
691				text-align: right;
692				white-space: nowrap;
693				border: none;
694			}
695		}
696	}
697}
698
699#footer-layout {
700	& {
701		padding-top: 1.5em;
702	}
703	& > footer {
704		& {
705			width: 100%;
706			max-width: @ini_site_width;
707			margin: 0 auto;
708			display: grid;
709			grid-template-columns: @ini_sidebar_width 1fr 1fr 1fr;
710			grid-template-rows: auto auto;
711			grid-gap: 6pt;
712			align-items: stretch;
713		}
714		.ftSection {
715			padding-left: 1em;
716		}
717		.ftSection ul {
718			list-style: none inside;
719			padding-left: .5em;
720		}
721		.ftSection ul li {
722			margin-bottom: .5em;
723			font-size: small;
724		}
725		.ftSection ul li a {
726			white-space: nowrap;
727		}
728		h4 {
729			color: @ini_headlines;
730			margin: 0 0 1em 0;
731			font-family: @ini_alt_fonts;
732			font-size: 1rem;
733		}
734
735		#ftPlaceholder>* {
736			display: none;
737		}
738	}
739}
740
741#ftLicenseButtons {
742	& {
743		grid-row: 2;
744		grid-column: 2 / span 3;
745		text-align: center;
746		font-size: small;
747		padding-top: 1em;
748	}
749	hr {
750		border: 0;
751		height: 1pt;
752		background: #333;
753		background-image: linear-gradient(to right, @ini_background_alt, @ini_text_alt, @ini_background_alt);
754	}
755	p.license {
756		margin: .5em 0 1em 0;
757		font-size: small;
758		color: @ini_text_alt;
759	}
760	p.license bdi {
761		display: block;
762		width: 100%;
763	}
764}
765
766/* togglers */
767.toggle .tg_button.active {
768	color:			@ini_link;
769	cursor:			pointer;
770}
771.toggle .tg_content,
772.toggle.auto .tg_content,
773.toggle.show .tg_content {
774	display:		initial;
775}
776.toggle.hide .tg_content,
777.toggle.alt .tg_content {
778	display:		none;
779}
780
781/* config overrides */
782#config__manager {
783	#dw__configform {
784
785		.selectiondefault {
786			background-color: @ini_background_alt;
787		}
788		.selection input {
789			margin-left: .5em;
790		}
791
792		& p:last-child {
793			position: -webkit-sticky; /* Safari */
794			position: sticky;
795			bottom: 0;
796			box-sizing: border-box;
797			background-color: rgba(255,255,255,.67);
798			border: @ini_border solid 2pt;
799			padding: .5em 0;
800			z-index: 9;
801			display: grid;
802			grid-template-columns: auto auto;
803			justify-items: center;
804		}
805		 p:last-child button {
806			border: @ini_border solid 2pt;
807			padding: .25em .5em;
808		}
809		p:last-child button[type=submit] {
810			background-color: #ccddff;
811		}
812	}
813
814	fieldset {
815		background-color: transparent;
816		color: inherit;
817	}
818
819	table {
820		th, td {
821			border: none;
822		}
823		td.label span.outkey {
824			background-color: inherit;
825		}
826
827		tr.default .input,
828		tr .input {
829			background-color: transparent;
830		}
831	}
832}
833#extension__list {
834	.legend a.info, .legend a.info.close {
835		width: 22px;
836		height: 22px;
837		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;
838		background-size: 24px;
839		border-radius: 50%;
840		margin-bottom: .5em;
841	}
842}
843
844/* RTL Overrides */
845[dir=rtl] {
846	#phSearch form .search-popup {
847		margin-right: 0;
848		margin-left: 21pt;
849	}
850	#phSearch form > div input {
851		padding-right: 4pt;
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
888	main > footer {
889		text-align: left;
890	}
891	main > footer p.docInfo {
892		padding-left: 0;
893		padding-right: 5%;
894	}
895}
896
897/* dark mode overrides */
898@media screen and (prefers-color-scheme: dark) {
899
900	body.darkmode {
901
902		& { background-color: @ini_background_site_dark; color: @ini_text_dark; }
903		#skip-link a { background-color: @ini_background_dark;color: @ini_link_dark;}
904		#navYouAreHere ol {
905			li { color: @ini_headlines_dark;}
906			li::before { color: @ini_text_alt_dark;}
907		}
908		#phSearch form > div {
909			&.search-field { border-color: @ini_border_dark; background: @ini_background_dark; }
910			input { color: @ini_text_dark; }
911			button[type="reset"] {border-right-color: @ini_border_dark; }
912		}
913		#qsearch__out {
914			& { background-color: @ini_background_site_dark; }
915			ul, li { border-color: @ini_border_dark; }
916		}
917
918		#config__manager {
919			#dw__configform {
920
921				.selectiondefault {
922					background-color: @ini_background_alt_dark;
923				}
924				.selectiondefault label {
925					color: @ini_text_dark;
926				}
927
928				p:last-child {
929					& {
930						background-color: rgba(57,57,61,.67);
931						border-color: @ini_border_dark;
932					}
933					button {
934						background-color: @ini_background_dark;
935						border-color: @ini_border_dark;
936						color: @ini_missing_dark;
937					}
938					button[type=submit] {
939						border-color: @ini_existing_dark;
940						background-color: @ini_background_dark;
941						color: @ini_existing_dark;
942					}
943				}
944			}
945		}
946		#sbNavigation {
947			h1, h2, h3, h4, h5, h6 { color: @ini_headlines_dark; }
948		}
949		#sidebar {
950			hr { background-image:	linear-gradient(to right, @ini_background_site_dark, @ini_text_alt, @ini_background_site_dark); }
951			a:link, a:visited { color: @ini_link_dark; }
952		}
953
954		#toc {
955			& { border-color: @ini_border_dark; }
956			#toc-menubutton,
957			#toc-menubutton span { color: @ini_headlines_dark; }
958		}
959
960		main {
961			& { background-color: @ini_background_dark; color: @ini_text_dark; border-color: @ini_background_dark; }
962			h1, h2, h3, h4, h5, h6 { color: @ini_headlines_dark; }
963			& > footer p.docInfo { color: @ini_text_alt_dark; }
964			figure table { background-color: @ini_background_dark; }
965		}
966
967		#footer-layout > footer h4 { color: @ini_headlines_dark; }
968
969		#ftLicenseButtons {
970			p.license { color: @ini_text_alt_dark; }
971			hr { background-image: linear-gradient(to right, @ini_background_site_dark, @ini_text_dark, @ini_background_site_dark); }
972		}
973
974		/* Extension Manager: */
975		#extension__manager{
976			.panelHeader { background-color: @ini_background_alt_dark; }
977			ul.tabs li a { background-color: @ini_background_dark; border-color: @ini_border_dark; color: @ini_text_dark }
978			ul.tabs li.active a { background-color: @ini_background_alt_dark; border-color: @ini_text_dark; }
979			tr .input, tr.default .input { color: @ini_text_dark; }
980		}
981		#extension__list ul.extensionList li { color: @ini_text_dark; }
982	}
983
984	/* dark scrollbar styles for webkit browsers: */
985	&::-webkit-scrollbar-track {
986		background: @ini_background_site_dark;
987	}
988	&::-webkit-scrollbar-thumb {
989		background: @ini_background_alt_dark;
990	}
991	&::-webkit-scrollbar-thumb:hover {
992		background: @ini_background_dark;
993	}
994	/* dark scrollbars for firefox: */
995	* { scrollbar-color: @ini_background_alt_dark @ini_background_site_dark; }
996}
997
998/* tablet break point */
999@media all and (max-width: @ini_tablet_width) {
1000	#header-layout>header {
1001		margin:				0;
1002		grid-template-columns:	e("repeat(2, auto)");
1003		grid-template-rows:		e("repeat(4, auto)");
1004	}
1005	#header-layout>header #siteLogo {
1006		grid-column:		1;
1007		grid-row:			1;
1008	}
1009	#header-layout>header #globalTools {
1010		grid-row:			1;
1011		grid-column:		2;
1012	}
1013	#header-layout>header #globalTools ul li {
1014		display:			block;
1015		margin-bottom:		.5em;
1016	}
1017	#header-layout>header #globalTools ul li:before {
1018		content:			'';
1019	}
1020	#header-layout>header #phSearch {
1021		grid-row:			2;
1022		grid-column:		1 / span 2;
1023		padding:			.5em 1em 0 68px;
1024	}
1025	#header-layout>header #phTools {
1026		grid-row:			3;
1027		grid-column:		1 / span 2;
1028	}
1029	#header-layout>header #phInclude {
1030		grid-row:			4;
1031		grid-column:		1 / span 2;
1032		margin:				0 6pt 5pt 64px;
1033	}
1034
1035	#qsearch__out ul {
1036		max-height:		100%;
1037	}
1038
1039	#main-layout {
1040		display:			block;
1041	}
1042
1043	#sidebar.toggle {
1044		width:					auto;
1045		margin-left:			.5em;
1046		padding:				0;
1047		position:				relative;
1048		top:					-2.25em;
1049		height:					.25em;
1050	}
1051	#sidebar>button.tg_button {
1052		float:					none;
1053	}
1054	#sidebar.auto>button.tg_button,
1055	#sidebar.hide>button.tg_button,
1056	#sidebar.alt>button.tg_button,
1057	#sidebar.show>button.tg_button {
1058		width:					1.5em;
1059	}
1060	#sidebar > button.tg_button span {
1061		display:				none;
1062	}
1063
1064	#sidebar > button.tg_button::after {
1065		content:				'\2630';
1066	}
1067	#sidebar.hide>button.tg_button::after,
1068	#sidebar.alt>button.tg_button::after {
1069		content:				'\2715';
1070	}
1071
1072	#sidebar .tg_content {
1073		min-width:				@ini_sidebar_width;
1074		padding-right:			0;
1075		margin-top:				10px;
1076		padding-bottom:			1em;
1077		background-color:		@ini_background_site;
1078		position:				absolute;
1079		z-index:				18;
1080		border:					@ini_border solid 1px;
1081		-moz-box-shadow:		2px 2px 2px @ini_border;
1082		-webkit-box-shadow:		2px 2px 2px @ini_border;
1083		box-shadow:				2px 2px 2px @ini_border;
1084	}
1085
1086	#sidebar .tg_content:before {
1087		content:				' ';
1088		z-index:				19;
1089		width:					0;
1090		height:					0;
1091		position:				absolute;
1092		top:					-10px;
1093		left:					7px;
1094		border-width:			0 10px 10px;
1095		border-style:			solid;
1096		border-color:			transparent;
1097		border-bottom-color:	@ini_border;
1098	}
1099	#sidebar .tg_content:after {
1100		content:				' ';
1101		z-index:				20;
1102		width:					0;
1103		height:					0;
1104		position:				absolute;
1105		top:					-8px;
1106		left:					8px;
1107		border-width:			0 9px 8px;
1108		border-style:			solid;
1109		border-color:			transparent;
1110		border-bottom-color:	@ini_background_site;
1111	}
1112
1113	#sbNavigation {
1114		padding-left:		.5em;
1115		margin-left:		0;
1116	}
1117	#sidebar h3,
1118	#sidebar h4	{
1119		font-size:			1rem;
1120		padding:			.25em 0 .25em 2pt;
1121	}
1122	#sidebar ul, #sidebar ol {
1123		margin-left:		.5em;
1124	}
1125	#sidebar ul ul, #sidebar ol ol,
1126	#sidebar ul ol, #sidebar ol ul {
1127		margin-left:		0;
1128	}
1129	#sidebar p,
1130	#sidebar li	{
1131		font-size:			small;
1132		padding:			.25em 0 .25em .25em;
1133	}
1134
1135	main {
1136		width:				auto;
1137		box-shadow:			0 0 0 0 transparent;
1138	}
1139
1140	.toggle .tg_content,
1141	.toggle.alt .tg_content,
1142	.toggle.show .tg_content {
1143		display:		initial;
1144	}
1145	.toggle.auto .tg_content {
1146		display:		none;
1147	}
1148
1149	#toc.hide h3::after,
1150	#toc.auto h3::after {
1151		content:			'\2630';
1152	}
1153	#toc.alt h3::after {
1154		content:			'\203A';
1155	}
1156
1157	#toc.hide h3 > span,
1158	#toc.auto h3 > span {
1159		display: none;
1160	}
1161	#toc.alt h3 > span {
1162		display: inline-block;
1163	}
1164
1165	#footer-layout > footer {
1166		grid-template-columns: 12pt 1fr 1fr 1fr;
1167	}
1168
1169	/* admin interface */
1170	.dokuwiki div.ui-admin ul.admin_tasks {
1171		float: none;
1172		width: auto;
1173	}
1174	.dokuwiki div.ui-admin #admin__version {
1175		display: none;
1176	}
1177}
1178
1179@media all and (max-width: @ini_tablet_width) and (prefers-color-scheme: dark) {
1180	body.darkmode #sidebar {
1181		.tg_content {
1182			& {
1183				background-color:	@ini_background_dark;
1184				border-color:		@ini_border_dark;
1185				-moz-box-shadow:		3px 3px 3px @ini_background_site_dark;
1186				-webkit-box-shadow:		3px 3px 3px @ini_background_site_dark;
1187				box-shadow:				3px 3px 3px @ini_background_site_dark;
1188			}
1189			&:before {
1190				border-bottom-color:	@ini_border_dark;
1191			}
1192			&:after {
1193				border-bottom-color:	@ini_background_dark;
1194			}
1195		}
1196		hr {
1197			background:				@ini_link_dark;
1198			background-image:		linear-gradient(to right, @ini_background_dark, @ini_headlines_dark, @ini_background_dark);
1199		}
1200	}
1201}
1202
1203/* medium break point: */
1204@media all and (max-width: @ini_phone_width) {
1205	#footer-layout {
1206		& {
1207			padding-top: .5em;
1208		}
1209		& > footer {
1210			& {
1211				grid-template-columns: 100%;
1212				grid-template-rows: auto auto auto auto auto;
1213			}
1214			.ftSection {
1215				grid-column: 1;
1216				padding: 0 .25em 0 .5em;
1217				white-space: normal;
1218			}
1219			.ftSection ul {
1220				padding-left: 0;
1221			}
1222			.ftSection li {
1223				display: inline-block;
1224			}
1225			.ftSection li::before {
1226				content: '\00B7';
1227				display: inline;
1228				width: .35em;
1229				padding: 0 .35em;
1230			}
1231			.ftSection li:first-child::before {
1232				content: '';
1233				padding-left: 0;
1234			}
1235
1236			#ftPlaceholder {
1237				grid-row: 1;
1238			}
1239			#ftInclude {
1240				grid-row: 2;
1241			}
1242			#ftSiteTools {
1243				grid-row: 3;
1244			}
1245			#ftPageTools {
1246				grid-row: 4;
1247			}
1248			#ftLicenseButtons {
1249				grid-column: 1;
1250				grid-row: 5;
1251			}
1252
1253			h4 {
1254				margin-bottom: .5em;
1255			}
1256		}
1257	}
1258
1259	main blockquote {
1260		margin-left:	.15em;
1261		margin-right:	0;
1262	}
1263	main ul, main ol {
1264		margin-left:	.5em;
1265		margin-right:	0;
1266		padding-left:	.75em;
1267	}
1268}