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-21T00:00:57Z
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-tool-with-label .oo-ui-tool-link {
29 padding: 1em 0.85714286em 0.92857143em 2.64285714em;
31 .oo-ui-tool.oo-ui-iconElement .oo-ui-iconElement-icon {
35 .oo-ui-tool .oo-ui-tool-title {
36 line-height: 1.07142857em;
38 .oo-ui-tool.oo-ui-widget-enabled {
39 -webkit-transition: background-color
100ms;
40 -moz-transition: background-color
100ms;
41 transition: background-color
100ms;
43 .oo-ui-tool.oo-ui-widget-enabled .oo-ui-tool-link:focus {
44 outline: 1px solid
#36c;
45 box-shadow: inset
0 0 0 1px #36c;
48 .oo-ui-tool.oo-ui-widget-enabled .oo-ui-iconElement-icon {
50 -webkit-transition: opacity
100ms;
51 -moz-transition: opacity
100ms;
52 transition: opacity
100ms;
53 -webkit-transform: translateZ
(0);
54 transform: translateZ
(0);
56 .oo-ui-tool.oo-ui-widget-enabled .oo-ui-tool-title {
57 -webkit-transition: color
100ms;
58 -moz-transition: color
100ms;
59 transition: color
100ms;
61 .oo-ui-tool.oo-ui-widget-enabled:hover .oo-ui-iconElement-icon {
64 .oo-ui-tool.oo-ui-widget-enabled[class*='oo-ui-flaggedElement'] .oo-ui-iconElement-icon {
67 .oo-ui-tool.oo-ui-widget-disabled .oo-ui-iconElement-icon {
70 .oo-ui-popupTool
.oo-ui-popupWidget-popup
,
71 .oo-ui-popupTool .oo-ui-popupWidget-anchor {
74 .oo-ui-toolGroupTool > .oo-ui-toolGroup {
78 display: inline-block
;
79 vertical-align: middle
;
80 -webkit-box-sizing: border-box
;
81 -moz-box-sizing: border-box
;
82 box-sizing: border-box
;
83 border-right: 1px solid
#c8ccd1;
85 .oo-ui-toolGroup-empty {
88 .oo-ui-toolGroup .oo-ui-tool-link {
89 text-decoration: none
;
92 .oo-ui-toolGroup
.oo-ui-widget-disabled
.oo-ui-tool-link
,
93 .oo-ui-toolGroup .oo-ui-widget-disabled > .oo-ui-tool-link {
97 .oo-ui-toolbar-actions .oo-ui-toolGroup {
99 border-left: 1px solid
#c8ccd1;
101 .oo-ui-toolGroup
.oo-ui-widget-disabled
.oo-ui-indicatorElement-indicator
,
102 .oo-ui-toolGroup.oo-ui-widget-disabled .oo-ui-iconElement-icon {
103 opacity: 0.34 !important
;
105 .oo-ui-barToolGroup > .oo-ui-toolGroup-tools > .oo-ui-tool {
106 display: inline-block
;
110 .oo-ui-barToolGroup > .oo-ui-toolGroup-tools > .oo-ui-tool > .oo-ui-tool-link {
113 .oo-ui-barToolGroup > .oo-ui-toolGroup-tools > .oo-ui-tool > .oo-ui-tool-link .oo-ui-tool-accel {
116 .oo-ui-barToolGroup > .oo-ui-toolGroup-tools > .oo-ui-tool.oo-ui-iconElement > .oo-ui-tool-link .oo-ui-tool-title {
119 .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 {
120 display: inline-block
;
122 .oo-ui-barToolGroup > .oo-ui-toolGroup-tools > .oo-ui-tool.iconElement > .oo-ui-tool-link > .oo-ui-iconElement-icon {
125 .oo-ui-barToolGroup.oo-ui-widget-enabled > .oo-ui-toolGroup-tools > .oo-ui-tool:not( .oo-ui-toolGroupTool ).oo-ui-widget-enabled:hover {
126 background-color: #eaecf0;
128 .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 {
130 -webkit-transition: color
100ms;
131 -moz-transition: color
100ms;
132 transition: color
100ms;
134 .oo-ui-barToolGroup.oo-ui-widget-enabled > .oo-ui-toolGroup-tools > .oo-ui-tool:not( .oo-ui-toolGroupTool ).oo-ui-tool-active {
135 background-color: #eaf3ff;
137 .oo-ui-barToolGroup.oo-ui-widget-enabled > .oo-ui-toolGroup-tools > .oo-ui-tool:not( .oo-ui-toolGroupTool ).oo-ui-tool-active:hover {
138 background-color: rgba
(41, 98, 204, 0.1);
140 .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 {
143 .oo-ui-barToolGroup
.oo-ui-widget-enabled
.oo-ui-tool
.oo-ui-widget-disabled
> .oo-ui-tool-link
.oo-ui-tool-title
,
144 .oo-ui-barToolGroup.oo-ui-widget-disabled .oo-ui-tool > .oo-ui-tool-link .oo-ui-tool-title {
147 .oo-ui-popupToolGroup {
151 .oo-ui-popupToolGroup-handle {
155 .oo-ui-popupToolGroup-handle .oo-ui-labelElement-label:not( :empty ) {
156 display: inline-block
;
158 .oo-ui-popupToolGroup.oo-ui-widget-disabled .oo-ui-popupToolGroup-handle {
162 .oo-ui-popupToolGroup .oo-ui-toolGroup-tools {
167 .oo-ui-popupToolGroup-active.oo-ui-widget-enabled > .oo-ui-toolGroup-tools {
170 .oo-ui-popupToolGroup-left > .oo-ui-toolGroup-tools {
173 .oo-ui-popupToolGroup-right > .oo-ui-toolGroup-tools {
176 .oo-ui-popupToolGroup .oo-ui-tool-link {
179 vertical-align: middle
;
182 .oo-ui-popupToolGroup
.oo-ui-tool-link
.oo-ui-tool-accel
,
183 .oo-ui-popupToolGroup .oo-ui-tool-link .oo-ui-tool-title {
185 vertical-align: middle
;
187 .oo-ui-popupToolGroup .oo-ui-tool-link .oo-ui-tool-accel {
190 .oo-ui-popupToolGroup.oo-ui-indicatorElement:not( .oo-ui-labelElement ):not( .oo-ui-iconElement ) {
191 min-width: 1.85714286em;
193 .oo-ui-popupToolGroup-handle {
194 -webkit-box-sizing: border-box
;
195 -moz-box-sizing: border-box
;
196 box-sizing: border-box
;
198 .oo-ui-popupToolGroup-handle .oo-ui-iconElement-icon {
201 .oo-ui-popupToolGroup-handle .oo-ui-indicatorElement-indicator {
202 background-position: center
52%;
205 .oo-ui-toolbar-narrow .oo-ui-popupToolGroup-handle .oo-ui-indicatorElement-indicator {
208 .oo-ui-popupToolGroup
.oo-ui-iconElement
.oo-ui-popupToolGroup-handle
,
209 .oo-ui-popupToolGroup.oo-ui-indicatorElement .oo-ui-popupToolGroup-handle {
212 .oo-ui-popupToolGroup.oo-ui-iconElement.oo-ui-indicatorElement .oo-ui-popupToolGroup-handle {
215 .oo-ui-popupToolGroup.oo-ui-labelElement .oo-ui-popupToolGroup-handle {
216 padding: 1em 0.85714286em 0.92857143em;
218 .oo-ui-popupToolGroup.oo-ui-labelElement .oo-ui-popupToolGroup-handle .oo-ui-labelElement-label {
219 line-height: 1.07142857em;
221 .oo-ui-popupToolGroup.oo-ui-iconElement.oo-ui-labelElement .oo-ui-popupToolGroup-handle {
222 padding-left: 2.64285714em;
224 .oo-ui-popupToolGroup.oo-ui-labelElement.oo-ui-indicatorElement .oo-ui-popupToolGroup-handle {
225 padding-right: 1.85714286em;
227 .oo-ui-toolbar-narrow .oo-ui-popupToolGroup.oo-ui-labelElement.oo-ui-indicatorElement .oo-ui-popupToolGroup-handle {
228 padding-right: 1.28571429em;
230 .oo-ui-popupToolGroup.oo-ui-indicatorElement .oo-ui-popupToolGroup-handle {
231 padding-right: 1.14285714em;
233 .oo-ui-toolbar-narrow .oo-ui-popupToolGroup.oo-ui-indicatorElement .oo-ui-popupToolGroup-handle {
234 padding-right: 0.85714286em;
236 .oo-ui-popupToolGroup:not( .oo-ui-labelElement ):not( .oo-ui-iconElement ) .oo-ui-indicatorElement-indicator {
239 .oo-ui-popupToolGroup-header {
241 padding: 0 0.85714286em;
243 line-height: 2.28571429em;
245 .oo-ui-popupToolGroup .oo-ui-toolGroup-tools {
247 border: 1px solid
#c8ccd1;
248 background-color: #fff;
249 box-shadow: 0 2px 2px 0 rgba
(0, 0, 0, 0.25);
252 .oo-ui-toolbar-position-top .oo-ui-popupToolGroup .oo-ui-toolGroup-tools {
255 .oo-ui-toolbar-position-bottom .oo-ui-popupToolGroup .oo-ui-toolGroup-tools {
258 .oo-ui-popupToolGroup .oo-ui-tool-link {
259 padding: 1em 0.85714286em 0.92857143em 2.64285714em;
261 .oo-ui-popupToolGroup .oo-ui-tool-link .oo-ui-tool-title {
264 .oo-ui-popupToolGroup .oo-ui-tool-link .oo-ui-tool-accel {
266 line-height: 1.07142857em;
268 .oo-ui-popupToolGroup .oo-ui-tool-link .oo-ui-tool-accel:not( :empty ) {
269 padding-left: 1.28571429em;
271 .oo-ui-popupToolGroup.oo-ui-widget-enabled > .oo-ui-popupToolGroup-handle {
272 -webkit-transition: background-color
100ms, box-shadow
100ms;
273 -moz-transition: background-color
100ms, box-shadow
100ms;
274 transition: background-color
100ms, box-shadow
100ms;
276 .oo-ui-popupToolGroup.oo-ui-widget-enabled > .oo-ui-popupToolGroup-handle:hover {
277 background-color: #eaecf0;
279 .oo-ui-popupToolGroup.oo-ui-widget-enabled > .oo-ui-popupToolGroup-handle:active {
280 background-color: #eaf3ff;
282 .oo-ui-popupToolGroup
.oo-ui-widget-enabled
> .oo-ui-popupToolGroup-handle
.oo-ui-iconElement-icon
,
283 .oo-ui-popupToolGroup.oo-ui-widget-enabled > .oo-ui-popupToolGroup-handle .oo-ui-indicatorElement-indicator {
285 -webkit-transition: opacity
100ms;
286 -moz-transition: opacity
100ms;
287 transition: opacity
100ms;
288 -webkit-transform: translateZ
(0);
289 transform: translateZ
(0);
291 .oo-ui-popupToolGroup
.oo-ui-widget-enabled
> .oo-ui-popupToolGroup-handle:hover
.oo-ui-iconElement-icon
,
292 .oo-ui-popupToolGroup
.oo-ui-widget-enabled
> .oo-ui-popupToolGroup-handle:active
.oo-ui-iconElement-icon
,
293 .oo-ui-popupToolGroup
.oo-ui-widget-enabled
> .oo-ui-popupToolGroup-handle:hover
.oo-ui-indicatorElement-indicator
,
294 .oo-ui-popupToolGroup.oo-ui-widget-enabled > .oo-ui-popupToolGroup-handle:active .oo-ui-indicatorElement-indicator {
297 .oo-ui-popupToolGroup.oo-ui-widget-enabled > .oo-ui-popupToolGroup-handle:focus {
298 outline: 1px solid
#36c;
299 box-shadow: inset
0 0 0 1px #36c;
301 .oo-ui-popupToolGroup
.oo-ui-widget-enabled
[class
*='oo-ui-flaggedElement'] > .oo-ui-popupToolGroup-handle
.oo-ui-iconElement-icon
,
302 .oo-ui-popupToolGroup.oo-ui-widget-enabled[class*='oo-ui-flaggedElement'] > .oo-ui-popupToolGroup-handle:hover .oo-ui-iconElement-icon {
305 .oo-ui-popupToolGroup.oo-ui-popupToolGroup-active > .oo-ui-popupToolGroup-handle {
306 background-color: #eaf3ff;
309 .oo-ui-popupToolGroup.oo-ui-popupToolGroup-active > .oo-ui-popupToolGroup-handle:hover {
310 background-color: rgba
(41, 98, 204, 0.1);
313 .oo-ui-popupToolGroup.oo-ui-popupToolGroup-active .oo-ui-tool-active.oo-ui-widget-enabled .oo-ui-tool-link .oo-ui-tool-title {
316 .oo-ui-popupToolGroup .oo-ui-tool.oo-ui-widget-enabled .oo-ui-tool-link:focus {
318 box-shadow: inset
0 0 0 2px #36c;
320 .oo-ui-listToolGroup .oo-ui-tool {
322 -webkit-box-sizing: border-box
;
323 -moz-box-sizing: border-box
;
324 box-sizing: border-box
;
326 .oo-ui-listToolGroup .oo-ui-tool.oo-ui-widget-enabled:hover {
327 background-color: #eaecf0;
330 .oo-ui-listToolGroup .oo-ui-tool-active.oo-ui-widget-enabled {
331 background-color: #eaf3ff;
333 .oo-ui-listToolGroup .oo-ui-tool-active.oo-ui-widget-enabled:hover {
334 background-color: rgba
(41, 98, 204, 0.1);
336 .oo-ui-listToolGroup .oo-ui-tool-active.oo-ui-widget-enabled .oo-ui-tool-link .oo-ui-tool-title {
339 .oo-ui-listToolGroup
.oo-ui-widget-disabled
,
340 .oo-ui-listToolGroup .oo-ui-tool.oo-ui-widget-disabled .oo-ui-tool-title {
343 .oo-ui-menuToolGroup .oo-ui-tool {
346 .oo-ui-menuToolGroup .oo-ui-popupToolGroup-handle {
349 .oo-ui-toolbar-narrow .oo-ui-menuToolGroup .oo-ui-popupToolGroup-handle {
352 .oo-ui-menuToolGroup .oo-ui-tool-link .oo-ui-iconElement-icon {
355 .oo-ui-menuToolGroup .oo-ui-tool-active .oo-ui-tool-link .oo-ui-iconElement-icon {
356 background-image: url
('themes/wikimediaui/images/icons/check-progressive.png');
357 background-image: linear-gradient
(transparent
, transparent
), /* @embed */ url
('themes/wikimediaui/images/icons/check-progressive.svg');
358 background-size: contain
;
360 .oo-ui-menuToolGroup .oo-ui-tool.oo-ui-widget-enabled:hover {
361 background-color: rgba
(41, 98, 204, 0.1);
363 .oo-ui-menuToolGroup .oo-ui-tool-name-menuTool.oo-ui-tool-active {
364 background-color: #eaf3ff;
366 .oo-ui-menuToolGroup
.oo-ui-widget-disabled
,
367 .oo-ui-menuToolGroup .oo-ui-tool.oo-ui-widget-disabled .oo-ui-tool-title {
377 .oo-ui-toolbar-tools
,
378 .oo-ui-toolbar-actions {
379 -webkit-touch-callout: none
;
380 -webkit-user-select: none
;
381 -moz-user-select: none
;
382 -ms-user-select: none
;
385 .oo-ui-toolbar-tools {
389 .oo-ui-toolbar-narrow
.oo-ui-toolbar-tools
,
390 .oo-ui-toolbar-tools .oo-ui-tool {
393 .oo-ui-toolbar-actions {
396 .oo-ui-toolbar-actions
.oo-ui-toolbar
,
397 .oo-ui-toolbar-actions
.oo-ui-buttonElement
.oo-ui-labelElement
> input
.oo-ui-buttonElement-button
,
398 .oo-ui-toolbar-actions .oo-ui-buttonElement.oo-ui-labelElement > .oo-ui-buttonElement-button > .oo-ui-labelElement-label {
399 display: inline-block
;
401 .oo-ui-toolbar-actions .oo-ui-popupWidget {
402 -webkit-touch-callout: default
;
403 -webkit-user-select: text
;
404 -moz-user-select: text
;
405 -ms-user-select: text
;
409 background-color: #fff;
412 .oo-ui-toolbar-position-top > .oo-ui-toolbar-bar {
413 border-bottom: 1px solid
#c8ccd1;
414 box-shadow: 0 1px 1px 0 rgba
(0, 0, 0, 0.1);
416 .oo-ui-toolbar-position-bottom > .oo-ui-toolbar-bar {
417 border-top: 1px solid
#c8ccd1;
418 box-shadow: 0 -1px 1px 0 rgba
(0, 0, 0, 0.1);
420 .oo-ui-toolbar-bar .oo-ui-toolbar-bar {
421 background-color: transparent
;
425 .oo-ui-toolbar-narrow-bar:after {
434 .oo-ui-toolbar-narrow.oo-ui-toolbar-position-top .oo-ui-toolbar-bar:after {
435 border-bottom: 1px solid
#c8ccd1;
437 .oo-ui-toolbar-narrow.oo-ui-toolbar-position-bottom .oo-ui-toolbar-bar:after {
438 border-top: 1px solid
#c8ccd1;
440 .oo-ui-toolbar-actions > .oo-ui-buttonElement {
443 .oo-ui-toolbar-actions > .oo-ui-buttonElement > .oo-ui-buttonElement-button {
447 padding-left: 1.14285714em;
448 padding-right: 1.14285714em;
450 .oo-ui-toolbar-narrow .oo-ui-toolbar-actions > .oo-ui-buttonElement > .oo-ui-buttonElement-button {
451 padding-left: 0.85714286em;
452 padding-right: 0.85714286em;
454 .oo-ui-toolbar-actions > .oo-ui-buttonElement.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:focus {
455 box-shadow: inset
0 0 0 2px #36c, inset
0 0 0 3px #fff;
457 .oo-ui-toolbar-actions > .oo-ui-buttonElement.oo-ui-labelElement > .oo-ui-buttonElement-button {
459 padding-bottom: 0.92857143em;
461 .oo-ui-toolbar-actions > .oo-ui-buttonGroupWidget > .oo-ui-buttonElement > .oo-ui-buttonElement-button {
463 border-width: 0 0 0 1px;
465 padding-bottom: 0.92857143em;
467 .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 {
469 background-color: #36c;
472 .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 {
473 background-color: #447ff5;
474 border-color: #447ff5;
476 .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
,
477 .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
,
478 .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
,
479 .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
,
480 .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 {
482 background-color: #2a4b8d;
483 border-color: #2a4b8d;
486 .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 {
488 box-shadow: inset
0 0 0 1px #36c, inset
0 0 0 2px #fff;
490 .oo-ui-toolbar-actions > .oo-ui-toolbar:not( :last-child ) {
491 border-right: 1px solid
#c8ccd1;