From 5172d49d9d316a9f5700f3ab00a951df5062d2aa Mon Sep 17 00:00:00 2001
From: Andreas Gohr <andi@splitbrain.org>
Date: Sun, 5 Feb 2017 06:13:41 +0100
Subject: [PATCH] first very simple attempt at implementing svg pagetools

todos:

* edit action (and maybe others) use different icons depending on state,
  we can't rely on passing $post
* media details screen not adjusted, yet
* no RTL styles
* no focus/active styles
* the event needs to be adjusted (maybe throw it away and do a new one)
* some icons are not good (create = edit)
* possibly more
---
 lib/tpl/dokuwiki/css/pagetools.less           | 248 +++++-------------
 ...-default_checkbox-blank-circle-outline.svg |   1 +
 .../dokuwiki/images/tools/01-edit_pencil.svg  |   1 +
 .../images/tools/02-create_pencil.svg         |   1 +
 .../images/tools/03-draft_android-studio.svg  |   1 +
 .../images/tools/04-show_file-document.svg    |   1 +
 .../images/tools/05-source_file-xml.svg       |   1 +
 .../images/tools/06-revert_replay.svg         |   1 +
 .../images/tools/07-revisions_history.svg     |   1 +
 .../images/tools/08-backlink_link-variant.svg |   1 +
 .../tools/09-subscribe_email-outline.svg      |   1 +
 .../dokuwiki/images/tools/10-top_arrow-up.svg |   1 +
 lib/tpl/dokuwiki/main.php                     |  12 +-
 13 files changed, 89 insertions(+), 182 deletions(-)
 create mode 100644 lib/tpl/dokuwiki/images/tools/00-default_checkbox-blank-circle-outline.svg
 create mode 100644 lib/tpl/dokuwiki/images/tools/01-edit_pencil.svg
 create mode 100644 lib/tpl/dokuwiki/images/tools/02-create_pencil.svg
 create mode 100644 lib/tpl/dokuwiki/images/tools/03-draft_android-studio.svg
 create mode 100644 lib/tpl/dokuwiki/images/tools/04-show_file-document.svg
 create mode 100644 lib/tpl/dokuwiki/images/tools/05-source_file-xml.svg
 create mode 100644 lib/tpl/dokuwiki/images/tools/06-revert_replay.svg
 create mode 100644 lib/tpl/dokuwiki/images/tools/07-revisions_history.svg
 create mode 100644 lib/tpl/dokuwiki/images/tools/08-backlink_link-variant.svg
 create mode 100644 lib/tpl/dokuwiki/images/tools/09-subscribe_email-outline.svg
 create mode 100644 lib/tpl/dokuwiki/images/tools/10-top_arrow-up.svg

diff --git a/lib/tpl/dokuwiki/css/pagetools.less b/lib/tpl/dokuwiki/css/pagetools.less
index f441a1363..db8183260 100644
--- a/lib/tpl/dokuwiki/css/pagetools.less
+++ b/lib/tpl/dokuwiki/css/pagetools.less
@@ -13,203 +13,99 @@
     /* 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__usertools {
     /* move the tools just outside of the site */
     right: 40px;
 }
+
 [dir=rtl] #dokuwiki__usertools {
     right: auto;
     left: 40px;
 }
 
-
 #dokuwiki__pagetools {
+    @ico-width: 30px;
+    @ico-margin: 5px;
+    @size: (@ico-width + @ico-margin + @ico-margin);
+
     position: absolute;
-    right: -40px;
+    right: (-1 * @size);
     /* on same vertical level as first headline, because .page has 2em padding */
     top: 2em;
