cleanup styles, use SVG icon for audio

splitbrain · Dec 6, 2023 · 184a206 · 184a206
1 parent fddee47
commit 184a206
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 50 deletions.
diff --git a/ear-hearing.svg b/ear-hearing.svg
diff --git a/helper.php b/helper.php
@@ -194,7 +194,7 @@ protected function generateMagicCode($ident, $rand)
     {
         $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 @@ protected function htmlImage($ID, $secret)
      */
     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
diff --git a/style.css b/style.css
diff --git a/style.less 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;
+    }
+}