Finally make the Captcha Filter into an option

I'm fairly certain I've "fixed" the invisible captcha issue, but
for whatever reason, someone might just not want a filter.

src/General/Config.coffee

@@ -723,6 +723,10 @@ Config =
         true
         'Images expand over the post form and sidebar content, usually used with "Expand images" set to "full".'
       ]
+      'Captcha Filter': [
+        true
+        'Apply an SVG filter to the captcha to make it match your theme. WARNING: May cause invisible captchas.'
+      ]
 
     Indicators:
       'Emoji': [

src/General/css/layout.css

@@ -1586,10 +1586,11 @@ input:checked + .rice {
 .textarea-resize-none #qr textarea {
   resize: none;
 }
-.captcha-img {
+.captcha-img div {
   margin: 1px 0 0;
   text-align: center;
   line-height: 0;
+  background-color: #fff;
 }
 .captcha-img img {
   width: 246px;

src/General/css/theme.css

@@ -52,7 +52,7 @@ html {
   background: #{backgroundC};
   border-color: #{theme["Reply Border"]};
 }
-.captcha-img img {
+.captcha-filter .captcha-img div {
   <%= filter %>: url('<% if (type === 'userscript') { %>data:image/svg+xml,#{Style.svgs.captchafilter.replace /(\'|\")/g, '%22'}<% } %>#captcha-filter');
 }
 .silhouettize-mascots #mascot img,

src/Posting/QR.captcha.coffee

@@ -13,7 +13,7 @@ QR.captcha =
     imgContainer = $.el 'div',
       className: 'captcha-img'
       title: 'Reload reCAPTCHA'
-      innerHTML: '<img>'
+      innerHTML: '<div><img></div>'
     input = $.el 'input',
       className:    'captcha-input field'
       title:        'Verification'
@@ -22,7 +22,7 @@ QR.captcha =
       tabIndex:     45
     @nodes =
       challenge: $.id 'recaptcha_challenge_field_holder'
-      img:       imgContainer.firstChild
+      img:       $ 'img', imgContainer
       input:     input
 
     new MutationObserver(@load.bind @).observe @nodes.challenge,