-    width: 40px;
-}
-[dir=rtl] #dokuwiki__pagetools {
-    right: auto;
-    left: -40px;
-}
-
-#dokuwiki__pagetools div.tools {
-    position: fixed;
-    width: 40px;
-}
-
-#dokuwiki__pagetools 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;
-}
-[dir=rtl] #dokuwiki__pagetools ul {
-    right: auto;
-    left: 0;
-    text-align: left;
-}
-
-#dokuwiki__pagetools ul li {
-    padding: 0;
-    margin: 0;
-    list-style: none;
-    font-size: 0.875em;
-}
-
-#dokuwiki__pagetools ul li a {
-    display: block;
-    min-height: 20px; /* 30 - 2x5 */
-    line-height: 20px;
-    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 */
-}
-
-#dokuwiki__pagetools ul li a:before {
-    content: url(images/pagetools-sprite.png?v=2);
-    display: inline-block;
-    font-size: 0;
-    line-height: 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:active {
-    background-color: @ini_background;
-    border-color: @ini_border;
-    border-radius: 2px;
-    box-shadow: 2px 2px 2px @ini_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?v=2);
-}
-
-#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 @ini_text_alt;
-}
-
-[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,
-#dokuwiki__pagetools ul li a:active,
-#dokuwiki__pagetools ul li a:focus {
-    text-decoration: none;
-}
-#dokuwiki__pagetools ul li a:hover {
-    background-color: @ini_background_alt;
-}
-
-/*____________ all available icons in sprite ____________*/
-
-@pagetools_icon_space: -90px;
-
-/**
- * page tools without highlighting
- *
- * @param string @action The action class
- * @param int @position Position in the page tools sprite
- */
-.pagetools-item(@action, @position) {
-    @position-active: (@position+0.5);
-
-    #dokuwiki__pagetools ul li a.@{action} {
-        background-position: right @pagetools_icon_space * @position;
-
-        &:before {
-            margin-top: @pagetools_icon_space * @position;
-        }
-        &:hover,
-        &:active,
-        &:focus {
-            background-position: right @pagetools_icon_space * @position-active;
-        }
-    }
-    [dir=rtl] #dokuwiki__pagetools ul li a.@{action} {
-        background-position: left @pagetools_icon_space * @position;
-
-        &:hover,
-        &:active,
-        &:focus {
-            background-position: left @pagetools_icon_space * @position-active;
+    width: @size;
+
+    div.tools {
+        position: fixed;
+        width: @size;
+
+        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: @size;
+                    vertical-align: middle;
+                    height: @size;
+
+                    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;
+                    }
+                }
+                a:hover {
+                    background-color: @ini_background_alt;
+
+                    svg {
+                        fill: @ini_link;
+                    }
+                }
+            }
         }
     }
 }
 
-/**
- * page tools with highlighting
- *
- * @param string @action The action class
- * @param int @position Position in the page tools sprite
- * @param string @mode The mode in which this tool should be highlighted
- */
-.pagetools-item(@action, @position, @mode) {
-  .pagetools-item(@action, @position);
-  @position-active: (@position+0.5);
-
-  .mode_@{mode} #dokuwiki__pagetools ul li a.@{action} {
-    background-position: right @pagetools_icon_space * @position-active;
-    &:before {
-      margin-top: @pagetools_icon_space * @position-active;
+#dokuwiki__pagetools:hover {
+    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;
+        }
     }
-  }
-  [dir=rtl] .mode_@{mode} #dokuwiki__pagetools ul li a.@{action} {
-    background-position: left @pagetools_icon_space * @position-active;
-  }
 }
