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