cleanup styles, use SVG icon for audio

ear-hearing.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24"><path d="M17,20C16.71,20 16.44,19.94 16.24,19.85C15.53,19.5 15.03,18.97 14.53,17.47C14,15.91 13.06,15.18 12.14,14.47C11.35,13.86 10.53,13.23 9.82,11.94C9.29,11 9,9.93 9,9C9,6.2 11.2,4 14,4C16.8,4 19,6.2 19,9H21C21,5.07 17.93,2 14,2C10.07,2 7,5.07 7,9C7,10.26 7.38,11.65 8.07,12.9C9,14.55 10.05,15.38 10.92,16.05C11.73,16.67 12.31,17.12 12.63,18.1C13.23,19.92 14,20.94 15.36,21.65C15.87,21.88 16.43,22 17,22A4,4 0 0,0 21,18H19A2,2 0 0,1 17,20M7.64,2.64L6.22,1.22C4.23,3.21 3,5.96 3,9C3,12.04 4.23,14.79 6.22,16.78L7.63,15.37C6,13.74 5,11.5 5,9C5,6.5 6,4.26 7.64,2.64M11.5,9A2.5,2.5 0 0,0 14,11.5A2.5,2.5 0 0,0 16.5,9A2.5,2.5 0 0,0 14,6.5A2.5,2.5 0 0,0 11.5,9Z"/></svg>

helper.php

@@ -194,7 +194,7 @@ class helper_plugin_captcha extends Plugin
     {
         $ident = hexdec(substr(md5($ident), 5, 5)); // use part of the md5 to generate an int
         $rand *= 0xFFFFF; // bitmask from the random number
-        $comb = (int) $rand ^ $ident; // combine both values
+        $comb = (int)$rand ^ $ident; // combine both values
         return md5($comb);
     }
 
@@ -411,24 +411,21 @@ class helper_plugin_captcha extends Plugin
      */
     protected function htmlAudioLink($secret, $ID)
     {
-        $img = DOKU_BASE . 'lib/plugins/captcha/sound.png'; // FIXME use svg icon
+
         $url = DOKU_BASE . 'lib/plugins/captcha/wav.php';
         $param = buildURLparams([
             'secret' => $secret,
             'id' => $ID,
         ]);
 
-        $icon = sprintf(
-            '<img src="%s" width="16" height="16" alt="%s" /></a>',
-            $img,
-            $this->getLang('soundlink')
-        );
+        $icon = inlineSVG(__DIR__ . '/ear-hearing.svg');
 
         return sprintf(
-            '<a href="%s?%s" class="JSnocheck audiolink" title="%s">%s</a>',
+            '<a href="%s?%s" class="JSnocheck audiolink" title="%s" style="height: %spx">%s</a>',
             $url,
             $param,
             $this->getLang('soundlink'),
+            $this->getConf('height'),
             $icon
         );
     }

style.css

@@ -1,42 +0,0 @@
-.dokuwiki #plugin__captcha_wrapper img {
-    margin: 1px;
-    vertical-align: bottom;
-    border: 1px solid __border__;
-}
-
-.dokuwiki #plugin__captcha_wrapper pre {
-    font-size: 70%;
-    font-family: monospace;
-    font-weight: bold;
-    border: none;
-    background-color: __background__;
-    color: __text__;
-    padding: 0;
-}
-
-.dokuwiki #plugin__captcha_wrapper .svg {
-    display: inline-block;
-    background-color: __background__;
-    vertical-align: bottom;
-    border: 1px solid __border__;
-}
-
-.dokuwiki #plugin__captcha_wrapper svg {
-    width: 100%;
-    height: 100%;
-}
-
-.dokuwiki #plugin__captcha_wrapper svg path {
-    fill: __text__;
-}
-
-.dokuwiki #plugin__captcha_wrapper .no {
-    display: none;
-}
-
-.dokuwiki #plugin__captcha_wrapper {
-    clear: left;
-    border: 1px solid __border__;
-    padding: 0.75em;
-    margin: 1em 0;
-}

style.less

@@ -0,0 +1,64 @@
+.dokuwiki #plugin__captcha_wrapper {
+    clear: left;
+    border: 1px solid @ini_border;
+    padding: 0.75em;
+    margin: 1em 0;
+
+    * {
+        vertical-align: middle;
+    }
+
+    img {
+        margin: 1px;
+        vertical-align: bottom;
+        border: 1px solid @ini_border;
+    }
+
+    pre {
+        font-size: 70%;
+        font-family: monospace;
+        font-weight: bold;
+        border: none;
+        background-color: @ini_background;
+        color: @ini_text;
+        padding: 0;
+    }
+
+    .svg {
+        display: inline-block;
+        background-color: @ini_background;
+        vertical-align: bottom;
+        border: 1px solid @ini_border;
+
+        svg {
+            width: 100%;
+            height: 100%;
+
+            path {
+                fill: @ini_text;
+            }
+        }
+    }
+
+    .audiolink {
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+        margin-left: 0.5em;
+        margin-right: 0.5em;
+        border: 1px solid @ini_border;
+        aspect-ratio: 1;
+
+        svg {
+            height: auto;
+            width: auto;
+            flex-grow: 1;
+            flex-shrink: 1;
+            fill: @ini_link;
+        }
+    }
+
+    .no {
+        display: none;
+    }
+}