-
-.pagetools-item(edit, 1);
-.pagetools-item(create, 2);
-.pagetools-item(show, 4);
-.pagetools-item(source, 5);
-.pagetools-item(draft, 3);
-.pagetools-item(revs, 7, revisions);
-.pagetools-item(backlink, 8, backlink);
-.pagetools-item(top, 10);
-.pagetools-item(revert, 6, revert);
-.pagetools-item(subscribe, 9, subscribe);
-.pagetools-item(mediaManager, 11);
-.pagetools-item(back, 12);
-.pagetools-item(img_backto, 12);
diff --git a/lib/tpl/dokuwiki/images/tools/00-default_checkbox-blank-circle-outline.svg b/lib/tpl/dokuwiki/images/tools/00-default_checkbox-blank-circle-outline.svg
new file mode 100644
index 000000000..beace41d2
--- /dev/null
+++ b/lib/tpl/dokuwiki/images/tools/00-default_checkbox-blank-circle-outline.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" /></svg>
\ No newline at end of file
diff --git a/lib/tpl/dokuwiki/images/tools/01-edit_pencil.svg b/lib/tpl/dokuwiki/images/tools/01-edit_pencil.svg
new file mode 100644
index 000000000..bb4259a3b
--- /dev/null
+++ b/lib/tpl/dokuwiki/images/tools/01-edit_pencil.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z" /></svg>
\ No newline at end of file
diff --git a/lib/tpl/dokuwiki/images/tools/02-create_pencil.svg b/lib/tpl/dokuwiki/images/tools/02-create_pencil.svg
new file mode 100644
index 000000000..bb4259a3b
--- /dev/null
+++ b/lib/tpl/dokuwiki/images/tools/02-create_pencil.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18,2.9 17.35,2.9 16.96,3.29L15.12,5.12L18.87,8.87M3,17.25V21H6.75L17.81,9.93L14.06,6.18L3,17.25Z" /></svg>
\ No newline at end of file
diff --git a/lib/tpl/dokuwiki/images/tools/03-draft_android-studio.svg b/lib/tpl/dokuwiki/images/tools/03-draft_android-studio.svg
new file mode 100644
index 000000000..99a9ef188
--- /dev/null
+++ b/lib/tpl/dokuwiki/images/tools/03-draft_android-studio.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M11,2H13V4H13.5A1.5,1.5 0 0,1 15,5.5V9L14.56,9.44L16.2,12.28C17.31,11.19 18,9.68 18,8H20C20,10.42 18.93,12.59 17.23,14.06L20.37,19.5L20.5,21.72L18.63,20.5L15.56,15.17C14.5,15.7 13.28,16 12,16C10.72,16 9.5,15.7 8.44,15.17L5.37,20.5L3.5,21.72L3.63,19.5L9.44,9.44L9,9V5.5A1.5,1.5 0 0,1 10.5,4H11V2M9.44,13.43C10.22,13.8 11.09,14 12,14C12.91,14 13.78,13.8 14.56,13.43L13.1,10.9H13.09C12.47,11.5 11.53,11.5 10.91,10.9H10.9L9.44,13.43M12,6A1,1 0 0,0 11,7A1,1 0 0,0 12,8A1,1 0 0,0 13,7A1,1 0 0,0 12,6Z" /></svg>
\ No newline at end of file
diff --git a/lib/tpl/dokuwiki/images/tools/04-show_file-document.svg b/lib/tpl/dokuwiki/images/tools/04-show_file-document.svg
new file mode 100644
index 000000000..4a23bd315
--- /dev/null
+++ b/lib/tpl/dokuwiki/images/tools/04-show_file-document.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M13,9H18.5L13,3.5V9M6,2H14L20,8V20A2,2 0 0,1 18,22H6C4.89,22 4,21.1 4,20V4C4,2.89 4.89,2 6,2M15,18V16H6V18H15M18,14V12H6V14H18Z" /></svg>
\ No newline at end of file
diff --git a/lib/tpl/dokuwiki/images/tools/05-source_file-xml.svg b/lib/tpl/dokuwiki/images/tools/05-source_file-xml.svg
new file mode 100644
index 000000000..8d8a0d424
--- /dev/null
+++ b/lib/tpl/dokuwiki/images/tools/05-source_file-xml.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M13,9H18.5L13,3.5V9M6,2H14L20,8V20A2,2 0 0,1 18,22H6C4.89,22 4,21.1 4,20V4C4,2.89 4.89,2 6,2M6.12,15.5L9.86,19.24L11.28,17.83L8.95,15.5L11.28,13.17L9.86,11.76L6.12,15.5M17.28,15.5L13.54,11.76L12.12,13.17L14.45,15.5L12.12,17.83L13.54,19.24L17.28,15.5Z" /></svg>
\ No newline at end of file
diff --git a/lib/tpl/dokuwiki/images/tools/06-revert_replay.svg b/lib/tpl/dokuwiki/images/tools/06-revert_replay.svg
new file mode 100644
index 000000000..f46929c9c
--- /dev/null
+++ b/lib/tpl/dokuwiki/images/tools/06-revert_replay.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M12,5V1L7,6L12,11V7A6,6 0 0,1 18,13A6,6 0 0,1 12,19A6,6 0 0,1 6,13H4A8,8 0 0,0 12,21A8,8 0 0,0 20,13A8,8 0 0,0 12,5Z" /></svg>
\ No newline at end of file
diff --git a/lib/tpl/dokuwiki/images/tools/07-revisions_history.svg b/lib/tpl/dokuwiki/images/tools/07-revisions_history.svg
new file mode 100644
index 000000000..8174ab9f5
--- /dev/null
+++ b/lib/tpl/dokuwiki/images/tools/07-revisions_history.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M11,7V12.11L15.71,14.9L16.5,13.62L12.5,11.25V7M12.5,2C8.97,2 5.91,3.92 4.27,6.77L2,4.5V11H8.5L5.75,8.25C6.96,5.73 9.5,4 12.5,4A7.5,7.5 0 0,1 20,11.5A7.5,7.5 0 0,1 12.5,19C9.23,19 6.47,16.91 5.44,14H3.34C4.44,18.03 8.11,21 12.5,21C17.74,21 22,16.75 22,11.5A9.5,9.5 0 0,0 12.5,2Z" /></svg>
\ No newline at end of file
diff --git a/lib/tpl/dokuwiki/images/tools/08-backlink_link-variant.svg b/lib/tpl/dokuwiki/images/tools/08-backlink_link-variant.svg
new file mode 100644
index 000000000..51f81d5a2
--- /dev/null
+++ b/lib/tpl/dokuwiki/images/tools/08-backlink_link-variant.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z" /></svg>
\ No newline at end of file
diff --git a/lib/tpl/dokuwiki/images/tools/09-subscribe_email-outline.svg b/lib/tpl/dokuwiki/images/tools/09-subscribe_email-outline.svg
new file mode 100644
index 000000000..2fdf26329
--- /dev/null
+++ b/lib/tpl/dokuwiki/images/tools/09-subscribe_email-outline.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M20,4H4A2,2 0 0,0 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V6A2,2 0 0,0 20,4M20,18H4V8L12,13L20,8V18M20,6L12,11L4,6V6H20V6Z" /></svg>
\ No newline at end of file
diff --git a/lib/tpl/dokuwiki/images/tools/10-top_arrow-up.svg b/lib/tpl/dokuwiki/images/tools/10-top_arrow-up.svg
new file mode 100644
index 000000000..bbf590ded
--- /dev/null
+++ b/lib/tpl/dokuwiki/images/tools/10-top_arrow-up.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M13,20H11V8L5.5,13.5L4.08,12.08L12,4.16L19.92,12.08L18.5,13.5L13,8V20Z" /></svg>
\ No newline at end of file
diff --git a/lib/tpl/dokuwiki/main.php b/lib/tpl/dokuwiki/main.php
index d095ccf4f..006468e38 100644
--- a/lib/tpl/dokuwiki/main.php
+++ b/lib/tpl/dokuwiki/main.php
@@ -77,12 +77,12 @@ $showSidebar = $hasSidebar && ($ACT=='show');
                             $data = array(
                                 'view'  => 'main',
                                 'items' => array(
-                                    'edit'      => tpl_action('edit',      true, 'li', true, '<span>', '</span>'),
-                                    'revert'    => tpl_action('revert',    true, 'li', true, '<span>', '</span>'),
-                                    'revisions' => tpl_action('revisions', true, 'li', true, '<span>', '</span>'),
-                                    'backlink'  => tpl_action('backlink',  true, 'li', true, '<span>', '</span>'),
-                                    'subscribe' => tpl_action('subscribe', true, 'li', true, '<span>', '</span>'),
-                                    'top'       => tpl_action('top',       true, 'li', true, '<span>', '</span>')
+                                    'edit'      => tpl_action('edit',      true, 'li', true, '<span>', '</span>'.inlinSVG(__DIR__ . '/images/tools/01-edit_pencil.svg')),
+                                    'revert'    => tpl_action('revert',    true, 'li', true, '<span>', '</span>'.inlinSVG(__DIR__ . '/images/tools/06-revert_replay.svg')),
+                                    'revisions' => tpl_action('revisions', true, 'li', true, '<span>', '</span>'.inlinSVG(__DIR__ . '/images/tools/07-revisions_history.svg')),
+                                    'backlink'  => tpl_action('backlink',  true, 'li', true, '<span>', '</span>'.inlinSVG(__DIR__ . '/images/tools/08-backlink_link-variant.svg')),
+                                    'subscribe' => tpl_action('subscribe', true, 'li', true, '<span>', '</span>'.inlinSVG(__DIR__ . '/images/tools/09-subscribe_email-outline.svg')),
+                                    'top'       => tpl_action('top',       true, 'li', true, '<span>', '</span>'.inlinSVG(__DIR__ . '/images/tools/10-top_arrow-up.svg'))
                                 )
                             );
 
-- 
GitLab