From 90a7642c761c2c3d00ba77d70ddf28eb19bbfc96 Mon Sep 17 00:00:00 2001 From: Roan Kattouw Date: Thu, 21 Aug 2014 09:59:20 -0700 Subject: [PATCH] Update OOjs UI to v0.1.0-pre (55b861b167) New changes: 466a876 [BREAKING CHANGE] Make content isolation optional 23f26c3 [BREAKING CHANGE] Set active and pressed on the buttoned element, not the button 55b861b build: Switch from grunt-recess to grunt-contrib-less Change-Id: Ie4454376df9492e3b77b6cc174ce7b38548cc56d --- resources/lib/oojs-ui/oojs-ui-agora.css | 139 ++--- resources/lib/oojs-ui/oojs-ui-apex.css | 447 ++++--------- resources/lib/oojs-ui/oojs-ui.js | 796 ++++++++++++------------ resources/lib/oojs-ui/oojs-ui.svg.css | 522 +++++----------- 4 files changed, 752 insertions(+), 1152 deletions(-) diff --git a/resources/lib/oojs-ui/oojs-ui-agora.css b/resources/lib/oojs-ui/oojs-ui-agora.css index e6a6a86ac0..7291cddf88 100644 --- a/resources/lib/oojs-ui/oojs-ui-agora.css +++ b/resources/lib/oojs-ui/oojs-ui-agora.css @@ -1,41 +1,37 @@ /*! - * OOjs UI v0.1.0-pre (944c47c5fe) + * OOjs UI v0.1.0-pre (55b861b167) * https://www.mediawiki.org/wiki/OOjs_UI * * Copyright 2011–2014 OOjs Team and other contributors. * Released under the MIT license * http://oojs.mit-license.org * - * Date: 2014-08-21T00:23:52Z + * Date: 2014-08-21T16:59:20Z */ .oo-ui-dialog-content > .oo-ui-window-head, .oo-ui-dialog-content > .oo-ui-window-body, .oo-ui-dialog-content > .oo-ui-window-foot { position: absolute; - right: 0; left: 0; + right: 0; overflow: hidden; -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; } - .oo-ui-dialog-content > .oo-ui-window-head { - top: 0; z-index: 1; + top: 0; } - .oo-ui-dialog-content > .oo-ui-window-body { + z-index: 2; top: 0; bottom: 0; - z-index: 2; } - .oo-ui-dialog-content > .oo-ui-window-foot { - bottom: 0; z-index: 1; + bottom: 0; } - .oo-ui-dialog-content > .oo-ui-window-overlay { z-index: 3; } @@ -44,40 +40,36 @@ background-color: rgba(255, 255, 255, 0.5); opacity: 0; -webkit-transition: opacity 250ms ease-in-out; - -moz-transition: opacity 250ms ease-in-out; - -ms-transition: opacity 250ms ease-in-out; - -o-transition: opacity 250ms ease-in-out; - transition: opacity 250ms ease-in-out; + -moz-transition: opacity 250ms ease-in-out; + -ms-transition: opacity 250ms ease-in-out; + -o-transition: opacity 250ms ease-in-out; + transition: opacity 250ms ease-in-out; } - .oo-ui-windowManager-modal > .oo-ui-dialog > .oo-ui-window-frame { top: 0; bottom: 0; background-color: #fff; -webkit-transform: translate3d(0, -200%, 0); - -moz-transform: translate3d(0, -200%, 0); - -ms-transform: translate3d(0, -200%, 0); - -o-transform: translate3d(0, -200%, 0); - transform: translate3d(0, -200%, 0); + -moz-transform: translate3d(0, -200%, 0); + -ms-transform: translate3d(0, -200%, 0); + -o-transform: translate3d(0, -200%, 0); + transform: translate3d(0, -200%, 0); -webkit-transition: transform 250ms ease-in-out; - -moz-transition: transform 250ms ease-in-out; - -ms-transition: transform 250ms ease-in-out; - -o-transition: transform 250ms ease-in-out; - transition: transform 250ms ease-in-out; + -moz-transition: transform 250ms ease-in-out; + -ms-transition: transform 250ms ease-in-out; + -o-transition: transform 250ms ease-in-out; + transition: transform 250ms ease-in-out; } - .oo-ui-windowManager-modal > .oo-ui-dialog.oo-ui-window-ready { opacity: 1; } - .oo-ui-windowManager-modal > .oo-ui-dialog.oo-ui-window-ready > .oo-ui-window-frame { -webkit-transform: translate3d(0, 0, 0); - -moz-transform: translate3d(0, 0, 0); - -ms-transform: translate3d(0, 0, 0); - -o-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); + -moz-transform: translate3d(0, 0, 0); + -ms-transform: translate3d(0, 0, 0); + -o-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); } - .oo-ui-windowManager-modal.oo-ui-windowManager-floating > .oo-ui-dialog > .oo-ui-window-frame { border: solid 1px #ccc; border-radius: 0.5em; @@ -87,82 +79,65 @@ .oo-ui-messageDialog-title, .oo-ui-messageDialog-message { display: block; - padding-top: 0.5em; text-align: center; + padding-top: 0.5em; } - .oo-ui-messageDialog-title { font-size: 1.5em; line-height: 1em; color: #000; } - .oo-ui-messageDialog-message { font-size: 0.9em; line-height: 1.25em; color: #666; } - .oo-ui-messageDialog-message-verbose { font-size: 1.1em; line-height: 1.5em; text-align: left; } - .oo-ui-messageDialog-actions-horizontal .oo-ui-actionWidget { border-right: solid 1px #e5e5e5; } - .oo-ui-messageDialog-actions-horizontal .oo-ui-actionWidget:last-child { border-right-width: 0; } - .oo-ui-messageDialog-actions-vertical .oo-ui-actionWidget { border-bottom: solid 1px #e5e5e5; } - .oo-ui-messageDialog-actions-vertical .oo-ui-actionWidget:last-child { border-bottom-width: 0; } - .oo-ui-messageDialog-actions .oo-ui-actionWidget .oo-ui-labeledElement-label { - padding: 0 2em; - line-height: 3.4em; text-align: center; + line-height: 3.4em; + padding: 0 2em; } - .oo-ui-messageDialog-actions .oo-ui-actionWidget:hover { background-color: rgba(0, 0, 0, 0.05); } - .oo-ui-messageDialog-actions .oo-ui-actionWidget:active { background-color: rgba(0, 0, 0, 0.1); } - .oo-ui-messageDialog-actions .oo-ui-actionWidget.oo-ui-flaggableElement-primary:hover { background-color: rgba(8, 126, 204, 0.05); } - .oo-ui-messageDialog-actions .oo-ui-actionWidget.oo-ui-flaggableElement-primary:active { background-color: rgba(8, 126, 204, 0.1); } - .oo-ui-messageDialog-actions .oo-ui-actionWidget.oo-ui-flaggableElement-primary .oo-ui-labeledElement-label { font-weight: bold; } - .oo-ui-messageDialog-actions .oo-ui-actionWidget.oo-ui-flaggableElement-constructive:hover { background-color: rgba(118, 171, 54, 0.05); } - .oo-ui-messageDialog-actions .oo-ui-actionWidget.oo-ui-flaggableElement-constructive:active { background-color: rgba(118, 171, 54, 0.1); } - .oo-ui-messageDialog-actions .oo-ui-actionWidget.oo-ui-flaggableElement-destructive:hover { background-color: rgba(212, 83, 83, 0.05); } - .oo-ui-messageDialog-actions .oo-ui-actionWidget.oo-ui-flaggableElement-destructive:active { background-color: rgba(212, 83, 83, 0.1); } @@ -171,141 +146,118 @@ height: 3.35em; border-bottom: 1px solid #dddddd; -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; } - .oo-ui-processDialog-content .oo-ui-window-body { top: 3.35em; padding: 2em 0; } - .oo-ui-processDialog-navigation { position: relative; height: 3.35em; padding: 0 1em; } - .oo-ui-processDialog-location { - height: 3.35em; padding: 0.25em 0; - text-align: center; + height: 3.35em; cursor: default; + text-align: center; } - .oo-ui-processDialog-title { font-weight: bold; line-height: 1.85em; } - .oo-ui-processDialog-actions-safe .oo-ui-actionWidget .oo-ui-buttonedElement-button, .oo-ui-processDialog-actions-primary .oo-ui-actionWidget .oo-ui-buttonedElement-button, .oo-ui-processDialog-actions-other .oo-ui-actionWidget .oo-ui-buttonedElement-button { + padding: 0.35em 0.75em; min-width: 1.85em; min-height: 1.85em; - padding: 0.35em 0.75em; border: 1px solid #dddddd; border-radius: 4px; } - .oo-ui-processDialog-actions-safe .oo-ui-actionWidget .oo-ui-labeledElement-label, .oo-ui-processDialog-actions-primary .oo-ui-actionWidget .oo-ui-labeledElement-label, .oo-ui-processDialog-actions-other .oo-ui-actionWidget .oo-ui-labeledElement-label { + line-height: 1.85em; padding: 0 1em; font-weight: bold; - line-height: 1.85em; color: #777777; } - .oo-ui-processDialog-actions-safe .oo-ui-actionWidget .oo-ui-iconedElement-icon, .oo-ui-processDialog-actions-primary .oo-ui-actionWidget .oo-ui-iconedElement-icon, .oo-ui-processDialog-actions-other .oo-ui-actionWidget .oo-ui-iconedElement-icon { position: absolute; margin-top: -0.125em; } - .oo-ui-processDialog-actions-safe .oo-ui-actionWidget.oo-ui-buttonedElement-framed .oo-ui-buttonedElement-button, .oo-ui-processDialog-actions-primary .oo-ui-actionWidget.oo-ui-buttonedElement-framed .oo-ui-buttonedElement-button, .oo-ui-processDialog-actions-other .oo-ui-actionWidget.oo-ui-buttonedElement-framed .oo-ui-buttonedElement-button { vertical-align: middle; } - .oo-ui-processDialog-actions-safe .oo-ui-actionWidget.oo-ui-flaggableElement-destructive .oo-ui-buttonedElement-button, .oo-ui-processDialog-actions-primary .oo-ui-actionWidget.oo-ui-flaggableElement-destructive .oo-ui-buttonedElement-button, .oo-ui-processDialog-actions-other .oo-ui-actionWidget.oo-ui-flaggableElement-destructive .oo-ui-buttonedElement-button { border: 1px solid transparent; } - .oo-ui-processDialog-actions-safe .oo-ui-actionWidget.oo-ui-flaggableElement-destructive .oo-ui-labeledElement-label, .oo-ui-processDialog-actions-primary .oo-ui-actionWidget.oo-ui-flaggableElement-destructive .oo-ui-labeledElement-label, .oo-ui-processDialog-actions-other .oo-ui-actionWidget.oo-ui-flaggableElement-destructive .oo-ui-labeledElement-label { color: #d11d13; } - .oo-ui-processDialog-actions-safe .oo-ui-actionWidget .oo-ui-buttonedElement-button, .oo-ui-processDialog-actions-primary .oo-ui-actionWidget .oo-ui-buttonedElement-button { padding: 0.75em 0.35em; border: none; border-radius: 0; } - .oo-ui-processDialog-actions-safe .oo-ui-actionWidget.oo-ui-flaggableElement-primary .oo-ui-buttonedElement-button, .oo-ui-processDialog-actions-primary .oo-ui-actionWidget.oo-ui-flaggableElement-primary .oo-ui-buttonedElement-button { background-color: #347bff; } - .oo-ui-processDialog-actions-safe .oo-ui-actionWidget.oo-ui-flaggableElement-primary .oo-ui-labeledElement-label, .oo-ui-processDialog-actions-primary .oo-ui-actionWidget.oo-ui-flaggableElement-primary .oo-ui-labeledElement-label { color: #ffffff; } - .oo-ui-processDialog-actions-safe .oo-ui-actionWidget.oo-ui-iconedElement .oo-ui-iconedElement-icon { left: 0.5em; } - .oo-ui-processDialog-actions-safe .oo-ui-actionWidget.oo-ui-iconedElement .oo-ui-labeledElement-label { padding-left: 2.25em; } - .oo-ui-processDialog-actions-primary .oo-ui-actionWidget.oo-ui-iconedElement .oo-ui-iconedElement-icon { right: 0.5em; } - .oo-ui-processDialog-actions-primary .oo-ui-actionWidget.oo-ui-iconedElement .oo-ui-labeledElement-label { padding-right: 2.25em; } - .oo-ui-processDialog-actions-other { position: absolute; bottom: 1em; } - .oo-ui-processDialog > .oo-ui-window-frame { min-height: 5em; } - .oo-ui-processDialog-errors { + background-color: rgba(255, 255, 255, 0.9); padding: 3em 3em 1.5em 3em; text-align: center; - background-color: rgba(255, 255, 255, 0.9); } - .oo-ui-processDialog-errors .oo-ui-buttonWidget { margin: 2em 1em 2em 1em; } - .oo-ui-processDialog-errors-title { - margin-bottom: 2em; font-size: 1.5em; color: #000; + margin-bottom: 2em; } - .oo-ui-processDialog-error { - padding: 1em; - margin: 1em; text-align: left; - background-color: #fff7f7; + margin: 1em; + padding: 1em; border: solid 1px #ff9e9e; + background-color: #fff7f7; border-radius: 0.25em; } @@ -329,31 +281,24 @@ font-weight: bold; border-bottom: 1px solid #dddddd; } - .oo-ui-optionWidget.oo-ui-indicatedElement .oo-ui-labeledElement-label { padding-right: 1.5em; } - .oo-ui-optionWidget-level-0 { padding-left: 3.5em; } - .oo-ui-optionWidget-level-0 .oo-ui-iconedElement-icon { left: 1em; } - .oo-ui-optionWidget-level-1 { padding-left: 5em; } - .oo-ui-optionWidget-level-1 .oo-ui-iconedElement-icon { left: 2.5em; } - .oo-ui-optionWidget-level-2 { padding-left: 6.5em; } - .oo-ui-optionWidget-level-2 .oo-ui-iconedElement-icon { left: 4em; } @@ -367,10 +312,9 @@ } .oo-ui-menuItemWidget.oo-ui-optionWidget-selected { - color: #ffffff; background: #347bff; + color: #ffffff; } - .oo-ui-menuItemWidget .oo-ui-iconedElement-icon { background-size: 24px auto; } @@ -387,8 +331,7 @@ } /* Icons */ - .oo-ui-icon-check { - background: #347bff; background-image: /* @embed */ url(themes/agora/images/icons/check.svg); -} \ No newline at end of file + background: #347bff; +} diff --git a/resources/lib/oojs-ui/oojs-ui-apex.css b/resources/lib/oojs-ui/oojs-ui-apex.css index 88eac979e4..3f968c4e7e 100644 --- a/resources/lib/oojs-ui/oojs-ui-apex.css +++ b/resources/lib/oojs-ui/oojs-ui-apex.css @@ -1,146 +1,130 @@ /*! - * OOjs UI v0.1.0-pre (944c47c5fe) + * OOjs UI v0.1.0-pre (55b861b167) * https://www.mediawiki.org/wiki/OOjs_UI * * Copyright 2011–2014 OOjs Team and other contributors. * Released under the MIT license * http://oojs.mit-license.org * - * Date: 2014-08-21T00:23:52Z + * Date: 2014-08-21T16:59:20Z */ .oo-ui-dialog-content > .oo-ui-window-head, .oo-ui-dialog-content > .oo-ui-window-body, .oo-ui-dialog-content > .oo-ui-window-foot { position: absolute; - right: 0; left: 0; + right: 0; overflow: hidden; -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; } - .oo-ui-dialog-content > .oo-ui-window-head { - top: 0; z-index: 1; + top: 0; } - .oo-ui-dialog-content > .oo-ui-window-body { + z-index: 2; top: 0; bottom: 0; - z-index: 2; box-shadow: 0 0 0.66em rgba(0, 0, 0, 0.25); } - .oo-ui-dialog-content > .oo-ui-window-foot { - bottom: 0; z-index: 1; + bottom: 0; } - .oo-ui-dialog-content > .oo-ui-window-overlay { z-index: 3; } -.oo-ui-frame-content { - font-family: sans-serif; - font-size: 0.8em; -} - .oo-ui-toolbar-bar { + border-bottom: solid 1px #ccc; background: #f8fbfd; + filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#ffffff', endColorstr='#f1f7fb'); background-image: -webkit-gradient(linear, right top, right bottom, color-stop(0%, #ffffff), color-stop(100%, #f1f7fb)); background-image: -webkit-linear-gradient(top, #ffffff 0%, #f1f7fb 100%); background-image: -moz-linear-gradient(top, #ffffff 0%, #f1f7fb 100%); background-image: -ms-linear-gradient(top, #ffffff 0%, #f1f7fb 100%); background-image: -o-linear-gradient(top, #ffffff 0%, #f1f7fb 100%); background-image: linear-gradient(top, #ffffff 0%, #f1f7fb 100%); - border-bottom: solid 1px #ccc; - filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#ffffff', endColorstr='#f1f7fb'); } - .oo-ui-toolbar-bar .oo-ui-toolbar-bar { - background: none; border: none; + background: none; } - .oo-ui-toolbar-shadow { + background-image: /* @embed */ url(images/toolbar-shadow.png); bottom: -9px; height: 9px; - background-image: /* @embed */ url(images/toolbar-shadow.png); opacity: 0.125; -webkit-transition: opacity 500ms ease-in-out; - -moz-transition: opacity 500ms ease-in-out; - -ms-transition: opacity 500ms ease-in-out; - -o-transition: opacity 500ms ease-in-out; - transition: opacity 500ms ease-in-out; + -moz-transition: opacity 500ms ease-in-out; + -ms-transition: opacity 500ms ease-in-out; + -o-transition: opacity 500ms ease-in-out; + transition: opacity 500ms ease-in-out; } .oo-ui-toolGroup { - border: solid 1px transparent; border-radius: 0.25em; + border: solid 1px transparent; -webkit-transition: border-color 300ms ease-in-out; - -moz-transition: border-color 300ms ease-in-out; - -ms-transition: border-color 300ms ease-in-out; - -o-transition: border-color 300ms ease-in-out; - transition: border-color 300ms ease-in-out; + -moz-transition: border-color 300ms ease-in-out; + -ms-transition: border-color 300ms ease-in-out; + -o-transition: border-color 300ms ease-in-out; + transition: border-color 300ms ease-in-out; } - .oo-ui-toolGroup.oo-ui-widget-enabled:hover { border-color: rgba(0, 0, 0, 0.1); } - .oo-ui-toolGroup.oo-ui-widget-enabled .oo-ui-tool-link .oo-ui-tool-title { color: #000; } -.oo-ui-window-content { +.oo-ui-window-isolated.oo-ui-window-content { + font-family: sans-serif; + font-size: 0.8em; background: transparent; } - -.oo-ui-window-overlay { +.oo-ui-window-isolated.oo-ui-window-overlay { font-family: sans-serif; - font-size: 1em; line-height: 1.5em; + font-size: 1em; } .oo-ui-windowManager-modal > .oo-ui-dialog { background-color: rgba(255, 255, 255, 0.5); opacity: 0; -webkit-transition: opacity 250ms ease-in-out; - -moz-transition: opacity 250ms ease-in-out; - -ms-transition: opacity 250ms ease-in-out; - -o-transition: opacity 250ms ease-in-out; - transition: opacity 250ms ease-in-out; + -moz-transition: opacity 250ms ease-in-out; + -ms-transition: opacity 250ms ease-in-out; + -o-transition: opacity 250ms ease-in-out; + transition: opacity 250ms ease-in-out; } - .oo-ui-windowManager-modal > .oo-ui-dialog > .oo-ui-window-frame { top: 1em; bottom: 1em; background-color: #fff; -webkit-transform: scale(0.5); - -moz-transform: scale(0.5); - -ms-transform: scale(0.5); - -o-transform: scale(0.5); - transform: scale(0.5); + -moz-transform: scale(0.5); + -ms-transform: scale(0.5); + -o-transform: scale(0.5); + transform: scale(0.5); -webkit-transition: all 250ms ease-in-out; - -moz-transition: all 250ms ease-in-out; - -ms-transition: all 250ms ease-in-out; - -o-transition: all 250ms ease-in-out; - transition: all 250ms ease-in-out; + -moz-transition: all 250ms ease-in-out; + -ms-transition: all 250ms ease-in-out; + -o-transition: all 250ms ease-in-out; + transition: all 250ms ease-in-out; } - .oo-ui-windowManager-modal > .oo-ui-dialog.oo-ui-window-ready { opacity: 1; } - .oo-ui-windowManager-modal > .oo-ui-dialog.oo-ui-window-ready > .oo-ui-window-frame { -webkit-transform: scale(1); - -moz-transform: scale(1); - -ms-transform: scale(1); - -o-transform: scale(1); - transform: scale(1); + -moz-transform: scale(1); + -ms-transform: scale(1); + -o-transform: scale(1); + transform: scale(1); } - .oo-ui-windowManager-modal.oo-ui-windowManager-floating > .oo-ui-dialog > .oo-ui-window-frame { border: solid 1px #ccc; border-radius: 0.5em; @@ -150,86 +134,68 @@ .oo-ui-messageDialog-content .oo-ui-window-body { box-shadow: 0 0 0.33em rgba(0, 0, 0, 0.33); } - .oo-ui-messageDialog-title, .oo-ui-messageDialog-message { display: block; - padding-top: 0.5em; text-align: center; + padding-top: 0.5em; } - .oo-ui-messageDialog-title { font-size: 1.5em; line-height: 1em; color: #000; } - .oo-ui-messageDialog-message { font-size: 0.9em; line-height: 1.25em; color: #666; } - .oo-ui-messageDialog-message-verbose { font-size: 1.1em; line-height: 1.5em; text-align: left; } - .oo-ui-messageDialog-actions-horizontal .oo-ui-actionWidget { border-right: solid 1px #e5e5e5; } - .oo-ui-messageDialog-actions-horizontal .oo-ui-actionWidget:last-child { border-right-width: 0; } - .oo-ui-messageDialog-actions-vertical .oo-ui-actionWidget { border-bottom: solid 1px #e5e5e5; } - .oo-ui-messageDialog-actions-vertical .oo-ui-actionWidget:last-child { border-bottom-width: 0; } - .oo-ui-messageDialog-actions .oo-ui-actionWidget .oo-ui-labeledElement-label { - padding: 0 2em; - line-height: 3.4em; text-align: center; + line-height: 3.4em; + padding: 0 2em; } - .oo-ui-messageDialog-actions .oo-ui-actionWidget:hover { background-color: rgba(0, 0, 0, 0.05); } - .oo-ui-messageDialog-actions .oo-ui-actionWidget:active { background-color: rgba(0, 0, 0, 0.1); } - .oo-ui-messageDialog-actions .oo-ui-actionWidget.oo-ui-flaggableElement-primary:hover { background-color: rgba(8, 126, 204, 0.05); } - .oo-ui-messageDialog-actions .oo-ui-actionWidget.oo-ui-flaggableElement-primary:active { background-color: rgba(8, 126, 204, 0.1); } - .oo-ui-messageDialog-actions .oo-ui-actionWidget.oo-ui-flaggableElement-primary .oo-ui-labeledElement-label { font-weight: bold; } - .oo-ui-messageDialog-actions .oo-ui-actionWidget.oo-ui-flaggableElement-constructive:hover { background-color: rgba(118, 171, 54, 0.05); } - .oo-ui-messageDialog-actions .oo-ui-actionWidget.oo-ui-flaggableElement-constructive:active { background-color: rgba(118, 171, 54, 0.1); } - .oo-ui-messageDialog-actions .oo-ui-actionWidget.oo-ui-flaggableElement-destructive:hover { background-color: rgba(212, 83, 83, 0.05); } - .oo-ui-messageDialog-actions .oo-ui-actionWidget.oo-ui-flaggableElement-destructive:active { background-color: rgba(212, 83, 83, 0.1); } @@ -237,351 +203,295 @@ .oo-ui-processDialog-content .oo-ui-window-head { height: 3.4em; } - .oo-ui-processDialog-content .oo-ui-window-body { top: 3.4em; box-shadow: 0 0 0.33em rgba(0, 0, 0, 0.33); } - .oo-ui-processDialog-navigation { position: relative; height: 3.4em; padding: 0 1em; } - .oo-ui-processDialog-location { - height: 1.9em; padding: 0.25em 0; - text-align: center; + height: 1.9em; cursor: default; + text-align: center; } - .oo-ui-processDialog-title { font-weight: bold; line-height: 1.9em; } - .oo-ui-processDialog-actions-safe .oo-ui-actionWidget .oo-ui-buttonedElement-button, .oo-ui-processDialog-actions-primary .oo-ui-actionWidget .oo-ui-buttonedElement-button, .oo-ui-processDialog-actions-other .oo-ui-actionWidget .oo-ui-buttonedElement-button { - min-width: 1.9em; - min-height: 1.9em; padding-top: 0.75em; padding-bottom: 0.75em; + min-width: 1.9em; + min-height: 1.9em; } - .oo-ui-processDialog-actions-safe .oo-ui-actionWidget .oo-ui-labeledElement-label, .oo-ui-processDialog-actions-primary .oo-ui-actionWidget .oo-ui-labeledElement-label, .oo-ui-processDialog-actions-other .oo-ui-actionWidget .oo-ui-labeledElement-label { - padding: 0 1em; line-height: 1.9em; + padding: 0 1em; } - .oo-ui-processDialog-actions-safe .oo-ui-actionWidget .oo-ui-iconedElement-icon, .oo-ui-processDialog-actions-primary .oo-ui-actionWidget .oo-ui-iconedElement-icon, .oo-ui-processDialog-actions-other .oo-ui-actionWidget .oo-ui-iconedElement-icon { position: absolute; margin-top: -0.125em; } - .oo-ui-processDialog-actions-safe .oo-ui-actionWidget.oo-ui-buttonedElement-framed, .oo-ui-processDialog-actions-primary .oo-ui-actionWidget.oo-ui-buttonedElement-framed, .oo-ui-processDialog-actions-other .oo-ui-actionWidget.oo-ui-buttonedElement-framed { margin: 0.75em 0 0.75em 0.75em; } - .oo-ui-processDialog-actions-safe .oo-ui-actionWidget.oo-ui-buttonedElement-framed .oo-ui-buttonedElement-button, .oo-ui-processDialog-actions-primary .oo-ui-actionWidget.oo-ui-buttonedElement-framed .oo-ui-buttonedElement-button, .oo-ui-processDialog-actions-other .oo-ui-actionWidget.oo-ui-buttonedElement-framed .oo-ui-buttonedElement-button { padding: 0; vertical-align: middle; } - .oo-ui-processDialog-actions-safe .oo-ui-actionWidget:hover, .oo-ui-processDialog-actions-primary .oo-ui-actionWidget:hover { background-color: rgba(0, 0, 0, 0.05); } - .oo-ui-processDialog-actions-safe .oo-ui-actionWidget:active, .oo-ui-processDialog-actions-primary .oo-ui-actionWidget:active { background-color: rgba(0, 0, 0, 0.1); } - .oo-ui-processDialog-actions-safe .oo-ui-actionWidget.oo-ui-buttonedElement-framed, .oo-ui-processDialog-actions-primary .oo-ui-actionWidget.oo-ui-buttonedElement-framed { margin: 0.75em; } - .oo-ui-processDialog-actions-safe .oo-ui-actionWidget.oo-ui-buttonedElement-framed .oo-ui-buttonedElement-button, .oo-ui-processDialog-actions-primary .oo-ui-actionWidget.oo-ui-buttonedElement-framed .oo-ui-buttonedElement-button { /* Adjust for border so text aligns with title */ - margin: -1px; } - .oo-ui-processDialog-actions-safe .oo-ui-actionWidget.oo-ui-flaggableElement-primary:hover, .oo-ui-processDialog-actions-primary .oo-ui-actionWidget.oo-ui-flaggableElement-primary:hover { background-color: rgba(8, 126, 204, 0.05); } - .oo-ui-processDialog-actions-safe .oo-ui-actionWidget.oo-ui-flaggableElement-primary:active, .oo-ui-processDialog-actions-primary .oo-ui-actionWidget.oo-ui-flaggableElement-primary:active { background-color: rgba(8, 126, 204, 0.1); } - .oo-ui-processDialog-actions-safe .oo-ui-actionWidget.oo-ui-flaggableElement-primary .oo-ui-labeledElement-label, .oo-ui-processDialog-actions-primary .oo-ui-actionWidget.oo-ui-flaggableElement-primary .oo-ui-labeledElement-label { font-weight: bold; } - .oo-ui-processDialog-actions-safe .oo-ui-actionWidget.oo-ui-flaggableElement-constructive:hover, .oo-ui-processDialog-actions-primary .oo-ui-actionWidget.oo-ui-flaggableElement-constructive:hover { background-color: rgba(118, 171, 54, 0.05); } - .oo-ui-processDialog-actions-safe .oo-ui-actionWidget.oo-ui-flaggableElement-constructive:active, .oo-ui-processDialog-actions-primary .oo-ui-actionWidget.oo-ui-flaggableElement-constructive:active { background-color: rgba(118, 171, 54, 0.1); } - .oo-ui-processDialog-actions-safe .oo-ui-actionWidget.oo-ui-flaggableElement-destructive:hover, .oo-ui-processDialog-actions-primary .oo-ui-actionWidget.oo-ui-flaggableElement-destructive:hover { background-color: rgba(212, 83, 83, 0.05); } - .oo-ui-processDialog-actions-safe .oo-ui-actionWidget.oo-ui-flaggableElement-destructive:active, .oo-ui-processDialog-actions-primary .oo-ui-actionWidget.oo-ui-flaggableElement-destructive:active { background-color: rgba(212, 83, 83, 0.1); } - .oo-ui-processDialog-actions-safe .oo-ui-actionWidget.oo-ui-iconedElement .oo-ui-iconedElement-icon { left: 0.5em; } - .oo-ui-processDialog-actions-safe .oo-ui-actionWidget.oo-ui-iconedElement .oo-ui-labeledElement-label { padding-left: 2.25em; } - .oo-ui-processDialog-actions-primary .oo-ui-actionWidget.oo-ui-iconedElement .oo-ui-iconedElement-icon { right: 0.5em; } - .oo-ui-processDialog-actions-primary .oo-ui-actionWidget.oo-ui-iconedElement .oo-ui-labeledElement-label { padding-right: 2.25em; } - .oo-ui-processDialog > .oo-ui-window-frame { min-height: 5em; } - .oo-ui-processDialog-errors { + background-color: rgba(255, 255, 255, 0.9); padding: 3em 3em 1.5em 3em; text-align: center; - background-color: rgba(255, 255, 255, 0.9); } - .oo-ui-processDialog-errors .oo-ui-buttonWidget { margin: 2em 1em 2em 1em; } - .oo-ui-processDialog-errors-title { - margin-bottom: 2em; font-size: 1.5em; color: #000; + margin-bottom: 2em; } - .oo-ui-processDialog-error { - padding: 1em; - margin: 1em; text-align: left; - background-color: #fff7f7; + margin: 1em; + padding: 1em; border: solid 1px #ff9e9e; + background-color: #fff7f7; border-radius: 0.25em; } .oo-ui-buttonedElement > .oo-ui-buttonedElement-button { color: #333; } - .oo-ui-buttonedElement.oo-ui-indicatedElement > .oo-ui-buttonedElement-button > .oo-ui-indicatedElement-indicator, .oo-ui-buttonedElement.oo-ui-iconedElement > .oo-ui-buttonedElement-button > .oo-ui-iconedElement-icon { + opacity: 0.8; width: 1.9em; height: 1.9em; - opacity: 0.8; } - .oo-ui-buttonedElement-frameless > .oo-ui-buttonedElement-button > .oo-ui-iconedElement-icon { /* Don't animate opacities for now, causes wiggling in Chrome (bug 63020) */ - /*.oo-ui-transition(opacity 200ms);*/ - } - .oo-ui-buttonedElement-frameless > .oo-ui-buttonedElement-button:hover > .oo-ui-iconedElement-icon, .oo-ui-buttonedElement-frameless > .oo-ui-buttonedElement-button:focus > .oo-ui-iconedElement-icon { opacity: 1; } - .oo-ui-buttonedElement-frameless > .oo-ui-buttonedElement-button:hover > .oo-ui-labeledElement-label, .oo-ui-buttonedElement-frameless > .oo-ui-buttonedElement-button:focus > .oo-ui-labeledElement-label { color: #000; } - .oo-ui-buttonedElement-frameless > .oo-ui-buttonedElement-button > .oo-ui-labeledElement-label { color: #333; } - .oo-ui-buttonedElement-frameless.oo-ui-flaggableElement-primary > .oo-ui-buttonedElement-button > .oo-ui-labeledElement-label { color: #087ecc; } - .oo-ui-buttonedElement-frameless.oo-ui-flaggableElement-constructive > .oo-ui-buttonedElement-button > .oo-ui-labeledElement-label { color: #76ab36; } - .oo-ui-buttonedElement-frameless.oo-ui-flaggableElement-destructive > .oo-ui-buttonedElement-button > .oo-ui-labeledElement-label { color: #d45353; } - .oo-ui-buttonedElement-frameless.oo-ui-widget-disabled > .oo-ui-buttonedElement-button > .oo-ui-iconedElement-icon { opacity: 0.2; } - .oo-ui-buttonedElement-frameless.oo-ui-widget-disabled > .oo-ui-buttonedElement-button > .oo-ui-labeledElement-label { color: #ccc; } - .oo-ui-buttonedElement-framed > .oo-ui-buttonedElement-button { - padding: 0.2em 0.8em; margin: 0.1em 0; + padding: 0.2em 0.8em; + border-radius: 0.3em; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5); + border: 1px #c9c9c9 solid; + -webkit-transition: border-color 100ms ease-in-out; + -moz-transition: border-color 100ms ease-in-out; + -ms-transition: border-color 100ms ease-in-out; + -o-transition: border-color 100ms ease-in-out; + transition: border-color 100ms ease-in-out; background: #eeeeee; + filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#ffffff', endColorstr='#dddddd'); background-image: -webkit-gradient(linear, right top, right bottom, color-stop(0%, #ffffff), color-stop(100%, #dddddd)); background-image: -webkit-linear-gradient(top, #ffffff 0%, #dddddd 100%); background-image: -moz-linear-gradient(top, #ffffff 0%, #dddddd 100%); background-image: -ms-linear-gradient(top, #ffffff 0%, #dddddd 100%); background-image: -o-linear-gradient(top, #ffffff 0%, #dddddd 100%); background-image: linear-gradient(top, #ffffff 0%, #dddddd 100%); - border: 1px #c9c9c9 solid; - border-radius: 0.3em; - filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#ffffff', endColorstr='#dddddd'); - -webkit-transition: border-color 100ms ease-in-out; - -moz-transition: border-color 100ms ease-in-out; - -ms-transition: border-color 100ms ease-in-out; - -o-transition: border-color 100ms ease-in-out; - transition: border-color 100ms ease-in-out; } - .oo-ui-buttonedElement-framed > .oo-ui-buttonedElement-button:hover, .oo-ui-buttonedElement-framed > .oo-ui-buttonedElement-button:focus { border-color: #aaa; } - -.oo-ui-buttonedElement-framed > .oo-ui-buttonedElement-button.oo-ui-buttonedElement-active, -.oo-ui-buttonedElement-framed > .oo-ui-buttonedElement-button.oo-ui-buttonedElement-pressed { +.oo-ui-buttonedElement-framed.oo-ui-buttonedElement-active > .oo-ui-buttonedElement-button, +.oo-ui-buttonedElement-framed.oo-ui-buttonedElement-pressed > .oo-ui-buttonedElement-button { + box-shadow: inset 0 1px 4px 0 rgba(0, 0, 0, 0.07); color: black; + border-color: #c9c9c9; background: #eeeeee; + filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#dddddd', endColorstr='#ffffff'); background-image: -webkit-gradient(linear, right top, right bottom, color-stop(0%, #dddddd), color-stop(100%, #ffffff)); background-image: -webkit-linear-gradient(top, #dddddd 0%, #ffffff 100%); background-image: -moz-linear-gradient(top, #dddddd 0%, #ffffff 100%); background-image: -ms-linear-gradient(top, #dddddd 0%, #ffffff 100%); background-image: -o-linear-gradient(top, #dddddd 0%, #ffffff 100%); background-image: linear-gradient(top, #dddddd 0%, #ffffff 100%); - border-color: #c9c9c9; - filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#dddddd', endColorstr='#ffffff'); - box-shadow: inset 0 1px 4px 0 rgba(0, 0, 0, 0.07); } - .oo-ui-buttonedElement-framed.oo-ui-iconedElement > .oo-ui-buttonedElement-button > .oo-ui-iconedElement-icon { - margin-right: -0.5em; margin-left: -0.5em; + margin-right: -0.5em; } - .oo-ui-buttonedElement-framed.oo-ui-iconedElement.oo-ui-labeledElement > .oo-ui-buttonedElement-button > .oo-ui-iconedElement-icon { - margin-right: 0.3em; margin-left: -0.5em; + margin-right: 0.3em; } - .oo-ui-buttonedElement-framed.oo-ui-flaggableElement-primary > .oo-ui-buttonedElement-button { + border: solid 1px #a6cee1; background: #cde7f4; + filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#eaf4fa', endColorstr='#b0d9ee'); background-image: -webkit-gradient(linear, right top, right bottom, color-stop(0%, #eaf4fa), color-stop(100%, #b0d9ee)); background-image: -webkit-linear-gradient(top, #eaf4fa 0%, #b0d9ee 100%); background-image: -moz-linear-gradient(top, #eaf4fa 0%, #b0d9ee 100%); background-image: -ms-linear-gradient(top, #eaf4fa 0%, #b0d9ee 100%); background-image: -o-linear-gradient(top, #eaf4fa 0%, #b0d9ee 100%); background-image: linear-gradient(top, #eaf4fa 0%, #b0d9ee 100%); - border: solid 1px #a6cee1; - filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#eaf4fa', endColorstr='#b0d9ee'); } - .oo-ui-buttonedElement-framed.oo-ui-flaggableElement-primary > .oo-ui-buttonedElement-button:hover, .oo-ui-buttonedElement-framed.oo-ui-flaggableElement-primary > .oo-ui-buttonedElement-button:focus { border-color: #9dc2d4; } - -.oo-ui-buttonedElement-framed.oo-ui-flaggableElement-primary > .oo-ui-buttonedElement-button.oo-ui-buttonedElement-active, -.oo-ui-buttonedElement-framed.oo-ui-flaggableElement-primary > .oo-ui-buttonedElement-button.oo-ui-buttonedElement-pressed { +.oo-ui-buttonedElement-framed.oo-ui-flaggableElement-primary.oo-ui-buttonedElement-active > .oo-ui-buttonedElement-button, +.oo-ui-buttonedElement-framed.oo-ui-flaggableElement-primary.oo-ui-buttonedElement-pressed > .oo-ui-buttonedElement-button { + border: solid 1px #a6cee1; background: #cde7f4; + filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#b0d9ee', endColorstr='#eaf4fa'); background-image: -webkit-gradient(linear, right top, right bottom, color-stop(0%, #b0d9ee), color-stop(100%, #eaf4fa)); background-image: -webkit-linear-gradient(top, #b0d9ee 0%, #eaf4fa 100%); background-image: -moz-linear-gradient(top, #b0d9ee 0%, #eaf4fa 100%); background-image: -ms-linear-gradient(top, #b0d9ee 0%, #eaf4fa 100%); background-image: -o-linear-gradient(top, #b0d9ee 0%, #eaf4fa 100%); background-image: linear-gradient(top, #b0d9ee 0%, #eaf4fa 100%); - border: solid 1px #a6cee1; - filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#b0d9ee', endColorstr='#eaf4fa'); } - .oo-ui-buttonedElement-framed.oo-ui-flaggableElement-constructive > .oo-ui-buttonedElement-button { + border: solid 1px #b8d892; background: #daf0be; + filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#f0fbe1', endColorstr='#c3e59a'); background-image: -webkit-gradient(linear, right top, right bottom, color-stop(0%, #f0fbe1), color-stop(100%, #c3e59a)); background-image: -webkit-linear-gradient(top, #f0fbe1 0%, #c3e59a 100%); background-image: -moz-linear-gradient(top, #f0fbe1 0%, #c3e59a 100%); background-image: -ms-linear-gradient(top, #f0fbe1 0%, #c3e59a 100%); background-image: -o-linear-gradient(top, #f0fbe1 0%, #c3e59a 100%); background-image: linear-gradient(top, #f0fbe1 0%, #c3e59a 100%); - border: solid 1px #b8d892; - filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#f0fbe1', endColorstr='#c3e59a'); } - .oo-ui-buttonedElement-framed.oo-ui-flaggableElement-constructive > .oo-ui-buttonedElement-button:hover, .oo-ui-buttonedElement-framed.oo-ui-flaggableElement-constructive > .oo-ui-buttonedElement-button:focus { border-color: #adcb89; } - -.oo-ui-buttonedElement-framed.oo-ui-flaggableElement-constructive > .oo-ui-buttonedElement-button.oo-ui-buttonedElement-active, -.oo-ui-buttonedElement-framed.oo-ui-flaggableElement-constructive > .oo-ui-buttonedElement-button.oo-ui-buttonedElement-pressed { +.oo-ui-buttonedElement-framed.oo-ui-flaggableElement-constructive.oo-ui-buttonedElement-active > .oo-ui-buttonedElement-button, +.oo-ui-buttonedElement-framed.oo-ui-flaggableElement-constructive.oo-ui-buttonedElement-pressed > .oo-ui-buttonedElement-button { + border: solid 1px #b8d892; background: #daf0be; + filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#c3e59a', endColorstr='#f0fbe1'); background-image: -webkit-gradient(linear, right top, right bottom, color-stop(0%, #c3e59a), color-stop(100%, #f0fbe1)); background-image: -webkit-linear-gradient(top, #c3e59a 0%, #f0fbe1 100%); background-image: -moz-linear-gradient(top, #c3e59a 0%, #f0fbe1 100%); background-image: -ms-linear-gradient(top, #c3e59a 0%, #f0fbe1 100%); background-image: -o-linear-gradient(top, #c3e59a 0%, #f0fbe1 100%); background-image: linear-gradient(top, #c3e59a 0%, #f0fbe1 100%); - border: solid 1px #b8d892; - filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#c3e59a', endColorstr='#f0fbe1'); } - .oo-ui-buttonedElement-framed.oo-ui-flaggableElement-destructive > .oo-ui-buttonedElement-button { color: #d45353; } - .oo-ui-buttonedElement-framed.oo-ui-widget-disabled > .oo-ui-buttonedElement-button, -.oo-ui-buttonedElement-framed.oo-ui-widget-disabled > .oo-ui-buttonedElement-button.oo-ui-buttonedElement-active, -.oo-ui-buttonedElement-framed.oo-ui-widget-disabled > .oo-ui-buttonedElement-button.oo-ui-buttonedElement-pressed { +.oo-ui-buttonedElement-framed.oo-ui-widget-disabled.oo-ui-buttonedElement-active > .oo-ui-buttonedElement-button, +.oo-ui-buttonedElement-framed.oo-ui-widget-disabled.oo-ui-buttonedElement-pressed > .oo-ui-buttonedElement-button { + opacity: 0.5; + box-shadow: none; color: #333; background: #eee; border-color: #ccc; - opacity: 0.5; - box-shadow: none; } - .oo-ui-buttonedElement-framed.oo-ui-widget-disabled > .oo-ui-buttonedElement-button:hover, -.oo-ui-buttonedElement-framed.oo-ui-widget-disabled > .oo-ui-buttonedElement-button.oo-ui-buttonedElement-active:hover, -.oo-ui-buttonedElement-framed.oo-ui-widget-disabled > .oo-ui-buttonedElement-button.oo-ui-buttonedElement-pressed:hover, +.oo-ui-buttonedElement-framed.oo-ui-widget-disabled.oo-ui-buttonedElement-active > .oo-ui-buttonedElement-button:hover, +.oo-ui-buttonedElement-framed.oo-ui-widget-disabled.oo-ui-buttonedElement-pressed > .oo-ui-buttonedElement-button:hover, .oo-ui-buttonedElement-framed.oo-ui-widget-disabled > .oo-ui-buttonedElement-button:focus, -.oo-ui-buttonedElement-framed.oo-ui-widget-disabled > .oo-ui-buttonedElement-button.oo-ui-buttonedElement-active:focus, -.oo-ui-buttonedElement-framed.oo-ui-widget-disabled > .oo-ui-buttonedElement-button.oo-ui-buttonedElement-pressed:focus { +.oo-ui-buttonedElement-framed.oo-ui-widget-disabled.oo-ui-buttonedElement-active > .oo-ui-buttonedElement-button:focus, +.oo-ui-buttonedElement-framed.oo-ui-widget-disabled.oo-ui-buttonedElement-pressed > .oo-ui-buttonedElement-button:focus { border-color: #ccc; box-shadow: none; } @@ -589,11 +499,9 @@ .oo-ui-bookletLayout-stackLayout .oo-ui-panelLayout { padding: 1.5em; } - .oo-ui-bookletLayout-outlinePanel { border-right: solid 1px #ddd; } - .oo-ui-bookletLayout-outlinePanel .oo-ui-outlineControlsWidget { box-shadow: 0 0 0.25em rgba(0, 0, 0, 0.25); } @@ -605,7 +513,6 @@ .oo-ui-fieldsetLayout { border: none; } - .oo-ui-fieldsetLayout > .oo-ui-labeledElement-label { font-size: 1.5em; } @@ -618,55 +525,45 @@ margin: -1px 0 -1px -1px; border: solid 1px transparent; } - .oo-ui-barToolGroup .oo-ui-tool:first-child { - border-bottom-left-radius: 0.25em; border-top-left-radius: 0.25em; + border-bottom-left-radius: 0.25em; } - .oo-ui-barToolGroup .oo-ui-tool:last-child { margin-right: -1px; border-top-right-radius: 0.25em; border-bottom-right-radius: 0.25em; } - .oo-ui-barToolGroup .oo-ui-tool-link .oo-ui-iconedElement-icon { opacity: 0.8; } - .oo-ui-barToolGroup.oo-ui-widget-enabled .oo-ui-tool.oo-ui-widget-enabled:hover { border-color: rgba(0, 0, 0, 0.2); } - .oo-ui-barToolGroup.oo-ui-widget-enabled .oo-ui-tool-active.oo-ui-widget-enabled { + border-color: rgba(0, 0, 0, 0.2); + box-shadow: inset 0 0.07em 0.07em 0 rgba(0, 0, 0, 0.07); background: #f8fbfd; + filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#f1f7fb', endColorstr='#ffffff'); background-image: -webkit-gradient(linear, right top, right bottom, color-stop(0%, #f1f7fb), color-stop(100%, #ffffff)); background-image: -webkit-linear-gradient(top, #f1f7fb 0%, #ffffff 100%); background-image: -moz-linear-gradient(top, #f1f7fb 0%, #ffffff 100%); background-image: -ms-linear-gradient(top, #f1f7fb 0%, #ffffff 100%); background-image: -o-linear-gradient(top, #f1f7fb 0%, #ffffff 100%); background-image: linear-gradient(top, #f1f7fb 0%, #ffffff 100%); - border-color: rgba(0, 0, 0, 0.2); - filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#f1f7fb', endColorstr='#ffffff'); - box-shadow: inset 0 0.07em 0.07em 0 rgba(0, 0, 0, 0.07); } - .oo-ui-barToolGroup.oo-ui-widget-enabled .oo-ui-tool-active.oo-ui-widget-enabled + .oo-ui-tool-active.oo-ui-widget-enabled { border-left-color: rgba(0, 0, 0, 0.1); } - .oo-ui-barToolGroup.oo-ui-widget-enabled .oo-ui-tool.oo-ui-widget-disabled .oo-ui-tool-link .oo-ui-iconedElement-icon { opacity: 0.2; } - .oo-ui-barToolGroup.oo-ui-widget-enabled .oo-ui-tool.oo-ui-widget-enabled .oo-ui-tool-link .oo-ui-iconedElement-icon { opacity: 0.8; } - .oo-ui-barToolGroup.oo-ui-widget-enabled .oo-ui-tool.oo-ui-widget-enabled:hover .oo-ui-tool-link .oo-ui-iconedElement-icon { opacity: 1; } - .oo-ui-barToolGroup.oo-ui-widget-disabled .oo-ui-tool-link .oo-ui-iconedElement-icon { opacity: 0.2; } @@ -674,57 +571,46 @@ .oo-ui-listToolGroup.oo-ui-popupToolGroup-active { border-color: rgba(0, 0, 0, 0.2); } - .oo-ui-listToolGroup .oo-ui-tool { - margin: -1px 0; border: solid 1px transparent; + margin: -1px 0; } - .oo-ui-listToolGroup .oo-ui-tool-active.oo-ui-widget-enabled { + border-color: rgba(0, 0, 0, 0.1); + box-shadow: inset 0 0.07em 0.07em 0 rgba(0, 0, 0, 0.07); background: #f8fbfd; + filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#f1f7fb', endColorstr='#ffffff'); background-image: -webkit-gradient(linear, right top, right bottom, color-stop(0%, #f1f7fb), color-stop(100%, #ffffff)); background-image: -webkit-linear-gradient(top, #f1f7fb 0%, #ffffff 100%); background-image: -moz-linear-gradient(top, #f1f7fb 0%, #ffffff 100%); background-image: -ms-linear-gradient(top, #f1f7fb 0%, #ffffff 100%); background-image: -o-linear-gradient(top, #f1f7fb 0%, #ffffff 100%); background-image: linear-gradient(top, #f1f7fb 0%, #ffffff 100%); - border-color: rgba(0, 0, 0, 0.1); - filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#f1f7fb', endColorstr='#ffffff'); - box-shadow: inset 0 0.07em 0.07em 0 rgba(0, 0, 0, 0.07); } - .oo-ui-listToolGroup .oo-ui-tool-active.oo-ui-widget-enabled + .oo-ui-tool-active.oo-ui-widget-enabled { border-top-color: rgba(0, 0, 0, 0.1); } - .oo-ui-listToolGroup .oo-ui-tool-active.oo-ui-widget-enabled:hover { border-color: rgba(0, 0, 0, 0.2); } - .oo-ui-listToolGroup .oo-ui-tool.oo-ui-widget-enabled:hover { border-color: rgba(0, 0, 0, 0.2); } - .oo-ui-listToolGroup .oo-ui-tool.oo-ui-widget-enabled .oo-ui-tool-link .oo-ui-iconedElement-icon { opacity: 0.8; } - .oo-ui-listToolGroup .oo-ui-tool.oo-ui-widget-enabled:hover .oo-ui-tool-link .oo-ui-iconedElement-icon { opacity: 1; } - .oo-ui-listToolGroup .oo-ui-tool.oo-ui-widget-disabled .oo-ui-tool-link .oo-ui-tool-title { color: #ccc; } - .oo-ui-listToolGroup .oo-ui-tool.oo-ui-widget-disabled .oo-ui-tool-link .oo-ui-iconedElement-icon { opacity: 0.2; } - .oo-ui-listToolGroup.oo-ui-widget-disabled { color: #ccc; } - .oo-ui-listToolGroup.oo-ui-widget-disabled .oo-ui-indicatedElement-indicator, .oo-ui-listToolGroup.oo-ui-widget-disabled .oo-ui-iconedElement-icon { opacity: 0.2; @@ -733,32 +619,25 @@ .oo-ui-menuToolGroup { border-color: rgba(0, 0, 0, 0.1); } - .oo-ui-menuToolGroup.oo-ui-widget-enabled:hover { border-color: rgba(0, 0, 0, 0.2); } - .oo-ui-menuToolGroup.oo-ui-popupToolGroup-active { border-color: rgba(0, 0, 0, 0.25); } - .oo-ui-menuToolGroup .oo-ui-tool.oo-ui-widget-enabled:hover { background-color: #e1f3ff; } - .oo-ui-menuToolGroup .oo-ui-tool.oo-ui-widget-disabled .oo-ui-tool-link .oo-ui-tool-title { color: #ccc; } - .oo-ui-menuToolGroup .oo-ui-tool.oo-ui-widget-disabled .oo-ui-tool-link .oo-ui-iconedElement-icon { opacity: 0.2; } - .oo-ui-menuToolGroup.oo-ui-widget-disabled { color: #ccc; border-color: rgba(0, 0, 0, 0.05); } - .oo-ui-menuToolGroup.oo-ui-widget-disabled .oo-ui-indicatedElement-indicator, .oo-ui-menuToolGroup.oo-ui-widget-disabled .oo-ui-iconedElement-icon { opacity: 0.2; @@ -768,77 +647,68 @@ .oo-ui-popupToolGroup-handle .oo-ui-iconedElement-icon { opacity: 0.8; } - .oo-ui-popupToolGroup .oo-ui-toolGroup-tools { - background-color: white; border: solid 1px #ccc; + background-color: white; box-shadow: 0 0.25em 1em rgba(0, 0, 0, 0.25); } - .oo-ui-popupToolGroup-active.oo-ui-widget-enabled { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + box-shadow: inset 0 0.07em 0.07em 0 rgba(0, 0, 0, 0.07); background: #f8fbfd; + filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#f1f7fb', endColorstr='#ffffff'); background-image: -webkit-gradient(linear, right top, right bottom, color-stop(0%, #f1f7fb), color-stop(100%, #ffffff)); background-image: -webkit-linear-gradient(top, #f1f7fb 0%, #ffffff 100%); background-image: -moz-linear-gradient(top, #f1f7fb 0%, #ffffff 100%); background-image: -ms-linear-gradient(top, #f1f7fb 0%, #ffffff 100%); background-image: -o-linear-gradient(top, #f1f7fb 0%, #ffffff 100%); background-image: linear-gradient(top, #f1f7fb 0%, #ffffff 100%); - border-bottom-right-radius: 0; - border-bottom-left-radius: 0; - filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#f1f7fb', endColorstr='#ffffff'); - box-shadow: inset 0 0.07em 0.07em 0 rgba(0, 0, 0, 0.07); } .oo-ui-optionWidget { padding: 0.5em 2em 0.5em 3em; } - .oo-ui-optionWidget-highlighted { background-color: #e1f3ff; } - .oo-ui-selectWidget-depressed .oo-ui-optionWidget-selected { background-color: #a7dcff; } - .oo-ui-selectWidget-pressed .oo-ui-optionWidget-pressed { background-color: #a7dcff; } - .oo-ui-optionWidget.oo-ui-widget-disabled { color: #ccc; } .oo-ui-menuWidget { - margin-top: -1px; background: #fff; + margin-top: -1px; border: solid 1px #ccc; border-radius: 0 0 0.25em 0.25em; box-shadow: 0 0.15em 1em 0 rgba(0, 0, 0, 0.2); } .oo-ui-popupWidget-popup { - background-color: #fff; border: solid 1px #ccc; border-radius: 0.25em; + background-color: #fff; box-shadow: 0 0.15em 0.5em 0 rgba(0, 0, 0, 0.2); } - .oo-ui-popupWidget-anchored .oo-ui-popupWidget-anchor { + background-image: /* @embed */ url(images/anchor.svg); width: 15px; height: 8px; margin-left: -7px; - background-image: /* @embed */ url(images/anchor.svg); } - .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; - -moz-transition: width 100ms ease-in-out, height 100ms ease-in-out, left 100ms ease-in-out; - -ms-transition: width 100ms ease-in-out, height 100ms ease-in-out, left 100ms ease-in-out; - -o-transition: width 100ms ease-in-out, height 100ms ease-in-out, left 100ms ease-in-out; - transition: width 100ms ease-in-out, height 100ms ease-in-out, left 100ms ease-in-out; + -moz-transition: width 100ms ease-in-out, height 100ms ease-in-out, left 100ms ease-in-out; + -ms-transition: width 100ms ease-in-out, height 100ms ease-in-out, left 100ms ease-in-out; + -o-transition: width 100ms ease-in-out, height 100ms ease-in-out, left 100ms ease-in-out; + transition: width 100ms ease-in-out, height 100ms ease-in-out, left 100ms ease-in-out; } - .oo-ui-popupWidget-body { box-shadow: 0 0 0.66em rgba(0, 0, 0, 0.25); } @@ -851,7 +721,6 @@ .oo-ui-buttonOptionWidget { padding: 0; } - .oo-ui-buttonOptionWidget.oo-ui-optionWidget-selected, .oo-ui-buttonOptionWidget.oo-ui-optionWidget-pressed, .oo-ui-buttonOptionWidget.oo-ui-optionWidget-highlighted { @@ -861,32 +730,27 @@ .oo-ui-buttonSelectWidget { border-radius: 0.3em; } - .oo-ui-buttonSelectWidget .oo-ui-buttonOptionWidget .oo-ui-buttonedElement-button { - margin-left: -1px; border-radius: 0; + margin-left: -1px; } - .oo-ui-buttonSelectWidget .oo-ui-buttonOptionWidget:first-child .oo-ui-buttonedElement-button { - margin-left: 0; border-bottom-left-radius: 0.3em; border-top-left-radius: 0.3em; + margin-left: 0; } - .oo-ui-buttonSelectWidget .oo-ui-buttonOptionWidget:last-child .oo-ui-buttonedElement-button { - border-top-right-radius: 0.3em; border-bottom-right-radius: 0.3em; + border-top-right-radius: 0.3em; } .oo-ui-comboBoxWidget-handle { border: solid 1px rgba(0, 0, 0, 0.1); border-radius: 0.25em; } - .oo-ui-comboBoxWidget-handle:hover { border-color: rgba(0, 0, 0, 0.2); } - .oo-ui-comboBoxWidget.oo-ui-widget-disabled .oo-ui-textInputWidget.oo-ui-indicatedElement .oo-ui-indicatedElement-indicator, .oo-ui-comboBoxWidget-empty .oo-ui-textInputWidget.oo-ui-indicatedElement .oo-ui-indicatedElement-indicator { cursor: default; @@ -897,23 +761,19 @@ border: solid 1px rgba(0, 0, 0, 0.1); border-radius: 0.25em; } - .oo-ui-inlineMenuWidget-handle:hover { border-color: rgba(0, 0, 0, 0.2); } - .oo-ui-inlineMenuWidget-handle .oo-ui-indicatedElement-indicator, .oo-ui-inlineMenuWidget-handle .oo-ui-iconedElement-icon { opacity: 0.8; } - .oo-ui-inlineMenuWidget.oo-ui-widget-disabled .oo-ui-inlineMenuWidget-handle { color: #ccc; text-shadow: 0 1px 1px #fff; - background-color: #f3f3f3; border-color: #ddd; + background-color: #f3f3f3; } - .oo-ui-inlineMenuWidget.oo-ui-widget-disabled .oo-ui-indicatedElement-indicator { opacity: 0.2; } @@ -921,7 +781,6 @@ .oo-ui-menuItemWidget.oo-ui-optionWidget-selected { background-color: transparent; } - .oo-ui-menuItemWidget.oo-ui-optionWidget-highlighted, .oo-ui-menuItemWidget.oo-ui-optionWidget-highlighted.oo-ui-optionWidget-selected { background-color: #e1f3ff; @@ -935,7 +794,6 @@ .oo-ui-outlineControlsWidget { background-color: #fff; } - .oo-ui-outlineControlsWidget > .oo-ui-iconedElement-icon { opacity: 0.2; } @@ -943,56 +801,43 @@ .oo-ui-outlineItemWidget { font-size: 1.1em; } - .oo-ui-outlineItemWidget.oo-ui-indicatedElement .oo-ui-labeledElement-label { padding-right: 1.5em; } - .oo-ui-outlineItemWidget.oo-ui-indicatedElement .oo-ui-indicatedElement-indicator { opacity: 0.5; } - .oo-ui-outlineItemWidget-level-0 { padding-left: 3.5em; } - .oo-ui-outlineItemWidget-level-0 .oo-ui-iconedElement-icon { left: 1em; } - .oo-ui-outlineItemWidget-level-1 { padding-left: 5em; } - .oo-ui-outlineItemWidget-level-1 .oo-ui-iconedElement-icon { left: 2.5em; } - .oo-ui-outlineItemWidget-level-2 { padding-left: 6.5em; } - .oo-ui-outlineItemWidget-level-2 .oo-ui-iconedElement-icon { left: 4em; } - .oo-ui-selectWidget-depressed .oo-ui-outlineItemWidget.oo-ui-optionWidget-selected { - text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5); background-color: #a7dcff; + text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5); } - .oo-ui-outlineItemWidget.oo-ui-flaggableElement-important { font-weight: bold; } - .oo-ui-outlineItemWidget.oo-ui-flaggableElement-placeholder { font-style: italic; } - .oo-ui-outlineItemWidget.oo-ui-flaggableElement-empty .oo-ui-iconedElement-icon { opacity: 0.5; } - .oo-ui-outlineItemWidget.oo-ui-flaggableElement-empty .oo-ui-labeledElement-label { color: #777; } @@ -1004,140 +849,122 @@ .oo-ui-textInputWidget { width: 20em; } - .oo-ui-textInputWidget input, .oo-ui-textInputWidget textarea { padding: 0.5em; - font-family: sans-serif; font-size: 1em; + font-family: sans-serif; background-color: #fff; border: solid 1px #ccc; - border-radius: 0.25em; box-shadow: 0 0 0 white, inset 0 0.1em 0.2em #ddd; + border-radius: 0.25em; -webkit-transition: border-color 200ms, box-shadow 200ms; - -moz-transition: border-color 200ms, box-shadow 200ms; - -ms-transition: border-color 200ms, box-shadow 200ms; - -o-transition: border-color 200ms, box-shadow 200ms; - transition: border-color 200ms, box-shadow 200ms; + -moz-transition: border-color 200ms, box-shadow 200ms; + -ms-transition: border-color 200ms, box-shadow 200ms; + -o-transition: border-color 200ms, box-shadow 200ms; + transition: border-color 200ms, box-shadow 200ms; } - .oo-ui-textInputWidget-decorated input, .oo-ui-textInputWidget-decorated textarea { padding-left: 2em; } - .oo-ui-textInputWidget-icon { width: 2em; } - .oo-ui-textInputWidget.oo-ui-widget-enabled input:focus, .oo-ui-textInputWidget.oo-ui-widget-enabled textarea:focus { - border-color: #a7dcff; outline: none; + border-color: #a7dcff; box-shadow: 0 0 0.3em #a7dcff, 0 0 0 white; } - .oo-ui-textInputWidget input[readonly], .oo-ui-textInputWidget textarea[readonly] { color: #777; text-shadow: 0 1px 1px #fff; } - .oo-ui-textInputWidget-pending input, .oo-ui-textInputWidget-pending textarea { background-color: transparent; } - .oo-ui-textInputWidget.oo-ui-widget-disabled input, .oo-ui-textInputWidget.oo-ui-widget-disabled input:focus, .oo-ui-textInputWidget.oo-ui-widget-disabled textarea, .oo-ui-textInputWidget.oo-ui-widget-disabled textarea:focus { color: #ccc; text-shadow: 0 1px 1px #fff; - background-color: #f3f3f3; border-color: #ddd; + background-color: #f3f3f3; } - .oo-ui-textInputWidget .oo-ui-iconedElement-icon, .oo-ui-textInputWidget .oo-ui-indicatedElement-indicator { opacity: 0.8; } - .oo-ui-textInputWidget.oo-ui-iconedElement input, .oo-ui-textInputWidget.oo-ui-iconedElement textarea { padding-left: 2em; } - .oo-ui-textInputWidget.oo-ui-iconedElement .oo-ui-iconedElement-icon { width: 2em; background-position: right center; } - .oo-ui-textInputWidget.oo-ui-indicatedElement input, .oo-ui-textInputWidget.oo-ui-indicatedElement textarea { padding-right: 1.5em; } - .oo-ui-textInputWidget.oo-ui-indicatedElement .oo-ui-indicatedElement-indicator { width: 1.5em; background-position: left center; } .oo-ui-toggleSwitchWidget { + border-radius: 1em; + box-shadow: 0 0 0 white, inset 0 0.1em 0.2em #ddd; + border: solid 1px #ccc; background: #eeeeee; + filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#dddddd', endColorstr='#ffffff'); background-image: -webkit-gradient(linear, right top, right bottom, color-stop(0%, #dddddd), color-stop(100%, #ffffff)); background-image: -webkit-linear-gradient(top, #dddddd 0%, #ffffff 100%); background-image: -moz-linear-gradient(top, #dddddd 0%, #ffffff 100%); background-image: -ms-linear-gradient(top, #dddddd 0%, #ffffff 100%); background-image: -o-linear-gradient(top, #dddddd 0%, #ffffff 100%); background-image: linear-gradient(top, #dddddd 0%, #ffffff 100%); - border: solid 1px #ccc; - border-radius: 1em; - filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#dddddd', endColorstr='#ffffff'); - box-shadow: 0 0 0 white, inset 0 0.1em 0.2em #ddd; } - .oo-ui-toggleSwitchWidget.oo-ui-widget-disabled { opacity: 0.5; } - .oo-ui-toggleSwitchWidget-grip { + border-radius: 1em; + box-shadow: 0 0.1em 0.25em rgba(0, 0, 0, 0.1); + border: 1px #c9c9c9 solid; background: #eeeeee; + filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#ffffff', endColorstr='#dddddd'); background-image: -webkit-gradient(linear, right top, right bottom, color-stop(0%, #ffffff), color-stop(100%, #dddddd)); background-image: -webkit-linear-gradient(top, #ffffff 0%, #dddddd 100%); background-image: -moz-linear-gradient(top, #ffffff 0%, #dddddd 100%); background-image: -ms-linear-gradient(top, #ffffff 0%, #dddddd 100%); background-image: -o-linear-gradient(top, #ffffff 0%, #dddddd 100%); background-image: linear-gradient(top, #ffffff 0%, #dddddd 100%); - border: 1px #c9c9c9 solid; - border-radius: 1em; - filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#ffffff', endColorstr='#dddddd'); - box-shadow: 0 0.1em 0.25em rgba(0, 0, 0, 0.1); } - .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:hover, .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:hover .oo-ui-toggleSwitchWidget-grip { border-color: #aaa; } - .oo-ui-toggleSwitchWidget .oo-ui-toggleSwitchWidget-glow { + border-radius: 1em; + box-shadow: inset 0 1px 4px 0 rgba(0, 0, 0, 0.07); background: #cde7f4; + filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#b0d9ee', endColorstr='#eaf4fa'); background-image: -webkit-gradient(linear, right top, right bottom, color-stop(0%, #b0d9ee), color-stop(100%, #eaf4fa)); background-image: -webkit-linear-gradient(top, #b0d9ee 0%, #eaf4fa 100%); background-image: -moz-linear-gradient(top, #b0d9ee 0%, #eaf4fa 100%); background-image: -ms-linear-gradient(top, #b0d9ee 0%, #eaf4fa 100%); background-image: -o-linear-gradient(top, #b0d9ee 0%, #eaf4fa 100%); background-image: linear-gradient(top, #b0d9ee 0%, #eaf4fa 100%); - border-radius: 1em; - filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#b0d9ee', endColorstr='#eaf4fa'); - box-shadow: inset 0 1px 4px 0 rgba(0, 0, 0, 0.07); } - .oo-ui-toggleWidget-on .oo-ui-toggleSwitchWidget-glow { opacity: 1; } - .oo-ui-toggleWidget-off .oo-ui-toggleSwitchWidget-glow { display: block; opacity: 0; -} \ No newline at end of file +} diff --git a/resources/lib/oojs-ui/oojs-ui.js b/resources/lib/oojs-ui/oojs-ui.js index 2483c9edc0..a0811d4235 100644 --- a/resources/lib/oojs-ui/oojs-ui.js +++ b/resources/lib/oojs-ui/oojs-ui.js @@ -1,12 +1,12 @@ /*! - * OOjs UI v0.1.0-pre (944c47c5fe) + * OOjs UI v0.1.0-pre (55b861b167) * https://www.mediawiki.org/wiki/OOjs_UI * * Copyright 2011–2014 OOjs Team and other contributors. * Released under the MIT license * http://oojs.mit-license.org * - * Date: 2014-08-21T00:23:52Z + * Date: 2014-08-21T16:59:20Z */ ( function ( OO ) { @@ -654,18 +654,19 @@ OO.ui.Element.static.tagName = 'div'; * * @static * @param {jQuery|HTMLElement|HTMLDocument|Window} context Context to bind the function to - * @param {OO.ui.Frame} [frame] Frame of the document context + * @param {jQuery} [$iframe] HTML iframe element that contains the document, omit if document is + * not in an iframe * @return {Function} Bound jQuery function */ -OO.ui.Element.getJQuery = function ( context, frame ) { +OO.ui.Element.getJQuery = function ( context, $iframe ) { function wrapper( selector ) { return $( selector, wrapper.context ); } wrapper.context = this.getDocument( context ); - if ( frame ) { - wrapper.frame = frame; + if ( $iframe ) { + wrapper.$iframe = $iframe; } return wrapper; @@ -1094,271 +1095,6 @@ OO.ui.Element.prototype.offDOMEvent = function ( event, callback ) { }; }() ); -/** - * Embedded iframe with the same styles as its parent. - * - * @class - * @extends OO.ui.Element - * @mixins OO.EventEmitter - * - * @constructor - * @param {Object} [config] Configuration options - */ -OO.ui.Frame = function OoUiFrame( config ) { - // Parent constructor - OO.ui.Frame.super.call( this, config ); - - // Mixin constructors - OO.EventEmitter.call( this ); - - // Properties - this.loading = null; - this.config = config; - this.dir = null; - - // Initialize - this.$element - .addClass( 'oo-ui-frame' ) - .attr( { frameborder: 0, scrolling: 'no' } ); - -}; - -/* Setup */ - -OO.inheritClass( OO.ui.Frame, OO.ui.Element ); -OO.mixinClass( OO.ui.Frame, OO.EventEmitter ); - -/* Static Properties */ - -/** - * @static - * @inheritdoc - */ -OO.ui.Frame.static.tagName = 'iframe'; - -/* Events */ - -/** - * @event load - */ - -/* Static Methods */ - -/** - * Transplant the CSS styles from as parent document to a frame's document. - * - * This loops over the style sheets in the parent document, and copies their nodes to the - * frame's document. It then polls the document to see when all styles have loaded, and once they - * have, resolves the promise. - * - * If the styles still haven't loaded after a long time (5 seconds by default), we give up waiting - * and resolve the promise anyway. This protects against cases like a display: none; iframe in - * Firefox, where the styles won't load until the iframe becomes visible. - * - * For details of how we arrived at the strategy used in this function, see #load. - * - * @static - * @inheritable - * @param {HTMLDocument} parentDoc Document to transplant styles from - * @param {HTMLDocument} frameDoc Document to transplant styles to - * @param {number} [timeout=5000] How long to wait before giving up (in ms). If 0, never give up. - * @return {jQuery.Promise} Promise resolved when styles have loaded - */ -OO.ui.Frame.static.transplantStyles = function ( parentDoc, frameDoc, timeout ) { - var i, numSheets, styleNode, styleText, newNode, timeoutID, pollNodeId, $pendingPollNodes, - $pollNodes = $( [] ), - // Fake font-family value - fontFamily = 'oo-ui-frame-transplantStyles-loaded', - nextIndex = parentDoc.oouiFrameTransplantStylesNextIndex || 0, - deferred = $.Deferred(); - - for ( i = 0, numSheets = parentDoc.styleSheets.length; i < numSheets; i++ ) { - styleNode = parentDoc.styleSheets[i].ownerNode; - if ( styleNode.disabled ) { - continue; - } - - if ( styleNode.nodeName.toLowerCase() === 'link' ) { - // External stylesheet; use @import - styleText = '@import url(' + styleNode.href + ');'; - } else { - // Internal stylesheet; just copy the text - styleText = styleNode.textContent; - } - - // Create a node with a unique ID that we're going to monitor to see when the CSS - // has loaded - if ( styleNode.oouiFrameTransplantStylesId ) { - // If we're nesting transplantStyles operations and this node already has - // a CSS rule to wait for loading, reuse it - pollNodeId = styleNode.oouiFrameTransplantStylesId; - } else { - // Otherwise, create a new ID - pollNodeId = 'oo-ui-frame-transplantStyles-loaded-' + nextIndex; - nextIndex++; - - // Add #pollNodeId { font-family: ... } to the end of the stylesheet / after the @import - // The font-family rule will only take effect once the @import finishes - styleText += '\n' + '#' + pollNodeId + ' { font-family: ' + fontFamily + '; }'; - } - - // Create a node with id=pollNodeId - $pollNodes = $pollNodes.add( $( '
', frameDoc ) - .attr( 'id', pollNodeId ) - .appendTo( frameDoc.body ) - ); - - // Add our modified CSS as a ` tags. - * Because `@import` is blocking, Chrome won't add the stylesheet to document.styleSheets until - * the `@import` has finished, and Firefox won't allow .cssRules to be accessed until the `@import` - * has finished. And because the contents of the ``, then create `
` - * and wait for its font-family to change to someValue. Because `@import` is blocking, the font-family - * rule is not applied until after the `@import` finishes. - * - * All this stylesheet injection and polling magic is in #transplantStyles. - * - * @return {jQuery.Promise} Promise resolved when loading is complete - * @fires load - */ -OO.ui.Frame.prototype.load = function () { - var win, doc, - frame = this; - - // Return existing promise if already loading or loaded - if ( this.loading ) { - return this.loading.promise(); - } - - // Load the frame - this.loading = $.Deferred(); - - win = this.$element.prop( 'contentWindow' ); - doc = win.document; - - // Cache directionality - this.dir = OO.ui.Element.getDir( this.$element ) || 'ltr'; - - // Initialize contents - doc.open(); - // The following classes can be used here: - // oo-ui-ltr - // oo-ui-rtl - doc.write( - '' + - '' + - '' + - '' + - '' - ); - doc.close(); - - // Properties - this.$ = OO.ui.Element.getJQuery( doc, this ); - this.$content = this.$( '.oo-ui-frame-content' ).attr( 'tabIndex', 0 ); - this.$document = this.$( doc ); - - // Initialization - this.constructor.static.transplantStyles( this.getElementDocument(), this.$document[0] ) - .always( function () { - frame.emit( 'load' ); - frame.loading.resolve(); - } ); - - return this.loading.promise(); -}; - -/** - * Set the size of the frame. - * - * @param {number} width Frame width in pixels - * @param {number} height Frame height in pixels - * @chainable - */ -OO.ui.Frame.prototype.setSize = function ( width, height ) { - this.$element.css( { width: width, height: height } ); - return this; -}; - -/** - * Get the directionality of the frame - * - * @return {string} Directionality, 'ltr' or 'rtl' - */ -OO.ui.Frame.prototype.getDir = function () { - return this.dir; -}; - /** * Container for elements. * @@ -1546,15 +1282,12 @@ OO.ui.Widget.prototype.updateDisabled = function () { * If the requested size is not recognized, the window manager will choose a sensible fallback. * * @constructor - * @param {OO.ui.WindowManager} manager Manager of window * @param {Object} [config] Configuration options * @cfg {string} [size] Symbolic name of dialog size, `small`, `medium`, `large` or `full`; omit to * use #static-size * @fires initialize */ -OO.ui.Window = function OoUiWindow( manager, config ) { - var win = this; - +OO.ui.Window = function OoUiWindow( config ) { // Configuration initialization config = config || {}; @@ -1564,46 +1297,25 @@ OO.ui.Window = function OoUiWindow( manager, config ) { // Mixin constructors OO.EventEmitter.call( this ); - if ( !( manager instanceof OO.ui.WindowManager ) ) { - throw new Error( 'Cannot construct window: window must have a manager' ); - } - // Properties - this.manager = manager; + this.manager = null; this.initialized = false; this.visible = false; this.opening = null; this.closing = null; this.opened = null; this.timing = null; + this.loading = null; this.size = config.size || this.constructor.static.size; - this.frame = new OO.ui.Frame( { $: this.$ } ); this.$frame = this.$( '
' ); - this.$ = function () { - throw new Error( 'this.$() cannot be used until the frame has been initialized.' ); - }; // Initialization this.$element .addClass( 'oo-ui-window' ) - // Hide the window using visibility: hidden; while the iframe is still loading - // Can't use display: none; because that prevents the iframe from loading in Firefox - .css( 'visibility', 'hidden' ) .append( this.$frame ); - this.$frame - .addClass( 'oo-ui-window-frame' ) - .append( this.frame.$element ); + this.$frame.addClass( 'oo-ui-window-frame' ); - // Events - this.frame.on( 'load', function () { - win.initialize(); - win.initialized = true; - // Undo the visibility: hidden; hack and apply display: none; - // We can do this safely now that the iframe has initialized - // (don't do this from within #initialize because it has to happen - // after the all subclasses have been handled as well). - win.$element.hide().css( 'visibility', '' ); - } ); + // NOTE: Additional intitialization will occur when #setManager is called }; /* Setup */ @@ -1631,6 +1343,116 @@ OO.mixinClass( OO.ui.Window, OO.EventEmitter ); */ OO.ui.Window.static.size = 'medium'; +/* Static Methods */ + +/** + * Transplant the CSS styles from as parent document to a frame's document. + * + * This loops over the style sheets in the parent document, and copies their nodes to the + * frame's document. It then polls the document to see when all styles have loaded, and once they + * have, resolves the promise. + * + * If the styles still haven't loaded after a long time (5 seconds by default), we give up waiting + * and resolve the promise anyway. This protects against cases like a display: none; iframe in + * Firefox, where the styles won't load until the iframe becomes visible. + * + * For details of how we arrived at the strategy used in this function, see #load. + * + * @static + * @inheritable + * @param {HTMLDocument} parentDoc Document to transplant styles from + * @param {HTMLDocument} frameDoc Document to transplant styles to + * @param {number} [timeout=5000] How long to wait before giving up (in ms). If 0, never give up. + * @return {jQuery.Promise} Promise resolved when styles have loaded + */ +OO.ui.Window.static.transplantStyles = function ( parentDoc, frameDoc, timeout ) { + var i, numSheets, styleNode, styleText, newNode, timeoutID, pollNodeId, $pendingPollNodes, + $pollNodes = $( [] ), + // Fake font-family value + fontFamily = 'oo-ui-frame-transplantStyles-loaded', + nextIndex = parentDoc.oouiFrameTransplantStylesNextIndex || 0, + deferred = $.Deferred(); + + for ( i = 0, numSheets = parentDoc.styleSheets.length; i < numSheets; i++ ) { + styleNode = parentDoc.styleSheets[i].ownerNode; + if ( styleNode.disabled ) { + continue; + } + + if ( styleNode.nodeName.toLowerCase() === 'link' ) { + // External stylesheet; use @import + styleText = '@import url(' + styleNode.href + ');'; + } else { + // Internal stylesheet; just copy the text + styleText = styleNode.textContent; + } + + // Create a node with a unique ID that we're going to monitor to see when the CSS + // has loaded + if ( styleNode.oouiFrameTransplantStylesId ) { + // If we're nesting transplantStyles operations and this node already has + // a CSS rule to wait for loading, reuse it + pollNodeId = styleNode.oouiFrameTransplantStylesId; + } else { + // Otherwise, create a new ID + pollNodeId = 'oo-ui-frame-transplantStyles-loaded-' + nextIndex; + nextIndex++; + + // Add #pollNodeId { font-family: ... } to the end of the stylesheet / after the @import + // The font-family rule will only take effect once the @import finishes + styleText += '\n' + '#' + pollNodeId + ' { font-family: ' + fontFamily + '; }'; + } + + // Create a node with id=pollNodeId + $pollNodes = $pollNodes.add( $( '
', frameDoc ) + .attr( 'id', pollNodeId ) + .appendTo( frameDoc.body ) + ); + + // Add our modified CSS as a ` + * tags. Because `@import` is blocking, Chrome won't add the stylesheet to document.styleSheets + * until the `@import` has finished, and Firefox won't allow .cssRules to be accessed until the + * `@import` has finished. And because the contents of the ``, then create `
` + * and wait for its font-family to change to someValue. Because `@import` is blocking, the + * font-family rule is not applied until after the `@import` finishes. + * + * All this stylesheet injection and polling magic is in #transplantStyles. + * + * @return {jQuery.Promise} Promise resolved when loading is complete + * @fires load + */ +OO.ui.Window.prototype.load = function () { + var sub, doc, loading, + win = this; + + // Non-isolated windows are already "loaded" + if ( !this.loading && !this.isolated ) { + this.loading = $.Deferred().resolve(); + this.initialize(); + // Set initialized state after so sub-classes aren't confused by it being set by calling + // their parent initialize method + this.initialized = true; + } + + // Return existing promise if already loading or loaded + if ( this.loading ) { + return this.loading.promise(); + } + + // Load the frame + loading = this.loading = $.Deferred(); + sub = this.$iframe.prop( 'contentWindow' ); + doc = sub.document; + + // Initialize contents + doc.open(); + doc.write( + '' + + '' + + '' + + '' + + '' + ); + doc.close(); + + // Properties + this.$ = OO.ui.Element.getJQuery( doc, this.$element ); + this.$content = this.$( '.oo-ui-window-content' ).attr( 'tabIndex', 0 ); + this.$document = this.$( doc ); + + // Initialization + this.constructor.static.transplantStyles( this.getElementDocument(), this.$document[0] ) + .always( function () { + // Initialize isolated windows + win.initialize(); + // Set initialized state after so sub-classes aren't confused by it being set by calling + // their parent initialize method + win.initialized = true; + // Undo the visibility: hidden; hack and apply display: none; + // We can do this safely now that the iframe has initialized + // (don't do this from within #initialize because it has to happen + // after the all subclasses have been handled as well). + win.toggle( win.isVisible() ); + + loading.resolve(); + } ); + + return loading.promise(); +}; + /** * Base class for all dialogs. * @@ -2043,9 +2043,9 @@ OO.ui.Window.prototype.teardown = function ( data ) { * @constructor * @param {Object} [config] Configuration options */ -OO.ui.Dialog = function OoUiDialog( manager, config ) { +OO.ui.Dialog = function OoUiDialog( config ) { // Parent constructor - OO.ui.Dialog.super.call( this, manager, config ); + OO.ui.Dialog.super.call( this, config ); // Properties this.actions = new OO.ui.ActionSet(); @@ -2118,7 +2118,7 @@ OO.ui.Dialog.static.escapable = true; * * @param {jQuery.Event} e Key down event */ -OO.ui.Dialog.prototype.onFrameDocumentKeyDown = function ( e ) { +OO.ui.Dialog.prototype.onDocumentKeyDown = function ( e ) { if ( e.which === OO.ui.Keys.ESCAPE ) { this.close(); return false; @@ -2250,11 +2250,11 @@ OO.ui.Dialog.prototype.initialize = function () { // Events if ( this.constructor.static.escapable ) { - this.frame.$document.on( 'keydown', OO.ui.bind( this.onFrameDocumentKeyDown, this ) ); + this.$document.on( 'keydown', OO.ui.bind( this.onDocumentKeyDown, this ) ); } // Initialization - this.frame.$content.addClass( 'oo-ui-dialog-content' ); + this.$content.addClass( 'oo-ui-dialog-content' ); }; /** @@ -2299,7 +2299,7 @@ OO.ui.Dialog.prototype.executeAction = function ( action ) { */ OO.ui.Dialog.prototype.pushPending = function () { if ( this.pending === 0 ) { - this.frame.$content.addClass( 'oo-ui-actionDialog-content-pending' ); + this.$content.addClass( 'oo-ui-actionDialog-content-pending' ); this.$head.addClass( 'oo-ui-texture-pending' ); } this.pending++; @@ -2316,7 +2316,7 @@ OO.ui.Dialog.prototype.pushPending = function () { */ OO.ui.Dialog.prototype.popPending = function () { if ( this.pending === 1 ) { - this.frame.$content.removeClass( 'oo-ui-actionDialog-content-pending' ); + this.$content.removeClass( 'oo-ui-actionDialog-content-pending' ); this.$head.removeClass( 'oo-ui-texture-pending' ); } this.pending = Math.max( 0, this.pending - 1 ); @@ -2364,6 +2364,7 @@ OO.ui.Dialog.prototype.popPending = function () { * * @constructor * @param {Object} [config] Configuration options + * @cfg {boolean} [isolate] Configure managed windows to isolate their content using inline frames * @cfg {OO.Factory} [factory] Window factory to use for automatic instantiation * @cfg {boolean} [modal=true] Prevent interaction outside the dialog */ @@ -2380,10 +2381,13 @@ OO.ui.WindowManager = function OoUiWindowManager( config ) { // Properties this.factory = config.factory; this.modal = config.modal === undefined || !!config.modal; + this.isolate = !!config.isolate; this.windows = {}; this.opening = null; this.opened = null; this.closing = null; + this.preparingToOpen = null; + this.preparingToClose = null; this.size = null; this.currentWindow = null; this.$ariaHidden = null; @@ -2553,6 +2557,17 @@ OO.ui.WindowManager.prototype.isOpened = function ( win ) { return win === this.currentWindow && !!this.opened && this.opened.state() === 'pending'; }; +/** + * Check if window contents should be isolated. + * + * Window content isolation is done using inline frames. + * + * @return {boolean} Window contents should be isolated + */ +OO.ui.WindowManager.prototype.shouldIsolate = function () { + return this.isolate; +}; + /** * Check if a window is being managed. * @@ -2621,8 +2636,7 @@ OO.ui.WindowManager.prototype.getTeardownDelay = function () { * If window is not yet instantiated, it will be instantiated and added automatically. * * @param {string} name Symbolic window name - * @return {jQuery.Promise} Promise resolved when window is ready to be accessed; when resolved the - * first argument is an OO.ui.Window; when rejected the first argument is an OO.ui.Error + * @return {jQuery.Promise} Promise resolved with matching window, or rejected with an OO.ui.Error * @throws {Error} If the symbolic name is unrecognized by the factory * @throws {Error} If the symbolic name unrecognized as a managed window */ @@ -2638,10 +2652,8 @@ OO.ui.WindowManager.prototype.getWindow = function ( name ) { ) ); } else { win = this.factory.create( name, this, { $: this.$ } ); - this.addWindows( [ win ] ).then( - OO.ui.bind( deferred.resolve, deferred, win ), - deferred.reject - ); + this.addWindows( [ win ] ); + deferred.resolve( win ); } } else { deferred.reject( new OO.ui.Error( @@ -2690,23 +2702,30 @@ OO.ui.WindowManager.prototype.openWindow = function ( win, data ) { opening.reject( new OO.ui.Error( 'Cannot open window: window is not attached to manager' ) ); + } else if ( this.preparingToOpen || this.opening || this.opened ) { + opening.reject( new OO.ui.Error( + 'Cannot open window: another window is opening or open' + ) ); } // Window opening if ( opening.state() !== 'rejected' ) { - // Begin loading the window if it's not loaded already - may take noticable time and we want - // too do this in paralell with any preparatory actions - preparing.push( win.load() ); - - if ( this.opening || this.opened ) { - // If a window is currently opening or opened, close it first - preparing.push( this.closeWindow( this.currentWindow ) ); - } else if ( this.closing ) { + // Begin loading the window if it's not loading or loaded already - may take noticable time + // and we want to do this in paralell with any other preparatory actions + if ( !win.isLoading() && !win.isLoaded() ) { + // Finish initializing the window (must be done after manager is attached to DOM) + win.setManager( this ); + preparing.push( win.load() ); + } + + if ( this.closing ) { // If a window is currently closing, wait for it to complete preparing.push( this.closing ); } - $.when.apply( $, preparing ).done( function () { + this.preparingToOpen = $.when.apply( $, preparing ); + // Ensure handlers get called after preparingToOpen is set + this.preparingToOpen.done( function () { if ( manager.modal ) { manager.$( manager.getElementDocument() ).on( { // Prevent scrolling by keys in top-level window @@ -2726,13 +2745,15 @@ OO.ui.WindowManager.prototype.openWindow = function ( win, data ) { } manager.currentWindow = win; manager.opening = opening; + manager.preparingToOpen = null; manager.emit( 'opening', win, opening, data ); - manager.updateWindowSize( win ); setTimeout( function () { win.setup( data ).then( function () { + manager.updateWindowSize( win ); manager.opening.notify( { state: 'setup' } ); setTimeout( function () { win.ready( data ).then( function () { + manager.updateWindowSize( win ); manager.opening.notify( { state: 'ready' } ); manager.opening = null; manager.opened = $.Deferred(); @@ -2744,7 +2765,7 @@ OO.ui.WindowManager.prototype.openWindow = function ( win, data ) { } ); } - return opening; + return opening.promise(); }; /** @@ -2779,7 +2800,7 @@ OO.ui.WindowManager.prototype.closeWindow = function ( win, data ) { closing.reject( new OO.ui.Error( 'Cannot close window: window already closed with different data' ) ); - } else if ( this.closing ) { + } else if ( this.preparingToClose || this.closing ) { closing.reject( new OO.ui.Error( 'Cannot close window: window already closing with different data' ) ); @@ -2792,9 +2813,11 @@ OO.ui.WindowManager.prototype.closeWindow = function ( win, data ) { preparing.push( this.opening ); } - // Close the window - $.when.apply( $, preparing ).done( function () { + this.preparingToClose = $.when.apply( $, preparing ); + // Ensure handlers get called after preparingToClose is set + this.preparingToClose.done( function () { manager.closing = closing; + manager.preparingToClose = null; manager.emit( 'closing', win, closing, data ); manager.opened = null; opened.resolve( closing.promise(), data ); @@ -2831,23 +2854,18 @@ OO.ui.WindowManager.prototype.closeWindow = function ( win, data ) { } ); } - return closing; + return closing.promise(); }; /** * Add windows. * - * If the window manager is attached to the DOM then windows will be automatically loaded as they - * are added. - * * @param {Object.|OO.ui.Window[]} windows Windows to add - * @return {jQuery.Promise} Promise resolved when all windows are added * @throws {Error} If one of the windows being added without an explicit symbolic name does not have * a statically configured symbolic name */ OO.ui.WindowManager.prototype.addWindows = function ( windows ) { - var i, len, win, name, list, - promises = []; + var i, len, win, name, list; if ( $.isArray( windows ) ) { // Convert to map of windows by looking up symbolic names from static configuration @@ -2868,13 +2886,7 @@ OO.ui.WindowManager.prototype.addWindows = function ( windows ) { win = list[name]; this.windows[name] = win; this.$element.append( win.$element ); - - if ( this.isElementAttached() ) { - promises.push( win.load() ); - } } - - return $.when.apply( $, promises ); }; /** @@ -3382,10 +3394,9 @@ OO.ui.ButtonedElement.prototype.onMouseDown = function ( e ) { // tabIndex should generally be interacted with via the property, but it's not possible to // reliably unset a tabIndex via a property so we use the (lowercase) "tabindex" attribute this.tabIndex = this.$button.attr( 'tabindex' ); - this.$button - // Remove the tab-index while the button is down to prevent the button from stealing focus - .removeAttr( 'tabindex' ) - .addClass( 'oo-ui-buttonedElement-pressed' ); + // Remove the tab-index while the button is down to prevent the button from stealing focus + this.$button.removeAttr( 'tabindex' ); + this.$element.addClass( 'oo-ui-buttonedElement-pressed' ); // Run the mouseup handler no matter where the mouse is when the button is let go, so we can // reliably reapply the tabindex and remove the pressed class this.getElementDocument().addEventListener( 'mouseup', this.onMouseUpHandler, true ); @@ -3404,10 +3415,9 @@ OO.ui.ButtonedElement.prototype.onMouseUp = function ( e ) { if ( this.isDisabled() || e.which !== 1 ) { return false; } - this.$button - // Restore the tab-index after the button is up to restore the button's accesssibility - .attr( 'tabindex', this.tabIndex ) - .removeClass( 'oo-ui-buttonedElement-pressed' ); + // Restore the tab-index after the button is up to restore the button's accesssibility + this.$button.attr( 'tabindex', this.tabIndex ); + this.$element.removeClass( 'oo-ui-buttonedElement-pressed' ); // Stop listening for mouseup, since we only needed this once this.getElementDocument().removeEventListener( 'mouseup', this.onMouseUpHandler, true ); }; @@ -3467,7 +3477,7 @@ OO.ui.ButtonedElement.prototype.setAccessKey = function ( accessKey ) { * @chainable */ OO.ui.ButtonedElement.prototype.setActive = function ( value ) { - this.$button.toggleClass( 'oo-ui-buttonedElement-active', !!value ); + this.$element.toggleClass( 'oo-ui-buttonedElement-active', !!value ); return this; }; @@ -5157,9 +5167,9 @@ OO.ui.ToolGroup.prototype.destroy = function () { * @constructor * @param {Object} [config] Configuration options */ -OO.ui.MessageDialog = function OoUiMessageDialog( manager, config ) { +OO.ui.MessageDialog = function OoUiMessageDialog( config ) { // Parent constructor - OO.ui.MessageDialog.super.call( this, manager, config ); + OO.ui.MessageDialog.super.call( this, config ); // Properties this.verticalActionLayout = null; @@ -5305,7 +5315,7 @@ OO.ui.MessageDialog.prototype.initialize = function () { // Initialization this.title.$element.addClass( 'oo-ui-messageDialog-title' ); - this.frame.$content.addClass( 'oo-ui-messageDialog-content' ); + this.$content.addClass( 'oo-ui-messageDialog-content' ); this.container.$element.append( this.text.$element ); this.text.$element.append( this.title.$element, this.message.$element ); this.$body.append( this.container.$element ); @@ -5393,9 +5403,9 @@ OO.ui.MessageDialog.prototype.fitActions = function () { * @constructor * @param {Object} [config] Configuration options */ -OO.ui.ProcessDialog = function OoUiProcessDialog( manager, config ) { +OO.ui.ProcessDialog = function OoUiProcessDialog( config ) { // Parent constructor - OO.ui.ProcessDialog.super.call( this, manager, config ); + OO.ui.ProcessDialog.super.call( this, config ); // Initialization this.$element.addClass( 'oo-ui-processDialog' ); @@ -5478,7 +5488,7 @@ OO.ui.ProcessDialog.prototype.initialize = function () { this.$errors .addClass( 'oo-ui-processDialog-errors' ) .append( this.$errorsTitle, this.dismissButton.$element, this.retryButton.$element ); - this.frame.$content + this.$content .addClass( 'oo-ui-processDialog-content' ) .append( this.$errors ); this.$navigation @@ -10679,9 +10689,9 @@ OO.ui.TextInputMenuWidget.prototype.position = function () { dimensions.top += $container.height(); // Compensate for frame position if in a differnt frame - if ( this.input.$.frame && this.input.$.context !== this.$element[0].ownerDocument ) { + if ( this.input.$.$iframe && this.input.$.context !== this.$element[0].ownerDocument ) { frameOffset = OO.ui.Element.getRelativePosition( - this.input.$.frame.$element, this.$element.offsetParent() + this.input.$.$iframe, this.$element.offsetParent() ); dimensions.left += frameOffset.left; dimensions.top += frameOffset.top; diff --git a/resources/lib/oojs-ui/oojs-ui.svg.css b/resources/lib/oojs-ui/oojs-ui.svg.css index edbafb2f77..f84ea0b112 100644 --- a/resources/lib/oojs-ui/oojs-ui.svg.css +++ b/resources/lib/oojs-ui/oojs-ui.svg.css @@ -1,91 +1,64 @@ /*! - * OOjs UI v0.1.0-pre (944c47c5fe) + * OOjs UI v0.1.0-pre (55b861b167) * https://www.mediawiki.org/wiki/OOjs_UI * * Copyright 2011–2014 OOjs Team and other contributors. * Released under the MIT license * http://oojs.mit-license.org * - * Date: 2014-08-21T00:23:52Z + * Date: 2014-08-21T16:59:20Z */ /* Textures */ - .oo-ui-texture-pending { background-image: /* @embed */ url(images/textures/pending.gif); } - .oo-ui-texture-transparency { background-image: /* @embed */ url(images/textures/transparency.png); } - /* RTL Definitions */ - /* @noflip */ - .oo-ui-rtl { direction: rtl; } - /* @noflip */ - .oo-ui-ltr { direction: ltr; } -.oo-ui-frame { - padding: 0; - margin: 0; -} - -.oo-ui-frame-content { - padding: 0; - margin: 0; -} - -.oo-ui-frame-content:focus { - outline: none; -} - .oo-ui-toolbar { clear: both; } - .oo-ui-toolbar-bar { line-height: 1em; } - .oo-ui-toolbar-actions { float: right; } - .oo-ui-toolbar-tools { float: left; } - .oo-ui-toolbar-tools, .oo-ui-toolbar-actions, .oo-ui-toolbar-shadow { - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -webkit-touch-callout: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } - .oo-ui-toolbar-actions .oo-ui-popupWidget { - -webkit-user-select: all; - -moz-user-select: all; - -ms-user-select: all; - user-select: all; -webkit-touch-callout: default; + -webkit-user-select: all; + -moz-user-select: all; + -ms-user-select: all; + user-select: all; } - .oo-ui-toolbar-shadow { + background-position: left top; + background-repeat: repeat-x; position: absolute; width: 100%; pointer-events: none; - background-position: left top; - background-repeat: repeat-x; } .oo-ui-toolGroup { @@ -93,11 +66,9 @@ margin: 0.3em; vertical-align: middle; } - .oo-ui-toolGroup-empty { display: none; } - .oo-ui-toolGroup .oo-ui-tool-link .oo-ui-iconedElement-icon { background-position: center center; background-repeat: no-repeat; @@ -105,28 +76,35 @@ .oo-ui-window { line-height: 1em; + /* Content div takes focus when opened, so hide outline */ } - -.oo-ui-window > .oo-ui-window-frame { +.oo-ui-window-frame { -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; } - -.oo-ui-window > .oo-ui-window-frame > .oo-ui-frame { +.oo-ui-window-frame > iframe { width: 100%; height: 100%; + margin: 0; + padding: 0; +} +.oo-ui-window-content:focus { + outline: none; } - .oo-ui-window-head, .oo-ui-window-foot { - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -webkit-touch-callout: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} +.oo-ui-window-body { + margin: 0; + padding: 0; + background: none; } - .oo-ui-window-overlay { position: absolute; top: 0; @@ -139,64 +117,59 @@ height: 0; overflow: hidden; } - .oo-ui-windowManager-modal > .oo-ui-dialog.oo-ui-window-setup { + width: auto; + height: auto; top: 0; right: 0; bottom: 0; left: 0; - width: auto; - height: auto; padding: 1em; } - .oo-ui-windowManager-modal > .oo-ui-dialog.oo-ui-window-setup > .oo-ui-window-frame { position: fixed; right: 0; left: 0; - max-width: 100%; - max-height: 100%; margin: auto; overflow: hidden; + max-width: 100%; + max-height: 100%; +} +.oo-ui-windowManager-modal > .oo-ui-dialog.oo-ui-window-setup > .oo-ui-window-frame > iframe { + width: 100%; + height: 100%; } - .oo-ui-windowManager-fullscreen > .oo-ui-dialog > .oo-ui-window-frame { - top: 0; - bottom: 0; width: 100%; height: 100%; + top: 0; + bottom: 0; } .oo-ui-messageDialog-actions-horizontal { display: table; - width: 100%; table-layout: fixed; + width: 100%; } - .oo-ui-messageDialog-actions-horizontal .oo-ui-actionWidget { display: table-cell; width: 1%; } - .oo-ui-messageDialog-actions-vertical { display: block; } - .oo-ui-messageDialog-actions-vertical .oo-ui-actionWidget { display: block; overflow: hidden; text-overflow: ellipsis; } - .oo-ui-messageDialog-actions .oo-ui-actionWidget { position: relative; text-align: center; } - .oo-ui-messageDialog-actions .oo-ui-actionWidget .oo-ui-buttonedElement-button { display: block; } - .oo-ui-messageDialog-actions .oo-ui-actionWidget .oo-ui-labeledElement-label { position: relative; top: auto; @@ -210,70 +183,60 @@ text-overflow: ellipsis; white-space: nowrap; } - .oo-ui-processDialog-title { display: inline; } - .oo-ui-processDialog-actions-safe .oo-ui-actionWidget, .oo-ui-processDialog-actions-primary .oo-ui-actionWidget, .oo-ui-processDialog-actions-other .oo-ui-actionWidget { white-space: nowrap; } - .oo-ui-processDialog-actions-safe, .oo-ui-processDialog-actions-primary { position: absolute; top: 0; bottom: 0; } - .oo-ui-processDialog-actions-safe { left: 0; } - .oo-ui-processDialog-actions-primary { right: 0; } - .oo-ui-processDialog-errors { + display: none; position: absolute; top: 0; + left: 0; right: 0; bottom: 0; - left: 0; - z-index: 2; - display: none; padding: 3em 3em 1.5em 3em; + z-index: 2; overflow-x: hidden; overflow-y: auto; } .oo-ui-buttonedElement > .oo-ui-buttonedElement-button { + cursor: pointer; display: inline-block; vertical-align: middle; - cursor: pointer; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -webkit-touch-callout: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } - .oo-ui-buttonedElement > .oo-ui-buttonedElement-button > .oo-ui-iconedElement-icon { display: none; margin-left: 0; } - .oo-ui-buttonedElement > .oo-ui-buttonedElement-button > .oo-ui-indicatedElement-indicator { display: none; margin-right: -0.75em; } - .oo-ui-buttonedElement.oo-ui-widget-disabled > .oo-ui-buttonedElement-button { cursor: default; } - .oo-ui-buttonedElement.oo-ui-indicatedElement > .oo-ui-buttonedElement-button > .oo-ui-indicatedElement-indicator, .oo-ui-buttonedElement.oo-ui-iconedElement > .oo-ui-buttonedElement-button > .oo-ui-iconedElement-icon { display: inline-block; @@ -281,95 +244,81 @@ background-position: center center; background-repeat: no-repeat; } - .oo-ui-buttonedElement-frameless { - position: relative; display: inline-block; + position: relative; } - .oo-ui-buttonedElement-frameless > .oo-ui-buttonedElement-button > .oo-ui-labeledElement-label { display: inline-block; - margin-left: 0.25em; vertical-align: middle; + margin-left: 0.25em; } - .oo-ui-buttonedElement-framed > .oo-ui-buttonedElement-button { display: inline-block; - text-align: center; vertical-align: top; + text-align: center; } - .oo-ui-buttonedElement-framed > .oo-ui-buttonedElement-button > .oo-ui-labeledElement-label { display: inline-block; - line-height: 1.9em; vertical-align: middle; + line-height: 1.9em; } - .oo-ui-buttonedElement-framed.oo-ui-widget-disabled > .oo-ui-buttonedElement-button, -.oo-ui-buttonedElement-framed.oo-ui-widget-disabled > .oo-ui-buttonedElement-button.oo-ui-buttonedElement-active, -.oo-ui-buttonedElement-framed.oo-ui-widget-disabled > .oo-ui-buttonedElement-button.oo-ui-buttonedElement-pressed { +.oo-ui-buttonedElement-framed.oo-ui-widget-disabled.oo-ui-buttonedElement-active > .oo-ui-buttonedElement-button, +.oo-ui-buttonedElement-framed.oo-ui-widget-disabled.oo-ui-buttonedElement-pressed > .oo-ui-buttonedElement-button { cursor: default; } .oo-ui-clippableElement-clippable { -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; } .oo-ui-bookletLayout-stackLayout.oo-ui-stackLayout-continuous .oo-ui-panelLayout-scrollable { overflow-y: hidden; } - .oo-ui-bookletLayout-stackLayout .oo-ui-panelLayout { width: 100%; -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; } - .oo-ui-bookletLayout-stackLayout .oo-ui-panelLayout-scrollable { overflow-y: auto; } - .oo-ui-bookletLayout-stackLayout .oo-ui-panelLayout-padded { padding: 2em; } - .oo-ui-bookletLayout-outlinePanel-editable .oo-ui-outlineWidget { position: absolute; top: 0; + left: 0; right: 0; bottom: 3em; - left: 0; overflow-y: auto; } - .oo-ui-bookletLayout-outlinePanel .oo-ui-outlineControlsWidget { position: absolute; - right: 0; bottom: 0; left: 0; + right: 0; } .oo-ui-fieldLayout { margin-bottom: 1em; } - .oo-ui-fieldLayout:last-child { margin-bottom: 0; } - .oo-ui-fieldLayout:before, .oo-ui-fieldLayout:after { - display: table; content: " "; + display: table; } - .oo-ui-fieldLayout:after { clear: both; } - .oo-ui-fieldLayout.oo-ui-fieldLayout-align-left > .oo-ui-labeledElement-label, .oo-ui-fieldLayout.oo-ui-fieldLayout-align-right > .oo-ui-labeledElement-label { display: block; @@ -378,68 +327,57 @@ padding-top: 0.5em; margin-right: 5%; } - .oo-ui-fieldLayout.oo-ui-fieldLayout-align-left > .oo-ui-fieldLayout-field, .oo-ui-fieldLayout.oo-ui-fieldLayout-align-right > .oo-ui-fieldLayout-field { display: block; float: left; width: 60%; } - .oo-ui-fieldLayout.oo-ui-fieldLayout-align-right > .oo-ui-labeledElement-label { text-align: right; } - .oo-ui-fieldLayout.oo-ui-fieldLayout-align-inline > .oo-ui-labeledElement-label { display: inline-block; - padding: 0.75em 0.5em 0.5em 0.5em; vertical-align: middle; + padding: 0.75em 0.5em 0.5em 0.5em; } - .oo-ui-fieldLayout.oo-ui-fieldLayout-align-inline > .oo-ui-fieldLayout-field { display: inline-block; - padding: 0.5em 0; vertical-align: middle; + padding: 0.5em 0; } - .oo-ui-fieldLayout.oo-ui-fieldLayout-align-top > .oo-ui-labeledElement-label { display: inline-block; padding: 0.5em 0; } - .oo-ui-fieldLayout > .oo-ui-popupButtonWidget > .oo-ui-buttonedElement-button > .oo-ui-iconedElement-icon { margin-top: 0.25em; } - .oo-ui-fieldLayout > .oo-ui-popupButtonWidget > .oo-ui-popupWidget > .oo-ui-popupWidget-popup { z-index: 1; } .oo-ui-fieldsetLayout { position: relative; - padding: 0; margin: 0; + padding: 0; } - .oo-ui-fieldsetLayout + .oo-ui-fieldsetLayout { margin-top: 2em; } - .oo-ui-fieldsetLayout > .oo-ui-labeledElement-label { - padding: 0.25em 0; margin-bottom: 0.5em; + padding: 0.25em 0; } - .oo-ui-fieldsetLayout.oo-ui-iconedElement > .oo-ui-labeledElement-label { padding-left: 1.75em; line-height: 1.33em; } - .oo-ui-fieldsetLayout.oo-ui-iconedElement > .oo-ui-iconedElement-icon { + display: block; position: absolute; - top: 0.25em; left: 0; - display: block; + top: 0.25em; width: 2em; height: 2em; background-position: center center; @@ -449,9 +387,9 @@ .oo-ui-gridLayout { position: absolute; top: 0; + left: 0; right: 0; bottom: 0; - left: 0; } .oo-ui-labelWidget { @@ -462,64 +400,54 @@ .oo-ui-panelLayout { position: relative; } - .oo-ui-panelLayout-scrollable { overflow-y: auto; } - .oo-ui-panelLayout-expanded { position: absolute; top: 0; + left: 0; right: 0; bottom: 0; - left: 0; } .oo-ui-stackLayout > .oo-ui-panelLayout { display: none; } - .oo-ui-stackLayout-continuous > .oo-ui-panelLayout { - position: relative; display: block; + position: relative; } .oo-ui-barToolGroup > .oo-ui-iconedElement-icon, .oo-ui-barToolGroup > .oo-ui-labeledElement-label { display: none; } - .oo-ui-barToolGroup .oo-ui-tool { - position: relative; display: inline-block; + position: relative; vertical-align: top; } - .oo-ui-barToolGroup .oo-ui-tool-link { display: block; height: 1.5em; padding: 0.25em; } - .oo-ui-barToolGroup .oo-ui-tool-link .oo-ui-iconedElement-icon { display: block; - width: 1.5em; height: 1.5em; + width: 1.5em; } - .oo-ui-barToolGroup .oo-ui-tool-link .oo-ui-tool-title { display: none; } - .oo-ui-barToolGroup .oo-ui-tool.oo-ui-widget-disabled .oo-ui-tool-link { cursor: default; } - .oo-ui-barToolGroup .oo-ui-tool-title, .oo-ui-barToolGroup .oo-ui-tool-accel { display: none; } - .oo-ui-barToolGroup.oo-ui-widget-enabled .oo-ui-tool-link { cursor: pointer; } @@ -527,22 +455,19 @@ .oo-ui-listToolGroup .oo-ui-toolGroup-tools { padding: 0.25em; } - .oo-ui-listToolGroup .oo-ui-tool { display: inline-block; width: 100%; -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; } - .oo-ui-listToolGroup .oo-ui-tool-link { display: block; - padding-right: 0.5em; - white-space: nowrap; cursor: pointer; + white-space: nowrap; + padding-right: 0.5em; } - .oo-ui-listToolGroup .oo-ui-tool.oo-ui-widget-disabled .oo-ui-tool-link { cursor: default; } @@ -550,30 +475,24 @@ .oo-ui-menuToolGroup .oo-ui-popupToolGroup-handle { min-width: 8em; } - .oo-ui-menuToolGroup .oo-ui-toolGroup-tools { padding: 0.25em 0 0.25em 0; } - .oo-ui-menuToolGroup .oo-ui-tool { display: block; } - .oo-ui-menuToolGroup .oo-ui-tool-link { display: block; - padding: 0 1em 0 0.25em; - white-space: nowrap; cursor: pointer; + white-space: nowrap; + padding: 0 1em 0 0.25em; } - .oo-ui-menuToolGroup .oo-ui-tool-link .oo-ui-iconedElement-icon { background-image: none; } - .oo-ui-menuToolGroup .oo-ui-tool-active .oo-ui-tool-link .oo-ui-iconedElement-icon { background-image: /* @embed */ url(images/icons/check.svg); } - .oo-ui-menuToolGroup .oo-ui-tool.oo-ui-widget-disabled .oo-ui-tool-link { cursor: default; } @@ -583,16 +502,13 @@ height: 2em; min-width: 2.5em; } - .oo-ui-popupToolGroup.oo-ui-indicatedElement.oo-ui-iconedElement { min-width: 3.5em; } - .oo-ui-popupToolGroup-handle { display: block; cursor: pointer; } - .oo-ui-popupToolGroup-handle .oo-ui-indicatedElement-indicator, .oo-ui-popupToolGroup-handle .oo-ui-iconedElement-icon { position: absolute; @@ -602,72 +518,59 @@ background-position: center center; background-repeat: no-repeat; } - .oo-ui-popupToolGroup-handle .oo-ui-indicatedElement-indicator { right: 0; } - .oo-ui-popupToolGroup-handle .oo-ui-iconedElement-icon { left: 0.25em; } - .oo-ui-popupToolGroup-handle .oo-ui-labeledElement-label { - margin: 0 1em; - font-size: 0.8em; line-height: 2.6em; + font-size: 0.8em; + margin: 0 1em; } - .oo-ui-popupToolGroup-header { - margin: 0 0.6em; + line-height: 2.6em; font-size: 0.8em; + margin: 0 0.6em; font-weight: bold; - line-height: 2.6em; } - .oo-ui-popupToolGroup.oo-ui-widget-disabled .oo-ui-popupToolGroup-handle { cursor: default; } - .oo-ui-popupToolGroup.oo-ui-iconedElement .oo-ui-popupToolGroup-handle .oo-ui-labeledElement-label { margin-left: 3em; } - .oo-ui-popupToolGroup.oo-ui-indicatedElement .oo-ui-popupToolGroup-handle .oo-ui-labeledElement-label { margin-right: 2.25em; } - .oo-ui-popupToolGroup .oo-ui-toolGroup-tools { + display: none; position: absolute; top: 2em; left: -1px; z-index: 4; - display: none; } - .oo-ui-popupToolGroup .oo-ui-toolGroup-tools .oo-ui-iconedElement-icon { - background-position: center center; background-repeat: no-repeat; + background-position: center center; } - .oo-ui-popupToolGroup-active.oo-ui-widget-enabled > .oo-ui-toolGroup-tools { display: block; } - .oo-ui-popupToolGroup .oo-ui-tool-link .oo-ui-iconedElement-icon { display: inline-block; - width: 2em; + vertical-align: middle; height: 2em; + width: 2em; margin-right: 0.25em; - vertical-align: middle; } - .oo-ui-popupToolGroup .oo-ui-tool-link .oo-ui-tool-title { display: inline-block; - font-size: 0.8em; - line-height: 2em; vertical-align: middle; + line-height: 2em; + font-size: 0.8em; } - .oo-ui-popupToolGroup .oo-ui-tool-accel { display: none; } @@ -676,7 +579,6 @@ margin-left: 1.25em; font-size: 0.8em; } - .oo-ui-popupTool .oo-ui-popupWidget-popup, .oo-ui-popupTool .oo-ui-popupWidget-anchor { z-index: 4; @@ -684,59 +586,55 @@ .oo-ui-iconWidget { display: inline-block; - width: 1.9em; - height: 1.9em; - line-height: 2.5em; vertical-align: middle; + line-height: 2.5em; + height: 1.9em; + width: 1.9em; background-position: center center; background-repeat: no-repeat; opacity: 0.8; } - .oo-ui-iconWidget.oo-ui-widget-disabled { opacity: 0.2; } .oo-ui-indicatorWidget { display: inline-block; - width: 1.9em; - height: 1.9em; - line-height: 2.5em; vertical-align: middle; + line-height: 2.5em; + height: 1.9em; + width: 1.9em; background-position: center center; background-repeat: no-repeat; opacity: 0.8; } - .oo-ui-indicatorWidget.oo-ui-widget-disabled { opacity: 0.2; } .oo-ui-selectWidget { - padding: 0; - margin: 0; list-style: none; + margin: 0; + padding: 0; } .oo-ui-optionWidget { position: relative; display: block; - margin: 0; + border: none; list-style: none; + margin: 0; cursor: pointer; - border: none; } - .oo-ui-optionWidget.oo-ui-widget-disabled { cursor: default; } - .oo-ui-optionWidget .oo-ui-labeledElement-label { display: block; - overflow: hidden; line-height: 1.5em; - text-overflow: ellipsis; white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; } .oo-ui-decoratedOptionWidget .oo-ui-iconedElement-icon, @@ -746,14 +644,12 @@ width: 2em; height: 2em; margin-top: -1em; - background-position: center center; background-repeat: no-repeat; + background-position: center center; } - .oo-ui-decoratedOptionWidget .oo-ui-iconedElement-icon { left: 0.5em; } - .oo-ui-decoratedOptionWidget .oo-ui-indicatedElement-indicator { right: 0.5em; } @@ -761,7 +657,6 @@ .oo-ui-menuWidget { position: absolute; } - .oo-ui-menuWidget input { position: absolute; width: 0; @@ -777,50 +672,42 @@ .oo-ui-popupWidget-popup { position: absolute; - z-index: 1; overflow: hidden; + z-index: 1; } - .oo-ui-popupWidget-anchor { - z-index: 1; display: none; + z-index: 1; } - .oo-ui-popupWidget-anchored .oo-ui-popupWidget-popup { margin-top: 7px; } - .oo-ui-popupWidget-anchored .oo-ui-popupWidget-anchor { - position: absolute; display: block; + position: absolute; background-repeat: no-repeat; } - .oo-ui-popupWidget-head { height: 2.5em; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -webkit-touch-callout: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } - .oo-ui-popupWidget-head .oo-ui-buttonWidget { float: right; margin: 0.25em; } - .oo-ui-popupWidget-head .oo-ui-labeledElement-label { float: left; margin: 0.75em 1em; cursor: default; } - .oo-ui-popupWidget-body { - overflow: hidden; clear: both; + overflow: hidden; } - .oo-ui-popupWidget-body-padded { padding: 0 1em; } @@ -828,41 +715,36 @@ .oo-ui-buttonGroupWidget { border-radius: 0.3em; } - .oo-ui-buttonGroupWidget .oo-ui-buttonedElement-framed .oo-ui-buttonedElement-button { + border-radius: 0; margin-bottom: -1px; margin-left: -1px; - border-radius: 0; } - .oo-ui-buttonGroupWidget .oo-ui-buttonedElement-framed:first-child .oo-ui-buttonedElement-button { - margin-left: 0; border-bottom-left-radius: 0.3em; border-top-left-radius: 0.3em; + margin-left: 0; } - .oo-ui-buttonGroupWidget .oo-ui-buttonedElement-framed:last-child .oo-ui-buttonedElement-button { - border-top-right-radius: 0.3em; border-bottom-right-radius: 0.3em; + border-top-right-radius: 0.3em; } .oo-ui-buttonOptionWidget { display: inline-block; background-color: transparent; } - .oo-ui-buttonOptionWidget .oo-ui-buttonedElement-button { position: relative; height: 1.9em; } - .oo-ui-buttonOptionWidget.oo-ui-iconedElement .oo-ui-iconedElement-icon, .oo-ui-buttonOptionWidget.oo-ui-indicatedElement .oo-ui-indicatedElement-indicator { position: static; display: inline-block; + vertical-align: middle; height: 1.9em; margin-top: 0; - vertical-align: middle; } .oo-ui-buttonSelectWidget { @@ -878,25 +760,23 @@ .oo-ui-inlineMenuWidget { position: relative; display: inline-block; - min-width: 20em; margin: 0.25em 0; + min-width: 20em; } - .oo-ui-inlineMenuWidget-handle { display: inline-block; width: 100%; height: 2.5em; cursor: pointer; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -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-inlineMenuWidget-handle .oo-ui-indicatedElement-indicator, .oo-ui-inlineMenuWidget-handle .oo-ui-iconedElement-icon { position: absolute; @@ -906,33 +786,26 @@ background-position: center center; background-repeat: no-repeat; } - .oo-ui-inlineMenuWidget-handle .oo-ui-indicatedElement-indicator { right: 0; } - .oo-ui-inlineMenuWidget-handle .oo-ui-iconedElement-icon { left: 0.25em; } - .oo-ui-inlineMenuWidget-handle .oo-ui-labeledElement-label { - margin: 0 0.5em; line-height: 2.5em; + margin: 0 0.5em; } - .oo-ui-inlineMenuWidget.oo-ui-iconedElement .oo-ui-inlineMenuWidget-handle .oo-ui-labeledElement-label { margin-left: 3em; } - .oo-ui-inlineMenuWidget.oo-ui-indicatedElement .oo-ui-inlineMenuWidget-handle .oo-ui-labeledElement-label { margin-right: 2em; } - .oo-ui-inlineMenuWidget .oo-ui-menuWidget { - z-index: 1; width: 100%; + z-index: 1; } - .oo-ui-inlineMenuWidget.oo-ui-widget-disabled .oo-ui-inlineMenuWidget-handle { cursor: default; } @@ -940,15 +813,12 @@ .oo-ui-menuItemWidget { position: relative; } - .oo-ui-menuItemWidget .oo-ui-iconedElement-icon { display: none; } - .oo-ui-menuItemWidget.oo-ui-optionWidget-selected { background-color: transparent; } - .oo-ui-menuItemWidget.oo-ui-optionWidget-selected .oo-ui-iconedElement-icon { display: block; } @@ -960,18 +830,16 @@ .oo-ui-outlineControlsWidget { height: 3em; } - .oo-ui-outlineControlsWidget-items, .oo-ui-outlineControlsWidget-movers { float: left; height: 2em; - padding: 0; margin: 0.5em; + padding: 0; -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; } - .oo-ui-outlineControlsWidget > .oo-ui-iconedElement-icon { float: left; width: 1.5em; @@ -980,20 +848,16 @@ background-position: right center; background-repeat: no-repeat; } - .oo-ui-outlineControlsWidget-items { float: left; margin-left: 0; } - .oo-ui-outlineControlsWidget-items .oo-ui-buttonWidget { float: left; } - .oo-ui-outlineControlsWidget-movers { float: right; } - .oo-ui-outlineControlsWidget-movers .oo-ui-buttonWidget { float: right; } @@ -1002,17 +866,16 @@ position: relative; padding: 0.75em; cursor: pointer; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -webkit-touch-callout: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } .oo-ui-popupButtonWidget { position: relative; } - .oo-ui-popupButtonWidget .oo-ui-popupWidget { position: absolute; left: 1em; @@ -1022,23 +885,21 @@ .oo-ui-searchWidget-query { position: absolute; top: 0; - right: 0; left: 0; + right: 0; height: 4em; padding: 0 1em; } - .oo-ui-searchWidget-query .oo-ui-textInputWidget { width: 100%; margin: 0.75em 0; } - .oo-ui-searchWidget-results { position: absolute; top: 4em; - right: 0; bottom: 0; left: 0; + right: 0; padding: 1em; overflow-x: hidden; overflow-y: auto; @@ -1048,38 +909,34 @@ .oo-ui-textInputWidget { position: relative; -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; } - .oo-ui-textInputWidget input, .oo-ui-textInputWidget textarea { display: inline-block; width: 100%; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; resize: none; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; } - .oo-ui-textInputWidget > .oo-ui-iconedElement-icon, .oo-ui-textInputWidget > .oo-ui-indicatedElement-indicator { position: absolute; top: 0; height: 100%; - cursor: pointer; background-repeat: no-repeat; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; + cursor: pointer; -webkit-touch-callout: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } - .oo-ui-textInputWidget > .oo-ui-iconedElement-icon { left: 0; } - .oo-ui-textInputWidget > .oo-ui-indicatedElement-indicator { right: 0; } @@ -1087,195 +944,158 @@ .oo-ui-toggleSwitchWidget { position: relative; display: inline-block; - width: 4em; + vertical-align: middle; height: 2em; + width: 4em; overflow: hidden; - vertical-align: middle; cursor: pointer; - -webkit-transform: translateZ(0); - -moz-transform: translateZ(0); - -ms-transform: translateZ(0); - -o-transform: translateZ(0); - transform: translateZ(0); -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + -webkit-transform: translateZ(0px); + -moz-transform: translateZ(0px); + -ms-transform: translateZ(0px); + -o-transform: translateZ(0px); + transform: translateZ(0px); } - .oo-ui-toggleSwitchWidget.oo-ui-widget-disabled { cursor: default; } - .oo-ui-toggleSwitchWidget-grip { position: absolute; + display: block; top: 0.25em; left: 0.25em; - display: block; width: 1.5em; height: 1.5em; margin-top: -1px; -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; -webkit-transition: left 200ms ease-in-out, margin-left 200ms ease-in-out; - -moz-transition: left 200ms ease-in-out, margin-left 200ms ease-in-out; - -ms-transition: left 200ms ease-in-out, margin-left 200ms ease-in-out; - -o-transition: left 200ms ease-in-out, margin-left 200ms ease-in-out; - transition: left 200ms ease-in-out, margin-left 200ms ease-in-out; + -moz-transition: left 200ms ease-in-out, margin-left 200ms ease-in-out; + -ms-transition: left 200ms ease-in-out, margin-left 200ms ease-in-out; + -o-transition: left 200ms ease-in-out, margin-left 200ms ease-in-out; + transition: left 200ms ease-in-out, margin-left 200ms ease-in-out; } - .oo-ui-toggleSwitchWidget .oo-ui-toggleSwitchWidget-glow { position: absolute; top: 0; - right: 0; bottom: 0; + right: 0; left: 0; - -webkit-transition: opacity 200ms ease-in-out; - -moz-transition: opacity 200ms ease-in-out; - -ms-transition: opacity 200ms ease-in-out; - -o-transition: opacity 200ms ease-in-out; - transition: opacity 200ms ease-in-out; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -webkit-touch-callout: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-transition: opacity 200ms ease-in-out; + -moz-transition: opacity 200ms ease-in-out; + -ms-transition: opacity 200ms ease-in-out; + -o-transition: opacity 200ms ease-in-out; + transition: opacity 200ms ease-in-out; } - .oo-ui-toggleWidget-on .oo-ui-toggleSwitchWidget-grip { left: 2.25em; margin-left: -2px; } - .oo-ui-toggleWidget-off .oo-ui-toggleSwitchWidget-grip { left: 0.25em; margin-left: 0; } - .oo-ui-toggleWidget-off .oo-ui-toggleSwitchWidget-glow { display: none; } /* Icons */ - .oo-ui-icon-add-item { background-image: /* @embed */ url(images/icons/add-item.svg); } - .oo-ui-icon-advanced { background-image: /* @embed */ url(images/icons/advanced.svg); } - .oo-ui-icon-alert { background-image: /* @embed */ url(images/icons/alert.svg); } - .oo-ui-icon-check { background-image: /* @embed */ url(images/icons/check.svg); } - .oo-ui-icon-clear { background-image: /* @embed */ url(images/icons/clear.svg); } - .oo-ui-icon-close { background-image: /* @embed */ url(images/icons/close.svg); } - .oo-ui-icon-code { background-image: /* @embed */ url(images/icons/code.svg); } - .oo-ui-icon-collapse { background-image: /* @embed */ url(images/icons/collapse.svg); } - .oo-ui-icon-comment { background-image: /* @embed */ url(images/icons/comment.svg); } - .oo-ui-icon-expand { background-image: /* @embed */ url(images/icons/expand.svg); } - .oo-ui-icon-help { background-image: /* @embed */ url(images/icons/help.svg); } - .oo-ui-icon-info { background-image: /* @embed */ url(images/icons/info.svg); } - .oo-ui-icon-link { background-image: /* @embed */ url(images/icons/link.svg); } - .oo-ui-icon-menu { background-image: /* @embed */ url(images/icons/menu.svg); } - .oo-ui-icon-next { background-image: /* @embed */ url(images/icons/move-ltr.svg); } - .oo-ui-icon-picture { background-image: /* @embed */ url(images/icons/picture.svg); } - .oo-ui-icon-previous { background-image: /* @embed */ url(images/icons/move-rtl.svg); } - .oo-ui-icon-redo { background-image: /* @embed */ url(images/icons/arched-arrow-ltr.svg); } - .oo-ui-icon-remove { background-image: /* @embed */ url(images/icons/remove.svg); } - .oo-ui-icon-search { background-image: /* @embed */ url(images/icons/search.svg); } - .oo-ui-icon-settings { background-image: /* @embed */ url(images/icons/settings.svg); } - .oo-ui-icon-tag { background-image: /* @embed */ url(images/icons/tag.svg); } - .oo-ui-icon-undo { background-image: /* @embed */ url(images/icons/arched-arrow-rtl.svg); } - .oo-ui-icon-window { background-image: /* @embed */ url(images/icons/window.svg); } - /* Indicators */ - .oo-ui-indicator-alert { background-image: /* @embed */ url(images/indicators/alert.svg); } - .oo-ui-indicator-down { background-image: /* @embed */ url(images/indicators/arrow-down.svg); } - .oo-ui-indicator-next { background-image: /* @embed */ url(images/indicators/arrow-ltr.svg); } - .oo-ui-indicator-previous { background-image: /* @embed */ url(images/indicators/arrow-rtl.svg); } - .oo-ui-indicator-required { background-image: /* @embed */ url(images/indicators/required.svg); } - .oo-ui-indicator-up { background-image: /* @embed */ url(images/indicators/arrow-up.svg); -} \ No newline at end of file +} -- 2.20.1