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

This commit is contained in:
Jan-Christoph Borchardt 2013-02-14 10:59:30 +01:00
parent 09d9138f84
commit f9a6ed6c73
2 changed files with 16 additions and 11 deletions

View File

@ -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 */

View File

@ -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>