Update OOUI to v0.32.1
[lhc/web/wiklou.git] / resources / lib / ooui / oojs-ui-widgets-wikimediaui.css
1 /*!
2 * OOUI v0.32.1
3 * https://www.mediawiki.org/wiki/OOUI
4 *
5 * Copyright 2011–2019 OOUI Team and other contributors.
6 * Released under the MIT license
7 * http://oojs.mit-license.org
8 *
9 * Date: 2019-06-05T16:24:16Z
10 */
11 .oo-ui-draggableElement-handle:not( .oo-ui-draggableElement-undraggable ).oo-ui-widget {
12 cursor: move;
13 cursor: url(images/grab.cur );
14 cursor: -webkit-grab;
15 cursor: -moz-grab;
16 cursor: grab;
17 }
18 .oo-ui-draggableElement-handle:not( .oo-ui-draggableElement-undraggable ):active {
19 cursor: url(images/grabbing.cur );
20 cursor: -webkit-grabbing;
21 cursor: -moz-grabbing;
22 cursor: grabbing;
23 }
24 .oo-ui-draggableElement-handle.oo-ui-widget-disabled,
25 .oo-ui-widget-disabled .oo-ui-draggableElement-handle {
26 cursor: default;
27 }
28 .oo-ui-draggableElement-placeholder {
29 opacity: 0.2;
30 }
31 .oo-ui-draggableGroupElement-horizontal .oo-ui-draggableElement {
32 display: inline-block;
33 }
34
35
36
37 .oo-ui-bookletLayout-stackLayout.oo-ui-stackLayout-continuous > .oo-ui-panelLayout-scrollable {
38 overflow: hidden;
39 }
40 .oo-ui-bookletLayout-stackLayout > .oo-ui-panelLayout {
41 width: 100%;
42 -webkit-box-sizing: border-box;
43 -moz-box-sizing: border-box;
44 box-sizing: border-box;
45 }
46 .oo-ui-bookletLayout-outlinePanel-editable > .oo-ui-outlineSelectWidget {
47 height: auto;
48 position: absolute;
49 top: 0;
50 left: 0;
51 right: 0;
52 bottom: 2.5em;
53 overflow: auto;
54 -webkit-overflow-scrolling: touch;
55 }
56 .oo-ui-bookletLayout-outlinePanel > .oo-ui-outlineControlsWidget {
57 position: absolute;
58 bottom: 0;
59 left: 0;
60 right: 0;
61 height: 2.5em;
62 }
63 .oo-ui-bookletLayout-stackLayout > .oo-ui-panelLayout {
64 padding: 1.42857143em;
65 }
66 .oo-ui-bookletLayout-outlinePanel > .oo-ui-outlineControlsWidget {
67 border-top: 1px solid #c8ccd1;
68 }
69 .oo-ui-bookletLayout > .oo-ui-menuLayout-menu {
70 border-right: 1px solid #c8ccd1;
71 }
72
73 .oo-ui-indexLayout {
74 /* Use two classes to ensure increased specificity over menuLayout */
75 }
76 .oo-ui-indexLayout.oo-ui-menuLayout > .oo-ui-menuLayout-menu {
77 height: auto;
78 }
79 .oo-ui-indexLayout.oo-ui-menuLayout.oo-ui-menuLayout-expanded > .oo-ui-menuLayout-menu {
80 height: 3em;
81 white-space: nowrap;
82 }
83 .oo-ui-indexLayout.oo-ui-menuLayout.oo-ui-menuLayout-expanded > .oo-ui-menuLayout-content {
84 top: 3em;
85 }
86 .oo-ui-indexLayout-stackLayout > .oo-ui-panelLayout {
87 padding: 1.42857143em;
88 }
89 .oo-ui-indexLayout.oo-ui-menuLayout.oo-ui-menuLayout-expanded > .oo-ui-menuLayout-menu {
90 height: 2.64285714em;
91 }
92 .oo-ui-indexLayout.oo-ui-menuLayout.oo-ui-menuLayout-expanded > .oo-ui-menuLayout-content {
93 top: 2.64285714em;
94 }
95
96 .oo-ui-menuLayout {
97 top: 0;
98 left: 0;
99 right: 0;
100 bottom: 0;
101 }
102 .oo-ui-menuLayout-expanded,
103 .oo-ui-menuLayout-expanded > .oo-ui-menuLayout-menu,
104 .oo-ui-menuLayout-expanded > .oo-ui-menuLayout-content {
105 position: absolute;
106 }
107 .oo-ui-menuLayout-expanded > .oo-ui-menuLayout-menu {
108 z-index: 1;
109 }
110 .oo-ui-menuLayout-static.oo-ui-menuLayout-after,
111 .oo-ui-menuLayout-static.oo-ui-menuLayout-before {
112 display: table;
113 width: 100%;
114 }
115 .oo-ui-menuLayout-static.oo-ui-menuLayout-after > .oo-ui-menuLayout-menu,
116 .oo-ui-menuLayout-static.oo-ui-menuLayout-before > .oo-ui-menuLayout-menu,
117 .oo-ui-menuLayout-static.oo-ui-menuLayout-after > .oo-ui-menuLayout-content,
118 .oo-ui-menuLayout-static.oo-ui-menuLayout-before > .oo-ui-menuLayout-content {
119 display: table-cell;
120 vertical-align: top;
121 }
122 .oo-ui-menuLayout > .oo-ui-menuLayout-menu,
123 .oo-ui-menuLayout > .oo-ui-menuLayout-content {
124 -webkit-transition: height ease-out 250ms, width ease-out 250ms, top ease-out 250ms, left ease-out 250ms, right ease-out 250ms, bottom ease-out 250ms;
125 -moz-transition: height ease-out 250ms, width ease-out 250ms, top ease-out 250ms, left ease-out 250ms, right ease-out 250ms, bottom ease-out 250ms;
126 transition: height ease-out 250ms, width ease-out 250ms, top ease-out 250ms, left ease-out 250ms, right ease-out 250ms, bottom ease-out 250ms;
127 }
128 .oo-ui-menuLayout > .oo-ui-menuLayout-menu {
129 height: 14.28571429em;
130 width: 14.28571429em;
131 }
132 .oo-ui-menuLayout > .oo-ui-menuLayout-content {
133 top: 14.28571429em;
134 left: 14.28571429em;
135 right: 14.28571429em;
136 bottom: 14.28571429em;
137 }
138 .oo-ui-menuLayout.oo-ui-menuLayout-hideMenu > .oo-ui-menuLayout-menu {
139 width: 0 !important;
140 height: 0 !important;
141 overflow: hidden;
142 }
143 .oo-ui-menuLayout.oo-ui-menuLayout-hideMenu > .oo-ui-menuLayout-content {
144 top: 0 !important;
145 left: 0 !important;
146 right: 0 !important;
147 bottom: 0 !important;
148 }
149 .oo-ui-menuLayout.oo-ui-menuLayout-showMenu.oo-ui-menuLayout-top > .oo-ui-menuLayout-menu {
150 width: auto !important;
151 left: 0;
152 top: 0;
153 right: 0;
154 }
155 .oo-ui-menuLayout.oo-ui-menuLayout-showMenu.oo-ui-menuLayout-top > .oo-ui-menuLayout-content {
156 right: 0 !important;
157 bottom: 0 !important;
158 left: 0 !important;
159 }
160 .oo-ui-menuLayout.oo-ui-menuLayout-showMenu.oo-ui-menuLayout-after > .oo-ui-menuLayout-menu {
161 height: auto !important;
162 top: 0;
163 right: 0;
164 bottom: 0;
165 }
166 .oo-ui-menuLayout.oo-ui-menuLayout-showMenu.oo-ui-menuLayout-after > .oo-ui-menuLayout-content {
167 bottom: 0 !important;
168 left: 0 !important;
169 top: 0 !important;
170 }
171 .oo-ui-menuLayout.oo-ui-menuLayout-showMenu.oo-ui-menuLayout-bottom > .oo-ui-menuLayout-menu {
172 width: auto !important;
173 right: 0;
174 bottom: 0;
175 left: 0;
176 }
177 .oo-ui-menuLayout.oo-ui-menuLayout-showMenu.oo-ui-menuLayout-bottom > .oo-ui-menuLayout-content {
178 left: 0 !important;
179 top: 0 !important;
180 right: 0 !important;
181 }
182 .oo-ui-menuLayout.oo-ui-menuLayout-showMenu.oo-ui-menuLayout-before > .oo-ui-menuLayout-menu {
183 height: auto !important;
184 bottom: 0;
185 left: 0;
186 top: 0;
187 }
188 .oo-ui-menuLayout.oo-ui-menuLayout-showMenu.oo-ui-menuLayout-before > .oo-ui-menuLayout-content {
189 top: 0 !important;
190 right: 0 !important;
191 bottom: 0 !important;
192 }
193
194
195
196 .oo-ui-stackLayout-continuous > .oo-ui-panelLayout {
197 display: block;
198 position: relative;
199 }
200
201 .oo-ui-buttonSelectWidget {
202 display: inline-block;
203 border-radius: 2px;
204 margin-right: 0.5em;
205 z-index: 0;
206 position: relative;
207 padding-bottom: 1px;
208 }
209 .oo-ui-buttonSelectWidget:last-child {
210 margin-right: 0;
211 }
212 .oo-ui-buttonSelectWidget:focus {
213 outline: 0;
214 }
215 .oo-ui-buttonSelectWidget .oo-ui-buttonOptionWidget .oo-ui-buttonElement-button {
216 margin-right: -1px;
217 margin-bottom: -1px;
218 border-radius: 0;
219 }
220 .oo-ui-buttonSelectWidget .oo-ui-buttonOptionWidget:first-child .oo-ui-buttonElement-button {
221 border-bottom-left-radius: 2px;
222 border-top-left-radius: 2px;
223 }
224 .oo-ui-buttonSelectWidget .oo-ui-buttonOptionWidget:last-child .oo-ui-buttonElement-button {
225 margin-right: 0;
226 border-bottom-right-radius: 2px;
227 border-top-right-radius: 2px;
228 }
229 .oo-ui-buttonSelectWidget .oo-ui-buttonOptionWidget.oo-ui-widget-disabled + .oo-ui-widget-disabled > .oo-ui-buttonElement-button {
230 border-left-color: #fff;
231 }
232 .oo-ui-buttonSelectWidget.oo-ui-widget-enabled:focus .oo-ui-buttonOptionWidget.oo-ui-optionWidget-selected .oo-ui-buttonElement-button {
233 border-color: #36c;
234 box-shadow: inset 0 0 0 1px #36c, inset 0 0 0 2px #fff;
235 }
236 .oo-ui-buttonSelectWidget.oo-ui-widget-enabled .oo-ui-buttonElement.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover,
237 .oo-ui-buttonSelectWidget.oo-ui-widget-enabled .oo-ui-buttonElement.oo-ui-widget-enabled > .oo-ui-buttonElement-button:active {
238 z-index: 1;
239 }
240 .oo-ui-buttonSelectWidget.oo-ui-widget-enabled .oo-ui-buttonElement.oo-ui-buttonElement-active > .oo-ui-buttonElement-button {
241 z-index: 3;
242 }
243 .oo-ui-buttonSelectWidget.oo-ui-widget-enabled .oo-ui-buttonElement.oo-ui-widget-disabled > .oo-ui-buttonElement-button {
244 z-index: -1;
245 }
246
247 .oo-ui-buttonOptionWidget {
248 display: inline-block;
249 }
250 .oo-ui-buttonOptionWidget.oo-ui-buttonElement-active .oo-ui-buttonElement-button {
251 cursor: default;
252 }
253
254
255 .oo-ui-toggleButtonWidget {
256 margin-right: 0.5em;
257 }
258 .oo-ui-toggleButtonWidget:last-child {
259 margin-right: 0;
260 }
261
262 .oo-ui-toggleSwitchWidget {
263 position: relative;
264 display: inline-block;
265 vertical-align: middle;
266 overflow: hidden;
267 -webkit-box-sizing: border-box;
268 -moz-box-sizing: border-box;
269 box-sizing: border-box;
270 -webkit-transform: translateZ(0);
271 transform: translateZ(0);
272 background-color: #f8f9fa;
273 width: 3.5em;
274 min-height: 26px;
275 height: 2em;
276 border: 1px solid #72777d;
277 border-radius: 1em;
278 margin-right: 0.5em;
279 -webkit-transition: background-color 250ms, border-color 250ms;
280 -moz-transition: background-color 250ms, border-color 250ms;
281 transition: background-color 250ms, border-color 250ms;
282 }
283 .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled {
284 cursor: pointer;
285 }
286 .oo-ui-toggleSwitchWidget-grip {
287 position: absolute;
288 display: block;
289 -webkit-box-sizing: border-box;
290 -moz-box-sizing: border-box;
291 box-sizing: border-box;
292 }
293 .oo-ui-toggleSwitchWidget:last-child {
294 margin-right: 0;
295 }
296 .oo-ui-toggleSwitchWidget:before {
297 content: '';
298 display: block;
299 position: absolute;
300 top: 1px;
301 left: 1px;
302 bottom: 1px;
303 right: 1px;
304 border: 1px solid transparent;
305 border-radius: 1em;
306 z-index: 1;
307 -webkit-transition: border-color 250ms;
308 -moz-transition: border-color 250ms;
309 transition: border-color 250ms;
310 }
311 .oo-ui-toggleSwitchWidget-grip {
312 top: 0.35714286em;
313 min-width: 16px;
314 width: 1.14285714em;
315 min-height: 16px;
316 height: 1.14285714em;
317 border-radius: 1.14285714em;
318 -webkit-transition: background-color 250ms, left 100ms, margin-left 100ms;
319 -moz-transition: background-color 250ms, left 100ms, margin-left 100ms;
320 transition: background-color 250ms, left 100ms, margin-left 100ms;
321 }
322 .oo-ui-toggleSwitchWidget-glow {
323 display: none;
324 }
325 .oo-ui-toggleSwitchWidget.oo-ui-toggleWidget-off .oo-ui-toggleSwitchWidget-grip {
326 left: 0.35714286em;
327 margin-left: 0;
328 }
329 .oo-ui-toggleSwitchWidget.oo-ui-toggleWidget-on .oo-ui-toggleSwitchWidget-grip {
330 left: 1.9em;
331 margin-left: -2px;
332 }
333 .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled .oo-ui-toggleSwitchWidget-grip {
334 background-color: #f8f9fa;
335 border: 1px solid #72777d;
336 }
337 .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:hover {
338 background-color: #fff;
339 border-color: #447ff5;
340 }
341 .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:hover .oo-ui-toggleSwitchWidget-grip {
342 background-color: #fff;
343 border-color: #447ff5;
344 }
345 .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:active,
346 .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:active:hover,
347 .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:active:focus {
348 background-color: #2a4b8d;
349 border-color: #2a4b8d;
350 box-shadow: inset 0 0 0 1px #2a4b8d;
351 }
352 .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:active .oo-ui-toggleSwitchWidget-grip,
353 .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:active:hover .oo-ui-toggleSwitchWidget-grip,
354 .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:active:focus .oo-ui-toggleSwitchWidget-grip {
355 background-color: #fff;
356 border-color: #fff;
357 box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
358 }
359 .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:focus {
360 border-color: #36c;
361 box-shadow: inset 0 0 0 1px #36c;
362 outline: 0;
363 }
364 .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:focus .oo-ui-toggleSwitchWidget-grip {
365 border-color: #36c;
366 }
367 .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled.oo-ui-toggleWidget-on {
368 background-color: #36c;
369 border-color: #36c;
370 }
371 .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled.oo-ui-toggleWidget-on .oo-ui-toggleSwitchWidget-grip {
372 background-color: #fff;
373 border-color: #fff;
374 box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
375 }
376 .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled.oo-ui-toggleWidget-on:hover {
377 background-color: #447ff5;
378 border-color: #447ff5;
379 }
380 .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled.oo-ui-toggleWidget-on:active,
381 .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled.oo-ui-toggleWidget-on:active:hover {
382 background-color: #2a4b8d;
383 border-color: #2a4b8d;
384 }
385 .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled.oo-ui-toggleWidget-on:focus {
386 border-color: #36c;
387 }
388 .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled.oo-ui-toggleWidget-on:focus:before {
389 border-color: #fff;
390 }
391 .oo-ui-toggleSwitchWidget.oo-ui-widget-disabled {
392 background-color: #c8ccd1;
393 border-color: #c8ccd1;
394 outline: 0;
395 }
396 .oo-ui-toggleSwitchWidget.oo-ui-widget-disabled.oo-ui-toggleWidget-off .oo-ui-toggleSwitchWidget-grip {
397 border: 1px solid #fff;
398 box-shadow: inset 0 0 0 1px #fff;
399 }
400 .oo-ui-toggleSwitchWidget.oo-ui-widget-disabled.oo-ui-toggleWidget-on .oo-ui-toggleSwitchWidget-grip {
401 background-color: #fff;
402 }
403
404 .oo-ui-selectFileWidget-dropTarget {
405 position: relative;
406 cursor: default;
407 height: 8.815em;
408 }
409 .oo-ui-selectFileWidget-dropTarget .oo-ui-selectFileWidget-dropLabel,
410 .oo-ui-selectFileWidget-dropTarget .oo-ui-selectFileInputWidget-selectButton {
411 display: none;
412 }
413 .oo-ui-selectFileWidget-dropTarget .oo-ui-selectFileWidget-thumbnail {
414 width: 7.815em;
415 position: absolute;
416 top: 0.5em;
417 bottom: 0.5em;
418 left: 0.5em;
419 background-position: center center;
420 background-repeat: no-repeat;
421 background-size: contain;
422 }
423 .oo-ui-selectFileWidget-dropTarget .oo-ui-selectFileWidget-thumbnail > .oo-ui-selectFileWidget-noThumbnail-icon {
424 opacity: 0.4;
425 height: 7.815em;
426 width: 7.815em;
427 }
428 .oo-ui-selectFileWidget-dropTarget .oo-ui-pendingElement-pending {
429 background-repeat: repeat;
430 }
431 .oo-ui-selectFileWidget-dropTarget .oo-ui-selectFileInputWidget-info {
432 display: block;
433 height: 100%;
434 width: auto;
435 margin-left: 8.815em;
436 margin-right: 0;
437 }
438 .oo-ui-selectFileWidget-dropTarget .oo-ui-selectFileInputWidget-info > .oo-ui-inputWidget-input {
439 border: 0;
440 box-shadow: none;
441 background: transparent;
442 }
443 .oo-ui-selectFileWidget-dropTarget .oo-ui-selectFileInputWidget-label {
444 display: block;
445 position: relative;
446 top: inherit;
447 }
448 .oo-ui-selectFileWidget-dropTarget .oo-ui-selectFileInputWidget-fileName {
449 display: block;
450 }
451 .oo-ui-selectFileWidget.oo-ui-selectFileInputWidget-empty.oo-ui-selectFileWidget-dropTarget {
452 text-align: center;
453 }
454 .oo-ui-selectFileWidget.oo-ui-selectFileInputWidget-empty.oo-ui-selectFileWidget-dropTarget .oo-ui-selectFileWidget-thumbnail,
455 .oo-ui-selectFileWidget.oo-ui-selectFileInputWidget-empty.oo-ui-selectFileWidget-dropTarget .oo-ui-selectFileInputWidget-info {
456 display: none;
457 }
458 .oo-ui-selectFileWidget.oo-ui-selectFileInputWidget-empty.oo-ui-selectFileWidget-dropTarget .oo-ui-selectFileInputWidget-selectButton {
459 display: block;
460 margin: 2.2em 1em 1em;
461 }
462 .oo-ui-selectFileWidget.oo-ui-selectFileInputWidget-empty.oo-ui-widget-enabled .oo-ui-selectFileWidget-dropLabel {
463 display: block;
464 }
465 .oo-ui-selectFileWidget.oo-ui-selectFileInputWidget-empty.oo-ui-widget-disabled.oo-ui-selectFileWidget-dropTarget {
466 -webkit-touch-callout: none;
467 -webkit-user-select: none;
468 -moz-user-select: none;
469 -ms-user-select: none;
470 user-select: none;
471 }
472 .oo-ui-selectFileWidget.oo-ui-selectFileInputWidget-empty.oo-ui-widget-disabled.oo-ui-selectFileWidget-dropTarget,
473 .oo-ui-selectFileWidget.oo-ui-selectFileInputWidget-empty.oo-ui-widget-disabled.oo-ui-selectFileWidget-dropTarget .oo-ui-buttonElement-button {
474 cursor: no-drop;
475 }
476 .oo-ui-selectFileWidget-dropTarget {
477 background-color: #fff;
478 border: 1px solid #a2a9b1;
479 border-radius: 2px;
480 vertical-align: middle;
481 overflow: hidden;
482 }
483 .oo-ui-selectFileWidget-dropTarget.oo-ui-selectFileInputWidget-empty {
484 border-style: dashed;
485 }
486 .oo-ui-selectFileWidget-dropTarget .oo-ui-pendingElement-pending {
487 background-size: 1.42857143em 1.42857143em;
488 }
489 .oo-ui-selectFileWidget-buttonOnly {
490 width: auto;
491 max-width: none;
492 }
493 .oo-ui-selectFileWidget.oo-ui-widget-enabled.oo-ui-selectFileWidget-dropTarget {
494 background-color: #fff;
495 -webkit-transition: background-color 250ms, color 250ms, border-color 250ms;
496 -moz-transition: background-color 250ms, color 250ms, border-color 250ms;
497 transition: background-color 250ms, color 250ms, border-color 250ms;
498 }
499 .oo-ui-selectFileWidget.oo-ui-widget-enabled.oo-ui-selectFileWidget-dropTarget:hover {
500 border-color: #72777d;
501 }
502 .oo-ui-selectFileWidget.oo-ui-widget-enabled .oo-ui-selectFileInputWidget-info > .oo-ui-inputWidget-input {
503 -webkit-transition: background-color 250ms, color 250ms;
504 -moz-transition: background-color 250ms, color 250ms;
505 transition: background-color 250ms, color 250ms;
506 }
507 .oo-ui-selectFileWidget.oo-ui-widget-enabled.oo-ui-selectFileWidget-canDrop.oo-ui-selectFileWidget-dropTarget,
508 .oo-ui-selectFileWidget.oo-ui-widget-enabled.oo-ui-selectFileWidget-canDrop .oo-ui-selectFileInputWidget-info > .oo-ui-inputWidget-input {
509 background-color: #eaf3ff;
510 color: #36c;
511 }
512 .oo-ui-selectFileWidget.oo-ui-widget-disabled.oo-ui-selectFileWidget-dropTarget,
513 .oo-ui-selectFileWidget.oo-ui-selectFileInputWidget-empty.oo-ui-widget-disabled.oo-ui-selectFileWidget-dropTarget {
514 background-color: #eaecf0;
515 border-color: #c8ccd1;
516 }
517
518 .oo-ui-outlineSelectWidget {
519 height: 100%;
520 }
521 .oo-ui-outlineSelectWidget:focus {
522 box-shadow: inset 0 0 0 2px #36c;
523 }
524
525 .oo-ui-outlineOptionWidget {
526 -webkit-touch-callout: none;
527 -webkit-user-select: none;
528 -moz-user-select: none;
529 -ms-user-select: none;
530 user-select: none;
531 padding: 0.85714286em 0.85714286em;
532 -webkit-transition: background-color 100ms, color 100ms;
533 -moz-transition: background-color 100ms, color 100ms;
534 transition: background-color 100ms, color 100ms;
535 }
536 .oo-ui-outlineOptionWidget.oo-ui-optionWidget-highlighted {
537 background-color: #eaecf0;
538 color: #000;
539 }
540 .oo-ui-outlineOptionWidget.oo-ui-optionWidget-selected {
541 background-color: #eaf3ff;
542 color: #36c;
543 }
544 .oo-ui-outlineOptionWidget.oo-ui-optionWidget-pressed {
545 background-color: rgba(41, 98, 204, 0.1);
546 color: #36c;
547 }
548 .oo-ui-outlineOptionWidget.oo-ui-indicatorElement .oo-ui-labelElement-label {
549 padding-right: 1.5em;
550 }
551 .oo-ui-outlineOptionWidget.oo-ui-indicatorElement .oo-ui-indicatorElement-indicator {
552 opacity: 0.5;
553 }
554 .oo-ui-outlineOptionWidget-level-1 {
555 padding-left: 2.571em;
556 }
557 .oo-ui-outlineOptionWidget-level-1.oo-ui-iconElement {
558 padding-left: 4.429em;
559 }
560 .oo-ui-outlineOptionWidget-level-1.oo-ui-iconElement .oo-ui-iconElement-icon {
561 left: 2.571em;
562 }
563 .oo-ui-outlineOptionWidget-level-2 {
564 padding-left: 5.142em;
565 }
566 .oo-ui-outlineOptionWidget-level-2.oo-ui-iconElement {
567 padding-left: 6.857em;
568 }
569 .oo-ui-outlineOptionWidget-level-2.oo-ui-iconElement .oo-ui-iconElement-icon {
570 left: 4.429em;
571 }
572
573 .oo-ui-outlineControlsWidget {
574 background-color: #fff;
575 }
576 .oo-ui-outlineControlsWidget-items,
577 .oo-ui-outlineControlsWidget-movers {
578 float: left;
579 -webkit-box-sizing: border-box;
580 -moz-box-sizing: border-box;
581 box-sizing: border-box;
582 }
583 .oo-ui-outlineControlsWidget-items {
584 float: left;
585 }
586 .oo-ui-outlineControlsWidget-items .oo-ui-buttonWidget {
587 float: left;
588 }
589 .oo-ui-outlineControlsWidget-movers {
590 float: right;
591 }
592 .oo-ui-outlineControlsWidget-movers .oo-ui-buttonWidget {
593 float: right;
594 }
595 .oo-ui-outlineControlsWidget-items > .oo-ui-buttonWidget,
596 .oo-ui-outlineControlsWidget-movers > .oo-ui-buttonWidget {
597 height: 2.28571429em;
598 width: 2.28571429em;
599 margin: 0 !important;
600 /* stylelint-disable-line declaration-no-important */
601 }
602
603 .oo-ui-tabSelectWidget {
604 text-align: left;
605 overflow-x: auto;
606 overflow-y: hidden;
607 -webkit-overflow-scrolling: auto;
608 }
609 .oo-ui-tabSelectWidget-mobile {
610 white-space: nowrap;
611 }
612 .oo-ui-tabSelectWidget-framed {
613 background-color: #eaecf0;
614 }
615 .oo-ui-tabSelectWidget-frameless {
616 box-shadow: inset 0 -1px 0 0 #a2a9b1;
617 }
618 .oo-ui-tabSelectWidget-mobile:after {
619 content: '';
620 position: absolute;
621 top: 0;
622 right: -1px;
623 width: 1.28571429em;
624 height: 100%;
625 pointer-events: none;
626 }
627 .oo-ui-tabSelectWidget-mobile.oo-ui-tabSelectWidget-framed:after {
628 background-image: -webkit-gradient(linear, left top, right top, color-stop(0, rgba(234, 236, 240, 0)), color-stop(100%, #eaecf0));
629 background-image: -webkit-linear-gradient(left, rgba(234, 236, 240, 0) 0, #eaecf0 100%);
630 background-image: -moz-linear-gradient(left, rgba(234, 236, 240, 0) 0, #eaecf0 100%);
631 background-image: linear-gradient(to right, rgba(234, 236, 240, 0) 0, #eaecf0 100%);
632 border-right: 1px solid #a2a9b1;
633 }
634 .oo-ui-tabSelectWidget-mobile.oo-ui-tabSelectWidget-frameless:after {
635 background-image: -webkit-gradient(linear, left top, right top, color-stop(0, rgba(255, 255, 255, 0)), color-stop(100%, #fff));
636 background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0, #fff 100%);
637 background-image: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0, #fff 100%);
638 background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0, #fff 100%);
639 }
640 .oo-ui-tabSelectWidget.oo-ui-widget-enabled:focus {
641 outline: 0;
642 }
643
644 .oo-ui-tabOptionWidget {
645 display: inline-block;
646 -webkit-box-sizing: border-box;
647 -moz-box-sizing: border-box;
648 box-sizing: border-box;
649 vertical-align: bottom;
650 color: #444;
651 margin: 0.42857143em 0 0 0.42857143em;
652 padding: 0 0.57142857em;
653 border-color: transparent;
654 border-style: solid;
655 font-weight: bold;
656 line-height: 1;
657 -webkit-transition: background-color 100ms, color 100ms, border-color 100ms;
658 -moz-transition: background-color 100ms, color 100ms, border-color 100ms;
659 transition: background-color 100ms, color 100ms, border-color 100ms;
660 }
661 .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected {
662 cursor: default;
663 }
664 .oo-ui-tabOptionWidget .oo-ui-labelElement-label {
665 padding: 0.42857143em 0.35714286em;
666 line-height: 1.28571429em;
667 }
668 .oo-ui-tabSelectWidget-mobile .oo-ui-tabOptionWidget:last-child {
669 margin-right: 1.28571429em;
670 }
671 .oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget {
672 border-width: 1px 1px 0 1px;
673 border-top-left-radius: 2px;
674 border-top-right-radius: 2px;
675 }
676 .oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget .oo-ui-labelElement-label {
677 border-bottom: 2px solid transparent;
678 padding: 0.42857143em 0.35714286em 0.28571429em;
679 -webkit-transition: border-color 100ms;
680 -moz-transition: border-color 100ms;
681 transition: border-color 100ms;
682 }
683 .oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected {
684 background-color: #fff;
685 color: #000;
686 }
687 .oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected .oo-ui-labelElement-label {
688 border-bottom-color: #fff;
689 }
690 .oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-widget-enabled:hover {
691 background-color: rgba(255, 255, 255, 0.3);
692 color: #222;
693 }
694 .oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-widget-enabled:active {
695 background-color: rgba(255, 255, 255, 0.8);
696 color: #000;
697 }
698 .oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-widget-enabled.oo-ui-optionWidget-selected:hover {
699 background-color: #fff;
700 }
701 .oo-ui-tabSelectWidget-framed.oo-ui-widget-enabled:focus .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected .oo-ui-labelElement-label {
702 border-bottom-color: #36c;
703 }
704 .oo-ui-tabSelectWidget-frameless .oo-ui-tabOptionWidget {
705 margin: 0.42857143em 0.42857143em 0 0;
706 border-width: 0;
707 box-shadow: inset 0 0 0 0 #36c;
708 -webkit-transition: color 100ms, box-shadow 100ms;
709 -moz-transition: color 100ms, box-shadow 100ms;
710 transition: color 100ms, box-shadow 100ms;
711 }
712 .oo-ui-tabSelectWidget-frameless .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected {
713 color: #36c;
714 box-shadow: inset 0 -2px 0 0 #36c;
715 }
716 .oo-ui-tabSelectWidget-frameless .oo-ui-tabOptionWidget.oo-ui-widget-enabled:hover {
717 color: #447ff5;
718 box-shadow: inset 0 -2px 0 0 #447ff5;
719 }
720 .oo-ui-tabSelectWidget-frameless .oo-ui-tabOptionWidget.oo-ui-widget-enabled:active {
721 color: #2a4b8d;
722 box-shadow: inset 0 -2px 0 0 #2a4b8d;
723 }
724 .oo-ui-tabSelectWidget-frameless.oo-ui-widget-enabled:focus .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected {
725 border-radius: 2px;
726 box-shadow: inset 0 0 0 2px #36c;
727 }
728
729 .oo-ui-tagMultiselectWidget {
730 display: inline-block;
731 position: relative;
732 width: 100%;
733 max-width: 50em;
734 vertical-align: top;
735 }
736 .oo-ui-tagMultiselectWidget-handle {
737 width: 100%;
738 display: block;
739 position: relative;
740 }
741 .oo-ui-tagMultiselectWidget-handle > .oo-ui-iconElement-icon,
742 .oo-ui-tagMultiselectWidget-handle > .oo-ui-indicatorElement-indicator {
743 position: absolute;
744 top: 0;
745 height: 100%;
746 }
747 .oo-ui-tagMultiselectWidget-content {
748 position: relative;
749 }
750 .oo-ui-tagMultiselectWidget-group {
751 display: inline;
752 }
753 .oo-ui-tagMultiselectWidget-outlined {
754 width: 100%;
755 }
756 .oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-inlined .oo-ui-tagMultiselectWidget-handle {
757 cursor: text;
758 }
759 .oo-ui-tagMultiselectWidget.oo-ui-widget-disabled .oo-ui-tagMultiselectWidget-content > input {
760 display: none;
761 }
762 .oo-ui-tagMultiselectWidget-focusTrap {
763 display: inline-block;
764 height: 1px;
765 width: 1px;
766 }
767 .oo-ui-tagMultiselectWidget-focusTrap:focus {
768 outline: 0;
769 }
770 .oo-ui-tagMultiselectWidget-handle {
771 -webkit-box-sizing: border-box;
772 -moz-box-sizing: border-box;
773 box-sizing: border-box;
774 min-height: 2.28571429em;
775 margin-right: 0.5em;
776 border: 1px solid #a2a9b1;
777 border-radius: 2px;
778 padding: 0 0.57142857em;
779 line-height: 1;
780 }
781 .oo-ui-tagMultiselectWidget-handle:last-child {
782 margin-right: 0;
783 }
784 .oo-ui-tagMultiselectWidget-handle > .oo-ui-tagMultiselectWidget-content > input {
785 background-color: transparent;
786 color: #000;
787 -webkit-box-sizing: border-box;
788 -moz-box-sizing: border-box;
789 box-sizing: border-box;
790 height: 2.14285714em;
791 border: 0;
792 padding: 0.42857143em 0 0.42857143em 0.57142857em;
793 font-family: inherit;
794 font-size: inherit;
795 line-height: 1.28571429em;
796 vertical-align: top;
797 }
798 .oo-ui-tagMultiselectWidget-handle > .oo-ui-tagMultiselectWidget-content > input::-webkit-input-placeholder {
799 color: #72777d;
800 opacity: 1;
801 }
802 .oo-ui-tagMultiselectWidget-handle > .oo-ui-tagMultiselectWidget-content > input:-ms-input-placeholder {
803 color: #72777d;
804 opacity: 1;
805 }
806 .oo-ui-tagMultiselectWidget-handle > .oo-ui-tagMultiselectWidget-content > input::-moz-placeholder {
807 color: #72777d;
808 opacity: 1;
809 }
810 .oo-ui-tagMultiselectWidget-handle > .oo-ui-tagMultiselectWidget-content > input:-moz-placeholder {
811 color: #72777d;
812 opacity: 1;
813 }
814 .oo-ui-tagMultiselectWidget-handle > .oo-ui-tagMultiselectWidget-content > input::placeholder {
815 color: #72777d;
816 opacity: 1;
817 }
818 .oo-ui-tagMultiselectWidget-handle > .oo-ui-tagMultiselectWidget-content > input:focus {
819 outline: 0;
820 }
821 .oo-ui-tagMultiselectWidget-handle > .oo-ui-tagMultiselectWidget-content .oo-ui-tagMultiselectWidget-group:empty + input {
822 margin-left: 0;
823 }
824 .oo-ui-tagMultiselectWidget-handle .oo-ui-tagMultiselectWidget-group {
825 display: inline-block;
826 max-width: 100%;
827 margin-top: 0.28571429em;
828 margin-left: -0.14285714em;
829 }
830 .oo-ui-tagMultiselectWidget.oo-ui-iconElement .oo-ui-tagMultiselectWidget-handle {
831 padding-left: 2.02857143em;
832 }
833 .oo-ui-tagMultiselectWidget.oo-ui-iconElement .oo-ui-tagMultiselectWidget-handle > .oo-ui-iconElement-icon {
834 left: 0;
835 margin: 0 0.3em;
836 }
837 .oo-ui-tagMultiselectWidget.oo-ui-indicatorElement .oo-ui-tagMultiselectWidget-handle {
838 padding-right: 2.40714286em;
839 }
840 .oo-ui-tagMultiselectWidget.oo-ui-indicatorElement .oo-ui-tagMultiselectWidget-handle > .oo-ui-indicatorElement-indicator {
841 right: 0;
842 margin: 0 0.775em;
843 }
844 .oo-ui-tagMultiselectWidget.oo-ui-widget-enabled .oo-ui-tagMultiselectWidget-handle {
845 background-color: #fff;
846 -webkit-transition: border-color 250ms, box-shadow 250ms;
847 -moz-transition: border-color 250ms, box-shadow 250ms;
848 transition: border-color 250ms, box-shadow 250ms;
849 }
850 .oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-inlined:hover .oo-ui-tagMultiselectWidget-handle {
851 border-color: #72777d;
852 }
853 .oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-inlined.oo-ui-tagMultiselectWidget-focus .oo-ui-tagMultiselectWidget-handle {
854 border-color: #36c;
855 outline: 0;
856 box-shadow: inset 0 0 0 1px #36c;
857 }
858 .oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-inlined.oo-ui-flaggedElement-invalid .oo-ui-tagMultiselectWidget-handle,
859 .oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-inlined.oo-ui-flaggedElement-invalid:hover .oo-ui-tagMultiselectWidget-handle {
860 border-color: #d33;
861 }
862 .oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined .oo-ui-tagMultiselectWidget-handle {
863 background-color: #f8f9fa;
864 border-bottom: 0;
865 border-bottom-left-radius: 0;
866 border-bottom-right-radius: 0;
867 }
868 .oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined .oo-ui-tagItemWidget.oo-ui-widget-enabled {
869 background-color: #fff;
870 }
871 .oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined .oo-ui-inputWidget-input {
872 border-top-left-radius: 0;
873 border-top-right-radius: 0;
874 }
875 .oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined.oo-ui-flaggedElement-invalid .oo-ui-inputWidget-input {
876 border-color: #d33;
877 }
878 .oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-flaggedElement-invalid .oo-ui-inputWidget-input {
879 color: #d33;
880 }
881 .oo-ui-tagMultiselectWidget.oo-ui-widget-disabled .oo-ui-tagMultiselectWidget-handle {
882 color: #72777d;
883 text-shadow: 0 1px 1px #fff;
884 border-color: #c8ccd1;
885 background-color: #eaecf0;
886 }
887 .oo-ui-tagMultiselectWidget.oo-ui-widget-disabled .oo-ui-tagMultiselectWidget-handle > .oo-ui-iconElement-icon {
888 opacity: 0.51;
889 }
890 .oo-ui-tagMultiselectWidget.oo-ui-widget-disabled .oo-ui-tagMultiselectWidget-handle > .oo-ui-indicatorElement-indicator {
891 opacity: 0.15;
892 }
893
894
895 .oo-ui-tagItemWidget {
896 position: relative;
897 display: inline-block;
898 cursor: default;
899 white-space: nowrap;
900 -webkit-box-sizing: border-box;
901 -moz-box-sizing: border-box;
902 box-sizing: border-box;
903 width: auto;
904 max-width: 100%;
905 height: 1.57142857em;
906 margin: 0 0.28571429em 0.28571429em 0;
907 border: 1px solid #a2a9b1;
908 border-radius: 1.57142857em;
909 padding: 0 0.57142857em;
910 line-height: 1.42857143em;
911 vertical-align: middle;
912 }
913 .oo-ui-tagItemWidget.oo-ui-labelElement .oo-ui-labelElement-label {
914 display: inline-block;
915 max-width: 100%;
916 text-overflow: ellipsis;
917 overflow: hidden;
918 }
919 .oo-ui-tagItemWidget.oo-ui-labelElement:not( .oo-ui-tagItemWidget-fixed ) .oo-ui-labelElement-label {
920 cursor: text;
921 }
922 .oo-ui-tagItemWidget.oo-ui-labelElement .oo-ui-labelElement-label {
923 font-size: 0.92857143em;
924 line-height: 1.61538462em;
925 }
926 .oo-ui-tagItemWidget.oo-ui-widget-enabled {
927 color: #222;
928 -webkit-transition: background-color 100ms, color 100ms, border-color 100ms, box-shadow 100ms;
929 -moz-transition: background-color 100ms, color 100ms, border-color 100ms, box-shadow 100ms;
930 transition: background-color 100ms, color 100ms, border-color 100ms, box-shadow 100ms;
931 }
932 .oo-ui-tagItemWidget.oo-ui-widget-enabled:hover {
933 background-color: #fff;
934 color: #444;
935 border-color: #a2a9b1;
936 }
937 .oo-ui-tagItemWidget.oo-ui-widget-enabled:focus {
938 border-color: #36c;
939 box-shadow: inset 0 0 0 1px #36c;
940 outline: 0;
941 }
942 .oo-ui-tagItemWidget.oo-ui-widget-enabled:not( .oo-ui-tagItemWidget-fixed ) {
943 background-color: #f8f9fa;
944 padding-right: 1.64285714em;
945 }
946 .oo-ui-tagItemWidget.oo-ui-widget-enabled.oo-ui-flaggedElement-invalid {
947 border-color: #d33;
948 }
949 .oo-ui-tagItemWidget.oo-ui-widget-enabled.oo-ui-flaggedElement-invalid:hover {
950 border-color: #d33;
951 }
952 .oo-ui-tagItemWidget.oo-ui-widget-enabled.oo-ui-flaggedElement-invalid:focus {
953 border-color: #d33;
954 box-shadow: inset 0 0 0 1px #d33;
955 }
956 .oo-ui-tagItemWidget.oo-ui-widget-enabled > .oo-ui-buttonElement {
957 display: block;
958 position: absolute;
959 top: 0;
960 right: 0;
961 }
962 .oo-ui-tagItemWidget.oo-ui-widget-enabled .oo-ui-buttonElement-button {
963 border: 0;
964 border-radius: 1.57142857em;
965 padding-top: 1.42857143em;
966 padding-left: 1.42857143em;
967 -webkit-transition: background-color 100ms;
968 -moz-transition: background-color 100ms;
969 transition: background-color 100ms;
970 }
971 .oo-ui-tagItemWidget.oo-ui-widget-enabled .oo-ui-buttonElement-button:hover {
972 background-color: #fff;
973 }
974 .oo-ui-tagItemWidget.oo-ui-widget-enabled .oo-ui-buttonElement-button:active {
975 background-color: #c8ccd1;
976 }
977 .oo-ui-tagItemWidget.oo-ui-widget-enabled .oo-ui-buttonElement-button .oo-ui-icon-close {
978 left: 0.21428571em;
979 min-width: 14px;
980 width: 1em;
981 }
982 .oo-ui-tagItemWidget.oo-ui-widget-enabled .oo-ui-buttonElement-button .oo-ui-labelElement-label,
983 .oo-ui-tagItemWidget.oo-ui-widget-enabled .oo-ui-buttonElement-button .oo-ui-indicatorElement-indicator {
984 display: none;
985 }
986 .oo-ui-tagItemWidget.oo-ui-widget-disabled {
987 background-color: #eaecf0;
988 color: #72777d;
989 border-color: #c8ccd1;
990 text-shadow: 0 1px 1px #fff;
991 }
992 .oo-ui-tagItemWidget.oo-ui-widget-disabled:focus {
993 outline: 0;
994 }
995 .oo-ui-tagItemWidget.oo-ui-widget-disabled > .oo-ui-buttonElement {
996 display: none;
997 }
998
999 .oo-ui-searchWidget-query {
1000 position: absolute;
1001 top: 0;
1002 left: 0;
1003 right: 0;
1004 }
1005 .oo-ui-searchWidget-query .oo-ui-textInputWidget {
1006 width: 100%;
1007 }
1008 .oo-ui-searchWidget-results {
1009 position: absolute;
1010 bottom: 0;
1011 left: 0;
1012 right: 0;
1013 overflow-x: hidden;
1014 overflow-y: auto;
1015 -webkit-overflow-scrolling: touch;
1016 }
1017 .oo-ui-searchWidget-query {
1018 height: 4em;
1019 padding: 0 1.42857143em;
1020 border-bottom: 1px solid #c8ccd1;
1021 box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
1022 }
1023 .oo-ui-searchWidget-query .oo-ui-textInputWidget {
1024 margin: 0.85714286em 0;
1025 }
1026 .oo-ui-searchWidget-results {
1027 top: 4em;
1028 padding: 1.14285714em;
1029 line-height: 0;
1030 }