X-Git-Url: https://git.heureux-cyclage.org/?a=blobdiff_plain;f=resources%2Flib%2Foojs-ui%2Foojs-ui-mediawiki-noimages.css;h=b2e58135b815d37268286a846b5dbc25282bcbb0;hb=c74dcacbe682db9609b104712958c1310f6da293;hp=d686ad923100d6842c36f76dc8a1fd679c610da6;hpb=ea021362f06f942dde5a5c76b6a938ba7e15536d;p=lhc%2Fweb%2Fwiklou.git diff --git a/resources/lib/oojs-ui/oojs-ui-mediawiki-noimages.css b/resources/lib/oojs-ui/oojs-ui-mediawiki-noimages.css index d686ad9231..b2e58135b8 100644 --- a/resources/lib/oojs-ui/oojs-ui-mediawiki-noimages.css +++ b/resources/lib/oojs-ui/oojs-ui-mediawiki-noimages.css @@ -1,12 +1,12 @@ /*! - * OOjs UI v0.12.2 + * OOjs UI v0.12.7 * https://www.mediawiki.org/wiki/OOjs_UI * * Copyright 2011–2015 OOjs UI Team and other contributors. * Released under the MIT license * http://oojs.mit-license.org * - * Date: 2015-07-28T23:01:40Z + * Date: 2015-09-01T23:25:39Z */ @-webkit-keyframes oo-ui-progressBarWidget-slide { from { @@ -82,8 +82,6 @@ .oo-ui-buttonElement.oo-ui-iconElement > .oo-ui-buttonElement-button > .oo-ui-iconElement-icon { display: inline-block; vertical-align: middle; - background-position: center center; - background-repeat: no-repeat; } .oo-ui-buttonElement-frameless { display: inline-block; @@ -151,10 +149,10 @@ } .oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:hover > .oo-ui-labelElement-label, .oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:focus > .oo-ui-labelElement-label { - color: #347bff; + color: #2962cc; } .oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button > .oo-ui-labelElement-label { - color: #777777; + color: #347bff; } .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-pressed > .oo-ui-buttonElement-button > .oo-ui-labelElement-label { @@ -163,10 +161,10 @@ } .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 { - color: #00af89; + color: #008064; } .oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-constructive > .oo-ui-buttonElement-button > .oo-ui-labelElement-label { - color: #777777; + color: #00af89; } .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-pressed > .oo-ui-buttonElement-button > .oo-ui-labelElement-label { @@ -175,10 +173,10 @@ } .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 { - color: #d11d13; + color: #8c130d; } .oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-destructive > .oo-ui-buttonElement-button > .oo-ui-labelElement-label { - color: #777777; + color: #d11d13; } .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-pressed > .oo-ui-buttonElement-button > .oo-ui-labelElement-label { @@ -264,7 +262,7 @@ box-shadow: inset 0 0 0 1px #1f4999; border-color: #1f4999; } -.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-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: #1f4999; border-color: #1f4999; @@ -285,7 +283,7 @@ box-shadow: inset 0 0 0 1px #005946; border-color: #005946; } -.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-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: #005946; border-color: #005946; @@ -306,7 +304,7 @@ box-shadow: inset 0 0 0 1px #73100a; border-color: #73100a; } -.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-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: #73100a; border-color: #73100a; @@ -329,7 +327,7 @@ box-shadow: inset 0 0 0 1px #ffffff; border-color: #347bff; } -.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-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-pressed > .oo-ui-buttonElement-button { color: #ffffff; background-color: #1f4999; @@ -353,7 +351,7 @@ box-shadow: inset 0 0 0 1px #ffffff; border-color: #00af89; } -.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-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-pressed > .oo-ui-buttonElement-button { color: #ffffff; background-color: #005946; @@ -377,7 +375,7 @@ box-shadow: inset 0 0 0 1px #ffffff; border-color: #d11d13; } -.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-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-pressed > .oo-ui-buttonElement-button { color: #ffffff; background-color: #73100a; @@ -418,11 +416,13 @@ .oo-ui-iconElement.oo-ui-iconElement-icon { background-size: contain; background-position: center center; + background-repeat: no-repeat; } .oo-ui-indicatorElement .oo-ui-indicatorElement-indicator, .oo-ui-indicatorElement.oo-ui-indicatorElement-indicator { background-size: contain; background-position: center center; + background-repeat: no-repeat; } .oo-ui-lookupElement > .oo-ui-menuSelectWidget { z-index: 1; @@ -554,6 +554,28 @@ .oo-ui-fieldLayout-disabled > .oo-ui-fieldLayout-body > .oo-ui-labelElement-label { color: #cccccc; } +.oo-ui-fieldLayout-messages { + list-style: none none; + margin: 0; + padding: 0; + margin-top: 0.25em; + margin-left: 0.25em; +} +.oo-ui-fieldLayout-messages > li { + margin: 0; + padding: 0; + display: table; +} +.oo-ui-fieldLayout-messages .oo-ui-iconWidget { + display: table-cell; + border-right: 0.5em solid transparent; +} +.oo-ui-fieldLayout-messages .oo-ui-labelWidget { + display: table-cell; + padding: 0; + line-height: 1.875em; + vertical-align: middle; +} .oo-ui-actionFieldLayout-input, .oo-ui-actionFieldLayout-button { display: table-cell; @@ -575,8 +597,6 @@ .oo-ui-fieldsetLayout.oo-ui-iconElement > .oo-ui-iconElement-icon { display: block; position: absolute; - background-position: center center; - background-repeat: no-repeat; } .oo-ui-fieldsetLayout.oo-ui-labelElement > .oo-ui-labelElement-label { display: inline-block; @@ -730,6 +750,24 @@ display: block; position: relative; } +.oo-ui-horizontalLayout > .oo-ui-widget { + display: inline-block; + vertical-align: middle; +} +.oo-ui-horizontalLayout > .oo-ui-layout { + display: inline-block; +} +.oo-ui-horizontalLayout > .oo-ui-layout, +.oo-ui-horizontalLayout > .oo-ui-widget { + margin-right: 0.5em; +} +.oo-ui-horizontalLayout > .oo-ui-layout:last-child, +.oo-ui-horizontalLayout > .oo-ui-widget:last-child { + margin-right: 0; +} +.oo-ui-horizontalLayout .oo-ui-fieldLayout { + margin-bottom: 0; +} .oo-ui-popupTool .oo-ui-popupWidget-popup, .oo-ui-popupTool .oo-ui-popupWidget-anchor { z-index: 4; @@ -769,10 +807,6 @@ .oo-ui-toolGroup .oo-ui-tool-link { text-decoration: none; } -.oo-ui-toolGroup .oo-ui-tool-link .oo-ui-iconElement-icon { - background-position: center center; - background-repeat: no-repeat; -} .oo-ui-toolbar-narrow .oo-ui-toolGroup + .oo-ui-toolGroup { margin-left: 0; } @@ -873,8 +907,6 @@ .oo-ui-popupToolGroup-handle .oo-ui-indicatorElement-indicator, .oo-ui-popupToolGroup-handle .oo-ui-iconElement-icon { position: absolute; - background-position: center center; - background-repeat: no-repeat; } .oo-ui-popupToolGroup.oo-ui-widget-disabled .oo-ui-popupToolGroup-handle { cursor: default; @@ -884,10 +916,6 @@ position: absolute; z-index: 4; } -.oo-ui-popupToolGroup .oo-ui-toolGroup-tools .oo-ui-iconElement-icon { - background-repeat: no-repeat; - background-position: center center; -} .oo-ui-popupToolGroup-active.oo-ui-widget-enabled > .oo-ui-toolGroup-tools { display: block; } @@ -1096,6 +1124,9 @@ background-image: -webkit-linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/check.svg"); background-image: linear-gradient(transparent, transparent), /* @embed */ url("themes/mediawiki/images/icons/check.svg"); background-image: -o-linear-gradient(transparent, transparent), url("themes/mediawiki/images/icons/check.png"); + background-size: contain; + background-position: center center; + background-repeat: no-repeat; } .oo-ui-menuToolGroup .oo-ui-tool.oo-ui-widget-enabled:hover { background-color: #eeeeee; @@ -1178,11 +1209,12 @@ border: 0; border-radius: 0; margin: 0; - padding: 1.0546875em 0.3125em; + padding: 0 0.3125em; } .oo-ui-toolbar-actions > .oo-ui-buttonElement.oo-ui-labelElement > .oo-ui-buttonElement-button > .oo-ui-labelElement-label { margin: 0 1em; - line-height: inherit; + line-height: 3.125em; + /* 40/12.8 */ } .oo-ui-optionWidget { position: relative; @@ -1221,8 +1253,6 @@ .oo-ui-decoratedOptionWidget .oo-ui-iconElement-icon, .oo-ui-decoratedOptionWidget .oo-ui-indicatorElement-indicator { position: absolute; - background-repeat: no-repeat; - background-position: center center; } .oo-ui-decoratedOptionWidget.oo-ui-iconElement .oo-ui-iconElement-icon, .oo-ui-decoratedOptionWidget.oo-ui-indicatorElement .oo-ui-indicatorElement-indicator { @@ -1320,8 +1350,6 @@ .oo-ui-iconWidget { display: inline-block; vertical-align: middle; - background-position: center center; - background-repeat: no-repeat; line-height: 2.5em; height: 1.875em; width: 1.875em; @@ -1332,8 +1360,6 @@ .oo-ui-indicatorWidget { display: inline-block; vertical-align: middle; - background-position: center center; - background-repeat: no-repeat; line-height: 2.5em; height: 0.9375em; width: 0.9375em; @@ -1401,9 +1427,15 @@ -o-transform: translateZ(0px); transform: translateZ(0px); height: 2em; - width: 4em; + width: 3.5em; border-radius: 1em; - border: 1px #dddddd solid; + border: 1px #555555 solid; + background: #ffffff; + -webkit-transition: background-color 0.1s ease-in-out; + -moz-transition: background-color 0.1s ease-in-out; + -ms-transition: background-color 0.1s ease-in-out; + -o-transition: background-color 0.1s ease-in-out; + transition: background-color 0.1s ease-in-out; margin-right: 0.5em; } .oo-ui-toggleSwitchWidget.oo-ui-widget-disabled { @@ -1435,14 +1467,13 @@ margin-right: 0; } .oo-ui-toggleSwitchWidget-grip { - top: 0.25em; - left: 0.25em; - width: 1.5em; - height: 1.5em; + top: 0.5em; + left: 0.5em; + width: 1em; + height: 1em; margin-top: -1px; border-radius: 1em; - border: 1px #dddddd solid; - background-color: #f7f7f7; + background: #555555; -webkit-transition: left 0.1s ease-in-out, margin-left 0.1s ease-in-out; -moz-transition: left 0.1s ease-in-out, margin-left 0.1s ease-in-out; -ms-transition: left 0.1s ease-in-out, margin-left 0.1s ease-in-out; @@ -1450,40 +1481,48 @@ transition: left 0.1s ease-in-out, margin-left 0.1s ease-in-out; } .oo-ui-toggleSwitchWidget-glow { - border-radius: 1em; - background-color: #f7f7f7; - -webkit-transition: background-color 0.1s ease-in-out; - -moz-transition: background-color 0.1s ease-in-out; - -ms-transition: background-color 0.1s ease-in-out; - -o-transition: background-color 0.1s ease-in-out; - transition: background-color 0.1s ease-in-out; + display: none; } .oo-ui-toggleSwitchWidget.oo-ui-toggleWidget-on .oo-ui-toggleSwitchWidget-grip { - left: 2.25em; + left: 2em; margin-left: -2px; } -.oo-ui-toggleSwitchWidget.oo-ui-toggleWidget-off .oo-ui-toggleSwitchWidget-glow { - display: block; -} .oo-ui-toggleSwitchWidget.oo-ui-toggleWidget-off .oo-ui-toggleSwitchWidget-grip { - left: 0.25em; + left: 0.5em; margin-left: 0; } -.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled { - border: 1px #cccccc solid; +.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled.oo-ui-toggleWidget-on { + background: #347bff; + border-color: #347bff; +} +.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled.oo-ui-toggleWidget-on .oo-ui-toggleSwitchWidget-grip { + background: #ffffff; +} +.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:focus { + outline: none; + border-color: #347bff; +} +.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:focus.oo-ui-toggleWidget-on { + border-color: #ffffff; + box-shadow: 0 0 0 1px #347bff; } .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:hover { - border-color: #aaaaaa; + border-color: #2962cc; + box-shadow: 0 0 0 1px #2962cc; } -.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled .oo-ui-toggleSwitchWidget-grip { - background-color: #ffffff; - border-color: #aaaaaa; +.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:hover.oo-ui-toggleWidget-on { + background: #2962cc; + border-color: #2962cc; } -.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled.oo-ui-toggleWidget-on .oo-ui-toggleSwitchWidget-glow { - background-color: #d0d0d0; +.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:hover.oo-ui-toggleWidget-on .oo-ui-toggleSwitchWidget-grip { + background: #ffffff; } -.oo-ui-toggleSwitchWidget.oo-ui-widget-enabled.oo-ui-toggleWidget-off .oo-ui-toggleSwitchWidget-glow { - background-color: #ffffff; +.oo-ui-toggleSwitchWidget.oo-ui-widget-disabled { + background: #dddddd; + border-color: #dddddd; +} +.oo-ui-toggleSwitchWidget.oo-ui-widget-disabled .oo-ui-toggleSwitchWidget-grip { + background: #ffffff; } .oo-ui-progressBarWidget { max-width: 50em; @@ -1856,7 +1895,6 @@ position: absolute; top: 0; height: 100%; - background-repeat: no-repeat; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; @@ -2052,7 +2090,6 @@ .oo-ui-dropdownWidget { display: inline-block; position: relative; - margin: 0.25em 0; width: 100%; max-width: 50em; background: #ffffff; @@ -2074,8 +2111,6 @@ .oo-ui-dropdownWidget-handle .oo-ui-indicatorElement-indicator, .oo-ui-dropdownWidget-handle .oo-ui-iconElement-icon { position: absolute; - background-position: center center; - background-repeat: no-repeat; } .oo-ui-dropdownWidget > .oo-ui-menuSelectWidget { z-index: 1; @@ -2137,35 +2172,20 @@ } .oo-ui-selectFileWidget { display: inline-block; - position: relative; vertical-align: middle; - margin: 0.25em 0; width: 100%; max-width: 50em; margin-right: 0.5em; } -.oo-ui-selectFileWidget-handle { - width: 100%; - display: inline-block; - cursor: pointer; - overflow: hidden; - -webkit-touch-callout: none; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; +.oo-ui-selectFileWidget-selectButton { + display: table-cell; + vertical-align: middle; } -.oo-ui-selectFileWidget-handle > .oo-ui-indicatorElement-indicator, -.oo-ui-selectFileWidget-handle > .oo-ui-iconElement-icon, -.oo-ui-selectFileWidget-handle > .oo-ui-selectFileWidget-clearButton { - position: absolute; - background-position: center center; - background-repeat: no-repeat; +.oo-ui-selectFileWidget-selectButton > .oo-ui-buttonElement-button { + position: relative; + overflow: hidden; } -.oo-ui-selectFileWidget-handle > input[type="file"] { +.oo-ui-selectFileWidget-selectButton > .oo-ui-buttonElement-button > input[type="file"] { position: absolute; margin: 0; top: 0; @@ -2177,17 +2197,35 @@ opacity: 0; z-index: 1; cursor: pointer; + /* Push the button part of the native control out of view, as it changes the cursor */ + padding-top: 100px; +} +.oo-ui-selectFileWidget-selectButton.oo-ui-widget-disabled > .oo-ui-buttonElement-button > input[type="file"] { + display: none; +} +.oo-ui-selectFileWidget-info { + width: 100%; + display: table-cell; + vertical-align: middle; + position: relative; + overflow: hidden; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; } -.oo-ui-selectFileWidget-handle > .oo-ui-selectFileWidget-clearButton { +.oo-ui-selectFileWidget-info > .oo-ui-indicatorElement-indicator, +.oo-ui-selectFileWidget-info > .oo-ui-iconElement-icon, +.oo-ui-selectFileWidget-info > .oo-ui-selectFileWidget-clearButton { + position: absolute; +} +.oo-ui-selectFileWidget-info > .oo-ui-selectFileWidget-clearButton { z-index: 2; } -.oo-ui-selectFileWidget.oo-ui-widget-disabled .oo-ui-selectFileWidget-handle, -.oo-ui-selectFileWidget-notsupported .oo-ui-selectFileWidget-handle { +.oo-ui-selectFileWidget-dropTarget { cursor: default; } -.oo-ui-selectFileWidget.oo-ui-widget-disabled .oo-ui-selectFileWidget-handle > input[type="file"], -.oo-ui-selectFileWidget-notsupported .oo-ui-selectFileWidget-handle > input[type="file"] { - display: none; +.oo-ui-selectFileWidget-supported.oo-ui-widget-enabled .oo-ui-selectFileWidget-dropTarget { + cursor: pointer; } .oo-ui-selectFileWidget-empty .oo-ui-selectFileWidget-clearButton, .oo-ui-selectFileWidget-notsupported .oo-ui-selectFileWidget-clearButton { @@ -2196,23 +2234,24 @@ .oo-ui-selectFileWidget:last-child { margin-right: 0; } -.oo-ui-selectFileWidget-handle { - height: 2.5em; +.oo-ui-selectFileWidget-selectButton > .oo-ui-buttonElement-button { + margin: 0 0 0 0.5em; +} +.oo-ui-selectFileWidget-info { + height: 2.4em; border: 1px solid #cccccc; border-radius: 0.1em; padding: 0 1em; - background: #ffffff; } -.oo-ui-selectFileWidget-handle > .oo-ui-indicatorElement-indicator { +.oo-ui-selectFileWidget-info > .oo-ui-indicatorElement-indicator { right: 0; } -.oo-ui-selectFileWidget-handle > .oo-ui-iconElement-icon { +.oo-ui-selectFileWidget-info > .oo-ui-iconElement-icon { left: 0.25em; } -.oo-ui-selectFileWidget-handle .oo-ui-selectFileWidget-label { - line-height: 2.5em; +.oo-ui-selectFileWidget-info .oo-ui-selectFileWidget-label { + line-height: 2.3em; margin: 0; - display: inline-block; overflow: hidden; width: 100%; white-space: nowrap; @@ -2221,63 +2260,82 @@ box-sizing: border-box; text-overflow: ellipsis; } -.oo-ui-selectFileWidget-handle .oo-ui-selectFileWidget-clearButton { +.oo-ui-selectFileWidget-info .oo-ui-selectFileWidget-clearButton { top: 0; width: 1.875em; height: 1.875em; margin: 0.3em; } -.oo-ui-selectFileWidget-handle > .oo-ui-indicatorElement-indicator { +.oo-ui-selectFileWidget-info > .oo-ui-indicatorElement-indicator { top: 0; width: 0.9375em; height: 0.9375em; margin: 0.775em; } -.oo-ui-selectFileWidget-handle > .oo-ui-iconElement-icon { +.oo-ui-selectFileWidget-info > .oo-ui-iconElement-icon { top: 0; width: 1.875em; height: 1.875em; margin: 0.3em; } -.oo-ui-selectFileWidget:hover .oo-ui-selectFileWidget-handle { - border-color: #aaaaaa; -} -.oo-ui-selectFileWidget.oo-ui-widget-disabled .oo-ui-selectFileWidget-handle { +.oo-ui-selectFileWidget.oo-ui-widget-disabled .oo-ui-selectFileWidget-info { color: #cccccc; text-shadow: 0 1px 1px #ffffff; border-color: #dddddd; background-color: #f3f3f3; } -.oo-ui-selectFileWidget.oo-ui-widget-disabled .oo-ui-selectFileWidget-handle > .oo-ui-iconElement-icon, -.oo-ui-selectFileWidget.oo-ui-widget-disabled .oo-ui-selectFileWidget-handle > .oo-ui-indicatorElement-indicator { +.oo-ui-selectFileWidget.oo-ui-widget-disabled .oo-ui-selectFileWidget-info > .oo-ui-iconElement-icon, +.oo-ui-selectFileWidget.oo-ui-widget-disabled .oo-ui-selectFileWidget-info > .oo-ui-indicatorElement-indicator { opacity: 0.2; } .oo-ui-selectFileWidget-empty .oo-ui-selectFileWidget-label { color: #cccccc; } -.oo-ui-selectFileWidget.oo-ui-iconElement .oo-ui-selectFileWidget-handle { +.oo-ui-selectFileWidget.oo-ui-iconElement .oo-ui-selectFileWidget-info { padding-left: 3em; } -.oo-ui-selectFileWidget .oo-ui-selectFileWidget-handle { +.oo-ui-selectFileWidget .oo-ui-selectFileWidget-info { padding-right: 3em; } -.oo-ui-selectFileWidget .oo-ui-selectFileWidget-handle .oo-ui-selectFileWidget-clearButton { +.oo-ui-selectFileWidget .oo-ui-selectFileWidget-info .oo-ui-selectFileWidget-clearButton { right: 0; } -.oo-ui-selectFileWidget.oo-ui-indicatorElement .oo-ui-selectFileWidget-handle { +.oo-ui-selectFileWidget.oo-ui-indicatorElement .oo-ui-selectFileWidget-info { padding-right: 5em; } -.oo-ui-selectFileWidget.oo-ui-indicatorElement .oo-ui-selectFileWidget-handle .oo-ui-selectFileWidget-clearButton { +.oo-ui-selectFileWidget.oo-ui-indicatorElement .oo-ui-selectFileWidget-info .oo-ui-selectFileWidget-clearButton { right: 2em; } -.oo-ui-selectFileWidget-empty .oo-ui-selectFileWidget-handle, -.oo-ui-selectFileWidget-notsupported .oo-ui-selectFileWidget-handle { +.oo-ui-selectFileWidget-empty .oo-ui-selectFileWidget-info, +.oo-ui-selectFileWidget-notsupported .oo-ui-selectFileWidget-info { padding-right: 1em; } -.oo-ui-selectFileWidget-empty.oo-ui-indicatorElement .oo-ui-selectFileWidget-handle, -.oo-ui-selectFileWidget-notsupported.oo-ui-indicatorElement .oo-ui-selectFileWidget-handle { +.oo-ui-selectFileWidget-empty.oo-ui-indicatorElement .oo-ui-selectFileWidget-info, +.oo-ui-selectFileWidget-notsupported.oo-ui-indicatorElement .oo-ui-selectFileWidget-info { padding-right: 2em; } +.oo-ui-selectFileWidget-dropTarget { + line-height: 3.5em; + border: 1px dashed #cccccc; + padding: 0.5em 1em; + margin-bottom: 0.5em; + background: #ffffff; + text-align: center; + vertical-align: middle; +} +.oo-ui-selectFileWidget-supported.oo-ui-widget-enabled .oo-ui-selectFileWidget-dropTarget:hover { + background-color: #eeeeee; +} +.oo-ui-selectFileWidget-supported.oo-ui-widget-enabled.oo-ui-selectFileWidget-canDrop .oo-ui-selectFileWidget-dropTarget { + background: rgba(52, 123, 255, 0.1); +} +.oo-ui-selectFileWidget.oo-ui-widget-disabled .oo-ui-selectFileWidget-dropTarget, +.oo-ui-selectFileWidget-notsupported .oo-ui-selectFileWidget-dropTarget { + color: #cccccc; + text-shadow: 0 1px 1px #ffffff; + border-color: #dddddd; + background-color: #f3f3f3; +} .oo-ui-outlineOptionWidget { position: relative; cursor: pointer; @@ -2343,7 +2401,6 @@ .oo-ui-outlineControlsWidget > .oo-ui-iconElement-icon { float: left; background-position: right center; - background-repeat: no-repeat; } .oo-ui-outlineControlsWidget-items { float: left; @@ -2405,6 +2462,155 @@ background-color: #ffffff; color: #333333; } +.oo-ui-capsuleMultiSelectWidget { + display: inline-block; + position: relative; + width: 100%; + max-width: 50em; +} +.oo-ui-capsuleMultiSelectWidget-handle { + width: 100%; + display: inline-block; + position: relative; +} +.oo-ui-capsuleMultiSelectWidget-group { + display: inline; +} +.oo-ui-capsuleMultiSelectWidget > .oo-ui-menuSelectWidget { + z-index: 1; + width: 100%; +} +.oo-ui-capsuleMultiSelectWidget-handle { + background: #ffffff; + cursor: text; + min-height: 2.4em; + margin-right: 0.5em; + padding: 0.25em 0; + border: 1px solid #cccccc; + border-radius: 0.1em; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} +.oo-ui-capsuleMultiSelectWidget-handle:last-child { + margin-right: 0; +} +.oo-ui-capsuleMultiSelectWidget-handle .oo-ui-capsuleMultiSelectWidget-group { + margin: 0 0.2em; +} +.oo-ui-capsuleMultiSelectWidget-handle > .oo-ui-indicatorElement-indicator, +.oo-ui-capsuleMultiSelectWidget-handle > .oo-ui-iconElement-icon { + position: absolute; + background-position: center center; + background-repeat: no-repeat; +} +.oo-ui-capsuleMultiSelectWidget-handle > input { + border: none; + min-width: 1em; + max-width: 100%; + line-height: 1.675em; + margin: 0; + padding: 0; + font-size: inherit; + font-family: inherit; + background-color: transparent; + color: black; + vertical-align: middle; +} +.oo-ui-capsuleMultiSelectWidget-handle > input:focus { + outline: none; +} +.oo-ui-capsuleMultiSelectWidget.oo-ui-indicatorElement .oo-ui-capsuleMultiSelectWidget-handle { + padding-right: 0.9375em; +} +.oo-ui-capsuleMultiSelectWidget.oo-ui-indicatorElement .oo-ui-capsuleMultiSelectWidget-handle > .oo-ui-indicatorElement-indicator { + right: 0; + top: 0; + width: 0.9375em; + height: 0.9375em; + margin: 0.775em; +} +.oo-ui-capsuleMultiSelectWidget.oo-ui-iconElement .oo-ui-capsuleMultiSelectWidget-handle { + padding-left: 1.875em; +} +.oo-ui-capsuleMultiSelectWidget.oo-ui-iconElement .oo-ui-capsuleMultiSelectWidget-handle > .oo-ui-iconElement-icon { + left: 0; + top: 0; + width: 1.875em; + height: 1.875em; + margin: 0.3em; +} +.oo-ui-capsuleMultiSelectWidget:hover .oo-ui-capsuleMultiSelectWidget-handle { + border-color: #aaaaaa; +} +.oo-ui-capsuleMultiSelectWidget.oo-ui-widget-disabled .oo-ui-capsuleMultiSelectWidget-handle { + color: #cccccc; + text-shadow: 0 1px 1px #ffffff; + border-color: #dddddd; + background-color: #f3f3f3; + cursor: default; +} +.oo-ui-capsuleMultiSelectWidget.oo-ui-widget-disabled .oo-ui-capsuleMultiSelectWidget-handle > .oo-ui-iconElement-icon, +.oo-ui-capsuleMultiSelectWidget.oo-ui-widget-disabled .oo-ui-capsuleMultiSelectWidget-handle > .oo-ui-indicatorElement-indicator { + opacity: 0.2; +} +.oo-ui-capsuleMultiSelectWidget .oo-ui-selectWidget { + border-top-color: #ffffff; +} +.oo-ui-capsuleItemWidget { + position: relative; + display: inline-block; + cursor: default; + white-space: nowrap; + width: auto; + max-width: 100%; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + vertical-align: middle; + padding: 0 0.4em; + margin: 0 0.1em; + height: 1.7em; + line-height: 1.7em; + background-color: #eeeeee; + border: 1px solid #cccccc; + color: #555555; + border-radius: 0.1em; +} +.oo-ui-capsuleItemWidget > .oo-ui-iconElement-icon { + cursor: pointer; +} +.oo-ui-capsuleItemWidget.oo-ui-widget-disabled > .oo-ui-iconElement-icon { + cursor: default; +} +.oo-ui-capsuleItemWidget.oo-ui-labelElement .oo-ui-labelElement-label { + display: block; + text-overflow: ellipsis; + overflow: hidden; +} +.oo-ui-capsuleItemWidget.oo-ui-indicatorElement > .oo-ui-labelElement-label { + padding-right: 1.3375em; +} +.oo-ui-capsuleItemWidget.oo-ui-indicatorElement > .oo-ui-indicatorElement-indicator { + position: absolute; + right: 0.4em; + top: 0; + width: 0.9375em; + height: 100%; + background-repeat: no-repeat; +} +.oo-ui-capsuleItemWidget.oo-ui-indicatorElement > .oo-ui-indicator-clear { + cursor: pointer; +} +.oo-ui-capsuleItemWidget.oo-ui-widget-disabled { + color: #cccccc; + text-shadow: 0 1px 1px #ffffff; + border-color: #dddddd; + background-color: #f3f3f3; +} +.oo-ui-capsuleItemWidget.oo-ui-widget-disabled > .oo-ui-indicatorElement-indicator { + opacity: 0.2; +} .oo-ui-comboBoxWidget { display: inline-block; position: relative; @@ -2528,9 +2734,6 @@ /* @noflip */ left: 0; } -.oo-ui-dialog { - z-index: 1000; -} .oo-ui-dialog-content > .oo-ui-window-head, .oo-ui-dialog-content > .oo-ui-window-body, .oo-ui-dialog-content > .oo-ui-window-foot {