From 2079519ebafd8510fb08484484d9c77a872dafa3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gerg=C5=91=20Tisza?= <tgr.huwiki@gmail.com>
Date: Tue, 17 Jun 2014 21:11:33 +0000
Subject: [PATCH] Make opacity rules compatible with IE6-8

Change-Id: I426c7af8f5467c3e06abaea4f98b7e1495157e95
---
 resources/mmv/mmv.lightboxinterface.less           | 4 ++--
 resources/mmv/mmv.mixins.less                      | 8 +++++++-
 resources/mmv/ui/mmv.ui.canvas.less                | 2 +-
 resources/mmv/ui/mmv.ui.canvasButtons.less         | 4 ++--
 resources/mmv/ui/mmv.ui.metadataPanelScroller.less | 6 +++---
 5 files changed, 15 insertions(+), 9 deletions(-)

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);
 }