From be67f73760eef0f9f1c738cb08b3d50138ed7da6 Mon Sep 17 00:00:00 2001
From: Franz Liedke <franz@develophp.org>
Date: Fri, 24 Apr 2020 22:10:36 +0200
Subject: [PATCH] Tweak spoiler code

Refs #13, #14, flarum/core#2053.
---
 extensions/markdown/extend.php      |  5 ++++-
 extensions/markdown/less/forum.less | 12 ++++++++++--
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/extensions/markdown/extend.php b/extensions/markdown/extend.php
index f9de9d290..b457593bc 100644
--- a/extensions/markdown/extend.php
+++ b/extensions/markdown/extend.php
@@ -18,6 +18,9 @@ return [
     (new Extend\Formatter)
         ->configure(function (Configurator $config) {
             $config->Litedown;
-            $config->tags['ispoiler']->template = '<span class="spoiler" data-s9e-livepreview-ignore-attrs="style" onclick="removeAttribute(\'style\'); removeAttribute(\'class\')" style="background:#444;color:transparent"><xsl:apply-templates/></span>';
+
+            // Overwrite the default inline spoiler so that it is compatible
+            // with more styling for children in an external stylesheet.
+            $config->tags['ispoiler']->template = '<span class="spoiler" data-s9e-livepreview-ignore-attrs="class" onclick="removeAttribute(\'class\')"><xsl:apply-templates/></span>';
         })
 ];
diff --git a/extensions/markdown/less/forum.less b/extensions/markdown/less/forum.less
index 2252f4ef8..36f5f6522 100644
--- a/extensions/markdown/less/forum.less
+++ b/extensions/markdown/less/forum.less
@@ -6,14 +6,22 @@
  */
 
 span.spoiler {
+  // Style the inline spoiler itself: a dark block, invisible font
   background: #444;
   color: transparent;
-  cursor: default;
+
+  // Try to generically hide all possible children
   * {
+    // Links and other interactive elements would give their presence
+    // away when hovering
     pointer-events: none;
-    padding: 0;
+
+    // Children can have special text or background colors
+    background: transparent;
     color: transparent;
   }
+
+  // Hide images visually
   img {
     visibility: hidden;
   }