wikimedia/mediawiki-extensions-VisualEditor
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/extensions/VisualEditor synced 2024-12-03 02:16:51 +00:00
Code Issues Packages Projects Releases Wiki Activity
mediawiki-extensions-Visual.../modules/ve/init/mw/styles/ve.init.mw.ViewPageTarget.css
Timo Tijhof 077e21867e 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 13:05:57 -07:00

252 lines
6.1 KiB
CSS
Raw Blame History

/**
* VisualEditor initialization ViewPageTarget styles.
*
* @copyright 2011-2012 VisualEditor Team and others; see AUTHORS.txt
* @license The MIT License (MIT); see LICENSE.txt
*/
.ve-surface {
margin-top: 0.8em;
}
.es-toolbar-wrapper {
margin: -1em -1em 1em -1em;
position: relative;
}
.es-toolbar {
display: none;
margin-left: 1px;
}
.ve-init-mw-viewPageTarget-pageTitle {
-webkit-transition: opacity 200ms ease-out;
-moz-transition: opacity 200ms ease-out;
-o-transition: opacity 200ms ease-out;
transition: opacity 200ms ease-out;
cursor: default;
}
.ve-init-mw-viewPageTarget-pageToc {
display: inline-block;
overflow: hidden;
}
.ve-init-mw-viewPageTarget-loadingSpinner {
/* @embed */
background-image: url(images/loading.gif);
width: 128px;
height: 15px;
float: right;
}
.ve-init-mw-viewPageTarget-toolbar-feedbackButton {
display: inline-block;
cursor: pointer;
vertical-align: top;
padding: 0.25em;
height: 22px;
margin-right: 0.25em;
border: solid 1px transparent;
}
.ve-init-mw-viewPageTarget-toolbar-feedbackButton a {
display: inline-block;
vertical-align: middle;
height: 32px;
padding-left: 4px;
padding-right: 4px;
font-size: 0.8em;
}
.ve-init-mw-viewPageTarget-toolbar-saveButton {
display: inline-block;
border: solid 1px #c3e59a;
-webkit-border-radius: 0.25em;
-moz-border-radius: 0.25em;
-o-border-radius: 0.25em;
border-radius: 0.25em;
cursor: pointer;
vertical-align: top;
font-size: 1em;
padding: 0.25em 0.5em;
height: 22px;
margin-right: 0.25em;
/* Fancy CSS background */
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, #c3e59a),
color-stop(1, #f0fbe1)
);
background-image: -webkit-linear-gradient(bottom, #c3e59a 0%, #f0fbe1 100%);
background-image: -moz-linear-gradient(bottom, #c3e59a 0%, #f0fbe1 100%);
background-image: -ms-linear-gradient(bottom, #c3e59a 0%, #f0fbe1 100%);
background-image: -o-linear-gradient(bottom, #c3e59a 0%, #f0fbe1 100%);
background-image: linear-gradient(bottom, #c3e59a 0%, #f0fbe1 100%);
}
.ve-init-mw-viewPageTarget-toolbar-saveButton:before {
content: " ";
position: absolute;
display: block;
height: 22px;
}
.ve-init-mw-viewPageTarget-toolbar-saveButton:hover {
border-color: #eee;
}
.ve-init-mw-viewPageTarget-toolbar-saveButton:active,
.ve-init-mw-viewPageTarget-toolbar-saveButton-down {
border-color: #ddd;
-webkit-box-shadow: inset 0px 1px 4px 0px rgba(0, 0, 0, 0.07);
-moz-box-shadow: inset 0px 1px 4px 0px rgba(0, 0, 0, 0.07);
box-shadow: inset 0px 1px 4px 0px rgba(0, 0, 0, 0.07);
}
.ve-init-mw-viewPageTarget-toolbar-saveButton-disabled {
filter: alpha(opacity=50);
opacity: 0.5;
}
.ve-init-mw-viewPageTarget-toolbar-saveButton-label {
display: inline-block;
vertical-align: middle;
height: 32px;
padding-left: 4px;
font-size: 0.8em;
}
/* mini save button */
.ve-init-mw-viewPageTarget-saveDialog-closeButton {
right: .025em;
width: 22px;
/* @embed */
background-image: url(../../../ui/styles/images/close.png);
background-position: center center;
background-repeat: no-repeat;
}
.ve-init-mw-viewPageTarget-saveDialog-saveButton {
position: absolute;
cursor: pointer;
border: 1px solid #c3e59a;
margin-top: 10px;
right: 10px;
font-size: 1em;
padding: 0.5em 1em;
-webkit-border-radius: 0.25em;
-moz-border-radius: 0.25em;
-o-border-radius: 0.25em;
border-radius: 0.25em;
/* Fancy CSS background */
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, #c3e59a),
color-stop(1, #f0fbe1)
);
background-image: -webkit-linear-gradient(bottom, #c3e59a 0%, #f0fbe1 100%);
background-image: -moz-linear-gradient(bottom, #c3e59a 0%, #f0fbe1 100%);
background-image: -ms-linear-gradient(bottom, #c3e59a 0%, #f0fbe1 100%);
background-image: -o-linear-gradient(bottom, #c3e59a 0%, #f0fbe1 100%);
background-image: linear-gradient(bottom, #c3e59a 0%, #f0fbe1 100%);
}
.ve-init-mw-viewPageTarget-saveDialog-saveButton:active,
.ve-init-mw-viewPageTarget-saveDialog-saveButton-down {
/* Fancy CSS background */
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, #f0fbe1),
color-stop(1, #c3e59a)
);
background-image: -webkit-linear-gradient(bottom, #f0fbe1 0%, #c3e59a 100%);
background-image: -moz-linear-gradient(bottom, #f0fbe1 0%, #c3e59a 100%);
background-image: -ms-linear-gradient(bottom, #f0fbe1 0%, #c3e59a 100%);
background-image: -o-linear-gradient(bottom, #f0fbe1 0%, #c3e59a 100%);
background-image: linear-gradient(bottom, #f0fbe1 0%, #c3e59a 100%);
}
.ve-init-mw-viewPageTarget-saveDialog-saveButton:hover {
border-color: #a7cd76;
}
.ve-init-mw-viewPageTarget-saveDialog-saveButton-saving,
.ve-init-mw-viewPageTarget-saveDialog-saveButton-saving:hover {
background-color: #e6f2cc;
background-image: none;
color: #ccc;
border-color: #e3f0c6;
}
.ve-init-mw-viewPageTarget-toolbar-saveButton-icon,
.ve-init-mw-viewPageTarget-saveDialog-saveButton-icon {
display: inline-block;
vertical-align: middle;
height: 2em;
width: 28px;
margin-right: -4px;
background: transparent;
/* @embed */
background-image: url(../../../ui/styles/images/accept-clear.png);
background-position: right top;
background-repeat: no-repeat;
}
.ve-init-mw-viewPageTarget-saveDialog-saveButton-label {
display: inline-block;
vertical-align: middle;
height: 32px;
line-height: 2.125em;
padding-left: 4px;
font-size: 1.2em;
}
.ve-init-mw-viewPageTarget-saveDialog-saveButton-saving
.ve-init-mw-viewPageTarget-saveDialog-saveButton-icon {
/* @embed */
background-image: url(images/saving.gif);
background-position: right 46%;
}
/* Save dialog styles */
.ve-init-mw-viewPageTarget-saveDialog {
display: none;
top: 0.25em;
right: 0.5em;
width: 29em;
}
.ve-init-mw-viewPageTarget-saveDialog-body {
border-top: 1px solid #ddd;
padding: 10px 0;
font-size: 12px;
}
.ve-init-mw-viewPageTarget-saveDialog-license {
font-size: 0.7em;
color: #999;
}
.ve-init-mw-viewPageTarget-saveDialog-options {
float: left;
}
.ve-init-mw-viewPageTarget-saveDialog input[type="text"] {
width: 98%;
font-size: 12px;
padding: 4px;
margin: 10px 0;
}
.ve-init-mw-viewPageTarget-saveDialog input[type="checkbox"] {
margin-right: 5px;
}
Reference in a new issue View git blame Copy permalink