diff options
author | Raghu Nayyar <me@iraghu.com> | 2013-04-17 10:20:36 -0700 |
---|---|---|
committer | Raghu Nayyar <me@iraghu.com> | 2013-04-17 10:20:36 -0700 |
commit | a3e5da834bb2a0697d5e301eb74bbbc423301913 (patch) | |
tree | a64ab0f4129b8ae188bd4d6c0813fa938471bd9a /core/css | |
parent | 3b2a0523f8544601a330bffecc1f04645d92dfc4 (diff) | |
parent | 3d47c62a204393e68594bbcc00ccafde7a99f47d (diff) | |
download | nextcloud-server-a3e5da834bb2a0697d5e301eb74bbbc423301913.tar.gz nextcloud-server-a3e5da834bb2a0697d5e301eb74bbbc423301913.zip |
Merge pull request #2925 from owncloud/navigation-icon-fix
fix navigation hover effect, documentation
Diffstat (limited to 'core/css')
-rw-r--r-- | core/css/styles.css | 35 |
1 files changed, 29 insertions, 6 deletions
diff --git a/core/css/styles.css b/core/css/styles.css index 15df5852477..d3aec156852 100644 --- a/core/css/styles.css +++ b/core/css/styles.css @@ -266,19 +266,42 @@ fieldset.warning a { color:#b94a48 !important; font-weight:bold; } -moz-box-shadow:0 0 7px #000; -webkit-box-shadow:0 0 7px #000; box-shadow:0 0 7px #000; overflow:hidden; box-sizing:border-box; -moz-box-sizing:border-box; } -#navigation:hover { overflow-y:auto; } +#navigation:hover { overflow-y:auto; } /* show scrollbar only on hover */ #navigation a span { display:block; text-decoration:none; font-size:10px; text-align:center; 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 { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; filter:alpha(opacity=80); opacity:.8; } - #navigation a.active .icon, #navigation a.active span { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter:alpha(opacity=100); opacity:1; } + + /* icon opacity and hover effect */ + #navigation a img, + #navigation a span { + /* 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 */ #navigation .icon { - display:block; width:32px; height:32px; margin:0 16px 0; padding:8px 0 4px; - -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter:alpha(opacity=50); opacity:.5; + display:block; + width:32px; height:32px; + margin:0 16px 0; padding:8px 0 4px; } #navigation li:first-child a { padding-top:16px; } |