2012-07-19 00:11:26 +00:00
|
|
|
/**
|
2012-08-30 20:04:22 +00:00
|
|
|
* VisualEditor MediaWiki initialization ViewPageTarget styles.
|
2012-07-19 21:25:16 +00:00
|
|
|
*
|
2012-07-19 00:11:26 +00:00
|
|
|
* @copyright 2011-2012 VisualEditor Team and others; see AUTHORS.txt
|
|
|
|
* @license The MIT License (MIT); see LICENSE.txt
|
|
|
|
*/
|
|
|
|
|
2012-08-15 23:35:52 +00:00
|
|
|
/* VisualEditor */
|
|
|
|
|
2012-08-27 21:34:08 +00:00
|
|
|
.ve-ui-menu {
|
|
|
|
font-size: 0.9em;
|
|
|
|
}
|
|
|
|
|
2012-07-20 23:59:59 +00:00
|
|
|
.ve-init-mw-viewPageTarget-pageTitle {
|
2012-06-14 21:31:08 +00:00
|
|
|
-webkit-transition: opacity 200ms ease-out;
|
|
|
|
-moz-transition: opacity 200ms ease-out;
|
2012-12-11 00:26:09 +00:00
|
|
|
-ms-transition: opacity 200ms ease-out;
|
2012-06-14 21:31:08 +00:00
|
|
|
-o-transition: opacity 200ms ease-out;
|
|
|
|
transition: opacity 200ms ease-out;
|
2012-06-14 01:26:21 +00:00
|
|
|
cursor: default;
|
2012-06-12 01:21:31 +00:00
|
|
|
}
|
|
|
|
|
2012-12-11 00:26:09 +00:00
|
|
|
.ve-init-mw-viewPageTarget-loading {
|
2012-06-11 20:24:20 +00:00
|
|
|
width: 128px;
|
|
|
|
height: 15px;
|
|
|
|
float: right;
|
2012-06-11 06:54:41 +00:00
|
|
|
}
|
|
|
|
|
2012-12-11 00:26:09 +00:00
|
|
|
/* Edit notices */
|
|
|
|
|
2012-11-30 23:09:34 +00:00
|
|
|
.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;
|
|
|
|
}
|
|
|
|
|
2012-12-11 01:44:44 +00:00
|
|
|
/* 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;
|
|
|
|
}
|
|
|
|
|
2012-12-11 00:26:09 +00:00
|
|
|
/* Buttons */
|
|
|
|
|
|
|
|
.ve-init-mw-viewPageTarget-button {
|
2012-05-31 00:09:06 +00:00
|
|
|
display: inline-block;
|
2012-12-11 00:26:09 +00:00
|
|
|
height: 1.8em;
|
|
|
|
margin: 0.1em 0.25em;
|
|
|
|
padding: 0 0.75em;
|
2012-07-10 14:08:58 +00:00
|
|
|
border-radius: 0.25em;
|
2012-05-31 00:09:06 +00:00
|
|
|
vertical-align: top;
|
2012-12-11 00:26:09 +00:00
|
|
|
color: #252525;
|
2012-12-07 16:06:43 +00:00
|
|
|
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
|
2012-12-11 00:26:09 +00:00
|
|
|
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;
|
2012-12-11 00:26:09 +00:00
|
|
|
background-color: #ffffff;
|
|
|
|
filter: progid:DXImageTransform.Microsoft.gradient(
|
2012-12-11 00:26:09 +00:00
|
|
|
GradientType=0,startColorstr=#ffffff, endColorstr=#f0f0f0
|
|
|
|
);
|
2012-12-11 00:26:09 +00:00
|
|
|
background-image: -webkit-gradient(
|
2012-12-11 00:26:09 +00:00
|
|
|
linear, right top, right bottom, color-stop(0%,#ffffff), color-stop(100%,#f0f0f0)
|
|
|
|
);
|
2012-12-11 00:26:09 +00:00
|
|
|
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%);
|
2012-12-07 16:23:23 +00:00
|
|
|
}
|
|
|
|
|
2012-12-11 00:26:09 +00:00
|
|
|
.ve-init-mw-viewPageTarget-button-constructive {
|
|
|
|
/* Green */
|
2012-12-07 16:23:23 +00:00
|
|
|
border: solid 1px #c3e59a;
|
2012-12-11 00:26:09 +00:00
|
|
|
background-color: #f0fbe1;
|
|
|
|
filter: progid:DXImageTransform.Microsoft.gradient(
|
2012-12-11 00:26:09 +00:00
|
|
|
GradientType=0,startColorstr=#f0fbe1, endColorstr=#c3e59a
|
|
|
|
);
|
2012-12-11 00:26:09 +00:00
|
|
|
background-image: -webkit-gradient(
|
2012-12-11 00:26:09 +00:00
|
|
|
linear, right top, right bottom, color-stop(0%,#f0fbe1), color-stop(100%,#c3e59a)
|
2012-07-10 14:08:58 +00:00
|
|
|
);
|
2012-12-11 00:26:09 +00:00
|
|
|
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%);
|
2012-05-31 00:09:06 +00:00
|
|
|
}
|
2012-06-12 01:21:31 +00:00
|
|
|
|
2012-12-11 00:26:09 +00:00
|
|
|
.ve-init-mw-viewPageTarget-button-primary {
|
|
|
|
/* Blue */
|
2012-12-07 16:23:23 +00:00
|
|
|
border: solid 1px #b0d9ee;
|
2012-12-11 00:26:09 +00:00
|
|
|
background-color: #eaf4fa;
|
|
|
|
filter: progid:DXImageTransform.Microsoft.gradient(
|
2012-12-11 00:26:09 +00:00
|
|
|
GradientType=0,startColorstr=#eaf4fa, endColorstr=#b0d9ee
|
2012-12-07 16:23:23 +00:00
|
|
|
);
|
2012-12-11 00:26:09 +00:00
|
|
|
background-image: -webkit-gradient(
|
2012-12-11 00:26:09 +00:00
|
|
|
linear, right top, right bottom, color-stop(0%,#eaf4fa), color-stop(100%,#b0d9ee)
|
2012-12-05 00:33:58 +00:00
|
|
|
);
|
2012-12-11 00:26:09 +00:00
|
|
|
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%);
|
2012-08-17 19:30:33 +00:00
|
|
|
}
|
|
|
|
|
2012-12-11 00:26:09 +00:00
|
|
|
.ve-init-mw-viewPageTarget-saveDialog-actions .ve-init-mw-viewPageTarget-button {
|
2012-08-17 23:01:17 +00:00
|
|
|
float: right;
|
2012-12-11 00:26:09 +00:00
|
|
|
margin: 0 0 0 1em;
|
2012-05-31 00:09:06 +00:00
|
|
|
}
|
2012-06-12 01:21:31 +00:00
|
|
|
|
2012-12-11 00:26:09 +00:00
|
|
|
.ve-init-mw-viewPageTarget-button:hover {
|
2012-12-05 00:33:58 +00:00
|
|
|
border-color: #aaa;
|
2012-05-31 00:09:06 +00:00
|
|
|
}
|
2012-06-12 01:21:31 +00:00
|
|
|
|
2012-12-11 22:13:54 +00:00
|
|
|
.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;
|
2012-12-03 19:56:34 +00:00
|
|
|
box-shadow: inset 0 1px 4px 0 rgba(0, 0, 0, 0.07);
|
2012-05-31 23:54:53 +00:00
|
|
|
}
|
|
|
|
|
2012-12-11 00:26:09 +00:00
|
|
|
.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);
|
2012-06-12 17:32:10 +00:00
|
|
|
opacity: 0.5;
|
2012-12-05 00:33:58 +00:00
|
|
|
cursor: default;
|
|
|
|
}
|
|
|
|
|
2012-12-11 00:26:09 +00:00
|
|
|
.ve-init-mw-viewPageTarget-button-disabled:hover {
|
2012-12-05 00:33:58 +00:00
|
|
|
border-color: #ccc;
|
|
|
|
box-shadow: none;
|
2012-06-12 17:32:10 +00:00
|
|
|
}
|
|
|
|
|
2012-12-11 00:26:09 +00:00
|
|
|
.ve-init-mw-viewPageTarget-button-label {
|
2012-06-12 01:21:31 +00:00
|
|
|
display: inline-block;
|
|
|
|
vertical-align: middle;
|
2012-12-11 00:26:09 +00:00
|
|
|
line-height: 2.3em;
|
2012-06-11 06:54:41 +00:00
|
|
|
font-size: 0.8em;
|
|
|
|
}
|
|
|
|
|
|
|
|
/* Save dialog styles */
|
|
|
|
|
2012-12-11 00:26:09 +00:00
|
|
|
.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;
|
|
|
|
}
|
|
|
|
|
2012-07-20 23:59:59 +00:00
|
|
|
.ve-init-mw-viewPageTarget-saveDialog {
|
2012-06-13 21:44:39 +00:00
|
|
|
display: none;
|
2012-06-12 17:32:10 +00:00
|
|
|
top: 0.25em;
|
2012-06-12 01:21:31 +00:00
|
|
|
right: 0.5em;
|
2012-06-11 06:54:41 +00:00
|
|
|
width: 29em;
|
2012-12-07 16:23:23 +00:00
|
|
|
min-width: 29em;
|
2012-11-05 18:32:09 +00:00
|
|
|
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);
|
2012-12-11 03:04:01 +00:00
|
|
|
padding: 2.5em 0.75em 0.75em 0.75em;
|
|
|
|
margin: 0 0 0 0.5em;
|
2012-11-05 18:32:09 +00:00
|
|
|
z-index: 3;
|
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;
|
2012-06-11 06:54:41 +00:00
|
|
|
}
|
|
|
|
|
2012-07-20 23:59:59 +00:00
|
|
|
.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;
|
2012-12-07 16:23:23 +00:00
|
|
|
padding-top: 1em;
|
|
|
|
overflow: hidden;
|
|
|
|
}
|
|
|
|
|
2012-12-11 22:13:54 +00:00
|
|
|
.ve-init-mw-viewPageTarget-saveDialog-slide {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
|
2012-12-11 23:19:21 +00:00
|
|
|
.ve-init-mw-viewPageTarget-saveDialog-slide-review .ve-init-mw-viewPageTarget-saveDialog-viewer {
|
|
|
|
margin-bottom: 1em;
|
|
|
|
}
|
|
|
|
|
|
|
|
.ve-init-mw-viewPageTarget-saveDialog-slide-review .ve-init-mw-viewPageTarget-saveDialog-viewer pre {
|
|
|
|
margin: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
.ve-init-mw-viewPageTarget-saveDialog-slide-review .ve-init-mw-viewPageTarget-saveDialog-viewer .diff {
|
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;
|
2012-06-11 06:54:41 +00:00
|
|
|
}
|
|
|
|
|
2012-12-11 23:19:21 +00:00
|
|
|
.ve-init-mw-viewPageTarget-saveDialog-license,
|
|
|
|
.ve-init-mw-viewPageTarget-saveDialog-report-notice {
|
2012-06-11 06:54:41 +00:00
|
|
|
font-size: 0.7em;
|
2012-08-17 19:30:33 +00:00
|
|
|
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;
|
2012-06-11 06:54:41 +00:00
|
|
|
}
|
|
|
|
|
2012-12-11 23:19:21 +00:00
|
|
|
.ve-init-mw-viewPageTarget-saveDialog-summary,
|
|
|
|
.ve-init-mw-viewPageTarget-saveDialog-report {
|
2012-08-17 19:30:33 +00:00
|
|
|
background-color: #fff;
|
|
|
|
border: solid 1px #cccccc;
|
|
|
|
padding: 0.5em;
|
|
|
|
border-radius: 0.25em 0.25em 0 0;
|
|
|
|
}
|
|
|
|
|
2012-12-11 23:19:21 +00:00
|
|
|
.ve-init-mw-viewPageTarget-saveDialog-report {
|
|
|
|
margin-bottom: 1em;
|
|
|
|
border-radius: 0.25em;
|
|
|
|
}
|
|
|
|
|
|
|
|
.ve-init-mw-viewPageTarget-saveDialog-summary-focused,
|
|
|
|
.ve-init-mw-viewPageTarget-saveDialog-report-focused {
|
2012-12-11 00:26:09 +00:00
|
|
|
border-color: #aaa;
|
|
|
|
}
|
|
|
|
|
2012-07-20 23:59:59 +00:00
|
|
|
.ve-init-mw-viewPageTarget-saveDialog-options {
|
2012-08-17 19:30:33 +00:00
|
|
|
position: relative;
|
|
|
|
background-color: #f7f7f7;
|
|
|
|
margin-bottom: 1em;
|
|
|
|
border: solid 1px #cccccc;
|
2012-12-11 00:26:09 +00:00
|
|
|
border-top: none;
|
2012-08-17 19:30:33 +00:00
|
|
|
border-radius: 0 0 0.25em 0.25em;
|
2012-12-06 05:57:53 +00:00
|
|
|
min-height: 2.25em;
|
2012-06-11 06:54:41 +00:00
|
|
|
}
|
|
|
|
|
2012-08-17 19:30:33 +00:00
|
|
|
.ve-init-mw-viewPageTarget-saveDialog-body label {
|
|
|
|
font-size: 0.8em;
|
|
|
|
line-height: 3em;
|
2012-06-11 06:54:41 +00:00
|
|
|
}
|
|
|
|
|
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"] {
|
2012-08-17 19:30:33 +00:00
|
|
|
margin: 0 0.5em 0 1em;
|
|
|
|
line-height: 3em;
|
2012-06-11 06:54:41 +00:00
|
|
|
}
|
2012-08-17 19:30:33 +00:00
|
|
|
|
|
|
|
.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;
|
|
|
|
}
|
|
|
|
|
2012-12-11 23:19:21 +00:00
|
|
|
.ve-init-mw-viewPageTarget-saveDialog-editSummary,
|
|
|
|
.ve-init-mw-viewPageTarget-saveDialog-problem {
|
2012-08-17 19:30:33 +00:00
|
|
|
border: none;
|
|
|
|
background-color: transparent;
|
|
|
|
margin: 0;
|
|
|
|
padding: 0;
|
|
|
|
resize: none;
|
2012-08-17 22:43:49 +00:00
|
|
|
font-size: 0.8em;
|
|
|
|
font-family: sans-serif;
|
2012-12-11 23:19:21 +00:00
|
|
|
height: 5em;
|
2012-08-17 19:30:33 +00:00
|
|
|
}
|
|
|
|
|
2012-12-11 23:19:21 +00:00
|
|
|
.ve-init-mw-viewPageTarget-saveDialog-editSummary:focus,
|
|
|
|
.ve-init-mw-viewPageTarget-saveDialog-problem:focus {
|
2012-08-17 19:30:33 +00:00
|
|
|
outline: none;
|
2012-06-11 06:54:41 +00:00
|
|
|
}
|
2012-12-11 00:26:09 +00:00
|
|
|
|
|
|
|
/* Images */
|
|
|
|
|
|
|
|
.ve-init-mw-viewPageTarget-loading,
|
|
|
|
.ve-init-mw-viewPageTarget-saveDialog-working {
|
|
|
|
/* @embed */
|
|
|
|
background-image: url(images/loading.gif);
|
|
|
|
}
|