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-02-07T00:27:29Z
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
;
26 padding-left: 3.125em;
28 .oo-ui-tool-with-label .oo-ui-tool-link {
29 padding: 1.015625em 0.9375em 0.9375em 2.96875em;
31 .oo-ui-tool.oo-ui-iconElement .oo-ui-iconElement-icon {
35 .oo-ui-tool .oo-ui-tool-title {
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-iconElement-icon {
45 -webkit-transition: opacity
100ms;
46 -moz-transition: opacity
100ms;
47 transition: opacity
100ms;
49 .oo-ui-tool.oo-ui-widget-enabled .oo-ui-tool-title {
50 -webkit-transition: color
100ms;
51 -moz-transition: color
100ms;
52 transition: color
100ms;
54 .oo-ui-tool.oo-ui-widget-enabled:hover .oo-ui-iconElement-icon {
57 .oo-ui-tool.oo-ui-widget-enabled[class*='oo-ui-flaggedElement'] .oo-ui-iconElement-icon {
60 .oo-ui-tool.oo-ui-widget-disabled .oo-ui-iconElement-icon {
63 .oo-ui-popupTool
.oo-ui-popupWidget-popup
,
64 .oo-ui-popupTool .oo-ui-popupWidget-anchor {
67 .oo-ui-toolGroupTool > .oo-ui-toolGroup {
71 display: inline-block
;
72 vertical-align: middle
;
73 -webkit-box-sizing: border-box
;
74 -moz-box-sizing: border-box
;
75 box-sizing: border-box
;
76 border-right: 1px solid
#c8ccd1;
78 .oo-ui-toolGroup-empty {
81 .oo-ui-toolGroup .oo-ui-tool-link {
82 text-decoration: none
;
85 .oo-ui-toolGroup
.oo-ui-widget-disabled
.oo-ui-tool-link
,
86 .oo-ui-toolGroup .oo-ui-widget-disabled > .oo-ui-tool-link {
90 .oo-ui-toolbar-actions .oo-ui-toolGroup {
92 border-left: 1px solid
#c8ccd1;
94 .oo-ui-toolGroup
.oo-ui-widget-disabled
.oo-ui-indicatorElement-indicator
,
95 .oo-ui-toolGroup.oo-ui-widget-disabled .oo-ui-iconElement-icon {
96 opacity: 0.34 !important
;
98 .oo-ui-barToolGroup > .oo-ui-toolGroup-tools > .oo-ui-tool {
99 display: inline-block
;
103 .oo-ui-barToolGroup > .oo-ui-toolGroup-tools > .oo-ui-tool > .oo-ui-tool-link {
106 .oo-ui-barToolGroup > .oo-ui-toolGroup-tools > .oo-ui-tool > .oo-ui-tool-link .oo-ui-tool-accel {
109 .oo-ui-barToolGroup > .oo-ui-toolGroup-tools > .oo-ui-tool.oo-ui-iconElement > .oo-ui-tool-link .oo-ui-tool-title {
112 .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 {
115 .oo-ui-barToolGroup > .oo-ui-toolGroup-tools > .oo-ui-tool.iconElement > .oo-ui-tool-link > .oo-ui-iconElement-icon {
118 .oo-ui-barToolGroup.oo-ui-widget-enabled > .oo-ui-toolGroup-tools > .oo-ui-tool:not( .oo-ui-toolGroupTool ).oo-ui-widget-enabled:hover {
119 background-color: #eaecf0;
121 .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 {
123 -webkit-transition: color
100ms;
124 -moz-transition: color
100ms;
125 transition: color
100ms;
127 .oo-ui-barToolGroup.oo-ui-widget-enabled > .oo-ui-toolGroup-tools > .oo-ui-tool:not( .oo-ui-toolGroupTool ).oo-ui-tool-active {
128 background-color: #eaf3ff;
130 .oo-ui-barToolGroup.oo-ui-widget-enabled > .oo-ui-toolGroup-tools > .oo-ui-tool:not( .oo-ui-toolGroupTool ).oo-ui-tool-active:hover {
131 background-color: rgba
(41, 98, 204, 0.1);
133 .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 {
136 .oo-ui-barToolGroup
.oo-ui-widget-enabled
.oo-ui-tool
.oo-ui-widget-disabled
> .oo-ui-tool-link
.oo-ui-tool-title
,
137 .oo-ui-barToolGroup.oo-ui-widget-disabled .oo-ui-tool > .oo-ui-tool-link .oo-ui-tool-title {
140 .oo-ui-popupToolGroup {
144 .oo-ui-popupToolGroup-handle {
148 .oo-ui-popupToolGroup.oo-ui-widget-disabled .oo-ui-popupToolGroup-handle {
152 .oo-ui-popupToolGroup .oo-ui-toolGroup-tools {
157 .oo-ui-popupToolGroup-active.oo-ui-widget-enabled > .oo-ui-toolGroup-tools {
160 .oo-ui-popupToolGroup-left > .oo-ui-toolGroup-tools {
163 .oo-ui-popupToolGroup-right > .oo-ui-toolGroup-tools {
166 .oo-ui-popupToolGroup .oo-ui-tool-link {
169 vertical-align: middle
;
172 .oo-ui-popupToolGroup
.oo-ui-tool-link
.oo-ui-tool-accel
,
173 .oo-ui-popupToolGroup .oo-ui-tool-link .oo-ui-tool-title {
175 vertical-align: middle
;
177 .oo-ui-popupToolGroup .oo-ui-tool-link .oo-ui-tool-accel {
180 .oo-ui-popupToolGroup.oo-ui-indicatorElement:not( .oo-ui-labelElement ):not( .oo-ui-iconElement ) {
183 .oo-ui-popupToolGroup-handle {
184 -webkit-box-sizing: border-box
;
185 -moz-box-sizing: border-box
;
186 box-sizing: border-box
;
188 .oo-ui-popupToolGroup-handle .oo-ui-iconElement-icon {
191 .oo-ui-popupToolGroup-handle .oo-ui-indicatorElement-indicator {
192 background-position: center
52%;
195 .oo-ui-toolbar-narrow .oo-ui-popupToolGroup-handle .oo-ui-indicatorElement-indicator {
198 .oo-ui-popupToolGroup
.oo-ui-iconElement
.oo-ui-popupToolGroup-handle
,
199 .oo-ui-popupToolGroup.oo-ui-indicatorElement .oo-ui-popupToolGroup-handle {
200 padding-top: 3.125em;
202 .oo-ui-popupToolGroup.oo-ui-iconElement.oo-ui-indicatorElement .oo-ui-popupToolGroup-handle {
203 padding-left: 3.125em;
205 .oo-ui-popupToolGroup.oo-ui-labelElement .oo-ui-popupToolGroup-handle {
206 padding: 1.015625em 0.9375em 0.9375em;
208 .oo-ui-popupToolGroup.oo-ui-labelElement .oo-ui-popupToolGroup-handle .oo-ui-labelElement-label {
209 line-height: 1.172em;
211 .oo-ui-popupToolGroup.oo-ui-iconElement.oo-ui-labelElement .oo-ui-popupToolGroup-handle {
212 padding-left: 2.96875em;
214 .oo-ui-popupToolGroup.oo-ui-labelElement.oo-ui-indicatorElement .oo-ui-popupToolGroup-handle {
215 padding-right: 2.1875em;
217 .oo-ui-toolbar-narrow .oo-ui-popupToolGroup.oo-ui-labelElement.oo-ui-indicatorElement .oo-ui-popupToolGroup-handle {
218 padding-right: 1.5625em;
220 .oo-ui-popupToolGroup.oo-ui-indicatorElement .oo-ui-popupToolGroup-handle {
221 padding-right: 1.25em;
223 .oo-ui-toolbar-narrow .oo-ui-popupToolGroup.oo-ui-indicatorElement .oo-ui-popupToolGroup-handle {
224 padding-right: 0.9375em;
226 .oo-ui-popupToolGroup:not( .oo-ui-labelElement ):not( .oo-ui-iconElement ) .oo-ui-indicatorElement-indicator {
229 .oo-ui-popupToolGroup-header {
235 .oo-ui-popupToolGroup .oo-ui-toolGroup-tools {
237 border: 1px solid
#c8ccd1;
238 background-color: #fff;
239 box-shadow: 0 2px 2px 0 rgba
(0, 0, 0, 0.25);
242 .oo-ui-toolbar-position-top .oo-ui-popupToolGroup .oo-ui-toolGroup-tools {
245 .oo-ui-toolbar-position-bottom .oo-ui-popupToolGroup .oo-ui-toolGroup-tools {
248 .oo-ui-popupToolGroup .oo-ui-tool-link {
249 padding: 1.015625em 0.9375em 0.9375em 2.96875em;
251 .oo-ui-popupToolGroup .oo-ui-tool-link .oo-ui-tool-title {
254 .oo-ui-popupToolGroup .oo-ui-tool-link .oo-ui-tool-accel {
256 line-height: 1.172em;
258 .oo-ui-popupToolGroup .oo-ui-tool-link .oo-ui-tool-accel:not( :empty ) {
259 padding-left: 1.40625em;
261 .oo-ui-popupToolGroup.oo-ui-widget-enabled > .oo-ui-popupToolGroup-handle {
262 -webkit-transition: background-color
100ms, box-shadow
100ms;
263 -moz-transition: background-color
100ms, box-shadow
100ms;
264 transition: background-color
100ms, box-shadow
100ms;
266 .oo-ui-popupToolGroup.oo-ui-widget-enabled > .oo-ui-popupToolGroup-handle:hover {
267 background-color: #eaecf0;
269 .oo-ui-popupToolGroup.oo-ui-widget-enabled > .oo-ui-popupToolGroup-handle:active {
270 background-color: #eaf3ff;
272 .oo-ui-popupToolGroup
.oo-ui-widget-enabled
> .oo-ui-popupToolGroup-handle
.oo-ui-iconElement-icon
,
273 .oo-ui-popupToolGroup.oo-ui-widget-enabled > .oo-ui-popupToolGroup-handle .oo-ui-indicatorElement-indicator {
275 -webkit-transition: opacity
100ms;
276 -moz-transition: opacity
100ms;
277 transition: opacity
100ms;
279 .oo-ui-popupToolGroup
.oo-ui-widget-enabled
> .oo-ui-popupToolGroup-handle:hover
.oo-ui-iconElement-icon
,
280 .oo-ui-popupToolGroup
.oo-ui-widget-enabled
> .oo-ui-popupToolGroup-handle:active
.oo-ui-iconElement-icon
,
281 .oo-ui-popupToolGroup
.oo-ui-widget-enabled
> .oo-ui-popupToolGroup-handle:hover
.oo-ui-indicatorElement-indicator
,
282 .oo-ui-popupToolGroup.oo-ui-widget-enabled > .oo-ui-popupToolGroup-handle:active .oo-ui-indicatorElement-indicator {
285 .oo-ui-popupToolGroup
.oo-ui-widget-enabled
[class
*='oo-ui-flaggedElement'] > .oo-ui-popupToolGroup-handle
.oo-ui-iconElement-icon
,
286 .oo-ui-popupToolGroup.oo-ui-widget-enabled[class*='oo-ui-flaggedElement'] > .oo-ui-popupToolGroup-handle:hover .oo-ui-iconElement-icon {
289 .oo-ui-popupToolGroup.oo-ui-popupToolGroup-active > .oo-ui-popupToolGroup-handle {
290 background-color: #eaf3ff;
293 .oo-ui-popupToolGroup.oo-ui-popupToolGroup-active > .oo-ui-popupToolGroup-handle:hover {
294 background-color: rgba
(41, 98, 204, 0.1);
297 .oo-ui-popupToolGroup.oo-ui-popupToolGroup-active .oo-ui-tool-active.oo-ui-widget-enabled .oo-ui-tool-link .oo-ui-tool-title {
300 .oo-ui-listToolGroup .oo-ui-tool {
302 -webkit-box-sizing: border-box
;
303 -moz-box-sizing: border-box
;
304 box-sizing: border-box
;
306 .oo-ui-listToolGroup .oo-ui-tool.oo-ui-widget-enabled:hover {
307 background-color: #eaecf0;
310 .oo-ui-listToolGroup .oo-ui-tool-active.oo-ui-widget-enabled {
311 background-color: #eaf3ff;
313 .oo-ui-listToolGroup .oo-ui-tool-active.oo-ui-widget-enabled:hover {
314 background-color: rgba
(41, 98, 204, 0.1);
316 .oo-ui-listToolGroup .oo-ui-tool-active.oo-ui-widget-enabled .oo-ui-tool-link .oo-ui-tool-title {
319 .oo-ui-listToolGroup
.oo-ui-widget-disabled
,
320 .oo-ui-listToolGroup .oo-ui-tool.oo-ui-widget-disabled .oo-ui-tool-title {
323 .oo-ui-menuToolGroup .oo-ui-tool {
326 .oo-ui-menuToolGroup .oo-ui-popupToolGroup-handle {
329 .oo-ui-toolbar-narrow .oo-ui-menuToolGroup .oo-ui-popupToolGroup-handle {
332 .oo-ui-menuToolGroup .oo-ui-tool-link .oo-ui-iconElement-icon {
335 .oo-ui-menuToolGroup .oo-ui-tool-active .oo-ui-tool-link .oo-ui-iconElement-icon {
336 background-image: url
('themes/wikimediaui/images/icons/check-progressive.png');
337 background-image: linear-gradient
(transparent
, transparent
), /* @embed */ url
('themes/wikimediaui/images/icons/check-progressive.svg');
338 background-size: contain
;
340 .oo-ui-menuToolGroup .oo-ui-tool.oo-ui-widget-enabled:hover {
341 background-color: rgba
(41, 98, 204, 0.1);
343 .oo-ui-menuToolGroup .oo-ui-tool-name-menuTool.oo-ui-tool-active {
344 background-color: #eaf3ff;
346 .oo-ui-menuToolGroup
.oo-ui-widget-disabled
,
347 .oo-ui-menuToolGroup .oo-ui-tool.oo-ui-widget-disabled .oo-ui-tool-title {
357 .oo-ui-toolbar-tools
,
358 .oo-ui-toolbar-actions {
359 -webkit-touch-callout: none
;
360 -webkit-user-select: none
;
361 -moz-user-select: none
;
362 -ms-user-select: none
;
365 .oo-ui-toolbar-tools {
369 .oo-ui-toolbar-narrow
.oo-ui-toolbar-tools
,
370 .oo-ui-toolbar-tools .oo-ui-tool {
373 .oo-ui-toolbar-actions {
376 .oo-ui-toolbar-actions .oo-ui-toolbar {
377 display: inline-block
;
379 .oo-ui-toolbar-actions .oo-ui-popupWidget {
380 -webkit-touch-callout: default
;
381 -webkit-user-select: text
;
382 -moz-user-select: text
;
383 -ms-user-select: text
;
387 background-color: #fff;
390 .oo-ui-toolbar-position-top > .oo-ui-toolbar-bar {
391 border-bottom: 1px solid
#c8ccd1;
392 box-shadow: 0 1px 1px 0 rgba
(0, 0, 0, 0.1);
394 .oo-ui-toolbar-position-bottom > .oo-ui-toolbar-bar {
395 border-top: 1px solid
#c8ccd1;
396 box-shadow: 0 -1px 1px 0 rgba
(0, 0, 0, 0.1);
398 .oo-ui-toolbar-bar .oo-ui-toolbar-bar {
399 background-color: transparent
;
403 .oo-ui-toolbar-narrow-bar:after {
412 .oo-ui-toolbar-narrow.oo-ui-toolbar-position-top .oo-ui-toolbar-bar:after {
413 border-bottom: 1px solid
#c8ccd1;
415 .oo-ui-toolbar-narrow.oo-ui-toolbar-position-bottom .oo-ui-toolbar-bar:after {
416 border-top: 1px solid
#c8ccd1;
418 .oo-ui-toolbar-actions > .oo-ui-buttonElement {
421 .oo-ui-toolbar-actions > .oo-ui-buttonElement > .oo-ui-buttonElement-button {
424 padding-top: 3.125em;
425 padding-left: 1.25em;
426 padding-right: 1.25em;
428 .oo-ui-toolbar-narrow .oo-ui-toolbar-actions > .oo-ui-buttonElement > .oo-ui-buttonElement-button {
429 padding-left: 0.9375em;
430 padding-right: 0.9375em;
432 .oo-ui-toolbar-actions > .oo-ui-buttonElement.oo-ui-labelElement > .oo-ui-buttonElement-button {
433 padding-top: 1.015625em;
434 padding-bottom: 0.9375em;
436 .oo-ui-toolbar-actions > .oo-ui-buttonGroupWidget > .oo-ui-buttonElement > .oo-ui-buttonElement-button {
439 .oo-ui-toolbar-actions > .oo-ui-toolbar:not( :last-child ) {
440 border-right: 1px solid
#c8ccd1;