From 694c080dd2e695d440876fe3b8f34f0ef4411267 Mon Sep 17 00:00:00 2001 From: Jan-Christoph Borchardt Date: Sun, 14 Apr 2013 19:25:46 +0200 Subject: [PATCH 1/3] fix navigation hover effect, documentation --- core/css/styles.css | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/core/css/styles.css b/core/css/styles.css index 043ca161c75..33bfd36eb0f 100644 --- a/core/css/styles.css +++ b/core/css/styles.css @@ -266,19 +266,22 @@ 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 */ } + /* icon opacity and hover effect */ + #navigation a { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter:alpha(opacity=50); opacity:.5; } #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; } + #navigation a.active { -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; } From 846f77ed9298f22623dd53b672f6ee52bd87713e Mon Sep 17 00:00:00 2001 From: Jan-Christoph Borchardt Date: Sun, 14 Apr 2013 19:30:16 +0200 Subject: [PATCH 2/3] additional comments --- core/css/styles.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/core/css/styles.css b/core/css/styles.css index 33bfd36eb0f..23e2f9a96ed 100644 --- a/core/css/styles.css +++ b/core/css/styles.css @@ -274,9 +274,9 @@ fieldset.warning a { color:#b94a48 !important; font-weight:bold; } white-space:nowrap; overflow:hidden; text-overflow:ellipsis; /* ellipsize long app names */ } /* icon opacity and hover effect */ - #navigation a { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter:alpha(opacity=50); opacity:.5; } - #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 a { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter:alpha(opacity=50); opacity:.5; } /* 50% opacity when inactive */ + #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.active { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter:alpha(opacity=100); opacity:1; } /* full opacity for the active app */ /* positioning */ #navigation .icon { display:block; From 3d47c62a204393e68594bbcc00ccafde7a99f47d Mon Sep 17 00:00:00 2001 From: Jan-Christoph Borchardt Date: Wed, 17 Apr 2013 17:23:12 +0200 Subject: [PATCH 3/3] apply navigation hover effect directly to img and span, cleaner code --- core/css/styles.css | 26 +++++++++++++++++++++++--- 1 file changed, 23 insertions(+), 3 deletions(-) diff --git a/core/css/styles.css b/core/css/styles.css index 23e2f9a96ed..7b0fc7644ac 100644 --- a/core/css/styles.css +++ b/core/css/styles.css @@ -273,10 +273,30 @@ fieldset.warning a { color:#b94a48 !important; font-weight:bold; } color:#fff; text-shadow:#000 0 -1px 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; /* ellipsize long app names */ } + /* 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: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.active { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter:alpha(opacity=100); opacity:1; } /* full opacity for the active app */ + #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;