Localisation updates from https://translatewiki.net.
[mediawiki.git] / resources / lib / ooui / oojs-ui-core-wikimediaui.css
blob07fea8e0a8d7ecadb0724095260befea156b7232
1 /*!
2 * OOUI v0.51.4
3 * https://www.mediawiki.org/wiki/OOUI
5 * Copyright 2011–2024 OOUI Team and other contributors.
6 * Released under the MIT license
7 * http://oojs.mit-license.org
9 * Date: 2024-12-05T17:34:44Z
11 .oo-ui-element-hidden {
12 display: none !important;
15 .oo-ui-buttonElement {
16 display: inline-block;
17 line-height: normal;
18 vertical-align: middle;
20 .oo-ui-buttonElement > .oo-ui-buttonElement-button {
21 cursor: pointer;
22 display: inline-block;
23 box-sizing: border-box;
24 vertical-align: middle;
25 font-family: inherit;
26 font-size: inherit;
27 white-space: nowrap;
28 -webkit-touch-callout: none;
29 -webkit-user-select: none;
30 -moz-user-select: none;
31 -ms-user-select: none;
32 user-select: none;
34 .oo-ui-buttonElement > .oo-ui-buttonElement-button::-moz-focus-inner {
35 border-color: transparent;
36 padding: 0;
38 .oo-ui-buttonElement.oo-ui-widget-disabled > .oo-ui-buttonElement-button {
39 cursor: default;
41 .oo-ui-buttonElement-frameless {
42 position: relative;
44 .oo-ui-buttonElement-framed > .oo-ui-buttonElement-button {
45 vertical-align: top;
46 text-align: center;
48 .oo-ui-buttonElement > .oo-ui-buttonElement-button {
49 position: relative;
50 min-height: 32px;
51 border-radius: 2px;
52 padding-top: 2.14285714em;
53 font-weight: 700;
54 text-decoration: none;
56 .oo-ui-buttonElement > input.oo-ui-buttonElement-button {
57 -webkit-appearance: none;
59 .oo-ui-buttonElement.oo-ui-labelElement > .oo-ui-buttonElement-button {
60 line-height: 1;
62 .oo-ui-buttonElement.oo-ui-labelElement > input.oo-ui-buttonElement-button,
63 .oo-ui-buttonElement.oo-ui-labelElement > .oo-ui-buttonElement-button > .oo-ui-labelElement-label {
64 line-height: 1.42857143em;
66 .oo-ui-buttonElement.oo-ui-labelElement.oo-ui-indicatorElement > .oo-ui-buttonElement-button {
67 padding-right: 2.14285714em;
69 .oo-ui-buttonElement.oo-ui-iconElement .oo-ui-iconElement-icon,
70 .oo-ui-buttonElement.oo-ui-indicatorElement .oo-ui-indicatorElement-indicator {
71 transform: translateZ(0);
73 .oo-ui-buttonElement.oo-ui-indicatorElement.oo-ui-labelElement > .oo-ui-buttonElement-button > .oo-ui-indicatorElement-indicator,
74 .oo-ui-buttonElement.oo-ui-indicatorElement.oo-ui-iconElement > .oo-ui-buttonElement-button > .oo-ui-indicatorElement-indicator {
75 right: 0.71428571em;
77 .oo-ui-buttonElement.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
78 transition-property: background-color, color, border-color, box-shadow;
79 transition-duration: 100ms;
81 .oo-ui-buttonElement.oo-ui-widget-enabled > .oo-ui-buttonElement-button > .oo-ui-iconElement-icon,
82 .oo-ui-buttonElement.oo-ui-widget-enabled > .oo-ui-buttonElement-button > .oo-ui-indicatorElement-indicator {
83 transition-property: opacity;
84 transition-duration: 100ms;
86 .oo-ui-buttonElement.oo-ui-widget-enabled > .oo-ui-buttonElement-button > .oo-ui-iconElement-icon:not( .oo-ui-image-invert ),
87 .oo-ui-buttonElement.oo-ui-widget-enabled > .oo-ui-buttonElement-button > .oo-ui-indicatorElement-indicator:not( .oo-ui-image-invert ) {
88 opacity: 0.87;
90 .oo-ui-buttonElement.oo-ui-widget-enabled > .oo-ui-buttonElement-button:focus {
91 outline: 1px solid transparent;
93 .oo-ui-buttonElement.oo-ui-widget-enabled.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button > .oo-ui-iconElement-icon,
94 .oo-ui-buttonElement.oo-ui-widget-enabled.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button > .oo-ui-indicatorElement-indicator {
95 opacity: 1;
97 .oo-ui-buttonElement-frameless.oo-ui-iconElement:first-child {
98 margin-left: -0.42857143em;
100 .oo-ui-buttonElement-frameless.oo-ui-iconElement > .oo-ui-buttonElement-button {
101 min-width: 32px;
102 min-height: 32px;
103 border-color: var(--border-color-transparent, transparent);
104 border-style: solid;
105 border-width: 1px;
106 padding-top: 2.14285714em;
107 padding-left: 2.14285714em;
109 .oo-ui-buttonElement-frameless.oo-ui-iconElement > .oo-ui-buttonElement-button > .oo-ui-iconElement-icon {
110 left: 0.35714286em;
112 .oo-ui-buttonElement-frameless.oo-ui-labelElement:first-child {
113 margin-left: -6px;
115 .oo-ui-buttonElement-frameless.oo-ui-labelElement.oo-ui-iconElement:first-child {
116 margin-left: -0.42857143em;
118 .oo-ui-buttonElement-frameless.oo-ui-labelElement > .oo-ui-buttonElement-button {
119 border-color: var(--border-color-transparent, transparent);
120 border-style: solid;
121 border-width: 1px;
122 padding: 5px 6px;
124 .oo-ui-buttonElement-frameless.oo-ui-labelElement.oo-ui-iconElement > .oo-ui-buttonElement-button {
125 padding-left: 2.14285714em;
127 .oo-ui-buttonElement-frameless.oo-ui-indicatorElement:not( .oo-ui-iconElement ):not( .oo-ui-labelElement ) > .oo-ui-buttonElement-button {
128 min-width: 12px;
130 .oo-ui-buttonElement-frameless.oo-ui-indicatorElement.oo-ui-iconElement > .oo-ui-buttonElement-button {
131 padding-left: 3.85714294em;
133 .oo-ui-buttonElement-frameless.oo-ui-indicatorElement.oo-ui-labelElement > .oo-ui-buttonElement-button {
134 padding-left: 6px;
135 padding-top: 5px;
137 .oo-ui-buttonElement-frameless.oo-ui-indicatorElement.oo-ui-iconElement.oo-ui-labelElement > .oo-ui-buttonElement-button {
138 padding-left: 2.14285714em;
140 .oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
141 color: var(--color-base, #202122);
143 .oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover {
144 background-color: var(--background-color-button-quiet--hover, rgba(0, 24, 73, 0.027));
145 color: var(--color-emphasized, #000);
147 .oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button:focus {
148 border-color: var(--border-color-progressive--focus, #36c);
149 box-shadow: inset 0 0 0 1px var(--box-shadow-color-progressive--focus, #36c);
151 .oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-buttonElement-pressed > input.oo-ui-buttonElement-button,
152 .oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button:active {
153 background-color: var(--background-color-button-quiet--active, rgba(0, 24, 73, 0.082));
154 color: var(--color-emphasized, #000);
155 border-color: var(--border-color-interactive, #72777d);
156 box-shadow: none;
158 .oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-indicatorElement:not( .oo-ui-iconElement ):not( .oo-ui-labelElement ) > .oo-ui-buttonElement-button {
159 border-radius: 1px;
161 .oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-indicatorElement:not( .oo-ui-iconElement ):not( .oo-ui-labelElement ) > .oo-ui-buttonElement-button:focus {
162 box-shadow: 0 0 0 2px var(--box-shadow-color-progressive--focus, #36c);
164 .oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-indicatorElement:not( .oo-ui-iconElement ):not( .oo-ui-labelElement ) > .oo-ui-buttonElement-button:active {
165 box-shadow: none;
167 .oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button {
168 color: var(--color-progressive, #36c);
170 .oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:hover {
171 color: var(--color-progressive--hover, #4b77d6);
173 .oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:active,
174 .oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button {
175 color: var(--color-progressive--active, #233566);
176 border-color: var(--color-progressive--active, #233566);
177 box-shadow: none;
179 .oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button {
180 color: var(--color-destructive, #d73333);
182 .oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button:hover {
183 color: var(--color-destructive--hover, #fc493b);
185 .oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button:active,
186 .oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button {
187 color: var(--color-destructive--active, #9f3526);
188 border-color: var(--color-destructive--active, #9f3526);
189 box-shadow: none;
191 .oo-ui-buttonElement-frameless.oo-ui-widget-enabled[class*='oo-ui-flaggedElement'] > .oo-ui-buttonElement-button > .oo-ui-iconElement-icon,
192 .oo-ui-buttonElement-frameless.oo-ui-widget-enabled[class*='oo-ui-flaggedElement'] > .oo-ui-buttonElement-button > .oo-ui-indicatorElement-indicator {
193 opacity: 1;
195 .oo-ui-buttonElement-frameless.oo-ui-widget-disabled > .oo-ui-buttonElement-button {
196 color: var(--color-disabled, #72777d);
198 .oo-ui-buttonElement-frameless.oo-ui-widget-disabled > .oo-ui-buttonElement-button > .oo-ui-iconElement-icon,
199 .oo-ui-buttonElement-frameless.oo-ui-widget-disabled > .oo-ui-buttonElement-button > .oo-ui-indicatorElement-indicator {
200 opacity: 0.51;
202 .oo-ui-buttonElement-framed > .oo-ui-buttonElement-button {
203 border-style: solid;
204 border-width: 1px;
205 border-radius: 2px;
206 padding-left: 12px;
207 padding-right: 12px;
209 .oo-ui-buttonElement-framed.oo-ui-iconElement > .oo-ui-buttonElement-button {
210 padding-top: 2.14285714em;
211 padding-bottom: 0;
212 padding-left: 2.14285714em;
214 .oo-ui-buttonElement-framed.oo-ui-iconElement > .oo-ui-buttonElement-button > .oo-ui-iconElement-icon {
215 left: 50%;
216 margin-left: -0.7142857em;
218 .oo-ui-buttonElement-framed.oo-ui-iconElement.oo-ui-labelElement > .oo-ui-buttonElement-button,
219 .oo-ui-buttonElement-framed.oo-ui-iconElement.oo-ui-indicatorElement > .oo-ui-buttonElement-button {
220 padding-left: 2.71428571em;
222 .oo-ui-buttonElement-framed.oo-ui-iconElement.oo-ui-labelElement > .oo-ui-buttonElement-button > .oo-ui-iconElement-icon,
223 .oo-ui-buttonElement-framed.oo-ui-iconElement.oo-ui-indicatorElement > .oo-ui-buttonElement-button > .oo-ui-iconElement-icon {
224 left: 0.78571429em;
225 margin-left: 0;
227 .oo-ui-buttonElement-framed.oo-ui-indicatorElement > .oo-ui-buttonElement-button {
228 padding-top: 2.14285714em;
229 padding-right: 1.7142858em;
230 padding-bottom: 0;
232 .oo-ui-buttonElement-framed.oo-ui-labelElement > .oo-ui-buttonElement-button {
233 padding-top: 5px;
234 padding-bottom: 5px;
236 .oo-ui-buttonElement-framed.oo-ui-widget-disabled > .oo-ui-buttonElement-button {
237 background-color: var(--background-color-disabled, #c8ccd1);
238 color: var(--color-inverted, #fff);
239 border-color: var(--border-color-disabled, #c8ccd1);
241 .oo-ui-buttonElement-framed.oo-ui-widget-disabled.oo-ui-buttonElement-active > .oo-ui-buttonElement-button {
242 background-color: #919fb9;
244 .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
245 background-color: var(--background-color-interactive-subtle, #f8f9fa);
246 color: var(--color-base, #202122);
247 border-color: var(--border-color-base, #a2a9b1);
249 .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover {
250 background-color: var(--background-color-base, #fff);
251 color: var(--color-base--hover, #404244);
252 border-color: var(--border-color-base, #a2a9b1);
254 .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover > .oo-ui-iconElement-icon:not( .oo-ui-image-invert ),
255 .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover > .oo-ui-indicatorElement-indicator:not( .oo-ui-image-invert ) {
256 opacity: 0.74;
258 .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:focus {
259 border-color: var(--border-color-progressive--focus, #36c);
260 box-shadow: inset 0 0 0 1px var(--box-shadow-color-progressive--focus, #36c);
262 .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-buttonElement-active > .oo-ui-buttonElement-button {
263 background-color: var(--background-color-progressive--active, #233566);
264 color: var(--color-inverted-fixed, #fff);
265 border-color: var(--border-color-input-binary--active, #233566);
267 .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-buttonElement-active > .oo-ui-buttonElement-button:focus {
268 border-color: var(--border-color-progressive--focus, #36c);
269 box-shadow: inset 0 0 0 1px var(--box-shadow-color-progressive--focus, #36c), inset 0 0 0 2px var(--box-shadow-color-inverted, #fff);
271 .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:active,
272 .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button {
273 background-color: var(--background-color-interactive, #eaecf0);
274 color: var(--color-emphasized, #000);
275 border-color: var(--border-color-interactive, #72777d);
276 box-shadow: none;
278 .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button {
279 color: var(--color-progressive, #36c);
281 .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:hover {
282 background-color: var(--background-color-base, #fff);
283 border-color: var(--border-color-progressive--hover, #4b77d6);
285 .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:focus {
286 border-color: var(--color-progressive--focus, #36c);
287 box-shadow: inset 0 0 0 1px var(--color-progressive--focus, #36c);
288 outline: 1px solid transparent;
290 .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:active,
291 .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button,
292 .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive.oo-ui-buttonElement-active > .oo-ui-buttonElement-button,
293 .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive.oo-ui-popupToolGroup-active > .oo-ui-buttonElement-button {
294 background-color: var(--background-color-progressive-subtle, #eaf3ff);
295 color: var(--color-progressive--active, #233566);
296 border-color: var(--color-progressive--active, #233566);
297 box-shadow: none;
299 .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button {
300 color: var(--color-destructive, #d73333);
302 .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button:hover {
303 background-color: var(--background-color-base, #fff);
304 border-color: var(--border-color-destructive--hover, #fc493b);
306 .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button:focus {
307 border-color: var(--color-destructive--focus, #36c);
308 box-shadow: inset 0 0 0 1px var(--color-destructive--focus, #36c);
309 outline: 1px solid transparent;
311 .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button:active,
312 .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button,
313 .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive.oo-ui-buttonElement-active > .oo-ui-buttonElement-button,
314 .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive.oo-ui-popupToolGroup-active > .oo-ui-buttonElement-button {
315 background-color: var(--background-color-destructive-subtle, #ffe9e5);
316 color: var(--color-destructive--active, #9f3526);
317 border-color: var(--color-destructive--active, #9f3526);
318 box-shadow: none;
320 .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button {
321 color: var(--color-inverted-fixed, #fff);
322 background-color: var(--background-color-progressive, #36c);
323 border-color: var(--background-color-progressive, #36c);
325 .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:hover {
326 background-color: var(--color-progressive--hover, #4b77d6);
327 border-color: var(--color-progressive--hover, #4b77d6);
329 .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:focus {
330 border-color: var(--color-progressive--focus, #36c);
331 box-shadow: inset 0 0 0 1px var(--color-progressive--focus, #36c), inset 0 0 0 2px var(--color-inverted-fixed, #fff);
332 outline: 1px solid transparent;
334 .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:active,
335 .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button,
336 .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive.oo-ui-buttonElement-active > .oo-ui-buttonElement-button,
337 .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive.oo-ui-popupToolGroup-active > .oo-ui-buttonElement-button {
338 color: var(--color-inverted-fixed, #fff);
339 background-color: var(--color-progressive--active, #233566);
340 border-color: var(--color-progressive--active, #233566);
341 box-shadow: none;
343 .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button {
344 color: var(--color-inverted-fixed, #fff);
345 background-color: var(--background-color-error, #d73333);
346 border-color: var(--background-color-error, #d73333);
348 .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button:hover {
349 background-color: var(--color-destructive--hover, #fc493b);
350 border-color: var(--color-destructive--hover, #fc493b);
352 .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button:focus {
353 border-color: var(--color-destructive--focus, #36c);
354 box-shadow: inset 0 0 0 1px var(--color-destructive--focus, #36c), inset 0 0 0 2px var(--color-inverted-fixed, #fff);
355 outline: 1px solid transparent;
357 .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button:active,
358 .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-destructive.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button,
359 .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-destructive.oo-ui-buttonElement-active > .oo-ui-buttonElement-button,
360 .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-destructive.oo-ui-popupToolGroup-active > .oo-ui-buttonElement-button {
361 color: var(--color-inverted-fixed, #fff);
362 background-color: var(--color-destructive--active, #9f3526);
363 border-color: var(--color-destructive--active, #9f3526);
364 box-shadow: none;
366 .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary > .oo-ui-buttonElement-button > .oo-ui-iconElement-icon,
367 .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary > .oo-ui-buttonElement-button > .oo-ui-indicatorElement-indicator {
368 opacity: 1;
371 .oo-ui-clippableElement-clippable {
372 box-sizing: border-box;
373 min-height: 40px;
374 -webkit-overflow-scrolling: touch;
375 scrollbar-gutter: stable;
378 .oo-ui-floatableElement {
379 position: absolute;
384 .oo-ui-labelElement .oo-ui-labelElement-label,
385 .oo-ui-labelElement.oo-ui-labelElement-label {
386 box-sizing: border-box;
388 .oo-ui-labelElement-invisible {
389 display: block;
390 position: absolute;
391 clip: rect(1px, 1px, 1px, 1px);
392 width: 1px;
393 height: 1px;
394 margin: -1px;
395 border: 0;
396 padding: 0;
397 overflow: hidden;
399 .oo-ui-labelElement .oo-ui-labelElement-label {
400 line-height: 1.42857143em;
402 .oo-ui-labelElement .oo-ui-labelElement-label-highlight {
403 font-weight: 700;
406 .oo-ui-iconElement-icon {
407 background-size: contain;
408 background-position: center center;
409 background-repeat: no-repeat;
410 position: absolute;
411 top: 0;
412 min-width: 20px;
413 width: 1.4285714em;
414 min-height: 20px;
415 height: 100%;
417 .oo-ui-iconElement-noIcon {
418 display: none;
420 @media (forced-colors: active) and (prefers-color-scheme: dark) {
421 .oo-ui-iconElement-icon:not( .oo-ui-image-invert ) {
422 filter: invert(1) hue-rotate(180deg);
426 .oo-ui-indicatorElement-indicator {
427 background-size: contain;
428 background-position: center center;
429 background-repeat: no-repeat;
430 position: absolute;
431 top: 0;
432 min-width: 12px;
433 width: 0.8571429em;
434 min-height: 12px;
435 height: 100%;
437 .oo-ui-indicatorElement-noIndicator {
438 display: none;
440 @media (forced-colors: active) and (prefers-color-scheme: dark) {
441 .oo-ui-indicatorElement-indicator:not( .oo-ui-image-invert ) {
442 filter: invert(1) hue-rotate(180deg);
446 .oo-ui-pendingElement-pending {
447 background-color: var(--background-color-interactive, #eaecf0);
448 background-image: linear-gradient(135deg, var(--background-color-base, #fff) 25%, transparent 25%, transparent 50%, var(--background-color-base, #fff) 50%, var(--background-color-base, #fff) 75%, transparent 75%, transparent);
449 background-size: 1.4285714em 1.4285714em;
450 animation: oo-ui-pendingElement-stripes 650ms linear infinite;
452 .oo-ui-pendingElement-pending:dir( rtl ) {
453 background-image: linear-gradient(45deg, var(--background-color-base, #fff) 25%, transparent 25%, transparent 50%, var(--background-color-base, #fff) 50%, var(--background-color-base, #fff) 75%, transparent 75%, transparent);
454 animation-direction: reverse;
456 @keyframes oo-ui-pendingElement-stripes {
457 0% {
458 background-position: -1.4285714em 0;
460 100% {
461 background-position: 0 0;
469 .oo-ui-fieldLayout {
470 display: block;
471 margin-top: 16px;
473 .oo-ui-fieldLayout::before,
474 .oo-ui-fieldLayout::after {
475 content: ' ';
476 display: table;
478 .oo-ui-fieldLayout::after {
479 clear: both;
481 .oo-ui-fieldLayout.oo-ui-labelElement.oo-ui-fieldLayout-align-left > .oo-ui-fieldLayout-body,
482 .oo-ui-fieldLayout.oo-ui-labelElement.oo-ui-fieldLayout-align-right > .oo-ui-fieldLayout-body {
483 display: flex;
485 .oo-ui-fieldLayout.oo-ui-labelElement.oo-ui-fieldLayout-align-left > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-field,
486 .oo-ui-fieldLayout.oo-ui-labelElement.oo-ui-fieldLayout-align-right > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-field {
487 width: 60%;
488 flex-shrink: 0;
490 .oo-ui-fieldLayout.oo-ui-labelElement.oo-ui-fieldLayout-align-left > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header,
491 .oo-ui-fieldLayout.oo-ui-labelElement.oo-ui-fieldLayout-align-right > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header {
492 word-wrap: break-word;
493 flex-grow: 1;
495 .oo-ui-fieldLayout.oo-ui-fieldLayout-align-right > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header {
496 text-align: right;
498 .oo-ui-fieldLayout.oo-ui-fieldLayout-align-inline {
499 word-wrap: break-word;
501 .oo-ui-fieldLayout.oo-ui-fieldLayout-align-inline > .oo-ui-fieldLayout-body {
502 display: table;
503 width: 100%;
505 .oo-ui-fieldLayout.oo-ui-fieldLayout-align-inline > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header,
506 .oo-ui-fieldLayout.oo-ui-fieldLayout-align-inline > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-field {
507 display: table-cell;
509 .oo-ui-fieldLayout.oo-ui-fieldLayout-align-inline > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header {
510 vertical-align: middle;
512 .oo-ui-fieldLayout.oo-ui-fieldLayout-align-inline > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-field {
513 width: 1px;
514 vertical-align: top;
516 .oo-ui-fieldLayout.oo-ui-fieldLayout-align-top > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header,
517 .oo-ui-fieldLayout.oo-ui-fieldLayout-align-top > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-field {
518 display: block;
520 .oo-ui-fieldLayout .oo-ui-fieldLayout-help {
521 float: right;
523 .oo-ui-fieldLayout .oo-ui-fieldLayout-help:not( .oo-ui-popupButtonWidget ) > .oo-ui-buttonElement-button {
524 cursor: help;
526 .oo-ui-fieldLayout.oo-ui-labelElement,
527 .oo-ui-fieldLayout.oo-ui-fieldLayout-align-inline {
528 margin-top: 12px;
530 .oo-ui-fieldLayout:first-child,
531 .oo-ui-fieldLayout.oo-ui-labelElement:first-child,
532 .oo-ui-fieldLayout.oo-ui-fieldLayout-align-inline:first-child {
533 margin-top: 0;
535 .oo-ui-fieldLayout.oo-ui-labelElement > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header {
536 padding-bottom: 4px;
538 .oo-ui-fieldLayout.oo-ui-labelElement.oo-ui-fieldLayout-align-top > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header,
539 .oo-ui-fieldLayout.oo-ui-labelElement.oo-ui-fieldLayout-align-inline > .oo-ui-fieldLayout-body {
540 max-width: 50em;
542 .oo-ui-fieldLayout.oo-ui-labelElement.oo-ui-fieldLayout-align-left > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header > .oo-ui-labelElement-label,
543 .oo-ui-fieldLayout.oo-ui-labelElement.oo-ui-fieldLayout-align-right > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header > .oo-ui-labelElement-label {
544 display: block;
545 padding-top: 4px;
546 margin-right: 6px;
548 .oo-ui-fieldLayout.oo-ui-labelElement.oo-ui-fieldLayout-align-left > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-help,
549 .oo-ui-fieldLayout.oo-ui-labelElement.oo-ui-fieldLayout-align-right > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-help {
550 margin-right: 0;
551 margin-left: -6px;
552 height: 2.2857143em;
554 .oo-ui-fieldLayout.oo-ui-labelElement.oo-ui-fieldLayout-align-inline > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header {
555 padding-top: 0;
556 padding-bottom: 0;
557 padding-left: 6px;
559 .oo-ui-fieldLayout .oo-ui-fieldLayout-help {
560 margin-right: 0;
562 .oo-ui-fieldLayout .oo-ui-fieldLayout-help .oo-ui-buttonElement-button {
563 padding-top: 1.4285714em;
564 padding-right: 0;
566 .oo-ui-fieldLayout .oo-ui-fieldLayout-help .oo-ui-buttonElement-button:hover,
567 .oo-ui-fieldLayout .oo-ui-fieldLayout-help .oo-ui-buttonElement-button:active {
568 background-color: transparent;
570 .oo-ui-fieldLayout.oo-ui-fieldLayout-align-top > .oo-ui-fieldLayout-body > .oo-ui-inline-help {
571 margin-top: 4px;
573 .oo-ui-fieldLayout.oo-ui-fieldLayout-align-top .oo-ui-fieldLayout-help,
574 .oo-ui-fieldLayout.oo-ui-fieldLayout-align-inline .oo-ui-fieldLayout-help {
575 margin-top: -6px;
576 margin-right: -8px;
577 margin-left: 0;
579 .oo-ui-fieldLayout-messages {
580 box-sizing: border-box;
581 max-width: 50em;
582 padding: 4px 0;
584 .oo-ui-fieldLayout-messages > .oo-ui-messageWidget {
585 margin-left: 12px;
586 margin-right: 12px;
588 .oo-ui-fieldLayout-messages > .oo-ui-messageWidget:first-child {
589 margin-top: 4px;
591 .oo-ui-fieldLayout-disabled > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header > .oo-ui-labelElement-label {
592 color: var(--color-disabled, #72777d);
595 .oo-ui-actionFieldLayout-input,
596 .oo-ui-actionFieldLayout-button {
597 display: table-cell;
598 vertical-align: middle;
600 .oo-ui-actionFieldLayout-button {
601 width: 1%;
602 white-space: nowrap;
604 .oo-ui-actionFieldLayout.oo-ui-fieldLayout-align-top {
605 max-width: 50em;
607 .oo-ui-actionFieldLayout .oo-ui-actionFieldLayout-input > .oo-ui-widget {
608 margin-right: 8px;
610 .oo-ui-actionFieldLayout .oo-ui-actionFieldLayout-input > .oo-ui-widget.oo-ui-textInputWidget > .oo-ui-inputWidget-input,
611 .oo-ui-actionFieldLayout .oo-ui-actionFieldLayout-input > .oo-ui-widget .oo-ui-dropdownWidget-handle,
612 .oo-ui-actionFieldLayout .oo-ui-actionFieldLayout-input > .oo-ui-widget .oo-ui-tagMultiselectWidget-handle {
613 border-radius: 2px 0 0 2px;
614 position: relative;
616 .oo-ui-actionFieldLayout .oo-ui-actionFieldLayout-button .oo-ui-buttonElement-framed > .oo-ui-buttonElement-button {
617 border-radius: 0 2px 2px 0;
618 margin-left: -1px;
620 .oo-ui-actionFieldLayout .oo-ui-actionFieldLayout-button .oo-ui-buttonElement-frameless {
621 margin-left: 6px;
623 .oo-ui-actionFieldLayout .oo-ui-actionFieldLayout-input > .oo-ui-textInputWidget > .oo-ui-inputWidget-input:hover,
624 .oo-ui-actionFieldLayout .oo-ui-actionFieldLayout-input > .oo-ui-textInputWidget > .oo-ui-inputWidget-input:focus,
625 .oo-ui-actionFieldLayout .oo-ui-actionFieldLayout-input > .oo-ui-textInputWidget.oo-ui-flaggedElement-invalid > .oo-ui-inputWidget-input,
626 .oo-ui-actionFieldLayout .oo-ui-actionFieldLayout-input > .oo-ui-textInputWidget > .oo-ui-inputWidget-input:hover ~ *,
627 .oo-ui-actionFieldLayout .oo-ui-actionFieldLayout-input > .oo-ui-textInputWidget > .oo-ui-inputWidget-input:focus ~ *,
628 .oo-ui-actionFieldLayout .oo-ui-actionFieldLayout-input > .oo-ui-textInputWidget.oo-ui-flaggedElement-invalid > .oo-ui-inputWidget-input ~ * {
629 z-index: 1;
631 .oo-ui-actionFieldLayout .oo-ui-actionFieldLayout-button > .oo-ui-buttonElement > .oo-ui-buttonElement-button:hover,
632 .oo-ui-actionFieldLayout .oo-ui-actionFieldLayout-button > .oo-ui-buttonElement > .oo-ui-buttonElement-button:focus {
633 z-index: 1;
636 .oo-ui-fieldsetLayout {
637 position: relative;
638 min-width: 0;
639 margin: 0;
640 border: 0;
641 padding: 0.01px 0 0 0;
643 body:not( :-moz-handler-blocked ) .oo-ui-fieldsetLayout {
644 display: table-cell;
646 .oo-ui-fieldsetLayout > .oo-ui-fieldsetLayout-header {
647 display: none;
649 .oo-ui-fieldsetLayout.oo-ui-iconElement > .oo-ui-fieldsetLayout-header,
650 .oo-ui-fieldsetLayout.oo-ui-labelElement > .oo-ui-fieldsetLayout-header {
651 color: inherit;
652 display: inline-table;
653 box-sizing: border-box;
654 padding: 0;
655 white-space: normal;
656 float: left;
657 width: 100%;
659 .oo-ui-fieldsetLayout > .oo-ui-inline-help {
660 clear: left;
662 .oo-ui-fieldsetLayout-group {
663 clear: both;
665 .oo-ui-fieldsetLayout .oo-ui-fieldsetLayout-help {
666 float: right;
668 .oo-ui-fieldsetLayout .oo-ui-fieldsetLayout-help:not( .oo-ui-popupButtonWidget ) > .oo-ui-buttonElement-button {
669 cursor: help;
671 .oo-ui-fieldsetLayout .oo-ui-fieldsetLayout-header {
672 max-width: 50em;
674 .oo-ui-fieldsetLayout .oo-ui-fieldsetLayout-header > .oo-ui-iconElement-icon {
675 height: 1.4285714em;
677 .oo-ui-fieldsetLayout.oo-ui-iconElement > .oo-ui-fieldsetLayout-header > .oo-ui-iconElement-icon {
678 display: block;
680 .oo-ui-fieldsetLayout + .oo-ui-fieldsetLayout,
681 .oo-ui-fieldsetLayout + .oo-ui-formLayout {
682 margin-top: 24px;
684 .oo-ui-fieldsetLayout.oo-ui-labelElement > .oo-ui-fieldsetLayout-header > .oo-ui-labelElement-label {
685 display: inline-block;
686 margin-bottom: 8px;
687 font-size: 1.14285714em;
688 font-weight: 700;
690 .oo-ui-fieldsetLayout.oo-ui-iconElement > .oo-ui-fieldsetLayout-header > .oo-ui-labelElement-label {
691 padding-left: 1.625em;
693 .oo-ui-fieldsetLayout > .oo-ui-inline-help {
694 margin-bottom: 8px;
696 .oo-ui-fieldsetLayout .oo-ui-fieldsetLayout-help,
697 .oo-ui-fieldsetLayout .oo-ui-fieldsetLayout-help:last-child {
698 margin-right: -8px;
699 margin-top: calc( ( 20px - 2.14285714em ) / 2 );
701 .oo-ui-fieldsetLayout .oo-ui-fieldsetLayout-help .oo-ui-buttonElement-button:hover,
702 .oo-ui-fieldsetLayout .oo-ui-fieldsetLayout-help .oo-ui-buttonElement-button:active {
703 background-color: transparent;
706 .oo-ui-formLayout + .oo-ui-fieldsetLayout,
707 .oo-ui-formLayout + .oo-ui-formLayout {
708 margin-top: 24px;
711 .oo-ui-panelLayout {
712 position: relative;
714 .oo-ui-panelLayout-scrollable {
715 overflow: auto;
716 -webkit-overflow-scrolling: touch;
718 .oo-ui-panelLayout-expanded {
719 position: absolute;
720 top: 0;
721 left: 0;
722 right: 0;
723 bottom: 0;
725 .oo-ui-panelLayout-padded {
726 padding: 12px 16px 16px;
728 .oo-ui-panelLayout-padded.oo-ui-formLayout > .oo-ui-fieldsetLayout .oo-ui-labelElement-label,
729 .oo-ui-panelLayout-padded.oo-ui-formLayout > .oo-ui-fieldsetLayout .oo-ui-iconElement-icon {
730 margin-top: -6px;
732 .oo-ui-panelLayout-framed {
733 border: 1px solid var(--border-color-base, #a2a9b1);
734 border-radius: 2px;
736 .oo-ui-panelLayout-padded.oo-ui-panelLayout-framed {
737 margin: 12px 0;
740 .oo-ui-horizontalLayout {
741 display: flex;
742 flex-wrap: wrap;
743 gap: 8px 8px;
745 .oo-ui-horizontalLayout > .oo-ui-widget {
746 align-self: center;
748 .oo-ui-horizontalLayout > .oo-ui-layout,
749 .oo-ui-horizontalLayout > .oo-ui-widget {
750 margin-right: 0;
752 .oo-ui-horizontalLayout > .oo-ui-layout:last-child,
753 .oo-ui-horizontalLayout > .oo-ui-widget:last-child {
754 margin-right: 0;
756 .oo-ui-horizontalLayout > .oo-ui-layout {
757 margin-top: 0;
762 .oo-ui-optionWidget {
763 position: relative;
764 display: block;
766 .oo-ui-optionWidget.oo-ui-widget-enabled {
767 cursor: pointer;
769 .oo-ui-optionWidget.oo-ui-widget-disabled {
770 cursor: default;
772 .oo-ui-optionWidget.oo-ui-labelElement > .oo-ui-labelElement-label {
773 display: block;
774 white-space: nowrap;
775 text-overflow: ellipsis;
776 overflow: hidden;
778 .oo-ui-optionWidget-selected .oo-ui-buttonElement-button > .oo-ui-iconElement-icon {
779 opacity: 1;
781 .oo-ui-optionWidget.oo-ui-widget-disabled {
782 color: var(--color-disabled, #72777d);
785 .oo-ui-decoratedOptionWidget {
786 padding: 6px 12px;
787 line-height: 1;
789 .oo-ui-decoratedOptionWidget.oo-ui-iconElement {
790 padding-left: 2.64285714em;
792 .oo-ui-decoratedOptionWidget .oo-ui-iconElement-icon {
793 left: 0.78571429em;
795 .oo-ui-decoratedOptionWidget .oo-ui-labelElement-label {
796 line-height: 1.42857143em;
798 .oo-ui-decoratedOptionWidget.oo-ui-indicatorElement {
799 padding-right: 2.14285714em;
801 .oo-ui-decoratedOptionWidget .oo-ui-indicatorElement-indicator {
802 right: 12px;
804 .oo-ui-decoratedOptionWidget.oo-ui-widget-enabled:hover .oo-ui-iconElement-icon,
805 .oo-ui-decoratedOptionWidget.oo-ui-widget-enabled:hover .oo-ui-indicatorElement-indicator {
806 opacity: 0.74;
808 .oo-ui-decoratedOptionWidget.oo-ui-widget-enabled .oo-ui-iconElement-icon,
809 .oo-ui-decoratedOptionWidget.oo-ui-widget-enabled .oo-ui-indicatorElement-indicator {
810 opacity: 0.87;
811 transition-property: opacity;
812 transition-duration: 100ms;
814 .oo-ui-decoratedOptionWidget.oo-ui-widget-disabled .oo-ui-iconElement-icon,
815 .oo-ui-decoratedOptionWidget.oo-ui-widget-disabled .oo-ui-indicatorElement-indicator {
816 opacity: 0.51;
819 .oo-ui-radioSelectWidget:focus {
820 outline: 0;
822 .oo-ui-radioSelectWidget:focus [type='radio']:checked + span::before {
823 border-color: var(--background-color-base, #fff);
826 .oo-ui-radioOptionWidget {
827 display: table;
828 padding: 4px 0;
830 .oo-ui-radioOptionWidget .oo-ui-radioInputWidget,
831 .oo-ui-radioOptionWidget.oo-ui-labelElement > .oo-ui-labelElement-label {
832 display: table-cell;
833 vertical-align: top;
835 .oo-ui-radioOptionWidget .oo-ui-radioInputWidget {
836 width: 1px;
838 .oo-ui-radioOptionWidget.oo-ui-labelElement > .oo-ui-labelElement-label {
839 white-space: normal;
841 .oo-ui-radioOptionWidget:first-child {
842 padding-top: 0;
844 .oo-ui-radioOptionWidget.oo-ui-labelElement > .oo-ui-labelElement-label {
845 padding-left: 6px;
847 .oo-ui-radioOptionWidget .oo-ui-radioInputWidget {
848 margin-right: 0;
851 .oo-ui-labelWidget {
852 display: inline-block;
854 .oo-ui-labelWidget.oo-ui-inline-help {
855 display: block;
856 color: var(--color-subtle, #54595d);
857 font-size: 0.92857143em;
860 .oo-ui-messageWidget {
861 position: relative;
862 box-sizing: border-box;
863 font-weight: 700;
865 .oo-ui-messageWidget > .oo-ui-labelElement-label {
866 display: block;
868 .oo-ui-messageWidget > .oo-ui-iconElement-icon {
869 background-position: 0 0;
871 .oo-ui-messageWidget > .oo-ui-labelElement-label {
872 margin-left: 1.99999997em;
874 .oo-ui-messageWidget.oo-ui-messageWidget-block {
875 border: 1px solid;
876 padding: 16px 24px;
877 font-weight: 400;
879 .oo-ui-messageWidget.oo-ui-messageWidget-block > .oo-ui-iconElement-icon {
880 background-position: 0 16px;
882 .oo-ui-messageWidget.oo-ui-messageWidget-block.oo-ui-messageWidget-showClose {
883 padding-right: 56px;
885 .oo-ui-messageWidget.oo-ui-messageWidget-block > .oo-ui-messageWidget-close {
886 position: absolute;
887 top: 8px;
888 right: 8px;
890 .oo-ui-messageWidget.oo-ui-messageWidget-block.oo-ui-flaggedElement-error {
891 background-color: var(--background-color-error-subtle, #ffe9e5);
892 border-color: var(--border-color-error, #9f3526);
894 .oo-ui-messageWidget.oo-ui-messageWidget-block.oo-ui-flaggedElement-warning {
895 background-color: var(--background-color-warning-subtle, #fdf2d5);
896 border-color: var(--border-color-warning, #987027);
898 .oo-ui-messageWidget.oo-ui-messageWidget-block.oo-ui-flaggedElement-success {
899 background-color: var(--background-color-success-subtle, #dff2eb);
900 border-color: var(--border-color-success, #196551);
902 .oo-ui-messageWidget.oo-ui-messageWidget-block.oo-ui-flaggedElement-notice {
903 background-color: var(--background-color-notice-subtle, #eaecf0);
904 border-color: var(--border-color-notice, #54595d);
906 .oo-ui-messageWidget.oo-ui-flaggedElement-error:not( .oo-ui-messageWidget-block ) {
907 color: var(--color-error, #d73333);
909 .oo-ui-messageWidget.oo-ui-flaggedElement-success:not( .oo-ui-messageWidget-block ) {
910 color: var(--color-success, #14876b);
912 .oo-ui-messageWidget + .oo-ui-messageWidget {
913 margin-top: 8px;
916 .oo-ui-iconWidget {
917 vertical-align: middle;
918 -webkit-touch-callout: none;
919 -webkit-user-select: none;
920 -moz-user-select: none;
921 -ms-user-select: none;
922 user-select: none;
923 clip: auto;
924 margin: 0;
925 text-indent: -9999px;
926 line-height: 2.5;
927 display: inline-block;
928 position: static;
929 top: auto;
930 height: 1.4285714em;
932 .oo-ui-iconWidget.oo-ui-widget-disabled {
933 opacity: 0.51;
936 .oo-ui-indicatorWidget {
937 vertical-align: middle;
938 -webkit-touch-callout: none;
939 -webkit-user-select: none;
940 -moz-user-select: none;
941 -ms-user-select: none;
942 user-select: none;
943 clip: auto;
944 margin: 0;
945 text-indent: -9999px;
946 line-height: 2.5;
947 display: inline-block;
948 position: static;
949 top: auto;
950 height: 0.8571429em;
952 .oo-ui-indicatorWidget.oo-ui-widget-disabled {
953 opacity: 0.51;
956 .oo-ui-buttonWidget {
957 margin-right: 8px;
959 .oo-ui-buttonWidget:last-child {
960 margin-right: 0;
963 .oo-ui-buttonGroupWidget {
964 display: inline-block;
965 border-radius: 2px;
966 margin-right: 8px;
967 z-index: 0;
968 position: relative;
969 padding-bottom: 1px;
971 .oo-ui-buttonGroupWidget .oo-ui-buttonWidget.oo-ui-buttonElement-active .oo-ui-buttonElement-button {
972 cursor: default;
974 .oo-ui-buttonGroupWidget:last-child {
975 margin-right: 0;
977 .oo-ui-buttonGroupWidget .oo-ui-buttonElement {
978 margin-right: 0;
979 z-index: 0;
981 .oo-ui-buttonGroupWidget .oo-ui-buttonElement-framed .oo-ui-buttonElement-button {
982 margin-right: -1px;
983 margin-bottom: -1px;
984 border-radius: 0;
986 .oo-ui-buttonGroupWidget .oo-ui-buttonElement-framed:first-child .oo-ui-buttonElement-button {
987 border-bottom-left-radius: 2px;
988 border-top-left-radius: 2px;
990 .oo-ui-buttonGroupWidget .oo-ui-buttonElement-framed:last-child .oo-ui-buttonElement-button {
991 margin-right: 0;
992 border-bottom-right-radius: 2px;
993 border-top-right-radius: 2px;
995 .oo-ui-buttonGroupWidget .oo-ui-buttonElement-framed.oo-ui-widget-disabled + .oo-ui-widget-disabled > .oo-ui-buttonElement-button {
996 border-left-color: var(--border-color-inverted, #fff);
998 .oo-ui-buttonGroupWidget.oo-ui-widget-enabled .oo-ui-buttonElement.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover,
999 .oo-ui-buttonGroupWidget.oo-ui-widget-enabled .oo-ui-buttonElement.oo-ui-widget-enabled > .oo-ui-buttonElement-button:active {
1000 z-index: 1;
1002 .oo-ui-buttonGroupWidget.oo-ui-widget-enabled .oo-ui-buttonElement.oo-ui-widget-enabled > .oo-ui-buttonElement-button:focus {
1003 z-index: 2;
1005 .oo-ui-buttonGroupWidget.oo-ui-widget-enabled .oo-ui-buttonElement.oo-ui-buttonElement-active > .oo-ui-buttonElement-button {
1006 z-index: 3;
1008 .oo-ui-buttonGroupWidget.oo-ui-widget-enabled .oo-ui-buttonElement.oo-ui-widget-disabled > .oo-ui-buttonElement-button {
1009 z-index: -1;
1011 .oo-ui-buttonGroupWidget.oo-ui-widget-enabled .oo-ui-buttonElement.oo-ui-toggleWidget-on + .oo-ui-toggleWidget-on > .oo-ui-buttonElement-button,
1012 .oo-ui-buttonGroupWidget.oo-ui-widget-enabled .oo-ui-buttonElement.oo-ui-toggleWidget-on + .oo-ui-toggleWidget-on > .oo-ui-buttonElement-button:active {
1013 border-left-color: var(--border-color-base, #a2a9b1);
1014 z-index: 3;
1017 .oo-ui-popupWidget {
1018 position: absolute;
1019 z-index: 1;
1021 .oo-ui-popupWidget-popup {
1022 position: relative;
1023 overflow: hidden;
1024 word-wrap: break-word;
1025 overflow-wrap: break-word;
1027 .oo-ui-popupWidget-anchor {
1028 display: none;
1030 .oo-ui-popupWidget-anchored .oo-ui-popupWidget-anchor {
1031 display: block;
1032 position: absolute;
1033 background-repeat: no-repeat;
1035 .oo-ui-popupWidget-anchored .oo-ui-popupWidget-anchor::before,
1036 .oo-ui-popupWidget-anchored .oo-ui-popupWidget-anchor::after {
1037 content: '';
1038 position: absolute;
1039 width: 0;
1040 height: 0;
1041 border-style: solid;
1042 border-color: transparent;
1044 .oo-ui-popupWidget-anchored-top .oo-ui-popupWidget-anchor {
1045 left: 0;
1047 .oo-ui-popupWidget-anchored-top .oo-ui-popupWidget-anchor::before,
1048 .oo-ui-popupWidget-anchored-top .oo-ui-popupWidget-anchor::after {
1049 border-top: 0;
1051 .oo-ui-popupWidget-anchored-bottom .oo-ui-popupWidget-anchor {
1052 left: 0;
1054 .oo-ui-popupWidget-anchored-bottom .oo-ui-popupWidget-anchor::before,
1055 .oo-ui-popupWidget-anchored-bottom .oo-ui-popupWidget-anchor::after {
1056 border-bottom: 0;
1058 .oo-ui-popupWidget-anchored-start .oo-ui-popupWidget-anchor {
1059 top: 0;
1061 .oo-ui-popupWidget-anchored-start .oo-ui-popupWidget-anchor::before,
1062 .oo-ui-popupWidget-anchored-start .oo-ui-popupWidget-anchor::after {
1063 border-left: 0;
1065 .oo-ui-popupWidget-anchored-end .oo-ui-popupWidget-anchor {
1066 top: 0;
1068 .oo-ui-popupWidget-anchored-end .oo-ui-popupWidget-anchor::before,
1069 .oo-ui-popupWidget-anchored-end .oo-ui-popupWidget-anchor::after {
1070 border-right: 0;
1072 .oo-ui-popupWidget-head {
1073 -webkit-touch-callout: none;
1074 -webkit-user-select: none;
1075 -moz-user-select: none;
1076 -ms-user-select: none;
1077 user-select: none;
1079 .oo-ui-popupWidget-head > .oo-ui-labelElement-label {
1080 cursor: default;
1082 .oo-ui-popupWidget-body {
1083 clear: both;
1085 .oo-ui-popupWidget-body.oo-ui-clippableElement-clippable {
1086 min-height: 1em;
1088 .oo-ui-popupWidget-popup {
1089 background-color: var(--background-color-base, #fff);
1090 border: 1px solid var(--border-color-base, #a2a9b1);
1091 border-radius: 2px;
1092 box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2);
1094 @supports ( filter: drop-shadow( 0 0 0 ) ) {
1095 .oo-ui-popupWidget {
1096 filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.3));
1097 transform: translateZ(0);
1099 .oo-ui-popupWidget-popup {
1100 box-shadow: none;
1103 .oo-ui-popupWidget-anchored-top {
1104 margin-top: 9px;
1106 .oo-ui-popupWidget-anchored-top .oo-ui-popupWidget-anchor {
1107 top: -9px;
1109 .oo-ui-popupWidget-anchored-top .oo-ui-popupWidget-anchor::before {
1110 bottom: -10px;
1111 left: -9px;
1112 border-bottom-color: var(--border-color-interactive, #72777d);
1113 border-width: 10px;
1115 .oo-ui-popupWidget-anchored-top .oo-ui-popupWidget-anchor::after {
1116 bottom: -10px;
1117 left: -8px;
1118 border-bottom-color: var(--background-color-base, #fff);
1119 border-width: 9px;
1121 .oo-ui-popupWidget-anchored-bottom {
1122 margin-bottom: 9px;
1124 .oo-ui-popupWidget-anchored-bottom .oo-ui-popupWidget-anchor {
1125 bottom: -9px;
1127 .oo-ui-popupWidget-anchored-bottom .oo-ui-popupWidget-anchor::before {
1128 top: -10px;
1129 left: -9px;
1130 border-top-color: var(--border-color-base, #a2a9b1);
1131 border-width: 10px;
1133 .oo-ui-popupWidget-anchored-bottom .oo-ui-popupWidget-anchor::after {
1134 top: -10px;
1135 left: -8px;
1136 border-top-color: var(--background-color-base, #fff);
1137 border-width: 9px;
1139 .oo-ui-popupWidget-anchored-start {
1140 margin-left: 9px;
1142 .oo-ui-popupWidget-anchored-start .oo-ui-popupWidget-anchor {
1143 left: -9px;
1145 .oo-ui-popupWidget-anchored-start .oo-ui-popupWidget-anchor::before {
1146 right: -10px;
1147 top: -9px;
1148 border-right-color: var(--border-color-base, #a2a9b1);
1149 border-width: 10px;
1151 .oo-ui-popupWidget-anchored-start .oo-ui-popupWidget-anchor::after {
1152 right: -10px;
1153 top: -8px;
1154 border-right-color: var(--background-color-base, #fff);
1155 border-width: 9px;
1157 .oo-ui-popupWidget-anchored-end {
1158 margin-right: 9px;
1160 .oo-ui-popupWidget-anchored-end .oo-ui-popupWidget-anchor {
1161 right: -9px;
1163 .oo-ui-popupWidget-anchored-end .oo-ui-popupWidget-anchor::before {
1164 left: -10px;
1165 top: -9px;
1166 border-left-color: var(--border-color-base, #a2a9b1);
1167 border-width: 10px;
1169 .oo-ui-popupWidget-anchored-end .oo-ui-popupWidget-anchor::after {
1170 left: -10px;
1171 top: -8px;
1172 border-left-color: var(--background-color-base, #fff);
1173 border-width: 9px;
1175 .oo-ui-popupWidget-transitioning .oo-ui-popupWidget-popup {
1176 transition-property: width, height, left;
1177 transition-duration: 100ms;
1179 .oo-ui-popupWidget-head {
1180 margin-bottom: 9px;
1182 .oo-ui-popupWidget-head > .oo-ui-iconElement-icon {
1183 left: 0.78571429em;
1184 height: calc(1.4285714em + 2 * 9px);
1186 .oo-ui-popupWidget-head > .oo-ui-iconElement-noIcon + .oo-ui-labelElement-label {
1187 margin-left: 12px;
1189 .oo-ui-popupWidget-head > .oo-ui-labelElement-label {
1190 display: inline-block;
1191 margin: 9px 32px 0 2.64285714em;
1192 line-height: 1.42857143em;
1194 .oo-ui-popupWidget-head > .oo-ui-buttonWidget {
1195 position: absolute;
1196 right: 0;
1198 .oo-ui-popupWidget-head > .oo-ui-buttonWidget .oo-ui-icon-close {
1199 background-size: 1.1428571em 1.1428571em;
1201 .oo-ui-popupWidget-body {
1202 line-height: 1.42857143em;
1204 .oo-ui-popupWidget-body-padded {
1205 margin: 5px 12px;
1207 .oo-ui-popupWidget-footer {
1208 margin: 9px 12px;
1211 .oo-ui-popupButtonWidget {
1212 position: relative;
1214 .oo-ui-popupButtonWidget .oo-ui-popupWidget {
1215 cursor: auto;
1218 .oo-ui-inputWidget {
1219 margin-right: 8px;
1221 .oo-ui-inputWidget:last-child {
1222 margin-right: 0;
1225 .oo-ui-buttonInputWidget > button,
1226 .oo-ui-buttonInputWidget > input {
1227 background-color: transparent;
1228 margin: 0;
1229 border: 0;
1230 padding: 0;
1233 .oo-ui-checkboxInputWidget {
1234 display: inline-block;
1235 z-index: 0;
1236 position: relative;
1237 line-height: 1.42857143em;
1238 white-space: nowrap;
1240 .oo-ui-checkboxInputWidget * {
1241 font: inherit;
1242 vertical-align: middle;
1244 .oo-ui-checkboxInputWidget [type='checkbox'] {
1245 position: relative;
1246 max-width: none;
1247 width: 1.42857143em;
1248 height: 1.42857143em;
1249 margin: 0;
1250 opacity: 0;
1251 z-index: 1;
1253 .oo-ui-checkboxInputWidget [type='checkbox'] + span {
1254 background-color: var(--background-color-base, #fff);
1255 background-size: 0 0;
1256 box-sizing: border-box;
1257 position: absolute;
1258 left: 0;
1259 width: 1.42857143em;
1260 height: 1.42857143em;
1261 border-color: var(--border-color-input-binary, #72777d);
1262 border-style: solid;
1263 border-radius: 2px;
1264 border-width: 1px;
1266 .oo-ui-checkboxInputWidget [type='checkbox']:checked:not( :indeterminate ) + span {
1267 background-size: 1em 1em;
1269 .oo-ui-checkboxInputWidget [type='checkbox']:indeterminate + span::before {
1270 content: ' ';
1271 background-color: var(--background-color-base, #fff);
1272 position: absolute;
1273 top: 50%;
1274 left: 0.21428571em;
1275 right: 0.21428571em;
1276 height: 2px;
1277 margin-top: -1px;
1279 .oo-ui-checkboxInputWidget [type='checkbox']:disabled + span {
1280 background-color: var(--background-color-disabled, #c8ccd1);
1281 border-color: var(--border-color-disabled, #c8ccd1);
1283 .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox'] {
1284 cursor: pointer;
1286 .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox'] + span {
1287 cursor: pointer;
1288 transition-property: background-color, border-color, box-shadow;
1289 transition-duration: 100ms;
1291 .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:focus + span {
1292 border-color: var(--border-color-progressive--focus, #36c);
1293 box-shadow: inset 0 0 0 1px var(--box-shadow-color-progressive--focus, #36c);
1294 outline: 1px solid transparent;
1296 .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:hover + span {
1297 border-color: var(--border-color-progressive--hover, #4b77d6);
1299 .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:active + span {
1300 background-color: var(--background-color-progressive--active, #233566);
1301 border-color: var(--border-color-input-binary--active, #233566);
1302 box-shadow: inset 0 0 0 1px var(--box-shadow-color-progressive--active, #233566);
1304 .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:checked + span,
1305 .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:indeterminate + span {
1306 background-color: var(--background-color-progressive, #36c);
1307 border-color: var(--border-color-input-binary--checked, #36c);
1309 .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:checked:focus + span,
1310 .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:indeterminate:focus + span {
1311 background-color: var(--background-color-progressive--focus, #36c);
1312 border-color: var(--border-color-input-binary--checked, #36c);
1313 box-shadow: inset 0 0 0 1px var(--box-shadow-color-progressive--focus, #36c), inset 0 0 0 2px var(--box-shadow-color-inverted, #fff);
1315 .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:checked:hover + span,
1316 .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:indeterminate:hover + span {
1317 background-color: var(--background-color-progressive--hover, #4b77d6);
1318 border-color: var(--border-color-progressive--hover, #4b77d6);
1320 .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:checked:active + span,
1321 .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:indeterminate:active + span {
1322 background-color: var(--background-color-progressive--active, #233566);
1323 border-color: var(--border-color-input-binary--active, #233566);
1324 box-shadow: inset 0 0 0 1px var(--box-shadow-color-progressive--active, #233566);
1327 .oo-ui-checkboxMultiselectInputWidget .oo-ui-fieldLayout {
1328 margin-top: 0;
1329 padding: 4px 0;
1331 .oo-ui-checkboxMultiselectInputWidget .oo-ui-fieldLayout:first-child {
1332 padding-top: 0;
1335 .oo-ui-dropdownInputWidget {
1336 position: relative;
1337 vertical-align: middle;
1338 box-sizing: border-box;
1339 width: 100%;
1340 max-width: 50em;
1342 .oo-ui-dropdownInputWidget .oo-ui-dropdownWidget,
1343 .oo-ui-dropdownInputWidget.oo-ui-dropdownInputWidget-php select,
1344 .oo-ui-dropdownInputWidget.oo-ui-isMobile select {
1345 display: block;
1347 .oo-ui-dropdownInputWidget.oo-ui-isMobile .oo-ui-dropdownWidget {
1348 display: none;
1350 .oo-ui-dropdownInputWidget select {
1351 display: none;
1352 background-position: -9999em 0;
1353 background-repeat: no-repeat;
1354 width: 100%;
1355 box-sizing: border-box;
1357 .oo-ui-dropdownInputWidget.oo-ui-widget-enabled select {
1358 cursor: pointer;
1360 .oo-ui-dropdownInputWidget select {
1361 -webkit-appearance: none;
1362 -moz-appearance: none;
1363 background-color: transparent;
1364 background-position: right 12px center;
1365 box-sizing: border-box;
1366 height: 2.2857143em;
1367 border: 1px solid var(--border-color-base, #a2a9b1);
1368 border-radius: 2px;
1369 padding-left: 12px;
1370 padding-right: 2.14285714em;
1371 font-size: inherit;
1372 font-family: inherit;
1373 vertical-align: middle;
1375 .oo-ui-dropdownInputWidget option {
1376 background-color: transparent;
1377 font-size: inherit;
1378 font-family: inherit;
1379 height: 1.5em;
1380 padding: 5px 12px;
1382 .oo-ui-dropdownInputWidget.oo-ui-widget-enabled {
1383 background-color: var(--background-color-interactive-subtle, #f8f9fa);
1384 transition-property: background-color;
1385 transition-duration: 100ms;
1387 .oo-ui-dropdownInputWidget.oo-ui-widget-enabled:hover {
1388 background-color: var(--background-color-base, #fff);
1390 .oo-ui-dropdownInputWidget.oo-ui-widget-enabled select {
1391 color: var(--color-base, #202122);
1392 transition-property: border-color, box-shadow;
1393 transition-duration: 100ms;
1395 .oo-ui-dropdownInputWidget.oo-ui-widget-enabled select:hover {
1396 color: var(--color-base--hover, #404244);
1397 border-color: var(--border-color-base, #a2a9b1);
1399 .oo-ui-dropdownInputWidget.oo-ui-widget-enabled select:active {
1400 color: var(--color-emphasized, #000);
1401 border-color: var(--border-color-interactive, #72777d);
1403 .oo-ui-dropdownInputWidget.oo-ui-widget-enabled select:focus {
1404 border-color: var(--border-color-progressive--focus, #36c);
1405 outline: 1px solid transparent;
1406 box-shadow: inset 0 0 0 1px var(--box-shadow-color-progressive--focus, #36c);
1408 .oo-ui-dropdownInputWidget.oo-ui-widget-disabled {
1409 background-color: var(--background-color-disabled-subtle, #eaecf0);
1411 .oo-ui-dropdownInputWidget.oo-ui-widget-disabled select {
1412 color: var(--color-disabled, #72777d);
1413 border-color: var(--border-color-disabled, #c8ccd1);
1416 .oo-ui-radioInputWidget {
1417 display: inline-block;
1418 z-index: 0;
1419 position: relative;
1420 line-height: 1.42857143em;
1421 white-space: nowrap;
1423 .oo-ui-radioInputWidget * {
1424 font: inherit;
1425 vertical-align: middle;
1427 .oo-ui-radioInputWidget [type='radio'] {
1428 position: relative;
1429 max-width: none;
1430 width: 1.42857143em;
1431 height: 1.42857143em;
1432 margin: 0;
1433 opacity: 0;
1434 z-index: 1;
1436 .oo-ui-radioInputWidget [type='radio'] + span {
1437 background-color: var(--background-color-base-fixed, #fff);
1438 position: absolute;
1439 left: 0;
1440 box-sizing: border-box;
1441 width: 1.42857143em;
1442 height: 1.42857143em;
1443 border-color: var(--border-color-input-binary, #72777d);
1444 border-style: solid;
1445 border-radius: 50%;
1446 border-width: 1px;
1448 .oo-ui-radioInputWidget [type='radio'] + span::before {
1449 content: ' ';
1450 position: absolute;
1451 top: -4px;
1452 left: -4px;
1453 right: -4px;
1454 bottom: -4px;
1455 border: 1px solid var(--border-color-transparent, transparent);
1456 border-radius: 50%;
1458 .oo-ui-radioInputWidget [type='radio']:checked + span,
1459 .oo-ui-radioInputWidget [type='radio']:checked:hover + span,
1460 .oo-ui-radioInputWidget [type='radio']:checked:focus:hover + span {
1461 border-width: 6px;
1463 .oo-ui-radioInputWidget [type='radio']:disabled + span {
1464 background-color: var(--background-color-disabled, #c8ccd1);
1465 border-color: var(--border-color-disabled, #c8ccd1);
1467 .oo-ui-radioInputWidget [type='radio']:disabled:checked + span {
1468 background-color: var(--background-color-base-fixed, #fff);
1470 .oo-ui-radioInputWidget.oo-ui-widget-enabled [type='radio'] {
1471 cursor: pointer;
1473 .oo-ui-radioInputWidget.oo-ui-widget-enabled [type='radio'] + span {
1474 cursor: pointer;
1475 transition-property: background-color, border-color, border-width;
1476 transition-duration: 100ms;
1478 .oo-ui-radioInputWidget.oo-ui-widget-enabled [type='radio']:hover + span {
1479 border-color: var(--border-color-progressive--hover, #4b77d6);
1481 .oo-ui-radioInputWidget.oo-ui-widget-enabled [type='radio']:active + span {
1482 background-color: var(--background-color-progressive--active, #233566);
1483 border-color: var(--border-color-input-binary--active, #233566);
1485 .oo-ui-radioInputWidget.oo-ui-widget-enabled [type='radio']:checked + span {
1486 border-color: var(--border-color-input-binary--checked, #36c);
1488 .oo-ui-radioInputWidget.oo-ui-widget-enabled [type='radio']:checked:focus + span::before {
1489 border-color: var(--background-color-base-fixed, #fff);
1491 .oo-ui-radioInputWidget.oo-ui-widget-enabled [type='radio']:checked:hover + span {
1492 border-color: var(--border-color-progressive--hover, #4b77d6);
1494 .oo-ui-radioInputWidget.oo-ui-widget-enabled [type='radio']:checked:active + span {
1495 border-color: var(--border-color-input-binary--active, #233566);
1496 box-shadow: inset 0 0 0 1px var(--box-shadow-color-progressive--active, #233566);
1498 .oo-ui-radioInputWidget.oo-ui-widget-enabled [type='radio']:checked:active + span::before {
1499 border-color: var(--border-color-input-binary--active, #233566);
1502 .oo-ui-radioSelectInputWidget .oo-ui-fieldLayout {
1503 margin-top: 0;
1504 padding: 4px 0;
1506 .oo-ui-radioSelectInputWidget .oo-ui-fieldLayout:first-child {
1507 padding-top: 0;
1510 .oo-ui-textInputWidget {
1511 position: relative;
1512 vertical-align: middle;
1513 box-sizing: border-box;
1514 width: 100%;
1515 max-width: 50em;
1517 .oo-ui-textInputWidget .oo-ui-inputWidget-input {
1518 -webkit-appearance: none;
1519 -moz-appearance: textfield;
1520 display: block;
1521 width: 100%;
1522 box-sizing: border-box;
1524 .oo-ui-textInputWidget textarea.oo-ui-textInputWidget-autosized {
1525 /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
1526 resize: none;
1528 .oo-ui-textInputWidget [type='number']::-webkit-outer-spin-button,
1529 .oo-ui-textInputWidget [type='number']::-webkit-inner-spin-button {
1530 -webkit-appearance: none;
1531 margin: 0;
1533 .oo-ui-textInputWidget [type='search']::-webkit-search-decoration,
1534 .oo-ui-textInputWidget [type='search']::-webkit-search-cancel-button {
1535 display: none;
1537 .oo-ui-textInputWidget > .oo-ui-iconElement-icon,
1538 .oo-ui-textInputWidget-labelPosition-before > .oo-ui-labelElement-label {
1539 left: 0;
1541 .oo-ui-textInputWidget > .oo-ui-indicatorElement-indicator,
1542 .oo-ui-textInputWidget-labelPosition-after > .oo-ui-labelElement-label {
1543 right: 0;
1545 .oo-ui-textInputWidget > .oo-ui-labelElement-label {
1546 position: absolute;
1547 top: 0;
1549 .oo-ui-textInputWidget.oo-ui-labelElement > .oo-ui-labelElement-label {
1550 display: block;
1552 .oo-ui-textInputWidget-php > .oo-ui-iconElement-icon,
1553 .oo-ui-textInputWidget-php > .oo-ui-indicatorElement-indicator,
1554 .oo-ui-textInputWidget-php > .oo-ui-labelElement-label {
1555 pointer-events: none;
1557 .oo-ui-textInputWidget.oo-ui-widget-enabled > .oo-ui-iconElement-icon,
1558 .oo-ui-textInputWidget.oo-ui-widget-enabled > .oo-ui-indicatorElement-indicator {
1559 cursor: text;
1561 .oo-ui-textInputWidget.oo-ui-widget-enabled.oo-ui-textInputWidget-type-search > .oo-ui-indicatorElement-indicator {
1562 cursor: pointer;
1564 .oo-ui-textInputWidget.oo-ui-widget-disabled > * {
1565 -webkit-touch-callout: none;
1566 -webkit-user-select: none;
1567 -moz-user-select: none;
1568 -ms-user-select: none;
1569 user-select: none;
1571 .oo-ui-textInputWidget .oo-ui-inputWidget-input {
1572 background-color: var(--background-color-base, #fff);
1573 color: var(--color-emphasized, #000);
1574 margin: 0;
1575 border: 1px solid var(--border-color-base, #a2a9b1);
1576 border-radius: 2px;
1577 padding: 5px 8px;
1578 font-size: inherit;
1579 font-family: inherit;
1580 line-height: 1.42857143em;
1582 .oo-ui-textInputWidget input {
1583 height: 2.2857143em;
1585 .oo-ui-textInputWidget .oo-ui-pendingElement-pending {
1586 background-color: var(--background-color-interactive, #eaecf0);
1588 .oo-ui-textInputWidget.oo-ui-iconElement .oo-ui-inputWidget-input {
1589 padding-left: 2.42857143em;
1591 .oo-ui-textInputWidget.oo-ui-iconElement > .oo-ui-iconElement-icon {
1592 left: 9px;
1594 .oo-ui-textInputWidget.oo-ui-iconElement textarea + .oo-ui-iconElement-icon {
1595 max-height: 2.2857143em;
1597 .oo-ui-textInputWidget > .oo-ui-labelElement-label {
1598 color: var(--color-base--subtle, #72777d);
1599 padding: 0 12px 0 8px;
1600 line-height: 2.2857143em;
1602 .oo-ui-textInputWidget.oo-ui-indicatorElement .oo-ui-inputWidget-input {
1603 padding-right: 28px;
1605 .oo-ui-textInputWidget.oo-ui-indicatorElement.oo-ui-textInputWidget-labelPosition-after > .oo-ui-labelElement-label {
1606 padding-right: 0;
1608 .oo-ui-textInputWidget.oo-ui-indicatorElement > .oo-ui-indicatorElement-indicator {
1609 max-height: 2.2857143em;
1610 margin-right: 0.71428571em;
1612 .oo-ui-textInputWidget-labelPosition-after.oo-ui-indicatorElement > .oo-ui-labelElement-label {
1613 margin-right: 2.2857143em;
1615 .oo-ui-textInputWidget-labelPosition-before.oo-ui-iconElement > .oo-ui-labelElement-label {
1616 padding-left: 2.42857143em;
1618 .oo-ui-textInputWidget.oo-ui-widget-enabled .oo-ui-inputWidget-input {
1619 box-shadow: inset 0 0 0 1px var(--box-shadow-color-transparent, transparent);
1620 transition-property: border-color, box-shadow;
1621 transition-duration: 250ms;
1622 /* stylelint-disable selector-no-vendor-prefix */
1623 /* stylelint-enable selector-no-vendor-prefix */
1625 .oo-ui-textInputWidget.oo-ui-widget-enabled .oo-ui-inputWidget-input::-webkit-input-placeholder {
1626 color: var(--color-placeholder, #72777d);
1627 opacity: 1;
1629 .oo-ui-textInputWidget.oo-ui-widget-enabled .oo-ui-inputWidget-input::placeholder {
1630 color: var(--color-placeholder, #72777d);
1631 opacity: 1;
1633 .oo-ui-textInputWidget.oo-ui-widget-enabled .oo-ui-inputWidget-input:focus {
1634 border-color: var(--border-color-progressive--focus, #36c);
1635 outline: 1px solid transparent;
1636 box-shadow: inset 0 0 0 1px var(--box-shadow-color-progressive--focus, #36c);
1638 .oo-ui-textInputWidget.oo-ui-widget-enabled .oo-ui-inputWidget-input:focus ~ .oo-ui-iconElement-icon,
1639 .oo-ui-textInputWidget.oo-ui-widget-enabled .oo-ui-inputWidget-input:focus ~ .oo-ui-indicatorElement-indicator {
1640 opacity: 1;
1642 .oo-ui-textInputWidget.oo-ui-widget-enabled .oo-ui-inputWidget-input[readonly]:not( .oo-ui-pendingElement-pending ) {
1643 background-color: var(--background-color-neutral-subtle, #f8f9fa);
1645 .oo-ui-textInputWidget.oo-ui-widget-enabled:hover .oo-ui-inputWidget-input {
1646 border-color: var(--border-color-input--hover, #72777d);
1648 .oo-ui-textInputWidget.oo-ui-widget-enabled:hover .oo-ui-inputWidget-input:focus {
1649 border-color: var(--border-color-progressive--focus, #36c);
1651 @media screen and (min-width: 0) {
1652 .oo-ui-textInputWidget.oo-ui-widget-enabled textarea.oo-ui-inputWidget-input:focus {
1653 outline: 1px solid var(--color-progressive, #36c);
1654 outline-offset: -2px;
1656 .oo-ui-textInputWidget.oo-ui-widget-enabled.oo-ui-flaggedElement-invalid textarea.oo-ui-inputWidget-input:focus {
1657 outline-color: var(--border-color-error, #9f3526);
1660 .oo-ui-textInputWidget.oo-ui-widget-enabled > .oo-ui-iconElement-icon {
1661 opacity: 0.67;
1663 .oo-ui-textInputWidget.oo-ui-widget-enabled > .oo-ui-indicatorElement-indicator {
1664 opacity: 0.87;
1666 .oo-ui-textInputWidget.oo-ui-widget-enabled.oo-ui-flaggedElement-invalid .oo-ui-inputWidget-input:not( :focus ) {
1667 border-color: var(--border-color-error, #9f3526);
1669 .oo-ui-textInputWidget.oo-ui-widget-enabled.oo-ui-flaggedElement-invalid .oo-ui-inputWidget-input:not( :focus ):hover {
1670 border-color: var(--border-color-error, #9f3526);
1672 .oo-ui-textInputWidget.oo-ui-widget-disabled .oo-ui-inputWidget-input {
1673 background-color: var(--background-color-disabled-subtle, #eaecf0);
1674 -webkit-text-fill-color: var(--color-disabled, #72777d);
1675 color: var(--color-disabled, #72777d);
1676 text-shadow: 0 1px 1px var(--color-inverted, #fff);
1677 border-color: var(--border-color-disabled, #c8ccd1);
1679 .oo-ui-textInputWidget.oo-ui-widget-disabled > .oo-ui-iconElement-icon,
1680 .oo-ui-textInputWidget.oo-ui-widget-disabled > .oo-ui-indicatorElement-indicator {
1681 opacity: 0.51;
1683 .oo-ui-textInputWidget.oo-ui-widget-disabled > .oo-ui-labelElement-label {
1684 color: var(--color-disabled, #72777d);
1685 text-shadow: 0 1px 1px var(--color-inverted, #fff);
1688 .oo-ui-menuSelectWidget {
1689 position: absolute;
1690 z-index: 4;
1691 background-color: var(--background-color-base, #fff);
1692 border: 1px solid var(--border-color-base, #a2a9b1);
1693 border-radius: 2px;
1694 box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2);
1696 .oo-ui-menuSelectWidget.oo-ui-clippableElement-clippable {
1697 min-height: 32px;
1699 .oo-ui-menuSelectWidget-invisible {
1700 display: none;
1702 .oo-ui-menuSelectWidget-screenReaderMode.oo-ui-element-hidden {
1703 display: block !important;
1704 display: block;
1705 position: absolute;
1706 clip: rect(1px, 1px, 1px, 1px);
1707 width: 1px;
1708 height: 1px;
1709 margin: -1px;
1710 border: 0;
1711 padding: 0;
1712 overflow: hidden;
1715 .oo-ui-menuOptionWidget {
1716 transition-property: background-color, color;
1717 transition-duration: 100ms;
1719 .oo-ui-menuOptionWidget-checkIcon {
1720 display: none;
1722 .oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted {
1723 background-color: var(--background-color-interactive, #eaecf0);
1724 color: var(--color-emphasized, #000);
1726 .oo-ui-menuOptionWidget.oo-ui-optionWidget-selected,
1727 .oo-ui-menuOptionWidget.oo-ui-optionWidget-selected.oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted,
1728 .oo-ui-menuOptionWidget.oo-ui-optionWidget-pressed.oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted {
1729 background-color: var(--background-color-progressive-subtle, #eaf3ff);
1730 color: var(--color-progressive, #36c);
1732 .oo-ui-menuOptionWidget.oo-ui-widget-enabled.oo-ui-optionWidget {
1733 color: var(--color-base, #202122);
1736 .oo-ui-menuSectionOptionWidget {
1737 color: var(--color-base--subtle, #72777d);
1738 padding: 5px 12px 4px;
1739 font-weight: 700;
1741 .oo-ui-menuSectionOptionWidget.oo-ui-widget-enabled {
1742 cursor: default;
1744 .oo-ui-menuSectionOptionWidget ~ .oo-ui-menuOptionWidget {
1745 padding-left: 24px;
1747 .oo-ui-menuSectionOptionWidget ~ .oo-ui-menuOptionWidget.oo-ui-iconElement {
1748 padding-left: 3.5em;
1750 .oo-ui-menuSectionOptionWidget ~ .oo-ui-menuOptionWidget.oo-ui-iconElement .oo-ui-iconElement-icon {
1751 left: 1.71428571em;
1754 .oo-ui-dropdownWidget {
1755 display: inline-block;
1756 position: relative;
1757 vertical-align: middle;
1758 width: 100%;
1759 max-width: 50em;
1760 margin-right: 8px;
1762 .oo-ui-dropdownWidget-handle {
1763 position: relative;
1764 width: 100%;
1765 display: block;
1766 white-space: nowrap;
1767 overflow: hidden;
1768 text-overflow: ellipsis;
1769 cursor: default;
1770 -webkit-touch-callout: none;
1771 -webkit-user-select: none;
1772 -moz-user-select: none;
1773 -ms-user-select: none;
1774 user-select: none;
1775 box-sizing: border-box;
1777 .oo-ui-dropdownWidget-handle .oo-ui-labelElement-label {
1778 display: inline-block;
1780 .oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle {
1781 cursor: pointer;
1783 .oo-ui-dropdownWidget:last-child {
1784 margin-right: 0;
1786 .oo-ui-dropdownWidget-handle {
1787 min-height: 32px;
1788 border: 1px solid var(--border-color-base, #a2a9b1);
1789 border-radius: 2px;
1790 padding: 5px 2.14285714em 5px 12px;
1791 line-height: 1;
1793 .oo-ui-dropdownWidget-handle .oo-ui-iconElement-icon {
1794 left: 12px;
1796 .oo-ui-dropdownWidget-handle .oo-ui-indicatorElement-indicator {
1797 right: 11px;
1799 .oo-ui-dropdownWidget-handle .oo-ui-labelElement-label {
1800 line-height: 1.42857143em;
1802 .oo-ui-dropdownWidget.oo-ui-iconElement .oo-ui-dropdownWidget-handle {
1803 padding-left: 2.71428571em;
1805 .oo-ui-dropdownWidget.oo-ui-indicatorElement .oo-ui-dropdownWidget-handle {
1806 padding-right: 2.57142861em;
1808 .oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle {
1809 background-color: var(--background-color-interactive-subtle, #f8f9fa);
1810 color: var(--color-base, #202122);
1811 transition-property: background-color, border-color, box-shadow;
1812 transition-duration: 100ms;
1814 .oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle:hover {
1815 background-color: var(--background-color-base, #fff);
1816 color: var(--color-base--hover, #404244);
1817 border-color: var(--border-color-base, #a2a9b1);
1819 .oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle:hover .oo-ui-iconElement-icon,
1820 .oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle:hover .oo-ui-indicatorElement-indicator {
1821 opacity: 0.74;
1823 .oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle:active {
1824 color: var(--color-emphasized, #000);
1825 border-color: var(--border-color-interactive, #72777d);
1827 .oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle:focus {
1828 border-color: var(--border-color-progressive--focus, #36c);
1829 outline: 1px solid transparent;
1830 box-shadow: inset 0 0 0 1px var(--box-shadow-color-progressive--focus, #36c);
1832 .oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle .oo-ui-iconElement-icon,
1833 .oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle .oo-ui-indicatorElement-indicator {
1834 opacity: 0.87;
1835 transition-property: opacity;
1836 transition-duration: 100ms;
1838 .oo-ui-dropdownWidget.oo-ui-widget-enabled.oo-ui-dropdownWidget-open .oo-ui-dropdownWidget-handle {
1839 background-color: var(--background-color-base, #fff);
1841 .oo-ui-dropdownWidget.oo-ui-widget-enabled.oo-ui-dropdownWidget-open .oo-ui-dropdownWidget-handle .oo-ui-iconElement-icon,
1842 .oo-ui-dropdownWidget.oo-ui-widget-enabled.oo-ui-dropdownWidget-open .oo-ui-dropdownWidget-handle .oo-ui-indicatorElement-indicator {
1843 opacity: 1;
1845 .oo-ui-dropdownWidget.oo-ui-widget-disabled .oo-ui-dropdownWidget-handle {
1846 color: var(--color-disabled, #72777d);
1847 text-shadow: 0 1px 1px var(--color-inverted, #fff);
1848 border-color: var(--border-color-disabled, #c8ccd1);
1849 background-color: var(--background-color-disabled-subtle, #eaecf0);
1851 .oo-ui-dropdownWidget.oo-ui-widget-disabled .oo-ui-dropdownWidget-handle:focus {
1852 outline: 0;
1854 .oo-ui-dropdownWidget.oo-ui-widget-disabled .oo-ui-dropdownWidget-handle .oo-ui-indicatorElement-indicator {
1855 opacity: 0.51;
1858 .oo-ui-comboBoxInputWidget {
1859 display: inline-block;
1860 position: relative;
1862 .oo-ui-comboBoxInputWidget-field {
1863 display: table;
1864 width: 100%;
1865 table-layout: fixed;
1867 .oo-ui-comboBoxInputWidget .oo-ui-inputWidget-input {
1868 display: table-cell;
1869 vertical-align: middle;
1870 position: relative;
1871 overflow: hidden;
1873 .oo-ui-comboBoxInputWidget-dropdownButton {
1874 display: table-cell;
1876 .oo-ui-comboBoxInputWidget-dropdownButton > .oo-ui-buttonElement-button {
1877 display: block;
1878 overflow: hidden;
1880 .oo-ui-comboBoxInputWidget.oo-ui-comboBoxInputWidget-empty .oo-ui-comboBoxInputWidget-dropdownButton {
1881 display: none;
1883 .oo-ui-comboBoxInputWidget-php ::-webkit-calendar-picker-indicator {
1884 opacity: 0;
1885 position: absolute;
1886 right: 0;
1887 top: 0;
1888 width: 2.5em;
1889 height: 2.5em;
1890 padding: 0;
1892 .oo-ui-comboBoxInputWidget-php > .oo-ui-indicatorWidget {
1893 display: block;
1894 position: absolute;
1895 top: 0;
1896 height: 100%;
1897 pointer-events: none;
1899 .oo-ui-comboBoxInputWidget .oo-ui-inputWidget-input {
1900 height: 2.2857143em;
1901 border-top-right-radius: 0;
1902 border-bottom-right-radius: 0;
1903 border-right-width: 0;
1905 .oo-ui-comboBoxInputWidget.oo-ui-comboBoxInputWidget-empty .oo-ui-inputWidget-input,
1906 .oo-ui-comboBoxInputWidget-php .oo-ui-inputWidget-input {
1907 border-top-right-radius: 2px;
1908 border-bottom-right-radius: 2px;
1909 border-right-width: 1px;
1911 .oo-ui-comboBoxInputWidget-dropdownButton.oo-ui-indicatorElement {
1912 width: 2.64285714em;
1914 .oo-ui-comboBoxInputWidget-dropdownButton.oo-ui-indicatorElement .oo-ui-buttonElement-button {
1915 min-width: 37px;
1916 padding-left: 0;
1918 .oo-ui-comboBoxInputWidget-dropdownButton.oo-ui-indicatorElement .oo-ui-buttonElement-button > .oo-ui-indicatorElement-indicator {
1919 right: 0.85714286em;
1921 .oo-ui-comboBoxInputWidget-dropdownButton.oo-ui-indicatorElement .oo-ui-buttonElement-button,
1922 .oo-ui-comboBoxInputWidget-dropdownButton.oo-ui-indicatorElement .oo-ui-buttonElement-button:focus {
1923 border-top-left-radius: 0;
1924 border-bottom-left-radius: 0;
1926 .oo-ui-comboBoxInputWidget-php .oo-ui-indicatorWidget {
1927 right: 12px;
1928 margin: 0;
1930 .oo-ui-comboBoxInputWidget-open .oo-ui-comboBoxInputWidget-dropdownButton > .oo-ui-buttonElement-button {
1931 background-color: var(--background-color-base, #fff);
1933 .oo-ui-comboBoxInputWidget-open .oo-ui-comboBoxInputWidget-dropdownButton > .oo-ui-buttonElement-button .oo-ui-indicatorElement-indicator {
1934 opacity: 1;
1936 .oo-ui-comboBoxInputWidget.oo-ui-widget-disabled .oo-ui-indicatorElement-indicator {
1937 opacity: 1;
1941 .oo-ui-multioptionWidget {
1942 position: relative;
1943 display: block;
1945 .oo-ui-multioptionWidget.oo-ui-widget-enabled {
1946 cursor: pointer;
1948 .oo-ui-multioptionWidget.oo-ui-widget-disabled {
1949 cursor: default;
1951 .oo-ui-multioptionWidget.oo-ui-labelElement .oo-ui-labelElement-label {
1952 display: block;
1953 white-space: nowrap;
1954 text-overflow: ellipsis;
1955 overflow: hidden;
1957 .oo-ui-multioptionWidget.oo-ui-widget-disabled {
1958 color: var(--color-disabled, #72777d);
1962 .oo-ui-checkboxMultioptionWidget {
1963 display: table;
1964 padding: 4px 0;
1966 .oo-ui-checkboxMultioptionWidget .oo-ui-checkboxInputWidget,
1967 .oo-ui-checkboxMultioptionWidget.oo-ui-labelElement > .oo-ui-labelElement-label {
1968 display: table-cell;
1969 vertical-align: top;
1971 .oo-ui-checkboxMultioptionWidget .oo-ui-checkboxInputWidget {
1972 width: 1px;
1974 .oo-ui-checkboxMultioptionWidget.oo-ui-labelElement > .oo-ui-labelElement-label {
1975 white-space: normal;
1977 .oo-ui-checkboxMultioptionWidget:first-child {
1978 padding-top: 0;
1980 .oo-ui-checkboxMultioptionWidget.oo-ui-labelElement > .oo-ui-labelElement-label {
1981 padding-left: 6px;
1983 .oo-ui-checkboxMultioptionWidget .oo-ui-checkboxInputWidget {
1984 margin-right: 0;
1987 .oo-ui-progressBarWidget {
1988 box-sizing: border-box;
1989 position: relative;
1990 z-index: 0;
1991 max-width: 50em;
1992 overflow: hidden;
1994 .oo-ui-progressBarWidget:not( .oo-ui-progressBarWidget-inline) {
1995 border: 1px solid var(--border-color-base, #a2a9b1);
1996 border-radius: 9999px;
1997 box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2);
1999 .oo-ui-progressBarWidget:not( .oo-ui-pendingElement-pending ) {
2000 background-color: var(--background-color-base, #fff);
2002 .oo-ui-progressBarWidget-bar {
2003 height: 1em;
2004 transition-property: width;
2005 transition-duration: 100ms;
2007 .oo-ui-progressBarWidget-inline .oo-ui-progressBarWidget-bar {
2008 height: 0.28571429em;
2010 .oo-ui-progressBarWidget-indeterminate .oo-ui-progressBarWidget-bar {
2011 animation: oo-ui-progressBarWidget-slide 1.6s infinite linear;
2012 width: 33%;
2013 transform: translate(-25%);
2015 .oo-ui-progressBarWidget.oo-ui-widget-enabled .oo-ui-progressBarWidget-bar {
2016 background-color: var(--background-color-progressive, #36c);
2018 .oo-ui-progressBarWidget.oo-ui-widget-disabled .oo-ui-progressBarWidget-bar {
2019 background-color: var(--background-color-disabled, #c8ccd1);
2021 @keyframes oo-ui-progressBarWidget-slide {
2022 from {
2023 transform: translate(-100%);
2025 to {
2026 transform: translate(300%);
2030 .oo-ui-numberInputWidget {
2031 display: inline-block;
2032 position: relative;
2033 max-width: 50em;
2035 .oo-ui-numberInputWidget-buttoned .oo-ui-buttonWidget,
2036 .oo-ui-numberInputWidget-buttoned .oo-ui-inputWidget-input {
2037 display: table-cell;
2038 height: 100%;
2040 .oo-ui-numberInputWidget-field {
2041 display: table;
2042 table-layout: fixed;
2043 width: 100%;
2045 .oo-ui-numberInputWidget-buttoned .oo-ui-buttonWidget {
2046 width: 2.64285714em;
2048 .oo-ui-numberInputWidget-buttoned .oo-ui-buttonWidget .oo-ui-buttonElement-button {
2049 display: block;
2050 min-width: 37px;
2051 min-height: 32px;
2052 padding-left: 0;
2053 padding-right: 0;
2055 .oo-ui-numberInputWidget-buttoned .oo-ui-inputWidget-input {
2056 height: 2.2857143em;
2057 border-radius: 0;
2059 .oo-ui-numberInputWidget-minusButton > .oo-ui-buttonElement-button {
2060 border-top-right-radius: 0;
2061 border-bottom-right-radius: 0;
2062 border-right-width: 0;
2064 .oo-ui-numberInputWidget-plusButton > .oo-ui-buttonElement-button {
2065 border-top-left-radius: 0;
2066 border-bottom-left-radius: 0;
2067 border-left-width: 0;
2069 .oo-ui-numberInputWidget.oo-ui-widget-disabled.oo-ui-numberInputWidget-buttoned .oo-ui-iconElement-icon {
2070 opacity: 1;
2073 .oo-ui-selectFileInputWidget {
2074 width: 100%;
2075 max-width: 50em;
2076 min-height: 32px;
2078 .oo-ui-selectFileInputWidget-selectButton > .oo-ui-buttonElement-button {
2079 position: relative;
2080 overflow: hidden;
2082 .oo-ui-selectFileInputWidget-selectButton > .oo-ui-buttonElement-button > [type='file'] {
2083 position: absolute;
2084 top: 0;
2085 bottom: 0;
2086 left: 0;
2087 right: 0;
2088 width: 100%;
2089 height: 100%;
2090 opacity: 0;
2091 z-index: 1;
2092 cursor: pointer;
2093 padding-top: 100px;
2095 .oo-ui-selectFileInputWidget-selectButton.oo-ui-widget-disabled > .oo-ui-buttonElement-button > [type='file'] {
2096 display: none;
2098 .oo-ui-selectFileInputWidget-info > .oo-ui-inputWidget-input {
2099 pointer-events: none;
2101 .oo-ui-selectFileInputWidget-empty.oo-ui-widget-enabled .oo-ui-selectFileInputWidget-label {
2102 cursor: default;
2104 .oo-ui-selectFileInputWidget-dropTarget {
2105 position: relative;
2106 cursor: default;
2107 height: 8.815em;
2109 .oo-ui-selectFileInputWidget-dropTarget .oo-ui-selectFileInputWidget-dropLabel,
2110 .oo-ui-selectFileInputWidget-dropTarget .oo-ui-selectFileInputWidget-selectButton {
2111 display: none;
2113 .oo-ui-selectFileInputWidget-dropTarget .oo-ui-selectFileInputWidget-thumbnail {
2114 width: 7.815em;
2115 position: absolute;
2116 top: 0.5em;
2117 bottom: 0.5em;
2118 left: 0.5em;
2119 background-position: center center;
2120 background-repeat: no-repeat;
2121 background-size: contain;
2123 .oo-ui-selectFileInputWidget-dropTarget .oo-ui-selectFileInputWidget-thumbnail > .oo-ui-selectFileInputWidget-noThumbnail-icon {
2124 opacity: 0.4;
2125 height: 7.815em;
2126 width: 7.815em;
2128 .oo-ui-selectFileInputWidget-dropTarget .oo-ui-pendingElement-pending {
2129 background-repeat: repeat;
2131 .oo-ui-selectFileInputWidget-dropTarget .oo-ui-selectFileInputWidget-info {
2132 display: block;
2133 height: 100%;
2134 width: auto;
2135 margin-right: 0;
2137 .oo-ui-selectFileInputWidget-dropTarget .oo-ui-selectFileInputWidget-info > .oo-ui-inputWidget-input {
2138 border: 0;
2139 box-shadow: none;
2140 background: transparent;
2142 .oo-ui-selectFileInputWidget-dropTarget.oo-ui-selectFileInputWidget-withThumbnail .oo-ui-selectFileInputWidget-info {
2143 margin-left: 8.815em;
2145 .oo-ui-selectFileInputWidget-dropTarget .oo-ui-selectFileInputWidget-label {
2146 display: block;
2147 position: relative;
2148 top: inherit;
2150 .oo-ui-selectFileInputWidget-dropTarget .oo-ui-selectFileInputWidget-fileName {
2151 display: block;
2153 .oo-ui-selectFileInputWidget.oo-ui-selectFileInputWidget-empty.oo-ui-selectFileInputWidget-dropTarget {
2154 text-align: center;
2156 .oo-ui-selectFileInputWidget.oo-ui-selectFileInputWidget-empty.oo-ui-selectFileInputWidget-dropTarget .oo-ui-selectFileInputWidget-thumbnail,
2157 .oo-ui-selectFileInputWidget.oo-ui-selectFileInputWidget-empty.oo-ui-selectFileInputWidget-dropTarget .oo-ui-selectFileInputWidget-info {
2158 display: none;
2160 .oo-ui-selectFileInputWidget.oo-ui-selectFileInputWidget-empty.oo-ui-selectFileInputWidget-dropTarget .oo-ui-selectFileInputWidget-selectButton {
2161 display: block;
2162 margin: 2.2em 1em 1em;
2164 .oo-ui-selectFileInputWidget.oo-ui-selectFileInputWidget-empty.oo-ui-widget-enabled .oo-ui-selectFileInputWidget-dropLabel {
2165 display: block;
2167 .oo-ui-selectFileInputWidget.oo-ui-selectFileInputWidget-empty.oo-ui-widget-disabled.oo-ui-selectFileInputWidget-dropTarget {
2168 -webkit-touch-callout: none;
2169 -webkit-user-select: none;
2170 -moz-user-select: none;
2171 -ms-user-select: none;
2172 user-select: none;
2174 .oo-ui-selectFileInputWidget.oo-ui-selectFileInputWidget-empty.oo-ui-widget-disabled.oo-ui-selectFileInputWidget-dropTarget,
2175 .oo-ui-selectFileInputWidget.oo-ui-selectFileInputWidget-empty.oo-ui-widget-disabled.oo-ui-selectFileInputWidget-dropTarget .oo-ui-selectFileInputWidget-selectButton,
2176 .oo-ui-selectFileInputWidget.oo-ui-selectFileInputWidget-empty.oo-ui-widget-disabled.oo-ui-selectFileInputWidget-dropTarget .oo-ui-buttonElement-button {
2177 /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
2178 cursor: no-drop;
2180 .oo-ui-selectFileInputWidget-info > .oo-ui-inputWidget-input {
2181 height: 2.2857143em;
2183 .oo-ui-selectFileInputWidget-dropTarget {
2184 background-color: var(--background-color-base, #fff);
2185 border: 1px solid var(--border-color-base, #a2a9b1);
2186 border-radius: 2px;
2187 vertical-align: middle;
2188 overflow: hidden;
2190 .oo-ui-selectFileInputWidget-dropTarget.oo-ui-selectFileInputWidget-empty {
2191 border-style: dashed;
2193 .oo-ui-selectFileInputWidget-dropTarget .oo-ui-pendingElement-pending {
2194 background-size: 1.4285714em 1.4285714em;
2196 .oo-ui-selectFileInputWidget-buttonOnly {
2197 width: auto;
2198 max-width: none;
2200 .oo-ui-selectFileInputWidget.oo-ui-widget-enabled.oo-ui-selectFileInputWidget-dropTarget {
2201 background-color: var(--background-color-base, #fff);
2202 transition-property: background-color, color, border-color;
2203 transition-duration: 250ms;
2205 .oo-ui-selectFileInputWidget.oo-ui-widget-enabled.oo-ui-selectFileInputWidget-dropTarget:hover {
2206 border-color: var(--border-color-input--hover, #72777d);
2208 .oo-ui-selectFileInputWidget.oo-ui-widget-enabled .oo-ui-selectFileInputWidget-info > .oo-ui-inputWidget-input {
2209 transition-property: background-color, color;
2210 transition-duration: 250ms;
2212 .oo-ui-selectFileInputWidget.oo-ui-widget-enabled.oo-ui-selectFileInputWidget-canDrop.oo-ui-selectFileInputWidget-dropTarget,
2213 .oo-ui-selectFileInputWidget.oo-ui-widget-enabled.oo-ui-selectFileInputWidget-canDrop .oo-ui-selectFileInputWidget-info > .oo-ui-inputWidget-input {
2214 background-color: var(--background-color-progressive-subtle, #eaf3ff);
2215 color: var(--color-progressive--active, #233566);
2217 .oo-ui-selectFileInputWidget.oo-ui-widget-enabled.oo-ui-selectFileInputWidget-cantDrop.oo-ui-selectFileInputWidget-dropTarget,
2218 .oo-ui-selectFileInputWidget.oo-ui-widget-enabled.oo-ui-selectFileInputWidget-cantDrop .oo-ui-selectFileInputWidget-info > .oo-ui-inputWidget-input {
2219 background-color: var(--background-color-error-subtle, #ffe9e5);
2220 color: var(--border-color-error, #9f3526);
2222 .oo-ui-selectFileInputWidget.oo-ui-widget-disabled.oo-ui-selectFileInputWidget-dropTarget,
2223 .oo-ui-selectFileInputWidget.oo-ui-selectFileInputWidget-empty.oo-ui-widget-disabled.oo-ui-selectFileInputWidget-dropTarget {
2224 background-color: var(--background-color-disabled-subtle, #eaecf0);
2225 border-color: var(--border-color-disabled, #c8ccd1);
2229 .oo-ui-toggleSwitchWidget {
2230 position: relative;
2231 display: inline-block;
2232 vertical-align: middle;
2233 overflow: hidden;
2234 box-sizing: border-box;
2235 transform: translateZ(0);
2236 background-color: var(--background-color-interactive-subtle, #f8f9fa);
2237 min-width: 48px;
2238 width: 3.5em;
2239 min-height: 32px;
2240 height: 2em;
2241 border: 1px solid var(--border-color-input-binary, #72777d);
2242 border-radius: 9999px;
2243 margin-right: 8px;
2244 transition-property: background-color, border-color;
2245 transition-duration: 250ms;
2247 .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled {
2248 cursor: pointer;
2250 .oo-ui-toggleSwitchWidget-grip {
2251 position: absolute;
2252 display: block;
2253 box-sizing: border-box;
2255 .oo-ui-toggleSwitchWidget a {
2256 height: 100%;
2257 display: block;
2258 position: relative;
2259 z-index: 3;
2261 .oo-ui-toggleSwitchWidget:last-child {
2262 margin-right: 0;
2264 .oo-ui-toggleSwitchWidget::before {
2265 content: '';
2266 display: block;
2267 position: absolute;
2268 top: 1px;
2269 left: 1px;
2270 bottom: 1px;
2271 right: 1px;
2272 border: 1px solid var(--border-color-transparent, transparent);
2273 border-radius: 9999px;
2274 z-index: 1;
2275 transition-property: border-color;
2276 transition-duration: 250ms;
2278 .oo-ui-toggleSwitchWidget-grip {
2279 top: 50%;
2280 left: 1px;
2281 min-width: 20px;
2282 width: 1.4285714em;
2283 min-height: 20px;
2284 height: 1.4285714em;
2285 border-radius: 50%;
2286 transition-property: background-color, border-color, transform;
2287 transition-duration: 250ms, 100ms, 100ms;
2288 transform: translateX(0.2857143em) translateY(-50%);
2290 .oo-ui-toggleSwitchWidget-glow {
2291 display: none;
2293 .oo-ui-toggleSwitchWidget.oo-ui-toggleWidget-on .oo-ui-toggleSwitchWidget-grip {
2294 transform: translateX(100%) translateY(-50%);
2296 .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled .oo-ui-toggleSwitchWidget-grip {
2297 background-color: var(--background-color-interactive-subtle, #f8f9fa);
2298 border: 1px solid var(--border-color-input-binary, #72777d);
2300 .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:hover {
2301 background-color: var(--background-color-base, #fff);
2302 border-color: var(--border-color-progressive--hover, #4b77d6);
2304 .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:hover .oo-ui-toggleSwitchWidget-grip {
2305 background-color: var(--background-color-base, #fff);
2306 border-color: var(--border-color-progressive--hover, #4b77d6);
2308 .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:active,
2309 .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:active:hover,
2310 .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:active:focus {
2311 background-color: var(--background-color-progressive--active, #233566);
2312 border-color: var(--border-color-input-binary--active, #233566);
2313 box-shadow: inset 0 0 0 1px var(--box-shadow-color-progressive--active, #233566);
2315 .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:active .oo-ui-toggleSwitchWidget-grip,
2316 .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:active:hover .oo-ui-toggleSwitchWidget-grip,
2317 .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:active:focus .oo-ui-toggleSwitchWidget-grip {
2318 background-color: var(--background-color-base, #fff);
2319 border-color: var(--background-color-base, #fff);
2321 .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:focus {
2322 border-color: var(--border-color-progressive--focus, #36c);
2323 box-shadow: inset 0 0 0 1px var(--box-shadow-color-progressive--focus, #36c);
2324 outline: 1px solid transparent;
2326 .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:focus .oo-ui-toggleSwitchWidget-grip {
2327 border-color: var(--border-color-progressive--focus, #36c);
2329 .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled.oo-ui-toggleWidget-on {
2330 background-color: var(--background-color-progressive, #36c);
2331 border-color: var(--border-color-input-binary--checked, #36c);
2333 .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled.oo-ui-toggleWidget-on .oo-ui-toggleSwitchWidget-grip {
2334 background-color: var(--background-color-base, #fff);
2335 border-color: var(--background-color-base, #fff);
2337 .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled.oo-ui-toggleWidget-on:hover {
2338 background-color: var(--background-color-progressive--hover, #4b77d6);
2339 border-color: var(--border-color-progressive--hover, #4b77d6);
2341 .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled.oo-ui-toggleWidget-on:active,
2342 .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled.oo-ui-toggleWidget-on:active:hover {
2343 background-color: var(--background-color-progressive--active, #233566);
2344 border-color: var(--border-color-input-binary--active, #233566);
2346 .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled.oo-ui-toggleWidget-on:focus {
2347 border-color: var(--border-color-input-binary--checked, #36c);
2349 .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled.oo-ui-toggleWidget-on:focus::before {
2350 border-color: var(--border-color-inverted, #fff);
2352 .oo-ui-toggleSwitchWidget.oo-ui-widget-disabled {
2353 background-color: var(--background-color-disabled, #c8ccd1);
2354 border-color: var(--border-color-disabled, #c8ccd1);
2355 outline: 0;
2357 .oo-ui-toggleSwitchWidget.oo-ui-widget-disabled.oo-ui-toggleWidget-off .oo-ui-toggleSwitchWidget-grip {
2358 border: 1px solid var(--border-color-inverted, #fff);
2359 box-shadow: inset 0 0 0 1px var(--box-shadow-color-inverted, #fff);
2361 .oo-ui-toggleSwitchWidget.oo-ui-widget-disabled.oo-ui-toggleWidget-on .oo-ui-toggleSwitchWidget-grip {
2362 background-color: var(--background-color-base, #fff);
2365 .oo-ui-defaultOverlay {
2366 position: absolute;
2367 top: 0;
2368 /* @noflip */
2369 left: 0;