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-10-12T21:25:55Z
12 * WikimediaUI Base v0.9.2
13 * Wikimedia Foundation user interface base variables
17 /* Box Model properties */
19 /* Typography incl. print properties */
20 /* Other Properties */
21 /* Animation & Transition */
23 -webkit-box-sizing: border-box
;
24 -moz-box-sizing: border-box
;
25 box-sizing: border-box
;
27 .oo-ui-tool .oo-ui-tool-link {
29 -webkit-box-sizing: border-box
;
30 -moz-box-sizing: border-box
;
31 box-sizing: border-box
;
33 padding-left: 3.125em;
35 .oo-ui-tool-with-label .oo-ui-tool-link {
36 padding: 1.015625em 0.9375em 0.9375em 2.96875em;
38 .oo-ui-tool.oo-ui-iconElement .oo-ui-iconElement-icon {
42 .oo-ui-tool .oo-ui-tool-title {
45 .oo-ui-tool.oo-ui-widget-enabled {
46 -webkit-transition: background-color
100ms;
47 -moz-transition: background-color
100ms;
48 transition: background-color
100ms;
50 .oo-ui-tool.oo-ui-widget-enabled .oo-ui-iconElement-icon {
52 -webkit-transition: opacity
100ms;
53 -moz-transition: opacity
100ms;
54 transition: opacity
100ms;
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 {
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.oo-ui-widget-disabled .oo-ui-popupToolGroup-handle {
159 .oo-ui-popupToolGroup .oo-ui-toolGroup-tools {
164 .oo-ui-popupToolGroup-active.oo-ui-widget-enabled > .oo-ui-toolGroup-tools {
167 .oo-ui-popupToolGroup-left > .oo-ui-toolGroup-tools {
170 .oo-ui-popupToolGroup-right > .oo-ui-toolGroup-tools {
173 .oo-ui-popupToolGroup .oo-ui-tool-link {
176 vertical-align: middle
;
179 .oo-ui-popupToolGroup
.oo-ui-tool-link
.oo-ui-tool-accel
,
180 .oo-ui-popupToolGroup .oo-ui-tool-link .oo-ui-tool-title {
182 vertical-align: middle
;
184 .oo-ui-popupToolGroup .oo-ui-tool-link .oo-ui-tool-accel {
187 .oo-ui-popupToolGroup.oo-ui-indicatorElement:not( .oo-ui-labelElement ):not( .oo-ui-iconElement ) {
190 .oo-ui-popupToolGroup-handle {
191 -webkit-box-sizing: border-box
;
192 -moz-box-sizing: border-box
;
193 box-sizing: border-box
;
195 .oo-ui-popupToolGroup-handle .oo-ui-iconElement-icon {
198 .oo-ui-popupToolGroup-handle .oo-ui-indicatorElement-indicator {
199 background-position: center
52%;
202 .oo-ui-toolbar-narrow .oo-ui-popupToolGroup-handle .oo-ui-indicatorElement-indicator {
205 .oo-ui-popupToolGroup
.oo-ui-iconElement
.oo-ui-popupToolGroup-handle
,
206 .oo-ui-popupToolGroup.oo-ui-indicatorElement .oo-ui-popupToolGroup-handle {
207 padding-top: 3.125em;
209 .oo-ui-popupToolGroup.oo-ui-iconElement.oo-ui-indicatorElement .oo-ui-popupToolGroup-handle {
210 padding-left: 3.125em;
212 .oo-ui-popupToolGroup.oo-ui-labelElement .oo-ui-popupToolGroup-handle {
213 padding: 1.015625em 0.9375em 0.9375em;
215 .oo-ui-popupToolGroup.oo-ui-labelElement .oo-ui-popupToolGroup-handle .oo-ui-labelElement-label {
216 line-height: 1.172em;
218 .oo-ui-popupToolGroup.oo-ui-iconElement.oo-ui-labelElement .oo-ui-popupToolGroup-handle {
219 padding-left: 2.96875em;
221 .oo-ui-popupToolGroup.oo-ui-labelElement.oo-ui-indicatorElement .oo-ui-popupToolGroup-handle {
222 padding-right: 2.1875em;
224 .oo-ui-toolbar-narrow .oo-ui-popupToolGroup.oo-ui-labelElement.oo-ui-indicatorElement .oo-ui-popupToolGroup-handle {
225 padding-right: 1.5625em;
227 .oo-ui-popupToolGroup.oo-ui-indicatorElement .oo-ui-popupToolGroup-handle {
228 padding-right: 1.25em;
230 .oo-ui-toolbar-narrow .oo-ui-popupToolGroup.oo-ui-indicatorElement .oo-ui-popupToolGroup-handle {
231 padding-right: 0.9375em;
233 .oo-ui-popupToolGroup:not( .oo-ui-labelElement ):not( .oo-ui-iconElement ) .oo-ui-indicatorElement-indicator {
236 .oo-ui-popupToolGroup-header {
242 .oo-ui-popupToolGroup .oo-ui-toolGroup-tools {
244 border: 1px solid
#c8ccd1;
245 background-color: #fff;
246 box-shadow: 0 2px 2px 0 rgba
(0, 0, 0, 0.25);
249 .oo-ui-toolbar-position-top .oo-ui-popupToolGroup .oo-ui-toolGroup-tools {
252 .oo-ui-toolbar-position-bottom .oo-ui-popupToolGroup .oo-ui-toolGroup-tools {
255 .oo-ui-popupToolGroup .oo-ui-tool-link {
256 padding: 1.015625em 0.9375em 0.9375em 2.96875em;
258 .oo-ui-popupToolGroup .oo-ui-tool-link .oo-ui-tool-title {
261 .oo-ui-popupToolGroup .oo-ui-tool-link .oo-ui-tool-accel {
263 line-height: 1.172em;
265 .oo-ui-popupToolGroup .oo-ui-tool-link .oo-ui-tool-accel:not( :empty ) {
266 padding-left: 1.40625em;
268 .oo-ui-popupToolGroup.oo-ui-widget-enabled > .oo-ui-popupToolGroup-handle {
269 -webkit-transition: background-color
100ms, box-shadow
100ms;
270 -moz-transition: background-color
100ms, box-shadow
100ms;
271 transition: background-color
100ms, box-shadow
100ms;
273 .oo-ui-popupToolGroup.oo-ui-widget-enabled > .oo-ui-popupToolGroup-handle:hover {
274 background-color: #eaecf0;
276 .oo-ui-popupToolGroup.oo-ui-widget-enabled > .oo-ui-popupToolGroup-handle:active {
277 background-color: #eaf3ff;
279 .oo-ui-popupToolGroup
.oo-ui-widget-enabled
> .oo-ui-popupToolGroup-handle
.oo-ui-iconElement-icon
,
280 .oo-ui-popupToolGroup.oo-ui-widget-enabled > .oo-ui-popupToolGroup-handle .oo-ui-indicatorElement-indicator {
282 -webkit-transition: opacity
100ms;
283 -moz-transition: opacity
100ms;
284 transition: opacity
100ms;
286 .oo-ui-popupToolGroup
.oo-ui-widget-enabled
> .oo-ui-popupToolGroup-handle:hover
.oo-ui-iconElement-icon
,
287 .oo-ui-popupToolGroup
.oo-ui-widget-enabled
> .oo-ui-popupToolGroup-handle:active
.oo-ui-iconElement-icon
,
288 .oo-ui-popupToolGroup
.oo-ui-widget-enabled
> .oo-ui-popupToolGroup-handle:hover
.oo-ui-indicatorElement-indicator
,
289 .oo-ui-popupToolGroup.oo-ui-widget-enabled > .oo-ui-popupToolGroup-handle:active .oo-ui-indicatorElement-indicator {
292 .oo-ui-popupToolGroup
.oo-ui-widget-enabled
[class
*='oo-ui-flaggedElement'] > .oo-ui-popupToolGroup-handle
.oo-ui-iconElement-icon
,
293 .oo-ui-popupToolGroup.oo-ui-widget-enabled[class*='oo-ui-flaggedElement'] > .oo-ui-popupToolGroup-handle:hover .oo-ui-iconElement-icon {
296 .oo-ui-popupToolGroup.oo-ui-popupToolGroup-active > .oo-ui-popupToolGroup-handle {
297 background-color: #eaf3ff;
300 .oo-ui-popupToolGroup.oo-ui-popupToolGroup-active > .oo-ui-popupToolGroup-handle:hover {
301 background-color: rgba
(41, 98, 204, 0.1);
304 .oo-ui-popupToolGroup.oo-ui-popupToolGroup-active .oo-ui-tool-active.oo-ui-widget-enabled .oo-ui-tool-link .oo-ui-tool-title {
307 .oo-ui-listToolGroup .oo-ui-tool {
309 -webkit-box-sizing: border-box
;
310 -moz-box-sizing: border-box
;
311 box-sizing: border-box
;
313 .oo-ui-listToolGroup .oo-ui-tool.oo-ui-widget-enabled:hover {
314 background-color: #eaecf0;
317 .oo-ui-listToolGroup .oo-ui-tool-active.oo-ui-widget-enabled {
318 background-color: #eaf3ff;
320 .oo-ui-listToolGroup .oo-ui-tool-active.oo-ui-widget-enabled:hover {
321 background-color: rgba
(41, 98, 204, 0.1);
323 .oo-ui-listToolGroup .oo-ui-tool-active.oo-ui-widget-enabled .oo-ui-tool-link .oo-ui-tool-title {
326 .oo-ui-listToolGroup
.oo-ui-widget-disabled
,
327 .oo-ui-listToolGroup .oo-ui-tool.oo-ui-widget-disabled .oo-ui-tool-title {
330 .oo-ui-menuToolGroup .oo-ui-tool {
333 .oo-ui-menuToolGroup .oo-ui-popupToolGroup-handle {
336 .oo-ui-toolbar-narrow .oo-ui-menuToolGroup .oo-ui-popupToolGroup-handle {
339 .oo-ui-menuToolGroup .oo-ui-tool-link .oo-ui-iconElement-icon {
342 .oo-ui-menuToolGroup .oo-ui-tool-active .oo-ui-tool-link .oo-ui-iconElement-icon {
343 background-image: url
('themes/wikimediaui/images/icons/check-progressive.png');
344 background-image: -webkit-linear-gradient
(transparent
, transparent
), /* @embed */ url
('themes/wikimediaui/images/icons/check-progressive.svg');
345 background-image: linear-gradient
(transparent
, transparent
), /* @embed */ url
('themes/wikimediaui/images/icons/check-progressive.svg');
346 background-image: -o-linear-gradient
(transparent
, transparent
), url
('themes/wikimediaui/images/icons/check-progressive.png');
347 background-size: contain
;
349 .oo-ui-menuToolGroup .oo-ui-tool.oo-ui-widget-enabled:hover {
350 background-color: rgba
(41, 98, 204, 0.1);
352 .oo-ui-menuToolGroup .oo-ui-tool-name-menuTool.oo-ui-tool-active {
353 background-color: #eaf3ff;
355 .oo-ui-menuToolGroup
.oo-ui-widget-disabled
,
356 .oo-ui-menuToolGroup .oo-ui-tool.oo-ui-widget-disabled .oo-ui-tool-title {
366 .oo-ui-toolbar-tools
,
367 .oo-ui-toolbar-actions {
368 -webkit-touch-callout: none
;
369 -webkit-user-select: none
;
370 -moz-user-select: none
;
371 -ms-user-select: none
;
374 .oo-ui-toolbar-tools {
378 .oo-ui-toolbar-narrow
.oo-ui-toolbar-tools
,
379 .oo-ui-toolbar-tools .oo-ui-tool {
382 .oo-ui-toolbar-actions {
385 .oo-ui-toolbar-actions .oo-ui-toolbar {
386 display: inline-block
;
388 .oo-ui-toolbar-actions .oo-ui-popupWidget {
389 -webkit-touch-callout: default
;
390 -webkit-user-select: all
;
391 -moz-user-select: all
;
392 -ms-user-select: all
;
396 background-color: #fff;
399 .oo-ui-toolbar-position-top > .oo-ui-toolbar-bar {
400 border-bottom: 1px solid
#c8ccd1;
401 box-shadow: 0 1px 1px 0 rgba
(0, 0, 0, 0.1);
403 .oo-ui-toolbar-position-bottom > .oo-ui-toolbar-bar {
404 border-top: 1px solid
#c8ccd1;
405 box-shadow: 0 -1px 1px 0 rgba
(0, 0, 0, 0.1);
407 .oo-ui-toolbar-bar .oo-ui-toolbar-bar {
408 background-color: transparent
;
412 .oo-ui-toolbar-narrow-bar:after {
421 .oo-ui-toolbar-narrow.oo-ui-toolbar-position-top .oo-ui-toolbar-bar:after {
422 border-bottom: 1px solid
#c8ccd1;
424 .oo-ui-toolbar-narrow.oo-ui-toolbar-position-bottom .oo-ui-toolbar-bar:after {
425 border-top: 1px solid
#c8ccd1;
427 .oo-ui-toolbar-actions .oo-ui-buttonElement {
430 .oo-ui-toolbar-actions .oo-ui-buttonElement > .oo-ui-buttonElement-button {
433 padding-top: 3.125em;
434 padding-left: 1.25em;
435 padding-right: 1.25em;
437 .oo-ui-toolbar-narrow .oo-ui-toolbar-actions .oo-ui-buttonElement > .oo-ui-buttonElement-button {
438 padding-left: 0.9375em;
439 padding-right: 0.9375em;
441 .oo-ui-toolbar-actions .oo-ui-buttonElement.oo-ui-labelElement > .oo-ui-buttonElement-button {
442 padding-top: 1.015625em;
443 padding-bottom: 0.9375em;
445 .oo-ui-toolbar-actions > .oo-ui-buttonGroupWidget > .oo-ui-buttonElement > .oo-ui-buttonElement-button {
448 .oo-ui-toolbar-actions > .oo-ui-toolbar:not( :last-child ) {
449 border-right: 1px solid
#c8ccd1;