summaryrefslogtreecommitdiff
path: root/themes/tabi-lean/sass/parts/_spoiler.scss
diff options
context:
space:
mode:
authorAlejandro Soto <alejandro@34project.org>2025-09-13 14:55:15 -0600
committerAlejandro Soto <alejandro@34project.org>2025-09-13 14:55:15 -0600
commit87f85704af1fa866be83077b2b351c1fdad7c3ce (patch)
treeb49c8d49ef717e539bff6578992e692eea55d380 /themes/tabi-lean/sass/parts/_spoiler.scss
parent1a4c3216f027d6a6f36104547377b7b21faa5015 (diff)
parenta2ea06d513a5802964f8f0ef5795cec7e548ed7b (diff)
Merge commit 'a2ea06d513a5802964f8f0ef5795cec7e548ed7b' as 'themes/tabi-lean'
Diffstat (limited to 'themes/tabi-lean/sass/parts/_spoiler.scss')
-rw-r--r--themes/tabi-lean/sass/parts/_spoiler.scss53
1 files changed, 53 insertions, 0 deletions
diff --git a/themes/tabi-lean/sass/parts/_spoiler.scss b/themes/tabi-lean/sass/parts/_spoiler.scss
new file mode 100644
index 0000000..b43911b
--- /dev/null
+++ b/themes/tabi-lean/sass/parts/_spoiler.scss
@@ -0,0 +1,53 @@
+.spoiler-toggle {
+ display: none; // Hide the checkbox.
+}
+
+.spoiler-content {
+ display: inline-block; // Allow content to only take up its own width.
+ cursor: help; // Indicate interactive element.
+
+ .spoiler-hidden {
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ filter: blur(6px);
+ user-select: none;
+
+ a {
+ pointer-events: none; // Make links unclickable.
+ }
+ }
+}
+
+.spoiler-toggle:checked + .spoiler-content {
+ .spoiler-hidden {
+ filter: none;
+ user-select: auto;
+
+ a {
+ pointer-events: auto; // Enable clicking on links when revealed.
+ }
+ }
+}
+
+.spoiler-container.fixed-blur {
+ .spoiler-content:before {
+ display: inline-block; // Block display within the inline flow.
+ filter: blur(6px);
+ content: 'SPOILER'; // Display the word "SPOILER".
+ }
+
+ .spoiler-content .spoiler-hidden {
+ display: none; // Completely hide the actual content.
+ }
+
+ .spoiler-toggle:checked + .spoiler-content {
+ &:before {
+ content: none; // Hide the word "SPOILER".
+ }
+
+ .spoiler-hidden {
+ display: inline; // Reveal the actual content.
+ }
+ }
+}