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, #adminpass, #user, #password { width:11.7em!important; padding-left:1.8em; }
#adminlogin+label+img, #adminpass-icon, #user+label+img, #password-icon { #adminlogin+label+img, #adminpass-icon, #user+label+img, #password-icon {
position:absolute; left:1.25em; top:1.65em; 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; } #adminpass-icon, #password-icon { top:1.1em; }
input[name="password-clone"] { padding-left:1.8em; width:11.7em !important; } 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 { position:absolute; right:1em; top:.8em; float:right; }
#show, #personal-show { display:none; } #show, #personal-show { display:none; }
#show + label { right:1em; top:1.25em!important; } #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 { #show + label, #personal-show + label {
position:absolute!important; height:14px; width:24px; 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;} #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; } #personal-show + label { margin-top:1em; margin-left:-3em; }
@ -234,25 +235,29 @@ fieldset.warning a { color:#b94a48 !important; font-weight:bold; }
#navigation a { #navigation a {
display:block; padding:8px 0 4px; display:block; padding:8px 0 4px;
text-decoration:none; font-size:10px; text-align:center; 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 white-space:nowrap; overflow:hidden; text-overflow:ellipsis; // ellipsize long app names
} }
#navigation a:hover, #navigation a:focus { opacity:.8; } #navigation a:hover, #navigation a:focus { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; filter:alpha(opacity=80); opacity:.8; }
#navigation a.active { opacity:1; } #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 .icon { display:block; width:32px; height:32px; margin:0 16px 0; }
#navigation li:first-child a { padding-top:16px; } #navigation li:first-child a { padding-top:16px; }
#settings { float:right; margin-top:7px; color:#bbb; text-shadow:0 -1px 0 #000; } #settings { float:right; margin-top:7px; color:#bbb; text-shadow:0 -1px 0 #000; }
#expand { padding:15px; cursor:pointer; font-weight:bold; } #expand { padding:15px; cursor:pointer; font-weight:bold; }
#expand:hover, #expand:focus, #expand:active { color:#fff; } #expand:hover, #expand:focus, #expand:active { color:#fff; }
#expand img { opacity:.7; margin-bottom:-2px; } #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 { opacity:1; } #expand:hover img, #expand:focus img, #expand:active img { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter:alpha(opacity=100); opacity:1; }
#expanddiv { #expanddiv {
position:absolute; right:0; top:45px; z-index:76; display:none; 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); 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 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 */ /* VARIOUS REUSABLE SELECTORS */

View File

@ -61,7 +61,7 @@
<?php foreach($_['navigation'] as $entry): ?> <?php foreach($_['navigation'] as $entry): ?>
<li data-id="<?php echo $entry['id']; ?>"> <li data-id="<?php echo $entry['id']; ?>">
<a href="<?php echo $entry['href']; ?>" title="" <?php if( $entry['active'] ): ?> class="active"<?php endif; ?>> <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']; ?> <?php echo $entry['name']; ?>
</a> </a>
</li> </li>