From cad99fd2a25baa30df379d12dae6a4e90b6cb2a4 Mon Sep 17 00:00:00 2001 From: "James D. Forrester" Date: Fri, 28 Feb 2014 16:33:29 -0800 Subject: [PATCH] Update OOjs UI to v0.1.0-pre (51f922ba17) New changes: 1ba6137 Make fieldsets and stack panels more compact 584ed14 Convert styles to LESS and implement grunt task ad906c5 Add documentation for -1 tabIndex option, which disables tab indexing 3f962db Manage active state of BookletLayout pages 5f3ee83 Disable vertical scrolling in continuous layout mode 96ae071 Make text inputs gray when disabled 51f922b Refactor OutlineControlsWidget, add remove button Note that 51f922b requires the addition of another message to resources/Resources.php (eww): ooui-outline-control-remove. Change-Id: If55f8a78f410f35e38f40a9884d7057c50a4610f --- resources/Resources.php | 1 + resources/oojs-ui/i18n/en.json | 1 + resources/oojs-ui/i18n/qqq.json | 1 + resources/oojs-ui/oojs-ui.js | 233 +++- resources/oojs-ui/oojs-ui.svg.css | 2055 ++++++++++++++--------------- 5 files changed, 1175 insertions(+), 1116 deletions(-) diff --git a/resources/Resources.php b/resources/Resources.php index 52b9aa084d..7c13ea667a 100644 --- a/resources/Resources.php +++ b/resources/Resources.php @@ -1373,6 +1373,7 @@ return array( 'ooui-dialog-action-close', 'ooui-outline-control-move-down', 'ooui-outline-control-move-up', + 'ooui-outline-control-remove', 'ooui-toolbar-more', ), 'dependencies' => array( diff --git a/resources/oojs-ui/i18n/en.json b/resources/oojs-ui/i18n/en.json index d402de8709..5ff991546d 100644 --- a/resources/oojs-ui/i18n/en.json +++ b/resources/oojs-ui/i18n/en.json @@ -19,5 +19,6 @@ "ooui-dialog-action-close": "Close", "ooui-outline-control-move-down": "Move item down", "ooui-outline-control-move-up": "Move item up", + "ooui-outline-control-remove": "Remove item", "ooui-toolbar-more": "More" } diff --git a/resources/oojs-ui/i18n/qqq.json b/resources/oojs-ui/i18n/qqq.json index 78a70d9d12..c5b8ffa140 100644 --- a/resources/oojs-ui/i18n/qqq.json +++ b/resources/oojs-ui/i18n/qqq.json @@ -22,5 +22,6 @@ "ooui-dialog-action-close": "Label text for button to exit from dialog.\n\n{{Identical|Close}}", "ooui-outline-control-move-down": "Tool tip for a button that moves items in a list down one place", "ooui-outline-control-move-up": "Tool tip for a button that moves items in a list up one place", + "ooui-outline-control-remove": "Tool tip for a button that removes items from a list", "ooui-toolbar-more": "Label for the toolbar group that contains a list of all other available tools.\n{{Identical|More}}" } \ No newline at end of file diff --git a/resources/oojs-ui/oojs-ui.js b/resources/oojs-ui/oojs-ui.js index dcffbbde09..08fe6aecf7 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 (064484f9af) + * OOjs UI v0.1.0-pre (51f922ba17) * 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: Wed Feb 26 2014 12:12:11 GMT-0800 (PST) + * Date: Fri Feb 28 2014 16:33:26 GMT-0800 (PST) */ ( function () { @@ -87,6 +87,8 @@ var messages = { 'ooui-outline-control-move-down': 'Move item down', // Tool tip for a button that moves items in a list up one place 'ooui-outline-control-move-up': 'Move item up', + // Tool tip for a button that removes items from a list + 'ooui-outline-control-remove': 'Remove item', // Label for the toolbar group that contains a list of all other available tools 'ooui-toolbar-more': 'More' }; @@ -1774,6 +1776,7 @@ OO.ui.Widget.prototype.setDisabled = function ( disabled ) { isDisabled = this.isDisabled(); if ( isDisabled !== this.wasDisabled ) { this.$element.toggleClass( 'oo-ui-widget-disabled', isDisabled ); + this.$element.toggleClass( 'oo-ui-widget-enabled', !isDisabled ); this.emit( 'disable', isDisabled ); } this.wasDisabled = isDisabled; @@ -1789,7 +1792,7 @@ OO.ui.Widget.prototype.setDisabled = function ( disabled ) { * @param {jQuery} $button Button node, assigned to #$button * @param {Object} [config] Configuration options * @cfg {boolean} [frameless] Render button without a frame - * @cfg {number} [tabIndex] Button's tab index + * @cfg {number} [tabIndex=0] Button's tab index, use -1 to prevent tab focusing */ OO.ui.ButtonedElement = function OoUiButtonedElement( $button, config ) { // Configuration initialization @@ -1828,7 +1831,9 @@ OO.ui.ButtonedElement = function OoUiButtonedElement( $button, config ) { OO.ui.ButtonedElement.prototype.onMouseDown = function () { this.tabIndex = this.$button.attr( 'tabIndex' ); // Remove the tab-index while the button is down to prevent the button from stealing focus - this.$button.removeAttr( 'tabIndex' ); + this.$button + .removeAttr( 'tabIndex' ) + .addClass( 'oo-ui-buttonedElement-pressed' ); this.getElementDocument().addEventListener( 'mouseup', this.onMouseUpHandler, true ); }; @@ -1840,7 +1845,9 @@ OO.ui.ButtonedElement.prototype.onMouseDown = function () { */ OO.ui.ButtonedElement.prototype.onMouseUp = function () { // Restore the tab-index after the button is up to restore the button's accesssibility - this.$button.attr( 'tabIndex', this.tabIndex ); + this.$button + .attr( 'tabIndex', this.tabIndex ) + .removeClass( 'oo-ui-buttonedElement-pressed' ); this.getElementDocument().removeEventListener( 'mouseup', this.onMouseUpHandler, true ); }; @@ -1852,7 +1859,7 @@ OO.ui.ButtonedElement.prototype.onMouseUp = function () { * @chainable */ OO.ui.ButtonedElement.prototype.setActive = function ( value ) { - this.$element.toggleClass( 'oo-ui-buttonedElement-active', !!value ); + this.$button.toggleClass( 'oo-ui-buttonedElement-active', !!value ); return this; }; /** @@ -3857,9 +3864,9 @@ OO.ui.BookletLayout = function OoUiBookletLayout( config ) { this.stackLayout.connect( this, { 'set': 'onStackLayoutSet' } ); if ( this.outlined ) { this.outlineWidget.connect( this, { 'select': 'onOutlineWidgetSelect' } ); - // Event 'focus' does not bubble, but 'focusin' does - this.stackLayout.onDOMEvent( 'focusin', OO.ui.bind( this.onStackLayoutFocus, this ) ); } + // Event 'focus' does not bubble, but 'focusin' does + this.stackLayout.onDOMEvent( 'focusin', OO.ui.bind( this.onStackLayoutFocus, this ) ); // Initialization this.$element.addClass( 'oo-ui-bookletLayout' ); @@ -3934,6 +3941,7 @@ OO.ui.BookletLayout.prototype.onStackLayoutFocus = function ( e ) { */ OO.ui.BookletLayout.prototype.onStackLayoutSet = function ( page ) { if ( page ) { + this.stackLayout.$element.find( ':focus' ).blur(); page.scrollElementIntoView( { 'complete': OO.ui.bind( function () { this.ignoreFocus = true; if ( this.autoFocus ) { @@ -3976,6 +3984,41 @@ OO.ui.BookletLayout.prototype.isEditable = function () { return this.editable; }; +/** + * Get the outline widget. + * + * @method + * @param {OO.ui.PageLayout} page Page to be selected + * @returns {OO.ui.PageLayout|null} Closest page to another + */ +OO.ui.BookletLayout.prototype.getClosestPage = function ( page ) { + var next, prev, level, + pages = this.stackLayout.getItems(), + index = $.inArray( page, pages ); + + if ( index !== -1 ) { + next = pages[index + 1]; + prev = pages[index - 1]; + // Prefer adjacent pages at the same level + if ( this.outlined ) { + level = this.outlineWidget.getItemFromData( page.getName() ).getLevel(); + if ( + prev && + level === this.outlineWidget.getItemFromData( prev.getName() ).getLevel() + ) { + return prev; + } + if ( + next && + level === this.outlineWidget.getItemFromData( next.getName() ).getLevel() + ) { + return next; + } + } + } + return prev || next || null; +}; + /** * Get the outline widget. * @@ -4030,17 +4073,33 @@ OO.ui.BookletLayout.prototype.getPageName = function () { * @chainable */ OO.ui.BookletLayout.prototype.addPages = function ( pages, index ) { - var i, len, name, page, item, - items = [], - remove = []; + var i, len, name, page, item, currentIndex, + stackLayoutPages = this.stackLayout.getItems(), + remove = [], + items = []; + // Remove pages with same names for ( i = 0, len = pages.length; i < len; i++ ) { page = pages[i]; name = page.getName(); - if ( name in this.pages ) { - // Remove page with same name + + if ( Object.prototype.hasOwnProperty.call( this.pages, name ) ) { + // Correct the insertion index + currentIndex = $.inArray( this.pages[name], stackLayoutPages ); + if ( currentIndex !== -1 && currentIndex + 1 < index ) { + index--; + } remove.push( this.pages[name] ); } + } + if ( remove.length ) { + this.removePages( remove ); + } + + // Add new pages + for ( i = 0, len = pages.length; i < len; i++ ) { + page = pages[i]; + name = page.getName(); this.pages[page.getName()] = page; if ( this.outlined ) { item = new OO.ui.OutlineItemWidget( name, page, { '$': this.$ } ); @@ -4048,9 +4107,6 @@ OO.ui.BookletLayout.prototype.addPages = function ( pages, index ) { items.push( item ); } } - if ( remove.length ) { - this.removePages( remove ); - } if ( this.outlined && items.length ) { this.outlineWidget.addItems( items, index ); @@ -4137,8 +4193,12 @@ OO.ui.BookletLayout.prototype.setPage = function ( name ) { } if ( page ) { + if ( this.currentPageName && this.pages[this.currentPageName] ) { + this.pages[this.currentPageName].setActive( false ); + } this.currentPageName = name; this.stackLayout.setItem( page ); + page.setActive( true ); this.emit( 'set', page ); } }; @@ -4213,6 +4273,7 @@ OO.ui.PageLayout = function OoUiPageLayout( name, config ) { // Properties this.name = name; this.outlineItem = config.outlineItem || null; + this.active = false; // Initialization this.$element.addClass( 'oo-ui-pageLayout' ); @@ -4222,6 +4283,13 @@ OO.ui.PageLayout = function OoUiPageLayout( name, config ) { OO.inheritClass( OO.ui.PageLayout, OO.ui.PanelLayout ); +/* Events */ + +/** + * @event active + * @param {boolean} active Page is active + */ + /* Methods */ /** @@ -4233,6 +4301,15 @@ OO.ui.PageLayout.prototype.getName = function () { return this.name; }; +/** + * Check if page is active. + * + * @returns {boolean} Page is active + */ +OO.ui.PageLayout.prototype.isActive = function () { + return this.active; +}; + /** * Get outline item. * @@ -4252,6 +4329,22 @@ OO.ui.PageLayout.prototype.setOutlineItem = function ( outlineItem ) { this.outlineItem = outlineItem; return this; }; + +/** + * Set page active state. + * + * @param {boolean} Page is active + * @fires active + */ +OO.ui.PageLayout.prototype.setActive = function ( active ) { + active = !!active; + + if ( active !== this.active ) { + this.active = active; + this.$element.toggleClass( 'oo-ui-pageLayout-active', active ); + this.emit( 'active', this.active ); + } +}; /** * Layout containing a series of mutually exclusive pages. * @@ -5476,8 +5569,6 @@ OO.ui.LookupInputWidget.prototype.getLookupMenuItemsFromData = function () { * @constructor * @param {Mixed} data Option data * @param {Object} [config] Configuration options - * @cfg {boolean} [selected=false] Select option - * @cfg {boolean} [highlighted=false] Highlight option * @cfg {string} [rel] Value for `rel` attribute in DOM, allowing per-option styling */ OO.ui.OptionWidget = function OoUiOptionWidget( data, config ) { @@ -5505,10 +5596,6 @@ OO.ui.OptionWidget = function OoUiOptionWidget( data, config ) { .attr( 'rel', config.rel ) .addClass( 'oo-ui-optionWidget' ) .append( this.$label ); - this.setSelected( config.selected ); - this.setHighlighted( config.highlighted ); - - // Options this.$element .prepend( this.$icon ) .append( this.$indicator ); @@ -6512,26 +6599,21 @@ OO.inheritClass( OO.ui.OutlineWidget, OO.ui.SelectWidget ); * @constructor * @param {OO.ui.OutlineWidget} outline Outline to control * @param {Object} [config] Configuration options - * @cfg {Object[]} [adders] List of icons to show as addable item types, each an object with - * name, title and icon properties */ OO.ui.OutlineControlsWidget = function OoUiOutlineControlsWidget( outline, config ) { // Configuration initialization - config = config || {}; + config = $.extend( { 'icon': 'add-item' }, config ); // Parent constructor OO.ui.Widget.call( this, config ); + // Mixin constructors + OO.ui.GroupElement.call( this, this.$( '
' ), config ); + OO.ui.IconedElement.call( this, this.$( '
' ), config ); + // Properties this.outline = outline; - this.adders = {}; - this.$adders = this.$( '
' ); this.$movers = this.$( '
' ); - this.addButton = new OO.ui.ButtonWidget( { - '$': this.$, - 'frameless': true, - 'icon': 'add-item' - } ); this.upButton = new OO.ui.ButtonWidget( { '$': this.$, 'frameless': true, @@ -6544,6 +6626,12 @@ OO.ui.OutlineControlsWidget = function OoUiOutlineControlsWidget( outline, confi 'icon': 'expand', 'title': OO.ui.msg( 'ooui-outline-control-move-down' ) } ); + this.removeButton = new OO.ui.ButtonWidget( { + '$': this.$, + 'frameless': true, + 'icon': 'remove', + 'title': OO.ui.msg( 'ooui-outline-control-remove' ) + } ); // Events outline.connect( this, { @@ -6553,23 +6641,24 @@ OO.ui.OutlineControlsWidget = function OoUiOutlineControlsWidget( outline, confi } ); this.upButton.connect( this, { 'click': ['emit', 'move', -1] } ); this.downButton.connect( this, { 'click': ['emit', 'move', 1] } ); + this.removeButton.connect( this, { 'click': ['emit', 'remove'] } ); // Initialization this.$element.addClass( 'oo-ui-outlineControlsWidget' ); - this.$adders.addClass( 'oo-ui-outlineControlsWidget-adders' ); + this.$group.addClass( 'oo-ui-outlineControlsWidget-adders' ); this.$movers .addClass( 'oo-ui-outlineControlsWidget-movers' ) - .append( this.upButton.$element, this.downButton.$element ); - this.$element.append( this.$adders, this.$movers ); - if ( config.adders && config.adders.length ) { - this.setupAdders( config.adders ); - } + .append( this.removeButton.$element, this.upButton.$element, this.downButton.$element ); + this.$element.append( this.$icon, this.$group, this.$movers ); }; /* Inheritance */ OO.inheritClass( OO.ui.OutlineControlsWidget, OO.ui.Widget ); +OO.mixinClass( OO.ui.OutlineControlsWidget, OO.ui.GroupElement ); +OO.mixinClass( OO.ui.OutlineControlsWidget, OO.ui.IconedElement ); + /* Events */ /** @@ -6577,6 +6666,10 @@ OO.inheritClass( OO.ui.OutlineControlsWidget, OO.ui.Widget ); * @param {number} places Number of places to move */ +/** + * @event remove + */ + /* Methods */ /** @@ -6586,12 +6679,12 @@ OO.inheritClass( OO.ui.OutlineControlsWidget, OO.ui.Widget ); */ OO.ui.OutlineControlsWidget.prototype.onOutlineChange = function () { var i, len, firstMovable, lastMovable, - movable = false, items = this.outline.getItems(), - selectedItem = this.outline.getSelectedItem(); + selectedItem = this.outline.getSelectedItem(), + movable = selectedItem && selectedItem.isMovable(), + removable = selectedItem && selectedItem.isRemovable(); - if ( selectedItem && selectedItem.isMovable() ) { - movable = true; + if ( movable ) { i = -1; len = items.length; while ( ++i < len ) { @@ -6610,30 +6703,7 @@ OO.ui.OutlineControlsWidget.prototype.onOutlineChange = function () { } this.upButton.setDisabled( !movable || selectedItem === firstMovable ); this.downButton.setDisabled( !movable || selectedItem === lastMovable ); -}; - -/** - * Setup adders icons. - * - * @method - * @param {Object[]} adders List of configuations for adder buttons, each containing a name, title - * and icon property - */ -OO.ui.OutlineControlsWidget.prototype.setupAdders = function ( adders ) { - var i, len, addition, button, - $buttons = this.$( [] ); - - this.$adders.append( this.addButton.$element ); - for ( i = 0, len = adders.length; i < len; i++ ) { - addition = adders[i]; - button = new OO.ui.ButtonWidget( { - '$': this.$, 'frameless': true, 'icon': addition.icon, 'title': addition.title - } ); - button.connect( this, { 'click': ['emit', 'add', addition.name] } ); - this.adders[addition.name] = button; - this.$adders.append( button.$element ); - $buttons = $buttons.add( button.$element ); - } + this.removeButton.setDisabled( !removable ); }; /** * Creates an OO.ui.OutlineItemWidget object. @@ -6657,6 +6727,7 @@ OO.ui.OutlineItemWidget = function OoUiOutlineItemWidget( data, config ) { // Properties this.level = 0; this.movable = !!config.movable; + this.removable = !!config.removable; // Initialization this.$element.addClass( 'oo-ui-outlineItemWidget' ); @@ -6690,6 +6761,17 @@ OO.ui.OutlineItemWidget.prototype.isMovable = function () { return this.movable; }; +/** + * Check if item is removable. + * + * Removablilty is used by outline controls. + * + * @returns {boolean} Item is removable + */ +OO.ui.OutlineItemWidget.prototype.isRemovable = function () { + return this.removable; +}; + /** * Get indentation level. * @@ -6712,6 +6794,19 @@ OO.ui.OutlineItemWidget.prototype.setMovable = function ( movable ) { return this; }; +/** + * Set removability. + * + * Removablilty is used by outline controls. + * + * @param {boolean} movable Item is removable + * @chainable + */ +OO.ui.OutlineItemWidget.prototype.setRemovable = function ( removable ) { + this.removable = !!removable; + return this; +}; + /** * Set indentation level. * @@ -7683,18 +7778,18 @@ OO.ui.ToggleSwitchWidget = function OoUiToggleSwitchWidget( config ) { this.dragging = false; this.dragStart = null; this.sliding = false; - this.$on = this.$( '' ); + this.$glow = this.$( '' ); this.$grip = this.$( '' ); // Events this.$element.on( 'click', OO.ui.bind( this.onClick, this ) ); // Initialization - this.$on.addClass( 'oo-ui-toggleSwitchWidget-on' ); + this.$glow.addClass( 'oo-ui-toggleSwitchWidget-glow' ); this.$grip.addClass( 'oo-ui-toggleSwitchWidget-grip' ); this.$element .addClass( 'oo-ui-toggleSwitchWidget' ) - .append( this.$on, this.$grip ); + .append( this.$glow, this.$grip ); }; /* Inheritance */ diff --git a/resources/oojs-ui/oojs-ui.svg.css b/resources/oojs-ui/oojs-ui.svg.css index ad435b3985..718d960f52 100644 --- a/resources/oojs-ui/oojs-ui.svg.css +++ b/resources/oojs-ui/oojs-ui.svg.css @@ -1,1847 +1,1808 @@ /*! - * OOjs UI v0.1.0-pre-svg (064484f9af) + * OOjs UI v0.1.0-pre (51f922ba17) * 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: Wed Feb 26 2014 12:12:11 GMT-0800 (PST) + * Date: Fri Feb 28 2014 16:33:26 GMT-0800 (PST) */ -/*csslint vendor-prefix:false */ /* Textures */ .oo-ui-texture-pending { - /* @embed */ - background-image: url(images/textures/pending.gif); + background-image: /* @embed */ url(images/textures/pending.gif); } .oo-ui-texture-transparency { - /* @embed */ - background-image: url(images/textures/transparency.png); + background-image: /* @embed */ url(images/textures/transparency.png); } /* RTL Definitions */ /* @noflip */ + .oo-ui-rtl { - direction: rtl; + direction: rtl; } + /* @noflip */ + .oo-ui-ltr { - direction: ltr; + direction: ltr; } -.oo-ui-dialog { - position: fixed; - top: 0; - right: 0; - bottom: 0; - 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; - -o-transition: all 250ms ease-in-out; - transition: all 250ms ease-in-out; +.oo-ui-dialog { + position: fixed; + top: 0; + right: 0; + bottom: 0; + 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 { - position: fixed; - top: 1em; - right: 0; - bottom: 1em; - left: 0; - margin: auto; - width: 800px; - min-height: 12em; - max-height: 600px; - background-color: #fff; - border: solid 1px #ccc; - border-radius: 0.5em; - box-shadow: 0 0.2em 1em rgba(0, 0, 0, 0.3); - overflow: hidden; - - -webkit-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; - -o-transition: all 250ms ease-in-out; - transition: all 250ms ease-in-out; + position: fixed; + top: 1em; + right: 0; + bottom: 1em; + left: 0; + width: 800px; + max-height: 600px; + 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 { + max-width: 600px; + max-height: 400px; } -.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 .oo-ui-frame { + width: 100%; + height: 100%; } -.oo-ui-dialog .oo-ui-window-frame.oo-ui-window-frame-small { - max-width: 600px; - max-height: 400px; +.oo-ui-dialog-open { + opacity: 1; } -.oo-ui-dialog .oo-ui-frame { - width: 100%; - height: 100%; +.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 { - position: absolute; - left: 0; - right: 0; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - overflow: hidden; + position: absolute; + right: 0; + left: 0; + overflow: hidden; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; } .oo-ui-dialog-content .oo-ui-window-head { - top: 0; - height: 3.8em; - padding: 0.5em; + top: 0; + height: 3.8em; + padding: 0.5em; } -.oo-ui-dialog-content .oo-ui-window-foot { - bottom: 0; - height: 4.8em; - padding: 1em; +.oo-ui-dialog-content .oo-ui-window-title { + line-height: 2.8em; } -.oo-ui-dialog-content .oo-ui-window-body { - box-shadow: 0 0 0.66em rgba(0,0,0,0.25); - top: 3.8em; - bottom: 4.8em; +.oo-ui-dialog-content .oo-ui-window-icon { + width: 2.4em; + height: 2.8em; + line-height: 2.8em; } -.oo-ui-dialog-content-footless .oo-ui-window-body { - bottom: 0; +.oo-ui-dialog-content .oo-ui-window-closeButton { + float: right; + margin: 0.25em 0.25em; } -.oo-ui-dialog-content-footless .oo-ui-window-foot { - display: none; +.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-icon { - width: 2.4em; - height: 2.8em; - line-height: 2.8em; +.oo-ui-dialog-content .oo-ui-window-foot { + bottom: 0; + height: 4.8em; + padding: 1em; } -.oo-ui-dialog-content .oo-ui-window-title { - line-height: 2.8em; +.oo-ui-dialog-content .oo-ui-window-foot .oo-ui-buttonedElement-framed { + float: left; + margin: 0.125em 0.25em; } -.oo-ui-dialog-content .oo-ui-window-foot .oo-ui-buttonedElement-framed { - float: left; - margin: 0.125em 0.25em; +.oo-ui-dialog-content .oo-ui-window-foot .oo-ui-flaggableElement-primary, +.oo-ui-dialog-content .oo-ui-window-foot .oo-ui-flaggableElement-constructive, +.oo-ui-dialog-content .oo-ui-window-foot .oo-ui-flaggableElement-destructive { + float: right; } -.oo-ui-dialog-content .oo-ui-window-foot .oo-ui-buttonedElement-framed.oo-ui-flaggableElement-primary, -.oo-ui-dialog-content .oo-ui-window-foot .oo-ui-buttonedElement-framed.oo-ui-flaggableElement-constructive, -.oo-ui-dialog-content .oo-ui-window-foot .oo-ui-buttonedElement-framed.oo-ui-flaggableElement-destructive { - float: right; +.oo-ui-dialog-content-footless .oo-ui-window-body { + bottom: 0; } -.oo-ui-dialog-content .oo-ui-window-closeButton { - float: right; - margin: 0.25em 0.25em; +.oo-ui-dialog-content-footless .oo-ui-window-foot { + display: none; } /* OO.ui.ButtonedElement */ -a.oo-ui-buttonedElement-button { - color: #333; - cursor: pointer; - display: inline-block; - vertical-align: middle; - -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 { + display: inline-block; + color: #333; + 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-indicatedElement-indicator, -.oo-ui-buttonedElement .oo-ui-buttonedElement-button > .oo-ui-iconedElement-icon { - display: none; -} - -.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; - display: inline-block; - vertical-align: middle; - background-position: center center; - background-repeat: no-repeat; - width: 1.9em; - height: 1.9em; +.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-buttonedElement .oo-ui-buttonedElement-button > .oo-ui-iconedElement-icon { - margin-left: 0; + margin-left: 0; } .oo-ui-buttonedElement .oo-ui-buttonedElement-button > .oo-ui-indicatedElement-indicator { - margin-right: -0.75em; + margin-right: -0.75em; } + .oo-ui-buttonedElement.oo-ui-widget-disabled .oo-ui-buttonedElement-button { - cursor: default; + 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; + width: 1.9em; + height: 1.9em; + vertical-align: middle; + background-position: center center; + background-repeat: no-repeat; + opacity: 0.8; } .oo-ui-buttonedElement-frameless { - display: inline-block; - position: relative; - -webkit-transition: opacity 200ms; - -moz-transition: opacity 200ms; - -o-transition: opacity 200ms; - transition: opacity 200ms; + position: relative; + display: inline-block; + -webkit-transition: opacity 200ms; + -moz-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; + opacity: 1; } -.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-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; - vertical-align: middle; - margin-left: 0.25em; - color: #333; + display: inline-block; + margin-left: 0.25em; + color: #333; + vertical-align: middle; } -.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-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; + color: #ccc; } -/* OO.ui.ButtonWidget */ - .oo-ui-buttonedElement-framed .oo-ui-buttonedElement-button { - display: inline-block; - font-size: 1em; - margin: 0.1em 0; - padding: 0.2em 0.8em; - border-radius: 0.3em; - vertical-align: top; - text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5); - text-align: center; - - /* Animation */ - -webkit-transition: border-color 100ms; - -moz-transition: border-color 100ms; - -o-transition: border-color 100ms; - transition: border-color 100ms; - - /* Gray */ - border: 1px #c9c9c9 solid; - background-color: #dddddd; - 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%); + 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:active, -.oo-ui-buttonedElement-framed.oo-ui-buttonedElement-active .oo-ui-buttonedElement-button { - box-shadow: inset 0 1px 4px 0 rgba(0, 0, 0, 0.07); - color: black; - - /* Gray */ - border-color: #c9c9c9; - background-color: #dddddd; - 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: #aaa; +} + +.oo-ui-buttonedElement-framed .oo-ui-buttonedElement-button > .oo-ui-labeledElement-label { + display: inline-block; + line-height: 1.9em; + 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-left: -0.5em; - margin-right: -0.5em; + margin-right: -0.5em; + margin-left: -0.5em; } .oo-ui-buttonedElement-framed.oo-ui-iconedElement.oo-ui-labeledElement .oo-ui-buttonedElement-button > .oo-ui-iconedElement-icon { - margin-left: -0.5em; - margin-right: 0; + margin-right: 0; + margin-left: -0.5em; } -.oo-ui-buttonedElement-framed .oo-ui-buttonedElement-button > .oo-ui-labeledElement-label { - display: inline-block; - vertical-align: middle; - line-height: 1.9em; +.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-destructive .oo-ui-buttonedElement-button { - /* Red text */ - color: #d45353; +.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 { - /* Green */ - border: solid 1px #b8d892; - background-color: #f0fbe1; - 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%); + 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:active, -.oo-ui-buttonedElement-framed.oo-ui-buttonedElement-active.oo-ui-flaggableElement-constructive .oo-ui-buttonedElement-button { - /* Green */ - border: solid 1px #b8d892; - background-color: #c3e59a; - 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-color: #adcb89; } -.oo-ui-buttonedElement-framed.oo-ui-flaggableElement-primary .oo-ui-buttonedElement-button { - /* Blue */ - border: solid 1px #a6cee1; - background-color: #eaf4fa; - 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%); +.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-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:active, -.oo-ui-buttonedElement-framed.oo-ui-buttonedElement-active.oo-ui-flaggableElement-primary .oo-ui-buttonedElement-button { - /* Blue */ - border: solid 1px #a6cee1; - background-color: #b0d9ee; - 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%); +.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:active, -.oo-ui-buttonedElement-framed.oo-ui-buttonedElement-active.oo-ui-widget-disabled .oo-ui-buttonedElement-button:active { - opacity: 0.5; - cursor: default; - box-shadow: none; - color: #333; - background: #eee; +.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:focus { - border-color: #ccc; - box-shadow: none; +.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; + display: block; } +/* OO.ui.ClippableElement */ + .oo-ui-clippableElement-clippable { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; } + +/* OO.ui.Frame */ + .oo-ui-frame { - margin: 0; - padding: 0; + padding: 0; + margin: 0; } .oo-ui-frame-body { - margin: 0; - padding: 0; - background: none; + padding: 0; + margin: 0; + background: none; } .oo-ui-frame-content { - font-family: sans-serif; - font-size: 0.8em; + font-family: sans-serif; + font-size: 0.8em; } + /* OO.ui.GridLayout */ + +.oo-ui-gridLayout { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; +} + /* OO.ui.PanelLayout */ -.oo-ui-gridLayout, .oo-ui-panelLayout { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; } .oo-ui-panelLayout-scrollable { - overflow-y: auto; + overflow-y: auto; } .oo-ui-panelLayout-padded { - padding: 2em; + padding: 2em; } /* OO.ui.FieldsetLayout */ .oo-ui-fieldsetLayout { - position: relative; - border: none; - margin: 0; - padding: 0; + position: relative; + padding: 0; + margin: 0; + border: none; } .oo-ui-fieldsetLayout + .oo-ui-fieldsetLayout { - margin-top: 2em; + margin-top: 2em; } .oo-ui-fieldsetLayout-labeled { - margin-top: -0.75em; + margin-top: -0.75em; } .oo-ui-fieldsetLayout > legend.oo-ui-labeledElement-label { - font-size: 1.5em; - margin-bottom: 0.5em; - padding-left: 0; + 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; + padding-left: 1.75em; } .oo-ui-fieldsetLayout.oo-ui-iconedElement > .oo-ui-iconedElement-icon { - display: block; - position: absolute; - left: 0; - top: 0.5em; - width: 2em; - height: 2em; - background-position: center center; - background-repeat: no-repeat; + position: absolute; + top: 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; + margin-bottom: 1em; } .oo-ui-fieldLayout:last-child { - margin-bottom: 0; + margin-bottom: 0; } .oo-ui-fieldLayout:before, .oo-ui-fieldLayout:after { - content: " "; - display: table; + display: table; + content: " "; } .oo-ui-fieldLayout:after { - clear: both; + 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; - float: left; - width: 35%; - padding-top: 0.5em; - margin-right: 5%; + display: block; + float: left; + width: 35%; + 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%; + display: block; + float: left; + width: 60%; } .oo-ui-fieldLayout.oo-ui-fieldLayout-align-right > .oo-ui-labeledElement-label { - text-align: right; + text-align: right; } .oo-ui-fieldLayout.oo-ui-fieldLayout-align-inline > .oo-ui-labeledElement-label { - display: inline-block; - vertical-align: middle; - padding: 0.75em 0.5em 0.5em 0.5em; + display: inline-block; + padding: 0.75em 0.5em 0.5em 0.5em; + vertical-align: middle; } .oo-ui-fieldLayout.oo-ui-fieldLayout-align-inline > .oo-ui-fieldLayout-field { - display: inline-block; - vertical-align: middle; - padding: 0.5em 0; + display: inline-block; + padding: 0.5em 0; + vertical-align: middle; } .oo-ui-fieldLayout.oo-ui-fieldLayout-align-top > .oo-ui-labeledElement-label { - padding: 0.5em 0; + padding: 0.5em 0; } /* OO.ui.BookletLayout */ +.oo-ui-bookletLayout-stackLayout.oo-ui-stackLayout-continuous .oo-ui-panelLayout-scrollable { + overflow-y: hidden; +} + .oo-ui-bookletLayout-stackLayout .oo-ui-panelLayout { - padding: 1.5em; - width: 100%; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; + width: 100%; + padding: 1.5em; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; } .oo-ui-bookletLayout-stackLayout .oo-ui-panelLayout-scrollable { - overflow-y: auto; + overflow-y: auto; } .oo-ui-bookletLayout-stackLayout .oo-ui-panelLayout-padded { - padding: 2em; + padding: 2em; } .oo-ui-bookletLayout-outlinePanel { - border-right: solid 1px #ddd; + border-right: solid 1px #ddd; } .oo-ui-bookletLayout-outlinePanel-editable .oo-ui-outlineWidget { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 3em; - overflow-y: auto; + position: absolute; + top: 0; + right: 0; + bottom: 3em; + left: 0; + overflow-y: auto; } .oo-ui-bookletLayout-outlinePanel .oo-ui-outlineControlsWidget { - position: absolute; - bottom: 0; - left: 0; - right: 0; - box-shadow: 0 0 0.25em rgba(0,0,0,0.25); + position: absolute; + 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; + display: none; } .oo-ui-stackLayout-continuous > .oo-ui-panelLayout { - display: block; - position: relative; - margin-bottom: 1em; - box-shadow: 0 0 0.5em rgba(0,0,0,0.25); + position: relative; + display: block; } -.oo-ui-stackLayout-continuous > .oo-ui-panelLayout:last-child { - margin-bottom: 0; -} /* OO.ui.PopupTool */ .oo-ui-popupTool .oo-ui-popupWidget { - margin-left: 1.25em; - font-size: 0.8em; + 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; + z-index: 4; } + +/* OO.ui.Toolbar */ + .oo-ui-toolbar { - clear: both; + clear: both; } .oo-ui-toolbar-bar { - border-bottom: solid 1px #ccc; - background-color: white; - /* @embed */ - background-image: url(images/fade-up.png); - background-position: left bottom; - background-repeat: repeat-x; - padding-bottom: 1px; - line-height: 1em; + 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 { - border: none; - background: none; + background: none; + border: none; } .oo-ui-toolbar-bottom .oo-ui-toolbar-bar { - position: absolute; + position: absolute; } .oo-ui-toolbar-actions { - float: right; + float: right; } .oo-ui-toolbar-tools { - float: left; + 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; - -o-user-select: none; - user-select: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + -o-user-select: none; + user-select: none; } .oo-ui-toolbar-actions .oo-ui-popupWidget { - -webkit-touch-callout: default; - -webkit-user-select: all; - -moz-user-select: all; - -ms-user-select: all; - user-select: all; + -webkit-user-select: all; + -moz-user-select: all; + -ms-user-select: all; + user-select: all; + -webkit-touch-callout: default; } .oo-ui-toolbar-shadow { - /* @embed */ - background-image: url(images/toolbar-shadow.png); - background-position: left top; - background-repeat: repeat-x; - position: absolute; - bottom: -9px; - height: 9px; - width: 100%; - pointer-events: none; - -webkit-transition: opacity 500ms ease-in-out; - -moz-transition: opacity 500ms ease-in-out; - -o-transition: opacity 500ms ease-in-out; - transition: opacity 500ms ease-in-out; - opacity: 0.125; + 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; + -o-transition: opacity 500ms ease-in-out; + transition: opacity 500ms ease-in-out; } + /* OO.ui.ToolGroup */ .oo-ui-toolGroup { - display: inline-block; - margin: 0.3em; - vertical-align: middle; - border-radius: 0.25em; - border: solid 1px transparent; - -webkit-transition: border-color 300ms; - -moz-transition: border-color 300ms; - -o-transition: border-color 300ms; - transition: border-color 300ms; + 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-toolGroup:hover { - border-color: rgba(0,0,0,0.1); + border-color: rgba(0, 0, 0, 0.1); } .oo-ui-toolGroup-empty { - display: none; + display: none; } .oo-ui-toolGroup .oo-ui-tool-link .oo-ui-tool-title { - color: #000; + color: #000; } .oo-ui-toolGroup .oo-ui-tool-link .oo-ui-iconedElement-icon { - background-position: center center; - background-repeat: no-repeat; + background-position: center center; + background-repeat: no-repeat; } /* OO.ui.BarToolGroup */ .oo-ui-barToolGroup > .oo-ui-iconedElement-icon, -.oo-ui-barToolGroup > .oo-ui-iconedElement-label { - display: none; +.oo-ui-barToolGroup > .oo-ui-labeledElement-label { + display: none; } .oo-ui-barToolGroup .oo-ui-tool { - display: inline-block; - position: relative; - vertical-align: top; - margin: -1px 0 -1px -1px; - border: solid 1px transparent; + position: relative; + display: inline-block; + margin: -1px 0 -1px -1px; + vertical-align: top; + border: solid 1px transparent; } -.oo-ui-barToolGroup .oo-ui-tool-link { - display: block; - height: 1.5em; - padding: 0.25em; - cursor: pointer; +.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-active:not(.oo-ui-widget-disabled) + - .oo-ui-tool-active:not(.oo-ui-widget-disabled) -{ - border-left-color: rgba(0,0,0,0.1); +.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:first-child { - border-top-left-radius: 0.25em; - border-bottom-left-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:last-child { - margin-right: -1px; - border-top-right-radius: 0.25em; - border-bottom-right-radius: 0.25em; +.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:hover:not(.oo-ui-widget-disabled) { - 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-active:not(.oo-ui-widget-disabled) { - border-color: rgba(0,0,0,0.2); +.oo-ui-barToolGroup .oo-ui-tool-link { + display: block; + height: 1.5em; + padding: 0.25em; + cursor: pointer; } .oo-ui-barToolGroup .oo-ui-tool-link .oo-ui-iconedElement-icon { - display: block; - height: 1.5em; - width: 1.5em; - opacity: 0.8; + display: block; + width: 1.5em; + height: 1.5em; + opacity: 0.8; } .oo-ui-barToolGroup .oo-ui-tool-link .oo-ui-tool-title { - display: none; + display: none; } .oo-ui-barToolGroup .oo-ui-tool.oo-ui-widget-disabled .oo-ui-tool-link { - cursor: default; + cursor: default; } .oo-ui-barToolGroup .oo-ui-tool.oo-ui-widget-disabled .oo-ui-tool-link .oo-ui-iconedElement-icon { - opacity: 0.2; + opacity: 0.2; } -.oo-ui-barToolGroup .oo-ui-tool:not(.oo-ui-widget-disabled) .oo-ui-tool-link .oo-ui-iconedElement-icon { - opacity: 0.8; +.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:hover:not(.oo-ui-widget-disabled) .oo-ui-tool-link .oo-ui-iconedElement-icon { - opacity: 1; +.oo-ui-barToolGroup .oo-ui-tool.oo-ui-widget-enabled:hover .oo-ui-tool-link .oo-ui-iconedElement-icon { + opacity: 1; } -.oo-ui-barToolGroup .oo-ui-tool-title { - display: none; +.oo-ui-barToolGroup .oo-ui-tool-title, +.oo-ui-barToolGroup .oo-ui-tool-accel { + display: none; } /* OO.ui.PopupToolGroup */ .oo-ui-popupToolGroup { - position: relative; - height: 2em; - min-width: 2.5em; + position: relative; + height: 2em; + min-width: 2.5em; } .oo-ui-popupToolGroup.oo-ui-indicatedElement.oo-ui-iconedElement { - min-width: 3.5em; + min-width: 3.5em; } .oo-ui-popupToolGroup-handle { - display: block; - cursor: pointer; + display: block; + cursor: pointer; } .oo-ui-popupToolGroup-handle .oo-ui-indicatedElement-indicator, .oo-ui-popupToolGroup-handle .oo-ui-iconedElement-icon { - position: absolute; - top: 0; - width: 2em; - height: 2em; - background-position: center center; - background-repeat: no-repeat; - opacity: 0.8; + position: absolute; + top: 0; + width: 2em; + height: 2em; + background-position: center center; + background-repeat: no-repeat; + opacity: 0.8; } .oo-ui-popupToolGroup-handle .oo-ui-indicatedElement-indicator { - right: 0; + right: 0; } .oo-ui-popupToolGroup-handle .oo-ui-iconedElement-icon { - left: 0.25em; + left: 0.25em; } .oo-ui-popupToolGroup-handle .oo-ui-labeledElement-label { - line-height: 2.6em; - font-size: 0.8em; - margin: 0 1em; + margin: 0 1em; + font-size: 0.8em; + line-height: 2.6em; } .oo-ui-popupToolGroup.oo-ui-iconedElement .oo-ui-popupToolGroup-handle .oo-ui-labeledElement-label { - margin-left: 3.25em; + margin-left: 3.25em; } .oo-ui-popupToolGroup.oo-ui-indicatedElement .oo-ui-popupToolGroup-handle .oo-ui-labeledElement-label { - margin-right: 2.25em; + margin-right: 2.25em; } .oo-ui-popupToolGroup .oo-ui-toolGroup-tools { - display: none; - position: absolute; - top: 2em; - left: -1px; - z-index: 4; - border: solid 1px #ccc; - background-color: white; - box-shadow: 0 0.25em 1em rgba(0,0,0,0.25); + position: absolute; + top: 2em; + 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 { - background-repeat: no-repeat; - background-position: center center; + background-position: center center; + background-repeat: no-repeat; } -.oo-ui-popupToolGroup-active:not(.oo-ui-widget-disabled) > .oo-ui-toolGroup-tools { - display: block; +.oo-ui-popupToolGroup-active.oo-ui-widget-enabled { + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; } -.oo-ui-popupToolGroup-active:not(.oo-ui-widget-disabled) { - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; +.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; - vertical-align: middle; - height: 2em; - width: 2em; - margin-right: 0.5em; + display: inline-block; + width: 2em; + height: 2em; + margin-right: 0.5em; + vertical-align: middle; } .oo-ui-popupToolGroup .oo-ui-tool-link .oo-ui-tool-title { - display: inline-block; - vertical-align: middle; - line-height: 2em; - font-size: 0.8em; + display: inline-block; + font-size: 0.8em; + line-height: 2em; + vertical-align: middle; } .oo-ui-popupToolGroup .oo-ui-tool-accel { - display: none; + 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; + 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; - border: solid 1px transparent; - margin: -1px 0; + 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; - cursor: pointer; - white-space: nowrap; - padding-right: 0.5em; + display: block; + padding-right: 0.5em; + white-space: nowrap; + cursor: pointer; } -.oo-ui-listToolGroup.oo-ui-popupToolGroup-active { - border-color: rgba(0,0,0,0.2); +.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:not(.oo-ui-widget-disabled) + - .oo-ui-tool-active:not(.oo-ui-widget-disabled) -{ - border-top-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:hover:not(.oo-ui-widget-disabled) { - border-color: rgba(0,0,0,0.2); +.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-active:not(.oo-ui-widget-disabled) { - 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-disabled .oo-ui-tool-link { - cursor: default; +.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-disabled .oo-ui-tool-link .oo-ui-tool-title { - color: #ccc; +.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-iconedElement-icon { - opacity: 0.2; +.oo-ui-listToolGroup .oo-ui-tool.oo-ui-widget-disabled .oo-ui-tool-link { + cursor: default; } -.oo-ui-listToolGroup .oo-ui-tool:not(.oo-ui-widget-disabled) .oo-ui-tool-link .oo-ui-iconedElement-icon { - opacity: 0.8; +.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:hover:not(.oo-ui-widget-disabled) .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-iconedElement-icon { + opacity: 0.2; } /* OO.ui.MenuToolGroup */ .oo-ui-menuToolGroup { - border-color: rgba(0,0,0,0.1); + border-color: rgba(0, 0, 0, 0.1); } .oo-ui-menuToolGroup:hover { - border-color: rgba(0,0,0,0.2); + border-color: rgba(0, 0, 0, 0.2); } .oo-ui-menuToolGroup.oo-ui-popupToolGroup-active { - border-color: rgba(0,0,0,0.25); + border-color: rgba(0, 0, 0, 0.25); } .oo-ui-menuToolGroup .oo-ui-popupToolGroup-handle { - min-width: 8em; + min-width: 8em; } .oo-ui-menuToolGroup .oo-ui-tool { - display: block; + display: block; } .oo-ui-menuToolGroup .oo-ui-tool-link { - display: block; - cursor: pointer; - white-space: nowrap; - padding: 0.25em 1em 0.25em 0.25em; + 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; + background-image: none; } .oo-ui-menuToolGroup .oo-ui-tool-active .oo-ui-tool-link .oo-ui-iconedElement-icon { - /* @embed */ - background-image: url(images/icons/check.png); + background-image: /* @embed */ url(images/icons/check.png); } .oo-ui-menuToolGroup .oo-ui-tool:hover { - background-color: #e1f3ff; + background-color: #e1f3ff; } /* Common */ -.oo-ui-barToolGroup .oo-ui-tool-active:not(.oo-ui-widget-disabled), -.oo-ui-listToolGroup .oo-ui-tool-active:not(.oo-ui-widget-disabled), -.oo-ui-popupToolGroup-active:not(.oo-ui-widget-disabled) { - /* @embed */ - background-image: url(images/fade-down.png); - background-position: left top; - background-repeat: repeat-x; - 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-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; + display: inline-block; + vertical-align: middle; } /* OO.ui.PopupButtonWidget */ .oo-ui-popupButtonWidget { - position: relative; + position: relative; } .oo-ui-popupButtonWidget .oo-ui-popupWidget { - position: absolute; - left: 1em; - cursor: auto; + position: absolute; + left: 1em; + cursor: auto; } /* OO.ui.ButtonGroupWidget */ .oo-ui-buttonGroupWidget { - display: inline-block; - white-space: nowrap; - border-radius: 0.3em; + display: inline-block; + white-space: nowrap; + border-radius: 0.3em; } .oo-ui-buttonGroupWidget .oo-ui-buttonedElement-framed .oo-ui-buttonedElement-button { - border-radius: 0; - margin-bottom: -1px; - margin-left: -1px; + margin-bottom: -1px; + margin-left: -1px; + border-radius: 0; } .oo-ui-buttonGroupWidget .oo-ui-buttonedElement-framed:first-child .oo-ui-buttonedElement-button { - border-bottom-left-radius: 0.3em; - border-top-left-radius: 0.3em; - margin-left: 0; + margin-left: 0; + border-bottom-left-radius: 0.3em; + border-top-left-radius: 0.3em; } .oo-ui-buttonGroupWidget .oo-ui-buttonedElement-framed:last-child .oo-ui-buttonedElement-button { - border-bottom-right-radius: 0.3em; - border-top-right-radius: 0.3em; + border-top-right-radius: 0.3em; + border-bottom-right-radius: 0.3em; } /* OO.ui.SelectWidget */ .oo-ui-selectWidget { - list-style: none; - margin: 0; - padding: 0; + padding: 0; + margin: 0; + list-style: none; } /* OO.ui.OptionWidget */ .oo-ui-optionWidget { - position: relative; - display: block; - border: none; - list-style: none; - margin: 0; - padding: 0.5em 2em 0.5em 3em; - cursor: pointer; -} - -.oo-ui-optionWidget .oo-ui-labeledElement-label { - line-height: 1.5em; - white-space: nowrap; - text-overflow: ellipsis; - overflow: hidden; + position: relative; + display: block; + padding: 0.5em 2em 0.5em 3em; + margin: 0; + list-style: none; + cursor: pointer; + border: none; } .oo-ui-optionWidget-highlighted { - background-color: #e1f3ff; + background-color: #e1f3ff; } .oo-ui-optionWidget-selected { - background-color: #a7dcff; + background-color: #a7dcff; } .oo-ui-optionWidget.oo-ui-widget-disabled { - cursor: default; + cursor: default; +} + +.oo-ui-optionWidget .oo-ui-labeledElement-label { + overflow: hidden; + line-height: 1.5em; + text-overflow: ellipsis; + white-space: nowrap; } .oo-ui-optionWidget .oo-ui-iconedElement-icon, .oo-ui-optionWidget .oo-ui-indicatedElement-indicator { - position: absolute; - top: 50%; - width: 2em; - height: 2em; - margin-top: -1em; - background-repeat: no-repeat; - background-position: center center; + position: absolute; + top: 50%; + width: 2em; + height: 2em; + margin-top: -1em; + background-position: center center; + background-repeat: no-repeat; } .oo-ui-optionWidget .oo-ui-iconedElement-icon { - left: 0.5em; + left: 0.5em; } .oo-ui-optionWidget .oo-ui-indicatedElement-indicator { - right: 0.5em; + right: 0.5em; } /* OO.ui.OutlineItemWidget */ .oo-ui-outlineItemWidget { - position: relative; - padding: 0.75em 0.75em 0.75em 3.5em; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - cursor: pointer; - font-size: 1.1em; + 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; } -.oo-ui-outlineItemWidget-level-1 { - padding-left: 5em; +.oo-ui-outlineItemWidget.oo-ui-optionWidget-selected { + text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5); + background-color: #a7dcff; } -.oo-ui-outlineItemWidget-level-2 { - padding-left: 6.5em; +.oo-ui-outlineItemWidget.oo-ui-flaggableElement-important { + font-weight: bold; } -.oo-ui-outlineItemWidget.oo-ui-optionWidget-selected { - background-color: #a7dcff; - text-shadow: 0 1px 1px rgba(255,255,255,0.5); +.oo-ui-outlineItemWidget.oo-ui-flaggableElement-placeholder { + font-style: italic; } -.oo-ui-outlineItemWidget-level-0 .oo-ui-iconedElement-icon { - left: 1em; +.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-level-1 .oo-ui-iconedElement-icon { - left: 2.5em; +.oo-ui-outlineItemWidget.oo-ui-flaggableElement-empty .oo-ui-labeledElement-label { + color: #777; } -.oo-ui-outlineItemWidget-level-2 .oo-ui-iconedElement-icon { - left: 4em; +.oo-ui-outlineItemWidget.oo-ui-indicatedElement .oo-ui-labeledElement-label { + padding-right: 1.5em; } -.oo-ui-outlineItemWidget.oo-ui-flaggableElement-important { - font-weight: bold; +.oo-ui-outlineItemWidget-level-0 { + padding-left: 3.5em; } -.oo-ui-outlineItemWidget.oo-ui-flaggableElement-placeholder { - font-style: italic; +.oo-ui-outlineItemWidget-level-0 .oo-ui-iconedElement-icon { + left: 1em; } -.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-level-1 { + padding-left: 5em; } -.oo-ui-outlineItemWidget.oo-ui-flaggableElement-empty .oo-ui-labeledElement-label { - color: #698AA0; + +.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.OutlineControlsWidget */ .oo-ui-outlineControlsWidget { - height: 3em; - background-color: #fff; + height: 3em; + background-color: #fff; } .oo-ui-outlineControlsWidget-adders, .oo-ui-outlineControlsWidget-movers { - float: left; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - height: 3em; - padding: 0.5em; + 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-outlineControlsWidget-adders { - float: left; +.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; + opacity: 0.2; } -.oo-ui-outlineControlsWidget-movers { - float: right; + +.oo-ui-outlineControlsWidget-adders { + float: left; + margin-left: 0; } .oo-ui-outlineControlsWidget-adders .oo-ui-buttonWidget { - float: left; + float: left; } -.oo-ui-outlineControlsWidget-movers .oo-ui-buttonWidget { - float: right; +.oo-ui-outlineControlsWidget-movers { + float: right; } -.oo-ui-outlineControlsWidget-adders .oo-ui-buttonWidget:first-child, -.oo-ui-outlineControlsWidget-adders .oo-ui-buttonWidget:first-child:hover { - opacity: 0.25; - cursor: default; +.oo-ui-outlineControlsWidget-movers .oo-ui-buttonWidget { + float: right; } /* OO.ui.LabelWidget */ .oo-ui-labelWidget { - padding: 0.5em 0; + padding: 0.5em 0; } /* OO.ui.TextInputWidget */ .oo-ui-textInputWidget { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - width: 20em; - position: relative; + 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 input:focus[readonly], -.oo-ui-widget-disabled.oo-ui-textInputWidget input:focus, -.oo-ui-textInputWidget textarea, -.oo-ui-textInputWidget textarea:focus[readonly], -.oo-ui-widget-disabled.oo-ui-textInputWidget textarea:focus { - display: inline-block; - font-size: 1em; - font-family: sans-serif; - background-color: #fff; - border: solid 1px #ccc; - box-shadow: 0 0 0 white, inset 0 0.1em 0.2em #ddd; - padding: 0.5em; - border-radius: 0.25em; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - width: 100%; - resize: none; - - /* Animation */ - -webkit-transition: border-color 200ms, box-shadow 200ms; - -moz-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-pending input, -.oo-ui-textInputWidget-pending textarea { - background-color: transparent; -} - -.oo-ui-textInputWidget input:focus, -.oo-ui-textInputWidget textarea:focus { - outline: none; - border-color: #a7dcff; - box-shadow: 0 0 0.3em #a7dcff, 0 0 0 white; +.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-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; + color: #777; + text-shadow: 0 1px 1px #fff; } -.oo-ui-widget-disabled.oo-ui-textInputWidget input, -.oo-ui-widget-disabled.oo-ui-textInputWidget input:focus, -.oo-ui-widget-disabled.oo-ui-textInputWidget textarea, -.oo-ui-widget-disabled.oo-ui-textInputWidget textarea:focus { - color: #ccc; - border-color: #ddd; - text-shadow: 0 1px 1px #fff; +.oo-ui-textInputWidget-pending input, +.oo-ui-textInputWidget-pending textarea { + background-color: transparent; } .oo-ui-textInputWidget-decorated input, .oo-ui-textInputWidget-decorated textarea { - padding-left: 2em; + 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; + position: absolute; + top: 0; + left: 0; + width: 2em; + height: 100%; + background-position: right center; + background-repeat: no-repeat; +} + +.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.MenuWidget */ .oo-ui-menuWidget { - position: absolute; - 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); + 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-menuWidget input { - position: absolute; - width: 0; - height: 0; - overflow: hidden; - opacity: 0; + position: absolute; + width: 0; + height: 0; + overflow: hidden; + opacity: 0; } /* OO.ui.InlineMenuWidget */ .oo-ui-inlineMenuWidget { - position: relative; - display: inline-block; - margin: 0.25em 0; - min-width: 20em; + position: relative; + display: inline-block; + min-width: 20em; + margin: 0.25em 0; } .oo-ui-inlineMenuWidget-handle { - display: inline-block; - width: 100%; - height: 2.5em; - 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; - -webkit-touch-callout: none; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - cursor: pointer; + display: inline-block; + 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; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-touch-callout: none; } .oo-ui-inlineMenuWidget-handle:hover { - border-color: rgba(0,0,0,0.2); + 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; - top: 0; - width: 2.5em; - height: 2.5em; - background-position: center center; - background-repeat: no-repeat; - opacity: 0.8; + position: absolute; + top: 0; + width: 2.5em; + height: 2.5em; + background-position: center center; + background-repeat: no-repeat; + opacity: 0.8; } .oo-ui-inlineMenuWidget-handle .oo-ui-indicatedElement-indicator { - right: 0; + right: 0; } .oo-ui-inlineMenuWidget-handle .oo-ui-iconedElement-icon { - left: 0.25em; + left: 0.25em; } .oo-ui-inlineMenuWidget-handle .oo-ui-labeledElement-label { - line-height: 2.5em; - margin: 0 0.5em; + margin: 0 0.5em; + line-height: 2.5em; } .oo-ui-inlineMenuWidget.oo-ui-iconedElement .oo-ui-inlineMenuWidget-handle .oo-ui-labeledElement-label { - margin-left: 3em; + margin-left: 3em; } .oo-ui-inlineMenuWidget.oo-ui-indicatedElement .oo-ui-inlineMenuWidget-handle .oo-ui-labeledElement-label { - margin-right: 2em; + margin-right: 2em; } .oo-ui-inlineMenuWidget .oo-ui-menuWidget { - width: 100%; + width: 100%; } /* OO.ui.MenuItemWidget */ .oo-ui-menuItemWidget { - position: relative; + position: relative; } .oo-ui-menuItemWidget .oo-ui-iconedElement-icon { - display: none; + display: none; } -.oo-ui-menuItemWidget.oo-ui-optionWidget-selected .oo-ui-iconedElement-icon { - display: block; +.oo-ui-menuItemWidget.oo-ui-optionWidget-selected { + background-color: transparent; } -.oo-ui-menuItemWidget.oo-ui-optionWidget-selected { - background-color: transparent; +.oo-ui-menuItemWidget.oo-ui-optionWidget-selected .oo-ui-iconedElement-icon { + display: block; } .oo-ui-menuItemWidget.oo-ui-optionWidget-highlighted { - background-color: #e1f3ff; + background-color: #e1f3ff; } /* OO.ui.MenuSectionItemWidget */ .oo-ui-menuSectionItemWidget { - padding: 0.33em 0.75em; - color: #888; - cursor: default; + padding: 0.33em 0.75em; + color: #888; + cursor: default; } /* OO.ui.ButtonSelectWidget */ .oo-ui-buttonSelectWidget { - display: inline-block; - white-space: nowrap; - border-radius: 0.3em; + display: inline-block; + white-space: nowrap; + border-radius: 0.3em; } .oo-ui-buttonSelectWidget .oo-ui-buttonOptionWidget .oo-ui-buttonedElement-button { - border-radius: 0; - margin-left: -1px; + margin-left: -1px; + border-radius: 0; } .oo-ui-buttonSelectWidget .oo-ui-buttonOptionWidget:first-child .oo-ui-buttonedElement-button { - border-bottom-left-radius: 0.3em; - border-top-left-radius: 0.3em; - margin-left: 0; + 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-bottom-right-radius: 0.3em; - border-top-right-radius: 0.3em; + border-top-right-radius: 0.3em; + border-bottom-right-radius: 0.3em; } /* OO.ui.ButtonOptionWidget */ .oo-ui-buttonOptionWidget { - display: inline-block; - padding: 0; - background-color: transparent; + display: inline-block; + padding: 0; + background-color: transparent; } .oo-ui-buttonOptionWidget .oo-ui-buttonedElement-button { - position: relative; - height: 1.9em; + 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; + position: static; + display: inline-block; + height: 1.9em; + margin-top: 0; + vertical-align: middle; } /* OO.ui.PopupWidget */ .oo-ui-popupWidget-popup { - position: absolute; - overflow: hidden; - 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); + 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-popupWidget-tail { - display: none; + display: none; } .oo-ui-popupWidget-tailed .oo-ui-popupWidget-popup { - margin-top: 7px; + margin-top: 7px; } .oo-ui-popupWidget-tailed .oo-ui-popupWidget-tail { - display: block; - position: absolute; - /* @embed */ - background-image: url(images/tail.svg); - background-repeat: no-repeat; - width: 15px; - height: 8px; - margin-left: -7px; + position: absolute; + display: block; + width: 15px; + height: 8px; + margin-left: -7px; + background-image: /* @embed */ url(images/tail.svg); + background-repeat: no-repeat; } .oo-ui-popupWidget-transitioning .oo-ui-popupWidget-popup { - -webkit-transition: width 100ms, height 100ms, left 100ms; - -moz-transition: width 100ms, height 100ms, left 100ms; - -o-transition: width 100ms, height 100ms, left 100ms; - transition: width 100ms, height 100ms, left 100ms; - -webkit-transition-timing-function: ease-in-out; - -moz-transition-timing-function: ease-in-out; - -o-transition-timing-function: ease-in-out; - transition-timing-function: ease-in-out; + -webkit-transition: width 100ms, height 100ms, left 100ms; + -moz-transition: width 100ms, height 100ms, left 100ms; + -o-transition: width 100ms, height 100ms, left 100ms; + transition: width 100ms, height 100ms, left 100ms; + -webkit-transition-timing-function: ease-in-out; + -moz-transition-timing-function: ease-in-out; + -o-transition-timing-function: ease-in-out; + transition-timing-function: ease-in-out; } .oo-ui-popupWidget-head { - height: 2.5em; - -webkit-touch-callout: none; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; + height: 2.5em; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-touch-callout: none; } .oo-ui-popupWidget-head .oo-ui-buttonWidget { - float: right; - margin: 0.25em; + float: right; + margin: 0.25em; } .oo-ui-popupWidget-head .oo-ui-labeledElement-label { - float: left; - margin: 0.75em 1em; - cursor: default; + float: left; + margin: 0.75em 1em; + cursor: default; } .oo-ui-popupWidget-body { - box-shadow: 0 0 0.66em rgba(0,0,0,0.25); + box-shadow: 0 0 0.66em rgba(0, 0, 0, 0.25); } /* OO.ui.SearchWidget */ .oo-ui-searchWidget-query { - position: absolute; - top: 0; - left: 0; - right: 0; - height: 4em; - padding: 0 1em; - box-shadow: 0 0 0.5em rgba(0,0,0,0.2); + position: absolute; + top: 0; + right: 0; + 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 { - width: 100%; - margin: 0.75em 0; + width: 100%; + margin: 0.75em 0; } .oo-ui-searchWidget-results { - position: absolute; - top: 4em; - bottom: 0; - left: 0; - right: 0; - padding: 1em; - overflow-x: hidden; - overflow-y: auto; - line-height: 0; + position: absolute; + top: 4em; + right: 0; + bottom: 0; + left: 0; + padding: 1em; + overflow-x: hidden; + overflow-y: auto; + line-height: 0; } /* OO.ui.ToggleSwitchWidget */ .oo-ui-toggleSwitchWidget { - position: relative; - display: inline-block; - vertical-align: middle; - height: 2em; - width: 3em; - border-radius: 1em; - overflow: hidden; - box-shadow: 0 0 0 white, inset 0 0.1em 0.2em #ddd; - border: solid 1px #ccc; - cursor: pointer; - -webkit-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); - - /* Gray */ - background-color: #dddddd; - 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%); + position: relative; + display: inline-block; + width: 3em; + height: 2em; + 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; } .oo-ui-toggleSwitchWidget.oo-ui-widget-disabled { - opacity: 0.5; - cursor: default; + cursor: default; + opacity: 0.5; } .oo-ui-toggleSwitchWidget-grip { - -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; - -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; + position: absolute; + top: 0.25em; + left: 0.25em; + 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; + -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; +} + +.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; + -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; } -.oo-ui-toggleSwitchWidget-grip { - position: absolute; - display: block; - top: 0.25em; - left: 0.25em; - width: 1.5em; - height: 1.5em; - border-radius: 1em; - 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; - - /* Gray */ - border: 1px #c9c9c9 solid; - background-color: #ffffff; - 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%); -} - -.oo-ui-toggleSwitchWidget:not(.oo-ui-widget-disabled):hover, -.oo-ui-toggleSwitchWidget:not(.oo-ui-widget-disabled):hover .oo-ui-toggleSwitchWidget-grip { - border-color: #aaa; +.oo-ui-toggleWidget-on .oo-ui-toggleSwitchWidget-grip { + left: 1.25em; + margin-left: -2px; } -.oo-ui-toggleWidget-on .oo-ui-toggleSwitchWidget-grip { - left: 1.25em; - 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-toggleSwitchWidget .oo-ui-toggleSwitchWidget-on { - position: absolute; - top: 0; - bottom: 0; - right: 0; - left: 0; - border-radius: 1em; - box-shadow: inset 0 1px 4px 0 rgba(0, 0, 0, 0.07); - -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; - -o-transition: opacity 200ms ease-in-out; - transition: opacity 200ms ease-in-out; - - /* Blue */ - background-color: #eaf4fa; - 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%); -} - -.oo-ui-toggleWidget-on .oo-ui-toggleSwitchWidget-on { - opacity: 1; -} - -.oo-ui-toggleWidget-off .oo-ui-toggleSwitchWidget-on { - opacity: 0; + left: 0.25em; + margin-left: 0; +} + +.oo-ui-toggleWidget-off .oo-ui-toggleSwitchWidget-glow { + opacity: 0; } + +/* OO.ui.Window */ + .oo-ui-window-head { - -webkit-touch-callout: none; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; + -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; + padding: 0 0.75em; } .oo-ui-window-icon { - float: left; - width: 2em; - height: 2em; - line-height: 2em; - margin-right: 0.5em; - background-position: right center; - background-repeat: no-repeat; + 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; + float: left; + line-height: 2em; + color: #333; + white-space: nowrap; + cursor: default; } .oo-ui-window-overlay { - font-family: sans-serif; - line-height: 1.5em; - font-size: 1em; - position: absolute; - top: 0; - left: 0; + position: absolute; + top: 0; + left: 0; + font-family: sans-serif; + font-size: 1em; + line-height: 1.5em; } + /* Icons */ .oo-ui-icon-add-item { - /* @embed */ - background-image: url(images/icons/add-item.svg); + background-image: /* @embed */ url(images/icons/add-item.svg); } .oo-ui-icon-advanced { - /* @embed */ - background-image: url(images/icons/advanced.svg); + background-image: /* @embed */ url(images/icons/advanced.svg); } .oo-ui-icon-alert { - /* @embed */ - background-image: url(images/icons/alert.svg); + background-image: /* @embed */ url(images/icons/alert.svg); } .oo-ui-icon-check { - /* @embed */ - background-image: url(images/icons/check.svg); + background-image: /* @embed */ url(images/icons/check.svg); } .oo-ui-icon-clear { - /* @embed */ - background-image: url(images/icons/clear.svg); + background-image: /* @embed */ url(images/icons/clear.svg); } .oo-ui-icon-close { - /* @embed */ - background-image: url(images/icons/close.svg); + background-image: /* @embed */ url(images/icons/close.svg); } .oo-ui-icon-code { - /* @embed */ - background-image: url(images/icons/code.svg); + background-image: /* @embed */ url(images/icons/code.svg); } .oo-ui-icon-collapse { - /* @embed */ - background-image: url(images/icons/collapse.svg); + background-image: /* @embed */ url(images/icons/collapse.svg); } .oo-ui-icon-comment { - /* @embed */ - background-image: url(images/icons/comment.svg); + background-image: /* @embed */ url(images/icons/comment.svg); } .oo-ui-icon-expand { - /* @embed */ - background-image: url(images/icons/expand.svg); + background-image: /* @embed */ url(images/icons/expand.svg); } .oo-ui-icon-help { - /* @embed */ - background-image: url(images/icons/help.svg); + background-image: /* @embed */ url(images/icons/help.svg); } .oo-ui-icon-link { - /* @embed */ - background-image: url(images/icons/link.svg); + background-image: /* @embed */ url(images/icons/link.svg); } .oo-ui-icon-menu { - /* @embed */ - background-image: url(images/icons/menu.svg); + background-image: /* @embed */ url(images/icons/menu.svg); } .oo-ui-icon-next { - /* @embed */ - background-image: url(images/icons/move-ltr.svg); + background-image: /* @embed */ url(images/icons/move-ltr.svg); } .oo-ui-icon-picture { - /* @embed */ - background-image: url(images/icons/picture.svg); + background-image: /* @embed */ url(images/icons/picture.svg); } .oo-ui-icon-previous { - /* @embed */ - background-image: url(images/icons/move-rtl.svg); + background-image: /* @embed */ url(images/icons/move-rtl.svg); } .oo-ui-icon-redo { - /* @embed */ - background-image: url(images/icons/arched-arrow-ltr.svg); + background-image: /* @embed */ url(images/icons/arched-arrow-ltr.svg); } .oo-ui-icon-remove { - /* @embed */ - background-image: url(images/icons/remove.svg); + background-image: /* @embed */ url(images/icons/remove.svg); } .oo-ui-icon-search { - /* @embed */ - background-image: url(images/icons/search.svg); + background-image: /* @embed */ url(images/icons/search.svg); } .oo-ui-icon-settings { - /* @embed */ - background-image: url(images/icons/settings.svg); + background-image: /* @embed */ url(images/icons/settings.svg); } .oo-ui-icon-tag { - /* @embed */ - background-image: url(images/icons/tag.svg); + background-image: /* @embed */ url(images/icons/tag.svg); } .oo-ui-icon-undo { - /* @embed */ - background-image: url(images/icons/arched-arrow-rtl.svg); + background-image: /* @embed */ url(images/icons/arched-arrow-rtl.svg); } .oo-ui-icon-window { - /* @embed */ - background-image: url(images/icons/window.svg); + background-image: /* @embed */ url(images/icons/window.svg); } /* Indicators */ .oo-ui-indicator-down { - /* @embed */ - background-image: url(images/indicators/down.svg); + background-image: /* @embed */ url(images/indicators/down.svg); } .oo-ui-indicator-required { - /* @embed */ - background-image: url(images/indicators/required.svg); + background-image: /* @embed */ url(images/indicators/required.svg); } .oo-ui-indicator-up { - /* @embed */ - background-image: url(images/indicators/up.svg); -} + background-image: /* @embed */ url(images/indicators/up.svg); +} \ No newline at end of file -- 2.20.1