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.

1 files changed, 82 insertions, 15 deletions

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 {