Merge "Make opacity rules compatible with IE6-8"

This commit is contained in:
jenkins-bot 2014-06-18 10:12:35 +00:00 committed by Gerrit Code Review
commit cffddda969
5 changed files with 15 additions and 9 deletions

View file

@ -106,11 +106,11 @@
} }
.mw-mmv-controls { .mw-mmv-controls {
opacity: 0; .opacity(0);
transition: opacity 0.25s; transition: opacity 0.25s;
&:hover { &:hover {
opacity: 1; .opacity(1);
} }
} }
} }

View file

@ -15,6 +15,12 @@
user-select: none; user-select: none;
} }
.opacity(@value) {
opacity: @value;
filter: e(%("alpha(opacity=%s)", round(@value * 100))); // IE6-8
zoom: 1; // IE 6-7 hasLayout hack
}
// from http://stackoverflow.com/a/12178019/323407 // from http://stackoverflow.com/a/12178019/323407
.fade-out(@backgroundColor: white) { .fade-out(@backgroundColor: white) {
@invisible: fadeout(@backgroundColor, 100%); @invisible: fadeout(@backgroundColor, 100%);
@ -25,7 +31,7 @@
background-image: -webkit-linear-gradient(top, @invisible 0%, @backgroundColor 100%); // Chrome10+,Safari5.1+ 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: -o-linear-gradient(top, @invisible 0%, @backgroundColor 100%); // Opera 11.10+
background-image: -ms-linear-gradient(top, @invisible 0%, @backgroundColor 100%); // IE10+ background-image: -ms-linear-gradient(top, @invisible 0%, @backgroundColor 100%); // IE10+
filter: e(%("progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 )", filter: e(%("progid:DXImageTransform.Microsoft.gradient( startColorstr='#%s', endColorstr='#%s',GradientType=0 )",
rgbahex(@invisible), rgbahex(@backgroundColor))); // IE6-9 rgbahex(@invisible), rgbahex(@backgroundColor))); // IE6-9
} }

View file

@ -38,7 +38,7 @@
.mw-mmv-image img.blurred { .mw-mmv-image img.blurred {
filter: blur(3px); filter: blur(3px);
-webkit-filter: blur(3px); -webkit-filter: blur(3px);
opacity: 0.8; .opacity(0.8);
} }
.mw-mmv-image img { .mw-mmv-image img {

View file

@ -12,12 +12,12 @@
cursor: pointer; cursor: pointer;
position: fixed; position: fixed;
background-repeat: no-repeat; background-repeat: no-repeat;
opacity: 0.8; .opacity(0.8);
border: none; border: none;
z-index: 1003; z-index: 1003;
&:hover { &:hover {
opacity: 1; .opacity(1);
} }
.unselectable; .unselectable;

View file

@ -79,7 +79,7 @@
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center bottom; background-position: center bottom;
margin: 0 auto; margin: 0 auto;
opacity: 0.7; .opacity(0.7);
transition: opacity 0.25s; transition: opacity 0.25s;
&.pointing-down { &.pointing-down {
@ -90,10 +90,10 @@
.mw-mmv-post-image.invite & { .mw-mmv-post-image.invite & {
/* @embed */ /* @embed */
background-image: url(img/drag-active.svg); background-image: url(img/drag-active.svg);
opacity: 0.9; .opacity(0.9);
} }
} }
.mw-mmv-post-image:hover .mw-mmv-drag-icon { .mw-mmv-post-image:hover .mw-mmv-drag-icon {
opacity: 1; .opacity(1);
} }