You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
54 lines
1.2 KiB
SCSS
54 lines
1.2 KiB
SCSS
.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.
|
|
}
|
|
}
|
|
}
|