From 184a20604ec0bd2d0d0243ecbbed329e4674220e Mon Sep 17 00:00:00 2001
From: Andreas Gohr <andi@splitbrain.org>
Date: Wed, 6 Dec 2023 13:59:10 +0100
Subject: [PATCH] cleanup styles, use SVG icon for audio

---
 ear-hearing.svg |   1 +
 helper.php      |  13 ++++------
 sound.png       | Bin 610 -> 0 bytes
 style.css       |  42 -------------------------------
 style.less      |  64 ++++++++++++++++++++++++++++++++++++++++++++++++
 5 files changed, 70 insertions(+), 50 deletions(-)
 create mode 100644 ear-hearing.svg
 delete mode 100644 sound.png
 delete mode 100644 style.css
 create mode 100644 style.less

diff --git a/ear-hearing.svg b/ear-hearing.svg
new file mode 100644
index 0000000..68f5d6a
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/helper.php b/helper.php
index 2543a27..bc8d5ad 100644
--- a/helper.php
+++ b/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
         );
     }
diff --git a/sound.png b/sound.png
deleted file mode 100644
index 6056d234a9818d248987389d4a621e5c83ce0851..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 610
zcmV-o0-gPdP)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV00004XF*Lt006JZ
zHwB960000PbVXQnQ*UN;cVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBUz^hrcPR5;7U
z)6YxWU>FDRfPcVFW5d%9V=z{?A#;oriL5xO+n6O2X~nf!lQuE^VWXpgu83qI(qCF{
zS}dqc=wWy-J<X&4fG{u5VFkfly?*zaF^5>jhR6<I^76v-d7t;q`*HxdtAx8Ypj288
z+qU)npMi3@)W?b~$FWZ>YYDxINHb)T^nMSh)vA20R`F7)lzCSCZF94My}d73T>N+m
zpyXWPL`#FF;s+j3t(LL2R!6<Qg4NX(?Cflz)oNjTdkbd%!v%m6S%u!IzHTHAcUl6C
ziaKj~8T<QR(dl&1Znx2FHep#71M4tynR9^TjC`W#ptmuTUWGHR7y<cT9&&82*xmgM
z$8liWHj2d}48vgKPe`XV4>+EP98p9G9EaJe<5S)o@#CPu0JyV*YBbiNC<>y{C`3_2
zFc^fUC0P=`0GC2D0rmxry!i<{eh#|t2UjSV*w|QyY37m5W)KQZKoA6m%^;bK|K7sb
zq~^Y!1U(%y>Cs5W^^bz?JUQeR7IK)M&$43OYdMwDJVcVBtSjl_Ar8Hmr2)a$eK-tv
zNC4d)(7D`Piq~gVUR7m2k$BH5O6=$i%I6Kpa_sVNy!&j)9UKPT@*VWNNNm+UIUciF
wPJ00!a`S;oH}3WS@hUTDnx*^y9@F3E2OYGed{u8eJ^%m!07*qoM6N<$f+a~A3jhEB

diff --git a/style.css b/style.css
deleted file mode 100644
index 210ac38..0000000
--- a/style.css
+++ /dev/null
@@ -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;
-}
diff --git a/style.less b/style.less
new file mode 100644
index 0000000..9ad7351
--- /dev/null
+++ b/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;
+    }
+}