3 * https://www.mediawiki.org/wiki/OOUI
5 * Copyright 2011–2018 OOUI Team and other contributors.
6 * Released under the MIT license
7 * http://oojs.mit-license.org
9 * Date: 2018-03-23T23:42:37Z
12 * WikimediaUI Base v0.10.0
13 * Wikimedia Foundation user interface base variables
16 -webkit-box-sizing: border-box
;
17 -moz-box-sizing: border-box
;
18 box-sizing: border-box
;
20 .oo-ui-tool .oo-ui-tool-link {
22 -webkit-box-sizing: border-box
;
23 -moz-box-sizing: border-box
;
24 box-sizing: border-box
;
28 .oo-ui-toolbar-narrow .oo-ui-tool .oo-ui-tool-link {
29 padding-left: 2.85714286em;
31 .oo-ui-tool-with-label .oo-ui-tool-link {
32 padding: 1em 0.85714286em 0.92857143em 2.64285714em;
34 .oo-ui-tool.oo-ui-iconElement .oo-ui-iconElement-icon {
38 .oo-ui-toolbar-narrow .oo-ui-tool.oo-ui-iconElement .oo-ui-iconElement-icon {
41 .oo-ui-tool .oo-ui-tool-title {
42 line-height: 1.07142857em;
44 .oo-ui-tool.oo-ui-widget-enabled {
45 -webkit-transition: background-color
100ms;
46 -moz-transition: background-color
100ms;
47 transition: background-color
100ms;
49 .oo-ui-tool.oo-ui-widget-enabled .oo-ui-tool-link:focus {
50 outline: 1px solid
#36c;
51 box-shadow: inset
0 0 0 1px #36c;
54 .oo-ui-tool.oo-ui-widget-enabled .oo-ui-iconElement-icon {
56 -webkit-transition: opacity
100ms;
57 -moz-transition: opacity
100ms;
58 transition: opacity
100ms;
59 -webkit-transform: translateZ
(0);
60 transform: translateZ
(0);
62 .oo-ui-tool.oo-ui-widget-enabled .oo-ui-tool-title {
63 -webkit-transition: color
100ms;
64 -moz-transition: color
100ms;
65 transition: color
100ms;
67 .oo-ui-tool.oo-ui-widget-enabled:hover .oo-ui-iconElement-icon {
70 .oo-ui-tool.oo-ui-widget-enabled[class*='oo-ui-flaggedElement'] .oo-ui-iconElement-icon {
73 .oo-ui-tool.oo-ui-widget-disabled .oo-ui-iconElement-icon {
76 .oo-ui-popupTool
.oo-ui-popupWidget-popup
,
77 .oo-ui-popupTool .oo-ui-popupWidget-anchor {
80 .oo-ui-toolGroupTool > .oo-ui-toolGroup {
84 display: inline-block
;
85 vertical-align: middle
;
86 -webkit-box-sizing: border-box
;
87 -moz-box-sizing: border-box
;
88 box-sizing: border-box
;
89 border-right: 1px solid
#c8ccd1;
91 .oo-ui-toolGroup-empty {
94 .oo-ui-toolGroup .oo-ui-tool-link {
95 text-decoration: none
;
98 .oo-ui-toolGroup
.oo-ui-widget-disabled
.oo-ui-tool-link
,
99 .oo-ui-toolGroup .oo-ui-widget-disabled > .oo-ui-tool-link {
103 .oo-ui-toolbar-actions .oo-ui-toolGroup {
105 border-left: 1px solid
#c8ccd1;
107 .oo-ui-toolGroup
.oo-ui-widget-disabled
.oo-ui-indicatorElement-indicator
,
108 .oo-ui-toolGroup.oo-ui-widget-disabled .oo-ui-iconElement-icon {
109 opacity: 0.34 !important
;
111 .oo-ui-barToolGroup > .oo-ui-toolGroup-tools > .oo-ui-tool {
112 display: inline-block
;
116 .oo-ui-barToolGroup > .oo-ui-toolGroup-tools > .oo-ui-tool > .oo-ui-tool-link {
119 .oo-ui-barToolGroup > .oo-ui-toolGroup-tools > .oo-ui-tool > .oo-ui-tool-link .oo-ui-tool-accel {
122 .oo-ui-barToolGroup > .oo-ui-toolGroup-tools > .oo-ui-tool.oo-ui-iconElement > .oo-ui-tool-link .oo-ui-tool-title {
125 .oo-ui-barToolGroup > .oo-ui-toolGroup-tools > .oo-ui-tool.oo-ui-iconElement.oo-ui-tool-with-label > .oo-ui-tool-link .oo-ui-tool-title {
126 display: inline-block
;
128 .oo-ui-barToolGroup > .oo-ui-toolGroup-tools > .oo-ui-tool.iconElement > .oo-ui-tool-link > .oo-ui-iconElement-icon {
131 .oo-ui-barToolGroup > .oo-ui-toolGroup-tools > .oo-ui-tool + .oo-ui-tool {
134 .oo-ui-barToolGroup.oo-ui-widget-enabled > .oo-ui-toolGroup-tools > .oo-ui-tool:not( .oo-ui-toolGroupTool ).oo-ui-widget-enabled:hover {
135 background-color: #eaecf0;
137 .oo-ui-barToolGroup.oo-ui-widget-enabled > .oo-ui-toolGroup-tools > .oo-ui-tool:not( .oo-ui-toolGroupTool ).oo-ui-widget-enabled > .oo-ui-tool-link .oo-ui-tool-title {
139 -webkit-transition: color
100ms;
140 -moz-transition: color
100ms;
141 transition: color
100ms;
143 .oo-ui-barToolGroup.oo-ui-widget-enabled > .oo-ui-toolGroup-tools > .oo-ui-tool:not( .oo-ui-toolGroupTool ).oo-ui-tool-active {
144 background-color: #eaf3ff;
146 .oo-ui-barToolGroup.oo-ui-widget-enabled > .oo-ui-toolGroup-tools > .oo-ui-tool:not( .oo-ui-toolGroupTool ).oo-ui-tool-active:hover {
147 background-color: rgba
(41, 98, 204, 0.1);
149 .oo-ui-barToolGroup.oo-ui-widget-enabled > .oo-ui-toolGroup-tools > .oo-ui-tool:not( .oo-ui-toolGroupTool ).oo-ui-tool-active > .oo-ui-tool-link .oo-ui-tool-title {
152 .oo-ui-barToolGroup
.oo-ui-widget-enabled
.oo-ui-tool
.oo-ui-widget-disabled
> .oo-ui-tool-link
.oo-ui-tool-title
,
153 .oo-ui-barToolGroup.oo-ui-widget-disabled .oo-ui-tool > .oo-ui-tool-link .oo-ui-tool-title {
156 .oo-ui-popupToolGroup {
160 .oo-ui-popupToolGroup-handle {
164 .oo-ui-popupToolGroup-handle .oo-ui-labelElement-label:not( :empty ) {
165 display: inline-block
;
167 .oo-ui-popupToolGroup.oo-ui-widget-disabled .oo-ui-popupToolGroup-handle {
171 .oo-ui-popupToolGroup .oo-ui-toolGroup-tools {
176 .oo-ui-popupToolGroup-active.oo-ui-widget-enabled > .oo-ui-toolGroup-tools {
179 .oo-ui-popupToolGroup-left > .oo-ui-toolGroup-tools {
182 .oo-ui-popupToolGroup-right > .oo-ui-toolGroup-tools {
185 .oo-ui-popupToolGroup .oo-ui-tool-link {
188 vertical-align: middle
;
191 .oo-ui-popupToolGroup
.oo-ui-tool-link
.oo-ui-tool-accel
,
192 .oo-ui-popupToolGroup .oo-ui-tool-link .oo-ui-tool-title {
194 vertical-align: middle
;
196 .oo-ui-popupToolGroup .oo-ui-tool-link .oo-ui-tool-accel {
199 .oo-ui-toolbar-narrow .oo-ui-popupToolGroup {
200 min-width: 2.85714286em;
202 .oo-ui-popupToolGroup.oo-ui-indicatorElement:not( .oo-ui-labelElement ):not( .oo-ui-iconElement ) {
203 min-width: 1.85714286em;
205 .oo-ui-popupToolGroup-handle {
206 -webkit-box-sizing: border-box
;
207 -moz-box-sizing: border-box
;
208 box-sizing: border-box
;
210 .oo-ui-popupToolGroup-handle .oo-ui-iconElement-icon {
213 .oo-ui-toolbar-narrow .oo-ui-popupToolGroup-handle .oo-ui-iconElement-icon {
216 .oo-ui-popupToolGroup-handle .oo-ui-indicatorElement-indicator {
217 background-position: center
52%;
220 .oo-ui-toolbar-narrow .oo-ui-popupToolGroup-handle .oo-ui-indicatorElement-indicator {
223 .oo-ui-popupToolGroup
.oo-ui-iconElement
.oo-ui-popupToolGroup-handle
,
224 .oo-ui-popupToolGroup.oo-ui-indicatorElement .oo-ui-popupToolGroup-handle {
227 .oo-ui-popupToolGroup.oo-ui-iconElement.oo-ui-indicatorElement .oo-ui-popupToolGroup-handle {
230 .oo-ui-toolbar-narrow .oo-ui-popupToolGroup.oo-ui-iconElement.oo-ui-indicatorElement .oo-ui-popupToolGroup-handle {
231 padding-left: 2.85714286em;
233 .oo-ui-popupToolGroup.oo-ui-labelElement .oo-ui-popupToolGroup-handle {
234 padding: 1em 0.85714286em 0.92857143em;
236 .oo-ui-popupToolGroup.oo-ui-labelElement .oo-ui-popupToolGroup-handle .oo-ui-labelElement-label {
237 line-height: 1.07142857em;
239 .oo-ui-toolbar-narrow .oo-ui-popupToolGroup.oo-ui-labelElement .oo-ui-popupToolGroup-handle {
240 padding-left: 0.71428571em;
241 padding-right: 0.71428571em;
243 .oo-ui-popupToolGroup.oo-ui-iconElement.oo-ui-labelElement .oo-ui-popupToolGroup-handle {
244 padding-left: 2.64285714em;
246 .oo-ui-toolbar-narrow .oo-ui-popupToolGroup.oo-ui-iconElement.oo-ui-labelElement .oo-ui-popupToolGroup-handle {
249 .oo-ui-popupToolGroup.oo-ui-labelElement.oo-ui-indicatorElement .oo-ui-popupToolGroup-handle {
250 padding-right: 1.85714286em;
252 .oo-ui-toolbar-narrow .oo-ui-popupToolGroup.oo-ui-labelElement.oo-ui-indicatorElement .oo-ui-popupToolGroup-handle {
253 padding-right: 1.28571429em;
255 .oo-ui-popupToolGroup.oo-ui-indicatorElement .oo-ui-popupToolGroup-handle {
256 padding-right: 1.14285714em;
258 .oo-ui-toolbar-narrow .oo-ui-popupToolGroup.oo-ui-indicatorElement .oo-ui-popupToolGroup-handle {
259 padding-right: 0.85714286em;
261 .oo-ui-popupToolGroup:not( .oo-ui-labelElement ):not( .oo-ui-iconElement ) .oo-ui-indicatorElement-indicator {
264 .oo-ui-popupToolGroup-header {
266 padding: 0 0.85714286em;
268 line-height: 2.28571429em;
270 .oo-ui-toolbar-narrow .oo-ui-popupToolGroup-header {
271 padding: 0 0.71428571em;
273 .oo-ui-popupToolGroup .oo-ui-toolGroup-tools {
275 border: 1px solid
#c8ccd1;
276 background-color: #fff;
277 box-shadow: 0 2px 2px 0 rgba
(0, 0, 0, 0.25);
280 .oo-ui-toolbar-position-top .oo-ui-popupToolGroup .oo-ui-toolGroup-tools {
283 .oo-ui-toolbar-position-bottom .oo-ui-popupToolGroup .oo-ui-toolGroup-tools {
286 .oo-ui-popupToolGroup .oo-ui-tool-link {
287 padding: 1em 0.85714286em 0.92857143em 2.64285714em;
289 .oo-ui-toolbar-narrow .oo-ui-popupToolGroup .oo-ui-tool-link {
290 padding-left: 0.71428571em;
291 padding-right: 2.5em;
293 .oo-ui-popupToolGroup .oo-ui-tool-link .oo-ui-tool-title {
296 .oo-ui-popupToolGroup .oo-ui-tool-link .oo-ui-tool-accel {
298 line-height: 1.07142857em;
300 .oo-ui-popupToolGroup .oo-ui-tool-link .oo-ui-tool-accel:not( :empty ) {
301 padding-left: 1.28571429em;
303 .oo-ui-toolbar-narrow .oo-ui-popupToolGroup .oo-ui-tool-link .oo-ui-tool-accel:not( :empty ) {
304 padding-left: 1.14285714em;
306 .oo-ui-popupToolGroup.oo-ui-widget-enabled > .oo-ui-popupToolGroup-handle {
307 -webkit-transition: background-color
100ms, box-shadow
100ms;
308 -moz-transition: background-color
100ms, box-shadow
100ms;
309 transition: background-color
100ms, box-shadow
100ms;
311 .oo-ui-popupToolGroup.oo-ui-widget-enabled > .oo-ui-popupToolGroup-handle:hover {
312 background-color: #eaecf0;
314 .oo-ui-popupToolGroup.oo-ui-widget-enabled > .oo-ui-popupToolGroup-handle:active {
315 background-color: #eaf3ff;
317 .oo-ui-popupToolGroup
.oo-ui-widget-enabled
> .oo-ui-popupToolGroup-handle
.oo-ui-iconElement-icon
,
318 .oo-ui-popupToolGroup.oo-ui-widget-enabled > .oo-ui-popupToolGroup-handle .oo-ui-indicatorElement-indicator {
320 -webkit-transition: opacity
100ms;
321 -moz-transition: opacity
100ms;
322 transition: opacity
100ms;
323 -webkit-transform: translateZ
(0);
324 transform: translateZ
(0);
326 .oo-ui-popupToolGroup
.oo-ui-widget-enabled
> .oo-ui-popupToolGroup-handle:hover
.oo-ui-iconElement-icon
,
327 .oo-ui-popupToolGroup
.oo-ui-widget-enabled
> .oo-ui-popupToolGroup-handle:active
.oo-ui-iconElement-icon
,
328 .oo-ui-popupToolGroup
.oo-ui-widget-enabled
> .oo-ui-popupToolGroup-handle:hover
.oo-ui-indicatorElement-indicator
,
329 .oo-ui-popupToolGroup.oo-ui-widget-enabled > .oo-ui-popupToolGroup-handle:active .oo-ui-indicatorElement-indicator {
332 .oo-ui-popupToolGroup.oo-ui-widget-enabled > .oo-ui-popupToolGroup-handle:focus {
333 outline: 1px solid
#36c;
334 box-shadow: inset
0 0 0 1px #36c;
336 .oo-ui-popupToolGroup
.oo-ui-widget-enabled
[class
*='oo-ui-flaggedElement'] > .oo-ui-popupToolGroup-handle
.oo-ui-iconElement-icon
,
337 .oo-ui-popupToolGroup.oo-ui-widget-enabled[class*='oo-ui-flaggedElement'] > .oo-ui-popupToolGroup-handle:hover .oo-ui-iconElement-icon {
340 .oo-ui-popupToolGroup.oo-ui-popupToolGroup-active > .oo-ui-popupToolGroup-handle {
341 background-color: #eaf3ff;
344 .oo-ui-popupToolGroup.oo-ui-popupToolGroup-active > .oo-ui-popupToolGroup-handle:hover {
345 background-color: rgba
(41, 98, 204, 0.1);
348 .oo-ui-popupToolGroup.oo-ui-popupToolGroup-active .oo-ui-tool-active.oo-ui-widget-enabled .oo-ui-tool-link .oo-ui-tool-title {
351 .oo-ui-popupToolGroup .oo-ui-tool.oo-ui-widget-enabled .oo-ui-tool-link:focus {
353 box-shadow: inset
0 0 0 2px #36c;
355 .oo-ui-listToolGroup .oo-ui-tool {
357 -webkit-box-sizing: border-box
;
358 -moz-box-sizing: border-box
;
359 box-sizing: border-box
;
361 .oo-ui-listToolGroup .oo-ui-tool.oo-ui-widget-enabled:hover {
362 background-color: #eaecf0;
365 .oo-ui-listToolGroup .oo-ui-tool-active.oo-ui-widget-enabled {
366 background-color: #eaf3ff;
368 .oo-ui-listToolGroup .oo-ui-tool-active.oo-ui-widget-enabled:hover {
369 background-color: rgba
(41, 98, 204, 0.1);
371 .oo-ui-listToolGroup .oo-ui-tool-active.oo-ui-widget-enabled .oo-ui-tool-link .oo-ui-tool-title {
374 .oo-ui-listToolGroup
.oo-ui-widget-disabled
,
375 .oo-ui-listToolGroup .oo-ui-tool.oo-ui-widget-disabled .oo-ui-tool-title {
378 .oo-ui-menuToolGroup .oo-ui-tool {
381 .oo-ui-menuToolGroup .oo-ui-popupToolGroup-handle {
384 .oo-ui-toolbar-narrow .oo-ui-menuToolGroup .oo-ui-popupToolGroup-handle {
387 .oo-ui-menuToolGroup .oo-ui-tool-link .oo-ui-iconElement-icon {
390 .oo-ui-toolbar-narrow .oo-ui-menuToolGroup .oo-ui-tool-link .oo-ui-iconElement-icon {
393 .oo-ui-menuToolGroup .oo-ui-tool-active .oo-ui-tool-link .oo-ui-iconElement-icon {
394 background-image: url
('themes/wikimediaui/images/icons/check-progressive.png');
395 background-image: linear-gradient
(transparent
, transparent
), /* @embed */ url
('themes/wikimediaui/images/icons/check-progressive.svg');
396 background-size: contain
;
398 .oo-ui-menuToolGroup .oo-ui-tool.oo-ui-widget-enabled:hover {
399 background-color: rgba
(41, 98, 204, 0.1);
401 .oo-ui-menuToolGroup .oo-ui-tool-name-menuTool.oo-ui-tool-active {
402 background-color: #eaf3ff;
404 .oo-ui-menuToolGroup
.oo-ui-widget-disabled
,
405 .oo-ui-menuToolGroup .oo-ui-tool.oo-ui-widget-disabled .oo-ui-tool-title {
415 .oo-ui-toolbar-tools
,
416 .oo-ui-toolbar-actions {
417 -webkit-touch-callout: none
;
418 -webkit-user-select: none
;
419 -moz-user-select: none
;
420 -ms-user-select: none
;
423 .oo-ui-toolbar-tools {
427 .oo-ui-toolbar-narrow
.oo-ui-toolbar-tools
,
428 .oo-ui-toolbar-tools .oo-ui-tool {
431 .oo-ui-toolbar-actions {
434 .oo-ui-toolbar-actions
.oo-ui-toolbar
,
435 .oo-ui-toolbar-actions
.oo-ui-buttonElement
.oo-ui-labelElement
> input
.oo-ui-buttonElement-button
,
436 .oo-ui-toolbar-actions .oo-ui-buttonElement.oo-ui-labelElement > .oo-ui-buttonElement-button > .oo-ui-labelElement-label {
437 display: inline-block
;
439 .oo-ui-toolbar-actions .oo-ui-popupWidget {
440 -webkit-touch-callout: default
;
441 -webkit-user-select: text
;
442 -moz-user-select: text
;
443 -ms-user-select: text
;
447 background-color: #fff;
450 .oo-ui-toolbar-position-top > .oo-ui-toolbar-bar {
451 border-bottom: 1px solid
#c8ccd1;
452 box-shadow: 0 1px 1px 0 rgba
(0, 0, 0, 0.1);
454 .oo-ui-toolbar-position-bottom > .oo-ui-toolbar-bar {
455 border-top: 1px solid
#c8ccd1;
456 box-shadow: 0 -1px 1px 0 rgba
(0, 0, 0, 0.1);
458 .oo-ui-toolbar-bar .oo-ui-toolbar-bar {
459 background-color: transparent
;
463 .oo-ui-toolbar-narrow-bar:after {
472 .oo-ui-toolbar-narrow.oo-ui-toolbar-position-top .oo-ui-toolbar-bar:after {
473 border-bottom: 1px solid
#c8ccd1;
475 .oo-ui-toolbar-narrow.oo-ui-toolbar-position-bottom .oo-ui-toolbar-bar:after {
476 border-top: 1px solid
#c8ccd1;
478 .oo-ui-toolbar-actions > .oo-ui-buttonElement {
481 .oo-ui-toolbar-actions > .oo-ui-buttonElement > .oo-ui-buttonElement-button {
485 padding-left: 1.14285714em;
486 padding-right: 1.14285714em;
488 .oo-ui-toolbar-narrow .oo-ui-toolbar-actions > .oo-ui-buttonElement > .oo-ui-buttonElement-button {
489 padding-left: 0.85714286em;
490 padding-right: 0.85714286em;
492 .oo-ui-toolbar-actions > .oo-ui-buttonElement.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:focus {
493 box-shadow: inset
0 0 0 2px #36c, inset
0 0 0 3px #fff;
495 .oo-ui-toolbar-actions > .oo-ui-buttonElement.oo-ui-labelElement > .oo-ui-buttonElement-button {
497 padding-bottom: 0.92857143em;
499 .oo-ui-toolbar-actions > .oo-ui-buttonGroupWidget > .oo-ui-buttonElement > .oo-ui-buttonElement-button {
501 border-width: 0 0 0 1px;
503 padding-bottom: 0.92857143em;
505 .oo-ui-toolbar-actions > .oo-ui-buttonGroupWidget > .oo-ui-popupToolGroup.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-popupToolGroup-handle {
507 background-color: #36c;
510 .oo-ui-toolbar-actions > .oo-ui-buttonGroupWidget > .oo-ui-popupToolGroup.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-popupToolGroup-handle:hover {
511 background-color: #447ff5;
512 border-color: #447ff5;
514 .oo-ui-toolbar-actions
> .oo-ui-buttonGroupWidget
> .oo-ui-popupToolGroup
.oo-ui-widget-enabled
.oo-ui-flaggedElement-primary
.oo-ui-flaggedElement-progressive
> .oo-ui-popupToolGroup-handle:active
,
515 .oo-ui-toolbar-actions
> .oo-ui-buttonGroupWidget
> .oo-ui-popupToolGroup
.oo-ui-widget-enabled
.oo-ui-flaggedElement-primary
.oo-ui-flaggedElement-progressive
> .oo-ui-popupToolGroup-handle:active:focus
,
516 .oo-ui-toolbar-actions
> .oo-ui-buttonGroupWidget
> .oo-ui-popupToolGroup
.oo-ui-widget-enabled
.oo-ui-flaggedElement-primary
.oo-ui-flaggedElement-progressive
.oo-ui-buttonElement-pressed
> .oo-ui-popupToolGroup-handle
,
517 .oo-ui-toolbar-actions
> .oo-ui-buttonGroupWidget
> .oo-ui-popupToolGroup
.oo-ui-widget-enabled
.oo-ui-flaggedElement-primary
.oo-ui-flaggedElement-progressive
.oo-ui-buttonElement-active
> .oo-ui-popupToolGroup-handle
,
518 .oo-ui-toolbar-actions > .oo-ui-buttonGroupWidget > .oo-ui-popupToolGroup.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive.oo-ui-popupToolGroup-active > .oo-ui-popupToolGroup-handle {
520 background-color: #2a4b8d;
521 border-color: #2a4b8d;
524 .oo-ui-toolbar-actions > .oo-ui-buttonGroupWidget > .oo-ui-popupToolGroup.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-popupToolGroup-handle:focus {
526 box-shadow: inset
0 0 0 1px #36c, inset
0 0 0 2px #fff;
528 .oo-ui-toolbar-actions > .oo-ui-toolbar:not( :last-child ) {
529 border-right: 1px solid
#c8ccd1;