Merge "Special:Upload should not crash on failing previews"
[mediawiki.git] / resources / lib / oojs-ui / oojs-ui-widgets-mediawiki.css
blobaced25b6e70af7d2e795f7b5e185b41225ad7a51
1 /*!
2 * OOjs UI v0.18.4-fix (d4045dee45)
3 * https://www.mediawiki.org/wiki/OOjs_UI
5 * Copyright 2011–2017 OOjs UI Team and other contributors.
6 * Released under the MIT license
7 * http://oojs.mit-license.org
9 * Date: 2017-01-19T20:22:32Z
11 .oo-ui-draggableElement-handle,
12 .oo-ui-draggableElement-handle.oo-ui-widget {
13 cursor: move;
14 cursor: url(images/grab.cur );
15 cursor: -webkit-grab;
16 cursor: -moz-grab;
17 cursor: grab;
19 .oo-ui-draggableElement-handle:active {
20 cursor: url(images/grabbing.cur );
21 cursor: -webkit-grabbing;
22 cursor: -moz-grabbing;
23 cursor: grabbing;
25 .oo-ui-draggableElement-handle.oo-ui-widget-disabled,
26 .oo-ui-widget-disabled .oo-ui-draggableElement-handle {
27 cursor: default;
29 .oo-ui-draggableElement-placeholder {
30 opacity: 0.2;
32 .oo-ui-draggableGroupElement-horizontal .oo-ui-draggableElement {
33 display: inline-block;
35 .oo-ui-bookletLayout-stackLayout.oo-ui-stackLayout-continuous > .oo-ui-panelLayout-scrollable {
36 overflow-y: hidden;
38 .oo-ui-bookletLayout-stackLayout > .oo-ui-panelLayout {
39 width: 100%;
40 -webkit-box-sizing: border-box;
41 -moz-box-sizing: border-box;
42 box-sizing: border-box;
44 .oo-ui-bookletLayout-stackLayout > .oo-ui-panelLayout-scrollable {
45 overflow-y: auto;
47 .oo-ui-bookletLayout-stackLayout > .oo-ui-panelLayout-padded {
48 padding: 2em;
50 .oo-ui-bookletLayout-outlinePanel-editable > .oo-ui-outlineSelectWidget {
51 position: absolute;
52 top: 0;
53 left: 0;
54 right: 0;
55 bottom: 3em;
56 overflow-y: auto;
58 .oo-ui-bookletLayout-outlinePanel > .oo-ui-outlineControlsWidget {
59 position: absolute;
60 bottom: 0;
61 left: 0;
62 right: 0;
64 .oo-ui-bookletLayout-stackLayout > .oo-ui-panelLayout {
65 padding: 1.5em;
67 .oo-ui-bookletLayout-outlinePanel {
68 border-right: 1px solid #ddd;
70 .oo-ui-bookletLayout-outlinePanel > .oo-ui-outlineControlsWidget {
71 box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.25);
73 .oo-ui-indexLayout > .oo-ui-menuLayout-menu {
74 height: 3em;
76 .oo-ui-indexLayout > .oo-ui-menuLayout-content {
77 top: 3em;
79 .oo-ui-indexLayout-stackLayout > .oo-ui-panelLayout {
80 padding: 1.5em;
82 .oo-ui-indexLayout > .oo-ui-menuLayout-menu {
83 height: 2.75em;
85 .oo-ui-indexLayout > .oo-ui-menuLayout-content {
86 top: 2.75em;
88 .oo-ui-menuLayout {
89 position: absolute;
90 top: 0;
91 left: 0;
92 right: 0;
93 bottom: 0;
94 /* stylelint-disable declaration-no-important */
95 /* stylelint-enable declaration-no-important */
97 .oo-ui-menuLayout-menu,
98 .oo-ui-menuLayout-content {
99 position: absolute;
100 -webkit-transition: all 200ms ease;
101 -moz-transition: all 200ms ease;
102 transition: all 200ms ease;
104 .oo-ui-menuLayout-menu {
105 height: 18em;
106 width: 18em;
108 .oo-ui-menuLayout-content {
109 top: 18em;
110 left: 18em;
111 right: 18em;
112 bottom: 18em;
114 .oo-ui-menuLayout.oo-ui-menuLayout-hideMenu > .oo-ui-menuLayout-menu {
115 width: 0 !important;
116 height: 0 !important;
117 overflow: hidden;
119 .oo-ui-menuLayout.oo-ui-menuLayout-hideMenu > .oo-ui-menuLayout-content {
120 top: 0 !important;
121 left: 0 !important;
122 right: 0 !important;
123 bottom: 0 !important;
125 .oo-ui-menuLayout.oo-ui-menuLayout-showMenu.oo-ui-menuLayout-top > .oo-ui-menuLayout-menu {
126 width: auto !important;
127 left: 0;
128 top: 0;
129 right: 0;
131 .oo-ui-menuLayout.oo-ui-menuLayout-showMenu.oo-ui-menuLayout-top > .oo-ui-menuLayout-content {
132 right: 0 !important;
133 bottom: 0 !important;
134 left: 0 !important;
136 .oo-ui-menuLayout.oo-ui-menuLayout-showMenu.oo-ui-menuLayout-after > .oo-ui-menuLayout-menu {
137 height: auto !important;
138 top: 0;
139 right: 0;
140 bottom: 0;
142 .oo-ui-menuLayout.oo-ui-menuLayout-showMenu.oo-ui-menuLayout-after > .oo-ui-menuLayout-content {
143 bottom: 0 !important;
144 left: 0 !important;
145 top: 0 !important;
147 .oo-ui-menuLayout.oo-ui-menuLayout-showMenu.oo-ui-menuLayout-bottom > .oo-ui-menuLayout-menu {
148 width: auto !important;
149 right: 0;
150 bottom: 0;
151 left: 0;
153 .oo-ui-menuLayout.oo-ui-menuLayout-showMenu.oo-ui-menuLayout-bottom > .oo-ui-menuLayout-content {
154 left: 0 !important;
155 top: 0 !important;
156 right: 0 !important;
158 .oo-ui-menuLayout.oo-ui-menuLayout-showMenu.oo-ui-menuLayout-before > .oo-ui-menuLayout-menu {
159 height: auto !important;
160 bottom: 0;
161 left: 0;
162 top: 0;
164 .oo-ui-menuLayout.oo-ui-menuLayout-showMenu.oo-ui-menuLayout-before > .oo-ui-menuLayout-content {
165 top: 0 !important;
166 right: 0 !important;
167 bottom: 0 !important;
169 .oo-ui-stackLayout-continuous > .oo-ui-panelLayout {
170 display: block;
171 position: relative;
173 .oo-ui-buttonSelectWidget {
174 display: inline-block;
175 white-space: nowrap;
176 border-radius: 2px;
177 margin-right: 0.5em;
178 z-index: 0;
179 position: relative;
181 .oo-ui-buttonSelectWidget:last-child {
182 margin-right: 0;
184 .oo-ui-buttonSelectWidget:focus {
185 outline: 0;
187 .oo-ui-buttonSelectWidget .oo-ui-buttonOptionWidget .oo-ui-buttonElement-button {
188 border-radius: 0;
189 margin-left: -1px;
191 .oo-ui-buttonSelectWidget .oo-ui-buttonOptionWidget:first-child .oo-ui-buttonElement-button {
192 border-bottom-left-radius: 2px;
193 border-top-left-radius: 2px;
194 margin-left: 0;
196 .oo-ui-buttonSelectWidget .oo-ui-buttonOptionWidget:last-child .oo-ui-buttonElement-button {
197 border-bottom-right-radius: 2px;
198 border-top-right-radius: 2px;
200 .oo-ui-buttonSelectWidget.oo-ui-widget-enabled:focus .oo-ui-buttonOptionWidget.oo-ui-optionWidget-selected .oo-ui-buttonElement-button {
201 border-color: #36c;
202 box-shadow: inset 0 0 0 1px #36c, inset 0 0 0 2px #fff;
204 .oo-ui-buttonSelectWidget.oo-ui-widget-enabled .oo-ui-buttonElement.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover,
205 .oo-ui-buttonSelectWidget.oo-ui-widget-enabled .oo-ui-buttonElement.oo-ui-widget-enabled > .oo-ui-buttonElement-button:active {
206 z-index: 1;
208 .oo-ui-buttonSelectWidget.oo-ui-widget-enabled .oo-ui-buttonElement.oo-ui-buttonElement-active > .oo-ui-buttonElement-button {
209 z-index: 3;
211 .oo-ui-buttonSelectWidget.oo-ui-widget-enabled .oo-ui-buttonElement.oo-ui-widget-disabled > .oo-ui-buttonElement-button {
212 z-index: -1;
214 .oo-ui-buttonOptionWidget {
215 display: inline-block;
216 padding: 0;
218 .oo-ui-buttonOptionWidget.oo-ui-buttonElement-active .oo-ui-buttonElement-button {
219 cursor: default;
221 .oo-ui-buttonOptionWidget.oo-ui-iconElement .oo-ui-iconElement-icon,
222 .oo-ui-buttonOptionWidget.oo-ui-indicatorElement .oo-ui-indicatorElement-indicator {
223 position: static;
224 display: inline-block;
225 vertical-align: middle;
227 .oo-ui-buttonOptionWidget.oo-ui-optionWidget-selected,
228 .oo-ui-buttonOptionWidget.oo-ui-optionWidget-pressed,
229 .oo-ui-buttonOptionWidget.oo-ui-optionWidget-highlighted {
230 background-color: transparent;
232 .oo-ui-toggleButtonWidget {
233 margin-right: 0.5em;
235 .oo-ui-toggleButtonWidget:last-child {
236 margin-right: 0;
238 .oo-ui-toggleSwitchWidget {
239 position: relative;
240 display: inline-block;
241 vertical-align: middle;
242 overflow: hidden;
243 -webkit-box-sizing: border-box;
244 -moz-box-sizing: border-box;
245 box-sizing: border-box;
246 -webkit-transform: translateZ(0);
247 transform: translateZ(0);
248 background-color: #f8f9fa;
249 width: 3.5em;
250 min-height: 26px;
251 height: 2em;
252 border: 1px solid #72777d;
253 border-radius: 1em;
254 margin-right: 0.5em;
255 -webkit-transition: background-color 250ms, border-color 250ms;
256 -moz-transition: background-color 250ms, border-color 250ms;
257 transition: background-color 250ms, border-color 250ms;
259 .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled {
260 cursor: pointer;
262 .oo-ui-toggleSwitchWidget-grip {
263 position: absolute;
264 display: block;
265 -webkit-box-sizing: border-box;
266 -moz-box-sizing: border-box;
267 box-sizing: border-box;
269 .oo-ui-toggleSwitchWidget:last-child {
270 margin-right: 0;
272 .oo-ui-toggleSwitchWidget:before {
273 content: '';
274 display: block;
275 position: absolute;
276 top: 1px;
277 left: 1px;
278 bottom: 1px;
279 right: 1px;
280 border: 1px solid transparent;
281 border-radius: 1em;
282 z-index: 1;
283 -webkit-transition: border-color 250ms;
284 -moz-transition: border-color 250ms;
285 transition: border-color 250ms;
287 .oo-ui-toggleSwitchWidget-grip {
288 top: 0.3125em;
289 min-width: 16px;
290 width: 1.25em;
291 min-height: 16px;
292 height: 1.25em;
293 border-radius: 1.25em;
294 -webkit-transition: background-color 250ms, left 100ms, margin-left 100ms;
295 -moz-transition: background-color 250ms, left 100ms, margin-left 100ms;
296 transition: background-color 250ms, left 100ms, margin-left 100ms;
298 .oo-ui-toggleSwitchWidget-glow {
299 display: none;
301 .oo-ui-toggleSwitchWidget.oo-ui-toggleWidget-off .oo-ui-toggleSwitchWidget-grip {
302 left: 0.4em;
303 margin-left: 0;
305 .oo-ui-toggleSwitchWidget.oo-ui-toggleWidget-on .oo-ui-toggleSwitchWidget-grip {
306 left: 1.9em;
307 margin-left: -2px;
309 .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled .oo-ui-toggleSwitchWidget-grip {
310 background-color: #f8f9fa;
311 border: 1px solid #72777d;
313 .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:hover {
314 background-color: #fff;
315 border-color: #447ff5;
317 .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:hover .oo-ui-toggleSwitchWidget-grip {
318 background-color: #fff;
319 border-color: #447ff5;
321 .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:active,
322 .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:active:hover,
323 .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:active:focus {
324 background-color: #2a4b8d;
325 border-color: #2a4b8d;
326 box-shadow: inset 0 0 0 1px #2a4b8d;
328 .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:active .oo-ui-toggleSwitchWidget-grip,
329 .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:active:hover .oo-ui-toggleSwitchWidget-grip,
330 .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:active:focus .oo-ui-toggleSwitchWidget-grip {
331 background-color: #fff;
332 border-color: #fff;
333 box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
335 .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:focus {
336 border-color: #36c;
337 box-shadow: inset 0 0 0 1px #36c;
338 outline: 0;
340 .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:focus .oo-ui-toggleSwitchWidget-grip {
341 border-color: #36c;
343 .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled.oo-ui-toggleWidget-on {
344 background-color: #36c;
345 border-color: #36c;
347 .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled.oo-ui-toggleWidget-on .oo-ui-toggleSwitchWidget-grip {
348 background-color: #fff;
349 border-color: #fff;
350 box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
352 .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled.oo-ui-toggleWidget-on:hover {
353 background-color: #447ff5;
354 border-color: #447ff5;
356 .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled.oo-ui-toggleWidget-on:active,
357 .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled.oo-ui-toggleWidget-on:active:hover {
358 background-color: #2a4b8d;
359 border-color: #2a4b8d;
361 .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled.oo-ui-toggleWidget-on:focus {
362 border-color: #36c;
364 .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled.oo-ui-toggleWidget-on:focus:before {
365 border-color: #fff;
367 .oo-ui-toggleSwitchWidget.oo-ui-widget-disabled {
368 background-color: #c8ccd1;
369 border-color: #c8ccd1;
370 outline: 0;
372 .oo-ui-toggleSwitchWidget.oo-ui-widget-disabled.oo-ui-toggleWidget-off .oo-ui-toggleSwitchWidget-grip {
373 border: 1px solid #fff;
374 box-shadow: inset 0 0 0 1px #fff;
376 .oo-ui-toggleSwitchWidget.oo-ui-widget-disabled.oo-ui-toggleWidget-on .oo-ui-toggleSwitchWidget-grip {
377 background-color: #fff;
379 .oo-ui-selectFileWidget {
380 display: inline-block;
381 vertical-align: middle;
382 width: 100%;
383 max-width: 50em;
384 margin-right: 0.5em;
386 .oo-ui-selectFileWidget-selectButton {
387 display: table-cell;
389 .oo-ui-selectFileWidget-selectButton > .oo-ui-buttonElement-button {
390 position: relative;
391 overflow: hidden;
393 .oo-ui-selectFileWidget-selectButton > .oo-ui-buttonElement-button > [type='file'] {
394 position: absolute;
395 top: 0;
396 bottom: 0;
397 left: 0;
398 right: 0;
399 width: 100%;
400 height: 100%;
401 opacity: 0;
402 z-index: 1;
403 cursor: pointer;
404 padding-top: 100px;
406 .oo-ui-selectFileWidget-selectButton.oo-ui-widget-disabled > .oo-ui-buttonElement-button > [type='file'] {
407 display: none;
409 .oo-ui-selectFileWidget-info {
410 width: 100%;
411 display: table-cell;
412 vertical-align: middle;
413 position: relative;
414 overflow: hidden;
415 -webkit-box-sizing: border-box;
416 -moz-box-sizing: border-box;
417 box-sizing: border-box;
419 .oo-ui-selectFileWidget-info > .oo-ui-indicatorElement-indicator,
420 .oo-ui-selectFileWidget-info > .oo-ui-iconElement-icon {
421 position: absolute;
423 .oo-ui-widget-disabled .oo-ui-selectFileWidget-info {
424 cursor: default;
425 -webkit-touch-callout: none;
426 -webkit-user-select: none;
427 -moz-user-select: none;
428 -ms-user-select: none;
429 user-select: none;
431 .oo-ui-selectFileWidget-label {
432 position: absolute;
433 top: 0;
434 bottom: 0;
435 left: 0;
436 right: 0;
437 text-overflow: ellipsis;
439 .oo-ui-selectFileWidget-clearButton {
440 position: absolute;
441 z-index: 2;
443 .oo-ui-selectFileWidget-dropTarget {
444 position: relative;
445 cursor: default;
446 height: 8.815em;
448 .oo-ui-selectFileWidget-dropTarget .oo-ui-selectFileWidget-dropLabel,
449 .oo-ui-selectFileWidget-dropTarget .oo-ui-selectFileWidget-selectButton,
450 .oo-ui-selectFileWidget-dropTarget .oo-ui-iconElement-icon {
451 display: none;
453 .oo-ui-selectFileWidget-dropTarget .oo-ui-selectFileWidget-thumbnail {
454 width: 7.815em;
455 position: absolute;
456 top: 0.5em;
457 bottom: 0.5em;
458 left: 0.5em;
459 background-position: center center;
460 background-repeat: no-repeat;
461 background-size: contain;
463 .oo-ui-selectFileWidget-dropTarget .oo-ui-selectFileWidget-thumbnail.oo-ui-pendingElement-pending {
464 background-repeat: repeat;
465 background-size: auto;
467 .oo-ui-selectFileWidget-dropTarget .oo-ui-selectFileWidget-thumbnail > .oo-ui-selectFileWidget-noThumbnail-icon {
468 opacity: 0.4;
469 height: 7.815em;
470 width: 7.815em;
472 .oo-ui-selectFileWidget-dropTarget .oo-ui-selectFileWidget-info {
473 display: block;
474 height: 100%;
475 width: auto;
476 margin-left: 8.815em;
477 border: 0;
479 .oo-ui-selectFileWidget-dropTarget .oo-ui-selectFileWidget-label {
480 display: block;
481 position: relative;
482 top: inherit;
484 .oo-ui-selectFileWidget-dropTarget .oo-ui-selectFileWidget-fileName {
485 display: block;
486 padding-top: 0.5em;
487 padding-right: 2.375em;
489 .oo-ui-selectFileWidget-dropTarget .oo-ui-selectFileWidget-clearButton {
490 right: 0.5em;
492 .oo-ui-selectFileWidget-empty.oo-ui-selectFileWidget-dropTarget .oo-ui-selectFileWidget-thumbnail,
493 .oo-ui-selectFileWidget-empty.oo-ui-selectFileWidget-dropTarget .oo-ui-selectFileWidget-info {
494 display: none;
496 .oo-ui-selectFileWidget-empty.oo-ui-selectFileWidget-dropTarget .oo-ui-selectFileWidget-selectButton {
497 display: block;
498 margin: 2.2em 1em 1em;
500 .oo-ui-selectFileWidget-empty.oo-ui-selectFileWidget-dropTarget,
501 .oo-ui-selectFileWidget-notsupported.oo-ui-selectFileWidget-dropTarget {
502 text-align: center;
504 .oo-ui-selectFileWidget-empty.oo-ui-selectFileWidget-dropTarget .oo-ui-selectFileWidget-info,
505 .oo-ui-selectFileWidget-notsupported.oo-ui-selectFileWidget-dropTarget .oo-ui-selectFileWidget-info {
506 margin: 0;
508 .oo-ui-selectFileWidget-empty .oo-ui-selectFileWidget-clearButton,
509 .oo-ui-selectFileWidget-notsupported .oo-ui-selectFileWidget-clearButton {
510 display: none;
512 .oo-ui-selectFileWidget-empty.oo-ui-widget-enabled .oo-ui-selectFileWidget-label {
513 cursor: default;
515 .oo-ui-selectFileWidget-empty.oo-ui-widget-enabled .oo-ui-selectFileWidget-dropLabel {
516 display: block;
518 .oo-ui-selectFileWidget-empty.oo-ui-widget-disabled.oo-ui-selectFileWidget-dropTarget,
519 .oo-ui-selectFileWidget-notsupported.oo-ui-selectFileWidget-dropTarget {
520 -webkit-touch-callout: none;
521 -webkit-user-select: none;
522 -moz-user-select: none;
523 -ms-user-select: none;
524 user-select: none;
526 .oo-ui-selectFileWidget-empty.oo-ui-widget-disabled.oo-ui-selectFileWidget-dropTarget,
527 .oo-ui-selectFileWidget-notsupported.oo-ui-selectFileWidget-dropTarget,
528 .oo-ui-selectFileWidget-empty.oo-ui-widget-disabled.oo-ui-selectFileWidget-dropTarget .oo-ui-buttonElement-button,
529 .oo-ui-selectFileWidget-notsupported.oo-ui-selectFileWidget-dropTarget .oo-ui-buttonElement-button {
530 cursor: no-drop;
532 .oo-ui-selectFileWidget-notsupported.oo-ui-selectFileWidget-dropTarget {
533 height: auto;
535 .oo-ui-selectFileWidget-notsupported.oo-ui-selectFileWidget-dropTarget .oo-ui-selectFileWidget-label {
536 padding: 1em;
538 .oo-ui-selectFileWidget:last-child {
539 margin-right: 0;
541 .oo-ui-selectFileWidget-selectButton > .oo-ui-buttonElement-button {
542 border-radius: 0 2px 2px 0;
544 .oo-ui-selectFileWidget-info {
545 height: 2.4em;
546 background-color: #fff;
547 border: 1px solid #a2a9b1;
548 border-radius: 2px 0 0 2px;
549 border-width: 1px 0 1px 1px;
551 .oo-ui-selectFileWidget-info > .oo-ui-iconElement-icon {
552 left: 0;
553 top: 0;
554 height: 2.3em;
555 margin-left: 0.5em;
557 .oo-ui-selectFileWidget-info > .oo-ui-indicatorElement-indicator {
558 top: 0;
559 right: 0;
560 height: 2.3em;
561 margin-right: 0.775em;
563 .oo-ui-selectFileWidget-label {
564 -webkit-box-sizing: border-box;
565 -moz-box-sizing: border-box;
566 box-sizing: border-box;
567 display: block;
568 right: 2.375em;
569 margin: 0;
570 padding-left: 0.5em;
571 line-height: 2.3;
572 white-space: nowrap;
574 .oo-ui-selectFileWidget-fileName {
575 display: block;
576 overflow: hidden;
577 text-overflow: ellipsis;
579 .oo-ui-selectFileWidget-clearButton {
580 top: 0;
581 right: 0;
582 min-width: 24px;
583 width: 1.875em;
584 margin-right: 0;
586 .oo-ui-selectFileWidget-clearButton .oo-ui-buttonElement-button > .oo-ui-iconElement-icon {
587 height: 2.3em;
589 .oo-ui-selectFileWidget-empty .oo-ui-selectFileWidget-label {
590 color: #72777d;
592 .oo-ui-selectFileWidget.oo-ui-iconElement .oo-ui-selectFileWidget-label {
593 left: 2.875em;
595 .oo-ui-selectFileWidget.oo-ui-indicatorElement .oo-ui-selectFileWidget-label {
596 right: 4.4625em;
597 padding-left: 0;
599 .oo-ui-selectFileWidget.oo-ui-indicatorElement .oo-ui-selectFileWidget-clearButton {
600 right: 2.0875em;
602 .oo-ui-selectFileWidget-empty.oo-ui-indicatorElement .oo-ui-selectFileWidget-label,
603 .oo-ui-selectFileWidget-notsupported.oo-ui-indicatorElement .oo-ui-selectFileWidget-label {
604 right: 2em;
606 .oo-ui-selectFileWidget-supported.oo-ui-widget-enabled.oo-ui-selectFileWidget-canDrop.oo-ui-selectFileWidget-dropTarget {
607 background-color: #eaf3ff;
609 .oo-ui-selectFileWidget-dropTarget {
610 background-color: #fff;
611 border: 1px solid #a2a9b1;
612 vertical-align: middle;
613 overflow: hidden;
614 border-radius: 2px;
616 .oo-ui-selectFileWidget-dropTarget .oo-ui-selectFileWidget-selectButton > .oo-ui-buttonElement-button {
617 border-radius: 2px;
619 .oo-ui-selectFileWidget-dropTarget .oo-ui-selectFileWidget-label {
620 line-height: 1.4;
621 overflow: inherit;
622 white-space: normal;
624 .oo-ui-selectFileWidget-empty.oo-ui-widget-enabled.oo-ui-selectFileWidget-dropTarget {
625 background-color: #eee;
626 border-style: dashed;
628 .oo-ui-selectFileWidget.oo-ui-widget-disabled.oo-ui-selectFileWidget-dropTarget,
629 .oo-ui-selectFileWidget-empty.oo-ui-widget-disabled.oo-ui-selectFileWidget-dropTarget,
630 .oo-ui-selectFileWidget-notsupported.oo-ui-selectFileWidget-dropTarget {
631 background-color: #eaecf0;
632 border-color: #c8ccd1;
634 .oo-ui-selectFileWidget.oo-ui-widget-disabled .oo-ui-selectFileWidget-info,
635 .oo-ui-selectFileWidget-empty.oo-ui-widget-disabled .oo-ui-selectFileWidget-info,
636 .oo-ui-selectFileWidget-notsupported .oo-ui-selectFileWidget-info {
637 background-color: #eaecf0;
638 color: #72777d;
639 border-color: #c8ccd1;
640 text-shadow: 0 1px 1px #fff;
642 .oo-ui-selectFileWidget.oo-ui-widget-disabled .oo-ui-selectFileWidget-info > .oo-ui-iconElement-icon,
643 .oo-ui-selectFileWidget-empty.oo-ui-widget-disabled .oo-ui-selectFileWidget-info > .oo-ui-iconElement-icon,
644 .oo-ui-selectFileWidget-notsupported .oo-ui-selectFileWidget-info > .oo-ui-iconElement-icon,
645 .oo-ui-selectFileWidget.oo-ui-widget-disabled .oo-ui-selectFileWidget-info > .oo-ui-indicatorElement-indicator,
646 .oo-ui-selectFileWidget-empty.oo-ui-widget-disabled .oo-ui-selectFileWidget-info > .oo-ui-indicatorElement-indicator,
647 .oo-ui-selectFileWidget-notsupported .oo-ui-selectFileWidget-info > .oo-ui-indicatorElement-indicator {
648 opacity: 0.51;
650 .oo-ui-widget-disabled .oo-ui-selectFileWidget-dropLabel {
651 display: none;
653 .oo-ui-outlineOptionWidget {
654 -webkit-touch-callout: none;
655 -webkit-user-select: none;
656 -moz-user-select: none;
657 -ms-user-select: none;
658 user-select: none;
659 font-size: 1.1em;
660 padding: 0.75em;
661 -webkit-transition: background-color 100ms, color 100ms;
662 -moz-transition: background-color 100ms, color 100ms;
663 transition: background-color 100ms, color 100ms;
665 .oo-ui-outlineOptionWidget.oo-ui-optionWidget-highlighted {
666 background-color: #eaecf0;
667 color: #000;
669 .oo-ui-outlineOptionWidget.oo-ui-optionWidget-selected {
670 background-color: #eaf3ff;
671 color: #36c;
673 .oo-ui-outlineOptionWidget.oo-ui-optionWidget-pressed {
674 background-color: rgba(41, 98, 204, 0.1);
675 color: #36c;
677 .oo-ui-outlineOptionWidget .oo-ui-iconElement-icon {
678 font-size: 90.90909%;
680 .oo-ui-outlineOptionWidget.oo-ui-indicatorElement .oo-ui-labelElement-label {
681 padding-right: 1.5em;
683 .oo-ui-outlineOptionWidget.oo-ui-indicatorElement .oo-ui-indicatorElement-indicator {
684 opacity: 0.5;
686 .oo-ui-outlineOptionWidget-level-0 {
687 padding-left: 3.5em;
689 .oo-ui-outlineOptionWidget-level-0 .oo-ui-iconElement-icon {
690 left: 1em;
692 .oo-ui-outlineOptionWidget-level-1 {
693 padding-left: 5em;
695 .oo-ui-outlineOptionWidget-level-1 .oo-ui-iconElement-icon {
696 left: 2.5em;
698 .oo-ui-outlineOptionWidget-level-2 {
699 padding-left: 6.5em;
701 .oo-ui-outlineOptionWidget-level-2 .oo-ui-iconElement-icon {
702 left: 4em;
704 .oo-ui-outlineOptionWidget.oo-ui-flaggedElement-important {
705 font-weight: bold;
707 .oo-ui-outlineOptionWidget.oo-ui-flaggedElement-empty .oo-ui-iconElement-icon {
708 opacity: 0.5;
710 .oo-ui-outlineOptionWidget.oo-ui-flaggedElement-empty .oo-ui-labelElement-label {
711 color: #777;
713 .oo-ui-outlineControlsWidget {
714 height: 3em;
715 background-color: #fff;
717 .oo-ui-outlineControlsWidget-items,
718 .oo-ui-outlineControlsWidget-movers {
719 float: left;
720 -webkit-box-sizing: border-box;
721 -moz-box-sizing: border-box;
722 box-sizing: border-box;
724 .oo-ui-outlineControlsWidget > .oo-ui-iconElement-icon {
725 float: left;
726 background-position: right center;
728 .oo-ui-outlineControlsWidget-items {
729 float: left;
731 .oo-ui-outlineControlsWidget-items .oo-ui-buttonWidget {
732 float: left;
734 .oo-ui-outlineControlsWidget-movers {
735 float: right;
737 .oo-ui-outlineControlsWidget-movers .oo-ui-buttonWidget {
738 float: right;
740 .oo-ui-outlineControlsWidget-items,
741 .oo-ui-outlineControlsWidget-movers {
742 height: 2em;
743 margin: 0.5em 0.5em 0.5em 0;
744 padding: 0;
746 .oo-ui-outlineControlsWidget > .oo-ui-iconElement-icon {
747 width: 1.5em;
748 height: 2em;
749 margin: 0.5em 0 0.5em 0.5em;
750 opacity: 0.2;
752 .oo-ui-tabSelectWidget {
753 text-align: left;
754 white-space: nowrap;
755 overflow: hidden;
756 background-color: #ddd;
758 .oo-ui-tabOptionWidget {
759 display: inline-block;
760 vertical-align: bottom;
761 padding: 0.35em 1em;
762 margin: 0.5em 0 0 0.75em;
763 border: 1px solid transparent;
764 border-bottom: 0;
765 border-top-left-radius: 2px;
766 border-top-right-radius: 2px;
767 color: #222;
768 font-weight: bold;
770 .oo-ui-tabOptionWidget.oo-ui-widget-enabled:hover {
771 background-color: rgba(255, 255, 255, 0.3);
773 .oo-ui-tabOptionWidget.oo-ui-widget-enabled:active {
774 background-color: rgba(255, 255, 255, 0.8);
776 .oo-ui-tabOptionWidget.oo-ui-indicatorElement .oo-ui-labelElement-label {
777 padding-right: 1.5em;
779 .oo-ui-tabOptionWidget.oo-ui-indicatorElement .oo-ui-indicatorElement-indicator {
780 opacity: 0.5;
782 .oo-ui-selectWidget-pressed .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected,
783 .oo-ui-selectWidget-depressed .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected,
784 .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected:hover {
785 background-color: #fff;
786 color: #333;
788 .oo-ui-capsuleMultiselectWidget {
789 display: inline-block;
790 position: relative;
791 width: 100%;
792 max-width: 50em;
794 .oo-ui-capsuleMultiselectWidget-handle {
795 width: 100%;
796 display: block;
797 position: relative;
799 .oo-ui-capsuleMultiselectWidget-content {
800 position: relative;
802 .oo-ui-capsuleMultiselectWidget.oo-ui-widget-disabled .oo-ui-capsuleMultiselectWidget-content > input {
803 display: none;
805 .oo-ui-capsuleMultiselectWidget-group {
806 display: inline;
808 .oo-ui-capsuleMultiselectWidget-handle {
809 min-height: 2.4em;
810 margin-right: 0.5em;
811 padding: 0.15em 0.25em;
812 border: 1px solid #a2a9b1;
813 border-radius: 2px;
814 -webkit-box-sizing: border-box;
815 -moz-box-sizing: border-box;
816 box-sizing: border-box;
818 .oo-ui-capsuleMultiselectWidget-handle:last-child {
819 margin-right: 0;
821 .oo-ui-capsuleMultiselectWidget-handle > .oo-ui-indicatorElement-indicator,
822 .oo-ui-capsuleMultiselectWidget-handle > .oo-ui-iconElement-icon {
823 position: absolute;
825 .oo-ui-capsuleMultiselectWidget-handle > .oo-ui-capsuleMultiselectWidget-content :-moz-placeholder {
826 color: #72777d;
827 opacity: 1;
829 .oo-ui-capsuleMultiselectWidget-handle > .oo-ui-capsuleMultiselectWidget-content ::-moz-placeholder {
830 color: #72777d;
831 opacity: 1;
833 .oo-ui-capsuleMultiselectWidget-handle > .oo-ui-capsuleMultiselectWidget-content :-ms-input-placeholder {
834 color: #72777d;
836 .oo-ui-capsuleMultiselectWidget-handle > .oo-ui-capsuleMultiselectWidget-content ::-webkit-input-placeholder {
837 color: #72777d;
839 .oo-ui-capsuleMultiselectWidget-handle > .oo-ui-capsuleMultiselectWidget-content :placeholder-shown {
840 color: #72777d;
842 .oo-ui-capsuleMultiselectWidget-handle > .oo-ui-capsuleMultiselectWidget-content > input {
843 border: 0;
844 line-height: 1.675;
845 margin: 0 0 0 0.2em;
846 padding: 0;
847 font-size: inherit;
848 font-family: inherit;
849 background-color: transparent;
850 color: #000;
851 vertical-align: middle;
853 .oo-ui-capsuleMultiselectWidget-handle > .oo-ui-capsuleMultiselectWidget-content > input:focus {
854 outline: 0;
856 .oo-ui-capsuleMultiselectWidget.oo-ui-indicatorElement .oo-ui-capsuleMultiselectWidget-handle {
857 padding-right: 2.4875em;
859 .oo-ui-capsuleMultiselectWidget.oo-ui-indicatorElement .oo-ui-capsuleMultiselectWidget-handle > .oo-ui-indicatorElement-indicator {
860 right: 0;
861 top: 0;
862 margin: 0.775em;
864 .oo-ui-capsuleMultiselectWidget.oo-ui-iconElement .oo-ui-capsuleMultiselectWidget-handle {
865 padding-left: 2.475em;
867 .oo-ui-capsuleMultiselectWidget.oo-ui-iconElement .oo-ui-capsuleMultiselectWidget-handle > .oo-ui-iconElement-icon {
868 left: 0;
869 top: 0;
870 margin: 0.3em;
872 .oo-ui-capsuleMultiselectWidget .oo-ui-popupWidget {
873 width: 100%;
874 margin-top: -1px;
876 .oo-ui-capsuleMultiselectWidget .oo-ui-popupWidget-popup {
877 min-width: 100%;
878 -webkit-box-sizing: border-box;
879 -moz-box-sizing: border-box;
880 box-sizing: border-box;
881 border-width: 0 1px;
882 border-radius: 0 0 2px 2px;
884 .oo-ui-capsuleMultiselectWidget.oo-ui-widget-enabled .oo-ui-capsuleMultiselectWidget-handle {
885 background-color: #fff;
886 cursor: text;
887 -webkit-transition: border-color 200ms cubic-bezier(0.39, 0.575, 0.565, 1), box-shadow 200ms cubic-bezier(0.39, 0.575, 0.565, 1);
888 -moz-transition: border-color 200ms cubic-bezier(0.39, 0.575, 0.565, 1), box-shadow 200ms cubic-bezier(0.39, 0.575, 0.565, 1);
889 transition: border-color 200ms cubic-bezier(0.39, 0.575, 0.565, 1), box-shadow 200ms cubic-bezier(0.39, 0.575, 0.565, 1);
891 .oo-ui-capsuleMultiselectWidget.oo-ui-widget-enabled:hover .oo-ui-capsuleMultiselectWidget-handle {
892 border-color: #72777d;
894 .oo-ui-capsuleMultiselectWidget.oo-ui-widget-enabled.oo-ui-capsuleMultiselectWidget-open .oo-ui-capsuleMultiselectWidget-handle {
895 border-color: #36c;
896 outline: 0;
897 box-shadow: inset 0 0 0 1px #36c;
899 .oo-ui-capsuleMultiselectWidget.oo-ui-widget-disabled .oo-ui-capsuleMultiselectWidget-handle {
900 color: #72777d;
901 text-shadow: 0 1px 1px #fff;
902 border-color: #c8ccd1;
903 background-color: #eaecf0;
905 .oo-ui-capsuleMultiselectWidget.oo-ui-widget-disabled .oo-ui-capsuleMultiselectWidget-handle > .oo-ui-iconElement-icon {
906 opacity: 0.51;
908 .oo-ui-capsuleMultiselectWidget.oo-ui-widget-disabled .oo-ui-capsuleMultiselectWidget-handle > .oo-ui-indicatorElement-indicator {
909 opacity: 0.15;
911 .oo-ui-capsuleItemWidget {
912 position: relative;
913 display: inline-block;
914 cursor: default;
915 white-space: nowrap;
916 width: auto;
917 max-width: 100%;
918 -webkit-box-sizing: border-box;
919 -moz-box-sizing: border-box;
920 box-sizing: border-box;
921 vertical-align: middle;
922 height: 1.7em;
923 line-height: 1.7;
924 background-color: #eee;
925 color: #222;
926 margin: 0.1em;
927 border: 1px solid #a2a9b1;
928 border-radius: 2px;
929 padding: 0 0.4em;
931 .oo-ui-capsuleItemWidget.oo-ui-labelElement .oo-ui-labelElement-label {
932 display: inline-block;
933 text-overflow: ellipsis;
934 overflow: hidden;
935 cursor: text;
937 .oo-ui-capsuleItemWidget:focus {
938 outline: 0;
939 border-color: #36c;
940 box-shadow: inset 0 0 0 1px #36c;
942 .oo-ui-capsuleItemWidget.oo-ui-widget-disabled {
943 background-color: #eaecf0;
944 color: #72777d;
945 border-color: #c8ccd1;
946 text-shadow: 0 1px 1px #fff;
948 .oo-ui-capsuleItemWidget > .oo-ui-buttonElement {
949 display: none;
951 .oo-ui-capsuleItemWidget.oo-ui-widget-enabled {
952 padding-right: 1.5375em;
954 .oo-ui-capsuleItemWidget.oo-ui-widget-enabled > .oo-ui-buttonElement {
955 display: block;
956 position: absolute;
957 top: 0;
958 right: 0;
959 bottom: 0;
961 .oo-ui-capsuleItemWidget.oo-ui-widget-enabled .oo-ui-buttonElement-button {
962 display: block;
963 width: 1.5375em;
964 height: 100%;
966 .oo-ui-capsuleItemWidget.oo-ui-widget-enabled .oo-ui-buttonElement-button .oo-ui-indicator-clear {
967 position: absolute;
968 top: 0;
969 right: 0.3em;
970 bottom: 0;
971 height: auto;
973 .oo-ui-searchWidget-query {
974 position: absolute;
975 top: 0;
976 left: 0;
977 right: 0;
979 .oo-ui-searchWidget-query .oo-ui-textInputWidget {
980 width: 100%;
982 .oo-ui-searchWidget-results {
983 position: absolute;
984 bottom: 0;
985 left: 0;
986 right: 0;
987 overflow-x: hidden;
988 overflow-y: auto;
990 .oo-ui-searchWidget-query {
991 height: 4em;
992 padding: 0 1em;
993 border-bottom: 1px solid #a2a9b1;
995 .oo-ui-searchWidget-query .oo-ui-textInputWidget {
996 margin: 0.75em 0;
998 .oo-ui-searchWidget-results {
999 top: 4em;
1000 padding: 1em;
1001 line-height: 0;
1003 .oo-ui-numberInputWidget {
1004 display: inline-block;
1005 position: relative;
1006 max-width: 50em;
1008 .oo-ui-numberInputWidget-buttoned .oo-ui-buttonWidget,
1009 .oo-ui-numberInputWidget-buttoned .oo-ui-textInputWidget {
1010 display: table-cell;
1012 .oo-ui-numberInputWidget-buttoned .oo-ui-buttonElement-button {
1013 -webkit-box-sizing: border-box;
1014 -moz-box-sizing: border-box;
1015 box-sizing: border-box;
1017 .oo-ui-numberInputWidget-field {
1018 display: table;
1019 table-layout: fixed;
1020 width: 100%;
1022 .oo-ui-numberInputWidget-buttoned .oo-ui-buttonWidget {
1023 width: 2.5em;
1025 .oo-ui-numberInputWidget-buttoned .oo-ui-buttonElement-button {
1026 display: block;
1027 min-height: 2.5em;
1028 padding-left: 0;
1029 padding-right: 0;
1031 .oo-ui-numberInputWidget-buttoned .oo-ui-textInputWidget input {
1032 border-radius: 0;
1034 .oo-ui-numberInputWidget-minusButton.oo-ui-buttonElement-framed > .oo-ui-buttonElement-button {
1035 border-top-right-radius: 0;
1036 border-bottom-right-radius: 0;
1037 border-right-width: 0;
1039 .oo-ui-numberInputWidget-plusButton.oo-ui-buttonElement-framed > .oo-ui-buttonElement-button {
1040 border-top-left-radius: 0;
1041 border-bottom-left-radius: 0;
1042 border-left-width: 0;