From c97b0f20e860cdd8e4dbb72b14ca1588ec7abda1 Mon Sep 17 00:00:00 2001 From: Michael Hamann Date: Mon, 25 Feb 2013 00:55:01 +0100 Subject: Fix pagetools display without images FS#2634 This makes the pagetools in non-hover/static/active-mode use another image replacement technique that falls back to the text when images are disabled. Furthermore this fixes the :focused-display in IE7 by using :active, too. --- lib/tpl/dokuwiki/css/pagetools.css | 97 ++++++++++++++++++++++++++++++++------ 1 file changed, 82 insertions(+), 15 deletions(-) (limited to 'lib/tpl/dokuwiki/css') diff --git a/lib/tpl/dokuwiki/css/pagetools.css b/lib/tpl/dokuwiki/css/pagetools.css index 0c31e283f..41f876d48 100644 --- a/lib/tpl/dokuwiki/css/pagetools.css +++ b/lib/tpl/dokuwiki/css/pagetools.css @@ -72,43 +72,65 @@ display: block; min-height: 20px; /* 30 - 2x5 */ line-height: 20px; - padding: 5px 40px 5px 5px; - background-image: url(images/pagetools-sprite.png); + padding: 0; background-position: right 0; background-repeat: no-repeat; /* add transparent border to prevent jumping when proper border is added on focus */ border: 1px solid transparent; white-space: nowrap; + width: 30px; + height: 30px; + overflow: hidden; + margin-left: auto; /* align right if the ul is larger because one item is focused */ } -[dir=rtl] #dokuwiki__pagetools ul li a { - padding: 5px 5px 5px 40px; - background-position: left 0; + +#dokuwiki__pagetools ul li a:before { + content: url(images/pagetools-sprite.png); + display: inline-block; + font-size: 0; + line-height: 0; } -/* hide labels accessibly when neither on hover nor on focus */ -#dokuwiki__pagetools ul li a span { - position: absolute; - clip: rect(0 0 0 0); /* IE7, IE6 */ - clip: rect(0, 0, 0, 0); +[dir=rtl] #dokuwiki__pagetools ul li a { + background-position: left 0; + margin-right: auto; + margin-left: 0; } /* show all tools on hover and individual tools on focus */ #dokuwiki__pagetools:hover ul, -#dokuwiki__pagetools ul li a:focus { +#dokuwiki__pagetools ul li a:focus, +#dokuwiki__pagetools ul li a:active { background-color: __background__; border-color: __border__; border-radius: 2px; box-shadow: 2px 2px 2px __text_alt__; } + +#dokuwiki__pagetools:hover ul li a, +#dokuwiki__pagetools ul li a:focus, +#dokuwiki__pagetools ul li a:active { + width: auto; + height: auto; + overflow: visible; + padding: 5px 40px 5px 5px; + background-image: url(images/pagetools-sprite.png); +} + +#dokuwiki__pagetools:hover ul li a:before, +#dokuwiki__pagetools ul li a:focus:before { + content: none; +} + [dir=rtl] #dokuwiki__pagetools:hover ul, [dir=rtl] #dokuwiki__pagetools ul li a:focus { box-shadow: -2px 2px 2px __text_alt__; } -#dokuwiki__pagetools:hover ul li a span, -#dokuwiki__pagetools ul li a:focus span { - display: inline; - position: static; +[dir=rtl] #dokuwiki__pagetools:hover li a, +[dir=rtl] #dokuwiki__pagetools ul li a:focus, +[dir=rtl] #dokuwiki__pagetools ul li a:active { + padding: 5px 5px 5px 40px; } #dokuwiki__pagetools ul li a:hover, @@ -139,6 +161,9 @@ background-position: left -45px; } +#dokuwiki__pagetools ul li a.create:before { + margin-top: -90px; +} #dokuwiki__pagetools ul li a.create { background-position: right -90px; } @@ -159,6 +184,9 @@ #dokuwiki__pagetools ul li a.show { background-position: right -270px; } +#dokuwiki__pagetools ul li a.show:before { + margin-top: -270px; +} #dokuwiki__pagetools ul li a.show:hover, #dokuwiki__pagetools ul li a.show:active, #dokuwiki__pagetools ul li a.show:focus { @@ -176,6 +204,9 @@ #dokuwiki__pagetools ul li a.source { background-position: right -360px; } +#dokuwiki__pagetools ul li a.source:before { + margin-top: -360px; +} #dokuwiki__pagetools ul li a.source:hover, #dokuwiki__pagetools ul li a.source:active, #dokuwiki__pagetools ul li a.source:focus { @@ -193,6 +224,9 @@ #dokuwiki__pagetools ul li a.draft { background-position: right -180px; } +#dokuwiki__pagetools ul li a.draft:before { + margin-top: -180px; +} #dokuwiki__pagetools ul li a.draft:hover, #dokuwiki__pagetools ul li a.draft:active, #dokuwiki__pagetools ul li a.draft:focus { @@ -210,12 +244,18 @@ #dokuwiki__pagetools ul li a.revs { background-position: right -540px; } +#dokuwiki__pagetools ul li a.revs:before { + margin-top: -540px; +} #dokuwiki__pagetools ul li a.revs:hover, #dokuwiki__pagetools ul li a.revs:active, #dokuwiki__pagetools ul li a.revs:focus, .mode_revisions #dokuwiki__pagetools ul li a.revs { background-position: right -585px; } +.mode_revisions #dokuwiki__pagetools ul li a.revs:before { + margin-top: -585px; +} [dir=rtl] #dokuwiki__pagetools ul li a.revs { background-position: left -540px; } @@ -229,12 +269,18 @@ #dokuwiki__pagetools ul li a.backlink { background-position: right -630px; } +#dokuwiki__pagetools ul li a.backlink:before { + margin-top: -630px; +} #dokuwiki__pagetools ul li a.backlink:hover, #dokuwiki__pagetools ul li a.backlink:active, #dokuwiki__pagetools ul li a.backlink:focus, .mode_backlink #dokuwiki__pagetools ul li a.backlink { background-position: right -675px; } +.mode_backlink #dokuwiki__pagetools ul li a.backlink:before { + margin-top: -675px; +} [dir=rtl] #dokuwiki__pagetools ul li a.backlink { background-position: left -630px; } @@ -248,6 +294,9 @@ #dokuwiki__pagetools ul li a.top { background-position: right -810px; } +#dokuwiki__pagetools ul li a.top:before{ + margin-top: -810px; +} #dokuwiki__pagetools ul li a.top:hover, #dokuwiki__pagetools ul li a.top:active, #dokuwiki__pagetools ul li a.top:focus { @@ -265,12 +314,18 @@ #dokuwiki__pagetools ul li a.revert { background-position: right -450px; } +#dokuwiki__pagetools ul li a.revert:before { + margin-top: -450px; +} #dokuwiki__pagetools ul li a.revert:hover, #dokuwiki__pagetools ul li a.revert:active, #dokuwiki__pagetools ul li a.revert:focus, .mode_revert #dokuwiki__pagetools ul li a.revert { background-position: right -495px; } +.mode_revert #dokuwiki__pagetools ul li a.revert:before { + margin-top: -450px; +} [dir=rtl] #dokuwiki__pagetools ul li a.revert { background-position: left -450px; } @@ -284,12 +339,18 @@ #dokuwiki__pagetools ul li a.subscribe { background-position: right -720px; } +#dokuwiki__pagetools ul li a.subscribe:before { + margin-top: -720px; +} #dokuwiki__pagetools ul li a.subscribe:hover, #dokuwiki__pagetools ul li a.subscribe:active, #dokuwiki__pagetools ul li a.subscribe:focus, .mode_subscribe #dokuwiki__pagetools ul li a.subscribe { background-position: right -765px; } +.mode_subscribe #dokuwiki__pagetools ul li a.subscribe:before { + margin-top: -765px; +} [dir=rtl] #dokuwiki__pagetools ul li a.subscribe { background-position: left -720px; } @@ -303,6 +364,9 @@ #dokuwiki__pagetools ul li a.mediaManager { background-position: right -900px; } +#dokuwiki__pagetools ul li a.mediaManager:before { + margin-top: -900px; +} #dokuwiki__pagetools ul li a.mediaManager:hover, #dokuwiki__pagetools ul li a.mediaManager:active, #dokuwiki__pagetools ul li a.mediaManager:focus { @@ -320,6 +384,9 @@ #dokuwiki__pagetools ul li a.back { background-position: right -990px; } +#dokuwiki__pagetools ul li a.back { + margin-top: -990px; +} #dokuwiki__pagetools ul li a.back:hover, #dokuwiki__pagetools ul li a.back:active, #dokuwiki__pagetools ul li a.back:focus { -- cgit v1.2.3 From 96e1f756daa0ff09e8a68c74a6fc4f606a723f77 Mon Sep 17 00:00:00 2001 From: Michael Hamann Date: Mon, 25 Feb 2013 00:56:37 +0100 Subject: Use "old" image replacement for pagetools in IE7 This fixes the image display in IE7 with the disadvantage that now in IE7 with images disabled the text won't be displayed anymore. --- lib/tpl/dokuwiki/css/pagetools.css | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) (limited to 'lib/tpl/dokuwiki/css') diff --git a/lib/tpl/dokuwiki/css/pagetools.css b/lib/tpl/dokuwiki/css/pagetools.css index 41f876d48..21e5c13ec 100644 --- a/lib/tpl/dokuwiki/css/pagetools.css +++ b/lib/tpl/dokuwiki/css/pagetools.css @@ -133,6 +133,25 @@ padding: 5px 5px 5px 40px; } +/* IE7 fixes, doesn't work without images */ + +#IE7 #dokuwiki__pagetools ul li a { + background-image: url(images/pagetools-sprite.png); +} + +#IE7 #dokuwiki__pagetools:hover ul li a span, +#IE7 #dokuwiki__pagetools ul li a:focus span, +#IE7 #dokuwiki__pagetools ul li a:active span { + clip: auto; + display: inline; + position: static; +} + +#IE7 #dokuwiki__pagetools ul li a span { + clip: rect(0 0 0 0); + position: absolute; +} + #dokuwiki__pagetools ul li a:hover, #dokuwiki__pagetools ul li a:active, #dokuwiki__pagetools ul li a:focus { -- cgit v1.2.3