mbk-lab
/
nextcloud
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

apply navigation hover effect directly to img and span, cleaner code

This commit is contained in:
Jan-Christoph Borchardt 2013-04-17 17:23:12 +02:00
parent 846f77ed92
commit 3d47c62a20
1 changed files with 23 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
core/css/styles.css
View File

@ -273,10 +273,30 @@ fieldset.warning a { color:#b94a48 !important; font-weight:bold; }
color:#fff; text-shadow:#000 0 -1px 0; color:#fff; text-shadow:#000 0 -1px 0;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis; /* ellipsize long app names */ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; /* ellipsize long app names */
} }
/* icon opacity and hover effect */ /* icon opacity and hover effect */
#navigation a { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter:alpha(opacity=50); opacity:.5; } /* 50% opacity when inactive */ #navigation a img,
#navigation a:hover, #navigation a:focus { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; filter:alpha(opacity=80); opacity:.8; } /* 80% opacity when hovered or focused */ #navigation a span {
#navigation a.active { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter:alpha(opacity=100); opacity:1; } /* full opacity for the active app */ /* 50% opacity when inactive */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
opacity: .5;
}
#navigation a:hover img, #navigation a:focus img,
#navigation a:hover span, #navigation a:focus span {
/* 80% opacity when hovered or focused */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter: alpha(opacity=80);
opacity: .8;
}
#navigation a.active img,
#navigation a.active span {
/* full opacity for the active app */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
/* positioning */ /* positioning */
#navigation .icon { #navigation .icon {
display:block; display:block;