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-08-22T21:37:41Z
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 background: transparent
;
26 -webkit-box-sizing: border-box
;
27 -moz-box-sizing: border-box
;
28 box-sizing: border-box
;
30 .oo-ui-window-content {
37 .oo-ui-window-content:focus {
42 -webkit-touch-callout: none
;
43 -webkit-user-select: none
;
44 -moz-user-select: none
;
45 -ms-user-select: none
;
53 .oo-ui-window-overlay {
59 .oo-ui-dialog-content
> .oo-ui-window-head
,
60 .oo-ui-dialog-content
> .oo-ui-window-body
,
61 .oo-ui-dialog-content > .oo-ui-window-foot {
65 -webkit-box-sizing: border-box
;
66 -moz-box-sizing: border-box
;
67 box-sizing: border-box
;
69 .oo-ui-dialog-content > .oo-ui-window-head {
74 .oo-ui-dialog-content > .oo-ui-window-body {
80 .oo-ui-dialog-content > .oo-ui-window-foot {
84 .oo-ui-messageDialog-actions .oo-ui-actionWidget {
88 .oo-ui-messageDialog-actions .oo-ui-actionWidget .oo-ui-buttonElement-button {
91 .oo-ui-messageDialog-actions .oo-ui-actionWidget .oo-ui-labelElement-label {
96 .oo-ui-messageDialog-actions-horizontal {
101 .oo-ui-messageDialog-actions-horizontal .oo-ui-actionWidget {
105 .oo-ui-messageDialog-actions-vertical {
108 .oo-ui-messageDialog-actions-vertical .oo-ui-actionWidget {
111 text-overflow: ellipsis
;
113 .oo-ui-messageDialog-content > .oo-ui-window-foot {
114 outline: 1px solid
#a2a9b1;
116 .oo-ui-messageDialog-title
,
117 .oo-ui-messageDialog-message {
121 .oo-ui-messageDialog-title
.oo-ui-labelElement
,
122 .oo-ui-messageDialog-message.oo-ui-labelElement {
125 .oo-ui-messageDialog-title {
130 .oo-ui-messageDialog-message {
136 .oo-ui-messageDialog-actions-horizontal .oo-ui-actionWidget {
137 border-right: 1px solid
#a2a9b1;
140 .oo-ui-messageDialog-actions-horizontal .oo-ui-actionWidget:last-child {
141 border-right-width: 0;
143 .oo-ui-messageDialog-actions-vertical .oo-ui-actionWidget {
144 border-bottom: 1px solid
#a2a9b1;
147 .oo-ui-messageDialog-actions-vertical .oo-ui-actionWidget:last-child {
148 border-bottom-width: 0;
150 .oo-ui-messageDialog-actions .oo-ui-actionWidget {
151 min-height: 3.4375em;
154 .oo-ui-messageDialog-actions .oo-ui-actionWidget:last-child {
157 .oo-ui-messageDialog-actions .oo-ui-actionWidget:first-child {
160 .oo-ui-messageDialog-actions .oo-ui-actionWidget .oo-ui-buttonElement-button {
165 .oo-ui-messageDialog-actions .oo-ui-actionWidget.oo-ui-labelElement .oo-ui-labelElement-label {
166 line-height: 3.4375em;
169 .oo-ui-messageDialog-actions .oo-ui-actionWidget.oo-ui-widget-enabled .oo-ui-buttonElement-button:hover {
170 background-color: #f8f9fa;
172 .oo-ui-messageDialog-actions .oo-ui-actionWidget.oo-ui-widget-enabled .oo-ui-buttonElement-button:active {
173 background-color: #c8ccd1;
175 .oo-ui-messageDialog-actions .oo-ui-actionWidget.oo-ui-widget-enabled .oo-ui-buttonElement-button:focus {
176 box-shadow: inset
0 0 0 1px #36c, 0 0 0 1px #36c;
178 .oo-ui-messageDialog-actions
.oo-ui-actionWidget
.oo-ui-widget-enabled
.oo-ui-flaggedElement-progressive
.oo-ui-buttonElement-button:hover
,
179 .oo-ui-messageDialog-actions .oo-ui-actionWidget.oo-ui-widget-enabled.oo-ui-flaggedElement-constructive .oo-ui-buttonElement-button:hover {
180 background-color: #eaf3ff;
182 .oo-ui-messageDialog-actions
.oo-ui-actionWidget
.oo-ui-widget-enabled
.oo-ui-flaggedElement-progressive
.oo-ui-buttonElement-button:active
,
183 .oo-ui-messageDialog-actions .oo-ui-actionWidget.oo-ui-widget-enabled.oo-ui-flaggedElement-constructive .oo-ui-buttonElement-button:active {
184 background-color: rgba
(8, 126, 204, 0.1);
186 .oo-ui-messageDialog-actions
.oo-ui-actionWidget
.oo-ui-widget-enabled
.oo-ui-flaggedElement-progressive
.oo-ui-labelElement-label
,
187 .oo-ui-messageDialog-actions .oo-ui-actionWidget.oo-ui-widget-enabled.oo-ui-flaggedElement-constructive .oo-ui-labelElement-label {
190 .oo-ui-messageDialog-actions .oo-ui-actionWidget.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive .oo-ui-buttonElement-button:hover {
191 background-color: #fee7e6;
193 .oo-ui-messageDialog-actions .oo-ui-actionWidget.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive .oo-ui-buttonElement-button:active {
194 background-color: rgba
(212, 83, 83, 0.1);
196 .oo-ui-processDialog-location {
198 text-overflow: ellipsis
;
201 .oo-ui-processDialog-title {
205 .oo-ui-processDialog-actions-safe
.oo-ui-actionWidget
,
206 .oo-ui-processDialog-actions-primary
.oo-ui-actionWidget
,
207 .oo-ui-processDialog-actions-other .oo-ui-actionWidget {
210 .oo-ui-processDialog-actions-safe
,
211 .oo-ui-processDialog-actions-primary {
216 .oo-ui-processDialog-actions-safe {
219 .oo-ui-processDialog-actions-primary {
222 .oo-ui-processDialog-errors {
232 .oo-ui-processDialog-content .oo-ui-window-head {
235 .oo-ui-processDialog-content .oo-ui-window-body {
237 outline: 1px solid
#c8ccd1;
239 .oo-ui-processDialog-navigation {
243 .oo-ui-processDialog-location {
248 .oo-ui-processDialog-title {
250 line-height: 3.4375em;
252 .oo-ui-processDialog-actions-safe
.oo-ui-actionWidget
.oo-ui-buttonElement-framed
,
253 .oo-ui-processDialog-actions-primary
.oo-ui-actionWidget
.oo-ui-buttonElement-framed
,
254 .oo-ui-processDialog-actions-other .oo-ui-actionWidget.oo-ui-buttonElement-framed {
257 .oo-ui-processDialog-actions-safe
.oo-ui-actionWidget
.oo-ui-buttonElement-frameless
.oo-ui-iconElement:first-child
,
258 .oo-ui-processDialog-actions-primary
.oo-ui-actionWidget
.oo-ui-buttonElement-frameless
.oo-ui-iconElement:first-child
,
259 .oo-ui-processDialog-actions-other .oo-ui-actionWidget.oo-ui-buttonElement-frameless.oo-ui-iconElement:first-child {
262 .oo-ui-processDialog-actions-safe
.oo-ui-actionWidget
.oo-ui-buttonElement-frameless
.oo-ui-iconElement
> .oo-ui-buttonElement-button
,
263 .oo-ui-processDialog-actions-primary
.oo-ui-actionWidget
.oo-ui-buttonElement-frameless
.oo-ui-iconElement
> .oo-ui-buttonElement-button
,
264 .oo-ui-processDialog-actions-other .oo-ui-actionWidget.oo-ui-buttonElement-frameless.oo-ui-iconElement > .oo-ui-buttonElement-button {
265 padding-left: 2.875em;
267 min-height: 3.4375em;
269 .oo-ui-processDialog-actions-safe
.oo-ui-actionWidget
.oo-ui-buttonElement-frameless
.oo-ui-iconElement
> .oo-ui-buttonElement-button
> .oo-ui-iconElement-icon
,
270 .oo-ui-processDialog-actions-primary
.oo-ui-actionWidget
.oo-ui-buttonElement-frameless
.oo-ui-iconElement
> .oo-ui-buttonElement-button
> .oo-ui-iconElement-icon
,
271 .oo-ui-processDialog-actions-other .oo-ui-actionWidget.oo-ui-buttonElement-frameless.oo-ui-iconElement > .oo-ui-buttonElement-button > .oo-ui-iconElement-icon {
274 .oo-ui-processDialog-actions-safe
.oo-ui-actionWidget
.oo-ui-buttonElement-frameless
.oo-ui-labelElement:first-child
,
275 .oo-ui-processDialog-actions-primary
.oo-ui-actionWidget
.oo-ui-buttonElement-frameless
.oo-ui-labelElement:first-child
,
276 .oo-ui-processDialog-actions-other .oo-ui-actionWidget.oo-ui-buttonElement-frameless.oo-ui-labelElement:first-child {
279 .oo-ui-processDialog-actions-safe
.oo-ui-actionWidget
.oo-ui-buttonElement-frameless
.oo-ui-labelElement
> .oo-ui-buttonElement-button
,
280 .oo-ui-processDialog-actions-primary
.oo-ui-actionWidget
.oo-ui-buttonElement-frameless
.oo-ui-labelElement
> .oo-ui-buttonElement-button
,
281 .oo-ui-processDialog-actions-other .oo-ui-actionWidget.oo-ui-buttonElement-frameless.oo-ui-labelElement > .oo-ui-buttonElement-button {
284 .oo-ui-processDialog-actions-safe
.oo-ui-actionWidget
.oo-ui-buttonElement-frameless
.oo-ui-labelElement
.oo-ui-iconElement
> .oo-ui-buttonElement-button
,
285 .oo-ui-processDialog-actions-primary
.oo-ui-actionWidget
.oo-ui-buttonElement-frameless
.oo-ui-labelElement
.oo-ui-iconElement
> .oo-ui-buttonElement-button
,
286 .oo-ui-processDialog-actions-other .oo-ui-actionWidget.oo-ui-buttonElement-frameless.oo-ui-labelElement.oo-ui-iconElement > .oo-ui-buttonElement-button {
287 padding-left: 2.625em;
289 .oo-ui-processDialog-actions-safe
.oo-ui-actionWidget
.oo-ui-buttonElement-frameless
.oo-ui-labelElement-label
,
290 .oo-ui-processDialog-actions-primary
.oo-ui-actionWidget
.oo-ui-buttonElement-frameless
.oo-ui-labelElement-label
,
291 .oo-ui-processDialog-actions-other .oo-ui-actionWidget.oo-ui-buttonElement-frameless .oo-ui-labelElement-label {
292 line-height: 1.875em;
294 .oo-ui-processDialog-actions-safe
.oo-ui-actionWidget
.oo-ui-buttonElement-frameless:hover
,
295 .oo-ui-processDialog-actions-primary .oo-ui-actionWidget.oo-ui-buttonElement-frameless:hover {
296 background-color: rgba
(0, 0, 0, 0.05);
298 .oo-ui-processDialog-actions-safe
.oo-ui-actionWidget
.oo-ui-buttonElement-frameless:active
,
299 .oo-ui-processDialog-actions-primary .oo-ui-actionWidget.oo-ui-buttonElement-frameless:active {
300 background-color: rgba
(0, 0, 0, 0.1);
302 .oo-ui-processDialog-actions-safe
.oo-ui-actionWidget
.oo-ui-buttonElement-frameless
.oo-ui-flaggedElement-progressive:hover
,
303 .oo-ui-processDialog-actions-primary
.oo-ui-actionWidget
.oo-ui-buttonElement-frameless
.oo-ui-flaggedElement-progressive:hover
,
304 .oo-ui-processDialog-actions-safe
.oo-ui-actionWidget
.oo-ui-buttonElement-frameless
.oo-ui-flaggedElement-constructive:hover
,
305 .oo-ui-processDialog-actions-primary .oo-ui-actionWidget.oo-ui-buttonElement-frameless.oo-ui-flaggedElement-constructive:hover {
306 background-color: rgba
(8, 126, 204, 0.05);
308 .oo-ui-processDialog-actions-safe
.oo-ui-actionWidget
.oo-ui-buttonElement-frameless
.oo-ui-flaggedElement-progressive:active
,
309 .oo-ui-processDialog-actions-primary
.oo-ui-actionWidget
.oo-ui-buttonElement-frameless
.oo-ui-flaggedElement-progressive:active
,
310 .oo-ui-processDialog-actions-safe
.oo-ui-actionWidget
.oo-ui-buttonElement-frameless
.oo-ui-flaggedElement-constructive:active
,
311 .oo-ui-processDialog-actions-primary .oo-ui-actionWidget.oo-ui-buttonElement-frameless.oo-ui-flaggedElement-constructive:active {
312 background-color: rgba
(8, 126, 204, 0.1);
314 .oo-ui-processDialog-actions-safe
.oo-ui-actionWidget
.oo-ui-buttonElement-frameless
.oo-ui-flaggedElement-progressive
.oo-ui-labelElement-label
,
315 .oo-ui-processDialog-actions-primary
.oo-ui-actionWidget
.oo-ui-buttonElement-frameless
.oo-ui-flaggedElement-progressive
.oo-ui-labelElement-label
,
316 .oo-ui-processDialog-actions-safe
.oo-ui-actionWidget
.oo-ui-buttonElement-frameless
.oo-ui-flaggedElement-constructive
.oo-ui-labelElement-label
,
317 .oo-ui-processDialog-actions-primary .oo-ui-actionWidget.oo-ui-buttonElement-frameless.oo-ui-flaggedElement-constructive .oo-ui-labelElement-label {
320 .oo-ui-processDialog-actions-safe
.oo-ui-actionWidget
.oo-ui-buttonElement-frameless
.oo-ui-flaggedElement-destructive:hover
,
321 .oo-ui-processDialog-actions-primary .oo-ui-actionWidget.oo-ui-buttonElement-frameless.oo-ui-flaggedElement-destructive:hover {
322 background-color: rgba
(212, 83, 83, 0.05);
324 .oo-ui-processDialog-actions-safe
.oo-ui-actionWidget
.oo-ui-buttonElement-frameless
.oo-ui-flaggedElement-destructive:active
,
325 .oo-ui-processDialog-actions-primary .oo-ui-actionWidget.oo-ui-buttonElement-frameless.oo-ui-flaggedElement-destructive:active {
326 background-color: rgba
(212, 83, 83, 0.1);
328 .oo-ui-processDialog-actions-other .oo-ui-actionWidget.oo-ui-buttonElement {
331 .oo-ui-processDialog > .oo-ui-window-frame {
334 .oo-ui-processDialog-errors {
335 background-color: rgba
(255, 255, 255, 0.9);
336 padding: 3em 3em 1.5em 3em;
339 .oo-ui-processDialog-errors .oo-ui-buttonWidget {
340 margin: 2em 1em 2em 1em;
342 .oo-ui-processDialog-errors-title {
347 .oo-ui-processDialog-error {
351 border: 1px solid
#d33;
352 background-color: #fff7f7;
355 .oo-ui-windowManager-modal > .oo-ui-dialog {
362 .oo-ui-windowManager-modal > .oo-ui-dialog.oo-ui-window-active {
371 .oo-ui-windowManager-modal > .oo-ui-dialog.oo-ui-window-setup > .oo-ui-window-frame {
380 .oo-ui-windowManager-fullscreen > .oo-ui-dialog > .oo-ui-window-frame {
386 .oo-ui-windowManager-modal > .oo-ui-dialog {
387 background-color: rgba
(255, 255, 255, 0.5);
389 -webkit-transition: opacity
250ms;
390 -moz-transition: opacity
250ms;
391 transition: opacity
250ms;
393 .oo-ui-windowManager-modal > .oo-ui-dialog > .oo-ui-window-frame {
394 background-color: #fff;
396 -webkit-transform: scale
(0.5);
397 -moz-transform: scale
(0.5);
398 -ms-transform: scale
(0.5);
399 transform: scale
(0.5);
400 -webkit-transition: all
250ms;
401 -moz-transition: all
250ms;
402 transition: all
250ms;
404 .oo-ui-windowManager-modal > .oo-ui-dialog.oo-ui-window-setup {
407 .oo-ui-windowManager-modal > .oo-ui-dialog.oo-ui-window-ready > .oo-ui-window-frame {
409 -webkit-transform: scale
(1);
410 -moz-transform: scale
(1);
411 -ms-transform: scale
(1);
414 .oo-ui-windowManager-modal.oo-ui-windowManager-floating > .oo-ui-dialog > .oo-ui-window-frame {
418 max-height: calc
( 100% - 2em );
419 border: 1px solid
#a2a9b1;
421 box-shadow: 0 2px 2px 0 rgba
(0, 0, 0, 0.25);