1 files changed, 124 insertions, 0 deletions
diff --git a/templates/55/ad-hominem/css/pagetools.less b/templates/55/ad-hominem/css/pagetools.less
new file mode 100644
index 0000000..5473594
--- /dev/null
+++ b/templates/55/ad-hominem/css/pagetools.less
@@ -0,0 +1,124 @@
+/**
+ * This file provides the styles for the page tools
+ * (fly out navigation beside the page to edit, etc).
+ *
+ * @author Anika Henke <anika@selfthinker.org>
+ * @author Andreas Gohr <andi@splitbrain.org>
+ */
+
+#dokuwiki__site > .site {
+    /* give space to the right so the tools won't disappear on smaller screens */
+    /* it's 40px because the 30px wide icons will have 5px more spacing to the left and right */
+    padding-right: 40px;
+    /* give the same space to the left to balance it out */
+    padding-left: 40px;
+}
+
+.dokuwiki div.page {
+    height: 190px;
+    min-height: 190px; /* 30 (= height of icons) x 6 (= maximum number of possible tools) + 2x5 */
+    height: auto;
+}
+
+#dokuwiki__pagetools {
+    @ico-width: 28px;
+    @ico-margin: 8px;
+    @item-width: (@ico-width + @ico-margin + @ico-margin);
+    @item-height: (@ico-width + @ico-margin);
+
+    position: absolute;
+    right: (-1 * @item-width);
+    /* on same vertical level as first headline, because .page has 2em padding */
+    top: 2em;
+    width: @item-width;
+
+    div.tools {
+        position: fixed;
+        width: @item-width;
+
+        ul {
+            position: absolute;
+            right: 0;
+            text-align: right;
+            margin: 0;
+            padding: 0;
+            /* add transparent border to prevent jumping when proper border is added on hover */
+            border: 1px solid transparent;
+            z-index: 10;
+
+            li {
+                padding: 0;
+                margin: 0;
+                list-style: none;
+                font-size: 0.875em;
+
+                a {
+
+                    display: block;
+                    /* add transparent border to prevent jumping when proper border is added on focus */
+                    border: 1px solid transparent;
+                    white-space: nowrap;
+                    line-height: @item-height;
+                    vertical-align: middle;
+                    height: @item-height;
+
+                    span {
+                        display: none; // hide label until hover
+                        margin: 0 @ico-margin;
+                    }
+
+                    svg {
+                        width: @ico-width;
+                        height: @ico-width;
+                        margin: 0 @ico-margin;
+                        display: inline-block;
+                        vertical-align: middle;
+                        fill: @ini_border;
+                    }
+                }
+
+                // on interaction show the full item
+                a:active,
+                a:focus,
+                a:hover {
+                    background-color: @ini_background_alt;
+
+                    span {
+                        display: inline-block;
+                    }
+
+                    svg {
+                        fill: @ini_link;
+                    }
+                }
+            }
+        }
+    }
+
+    [dir=rtl] & {
+        right: auto;
+        left: (-1 * @item-width);
+
+        div.tools {
+            ul {
+                right: auto;
+                left: 0;
+                text-align: left;
+            }
+        }
+    }
+}
+
+// on hover or focus show all items
+#dokuwiki__pagetools:hover, #dokuwiki__pagetools:focus-within {
+    div.tools ul {
+        background-color: @ini_background;
+        border-color: @ini_border;
+        border-radius: 2px;
+        box-shadow: 2px 2px 2px @ini_text_alt;
+
+        li a span {
+            display: inline-block;
+        }
+    }
+}