X-Git-Url: https://git.heureux-cyclage.org/?a=blobdiff_plain;f=resources%2Flib%2Foojs-ui%2Foojs-ui-mediawiki.svg.css;h=0d16099e020b7245750b25e6e0c548b449e607fc;hb=27decacdd54268c2920b3bf95671735d13940f77;hp=815ef02dcb817eef0ef7458ba3f8a79fdf7d41ee;hpb=0c8327466bebd44a9c0f60cd010307446b9ead63;p=lhc%2Fweb%2Fwiklou.git diff --git a/resources/lib/oojs-ui/oojs-ui-mediawiki.svg.css b/resources/lib/oojs-ui/oojs-ui-mediawiki.svg.css index 815ef02dcb..0d16099e02 100644 --- a/resources/lib/oojs-ui/oojs-ui-mediawiki.svg.css +++ b/resources/lib/oojs-ui/oojs-ui-mediawiki.svg.css @@ -1,12 +1,12 @@ /*! - * OOjs UI v0.6.1 + * OOjs UI v0.7.0 * https://www.mediawiki.org/wiki/OOjs_UI * * Copyright 2011–2015 OOjs Team and other contributors. * Released under the MIT license * http://oojs.mit-license.org * - * Date: 2015-01-05T13:04:47Z + * Date: 2015-02-12T00:04:52Z */ .oo-ui-progressBarWidget-slide-frames from { margin-left: -40%; @@ -62,6 +62,9 @@ .oo-ui-ltr { direction: ltr; } +.oo-ui-element-hidden { + display: none !important; +} .oo-ui-buttonElement > .oo-ui-buttonElement-button { cursor: pointer; display: inline-block; @@ -134,9 +137,6 @@ .oo-ui-buttonElement.oo-ui-widget-disabled > .oo-ui-buttonElement-button > .oo-ui-indicatorElement-indicator { opacity: 0.2; } -.oo-ui-buttonElement.oo-ui-widget-disabled > .oo-ui-buttonElement-button > .oo-ui-labelElement-label { - color: #dddddd; -} .oo-ui-buttonElement-frameless > .oo-ui-buttonElement-button:hover, .oo-ui-buttonElement-frameless > .oo-ui-buttonElement-button:focus { outline: none; @@ -147,7 +147,6 @@ .oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button > .oo-ui-labelElement-label { color: #757575; } -.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-buttonElement-active > .oo-ui-buttonElement-button > .oo-ui-labelElement-label, .oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button > .oo-ui-labelElement-label { color: #444444; } @@ -159,9 +158,9 @@ color: #777777; } .oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive.oo-ui-widget-enabled > .oo-ui-buttonElement-button:active > .oo-ui-labelElement-label, -.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive.oo-ui-widget-enabled.oo-ui-buttonElement-active > .oo-ui-buttonElement-button > .oo-ui-labelElement-label, .oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive.oo-ui-widget-enabled.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button > .oo-ui-labelElement-label { color: #015ccc; + box-shadow: none; } .oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-constructive > .oo-ui-buttonElement-button:hover > .oo-ui-labelElement-label, .oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-constructive > .oo-ui-buttonElement-button:focus > .oo-ui-labelElement-label { @@ -171,9 +170,9 @@ color: #777777; } .oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-constructive.oo-ui-widget-enabled > .oo-ui-buttonElement-button:active > .oo-ui-labelElement-label, -.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-constructive.oo-ui-widget-enabled.oo-ui-buttonElement-active > .oo-ui-buttonElement-button > .oo-ui-labelElement-label, .oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-constructive.oo-ui-widget-enabled.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button > .oo-ui-labelElement-label { color: #008c6d; + box-shadow: none; } .oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button:hover > .oo-ui-labelElement-label, .oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button:focus > .oo-ui-labelElement-label { @@ -183,9 +182,12 @@ color: #777777; } .oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive.oo-ui-widget-enabled > .oo-ui-buttonElement-button:active > .oo-ui-labelElement-label, -.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive.oo-ui-widget-enabled.oo-ui-buttonElement-active > .oo-ui-buttonElement-button > .oo-ui-labelElement-label, .oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive.oo-ui-widget-enabled.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button > .oo-ui-labelElement-label { color: #a7170f; + box-shadow: none; +} +.oo-ui-buttonElement-frameless.oo-ui-widget-disabled > .oo-ui-buttonElement-button { + color: #cccccc; } .oo-ui-buttonElement-framed > .oo-ui-buttonElement-button { margin: 0.1em 0; @@ -214,97 +216,166 @@ margin-right: 0.3em; } .oo-ui-buttonElement-framed.oo-ui-widget-disabled > .oo-ui-buttonElement-button { - color: #dddddd; - background: #ffffff; - border: solid 1px #cdcdcd; + color: #ffffff; + background: #dddddd; + border: 1px solid #dddddd; } .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button { color: #757575; background-color: #ffffff; border: solid 1px #cdcdcd; } -.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover, -.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:focus { +.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover { box-shadow: inset 0 -0.2em 0 0 rgba(0, 0, 0, 0.2), 0 0.1em 0 0 rgba(0, 0, 0, 0.2); border-color: #aaaaaa; } +.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:focus { + box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2); +} .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:active, -.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-buttonElement-active > .oo-ui-buttonElement-button, .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button { background-color: #d0d0d0; border-color: #d0d0d0; + box-shadow: none; +} +.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-buttonElement-active > .oo-ui-buttonElement-button { + background-color: #999999; + color: #ffffff; } .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button { color: #0274ff; } -.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:hover, -.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:focus { +.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:hover { box-shadow: inset 0 -0.2em 0 0 #015ccc, 0 0.1em 0 0 rgba(0, 0, 0, 0.1); border-bottom-color: #015ccc; } +.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:focus { + box-shadow: inset 0 0 0 1px #015ccc; + border-color: #015ccc; +} +.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive.oo-ui-widget-enabled .oo-ui-buttonElement-button:active, +.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive.oo-ui-widget-enabled.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button { + color: #015ccc; + border-color: #d0d0d0; + box-shadow: none; +} +.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive.oo-ui-widget-enabled.oo-ui-buttonElement-active > .oo-ui-buttonElement-button { + background-color: #999999; + color: #ffffff; +} .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-constructive > .oo-ui-buttonElement-button { color: #00af89; } -.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-constructive > .oo-ui-buttonElement-button:hover, -.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-constructive > .oo-ui-buttonElement-button:focus { +.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-constructive > .oo-ui-buttonElement-button:hover { box-shadow: inset 0 -0.2em 0 0 #008c6d, 0 0.1em 0 0 rgba(0, 0, 0, 0.1); border-bottom-color: #008c6d; } +.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-constructive > .oo-ui-buttonElement-button:focus { + box-shadow: inset 0 0 0 1px #008c6d; + border-color: #008c6d; +} +.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-constructive.oo-ui-widget-enabled .oo-ui-buttonElement-button:active, +.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-constructive.oo-ui-widget-enabled.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button { + color: #008c6d; + border-color: #d0d0d0; + box-shadow: none; +} +.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-constructive.oo-ui-widget-enabled.oo-ui-buttonElement-active > .oo-ui-buttonElement-button { + background-color: #999999; + color: #ffffff; +} .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button { color: #d11d13; } -.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button:hover, -.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button:focus { +.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button:hover { box-shadow: inset 0 -0.2em 0 0 #a7170f, 0 0.1em 0 0 rgba(0, 0, 0, 0.1); border-bottom-color: #a7170f; } +.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button:focus { + box-shadow: inset 0 0 0 1px #a7170f; + border-color: #a7170f; +} +.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive.oo-ui-widget-enabled .oo-ui-buttonElement-button:active, +.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive.oo-ui-widget-enabled.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button { + color: #a7170f; + border-color: #d0d0d0; + box-shadow: none; +} +.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive.oo-ui-widget-enabled.oo-ui-buttonElement-active > .oo-ui-buttonElement-button { + background-color: #999999; + color: #ffffff; +} .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button { - text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2); color: #ffffff; background-color: #0274ff; border-color: #0274ff; } -.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:hover, -.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:focus { +.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:hover { box-shadow: inset 0 -0.2em 0 0 #015ccc, 0 0.1em 0 0 rgba(0, 0, 0, 0.1); border-bottom-color: #015ccc; } +.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:focus { + box-shadow: inset 0 0 0 1px #015ccc; + border-color: #015ccc; +} .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive.oo-ui-widget-enabled .oo-ui-buttonElement-button:active, -.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive.oo-ui-widget-enabled.oo-ui-buttonElement-active > .oo-ui-buttonElement-button, .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive.oo-ui-widget-enabled.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button { + color: #ffffff; background-color: #015ccc; + border-color: #015ccc; + box-shadow: none; +} +.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive.oo-ui-widget-enabled.oo-ui-buttonElement-active > .oo-ui-buttonElement-button { + background-color: #999999; + color: #ffffff; } .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-constructive > .oo-ui-buttonElement-button { - text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2); color: #ffffff; background-color: #00af89; border-color: #00af89; } -.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-constructive > .oo-ui-buttonElement-button:hover, -.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-constructive > .oo-ui-buttonElement-button:focus { +.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-constructive > .oo-ui-buttonElement-button:hover { box-shadow: inset 0 -0.2em 0 0 #008c6d, 0 0.1em 0 0 rgba(0, 0, 0, 0.1); border-bottom-color: #008c6d; } +.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-constructive > .oo-ui-buttonElement-button:focus { + box-shadow: inset 0 0 0 1px #008c6d; + border-color: #008c6d; +} .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-constructive.oo-ui-widget-enabled .oo-ui-buttonElement-button:active, -.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-constructive.oo-ui-widget-enabled.oo-ui-buttonElement-active > .oo-ui-buttonElement-button, .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-constructive.oo-ui-widget-enabled.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button { + color: #ffffff; background-color: #008c6d; + border-color: #008c6d; + box-shadow: none; +} +.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-constructive.oo-ui-widget-enabled.oo-ui-buttonElement-active > .oo-ui-buttonElement-button { + background-color: #999999; + color: #ffffff; } .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button { - text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2); color: #ffffff; background-color: #d11d13; border-color: #d11d13; } -.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button:hover, -.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button:focus { +.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button:hover { box-shadow: inset 0 -0.2em 0 0 #a7170f, 0 0.1em 0 0 rgba(0, 0, 0, 0.1); border-bottom-color: #a7170f; } +.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button:focus { + box-shadow: inset 0 0 0 1px #a7170f; + border-color: #a7170f; +} .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-destructive.oo-ui-widget-enabled .oo-ui-buttonElement-button:active, -.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-destructive.oo-ui-widget-enabled.oo-ui-buttonElement-active > .oo-ui-buttonElement-button, .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-destructive.oo-ui-widget-enabled.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button { + color: #ffffff; background-color: #a7170f; + border-color: #a7170f; + box-shadow: none; +} +.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-destructive.oo-ui-widget-enabled.oo-ui-buttonElement-active > .oo-ui-buttonElement-button { + background-color: #999999; + color: #ffffff; } .oo-ui-clippableElement-clippable { -webkit-box-sizing: border-box; @@ -332,6 +403,10 @@ display: block; background: rgba(0, 0, 0, 0.4); } +.oo-ui-lookupElement > .oo-ui-menuSelectWidget { + z-index: 1; + width: 100%; +} .oo-ui-bookletLayout-stackLayout.oo-ui-stackLayout-continuous > .oo-ui-panelLayout-scrollable { overflow-y: hidden; } @@ -435,12 +510,33 @@ .oo-ui-fieldLayout.oo-ui-fieldLayout-align-top.oo-ui-labelElement > .oo-ui-fieldLayout-body > .oo-ui-labelElement-label { padding: 0.5em 0; } -.oo-ui-fieldLayout > .oo-ui-popupButtonWidget > .oo-ui-buttonElement-button > .oo-ui-iconElement-icon { +.oo-ui-fieldLayout > .oo-ui-popupButtonWidget { + margin-right: 0; margin-top: 0.25em; } +.oo-ui-fieldLayout > .oo-ui-popupButtonWidget:last-child { + margin-right: 0; +} .oo-ui-fieldLayout-disabled .oo-ui-labelElement-label { color: #cccccc; } +.oo-ui-actionFieldLayout-field { + display: table; + table-layout: fixed; + width: 100%; +} +.oo-ui-actionFieldLayout-input, +.oo-ui-actionFieldLayout-button { + display: table-cell; + vertical-align: middle; +} +.oo-ui-actionFieldLayout-input { + padding-right: 1em; +} +.oo-ui-actionFieldLayout-button { + width: 1%; + white-space: nowrap; +} .oo-ui-fieldsetLayout { position: relative; margin: 0; @@ -456,6 +552,16 @@ .oo-ui-fieldsetLayout.oo-ui-labelElement > .oo-ui-labelElement-label { display: inline-block; } +.oo-ui-fieldsetLayout > .oo-ui-fieldsetLayout-help { + float: right; +} +.oo-ui-fieldsetLayout > .oo-ui-fieldsetLayout-help > .oo-ui-popupWidget > .oo-ui-popupWidget-popup { + z-index: 1; +} +.oo-ui-fieldsetLayout > .oo-ui-fieldsetLayout-help .oo-ui-fieldsetLayout-help-content { + padding: 0.5em 0.75em; + line-height: 1.5em; +} .oo-ui-fieldsetLayout + .oo-ui-fieldsetLayout { margin-top: 2em; } @@ -475,6 +581,12 @@ width: 1.5em; height: 1.5em; } +.oo-ui-fieldsetLayout > .oo-ui-popupButtonWidget { + margin-right: 0; +} +.oo-ui-fieldsetLayout > .oo-ui-popupButtonWidget:last-child { + margin-right: 0; +} .oo-ui-gridLayout { position: absolute; top: 0; @@ -482,6 +594,68 @@ right: 0; bottom: 0; } +.oo-ui-menuLayout { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; +} +.oo-ui-menuLayout-menu, +.oo-ui-menuLayout-content { + position: absolute; + -webkit-transition: all ease-in-out 200ms; + -moz-transition: all ease-in-out 200ms; + -ms-transition: all ease-in-out 200ms; + -o-transition: all ease-in-out 200ms; + transition: all ease-in-out 200ms; +} +.oo-ui-menuLayout-content { + top: 0; + left: 0; + right: 0; + bottom: 0; +} +.oo-ui-menuLayout-top .oo-ui-menuLayout-menu { + left: 0; + top: 0; + right: 0; +} +.oo-ui-menuLayout-after .oo-ui-menuLayout-menu { + top: 0; + right: 0; + bottom: 0; +} +.oo-ui-menuLayout-bottom .oo-ui-menuLayout-menu { + right: 0; + bottom: 0; + left: 0; +} +.oo-ui-menuLayout-before .oo-ui-menuLayout-menu { + bottom: 0; + left: 0; + top: 0; +} +.oo-ui-menuLayout-top .oo-ui-menuLayout-content { + right: 0 !important; + bottom: 0 !important; + left: 0 !important; +} +.oo-ui-menuLayout-after .oo-ui-menuLayout-content { + bottom: 0 !important; + left: 0 !important; + top: 0 !important; +} +.oo-ui-menuLayout-bottom .oo-ui-menuLayout-content { + left: 0 !important; + top: 0 !important; + right: 0 !important; +} +.oo-ui-menuLayout-before .oo-ui-menuLayout-content { + top: 0 !important; + right: 0 !important; + bottom: 0 !important; +} .oo-ui-panelLayout { position: relative; } @@ -498,9 +672,6 @@ .oo-ui-panelLayout-padded { padding: 1.25em; } -.oo-ui-stackLayout > .oo-ui-panelLayout { - display: none; -} .oo-ui-stackLayout-continuous > .oo-ui-panelLayout { display: block; position: relative; @@ -731,7 +902,8 @@ .oo-ui-listToolGroup .oo-ui-toolGroup-tools { padding: 0.25em 0 0.25em 0; border: 1px solid #aaaaaa; - box-shadow: inset 0 -0.2em 0 0 rgba(0, 0, 0, 0.2), 0 0.1em 0 0 rgba(0, 0, 0, 0.2); + border-radius: 0.2em; + box-shadow: inset 0 -0.2em 0 0 rgba(0, 0, 0, 0.2), 0 0.1em 0 0 rgba(0, 0, 0, 0.1); } .oo-ui-menuToolGroup { border: solid 1px #cccccc; @@ -753,7 +925,9 @@ margin-left: -1px; padding: 0.25em 0 0.25em 0; border: 1px solid #aaaaaa; - box-shadow: inset 0 -0.2em 0 0 rgba(0, 0, 0, 0.2), 0 0.1em 0 0 rgba(0, 0, 0, 0.2); + border-radius: 0.2em; + border-top-left-radius: 0; + box-shadow: inset 0 -0.2em 0 0 rgba(0, 0, 0, 0.2), 0 0.1em 0 0 rgba(0, 0, 0, 0.1); } .oo-ui-menuToolGroup.oo-ui-widget-enabled:hover { border-color: #aaaaaa; @@ -872,7 +1046,9 @@ line-height: 1.5em; } .oo-ui-selectWidget-depressed .oo-ui-optionWidget-selected, -.oo-ui-selectWidget-pressed .oo-ui-optionWidget-pressed { +.oo-ui-selectWidget-pressed .oo-ui-optionWidget-pressed, +.oo-ui-selectWidget-pressed .oo-ui-optionWidget-pressed.oo-ui-optionWidget-highlighted, +.oo-ui-selectWidget-pressed .oo-ui-optionWidget-pressed.oo-ui-optionWidget-highlighted.oo-ui-optionWidget-selected { background-color: #d0d0d0; } .oo-ui-optionWidget.oo-ui-widget-disabled { @@ -904,6 +1080,10 @@ display: inline-block; white-space: nowrap; border-radius: 2px; + margin-right: 0.5em; +} +.oo-ui-buttonSelectWidget:last-child { + margin-right: 0; } .oo-ui-buttonSelectWidget .oo-ui-buttonOptionWidget .oo-ui-buttonElement-button { border-radius: 0; @@ -918,9 +1098,6 @@ border-bottom-right-radius: 2px; border-top-right-radius: 2px; } -.oo-ui-radioSelectWidget { - padding: 0.75em 0 0.5em 0; -} .oo-ui-buttonOptionWidget { display: inline-block; padding: 0; @@ -950,7 +1127,7 @@ } .oo-ui-radioOptionWidget { cursor: default; - padding: 0; + padding: 0.25em 0; background-color: transparent; } .oo-ui-radioOptionWidget .oo-ui-radioInputWidget, @@ -963,9 +1140,6 @@ .oo-ui-radioOptionWidget.oo-ui-optionWidget-highlighted { background-color: transparent; } -.oo-ui-radioOptionWidget > .oo-ui-labelElement-label { - padding: 0 0.5em; -} .oo-ui-labelWidget { display: inline-block; } @@ -996,11 +1170,25 @@ .oo-ui-buttonWidget { display: inline-block; vertical-align: middle; + margin-right: 0.5em; +} +.oo-ui-buttonWidget:last-child { + margin-right: 0; } .oo-ui-buttonGroupWidget { display: inline-block; white-space: nowrap; border-radius: 2px; + margin-right: 0.5em; +} +.oo-ui-buttonGroupWidget:last-child { + margin-right: 0; +} +.oo-ui-buttonGroupWidget .oo-ui-buttonWidget { + margin-right: 0; +} +.oo-ui-buttonGroupWidget .oo-ui-buttonWidget:last-child { + margin-right: 0; } .oo-ui-buttonGroupWidget .oo-ui-buttonElement-framed .oo-ui-buttonElement-button { border-radius: 0; @@ -1033,6 +1221,7 @@ width: 4em; border-radius: 1em; border: 1px #dddddd solid; + margin-right: 0.5em; } .oo-ui-toggleSwitchWidget.oo-ui-widget-disabled { cursor: default; @@ -1059,6 +1248,9 @@ .oo-ui-toggleWidget-off .oo-ui-toggleSwitchWidget-glow { display: none; } +.oo-ui-toggleSwitchWidget:last-child { + margin-right: 0; +} .oo-ui-toggleSwitchWidget-grip { top: 0.25em; left: 0.25em; @@ -1112,13 +1304,13 @@ } .oo-ui-progressBarWidget { max-width: 50em; - border: solid 1px #0274ff; + border: solid 1px #cccccc; border-radius: 0.1em; overflow: hidden; } .oo-ui-progressBarWidget-bar { height: 1em; - background: #0274ff; + background: #dddddd; -webkit-transition: width 200ms, margin-left 200ms; -moz-transition: width 200ms, margin-left 200ms; -ms-transition: width 200ms, margin-left 200ms; @@ -1136,7 +1328,7 @@ border-left-width: 1px; } .oo-ui-progressBarWidget.oo-ui-widget-disabled { - opacity: 0.2; + opacity: 0.6; } .oo-ui-actionWidget.oo-ui-pendingElement-pending { background-image: /* @embed */ url(themes/mediawiki/images/textures/pending.gif); @@ -1188,7 +1380,7 @@ box-shadow: inset 0 -0.2em 0 0 rgba(0, 0, 0, 0.2); } .oo-ui-popupWidget-anchored .oo-ui-popupWidget-popup { - margin-top: 7px; + margin-top: 9px; } .oo-ui-popupWidget-anchored .oo-ui-popupWidget-anchor:before, .oo-ui-popupWidget-anchored .oo-ui-popupWidget-anchor:after { @@ -1201,16 +1393,16 @@ border-top: 0; } .oo-ui-popupWidget-anchored .oo-ui-popupWidget-anchor:before { - bottom: -8px; - left: -13px; + bottom: -10px; + left: -9px; border-bottom-color: #888888; - border-width: 13px; + border-width: 10px; } .oo-ui-popupWidget-anchored .oo-ui-popupWidget-anchor:after { - bottom: -8px; - left: -12px; + bottom: -10px; + left: -8px; border-bottom-color: #ffffff; - border-width: 12px; + border-width: 9px; } .oo-ui-popupWidget-transitioning .oo-ui-popupWidget-popup { -webkit-transition: width 100ms ease-in-out, height 100ms ease-in-out, left 100ms ease-in-out; @@ -1244,9 +1436,15 @@ .oo-ui-popupButtonWidget.oo-ui-buttonElement-framed > .oo-ui-popupWidget { left: 1.75em; } +.oo-ui-inputWidget { + margin-right: 0.5em; +} +.oo-ui-inputWidget:last-child { + margin-right: 0; +} .oo-ui-checkboxInputWidget { position: relative; - line-height: 2em; + line-height: 1.6em; white-space: nowrap; } .oo-ui-checkboxInputWidget * { @@ -1255,16 +1453,23 @@ } .oo-ui-checkboxInputWidget input[type="checkbox"] { opacity: 0; + position: relative; + z-index: 1; margin: 0; - width: 2em; - height: 2em; + width: 1.6em; + height: 1.6em; max-width: none; } .oo-ui-checkboxInputWidget input[type="checkbox"] + span { cursor: pointer; - margin: 0 0.4em; + margin: 0 0.2em; } .oo-ui-checkboxInputWidget input[type="checkbox"] + span::before { + -webkit-transition: background-size 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); + -moz-transition: background-size 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); + -ms-transition: background-size 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); + -o-transition: background-size 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); + transition: background-size 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); content: ""; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; @@ -1272,17 +1477,18 @@ position: absolute; left: 0; border-radius: 2px; - width: 2em; - height: 2em; + width: 1.6em; + height: 1.6em; background-color: white; border: 1px solid #777777; -} -.oo-ui-checkboxInputWidget input[type="checkbox"]:checked + span::before { background-image: /* @embed */ url(themes/mediawiki/images/icons/check-constructive.svg); - background-size: 2em, 2em; background-repeat: no-repeat; background-position: center center; background-origin: border-box; + background-size: 0 0; +} +.oo-ui-checkboxInputWidget input[type="checkbox"]:checked + span::before { + background-size: 100% 100%; } .oo-ui-checkboxInputWidget input[type="checkbox"]:active + span::before { background-color: #dddddd; @@ -1303,9 +1509,46 @@ .oo-ui-checkboxInputWidget input[type="checkbox"]:disabled:checked + span::before { background-image: /* @embed */ url(themes/mediawiki/images/icons/check-invert.svg); } +.oo-ui-dropdownInputWidget { + position: relative; + vertical-align: middle; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + width: 100%; + max-width: 50em; +} +.oo-ui-dropdownInputWidget select { + display: inline-block; + width: 100%; + resize: none; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} +.oo-ui-dropdownInputWidget select { + height: 2.5em; + padding: 0.5em; + font-size: 1em; + font-family: sans-serif; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + border: solid 1px #cccccc; +} +.oo-ui-dropdownInputWidget.oo-ui-widget-enabled select:hover, +.oo-ui-dropdownInputWidget.oo-ui-widget-enabled select:focus { + border-color: #aaaaaa; + outline: none; +} +.oo-ui-dropdownInputWidget.oo-ui-widget-disabled select { + color: #cccccc; + border-color: #dddddd; + background-color: #f3f3f3; +} .oo-ui-radioInputWidget { position: relative; - line-height: 2em; + line-height: 1.6em; white-space: nowrap; } .oo-ui-radioInputWidget * { @@ -1314,14 +1557,16 @@ } .oo-ui-radioInputWidget input[type="radio"] { opacity: 0; + position: relative; + z-index: 1; margin: 0; - width: 2em; - height: 2em; + width: 1.6em; + height: 1.6em; max-width: none; } .oo-ui-radioInputWidget input[type="radio"] + span { cursor: pointer; - margin: 0 0.4em; + margin: 0 0.2em; } .oo-ui-radioInputWidget input[type="radio"] + span::before { -webkit-transition: background-size 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); @@ -1336,8 +1581,8 @@ position: absolute; left: 0; border-radius: 100%; - width: 2em; - height: 2em; + width: 1.6em; + height: 1.6em; background: white; border: 1px solid #777777; background-image: /* @embed */ url(themes/mediawiki/images/icons/circle-constructive.svg); @@ -1405,6 +1650,16 @@ .oo-ui-textInputWidget > .oo-ui-indicatorElement-indicator { right: 0; } +.oo-ui-textInputWidget > .oo-ui-labelElement-label { + position: absolute; + top: 0; +} +.oo-ui-textInputWidget-labelPosition-after > .oo-ui-labelElement-label { + right: 0; +} +.oo-ui-textInputWidget-labelPosition-before > .oo-ui-labelElement-label { + left: 0; +} .oo-ui-textInputWidget input, .oo-ui-textInputWidget textarea { padding: 0.5em 0.5em 0.5em 0.9em; @@ -1461,7 +1716,7 @@ } .oo-ui-textInputWidget.oo-ui-iconElement input, .oo-ui-textInputWidget.oo-ui-iconElement textarea { - padding-left: 2.4em; + padding-left: 2.75em; } .oo-ui-textInputWidget.oo-ui-iconElement .oo-ui-iconElement-icon { left: 0.4em; @@ -1478,12 +1733,23 @@ height: 100%; background-position: left center; } +.oo-ui-textInputWidget > .oo-ui-labelElement-label { + padding: 0.4em; + line-height: 1.5em; + color: #888888; +} +.oo-ui-textInputWidget-labelPosition-after.oo-ui-indicatorElement > .oo-ui-labelElement-label { + padding-right: 2.4em; +} +.oo-ui-textInputWidget-labelPosition-before.oo-ui-iconElement > .oo-ui-labelElement-label { + padding-left: 2.9em; +} .oo-ui-menuSelectWidget { position: absolute; background: #ffffff; margin-top: -1px; border: solid 1px #aaaaaa; - border-radius: 0 0 0.1em 0.1em; + border-radius: 0 0 0.2em 0.2em; padding-bottom: 0.25em; box-shadow: inset 0 -0.2em 0 0 rgba(0, 0, 0, 0.2), 0 0.1em 0 0 rgba(0, 0, 0, 0.2); } @@ -1496,6 +1762,7 @@ } .oo-ui-menuOptionWidget { position: relative; + padding: 0.5em 1em; } .oo-ui-menuOptionWidget .oo-ui-iconElement-icon { display: none; @@ -1507,10 +1774,15 @@ display: block; } .oo-ui-menuOptionWidget.oo-ui-optionWidget-selected { - background-color: transparent; + background-color: #999999; + color: #ffffff; +} +.oo-ui-menuOptionWidget.oo-ui-optionWidget-selected .oo-ui-iconElement-icon { + display: none; } .oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted { background-color: #eeeeee; + color: black; } .oo-ui-menuSectionOptionWidget { cursor: default; @@ -1518,11 +1790,12 @@ color: #888888; } .oo-ui-dropdownWidget { - position: relative; display: inline-block; + position: relative; margin: 0.25em 0; width: 100%; max-width: 50em; + margin-right: 0.5em; } .oo-ui-dropdownWidget-handle { width: 100%; @@ -1543,13 +1816,16 @@ background-position: center center; background-repeat: no-repeat; } -.oo-ui-dropdownWidget .oo-ui-menuSelectWidget { +.oo-ui-dropdownWidget > .oo-ui-menuSelectWidget { z-index: 1; width: 100%; } .oo-ui-dropdownWidget.oo-ui-widget-disabled .oo-ui-dropdownWidget-handle { cursor: default; } +.oo-ui-dropdownWidget:last-child { + margin-right: 0; +} .oo-ui-dropdownWidget-handle { height: 2.5em; border: solid 1px #cccccc; @@ -1688,10 +1964,14 @@ position: relative; width: 100%; max-width: 50em; + margin-right: 0.5em; } -.oo-ui-comboBoxWidget > .oo-ui-selectWidget { - width: 100%; +.oo-ui-comboBoxWidget > .oo-ui-menuSelectWidget { z-index: 1; + width: 100%; +} +.oo-ui-comboBoxWidget:last-child { + margin-right: 0; } .oo-ui-comboBoxWidget .oo-ui-textInputWidget input, .oo-ui-comboBoxWidget .oo-ui-textInputWidget textarea { @@ -1709,9 +1989,6 @@ -moz-box-sizing: border-box; box-sizing: border-box; } -.oo-ui-searchWidget { - border: solid 1px #cccccc; -} .oo-ui-searchWidget-query { position: absolute; top: 0; @@ -1750,12 +2027,6 @@ -moz-box-sizing: border-box; box-sizing: border-box; } -.oo-ui-window-frame > iframe { - width: 100%; - height: 100%; - margin: 0; - padding: 0; -} .oo-ui-window-content:focus { outline: none; } @@ -1813,7 +2084,7 @@ z-index: 3; } .oo-ui-dialog-content > .oo-ui-window-body { - box-shadow: 0 0 1px 0 #aaaaaa; + outline: 1px solid #aaaaaa; } .oo-ui-messageDialog-actions-horizontal { display: table; @@ -1959,7 +2230,7 @@ } .oo-ui-processDialog-content .oo-ui-window-body { top: 3.4em; - box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2); + outline: 1px solid rgba(0, 0, 0, 0.2); } .oo-ui-processDialog-navigation { position: relative; @@ -2078,7 +2349,7 @@ height: 0; overflow: hidden; } -.oo-ui-windowManager-modal > .oo-ui-dialog.oo-ui-window-load { +.oo-ui-windowManager-modal > .oo-ui-dialog.oo-ui-window-active { width: auto; height: auto; top: 0; @@ -2095,14 +2366,6 @@ overflow: hidden; max-width: 100%; max-height: 100%; - visibility: visible; -} -.oo-ui-windowManager-modal > .oo-ui-dialog.oo-ui-window-setup > .oo-ui-window-frame > iframe { - width: 100%; - height: 100%; -} -.oo-ui-windowManager-modal > .oo-ui-dialog > .oo-ui-window-frame { - visibility: hidden; } .oo-ui-windowManager-fullscreen > .oo-ui-dialog > .oo-ui-window-frame { width: 100%; @@ -2123,6 +2386,7 @@ top: 1em; bottom: 1em; background-color: #ffffff; + opacity: 0; -webkit-transform: scale(0.5); -moz-transform: scale(0.5); -ms-transform: scale(0.5); @@ -2134,10 +2398,13 @@ -o-transition: all 250ms ease-in-out; transition: all 250ms ease-in-out; } -.oo-ui-windowManager-modal > .oo-ui-dialog.oo-ui-window-load { +.oo-ui-windowManager-modal > .oo-ui-dialog.oo-ui-window-ready { + /* Fade window overlay */ opacity: 1; } -.oo-ui-windowManager-modal > .oo-ui-dialog.oo-ui-window-setup > .oo-ui-window-frame { +.oo-ui-windowManager-modal > .oo-ui-dialog.oo-ui-window-ready > .oo-ui-window-frame { + /* Fade frame */ + opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); @@ -2249,6 +2516,13 @@ .oo-ui-image-invert.oo-ui-icon-link { background-image: /* @embed */ url(themes/mediawiki/images/icons/link-invert.svg); } +.oo-ui-icon-lock { + background-image: /* @embed */ url(themes/mediawiki/images/icons/lock.svg); +} +.oo-ui-image-invert .oo-ui-icon-lock, +.oo-ui-image-invert.oo-ui-icon-lock { + background-image: /* @embed */ url(themes/mediawiki/images/icons/lock-invert.svg); +} .oo-ui-icon-menu { background-image: /* @embed */ url(themes/mediawiki/images/icons/menu.svg); }