diff --git a/resources/mmv/mmv.lightboxinterface.less b/resources/mmv/mmv.lightboxinterface.less index 9d6450a50..4e2a389d2 100644 --- a/resources/mmv/mmv.lightboxinterface.less +++ b/resources/mmv/mmv.lightboxinterface.less @@ -106,11 +106,11 @@ } .mw-mmv-controls { - opacity: 0; + .opacity(0); transition: opacity 0.25s; &:hover { - opacity: 1; + .opacity(1); } } } \ No newline at end of file diff --git a/resources/mmv/mmv.mixins.less b/resources/mmv/mmv.mixins.less index d1956bce7..dea16a29c 100644 --- a/resources/mmv/mmv.mixins.less +++ b/resources/mmv/mmv.mixins.less @@ -15,6 +15,12 @@ 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 .fade-out(@backgroundColor: white) { @invisible: fadeout(@backgroundColor, 100%); @@ -25,7 +31,7 @@ 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 )", + filter: e(%("progid:DXImageTransform.Microsoft.gradient( startColorstr='#%s', endColorstr='#%s',GradientType=0 )", rgbahex(@invisible), rgbahex(@backgroundColor))); // IE6-9 } diff --git a/resources/mmv/ui/mmv.ui.canvas.less b/resources/mmv/ui/mmv.ui.canvas.less index 11a4053ec..d1f671875 100644 --- a/resources/mmv/ui/mmv.ui.canvas.less +++ b/resources/mmv/ui/mmv.ui.canvas.less @@ -38,7 +38,7 @@ .mw-mmv-image img.blurred { filter: blur(3px); -webkit-filter: blur(3px); - opacity: 0.8; + .opacity(0.8); } .mw-mmv-image img { diff --git a/resources/mmv/ui/mmv.ui.canvasButtons.less b/resources/mmv/ui/mmv.ui.canvasButtons.less index e30effb2f..640fbff9d 100644 --- a/resources/mmv/ui/mmv.ui.canvasButtons.less +++ b/resources/mmv/ui/mmv.ui.canvasButtons.less @@ -12,12 +12,12 @@ cursor: pointer; position: fixed; background-repeat: no-repeat; - opacity: 0.8; + .opacity(0.8); border: none; z-index: 1003; &:hover { - opacity: 1; + .opacity(1); } .unselectable; diff --git a/resources/mmv/ui/mmv.ui.metadataPanelScroller.less b/resources/mmv/ui/mmv.ui.metadataPanelScroller.less index 16cec5b5d..b1f757a87 100644 --- a/resources/mmv/ui/mmv.ui.metadataPanelScroller.less +++ b/resources/mmv/ui/mmv.ui.metadataPanelScroller.less @@ -79,7 +79,7 @@ background-repeat: no-repeat; background-position: center bottom; margin: 0 auto; - opacity: 0.7; + .opacity(0.7); transition: opacity 0.25s; &.pointing-down { @@ -90,10 +90,10 @@ .mw-mmv-post-image.invite & { /* @embed */ background-image: url(img/drag-active.svg); - opacity: 0.9; + .opacity(0.9); } } .mw-mmv-post-image:hover .mw-mmv-drag-icon { - opacity: 1; + .opacity(1); }