page tools part 1

css/area_nav-pagetools.less

@@ -5,14 +5,54 @@
  */
 
 nav#dokuwiki__pagetools{
-    &:hover{
-        ul{
-           background-color: #fff;
-        }
-    }
+
     ul {
-        li a {
-            background-image: none;
+        li {
+            font-size: .8rem;
+            line-height: 100%;
+
+            *{
+                font-size: .8rem;
+            }
+
+            a.backlink{
+                .hide-text-show-after();
+                .fontello();
+                line-height: 100%;
+                box-sizing: border-box;
+                border: 1px solid red;
+                font-size: 0;
+                &:before{
+                    font-size: 1rem;
+                    float: right;
+                    line-height: 1.2em;
+                    .btn-default-size();
+                    margin: .1rem auto 0;
+                    border: 1px solid blue;
+                }
+                &:hover, &:active, &:focus {
+                    padding: 0;
+                }
+            }
+
+            a.backlink{
+                .icon-link();
+            }
+
         }
     }
+
+    &:hover{
+         ul{
+             background-color: #fff;
+             box-shadow: @box-shadow-offset;
+             li{
+                 a.backlink{
+                     padding: 0;
+                 }
+             }
+         }
+     }
+
+
 }

css/base.less

@@ -103,6 +103,10 @@
 
 @height-context-bar: 50px;
 
+@box-shadow-offset: __box_shadow_offset__;
+@box-shadow:        __box_shadow__;
+@box-shadow-colored:__box_shadow_colored__;
+
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* all media */
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */

css/base_mixins.less

@@ -141,15 +141,25 @@
     }
 }
 
+.btn-default-size(){
+    height: 1rem;
+    width: 1rem;
+    min-height: 1.2em;
+    min-width: 1.4em;
+}
+
+.btn-default-height(){
+    height: 1rem;
+    min-height: 1.2em;
+    min-width: 1.4em;
+}
+
 .hide-text-show-before(){
     display: inline-block;
     overflow: hidden;
     white-space: nowrap;
     text-indent: -9999px;
-    height: 1rem;
-    width: 1rem;
-    min-height: 1.2em;
-    min-width: 1.4em;
+    .btn-default-size();
     &::before{
         text-indent: 0;
         float: left;
@@ -160,6 +170,22 @@
     }
 }
 
+
+.hide-text-show-after(){
+    display: inline-block;
+    overflow: hidden;
+    white-space: nowrap;
+    text-indent: -9999px;
+    &::before{
+        text-indent: 0;
+        float: right;
+    }
+    &::after{
+        text-indent: 0;
+        float: right;
+    }
+}
+
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* Screenreader / Hide */
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + */

style.ini

@@ -135,6 +135,7 @@ __nav_direct_background__   = "#FFF"
 __nav_direct_color__        = "#286da8"
 __box_shadow_colored__      = "0 0 .5em rgba(40,109,168,.5)"
 __box_shadow__              = "0 0 .5em rgb(153,153,153,.5)"
+__box_shadow_offset__       = ".1em .1em .1em rgb(153,153,153,.5)"
 __nav_menu_color__          = "#696969"
 __nav_menu_hover_color__    = "#286da8"
 __nav_menu_hover_bg__       = "#FFFFFF"