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-04-17T22:24:02Z
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-widget > .oo-ui-tool-link > .oo-ui-iconWidget.oo-ui-iconElement-icon.oo-ui-tool-checkIcon {
23 .oo-ui-tool .oo-ui-tool-link {
25 -webkit-box-sizing: border-box
;
26 -moz-box-sizing: border-box
;
27 box-sizing: border-box
;
31 .oo-ui-toolbar-narrow .oo-ui-tool .oo-ui-tool-link {
32 padding-left: 2.85714286em;
34 .oo-ui-tool-with-label .oo-ui-tool-link {
35 padding: 1em 0.85714286em 0.92857143em 2.64285714em;
37 .oo-ui-tool.oo-ui-iconElement .oo-ui-iconElement-icon {
41 .oo-ui-toolbar-narrow .oo-ui-tool.oo-ui-iconElement .oo-ui-iconElement-icon {
44 .oo-ui-tool .oo-ui-tool-title {
45 line-height: 1.07142857em;
47 .oo-ui-tool.oo-ui-widget-enabled {
48 -webkit-transition: background-color
100ms;
49 -moz-transition: background-color
100ms;
50 transition: background-color
100ms;
52 .oo-ui-tool.oo-ui-widget-enabled .oo-ui-tool-link:focus {
53 outline: 1px solid
#36c;
54 box-shadow: inset
0 0 0 1px #36c;
57 .oo-ui-tool.oo-ui-widget-enabled .oo-ui-iconElement-icon {
59 -webkit-transition: opacity
100ms;
60 -moz-transition: opacity
100ms;
61 transition: opacity
100ms;
62 -webkit-transform: translateZ
(0);
63 transform: translateZ
(0);
65 .oo-ui-tool.oo-ui-widget-enabled .oo-ui-tool-title {
66 -webkit-transition: color
100ms;
67 -moz-transition: color
100ms;
68 transition: color
100ms;
70 .oo-ui-tool.oo-ui-widget-enabled:hover .oo-ui-iconElement-icon {
73 .oo-ui-tool.oo-ui-widget-enabled[class*='oo-ui-flaggedElement'] .oo-ui-iconElement-icon {
76 .oo-ui-tool.oo-ui-widget-disabled .oo-ui-iconElement-icon {
79 .oo-ui-popupTool
.oo-ui-popupWidget-popup
,
80 .oo-ui-popupTool .oo-ui-popupWidget-anchor {
83 .oo-ui-toolGroupTool > .oo-ui-toolGroup {
87 display: inline-block
;
88 vertical-align: middle
;
89 -webkit-box-sizing: border-box
;
90 -moz-box-sizing: border-box
;
91 box-sizing: border-box
;
92 border-right: 1px solid
#c8ccd1;
94 .oo-ui-toolGroup-empty {
97 .oo-ui-toolGroup .oo-ui-tool-link {
98 text-decoration: none
;
101 .oo-ui-toolGroup
.oo-ui-widget-disabled
.oo-ui-tool-link
,
102 .oo-ui-toolGroup .oo-ui-widget-disabled > .oo-ui-tool-link {
106 .oo-ui-toolbar-actions .oo-ui-toolGroup {
108 border-left: 1px solid
#c8ccd1;
110 .oo-ui-toolGroup
.oo-ui-widget-disabled
.oo-ui-indicatorElement-indicator
,
111 .oo-ui-toolGroup.oo-ui-widget-disabled .oo-ui-iconElement-icon {
112 opacity: 0.34 !important
;
114 .oo-ui-barToolGroup > .oo-ui-toolGroup-tools > .oo-ui-tool {
115 display: inline-block
;
119 .oo-ui-barToolGroup > .oo-ui-toolGroup-tools > .oo-ui-tool > .oo-ui-tool-link {
122 .oo-ui-barToolGroup > .oo-ui-toolGroup-tools > .oo-ui-tool > .oo-ui-tool-link .oo-ui-tool-accel {
125 .oo-ui-barToolGroup > .oo-ui-toolGroup-tools > .oo-ui-tool.oo-ui-iconElement > .oo-ui-tool-link .oo-ui-tool-title {
128 .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 {
129 display: inline-block
;
131 .oo-ui-barToolGroup > .oo-ui-toolGroup-tools > .oo-ui-tool.iconElement > .oo-ui-tool-link > .oo-ui-iconElement-icon {
134 .oo-ui-barToolGroup > .oo-ui-toolGroup-tools > .oo-ui-tool + .oo-ui-tool {
137 .oo-ui-barToolGroup.oo-ui-widget-enabled > .oo-ui-toolGroup-tools > .oo-ui-tool:not( .oo-ui-toolGroupTool ).oo-ui-widget-enabled:hover {
138 background-color: #eaecf0;
140 .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 {
142 -webkit-transition: color
100ms;
143 -moz-transition: color
100ms;
144 transition: color
100ms;
146 .oo-ui-barToolGroup.oo-ui-widget-enabled > .oo-ui-toolGroup-tools > .oo-ui-tool:not( .oo-ui-toolGroupTool ).oo-ui-tool-active {
147 background-color: #eaf3ff;
149 .oo-ui-barToolGroup.oo-ui-widget-enabled > .oo-ui-toolGroup-tools > .oo-ui-tool:not( .oo-ui-toolGroupTool ).oo-ui-tool-active:hover {
150 background-color: rgba
(41, 98, 204, 0.1);
152 .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 {
155 .oo-ui-barToolGroup
.oo-ui-widget-enabled
.oo-ui-tool
.oo-ui-widget-disabled
> .oo-ui-tool-link
.oo-ui-tool-title
,
156 .oo-ui-barToolGroup.oo-ui-widget-disabled .oo-ui-tool > .oo-ui-tool-link .oo-ui-tool-title {
159 .oo-ui-popupToolGroup {
163 .oo-ui-popupToolGroup-handle {
167 .oo-ui-popupToolGroup-handle .oo-ui-labelElement-label:not( :empty ) {
168 display: inline-block
;
170 .oo-ui-popupToolGroup.oo-ui-widget-disabled .oo-ui-popupToolGroup-handle {
174 .oo-ui-popupToolGroup .oo-ui-toolGroup-tools {
179 .oo-ui-popupToolGroup-active.oo-ui-widget-enabled > .oo-ui-toolGroup-tools {
182 .oo-ui-popupToolGroup-left > .oo-ui-toolGroup-tools {
185 .oo-ui-popupToolGroup-right > .oo-ui-toolGroup-tools {
188 .oo-ui-popupToolGroup .oo-ui-tool-link {
191 vertical-align: middle
;
194 .oo-ui-popupToolGroup
.oo-ui-tool-link
.oo-ui-tool-accel
,
195 .oo-ui-popupToolGroup .oo-ui-tool-link .oo-ui-tool-title {
197 vertical-align: middle
;
199 .oo-ui-popupToolGroup .oo-ui-tool-link .oo-ui-tool-accel {
202 .oo-ui-toolbar-narrow .oo-ui-popupToolGroup {
203 min-width: 2.85714286em;
205 .oo-ui-popupToolGroup.oo-ui-indicatorElement:not( .oo-ui-labelElement ):not( .oo-ui-iconElement ) {
206 min-width: 1.85714286em;
208 .oo-ui-popupToolGroup-handle {
209 -webkit-box-sizing: border-box
;
210 -moz-box-sizing: border-box
;
211 box-sizing: border-box
;
213 .oo-ui-popupToolGroup-handle .oo-ui-iconElement-icon {
216 .oo-ui-toolbar-narrow .oo-ui-popupToolGroup-handle .oo-ui-iconElement-icon {
219 .oo-ui-popupToolGroup-handle .oo-ui-indicatorElement-indicator {
220 background-position: center
52%;
223 .oo-ui-toolbar-narrow .oo-ui-popupToolGroup-handle .oo-ui-indicatorElement-indicator {
226 .oo-ui-popupToolGroup
.oo-ui-iconElement
.oo-ui-popupToolGroup-handle
,
227 .oo-ui-popupToolGroup.oo-ui-indicatorElement .oo-ui-popupToolGroup-handle {
230 .oo-ui-popupToolGroup.oo-ui-iconElement.oo-ui-indicatorElement .oo-ui-popupToolGroup-handle {
233 .oo-ui-toolbar-narrow .oo-ui-popupToolGroup.oo-ui-iconElement.oo-ui-indicatorElement .oo-ui-popupToolGroup-handle {
234 padding-left: 2.85714286em;
236 .oo-ui-popupToolGroup.oo-ui-labelElement .oo-ui-popupToolGroup-handle {
237 padding: 1em 0.85714286em 0.92857143em;
239 .oo-ui-popupToolGroup.oo-ui-labelElement .oo-ui-popupToolGroup-handle .oo-ui-labelElement-label {
240 line-height: 1.07142857em;
242 .oo-ui-toolbar-narrow .oo-ui-popupToolGroup.oo-ui-labelElement .oo-ui-popupToolGroup-handle {
243 padding-left: 0.71428571em;
244 padding-right: 0.71428571em;
246 .oo-ui-popupToolGroup.oo-ui-iconElement.oo-ui-labelElement .oo-ui-popupToolGroup-handle {
247 padding-left: 2.64285714em;
249 .oo-ui-toolbar-narrow .oo-ui-popupToolGroup.oo-ui-iconElement.oo-ui-labelElement .oo-ui-popupToolGroup-handle {
252 .oo-ui-popupToolGroup.oo-ui-labelElement.oo-ui-indicatorElement .oo-ui-popupToolGroup-handle {
253 padding-right: 1.85714286em;
255 .oo-ui-toolbar-narrow .oo-ui-popupToolGroup.oo-ui-labelElement.oo-ui-indicatorElement .oo-ui-popupToolGroup-handle {
256 padding-right: 1.28571429em;
258 .oo-ui-popupToolGroup.oo-ui-indicatorElement .oo-ui-popupToolGroup-handle {
259 padding-right: 1.14285714em;
261 .oo-ui-toolbar-narrow .oo-ui-popupToolGroup.oo-ui-indicatorElement .oo-ui-popupToolGroup-handle {
262 padding-right: 0.85714286em;
264 .oo-ui-popupToolGroup:not( .oo-ui-labelElement ):not( .oo-ui-iconElement ) .oo-ui-indicatorElement-indicator {
267 .oo-ui-popupToolGroup-header {
269 padding: 0 0.85714286em;
271 line-height: 2.28571429em;
273 .oo-ui-toolbar-narrow .oo-ui-popupToolGroup-header {
274 padding: 0 0.71428571em;
276 .oo-ui-popupToolGroup .oo-ui-toolGroup-tools {
278 border: 1px solid
#c8ccd1;
279 background-color: #fff;
280 box-shadow: 0 2px 2px 0 rgba
(0, 0, 0, 0.25);
283 .oo-ui-toolbar-position-top .oo-ui-popupToolGroup .oo-ui-toolGroup-tools {
286 .oo-ui-toolbar-position-bottom .oo-ui-popupToolGroup .oo-ui-toolGroup-tools {
289 .oo-ui-popupToolGroup .oo-ui-tool-link {
290 padding: 1em 0.85714286em 0.92857143em 2.64285714em;
292 .oo-ui-toolbar-narrow .oo-ui-popupToolGroup .oo-ui-tool-link {
294 padding-right: 0.71428571em;
296 .oo-ui-popupToolGroup .oo-ui-tool-link .oo-ui-tool-title {
299 .oo-ui-popupToolGroup .oo-ui-tool-link .oo-ui-tool-accel {
301 line-height: 1.07142857em;
303 .oo-ui-popupToolGroup .oo-ui-tool-link .oo-ui-tool-accel:not( :empty ) {
304 padding-left: 1.28571429em;
306 .oo-ui-toolbar-narrow .oo-ui-popupToolGroup .oo-ui-tool-link .oo-ui-tool-accel:not( :empty ) {
307 padding-left: 1.14285714em;
309 .oo-ui-popupToolGroup.oo-ui-widget-enabled > .oo-ui-popupToolGroup-handle {
310 -webkit-transition: background-color
100ms, box-shadow
100ms;
311 -moz-transition: background-color
100ms, box-shadow
100ms;
312 transition: background-color
100ms, box-shadow
100ms;
314 .oo-ui-popupToolGroup.oo-ui-widget-enabled > .oo-ui-popupToolGroup-handle:hover {
315 background-color: #eaecf0;
317 .oo-ui-popupToolGroup.oo-ui-widget-enabled > .oo-ui-popupToolGroup-handle:active {
318 background-color: #eaf3ff;
320 .oo-ui-popupToolGroup
.oo-ui-widget-enabled
> .oo-ui-popupToolGroup-handle
.oo-ui-iconElement-icon
,
321 .oo-ui-popupToolGroup.oo-ui-widget-enabled > .oo-ui-popupToolGroup-handle .oo-ui-indicatorElement-indicator {
323 -webkit-transition: opacity
100ms;
324 -moz-transition: opacity
100ms;
325 transition: opacity
100ms;
326 -webkit-transform: translateZ
(0);
327 transform: translateZ
(0);
329 .oo-ui-popupToolGroup
.oo-ui-widget-enabled
> .oo-ui-popupToolGroup-handle:hover
.oo-ui-iconElement-icon
,
330 .oo-ui-popupToolGroup
.oo-ui-widget-enabled
> .oo-ui-popupToolGroup-handle:active
.oo-ui-iconElement-icon
,
331 .oo-ui-popupToolGroup
.oo-ui-widget-enabled
> .oo-ui-popupToolGroup-handle:hover
.oo-ui-indicatorElement-indicator
,
332 .oo-ui-popupToolGroup.oo-ui-widget-enabled > .oo-ui-popupToolGroup-handle:active .oo-ui-indicatorElement-indicator {
335 .oo-ui-popupToolGroup.oo-ui-widget-enabled > .oo-ui-popupToolGroup-handle:focus {
336 outline: 1px solid
#36c;
337 box-shadow: inset
0 0 0 1px #36c;
339 .oo-ui-popupToolGroup
.oo-ui-widget-enabled
[class
*='oo-ui-flaggedElement'] > .oo-ui-popupToolGroup-handle
.oo-ui-iconElement-icon
,
340 .oo-ui-popupToolGroup.oo-ui-widget-enabled[class*='oo-ui-flaggedElement'] > .oo-ui-popupToolGroup-handle:hover .oo-ui-iconElement-icon {
343 .oo-ui-popupToolGroup.oo-ui-popupToolGroup-active > .oo-ui-popupToolGroup-handle {
344 background-color: #eaf3ff;
347 .oo-ui-popupToolGroup.oo-ui-popupToolGroup-active > .oo-ui-popupToolGroup-handle:hover {
348 background-color: rgba
(41, 98, 204, 0.1);
351 .oo-ui-popupToolGroup.oo-ui-popupToolGroup-active .oo-ui-tool-active.oo-ui-widget-enabled .oo-ui-tool-link .oo-ui-tool-title {
354 .oo-ui-popupToolGroup .oo-ui-tool.oo-ui-widget-enabled .oo-ui-tool-link:focus {
356 box-shadow: inset
0 0 0 2px #36c;
358 .oo-ui-listToolGroup .oo-ui-tool {
360 -webkit-box-sizing: border-box
;
361 -moz-box-sizing: border-box
;
362 box-sizing: border-box
;
364 .oo-ui-listToolGroup .oo-ui-tool.oo-ui-widget-enabled:hover {
365 background-color: #eaecf0;
368 .oo-ui-listToolGroup .oo-ui-tool-active.oo-ui-widget-enabled {
369 background-color: #eaf3ff;
371 .oo-ui-listToolGroup .oo-ui-tool-active.oo-ui-widget-enabled:hover {
372 background-color: rgba
(41, 98, 204, 0.1);
374 .oo-ui-listToolGroup .oo-ui-tool-active.oo-ui-widget-enabled .oo-ui-tool-link .oo-ui-tool-title {
377 .oo-ui-listToolGroup
.oo-ui-widget-disabled
,
378 .oo-ui-listToolGroup .oo-ui-tool.oo-ui-widget-disabled .oo-ui-tool-title {
381 .oo-ui-menuToolGroup .oo-ui-tool {
384 .oo-ui-menuToolGroup .oo-ui-popupToolGroup-handle {
387 .oo-ui-toolbar-narrow .oo-ui-menuToolGroup .oo-ui-popupToolGroup-handle {
390 .oo-ui-menuToolGroup .oo-ui-tool-link .oo-ui-iconElement-icon {
393 .oo-ui-toolbar-narrow .oo-ui-menuToolGroup .oo-ui-tool-link .oo-ui-iconElement-icon {
396 .oo-ui-menuToolGroup .oo-ui-tool.oo-ui-widget-enabled:hover {
397 background-color: rgba
(41, 98, 204, 0.1);
399 .oo-ui-menuToolGroup .oo-ui-tool.oo-ui-tool-active {
400 background-color: #eaf3ff;
402 .oo-ui-menuToolGroup
.oo-ui-widget-disabled
,
403 .oo-ui-menuToolGroup .oo-ui-tool.oo-ui-widget-disabled .oo-ui-tool-title {
413 .oo-ui-toolbar-tools
,
414 .oo-ui-toolbar-actions {
415 -webkit-touch-callout: none
;
416 -webkit-user-select: none
;
417 -moz-user-select: none
;
418 -ms-user-select: none
;
421 .oo-ui-toolbar-tools {
425 .oo-ui-toolbar-narrow
.oo-ui-toolbar-tools
,
426 .oo-ui-toolbar-tools .oo-ui-tool {
429 .oo-ui-toolbar-actions {
432 .oo-ui-toolbar-actions
.oo-ui-toolbar
,
433 .oo-ui-toolbar-actions
.oo-ui-buttonElement
.oo-ui-labelElement
> input
.oo-ui-buttonElement-button
,
434 .oo-ui-toolbar-actions .oo-ui-buttonElement.oo-ui-labelElement > .oo-ui-buttonElement-button > .oo-ui-labelElement-label {
435 display: inline-block
;
437 .oo-ui-toolbar-actions .oo-ui-popupWidget {
438 -webkit-touch-callout: default
;
439 -webkit-user-select: text
;
440 -moz-user-select: text
;
441 -ms-user-select: text
;
445 background-color: #fff;
448 .oo-ui-toolbar-position-top > .oo-ui-toolbar-bar {
449 border-bottom: 1px solid
#c8ccd1;
450 box-shadow: 0 1px 1px 0 rgba
(0, 0, 0, 0.1);
452 .oo-ui-toolbar-position-bottom > .oo-ui-toolbar-bar {
453 border-top: 1px solid
#c8ccd1;
454 box-shadow: 0 -1px 1px 0 rgba
(0, 0, 0, 0.1);
456 .oo-ui-toolbar-bar .oo-ui-toolbar-bar {
457 background-color: transparent
;
461 .oo-ui-toolbar-narrow-bar:after {
470 .oo-ui-toolbar-narrow.oo-ui-toolbar-position-top .oo-ui-toolbar-bar:after {
471 border-bottom: 1px solid
#c8ccd1;
473 .oo-ui-toolbar-narrow.oo-ui-toolbar-position-bottom .oo-ui-toolbar-bar:after {
474 border-top: 1px solid
#c8ccd1;
476 .oo-ui-toolbar-actions > .oo-ui-buttonElement {
479 .oo-ui-toolbar-actions > .oo-ui-buttonElement > .oo-ui-buttonElement-button {
483 padding-left: 1.14285714em;
484 padding-right: 1.14285714em;
486 .oo-ui-toolbar-narrow .oo-ui-toolbar-actions > .oo-ui-buttonElement > .oo-ui-buttonElement-button {
487 padding-left: 0.85714286em;
488 padding-right: 0.85714286em;
490 .oo-ui-toolbar-actions > .oo-ui-buttonElement.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:focus {
491 box-shadow: inset
0 0 0 2px #36c, inset
0 0 0 3px #fff;
493 .oo-ui-toolbar-actions > .oo-ui-buttonElement.oo-ui-labelElement > .oo-ui-buttonElement-button {
495 padding-bottom: 0.92857143em;
497 .oo-ui-toolbar-actions > .oo-ui-buttonGroupWidget > .oo-ui-buttonElement > .oo-ui-buttonElement-button {
499 border-width: 0 0 0 1px;
501 padding-bottom: 0.92857143em;
503 .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 {
505 background-color: #36c;
508 .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 {
509 background-color: #447ff5;
510 border-color: #447ff5;
512 .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
,
513 .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
,
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-buttonElement-pressed
> .oo-ui-popupToolGroup-handle
,
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-buttonElement-active
> .oo-ui-popupToolGroup-handle
,
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-popupToolGroup-active > .oo-ui-popupToolGroup-handle {
518 background-color: #2a4b8d;
519 border-color: #2a4b8d;
522 .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 {
524 box-shadow: inset
0 0 0 1px #36c, inset
0 0 0 2px #fff;
526 .oo-ui-toolbar-actions > .oo-ui-toolbar:not( :last-child ) {
527 border-right: 1px solid
#c8ccd1;