fix navigation icons SVG replacement, also hover and active opacity for IE

2 files changed, 16 insertions, 11 deletions

diff --git a/core/css/styles.css b/core/css/styles.css
index b41c205c21b..c88a45fd464 100644
--- a/core/css/styles.css
+++ b/core/css/styles.css
@@ -151,7 +151,7 @@ input[type="submit"].enabled { background:#66f866; border:1px solid #5e5; -moz-b
 #adminlogin, #adminpass, #user, #password { width:11.7em!important; padding-left:1.8em; }
 #adminlogin+label+img, #adminpass-icon, #user+label+img, #password-icon {
 	position:absolute; left:1.25em; top:1.65em;
-	opacity:.3;
+	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; filter:alpha(opacity=30); opacity:.3;
 }
 #adminpass-icon, #password-icon { top:1.1em; }
 input[name="password-clone"] { padding-left:1.8em; width:11.7em !important; }
@@ -191,10 +191,11 @@ label.infield { cursor:text !important; top:1.05em; left:.85em; }
 #show { position:absolute; right:1em; top:.8em; float:right; }
 #show, #personal-show { display:none; }
 #show + label { right:1em; top:1.25em!important; }
-#show:checked + label, #personal-show:checked + label { opacity:.8; }
+#show:checked + label, #personal-show:checked + label { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; filter:alpha(opacity=80); opacity:.8; }
 #show + label, #personal-show + label { 
 	position:absolute!important; height:14px; width:24px;
-	background-image:url("../img/actions/toggle.png"); background-repeat:no-repeat; opacity:.3;
+	background-image:url("../img/actions/toggle.png"); background-repeat:no-repeat;
+	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; filter:alpha(opacity=30); opacity:.3;
 }
 #pass2, input[name="personal-password-clone"] { padding:0.6em 2.5em 0.4em 0.4em; width:8em;}
 #personal-show + label { margin-top:1em; margin-left:-3em; }
@@ -234,25 +235,29 @@ fieldset.warning a { color:#b94a48 !important; font-weight:bold; }
 #navigation a {
 	display:block; padding:8px 0 4px;
 	text-decoration:none; font-size:10px; text-align:center;
-	color:#fff; text-shadow:#000 0 -1px 0; opacity:.5;
+	color:#fff; text-shadow:#000 0 -1px 0;
+	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter:alpha(opacity=50); opacity:.5;
 	white-space:nowrap; overflow:hidden; text-overflow:ellipsis; // ellipsize long app names
 }
-	#navigation a:hover, #navigation a:focus { opacity:.8; }
-	#navigation a.active { opacity:1; }
+	#navigation a:hover, #navigation a:focus { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; filter:alpha(opacity=80); opacity:.8; }
+	#navigation a.active { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter:alpha(opacity=100); opacity:1; }
 	#navigation .icon { display:block; width:32px; height:32px; margin:0 16px 0; }
 	#navigation li:first-child a { padding-top:16px; }
 #settings { float:right; margin-top:7px; color:#bbb; text-shadow:0 -1px 0 #000; }
 #expand { padding:15px; cursor:pointer; font-weight:bold; }
 #expand:hover, #expand:focus, #expand:active { color:#fff; }
-#expand img { opacity:.7; margin-bottom:-2px; }
-#expand:hover img, #expand:focus img, #expand:active img { opacity:1; }
+#expand img { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; filter:alpha(opacity=70); opacity:.7; margin-bottom:-2px; }
+#expand:hover img, #expand:focus img, #expand:active img { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter:alpha(opacity=100); opacity:1; }
 #expanddiv {
 	position:absolute; right:0; top:45px; z-index:76; display:none;
 	background-color:#444; border-bottom-left-radius:7px; box-shadow: 0 0 20px rgb(29,45,68);
 }
-	#expanddiv a { display:block; color:#fff; text-shadow:0 -1px 0 #000; padding:0 8px; opacity:.7; }
+	#expanddiv a {
+		display:block; color:#fff; text-shadow:0 -1px 0 #000; padding:0 8px;
+		-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; filter:alpha(opacity=70);opacity:.7;
+	}
 	#expanddiv a img { margin-bottom:-3px; }
-	#expanddiv a:hover, #expanddiv a:focus, #expanddiv a:active { opacity:1; }
+	#expanddiv a:hover, #expanddiv a:focus, #expanddiv a:active { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter:alpha(opacity=100); opacity:1; }
 
 
 /* VARIOUS REUSABLE SELECTORS */
diff --git a/core/templates/layout.user.php b/core/templates/layout.user.php
index c8b580b5fd9..282c3b20f68 100644
--- a/core/templates/layout.user.php
+++ b/core/templates/layout.user.php
@@ -61,7 +61,7 @@
 				<?php foreach($_['navigation'] as $entry): ?>
 					<li data-id="<?php echo $entry['id']; ?>">
 						<a href="<?php echo $entry['href']; ?>" title="" <?php if( $entry['active'] ): ?> class="active"<?php endif; ?>>
-							<img class="icon" src="<?php echo $entry['icon']; ?>"/>
+							<img class="icon svg" src="<?php echo $entry['icon']; ?>"/>
 							<?php echo $entry['name']; ?>
 						</a>
 					</li>