mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/MultimediaViewer
synced 2024-11-28 10:00:18 +00:00
3df526b919
- error caused by select() called during focus event - HTMLElement not existing in older IEs - filter rotation for older IEs causing black background bug in IE9 - IE9 lacking progress would have its progress bar never reach 100% and disappear - Handle e.which value for clicks on IE < 9 Change-Id: I5727ef3f2a9f9aa77eac930f93320e6ce5964c78
56 lines
2.3 KiB
Plaintext
56 lines
2.3 KiB
Plaintext
// from http://css3please.com/
|
|
.box-round(@radius) {
|
|
-webkit-border-radius: @radius; // Android ≤ 1.6, iOS 1-3.2, Safari 3-4
|
|
border-radius: @radius; // Android 2.1+, Chrome, Firefox 4+, IE 9+, iOS 4+, Opera 10.50+, Safari 5+
|
|
|
|
// useful if you don't want a bg color from leaking outside the border:
|
|
background-clip: padding-box; // Android 2.2+, Chrome, Firefox 4+, IE 9+, iOS 4+, Opera 10.50+, Safari 4+
|
|
}
|
|
|
|
.unselectable() {
|
|
-moz-user-select: -moz-none;
|
|
-khtml-user-select: none;
|
|
-webkit-user-select: none;
|
|
-o-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
// from http://stackoverflow.com/a/12178019/323407
|
|
.fade-out(@backgroundColor: white) {
|
|
@invisible: fadeout(@backgroundColor, 100%);
|
|
background-image: linear-gradient(to bottom, @invisible 0%, @backgroundColor 100%); // W3C
|
|
background-image: -moz-linear-gradient(top, @invisible 0%, @backgroundColor 100%); // FF3.6+
|
|
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @invisible),
|
|
color-stop(100%, @backgroundColor)); // Chrome,Safari4+
|
|
background-image: -webkit-linear-gradient(top, @invisible 0%, @backgroundColor 100%); // Chrome10+,Safari5.1+
|
|
background-image: -o-linear-gradient(top, @invisible 0%, @backgroundColor 100%); // Opera 11.10+
|
|
background-image: -ms-linear-gradient(top, @invisible 0%, @backgroundColor 100%); // IE10+
|
|
filter: e(%("progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 )",
|
|
rgbahex(@invisible), rgbahex(@backgroundColor))); // IE6-9
|
|
}
|
|
|
|
.rotate(@degrees: 45deg) {
|
|
-webkit-transform: rotate(@degrees);
|
|
-moz-transform: rotate(@degrees);
|
|
-ms-transform: rotate(@degrees);
|
|
-o-transform: rotate(@degrees);
|
|
transform: rotate(@degrees);
|
|
|
|
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=(@degrees / 90.0));
|
|
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=(@degrees / 90.0))";
|
|
|
|
// The filter rules (which are for IE < 9) cause a bug in IE 9 where the rotated
|
|
// element will have a black background. So we have to disable them in IE9
|
|
filter: none \0/IE9;
|
|
-ms-filter: none \0/IE9;
|
|
}
|
|
|
|
// from http://pixelhunter.me/post/25782670606/css3-grayscale
|
|
.grayscale() {
|
|
-webkit-filter: grayscale(100%);
|
|
-moz-filter: grayscale(100%);
|
|
-ms-filter: grayscale(100%);
|
|
-o-filter: grayscale(100%);
|
|
filter: grayscale(100%);
|
|
filter: gray; // IE 6-9
|
|
} |