xref: /template/ad-hominem/css/_languages.less (revision 764c430f5742e2c3ddf3589c3653518011b93967) 
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#sbLanguages, #tbLanguages {
8
9	div.plugin_translation {
10
11		&.is-dropdown {
12			& {
13				padding-bottom: 0;
14			}
15			ul {
16				& {
17					border: @ini_border solid 1px;
18				}
19				li {
20					& {
21					}
22					&.a {
23						background-color: @ini_background_alt;
24					}
25					&.a:hover {
26						background-color: @ini_background_neu;
27					}
28					&.span span:after {
29						content: '';
30						display: inline-block;
31						position: absolute;
32						right: .6em;
33						margin-top: .2em;
34						width: 1em; height: 1em;
35						background: transparent  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 9H16L12 16' /%3E%3C/svg%3E") center no-repeat;
36						background-size: 1.25em;
37					}
38				}
39			}
40		}
41
42		/* the title should resemble a headline: */
43		& > span.title {
44			display: block;
45			text-align: left;
46			font-family: @ini_headline_fonts;
47			color: @ini_headlines;
48			line-height: 1.5em;
49			font-size: 1rem;
50			font-weight: bold;
51			margin: 1em .25em 0 1em;
52		}
53
54		& > ul {
55			& {
56				position: initial;
57				display: grid;
58				width: ~"calc(100% - 1.5rem)";
59				padding: 0;
60				margin: .5em 0 0 1rem;
61			}
62			li {
63				& {
64					display: block;
65					padding: 0; margin: 0;
66				}
67				&.span span {
68					background-color: transparent;
69					color: @ini_link;
70				}
71				&.a a {
72					& {
73						background-color: transparent;
74						color: @ini_link;
75					}
76					&.wikilink2 {
77						color: @ini_missing;
78					}
79					&:hover {
80						text-decoration: underline;
81					}
82				}
83			}
84		}
85	}
86}
87
88#tbLanguages div.plugin_translation {
89
90	span.title {
91		display: none;
92	}
93
94	ul {
95		& {
96			position: absolute;
97			width: max-content;
98			margin-right: 1rem;
99		}
100		&:hover {
101			background-color: @ini_background_alt;
102			box-shadow: 1pt 1pt 2pt #00000088;
103		}
104		li.span {
105			padding-right: 2.5rem;
106		}
107	}
108
109}
110
111/* dark mode overrides */
112@media (prefers-color-scheme: dark) {
113
114	#sbLanguages, #tbLanguages {
115		div.plugin_translation {
116			&.is-dropdown ul {
117				& { border-color: @ini_border_dark; }
118				li {
119					&.a { background-color: @ini_background_alt_dark; }
120					&.a:hover { background-color: @ini_background_dark; }
121					&.span span:after {
122						background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 9H16L12 16' style='fill:%2338383D' /%3E%3C/svg%3E");
123					}
124				}
125			}
126			& > span.title { color: @ini_headlines_dark; }
127			& > ul li {
128				&.span span { color: @ini_link_dark; }
129				&.a a {
130					& { color: @ini_link_dark; }
131					&.wikilink2 { color: @ini_missing_dark; }
132				}
133			}
134		}
135	}
136
137	#tbLanguages div.plugin_translation {
138		ul:hover {
139			background-color: @ini_background_alt;
140			box-shadow-color: 1pt 1pt 2pt #00000055;
141		}
142	}
143}