From 1f613d70ab3375a62d46e64e56020edd7c345c04 Mon Sep 17 00:00:00 2001
From: daudix <ddaudix@gmail.com>
Date: Wed, 11 Sep 2024 15:42:40 +0300
Subject: [PATCH] Add spoilter styles

---
 CHANGELOG.md          |  1 +
 content/demo/index.md | 32 +++++++++++++++++++++++++++++
 sass/_spoiler.scss    | 48 +++++++++++++++++++++++++++++++++++++++++++
 sass/style.scss       |  1 +
 4 files changed, 82 insertions(+)
 create mode 100644 sass/_spoiler.scss

diff --git a/CHANGELOG.md b/CHANGELOG.md
index eb8a0dc..a592a90 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -19,6 +19,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add fading on top/bottom of the search results container.
 - Add loading animation to "Load Comments" button.
 - Add special `switch` class for checkboxes (#70).
+- Add spoiler styles.
 - Add zoom-on-hover to custom comment emojis.
 - Return the scrollbar styling.
 - Style mentions and hashtags in comments.
diff --git a/content/demo/index.md b/content/demo/index.md
index 4ce6589..f51dd20 100644
--- a/content/demo/index.md
+++ b/content/demo/index.md
@@ -589,6 +589,38 @@ Blah blah <q>Inline Quote</q> hmm.
 
 <a class="external" href="https://example.org">Link to site</a>
 
+### Spoilers
+
+```html
+<span class="spoiler">Some spoiler</span>
+```
+
+You know, <span class="spoiler">Duckquill is a pretty dumb name.</span> I know, crazy.
+
+With `solid` class:
+
+```html
+<span class="spoiler solid">Some spoiler</span>
+```
+
+You know, <span class="spoiler solid">Duckquill is a pretty dumb name.</span> I know, crazy.
+
+When set on an image:
+
+```html
+<img class="spoiler" src="https://example.org/image.jpg" />
+```
+
+<img class="spoiler" src="https://i1.theportalwiki.net/img/2/23/Ashpd_blueprint.jpg" />
+
+With `solid` class:
+
+```html
+<img class="spoiler solid" src="https://example.org/image.jpg" />
+```
+
+<img class="spoiler solid" src="https://i1.theportalwiki.net/img/2/23/Ashpd_blueprint.jpg" />
+
 ### Buttons Dialog
 
 ```html.j2
diff --git a/sass/_spoiler.scss b/sass/_spoiler.scss
new file mode 100644
index 0000000..d380288
--- /dev/null
+++ b/sass/_spoiler.scss
@@ -0,0 +1,48 @@
+.spoiler {
+	filter: blur(0.25rem);
+	transition: var(--transition);
+
+	&:hover,
+	&:active {
+		filter: none;
+	}
+
+	&.solid {
+		filter: none;
+		border-radius: var(--rounded-corner-small);
+		background-color: var(--fg-muted-5);
+		color: transparent;
+
+		&:hover,
+		&:active {
+			background-color: transparent;
+			color: inherit;
+		}
+	}
+}
+
+img.spoiler {
+	opacity: var(--disabled);
+	clip-path: inset(0% 0% 0% 0% round var(--rounded-corner));
+	filter: blur(1rem);
+	transition: var(--transition-longer);
+
+	&:hover,
+	&:active {
+		opacity: 1;
+		clip-path: inset(-1rem -1rem -1rem -1rem round 0);
+		filter: none;
+	}
+
+	&.solid {
+		clip-path: none;
+		filter: brightness(0%);
+		box-shadow: none;
+		border-radius: var(--rounded-corner);
+
+		&:hover,
+		&:active {
+			filter: none;
+		}
+	}
+}
diff --git a/sass/style.scss b/sass/style.scss
index a4ceae9..5d363ef 100644
--- a/sass/style.scss
+++ b/sass/style.scss
@@ -28,6 +28,7 @@
 @use "not-found";
 @use "post-nav";
 @use "pre-container";
+@use "spoiler";
 @use "statements";
 @use "table";
 @use "tags";