From 303782db5ddb8b09800f9d39c5a7720cd08ada77 Mon Sep 17 00:00:00 2001 From: "James D. Forrester" Date: Tue, 4 Mar 2014 10:34:24 -0800 Subject: [PATCH] Update OOjs UI to v0.1.0-pre (c57909a623) New changes: f0e179c Break up stylesheets into separate files to make a 1:1 ratio of JS and LESS 3290d40 [BREAKING CHANGE] Split styles up into base styles and a theme Incidental changes: * Add oojs-ui-apex.css to the commit build script * Add oojs-ui-apex.css to the resource manifest as the default skinStyle Change-Id: Ib5ef9125528fdff9e71864d9016c5f6a12aa8ef3 --- resources/Resources.php | 3 + resources/oojs-ui/oojs-ui-apex.css | 690 ++++++++++++++ resources/oojs-ui/oojs-ui.js | 46 +- resources/oojs-ui/oojs-ui.svg.css | 1345 ++++++++------------------- resources/oojs-ui/update-oojs-ui.sh | 2 +- 5 files changed, 1105 insertions(+), 981 deletions(-) create mode 100644 resources/oojs-ui/oojs-ui-apex.css diff --git a/resources/Resources.php b/resources/Resources.php index 7c13ea667a..97106f25f1 100644 --- a/resources/Resources.php +++ b/resources/Resources.php @@ -1369,6 +1369,9 @@ return array( 'styles' => array( 'resources/oojs-ui/oojs-ui.svg.css', ), + 'skinStyles' => array( + 'default' => 'resources/oojs-ui/oojs-ui-apex.css', + ), 'messages' => array( 'ooui-dialog-action-close', 'ooui-outline-control-move-down', diff --git a/resources/oojs-ui/oojs-ui-apex.css b/resources/oojs-ui/oojs-ui-apex.css new file mode 100644 index 0000000000..256aa1fe74 --- /dev/null +++ b/resources/oojs-ui/oojs-ui-apex.css @@ -0,0 +1,690 @@ +.oo-ui-dialog { + background-color: #fff; + background-color: rgba(255, 255, 255, 0.5); + opacity: 0; + -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; +} + +.oo-ui-dialog .oo-ui-window-frame { + background-color: #fff; + border: solid 1px #ccc; + border-radius: 0.5em; + -webkit-transform: scale(0.5); + -moz-transform: scale(0.5); + -ms-transform: scale(0.5); + -o-transform: scale(0.5); + transform: scale(0.5); + box-shadow: 0 0.2em 1em rgba(0, 0, 0, 0.3); + -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; +} + +.oo-ui-dialog-open { + opacity: 1; +} + +.oo-ui-dialog-open .oo-ui-window-frame { + -webkit-transform: scale(1); + -moz-transform: scale(1); + -ms-transform: scale(1); + -o-transform: scale(1); + transform: scale(1); +} + +.oo-ui-dialog-content .oo-ui-window-body { + box-shadow: 0 0 0.66em rgba(0, 0, 0, 0.25); +} + +/* OO.ui.Toolbar */ + +.oo-ui-toolbar-bar { + background: #f8fbfd; + 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; +} + +.oo-ui-toolbar-shadow { + 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; +} + +/* OO.ui.ToolGroup */ + +.oo-ui-toolGroup { + border: solid 1px transparent; + border-radius: 0.25em; + -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; +} + +.oo-ui-toolGroup:hover { + border-color: rgba(0, 0, 0, 0.1); +} + +.oo-ui-toolGroup .oo-ui-tool-link .oo-ui-tool-title { + color: #000; +} + +/* OO.ui.Window */ + +.oo-ui-window-title { + color: #333; +} + +.oo-ui-window-overlay { + font-family: sans-serif; + font-size: 1em; + line-height: 1.5em; +} + +/* OO.ui.ButtonedElement */ + +.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; +} + +.oo-ui-buttonedElement-frameless .oo-ui-buttonedElement-button > .oo-ui-iconedElement-icon { + -webkit-transition: opacity 200ms; + -moz-transition: opacity 200ms; + -ms-transition: opacity 200ms; + -o-transition: opacity 200ms; + 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-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 { + text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5); + background: #eeeeee; + 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 { + color: black; + background: #eeeeee; + 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-flaggableElement-primary .oo-ui-buttonedElement-button { + background: #cde7f4; + 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 { + background: #cde7f4; + 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 { + background: #daf0be; + 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 { + background: #daf0be; + 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 { + color: #333; + background: #eee; + 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-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 { + border-color: #ccc; + box-shadow: none; +} + +/* OO.ui.BookletLayout */ + +.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); +} + +/* OO.ui.FieldsetLayout */ + +.oo-ui-fieldsetLayout { + border: none; +} + +.oo-ui-fieldsetLayout > legend.oo-ui-labeledElement-label { + font-size: 1.5em; +} + +/* OO.ui.BarToolGroup */ + +.oo-ui-barToolGroup .oo-ui-tool { + 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; +} + +.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.oo-ui-widget-enabled:hover { + border-color: rgba(0, 0, 0, 0.2); +} + +.oo-ui-barToolGroup .oo-ui-tool-active.oo-ui-widget-enabled { + background: #f8fbfd; + 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-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-tool-link .oo-ui-iconedElement-icon { + opacity: 0.8; +} + +.oo-ui-barToolGroup .oo-ui-tool.oo-ui-widget-disabled .oo-ui-tool-link .oo-ui-iconedElement-icon { + opacity: 0.2; +} + +.oo-ui-barToolGroup .oo-ui-tool.oo-ui-widget-enabled .oo-ui-tool-link .oo-ui-iconedElement-icon { + opacity: 0.8; +} + +.oo-ui-barToolGroup .oo-ui-tool.oo-ui-widget-enabled:hover .oo-ui-tool-link .oo-ui-iconedElement-icon { + opacity: 1; +} + +/* OO.ui.ListToolGroup */ + +.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; +} + +.oo-ui-listToolGroup .oo-ui-tool-active.oo-ui-widget-enabled { + background: #f8fbfd; + 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.MenuToolGroup */ + +.oo-ui-menuToolGroup { + border-color: rgba(0, 0, 0, 0.1); +} + +.oo-ui-menuToolGroup: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:hover { + background-color: #e1f3ff; +} + +/* OO.ui.PopupToolGroup */ + +.oo-ui-popupToolGroup-handle .oo-ui-indicatedElement-indicator, +.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; + box-shadow: 0 0.25em 1em rgba(0, 0, 0, 0.25); +} + +.oo-ui-popupToolGroup-active.oo-ui-widget-enabled { + background: #f8fbfd; + 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 */ + +.oo-ui-optionWidget-highlighted { + background-color: #e1f3ff; +} + +.oo-ui-optionWidget-selected { + background-color: #a7dcff; +} + +/* OO.ui.MenuWidget */ + +.oo-ui-menuWidget { + margin-top: -1px; + background: #fff; + 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 */ + +.oo-ui-popupWidget-popup { + background-color: #fff; + border: solid 1px #ccc; + border-radius: 0.25em; + box-shadow: 0 0.15em 0.5em 0 rgba(0, 0, 0, 0.2); +} + +.oo-ui-popupWidget-tailed .oo-ui-popupWidget-tail { + width: 15px; + height: 8px; + margin-left: -7px; + background-image: /* @embed */ url(images/tail.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; +} + +.oo-ui-popupWidget-body { + box-shadow: 0 0 0.66em rgba(0, 0, 0, 0.25); +} + +/* OO.ui.ButtonGroupWidget */ + +.oo-ui-buttonGroupWidget { + display: inline-block; + white-space: nowrap; +} + +/* OO.ui.ButtonSelectWidget */ + +.oo-ui-buttonSelectWidget { + border-radius: 0.3em; +} + +.oo-ui-buttonSelectWidget .oo-ui-buttonOptionWidget .oo-ui-buttonedElement-button { + margin-left: -1px; + border-radius: 0; +} + +.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; +} + +.oo-ui-buttonSelectWidget .oo-ui-buttonOptionWidget:last-child .oo-ui-buttonedElement-button { + border-top-right-radius: 0.3em; + border-bottom-right-radius: 0.3em; +} + +/* OO.ui.InlineMenuWidget */ + +.oo-ui-inlineMenuWidget-handle { + 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.MenuItemWidget */ + +.oo-ui-menuItemWidget.oo-ui-optionWidget-highlighted { + background-color: #e1f3ff; +} + +/* OO.ui.OutlineControlsWidget */ + +.oo-ui-outlineControlsWidget { + background-color: #fff; +} + +.oo-ui-outlineControlsWidget > .oo-ui-iconedElement-icon { + opacity: 0.2; +} + +/* OO.ui.OutlineItemWidget */ + +.oo-ui-outlineItemWidget { + font-size: 1.1em; +} + +.oo-ui-outlineItemWidget.oo-ui-optionWidget-selected { + text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5); + background-color: #a7dcff; +} + +.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, +.oo-ui-outlineItemWidget.oo-ui-flaggableElement-empty .oo-ui-indicatedElement-indicator { + opacity: 0.5; +} + +.oo-ui-outlineItemWidget.oo-ui-flaggableElement-empty .oo-ui-labeledElement-label { + color: #777; +} + +/* OO.ui.SearchWidget */ + +.oo-ui-searchWidget-query { + box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.2); +} + +/* OO.ui.TextInputWidget */ + +.oo-ui-textInputWidget input, +.oo-ui-textInputWidget textarea { + font-family: sans-serif; + font-size: 1em; + background-color: #fff; + border: solid 1px #ccc; + border-radius: 0.25em; + box-shadow: 0 0 0 white, inset 0 0.1em 0.2em #ddd; + -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; +} + +.oo-ui-textInputWidget.oo-ui-widget-enabled input:focus, +.oo-ui-textInputWidget.oo-ui-widget-enabled textarea:focus { + border-color: #a7dcff; + outline: none; + 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; +} + +/* OO.ui.ToggleSwitchWidget */ + +.oo-ui-toggleSwitchWidget { + background: #eeeeee; + 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 { + background: #eeeeee; + 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 { + background: #cde7f4; + 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/oojs-ui/oojs-ui.js b/resources/oojs-ui/oojs-ui.js index e915bdf94b..3efcdec803 100644 --- a/resources/oojs-ui/oojs-ui.js +++ b/resources/oojs-ui/oojs-ui.js @@ -1,12 +1,12 @@ /*! - * OOjs UI v0.1.0-pre (f3bc5c6) + * OOjs UI v0.1.0-pre (c57909a623) * 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: Mon Mar 03 2014 17:03:30 GMT-0800 (PST) + * Date: Tue Mar 04 2014 10:34:19 GMT-0800 (PST) */ ( function () { @@ -7378,9 +7378,10 @@ OO.ui.SearchWidget.prototype.getResults = function () { * @cfg {string} [icon] Symbolic name of icon * @cfg {boolean} [multiline=false] Allow multiple lines of text * @cfg {boolean} [autosize=false] Automatically resize to fit content + * @cfg {boolean} [maxRows=10] Maximum number of rows to make visible when autosizing */ OO.ui.TextInputWidget = function OoUiTextInputWidget( config ) { - config = config || {}; + config = $.extend( { 'maxRows': 10 }, config ); // Parent constructor OO.ui.InputWidget.call( this, config ); @@ -7389,9 +7390,11 @@ OO.ui.TextInputWidget = function OoUiTextInputWidget( config ) { this.pending = 0; this.multiline = !!config.multiline; this.autosize = !!config.autosize; + this.maxRows = config.maxRows; // Events this.$input.on( 'keypress', OO.ui.bind( this.onKeyPress, this ) ); + this.$element.on( 'DOMNodeInsertedIntoDocument', OO.ui.bind( this.onElementAttach, this ) ); // Initialization this.$element.addClass( 'oo-ui-textInputWidget' ); @@ -7439,13 +7442,35 @@ OO.ui.TextInputWidget.prototype.onKeyPress = function ( e ) { } }; +/** + * Handles element attach events. + * + * @param {jQuery.Event} e Element attach event + */ +OO.ui.TextInputWidget.prototype.onElementAttach = function () { + this.adjustSize(); +}; + /** * @inheritdoc */ OO.ui.TextInputWidget.prototype.onEdit = function () { - var $clone, scrollHeight, innerHeight, outerHeight; + this.adjustSize(); + + // Parent method + return OO.ui.InputWidget.prototype.onEdit.call( this ); +}; + +/** + * Automatically adjust the size of the text input. + * + * This only affects multi-line inputs that are auto-sized. + * + * @chainable + */ +OO.ui.TextInputWidget.prototype.adjustSize = function() { + var $clone, scrollHeight, innerHeight, outerHeight, maxInnerHeight, idealHeight; - // Automatic size adjustment if ( this.multiline && this.autosize ) { $clone = this.$input.clone() .val( this.$input.val() ) @@ -7457,17 +7482,20 @@ OO.ui.TextInputWidget.prototype.onEdit = function () { $clone.css( 'height', '' ); innerHeight = $clone.innerHeight(); outerHeight = $clone.outerHeight(); + // Measure max rows height + $clone.attr( 'rows', this.maxRows ).css( 'height', 'auto' ); + maxInnerHeight = $clone.innerHeight(); + $clone.removeAttr( 'rows' ).css( 'height', '' ); $clone.remove(); + idealHeight = Math.min( maxInnerHeight, scrollHeight ); // Only apply inline height when expansion beyond natural height is needed this.$input.css( 'height', // Use the difference between the inner and outer height as a buffer - scrollHeight > outerHeight ? scrollHeight + ( outerHeight - innerHeight ) : '' + idealHeight > outerHeight ? idealHeight + ( outerHeight - innerHeight ) : '' ); } - - // Parent method - return OO.ui.InputWidget.prototype.onEdit.call( this ); + return this; }; /** diff --git a/resources/oojs-ui/oojs-ui.svg.css b/resources/oojs-ui/oojs-ui.svg.css index 7a227206f2..f2d87372c5 100644 --- a/resources/oojs-ui/oojs-ui.svg.css +++ b/resources/oojs-ui/oojs-ui.svg.css @@ -1,12 +1,12 @@ /*! - * OOjs UI v0.1.0-pre (f3bc5c6) + * OOjs UI v0.1.0-pre (c57909a623) * 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: Mon Mar 03 2014 17:03:30 GMT-0800 (PST) + * Date: Tue Mar 04 2014 10:34:19 GMT-0800 (PST) */ /* Textures */ @@ -41,14 +41,6 @@ left: 0; padding: 1em; line-height: 1em; - background-color: #fff; - background-color: rgba(255, 255, 255, 0.5); - opacity: 0; - -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; } .oo-ui-dialog .oo-ui-window-frame { @@ -62,20 +54,6 @@ min-height: 12em; margin: auto; overflow: hidden; - background-color: #fff; - border: solid 1px #ccc; - border-radius: 0.5em; - -webkit-transform: scale(0.5); - -moz-transform: scale(0.5); - -ms-transform: scale(0.5); - -o-transform: scale(0.5); - transform: scale(0.5); - box-shadow: 0 0.2em 1em rgba(0, 0, 0, 0.3); - -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; } .oo-ui-dialog .oo-ui-window-frame-small { @@ -88,18 +66,6 @@ height: 100%; } -.oo-ui-dialog-open { - opacity: 1; -} - -.oo-ui-dialog-open .oo-ui-window-frame { - -webkit-transform: scale(1); - -moz-transform: scale(1); - -ms-transform: scale(1); - -o-transform: scale(1); - transform: scale(1); -} - .oo-ui-dialog-content .oo-ui-window-head, .oo-ui-dialog-content .oo-ui-window-body, .oo-ui-dialog-content .oo-ui-window-foot { @@ -136,7 +102,6 @@ .oo-ui-dialog-content .oo-ui-window-body { top: 3.8em; bottom: 4.8em; - box-shadow: 0 0 0.66em rgba(0, 0, 0, 0.25); } .oo-ui-dialog-content .oo-ui-window-foot { @@ -164,13 +129,84 @@ display: none; } -/* OO.ui.ButtonedElement */ +.oo-ui-frame { + padding: 0; + margin: 0; +} + +.oo-ui-frame-body { + padding: 0; + margin: 0; + background: none; +} -.oo-ui-buttonedElement .oo-ui-buttonedElement-button { +.oo-ui-frame-content { + font-family: sans-serif; + font-size: 0.8em; +} + +.oo-ui-toolbar { + clear: both; +} + +.oo-ui-toolbar-bar { + line-height: 1em; +} + +.oo-ui-toolbar-bottom .oo-ui-toolbar-bar { + position: absolute; +} + +.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; +} + +.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; +} + +.oo-ui-toolbar-shadow { + position: absolute; + width: 100%; + pointer-events: none; + background-position: left top; + background-repeat: repeat-x; +} + +.oo-ui-toolGroup { display: inline-block; - color: #333; + margin: 0.3em; vertical-align: middle; - cursor: pointer; +} + +.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; +} + +.oo-ui-window-head { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; @@ -178,16 +214,51 @@ -webkit-touch-callout: none; } -.oo-ui-buttonedElement .oo-ui-buttonedElement-button > .oo-ui-iconedElement-icon, -.oo-ui-buttonedElement .oo-ui-buttonedElement-button > .oo-ui-indicatedElement-indicator { - display: none; +.oo-ui-window-body { + padding: 0 0.75em; +} + +.oo-ui-window-icon { + float: left; + width: 2em; + height: 2em; + margin-right: 0.5em; + line-height: 2em; + background-position: right center; + background-repeat: no-repeat; +} + +.oo-ui-window-title { + float: left; + line-height: 2em; + white-space: nowrap; + cursor: default; +} + +.oo-ui-window-overlay { + position: absolute; + top: 0; + left: 0; +} + +.oo-ui-buttonedElement .oo-ui-buttonedElement-button { + 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; } .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; } @@ -203,72 +274,25 @@ vertical-align: middle; background-position: center center; background-repeat: no-repeat; - opacity: 0.8; } .oo-ui-buttonedElement-frameless { position: relative; display: inline-block; - -webkit-transition: opacity 200ms; - -moz-transition: opacity 200ms; - -ms-transition: opacity 200ms; - -o-transition: opacity 200ms; - 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 { display: inline-block; margin-left: 0.25em; - color: #333; vertical-align: middle; } -.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 { display: inline-block; padding: 0.2em 0.8em; margin: 0.1em 0; - font-size: 1em; text-align: center; - text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5); vertical-align: top; - background: #eeeeee; - 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-labeledElement-label { @@ -277,21 +301,6 @@ vertical-align: middle; } -.oo-ui-buttonedElement-framed .oo-ui-buttonedElement-button.oo-ui-buttonedElement-active, -.oo-ui-buttonedElement-framed .oo-ui-buttonedElement-button.oo-ui-buttonedElement-pressed { - color: black; - background: #eeeeee; - 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; @@ -302,192 +311,54 @@ margin-left: -0.5em; } -.oo-ui-buttonedElement-framed.oo-ui-flaggableElement-primary .oo-ui-buttonedElement-button { - background: #cde7f4; - 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 { - background: #cde7f4; - 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 { - background: #daf0be; - 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 { - background: #daf0be; - 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 { - /* Red text */ - - 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 { - color: #333; cursor: default; - background: #eee; - 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-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 { - border-color: #ccc; - box-shadow: none; } -/* OO.ui.LabeledElement */ - -.oo-ui-labeledElement-label { - display: block; -} - -/* OO.ui.ClippableElement */ - .oo-ui-clippableElement-clippable { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } -/* OO.ui.Frame */ - -.oo-ui-frame { - padding: 0; - margin: 0; +.oo-ui-bookletLayout-stackLayout.oo-ui-stackLayout-continuous .oo-ui-panelLayout-scrollable { + overflow-y: hidden; } -.oo-ui-frame-body { - padding: 0; - margin: 0; - background: none; +.oo-ui-bookletLayout-stackLayout .oo-ui-panelLayout { + width: 100%; + padding: 1.5em; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; } -.oo-ui-frame-content { - font-family: sans-serif; - font-size: 0.8em; +.oo-ui-bookletLayout-stackLayout .oo-ui-panelLayout-scrollable { + overflow-y: auto; } -/* OO.ui.GridLayout */ - -.oo-ui-gridLayout { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; +.oo-ui-bookletLayout-stackLayout .oo-ui-panelLayout-padded { + padding: 2em; } -/* OO.ui.PanelLayout */ - -.oo-ui-panelLayout { +.oo-ui-bookletLayout-outlinePanel-editable .oo-ui-outlineWidget { position: absolute; top: 0; right: 0; - bottom: 0; + bottom: 3em; left: 0; -} - -.oo-ui-panelLayout-scrollable { overflow-y: auto; } -.oo-ui-panelLayout-padded { - padding: 2em; -} - -/* OO.ui.FieldsetLayout */ - -.oo-ui-fieldsetLayout { - position: relative; - padding: 0; - margin: 0; - border: none; -} - -.oo-ui-fieldsetLayout + .oo-ui-fieldsetLayout { - margin-top: 2em; -} - -.oo-ui-fieldsetLayout-labeled { - margin-top: -0.75em; -} - -.oo-ui-fieldsetLayout > legend.oo-ui-labeledElement-label { - padding: 0.25em 0; - margin-bottom: 0.5em; - font-size: 1.5em; -} - -.oo-ui-fieldsetLayout.oo-ui-iconedElement > legend.oo-ui-labeledElement-label { - padding-left: 1.75em; -} - -.oo-ui-fieldsetLayout.oo-ui-iconedElement > .oo-ui-iconedElement-icon { +.oo-ui-bookletLayout-outlinePanel .oo-ui-outlineControlsWidget { position: absolute; - top: 0; + right: 0; + bottom: 0; left: 0; - display: block; - width: 2em; - height: 2em; - background-position: center center; - background-repeat: no-repeat; } -/* OO.ui.FieldLayout */ - .oo-ui-fieldLayout { margin-bottom: 1em; } @@ -542,175 +413,77 @@ padding: 0.5em 0; } -/* OO.ui.BookletLayout */ - -.oo-ui-bookletLayout-stackLayout.oo-ui-stackLayout-continuous .oo-ui-panelLayout-scrollable { - overflow-y: hidden; +.oo-ui-fieldsetLayout { + position: relative; + padding: 0; + margin: 0; } -.oo-ui-bookletLayout-stackLayout .oo-ui-panelLayout { - width: 100%; - padding: 1.5em; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; +.oo-ui-fieldsetLayout + .oo-ui-fieldsetLayout { + margin-top: 2em; } -.oo-ui-bookletLayout-stackLayout .oo-ui-panelLayout-scrollable { - overflow-y: auto; +.oo-ui-fieldsetLayout-labeled { + margin-top: -0.75em; } -.oo-ui-bookletLayout-stackLayout .oo-ui-panelLayout-padded { - padding: 2em; +.oo-ui-fieldsetLayout > legend.oo-ui-labeledElement-label { + padding: 0.25em 0; + margin-bottom: 0.5em; } -.oo-ui-bookletLayout-outlinePanel { - border-right: solid 1px #ddd; +.oo-ui-fieldsetLayout.oo-ui-iconedElement > legend.oo-ui-labeledElement-label { + padding-left: 1.75em; } -.oo-ui-bookletLayout-outlinePanel-editable .oo-ui-outlineWidget { +.oo-ui-fieldsetLayout.oo-ui-iconedElement > .oo-ui-iconedElement-icon { position: absolute; top: 0; - right: 0; - bottom: 3em; left: 0; - overflow-y: auto; + display: block; + width: 2em; + height: 2em; + background-position: center center; + background-repeat: no-repeat; } -.oo-ui-bookletLayout-outlinePanel .oo-ui-outlineControlsWidget { +.oo-ui-gridLayout { position: absolute; + top: 0; right: 0; bottom: 0; left: 0; - box-shadow: 0 0 0.25em rgba(0, 0, 0, 0.25); -} - -.oo-ui-stackLayout > .oo-ui-panelLayout { - display: none; -} - -.oo-ui-stackLayout-continuous > .oo-ui-panelLayout { - position: relative; - display: block; -} - -/* OO.ui.PopupTool */ - -.oo-ui-popupTool .oo-ui-popupWidget { - margin-left: 1.25em; - font-size: 0.8em; -} - -.oo-ui-popupTool .oo-ui-popupWidget-popup, -.oo-ui-popupTool .oo-ui-popupWidget-tail { - z-index: 4; -} - -/* OO.ui.Toolbar */ - -.oo-ui-toolbar { - clear: both; -} - -.oo-ui-toolbar-bar { - line-height: 1em; - background: #f8fbfd; - 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; -} - -.oo-ui-toolbar-bottom .oo-ui-toolbar-bar { - position: absolute; } -.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; -} - -.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; +.oo-ui-labelWidget { + padding: 0.5em 0; } -.oo-ui-toolbar-shadow { +.oo-ui-panelLayout { position: absolute; - bottom: -9px; - width: 100%; - height: 9px; - pointer-events: none; - background-image: /* @embed */ url(images/toolbar-shadow.png); - background-position: left top; - background-repeat: repeat-x; - 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; + top: 0; + right: 0; + bottom: 0; + left: 0; } -/* OO.ui.ToolGroup */ - -.oo-ui-toolGroup { - display: inline-block; - margin: 0.3em; - vertical-align: middle; - border: solid 1px transparent; - border-radius: 0.25em; - -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; +.oo-ui-panelLayout-scrollable { + overflow-y: auto; } -.oo-ui-toolGroup:hover { - border-color: rgba(0, 0, 0, 0.1); +.oo-ui-panelLayout-padded { + padding: 2em; } -.oo-ui-toolGroup-empty { +.oo-ui-stackLayout > .oo-ui-panelLayout { display: none; } -.oo-ui-toolGroup .oo-ui-tool-link .oo-ui-tool-title { - color: #000; -} - -.oo-ui-toolGroup .oo-ui-tool-link .oo-ui-iconedElement-icon { - background-position: center center; - background-repeat: no-repeat; +.oo-ui-stackLayout-continuous > .oo-ui-panelLayout { + position: relative; + display: block; } -/* OO.ui.BarToolGroup */ - .oo-ui-barToolGroup > .oo-ui-iconedElement-icon, .oo-ui-barToolGroup > .oo-ui-labeledElement-label { display: none; @@ -719,32 +492,7 @@ .oo-ui-barToolGroup .oo-ui-tool { position: relative; display: inline-block; - margin: -1px 0 -1px -1px; vertical-align: top; - border: solid 1px transparent; -} - -.oo-ui-barToolGroup .oo-ui-tool:first-child { - border-bottom-left-radius: 0.25em; - border-top-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.oo-ui-widget-enabled:hover { - border-color: rgba(0, 0, 0, 0.2); -} - -.oo-ui-barToolGroup .oo-ui-tool-active.oo-ui-widget-enabled { - border-color: rgba(0, 0, 0, 0.2); -} - -.oo-ui-barToolGroup .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-tool-link { @@ -758,7 +506,6 @@ display: block; width: 1.5em; height: 1.5em; - opacity: 0.8; } .oo-ui-barToolGroup .oo-ui-tool-link .oo-ui-tool-title { @@ -769,24 +516,56 @@ cursor: default; } -.oo-ui-barToolGroup .oo-ui-tool.oo-ui-widget-disabled .oo-ui-tool-link .oo-ui-iconedElement-icon { - opacity: 0.2; +.oo-ui-barToolGroup .oo-ui-tool-title, +.oo-ui-barToolGroup .oo-ui-tool-accel { + display: none; } -.oo-ui-barToolGroup .oo-ui-tool.oo-ui-widget-enabled .oo-ui-tool-link .oo-ui-iconedElement-icon { - opacity: 0.8; +.oo-ui-listToolGroup .oo-ui-toolGroup-tools { + padding: 0.25em; } -.oo-ui-barToolGroup .oo-ui-tool.oo-ui-widget-enabled:hover .oo-ui-tool-link .oo-ui-iconedElement-icon { - opacity: 1; +.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; } -.oo-ui-barToolGroup .oo-ui-tool-title, -.oo-ui-barToolGroup .oo-ui-tool-accel { - display: none; +.oo-ui-listToolGroup .oo-ui-tool-link { + display: block; + padding-right: 0.5em; + white-space: nowrap; + cursor: pointer; +} + +.oo-ui-listToolGroup .oo-ui-tool.oo-ui-widget-disabled .oo-ui-tool-link { + cursor: default; +} + +.oo-ui-menuToolGroup .oo-ui-popupToolGroup-handle { + min-width: 8em; } -/* OO.ui.PopupToolGroup */ +.oo-ui-menuToolGroup .oo-ui-tool { + display: block; +} + +.oo-ui-menuToolGroup .oo-ui-tool-link { + display: block; + padding: 0.25em 1em 0.25em 0.25em; + white-space: nowrap; + cursor: pointer; +} + +.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.png); +} .oo-ui-popupToolGroup { position: relative; @@ -811,7 +590,6 @@ height: 2em; background-position: center center; background-repeat: no-repeat; - opacity: 0.8; } .oo-ui-popupToolGroup-handle .oo-ui-indicatedElement-indicator { @@ -842,9 +620,6 @@ left: -1px; z-index: 4; display: none; - background-color: white; - border: solid 1px #ccc; - box-shadow: 0 0.25em 1em rgba(0, 0, 0, 0.25); } .oo-ui-popupToolGroup .oo-ui-toolGroup-tools .oo-ui-iconedElement-icon { @@ -852,11 +627,6 @@ background-repeat: no-repeat; } -.oo-ui-popupToolGroup-active.oo-ui-widget-enabled { - border-bottom-right-radius: 0; - border-bottom-left-radius: 0; -} - .oo-ui-popupToolGroup-active.oo-ui-widget-enabled > .oo-ui-toolGroup-tools { display: block; } @@ -880,180 +650,22 @@ display: none; } -/* OO.ui.ListToolGroup */ - -.oo-ui-listToolGroup.oo-ui-popupToolGroup-active { - border-color: rgba(0, 0, 0, 0.2); -} - -.oo-ui-listToolGroup .oo-ui-toolGroup-tools { - padding: 0.25em; -} - -.oo-ui-listToolGroup .oo-ui-tool { - display: inline-block; - width: 100%; - margin: -1px 0; - border: solid 1px transparent; - -webkit-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; -} - -.oo-ui-listToolGroup .oo-ui-tool-active.oo-ui-widget-enabled { - border-color: rgba(0, 0, 0, 0.1); -} - -.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 { - cursor: default; -} - -.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.MenuToolGroup */ - -.oo-ui-menuToolGroup { - border-color: rgba(0, 0, 0, 0.1); -} - -.oo-ui-menuToolGroup: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-popupToolGroup-handle { - min-width: 8em; -} - -.oo-ui-menuToolGroup .oo-ui-tool { - display: block; -} - -.oo-ui-menuToolGroup .oo-ui-tool-link { - display: block; - padding: 0.25em 1em 0.25em 0.25em; - white-space: nowrap; - cursor: pointer; -} - -.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.png); -} - -.oo-ui-menuToolGroup .oo-ui-tool:hover { - background-color: #e1f3ff; -} - -/* Common */ - -.oo-ui-barToolGroup .oo-ui-tool-active.oo-ui-widget-enabled, -.oo-ui-listToolGroup .oo-ui-tool-active.oo-ui-widget-enabled, -.oo-ui-popupToolGroup-active.oo-ui-widget-enabled { - background: #f8fbfd; - 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%); - 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.ButtonWidget */ - -.oo-ui-buttonWidget { - display: inline-block; - vertical-align: middle; -} - -/* OO.ui.PopupButtonWidget */ - -.oo-ui-popupButtonWidget { - position: relative; -} - -.oo-ui-popupButtonWidget .oo-ui-popupWidget { - position: absolute; - left: 1em; - cursor: auto; -} - -/* OO.ui.ButtonGroupWidget */ - -.oo-ui-buttonGroupWidget { - display: inline-block; - white-space: nowrap; - border-radius: 0.3em; -} - -.oo-ui-buttonGroupWidget .oo-ui-buttonedElement-framed .oo-ui-buttonedElement-button { - 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; +.oo-ui-popupTool .oo-ui-popupWidget { + margin-left: 1.25em; + font-size: 0.8em; } -.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; +.oo-ui-popupTool .oo-ui-popupWidget-popup, +.oo-ui-popupTool .oo-ui-popupWidget-tail { + z-index: 4; } -/* OO.ui.SelectWidget */ - .oo-ui-selectWidget { padding: 0; margin: 0; list-style: none; } -/* OO.ui.OptionWidget */ - .oo-ui-optionWidget { position: relative; display: block; @@ -1064,14 +676,6 @@ border: none; } -.oo-ui-optionWidget-highlighted { - background-color: #e1f3ff; -} - -.oo-ui-optionWidget-selected { - background-color: #a7dcff; -} - .oo-ui-optionWidget.oo-ui-widget-disabled { cursor: default; } @@ -1102,216 +706,107 @@ right: 0.5em; } -/* OO.ui.OutlineItemWidget */ - -.oo-ui-outlineItemWidget { - position: relative; - padding: 0.75em; - font-size: 1.1em; - cursor: pointer; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - -webkit-touch-callout: none; -} - -.oo-ui-outlineItemWidget.oo-ui-optionWidget-selected { - text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5); - background-color: #a7dcff; -} - -.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, -.oo-ui-outlineItemWidget.oo-ui-flaggableElement-empty .oo-ui-indicatedElement-indicator { - opacity: 0.5; -} - -.oo-ui-outlineItemWidget.oo-ui-flaggableElement-empty .oo-ui-labeledElement-label { - color: #777; -} - -.oo-ui-outlineItemWidget.oo-ui-indicatedElement .oo-ui-labeledElement-label { - padding-right: 1.5em; -} - -.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-menuWidget { + position: absolute; } -.oo-ui-outlineItemWidget-level-2 { - padding-left: 6.5em; +.oo-ui-menuWidget input { + position: absolute; + width: 0; + height: 0; + overflow: hidden; + opacity: 0; } -.oo-ui-outlineItemWidget-level-2 .oo-ui-iconedElement-icon { - left: 4em; +.oo-ui-popupWidget-popup { + position: absolute; + overflow: hidden; } -/* OO.ui.OutlineControlsWidget */ - -.oo-ui-outlineControlsWidget { - height: 3em; - background-color: #fff; +.oo-ui-popupWidget-tail { + display: none; } -.oo-ui-outlineControlsWidget-adders, -.oo-ui-outlineControlsWidget-movers { - float: left; - height: 2em; - padding: 0; - margin: 0.5em; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; +.oo-ui-popupWidget-tailed .oo-ui-popupWidget-popup { + margin-top: 7px; } -.oo-ui-outlineControlsWidget > .oo-ui-iconedElement-icon { - float: left; - width: 1.5em; - height: 2em; - margin: 0.5em 0 0.5em 0.5em; - background-position: right center; +.oo-ui-popupWidget-tailed .oo-ui-popupWidget-tail { + position: absolute; + display: block; background-repeat: no-repeat; - opacity: 0.2; -} - -.oo-ui-outlineControlsWidget-adders { - float: left; - margin-left: 0; -} - -.oo-ui-outlineControlsWidget-adders .oo-ui-buttonWidget { - float: left; -} - -.oo-ui-outlineControlsWidget-movers { - float: right; -} - -.oo-ui-outlineControlsWidget-movers .oo-ui-buttonWidget { - float: right; -} - -/* OO.ui.LabelWidget */ - -.oo-ui-labelWidget { - padding: 0.5em 0; } -/* OO.ui.TextInputWidget */ - -.oo-ui-textInputWidget { - position: relative; - width: 20em; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; +.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; } - -.oo-ui-textInputWidget input, -.oo-ui-textInputWidget textarea { - display: inline-block; - width: 100%; - padding: 0.5em; - font-family: sans-serif; - font-size: 1em; - background-color: #fff; - border: solid 1px #ccc; - border-radius: 0.25em; - box-shadow: 0 0 0 white, inset 0 0.1em 0.2em #ddd; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - -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; - resize: none; + +.oo-ui-popupWidget-head .oo-ui-buttonWidget { + float: right; + margin: 0.25em; } -.oo-ui-textInputWidget.oo-ui-widget-enabled input:focus, -.oo-ui-textInputWidget.oo-ui-widget-enabled textarea:focus { - border-color: #a7dcff; - outline: none; - box-shadow: 0 0 0.3em #a7dcff, 0 0 0 white; +.oo-ui-popupWidget-head .oo-ui-labeledElement-label { + float: left; + margin: 0.75em 1em; + cursor: default; } -.oo-ui-textInputWidget input[readonly], -.oo-ui-textInputWidget textarea[readonly] { - color: #777; - text-shadow: 0 1px 1px #fff; +.oo-ui-buttonGroupWidget { + border-radius: 0.3em; } -.oo-ui-textInputWidget-pending input, -.oo-ui-textInputWidget-pending textarea { - background-color: transparent; +.oo-ui-buttonGroupWidget .oo-ui-buttonedElement-framed .oo-ui-buttonedElement-button { + margin-bottom: -1px; + margin-left: -1px; + border-radius: 0; } -.oo-ui-textInputWidget-decorated input, -.oo-ui-textInputWidget-decorated textarea { - padding-left: 2em; +.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; } -.oo-ui-textInputWidget-icon { - position: absolute; - top: 0; - left: 0; - width: 2em; - height: 100%; - background-position: right center; - background-repeat: no-repeat; +.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; } -.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; +.oo-ui-buttonOptionWidget { + display: inline-block; + padding: 0; + background-color: transparent; } -/* OO.ui.MenuWidget */ +.oo-ui-buttonOptionWidget .oo-ui-buttonedElement-button { + position: relative; + height: 1.9em; +} -.oo-ui-menuWidget { - position: absolute; - margin-top: -1px; - background: #fff; - 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-buttonOptionWidget.oo-ui-iconedElement .oo-ui-iconedElement-icon, +.oo-ui-buttonOptionWidget.oo-ui-indicatedElement .oo-ui-indicatedElement-indicator { + position: static; + display: inline-block; + height: 1.9em; + margin-top: 0; + vertical-align: middle; } -.oo-ui-menuWidget input { - position: absolute; - width: 0; - height: 0; - overflow: hidden; - opacity: 0; +.oo-ui-buttonSelectWidget { + display: inline-block; + white-space: nowrap; } -/* OO.ui.InlineMenuWidget */ +.oo-ui-buttonWidget { + display: inline-block; + vertical-align: middle; +} .oo-ui-inlineMenuWidget { position: relative; @@ -1325,8 +820,6 @@ width: 100%; height: 2.5em; cursor: pointer; - border: solid 1px rgba(0, 0, 0, 0.1); - border-radius: 0.25em; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; @@ -1337,10 +830,6 @@ -webkit-touch-callout: none; } -.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 { position: absolute; @@ -1349,7 +838,6 @@ height: 2.5em; background-position: center center; background-repeat: no-repeat; - opacity: 0.8; } .oo-ui-inlineMenuWidget-handle .oo-ui-indicatedElement-indicator { @@ -1377,8 +865,6 @@ width: 100%; } -/* OO.ui.MenuItemWidget */ - .oo-ui-menuItemWidget { position: relative; } @@ -1395,127 +881,96 @@ display: block; } -.oo-ui-menuItemWidget.oo-ui-optionWidget-highlighted { - background-color: #e1f3ff; -} - -/* OO.ui.MenuSectionItemWidget */ - -.oo-ui-menuSectionItemWidget { - padding: 0.33em 0.75em; - color: #888; - cursor: default; +.oo-ui-outlineControlsWidget { + height: 3em; } -/* OO.ui.ButtonSelectWidget */ - -.oo-ui-buttonSelectWidget { - display: inline-block; - white-space: nowrap; - border-radius: 0.3em; +.oo-ui-outlineControlsWidget-adders, +.oo-ui-outlineControlsWidget-movers { + float: left; + height: 2em; + padding: 0; + margin: 0.5em; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; } -.oo-ui-buttonSelectWidget .oo-ui-buttonOptionWidget .oo-ui-buttonedElement-button { - margin-left: -1px; - border-radius: 0; +.oo-ui-outlineControlsWidget > .oo-ui-iconedElement-icon { + float: left; + width: 1.5em; + height: 2em; + margin: 0.5em 0 0.5em 0.5em; + background-position: right center; + background-repeat: no-repeat; } -.oo-ui-buttonSelectWidget .oo-ui-buttonOptionWidget:first-child .oo-ui-buttonedElement-button { +.oo-ui-outlineControlsWidget-adders { + float: left; margin-left: 0; - border-bottom-left-radius: 0.3em; - border-top-left-radius: 0.3em; } -.oo-ui-buttonSelectWidget .oo-ui-buttonOptionWidget:last-child .oo-ui-buttonedElement-button { - border-top-right-radius: 0.3em; - border-bottom-right-radius: 0.3em; +.oo-ui-outlineControlsWidget-adders .oo-ui-buttonWidget { + float: left; } -/* OO.ui.ButtonOptionWidget */ - -.oo-ui-buttonOptionWidget { - display: inline-block; - padding: 0; - background-color: transparent; +.oo-ui-outlineControlsWidget-movers { + float: right; } -.oo-ui-buttonOptionWidget .oo-ui-buttonedElement-button { - position: relative; - height: 1.9em; +.oo-ui-outlineControlsWidget-movers .oo-ui-buttonWidget { + float: right; } -.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; - height: 1.9em; - margin-top: 0; - vertical-align: middle; +.oo-ui-outlineItemWidget { + 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; } -/* OO.ui.PopupWidget */ - -.oo-ui-popupWidget-popup { - position: absolute; - overflow: hidden; - background-color: #fff; - border: solid 1px #ccc; - border-radius: 0.25em; - box-shadow: 0 0.15em 0.5em 0 rgba(0, 0, 0, 0.2); +.oo-ui-outlineItemWidget.oo-ui-indicatedElement .oo-ui-labeledElement-label { + padding-right: 1.5em; } -.oo-ui-popupWidget-tail { - display: none; +.oo-ui-outlineItemWidget-level-0 { + padding-left: 3.5em; } -.oo-ui-popupWidget-tailed .oo-ui-popupWidget-popup { - margin-top: 7px; +.oo-ui-outlineItemWidget-level-0 .oo-ui-iconedElement-icon { + left: 1em; } -.oo-ui-popupWidget-tailed .oo-ui-popupWidget-tail { - position: absolute; - display: block; - width: 15px; - height: 8px; - margin-left: -7px; - background-image: /* @embed */ url(images/tail.svg); - background-repeat: no-repeat; +.oo-ui-outlineItemWidget-level-1 { + padding-left: 5em; } -.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; +.oo-ui-outlineItemWidget-level-1 .oo-ui-iconedElement-icon { + left: 2.5em; } -.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; +.oo-ui-outlineItemWidget-level-2 { + padding-left: 6.5em; } -.oo-ui-popupWidget-head .oo-ui-buttonWidget { - float: right; - margin: 0.25em; +.oo-ui-outlineItemWidget-level-2 .oo-ui-iconedElement-icon { + left: 4em; } -.oo-ui-popupWidget-head .oo-ui-labeledElement-label { - float: left; - margin: 0.75em 1em; - cursor: default; +.oo-ui-popupButtonWidget { + position: relative; } -.oo-ui-popupWidget-body { - box-shadow: 0 0 0.66em rgba(0, 0, 0, 0.25); +.oo-ui-popupButtonWidget .oo-ui-popupWidget { + position: absolute; + left: 1em; + cursor: auto; } -/* OO.ui.SearchWidget */ - .oo-ui-searchWidget-query { position: absolute; top: 0; @@ -1523,7 +978,6 @@ left: 0; height: 4em; padding: 0 1em; - box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.2); } .oo-ui-searchWidget-query .oo-ui-textInputWidget { @@ -1543,7 +997,39 @@ line-height: 0; } -/* OO.ui.ToggleSwitchWidget */ +.oo-ui-textInputWidget { + position: relative; + width: 20em; + -webkit-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%; + padding: 0.5em; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + resize: none; +} + +.oo-ui-textInputWidget-decorated input, +.oo-ui-textInputWidget-decorated textarea { + padding-left: 2em; +} + +.oo-ui-textInputWidget-icon { + position: absolute; + top: 0; + left: 0; + width: 2em; + height: 100%; + background-position: right center; + background-repeat: no-repeat; +} .oo-ui-toggleSwitchWidget { position: relative; @@ -1553,22 +1039,11 @@ overflow: hidden; vertical-align: middle; cursor: pointer; - background: #eeeeee; - 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'); -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); - box-shadow: 0 0 0 white, inset 0 0.1em 0.2em #ddd; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; @@ -1576,7 +1051,6 @@ .oo-ui-toggleSwitchWidget.oo-ui-widget-disabled { cursor: default; - opacity: 0.5; } .oo-ui-toggleSwitchWidget-grip { @@ -1586,17 +1060,6 @@ display: block; width: 1.5em; height: 1.5em; - background: #eeeeee; - 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); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; @@ -1607,27 +1070,12 @@ transition: left 200ms ease-in-out, margin-left 200ms ease-in-out; } -.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 { position: absolute; top: 0; right: 0; bottom: 0; left: 0; - background: #cde7f4; - 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); -webkit-transition: opacity 200ms ease-in-out; -moz-transition: opacity 200ms ease-in-out; -ms-transition: opacity 200ms ease-in-out; @@ -1645,58 +1093,13 @@ margin-left: -2px; } -.oo-ui-toggleWidget-on .oo-ui-toggleSwitchWidget-glow { - opacity: 1; -} - .oo-ui-toggleWidget-off .oo-ui-toggleSwitchWidget-grip { left: 0.25em; margin-left: 0; } .oo-ui-toggleWidget-off .oo-ui-toggleSwitchWidget-glow { - opacity: 0; -} - -/* OO.ui.Window */ - -.oo-ui-window-head { - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - -webkit-touch-callout: none; -} - -.oo-ui-window-body { - padding: 0 0.75em; -} - -.oo-ui-window-icon { - float: left; - width: 2em; - height: 2em; - margin-right: 0.5em; - line-height: 2em; - background-position: right center; - background-repeat: no-repeat; -} - -.oo-ui-window-title { - float: left; - line-height: 2em; - color: #333; - white-space: nowrap; - cursor: default; -} - -.oo-ui-window-overlay { - position: absolute; - top: 0; - left: 0; - font-family: sans-serif; - font-size: 1em; - line-height: 1.5em; + display: none; } /* Icons */ @@ -1805,4 +1208,4 @@ .oo-ui-indicator-up { background-image: /* @embed */ url(images/indicators/up.svg); -} +} \ No newline at end of file diff --git a/resources/oojs-ui/update-oojs-ui.sh b/resources/oojs-ui/update-oojs-ui.sh index 66536bbaf1..a42ba0e1bb 100755 --- a/resources/oojs-ui/update-oojs-ui.sh +++ b/resources/oojs-ui/update-oojs-ui.sh @@ -72,7 +72,7 @@ NEWCHANGESDISPLAY=$(git log $OLDVERSION.. --oneline --no-merges --reverse --colo cd - # Copy files from dist/ to resources/oojs-ui -cp -a $1/dist/{oojs-ui.js,oojs-ui.svg.css,images,i18n} resources/oojs-ui/ +cp -a $1/dist/{oojs-ui.js,oojs-ui.svg.css,oojs-ui-apex.css,images,i18n} resources/oojs-ui/ # Figure out what the new version is NEWVERSION=$(oojsuiversion) # Generate commit summary -- 2.20.1