Rework handling of icons and tinting of external icons

css/_edit.css

@@ -30,6 +30,27 @@
     float: right;
 }
 
+.dokuwiki div.toolbar #tool__bar button.toolbutton .toolicon {
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    background-color: @ini_icons;
+    -webkit-mask-image: var(--icon-url);
+    mask-image: var(--icon-url);
+    -webkit-mask-repeat: no-repeat;
+    mask-repeat: no-repeat;
+    -webkit-mask-position: center;
+    mask-position: center;
+    -webkit-mask-size: contain;
+    mask-size: contain;
+}
+
+.dokuwiki div.toolbar #tool__bar button.toolbutton:hover .toolicon,
+.dokuwiki div.toolbar #tool__bar button.toolbutton:active .toolicon,
+.dokuwiki div.toolbar #tool__bar button.toolbutton:focus .toolicon {
+    background-color: @ini_link;
+}
+
 /* picker popups (outside of .dokuwiki) */
 div.picker {
     width: 300px;

css/pagetools.less

@@ -79,7 +79,6 @@
                     text-transform: uppercase;
                 }
 
-                /* Hide SVG icons - we use text-only status bar style */
                 svg {
                     display: none;
                 }

css/usertools.less

@@ -19,7 +19,7 @@
             height: 1.4em;
             width: 1.4em;
             vertical-align: middle;
-            fill: @ini_border;
+            fill: @ini_icons;
             margin-right: 0.2em;
         }
     }