1/**
2 * This file provides styles for the Languages list,
3 * both for the side- and the toolbar.
4 * This overrides some of the styles in the languages plugin.
5 */
6
7#tbLanguages, #sbLanguages {
8
9	ul {
10		& {
11			margin-left: .5em;
12		}
13		li {
14			& {
15				list-style: none inside;
16			}
17			a  {
18				& {
19					display: grid;
20					grid-template-columns: 1.25em auto;
21					align-items: center;
22					gap: .4em;
23					padding: .125em;
24					line-height: 1.2em;
25				}
26				&::before {
27					content: attr(lang);
28					display: inline-block;
29					text-align: center;
30					place-self: stretch;
31					border: @ini_text solid 1px;
32					font-size: small;
33					border-radius: 1.5pt;
34					font-family: @ini_mono_fonts;
35					font-size: .75rem;
36					color: @ini_text;
37				}
38				&.wikilink1 {
39					& {
40						color: @ini_link;
41					}
42					&:hover {
43						text-decoration: none;
44					}
45					&:hover span {
46						text-decoration: underline;
47					}
48				}
49				&.wikilink2 {
50					& {
51						border-bottom: transparent 0 none;
52					}
53					&:hover {
54						text-decoration: none;
55					}
56					bdi {
57						color: @ini_missing;
58						text-decoration: underline;
59						text-decoration-style: dotted;
60					}
61				}
62				&.wikilink2:hover span {
63					text-decoration-style: solid;
64				}
65			}
66		}
67	}
68}
69
70#tbLanguages {
71
72	& {
73		display: grid;
74		place-items: center;
75		grid-template-rows: auto 0;
76		height: 100%;
77	}
78	button {
79		& {
80			padding: .25em;
81			font-size: 1rem;
82			border: transparent 1px solid;
83			background-color: transparent;
84			color: @ini_link;
85			cursor: pointer;
86			border-radius: .25em;
87		}
88		&:hover {
89			background-color: @ini_background_alt;
90			border-color: @ini_border;
91			text-decoration: underline;
92		}
93		svg {
94			width: 1.8rem; height: 1.8rem;
95			fill: @ini_link;
96		}
97		svg text {
98			fill: @ini_background_site;
99			text-transform: uppercase;
100		}
101	}
102	#langMenuWrapper {
103		& {
104			position: relative;
105			left: 2rem; top: .5rem;
106		}
107		#langMenu {
108			& {
109				position: absolute;
110				right: 0;
111				background-color: @ini_background_site;
112				border: @ini_border solid 1px;
113				box-shadow: 0 0 8px rgba(0,0,0,.2);
114				border-radius: 2pt;
115				padding: .25em;
116				z-index: 12;
117			}
118			&:before {
119				content: '';
120				position: absolute;
121				top: 0;
122				height: 1em;
123				right: 16%;
124				width: 1em;
125				margin-left: -.5em;
126				background-color: @ini_background_site;
127				box-shadow: 0 0 8px rgba(0,0,0,.2);
128				-webkit-clip-path: polygon(-8px -8px,calc(100% + 8px) -8px,calc(100% + 8px) calc(100% + 8px));
129				clip-path: polygon(-8px -8px,calc(100% + 8px) -8px,calc(100% + 8px) calc(100% + 8px));
130				transform: translateY(-50%) rotate(-45deg);
131				border: @ini_border solid 1px;
132			}
133			li a {
134				& {
135					font-size: 1rem;
136					padding: .25em;
137					min-width: 6.5em;
138					width: max-content;
139				}
140			}
141		}
142	}
143}
144
145#sbLanguages {
146	& {
147		margin: 1em .25em 0 1em;
148	}
149	h3 a.wikilink2 {
150		color: @ini_missing;
151	}
152	ul {
153		padding-left: 0 !important;
154	}
155}
156
157/* dark mode overrides: */
158@media (prefers-color-scheme: dark) {
159
160	body.darkmode {
161
162		#tbLanguages, #sbLanguages {
163			ul li a {
164				&::before { border-color: @ini_text_dark; color: @ini_text_dark; }
165				&.wikilink1 { color: @ini_link_dark; }
166				&.wikilink2 bdi { color: @ini_missing_dark; }
167			}
168		}
169
170		#tbLanguages {
171			button {
172				& { color: @ini_link_dark; }
173				&:hover { background-color: @ini_background_alt_dark; border-color: @ini_border_dark; }
174				svg { fill: @ini_link_dark; }
175				svg text { fill: @ini_background_site_dark; }
176			}
177			#langMenuWrapper #langMenu {
178				& {
179					background-color: @ini_background_site_dark;
180					border-color: @ini_border_dark;
181					box-shadow: 1pt 1pt 5pt rgba(0,0,0,0.4);;
182				}
183				&:before {
184					background-color: @ini_background_site_dark;
185					box-shadow: 1pt 1pt 5pt rgba(0,0,0,0.4);;
186					border-color: @ini_border_dark;
187				}
188			}
189		}
190		#sbLanguages h3 a.wikilink2 {
191			color: @ini_missing_dark;
192		}
193	}
194}
195
196@media (max-width: 950px) {
197
198	/* touchup for the languages list in menu mode */
199	#sbLanguages {
200		margin: .5em .25em 0 .5em;
201	}
202}