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