From 9937f532ec55ba4b84b4e284557bd0f90413523d Mon Sep 17 00:00:00 2001
From: BordedDev <>
Date: Fri, 6 Jun 2025 01:22:40 +0200
Subject: [PATCH] Add styles for spoiler message functionality

---
 src/snek/static/base.css | 49 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 49 insertions(+)

diff --git a/src/snek/static/base.css b/src/snek/static/base.css
index 24b03cd..5300ce2 100644
--- a/src/snek/static/base.css
+++ b/src/snek/static/base.css
@@ -221,6 +221,55 @@ footer {
   hyphens: auto;
 }
 
+.message-content .spoiler {
+  background-color: rgba(255, 255, 255, 0.1);
+  /*color: transparent;*/
+  cursor: pointer;
+  border-radius: 0.5rem;
+  padding: 0.5rem;
+  position: relative;
+  height: 2.5rem;
+  overflow: hidden;
+  max-width: unset;
+}
+
+.message-content .spoiler * {
+  opacity: 0;
+  pointer-events: none;
+  visibility: hidden;
+}
+
+.spoiler:hover, .spoiler:focus, .spoiler:focus-within, .spoiler:active {
+  /*color: #e6e6e6;*/
+  /*transition: color 0.3s ease-in;*/
+  height: unset;
+  overflow: unset;
+}
+
+@keyframes delay-pointer-events {
+  0% {
+    visibility: hidden;
+  }
+  50% {
+    visibility: hidden;
+  }
+  100% {
+    visibility: visible;
+  }
+}
+
+.spoiler:hover * {
+  animation: unset;
+}
+
+.spoiler:hover *, .spoiler:focus *, .spoiler:focus-within *, .spoiler:active * {
+  opacity: 1;
+  transition: opacity 0.3s ease-in;
+  pointer-events: auto;
+  visibility: visible;
+  animation: delay-pointer-events 0.2s linear;
+}
+
 .message-content {
   max-width: 100%;
 }