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

diff --git a/core/css/styles.css b/core/css/styles.css
index b41c205c21bb7b68e4cbfff0baa5ff1be5251599..c88a45fd464a2b8a0e43a9a00abcd1809eb65229 100644 (file)
--- 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 c8b580b5fd9df78112c4b808cc595d47acccd7c2..282c3b20f684d001921c7bd07e5161bb2c80a48d 100644 (file)
--- 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>