From 91a9153764e17464beefc0b61aa19de058193e0b Mon Sep 17 00:00:00 2001
From: NamelessContributor <NamelessContributor@users.noreply.github.com>
Date: Thu, 7 Apr 2022 11:43:17 +0200
Subject: [PATCH] css: prevent acidentally opening spoilered links

A small delay on the pointer-events property prevents accidentally
opening a link inside a spoiler when tapping to reveal the spoiler on
mobile.
---
 app/javascript/src/styles/common/dtext.scss | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/app/javascript/src/styles/common/dtext.scss b/app/javascript/src/styles/common/dtext.scss
index b8caba70e..4ef648489 100644
--- a/app/javascript/src/styles/common/dtext.scss
+++ b/app/javascript/src/styles/common/dtext.scss
@@ -123,6 +123,17 @@ div.prose {
     color: var(--dtext-spoiler-hover-color);
   }
 
+  // Prevent accidentally opening a link when tapping a spoiler to reveal it
+  .spoiler:hover a {
+    animation: delay-pointer-events 50ms;
+  }
+
+  @keyframes delay-pointer-events {
+    0%, 99% {
+      pointer-events: none;
+    }
+  }
+
   .spoiler {
     background: var(--dtext-spoiler-background-color);
   }