SPR-835 only show an icon until hover

css/area_main-content.less

@@ -4,31 +4,29 @@
  * @author Jana Deutschlaender <deutschlaender@cosmocode.de>
  */
 
-
 #dokuwiki__content.main-content {
 
     .level2 {
         p a.media {
-            img{
-                border:1px dotted @color-site-bg;
+            img {
+                border: 1px dotted @color-site-bg;
 
             }
-           &:hover,&:focus,&:active{
-               img{
-                   border:1px solid @color-link;
-               }
-           }
+            &:hover, &:focus, &:active {
+                img {
+                    border: 1px solid @color-link;
+                }
+            }
 
         }
     }
-    div.section_highlight{
+    div.section_highlight {
         margin: 0;
         padding: 0 0 1rem 0;
         border: 1px solid #abced4;
         background-color: #fff;
-        background-image:
-            linear-gradient(90deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px),
-            linear-gradient(#eee .1em, transparent .1em);
+        background-image: linear-gradient(90deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px),
+        linear-gradient(#eee .1em, transparent .1em);
         background-size: 100% 1.2em;
         opacity: .7;
     }
@@ -36,19 +34,41 @@
         float: right;
         margin-top: 0;
         position: relative;
-        z-index:2;
+        z-index: 2;
         top: 0;
+
+        button {
+            background-color: transparent;
+            color: transparent;
+            border-color: transparent;
+
+            &::after {
+                content: '';
+                display: inline-block;
+                background: transparent url("svg.php?svg=pencil.svg&f=link") center center no-repeat;
+                height: 1em;
+                width: 1em;
+                background-size: contain;
+                margin-left: 0.5rem; // FIXME hard coded in plugins/edit.less
+            }
+
+            &:hover,
+            &:active,
+            &:focus {
+                background-color: @button_color;
+                color: @button_background;
+                border-color: @button_background;
+            }
+        }
     }
 }
 
-
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* min-width: 1440px */
 
 @media @screen_min-xlg {
 }
 
-
 /* + + + + + + + + + + + + + + + + + + + + + + + + + + */
 /* max-width: 1199px */
 

img/pencil.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20.71 7.04c.39-.39.39-1.04 0-1.41l-2.34-2.34c-.37-.39-1.02-.39-1.41 0l-1.84 1.83 3.75 3.75M3 17.25V21h3.75L17.81 9.93l-3.75-3.75L3 17.25z"/></svg>