mediawiki-extensions-Visual.../modules/ve/init/mw/styles/ve.init.mw.ViewPageTarget.css

355 lines
8 KiB
CSS
Raw Normal View History

/**
* VisualEditor MediaWiki initialization ViewPageTarget styles.
*
* @copyright 2011-2012 VisualEditor Team and others; see AUTHORS.txt
* @license The MIT License (MIT); see LICENSE.txt
*/
/* VisualEditor */
.ve-ui-menu {
font-size: 0.9em;
}
.ve-init-mw-viewPageTarget-pageTitle {
-webkit-transition: opacity 200ms ease-out;
-moz-transition: opacity 200ms ease-out;
-ms-transition: opacity 200ms ease-out;
-o-transition: opacity 200ms ease-out;
transition: opacity 200ms ease-out;
cursor: default;
}
.ve-init-mw-viewPageTarget-loading {
width: 128px;
height: 15px;
float: right;
}
/* Edit notices */
.ve-init-mw-viewPageTarget-toolbar-editNotices {
display: none;
position: absolute;
right: -0.5em;
top: 30px;
width: 29em;
font-family: sans-serif;
border: solid 1px #ccc;
padding: 0 0.75em 0 0.75em;
border-radius: 0.25em;
background-color: #fff;
box-shadow: 0 0.15em 0.5em 0 rgba(0, 0, 0, 0.2);
z-index: 3;
}
.ve-init-mw-viewPageTarget-toolbar-editNotices-notice {
padding: 0.5em 0;
font-size: 0.8em;
line-height: 1.5em;
border-top: solid 1px #ccc;
margin-top: -1px;
}
/* Tools */
.ve-init-mw-viewPageTarget-tool {
position: relative;
display: inline-block;
vertical-align: top;
line-height: 2.125em;
margin-right: 1em;
padding-left: 30px;
cursor: pointer;
background-repeat: no-repeat;
background-position: left center;
}
.ve-init-mw-viewPageTarget-tool-label {
font-size: 0.8em;
color: #555555;
}
.ve-init-mw-viewPageTarget-tool:hover .ve-init-mw-viewPageTarget-tool-label {
text-decoration: underline;
}
/* Buttons */
.ve-init-mw-viewPageTarget-button {
display: inline-block;
height: 1.8em;
margin: 0.1em 0.25em;
padding: 0 0.75em;
border-radius: 0.25em;
vertical-align: top;
color: #252525;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
text-align: center;
font-size: 1em;
cursor: pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
/* Gray */
border: 1px #c9c9c9 solid;
background-color: #ffffff;
filter: progid:DXImageTransform.Microsoft.gradient(
GradientType=0,startColorstr=#ffffff, endColorstr=#f0f0f0
);
background-image: -webkit-gradient(
linear, right top, right bottom, color-stop(0%,#ffffff), color-stop(100%,#f0f0f0)
);
background-image: -webkit-linear-gradient(top, #ffffff 0%, #f0f0f0 100%);
background-image: -moz-linear-gradient(top, #ffffff 0%, #f0f0f0 100%);
background-image: -ms-linear-gradient(top, #ffffff 0%, #f0f0f0 100%);
background-image: -o-linear-gradient(top, #ffffff 0%, #f0f0f0 100%);
background-image: linear-gradient(top, #ffffff 0%, #f0f0f0 100%);
(bug 42654) Implement Show changes in Save dialog. Turned saveDialog-body into slide-based swapper. Moved footer into saveDiaog-body so that the license text doesn't stay under the diff-slide (and move body bottom padding to foot top) Wrapped buttons and title in a saveDialog-header and converted closeButton from absolutely positioned to a floated layout. This way the title doesn't need to be repositioned but will scooch over if the prevButton gets shown/hidden. Update API "diff" action to include table wrapper and table header. Without it the mediawiki CSS for diff doesn't work properly (needs colgroups for proper width of the "-" and "+" column etc) Renamed -saving class to -disabled for consistency. Set prop.disabled to really lock/unlock buttons, not just visual (otherwise the click handlers are still triggered on click, can potentially cause actions to be triggered when not expected) Using a ve message for "Show your changes" title instead of re-using core tooltip-savepage in a different context. Diff slide triggers "auto width" on dialog (inline undo of width: 29em), keeping min-width, to allow it to expand as wide as needed. Functions that I copied as base for onShowChanges and onShowChangeError had some incorrect argument descriptions. Fixed in both. Note: * Pass function to .off(), so that only that one is unbound instead of any "resize" handler on the page (by other extensions or gadgets or core) * NB: ve.bind ($.proxy) preserves internal guid, so that $.Event can find the bound function by the original reference. * keydown has an anonymous function, should either moved to prototype or namespaced, did latter for now, save enough and better than destructive .off('keydown') Change-Id: I9d05ef6e3e2461bdcf363232f7b0fbad5e24f506
2012-12-07 16:23:23 +00:00
}
.ve-init-mw-viewPageTarget-button-constructive {
/* Green */
(bug 42654) Implement Show changes in Save dialog. Turned saveDialog-body into slide-based swapper. Moved footer into saveDiaog-body so that the license text doesn't stay under the diff-slide (and move body bottom padding to foot top) Wrapped buttons and title in a saveDialog-header and converted closeButton from absolutely positioned to a floated layout. This way the title doesn't need to be repositioned but will scooch over if the prevButton gets shown/hidden. Update API "diff" action to include table wrapper and table header. Without it the mediawiki CSS for diff doesn't work properly (needs colgroups for proper width of the "-" and "+" column etc) Renamed -saving class to -disabled for consistency. Set prop.disabled to really lock/unlock buttons, not just visual (otherwise the click handlers are still triggered on click, can potentially cause actions to be triggered when not expected) Using a ve message for "Show your changes" title instead of re-using core tooltip-savepage in a different context. Diff slide triggers "auto width" on dialog (inline undo of width: 29em), keeping min-width, to allow it to expand as wide as needed. Functions that I copied as base for onShowChanges and onShowChangeError had some incorrect argument descriptions. Fixed in both. Note: * Pass function to .off(), so that only that one is unbound instead of any "resize" handler on the page (by other extensions or gadgets or core) * NB: ve.bind ($.proxy) preserves internal guid, so that $.Event can find the bound function by the original reference. * keydown has an anonymous function, should either moved to prototype or namespaced, did latter for now, save enough and better than destructive .off('keydown') Change-Id: I9d05ef6e3e2461bdcf363232f7b0fbad5e24f506
2012-12-07 16:23:23 +00:00
border: solid 1px #c3e59a;
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%);
}
.ve-init-mw-viewPageTarget-button-primary {
/* Blue */
(bug 42654) Implement Show changes in Save dialog. Turned saveDialog-body into slide-based swapper. Moved footer into saveDiaog-body so that the license text doesn't stay under the diff-slide (and move body bottom padding to foot top) Wrapped buttons and title in a saveDialog-header and converted closeButton from absolutely positioned to a floated layout. This way the title doesn't need to be repositioned but will scooch over if the prevButton gets shown/hidden. Update API "diff" action to include table wrapper and table header. Without it the mediawiki CSS for diff doesn't work properly (needs colgroups for proper width of the "-" and "+" column etc) Renamed -saving class to -disabled for consistency. Set prop.disabled to really lock/unlock buttons, not just visual (otherwise the click handlers are still triggered on click, can potentially cause actions to be triggered when not expected) Using a ve message for "Show your changes" title instead of re-using core tooltip-savepage in a different context. Diff slide triggers "auto width" on dialog (inline undo of width: 29em), keeping min-width, to allow it to expand as wide as needed. Functions that I copied as base for onShowChanges and onShowChangeError had some incorrect argument descriptions. Fixed in both. Note: * Pass function to .off(), so that only that one is unbound instead of any "resize" handler on the page (by other extensions or gadgets or core) * NB: ve.bind ($.proxy) preserves internal guid, so that $.Event can find the bound function by the original reference. * keydown has an anonymous function, should either moved to prototype or namespaced, did latter for now, save enough and better than destructive .off('keydown') Change-Id: I9d05ef6e3e2461bdcf363232f7b0fbad5e24f506
2012-12-07 16:23:23 +00:00
border: solid 1px #b0d9ee;
background-color: #eaf4fa;
filter: progid:DXImageTransform.Microsoft.gradient(
GradientType=0,startColorstr=#eaf4fa, endColorstr=#b0d9ee
(bug 42654) Implement Show changes in Save dialog. Turned saveDialog-body into slide-based swapper. Moved footer into saveDiaog-body so that the license text doesn't stay under the diff-slide (and move body bottom padding to foot top) Wrapped buttons and title in a saveDialog-header and converted closeButton from absolutely positioned to a floated layout. This way the title doesn't need to be repositioned but will scooch over if the prevButton gets shown/hidden. Update API "diff" action to include table wrapper and table header. Without it the mediawiki CSS for diff doesn't work properly (needs colgroups for proper width of the "-" and "+" column etc) Renamed -saving class to -disabled for consistency. Set prop.disabled to really lock/unlock buttons, not just visual (otherwise the click handlers are still triggered on click, can potentially cause actions to be triggered when not expected) Using a ve message for "Show your changes" title instead of re-using core tooltip-savepage in a different context. Diff slide triggers "auto width" on dialog (inline undo of width: 29em), keeping min-width, to allow it to expand as wide as needed. Functions that I copied as base for onShowChanges and onShowChangeError had some incorrect argument descriptions. Fixed in both. Note: * Pass function to .off(), so that only that one is unbound instead of any "resize" handler on the page (by other extensions or gadgets or core) * NB: ve.bind ($.proxy) preserves internal guid, so that $.Event can find the bound function by the original reference. * keydown has an anonymous function, should either moved to prototype or namespaced, did latter for now, save enough and better than destructive .off('keydown') Change-Id: I9d05ef6e3e2461bdcf363232f7b0fbad5e24f506
2012-12-07 16:23:23 +00:00
);
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%);
}
.ve-init-mw-viewPageTarget-saveDialog-actions .ve-init-mw-viewPageTarget-button {
float: right;
margin: 0 0 0 1em;
}
.ve-init-mw-viewPageTarget-button:hover {
border-color: #aaa;
}
.ve-init-mw-viewPageTarget-button:active {
Kranitor #3: jQuerlyfornication ft. The Cascaders * Classicifation (JS) Use addClass instead of attr( 'class' ) whenever possible. addClass will manipulate the properties directly instead of (re-)setting an attribute which (most) browsers then sync with the properties. Difference between: elem.className and elem.setAttribute( 'class', .. ); Just like .checked, .value, .disabled and other interactive properties, the HTML attributes should only be used for initial values from the html document. When in javascript, only set properties. Attributes are either ignored or slow. * Styling (JS) Use .css() instead of attr( 'style' ). Again, setting properties instead of attributes is much faster, easier and safer. And this way it takes care of cross-browser issues where applicable, and less prone to error due to dealing with key-value pairs instead of css strings. Difference between: elem.style.foo = 'bar'; and elem.setAttribute( 'style', 'foo: bar;' ); * Finding (JS) Use .find( 'foo bar' ) instead of .find( 'foo' ).find( 'bar' ). It is CSS! * Vendor prefixes (CSS) It is important to always list newer (standards-compliant) versions *after* the older/prefixed variants. See also http://css-tricks.com/ordering-css3-properties/ So the following three: -webkit-gradient (Chrome, Safari 4) -webkit-linear-gradient (Chrome 10, Safari 5+) linear-gradient (CSS3 standard) ... must be in that order. Notes: - "-moz-opacity" is from before Mozilla 1.7 (Firefox < 0.8) Has not been renamed to "opacity" since Firefox 0.9. - Removed redundant "-moz-opacity" - Added "filter: alpha(opacity=**);" where missing - Fixed order of css3 properties (old to new) - Add standardized css3 versions where missing (some 'border-radius' groups didn't have the non-prefixed version) - Spacing - @embed - Shorten hex colors where possible (#dddddd -> #ddd) $ ack '#([0-9a-f])\1{5}' --css $ ack '#([0-9a-f])\1{2};' --css Change-Id: I386fedb9058c2567fd0af5f55291e9859a53329d
2012-07-28 19:15:23 +00:00
border-color: #ddd;
box-shadow: inset 0 1px 4px 0 rgba(0, 0, 0, 0.07);
}
.ve-init-mw-viewPageTarget-button-disabled {
Kranitor #3: jQuerlyfornication ft. The Cascaders * Classicifation (JS) Use addClass instead of attr( 'class' ) whenever possible. addClass will manipulate the properties directly instead of (re-)setting an attribute which (most) browsers then sync with the properties. Difference between: elem.className and elem.setAttribute( 'class', .. ); Just like .checked, .value, .disabled and other interactive properties, the HTML attributes should only be used for initial values from the html document. When in javascript, only set properties. Attributes are either ignored or slow. * Styling (JS) Use .css() instead of attr( 'style' ). Again, setting properties instead of attributes is much faster, easier and safer. And this way it takes care of cross-browser issues where applicable, and less prone to error due to dealing with key-value pairs instead of css strings. Difference between: elem.style.foo = 'bar'; and elem.setAttribute( 'style', 'foo: bar;' ); * Finding (JS) Use .find( 'foo bar' ) instead of .find( 'foo' ).find( 'bar' ). It is CSS! * Vendor prefixes (CSS) It is important to always list newer (standards-compliant) versions *after* the older/prefixed variants. See also http://css-tricks.com/ordering-css3-properties/ So the following three: -webkit-gradient (Chrome, Safari 4) -webkit-linear-gradient (Chrome 10, Safari 5+) linear-gradient (CSS3 standard) ... must be in that order. Notes: - "-moz-opacity" is from before Mozilla 1.7 (Firefox < 0.8) Has not been renamed to "opacity" since Firefox 0.9. - Removed redundant "-moz-opacity" - Added "filter: alpha(opacity=**);" where missing - Fixed order of css3 properties (old to new) - Add standardized css3 versions where missing (some 'border-radius' groups didn't have the non-prefixed version) - Spacing - @embed - Shorten hex colors where possible (#dddddd -> #ddd) $ ack '#([0-9a-f])\1{5}' --css $ ack '#([0-9a-f])\1{2};' --css Change-Id: I386fedb9058c2567fd0af5f55291e9859a53329d
2012-07-28 19:15:23 +00:00
filter: alpha(opacity=50);
opacity: 0.5;
cursor: default;
}
.ve-init-mw-viewPageTarget-button-disabled:hover {
border-color: #ccc;
box-shadow: none;
}
.ve-init-mw-viewPageTarget-button-label {
display: inline-block;
vertical-align: middle;
line-height: 2.3em;
font-size: 0.8em;
}
/* Save dialog styles */
.ve-init-mw-viewPageTarget-saveDialog-working {
display: none;
float: right;
height: 2em;
width: 128px;
margin-right: 1em;
background-position: right center;
background-repeat: no-repeat;
}
.ve-init-mw-viewPageTarget-saveDialog {
display: none;
top: 0.25em;
right: 0.5em;
width: 29em;
(bug 42654) Implement Show changes in Save dialog. Turned saveDialog-body into slide-based swapper. Moved footer into saveDiaog-body so that the license text doesn't stay under the diff-slide (and move body bottom padding to foot top) Wrapped buttons and title in a saveDialog-header and converted closeButton from absolutely positioned to a floated layout. This way the title doesn't need to be repositioned but will scooch over if the prevButton gets shown/hidden. Update API "diff" action to include table wrapper and table header. Without it the mediawiki CSS for diff doesn't work properly (needs colgroups for proper width of the "-" and "+" column etc) Renamed -saving class to -disabled for consistency. Set prop.disabled to really lock/unlock buttons, not just visual (otherwise the click handlers are still triggered on click, can potentially cause actions to be triggered when not expected) Using a ve message for "Show your changes" title instead of re-using core tooltip-savepage in a different context. Diff slide triggers "auto width" on dialog (inline undo of width: 29em), keeping min-width, to allow it to expand as wide as needed. Functions that I copied as base for onShowChanges and onShowChangeError had some incorrect argument descriptions. Fixed in both. Note: * Pass function to .off(), so that only that one is unbound instead of any "resize" handler on the page (by other extensions or gadgets or core) * NB: ve.bind ($.proxy) preserves internal guid, so that $.Event can find the bound function by the original reference. * keydown has an anonymous function, should either moved to prototype or namespaced, did latter for now, save enough and better than destructive .off('keydown') Change-Id: I9d05ef6e3e2461bdcf363232f7b0fbad5e24f506
2012-12-07 16:23:23 +00:00
min-width: 29em;
min-height: 10em;
font-family: sans-serif;
position: absolute;
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);
padding: 2.5em 0.75em 0.75em 0.75em;
margin: 0 0 0 0.5em;
z-index: 3;
(bug 42654) Implement Show changes in Save dialog. Turned saveDialog-body into slide-based swapper. Moved footer into saveDiaog-body so that the license text doesn't stay under the diff-slide (and move body bottom padding to foot top) Wrapped buttons and title in a saveDialog-header and converted closeButton from absolutely positioned to a floated layout. This way the title doesn't need to be repositioned but will scooch over if the prevButton gets shown/hidden. Update API "diff" action to include table wrapper and table header. Without it the mediawiki CSS for diff doesn't work properly (needs colgroups for proper width of the "-" and "+" column etc) Renamed -saving class to -disabled for consistency. Set prop.disabled to really lock/unlock buttons, not just visual (otherwise the click handlers are still triggered on click, can potentially cause actions to be triggered when not expected) Using a ve message for "Show your changes" title instead of re-using core tooltip-savepage in a different context. Diff slide triggers "auto width" on dialog (inline undo of width: 29em), keeping min-width, to allow it to expand as wide as needed. Functions that I copied as base for onShowChanges and onShowChangeError had some incorrect argument descriptions. Fixed in both. Note: * Pass function to .off(), so that only that one is unbound instead of any "resize" handler on the page (by other extensions or gadgets or core) * NB: ve.bind ($.proxy) preserves internal guid, so that $.Event can find the bound function by the original reference. * keydown has an anonymous function, should either moved to prototype or namespaced, did latter for now, save enough and better than destructive .off('keydown') Change-Id: I9d05ef6e3e2461bdcf363232f7b0fbad5e24f506
2012-12-07 16:23:23 +00:00
/* slide-diff can get quite long, handle overflow */
/* max-height set from javascript */
overflow-x: auto;
}
.ve-init-mw-viewPageTarget-saveDialog-head {
position: absolute;
top: 0.4em;
left: 0.5em;
right: 0.5em;
}
.ve-init-mw-viewPageTarget-saveDialog-title {
height: 2em;
line-height: 2em;
color: #333;
font-size: 0.9em;
float: left;
margin: 0 0.5em;
}
.ve-init-mw-viewPageTarget-saveDialog-prevButton {
float: left;
position: relative;
top: 0.1em;
width: 1.5em;
height: 1.5em;
cursor: pointer;
filter: alpha(opacity=8);
opacity: 0.8;
/* @see ve.init.mw.Icons */
background-position: left top;
background-repeat: no-repeat;
padding-right: 0.5em;
border-right: 1px solid #eee;
margin-right: 0.5em;
}
.ve-init-mw-viewPageTarget-saveDialog-closeButton {
float: right;
position: relative;
top: 0.1em;
width: 1.5em;
height: 1.5em;
cursor: pointer;
filter: alpha(opacity=8);
opacity: 0.8;
/* @see ve.init.mw.Icons */
background-position: right top;
background-repeat: no-repeat;
}
.ve-init-mw-viewPageTarget-saveDialog-body {
Kranitor #3: jQuerlyfornication ft. The Cascaders * Classicifation (JS) Use addClass instead of attr( 'class' ) whenever possible. addClass will manipulate the properties directly instead of (re-)setting an attribute which (most) browsers then sync with the properties. Difference between: elem.className and elem.setAttribute( 'class', .. ); Just like .checked, .value, .disabled and other interactive properties, the HTML attributes should only be used for initial values from the html document. When in javascript, only set properties. Attributes are either ignored or slow. * Styling (JS) Use .css() instead of attr( 'style' ). Again, setting properties instead of attributes is much faster, easier and safer. And this way it takes care of cross-browser issues where applicable, and less prone to error due to dealing with key-value pairs instead of css strings. Difference between: elem.style.foo = 'bar'; and elem.setAttribute( 'style', 'foo: bar;' ); * Finding (JS) Use .find( 'foo bar' ) instead of .find( 'foo' ).find( 'bar' ). It is CSS! * Vendor prefixes (CSS) It is important to always list newer (standards-compliant) versions *after* the older/prefixed variants. See also http://css-tricks.com/ordering-css3-properties/ So the following three: -webkit-gradient (Chrome, Safari 4) -webkit-linear-gradient (Chrome 10, Safari 5+) linear-gradient (CSS3 standard) ... must be in that order. Notes: - "-moz-opacity" is from before Mozilla 1.7 (Firefox < 0.8) Has not been renamed to "opacity" since Firefox 0.9. - Removed redundant "-moz-opacity" - Added "filter: alpha(opacity=**);" where missing - Fixed order of css3 properties (old to new) - Add standardized css3 versions where missing (some 'border-radius' groups didn't have the non-prefixed version) - Spacing - @embed - Shorten hex colors where possible (#dddddd -> #ddd) $ ack '#([0-9a-f])\1{5}' --css $ ack '#([0-9a-f])\1{2};' --css Change-Id: I386fedb9058c2567fd0af5f55291e9859a53329d
2012-07-28 19:15:23 +00:00
border-top: 1px solid #ddd;
(bug 42654) Implement Show changes in Save dialog. Turned saveDialog-body into slide-based swapper. Moved footer into saveDiaog-body so that the license text doesn't stay under the diff-slide (and move body bottom padding to foot top) Wrapped buttons and title in a saveDialog-header and converted closeButton from absolutely positioned to a floated layout. This way the title doesn't need to be repositioned but will scooch over if the prevButton gets shown/hidden. Update API "diff" action to include table wrapper and table header. Without it the mediawiki CSS for diff doesn't work properly (needs colgroups for proper width of the "-" and "+" column etc) Renamed -saving class to -disabled for consistency. Set prop.disabled to really lock/unlock buttons, not just visual (otherwise the click handlers are still triggered on click, can potentially cause actions to be triggered when not expected) Using a ve message for "Show your changes" title instead of re-using core tooltip-savepage in a different context. Diff slide triggers "auto width" on dialog (inline undo of width: 29em), keeping min-width, to allow it to expand as wide as needed. Functions that I copied as base for onShowChanges and onShowChangeError had some incorrect argument descriptions. Fixed in both. Note: * Pass function to .off(), so that only that one is unbound instead of any "resize" handler on the page (by other extensions or gadgets or core) * NB: ve.bind ($.proxy) preserves internal guid, so that $.Event can find the bound function by the original reference. * keydown has an anonymous function, should either moved to prototype or namespaced, did latter for now, save enough and better than destructive .off('keydown') Change-Id: I9d05ef6e3e2461bdcf363232f7b0fbad5e24f506
2012-12-07 16:23:23 +00:00
padding-top: 1em;
overflow: hidden;
}
.ve-init-mw-viewPageTarget-saveDialog-slide {
display: none;
}
.ve-init-mw-viewPageTarget-saveDialog-slide-diff .diff {
(bug 42654) Implement Show changes in Save dialog. Turned saveDialog-body into slide-based swapper. Moved footer into saveDiaog-body so that the license text doesn't stay under the diff-slide (and move body bottom padding to foot top) Wrapped buttons and title in a saveDialog-header and converted closeButton from absolutely positioned to a floated layout. This way the title doesn't need to be repositioned but will scooch over if the prevButton gets shown/hidden. Update API "diff" action to include table wrapper and table header. Without it the mediawiki CSS for diff doesn't work properly (needs colgroups for proper width of the "-" and "+" column etc) Renamed -saving class to -disabled for consistency. Set prop.disabled to really lock/unlock buttons, not just visual (otherwise the click handlers are still triggered on click, can potentially cause actions to be triggered when not expected) Using a ve message for "Show your changes" title instead of re-using core tooltip-savepage in a different context. Diff slide triggers "auto width" on dialog (inline undo of width: 29em), keeping min-width, to allow it to expand as wide as needed. Functions that I copied as base for onShowChanges and onShowChangeError had some incorrect argument descriptions. Fixed in both. Note: * Pass function to .off(), so that only that one is unbound instead of any "resize" handler on the page (by other extensions or gadgets or core) * NB: ve.bind ($.proxy) preserves internal guid, so that $.Event can find the bound function by the original reference. * keydown has an anonymous function, should either moved to prototype or namespaced, did latter for now, save enough and better than destructive .off('keydown') Change-Id: I9d05ef6e3e2461bdcf363232f7b0fbad5e24f506
2012-12-07 16:23:23 +00:00
width: auto;
table-layout: auto;
font-size: 0.8em;
}
.ve-init-mw-viewPageTarget-saveDialog-foot {
padding-top: 1em;
}
.ve-init-mw-viewPageTarget-saveDialog-license {
font-size: 0.7em;
line-height: 1.25em;
padding: 0;
margin: 0;
Kranitor #3: jQuerlyfornication ft. The Cascaders * Classicifation (JS) Use addClass instead of attr( 'class' ) whenever possible. addClass will manipulate the properties directly instead of (re-)setting an attribute which (most) browsers then sync with the properties. Difference between: elem.className and elem.setAttribute( 'class', .. ); Just like .checked, .value, .disabled and other interactive properties, the HTML attributes should only be used for initial values from the html document. When in javascript, only set properties. Attributes are either ignored or slow. * Styling (JS) Use .css() instead of attr( 'style' ). Again, setting properties instead of attributes is much faster, easier and safer. And this way it takes care of cross-browser issues where applicable, and less prone to error due to dealing with key-value pairs instead of css strings. Difference between: elem.style.foo = 'bar'; and elem.setAttribute( 'style', 'foo: bar;' ); * Finding (JS) Use .find( 'foo bar' ) instead of .find( 'foo' ).find( 'bar' ). It is CSS! * Vendor prefixes (CSS) It is important to always list newer (standards-compliant) versions *after* the older/prefixed variants. See also http://css-tricks.com/ordering-css3-properties/ So the following three: -webkit-gradient (Chrome, Safari 4) -webkit-linear-gradient (Chrome 10, Safari 5+) linear-gradient (CSS3 standard) ... must be in that order. Notes: - "-moz-opacity" is from before Mozilla 1.7 (Firefox < 0.8) Has not been renamed to "opacity" since Firefox 0.9. - Removed redundant "-moz-opacity" - Added "filter: alpha(opacity=**);" where missing - Fixed order of css3 properties (old to new) - Add standardized css3 versions where missing (some 'border-radius' groups didn't have the non-prefixed version) - Spacing - @embed - Shorten hex colors where possible (#dddddd -> #ddd) $ ack '#([0-9a-f])\1{5}' --css $ ack '#([0-9a-f])\1{2};' --css Change-Id: I386fedb9058c2567fd0af5f55291e9859a53329d
2012-07-28 19:15:23 +00:00
color: #999;
}
.ve-init-mw-viewPageTarget-saveDialog-summary {
background-color: #fff;
border: solid 1px #cccccc;
padding: 0.5em;
border-radius: 0.25em 0.25em 0 0;
}
.ve-init-mw-viewPageTarget-saveDialog-summary-focused {
border-color: #aaa;
}
.ve-init-mw-viewPageTarget-saveDialog-options {
position: relative;
background-color: #f7f7f7;
margin-bottom: 1em;
border: solid 1px #cccccc;
border-top: none;
border-radius: 0 0 0.25em 0.25em;
min-height: 2.25em;
}
.ve-init-mw-viewPageTarget-saveDialog-body label {
font-size: 0.8em;
line-height: 3em;
}
Kranitor #3: jQuerlyfornication ft. The Cascaders * Classicifation (JS) Use addClass instead of attr( 'class' ) whenever possible. addClass will manipulate the properties directly instead of (re-)setting an attribute which (most) browsers then sync with the properties. Difference between: elem.className and elem.setAttribute( 'class', .. ); Just like .checked, .value, .disabled and other interactive properties, the HTML attributes should only be used for initial values from the html document. When in javascript, only set properties. Attributes are either ignored or slow. * Styling (JS) Use .css() instead of attr( 'style' ). Again, setting properties instead of attributes is much faster, easier and safer. And this way it takes care of cross-browser issues where applicable, and less prone to error due to dealing with key-value pairs instead of css strings. Difference between: elem.style.foo = 'bar'; and elem.setAttribute( 'style', 'foo: bar;' ); * Finding (JS) Use .find( 'foo bar' ) instead of .find( 'foo' ).find( 'bar' ). It is CSS! * Vendor prefixes (CSS) It is important to always list newer (standards-compliant) versions *after* the older/prefixed variants. See also http://css-tricks.com/ordering-css3-properties/ So the following three: -webkit-gradient (Chrome, Safari 4) -webkit-linear-gradient (Chrome 10, Safari 5+) linear-gradient (CSS3 standard) ... must be in that order. Notes: - "-moz-opacity" is from before Mozilla 1.7 (Firefox < 0.8) Has not been renamed to "opacity" since Firefox 0.9. - Removed redundant "-moz-opacity" - Added "filter: alpha(opacity=**);" where missing - Fixed order of css3 properties (old to new) - Add standardized css3 versions where missing (some 'border-radius' groups didn't have the non-prefixed version) - Spacing - @embed - Shorten hex colors where possible (#dddddd -> #ddd) $ ack '#([0-9a-f])\1{5}' --css $ ack '#([0-9a-f])\1{2};' --css Change-Id: I386fedb9058c2567fd0af5f55291e9859a53329d
2012-07-28 19:15:23 +00:00
.ve-init-mw-viewPageTarget-saveDialog input[type="checkbox"] {
margin: 0 0.5em 0 1em;
line-height: 3em;
}
.ve-init-mw-viewPageTarget-saveDialog-editSummary-label {
display: none;
}
.ve-init-mw-viewPageTarget-saveDialog-editSummaryCount {
position: absolute;
right: 0;
top: 0;
bottom: 0;
border-left: solid 1px #eee;
line-height: 3em;
padding: 0 1em;
color: #aaa;
}
.ve-init-mw-viewPageTarget-saveDialog-editSummary {
border: none;
background-color: transparent;
margin: 0;
padding: 0;
resize: none;
font-size: 0.8em;
font-family: sans-serif;
}
.ve-init-mw-viewPageTarget-saveDialog-editSummary:focus {
outline: none;
}
/* Images */
.ve-init-mw-viewPageTarget-loading,
.ve-init-mw-viewPageTarget-saveDialog-working {
/* @embed */
background-image: url(images/loading.gif);
}