Make spoiler effect work in dark mode

This commit is contained in:
Lim Chee Aun 2022-12-24 22:52:19 +08:00
parent ec67811823
commit 05fd9bdd2c
2 changed files with 32 additions and 1 deletions

View file

@ -63,6 +63,32 @@
result="displacementMap"
/>
</filter>
<filter id="spoiler-dark" x="-20%" y="-20%" width="140%" height="140%">
<feColorMatrix
type="matrix"
values="1 0 0 .8 0
1 0 0 .8 0
1 0 0 .8 0
0 0 0 .5 0"
in="SourceGraphic"
result="colormatrix"
/>
<feTurbulence
type="turbulence"
baseFrequency=".5 .5"
numOctaves="10"
seed="1"
result="turbulence"
/>
<feDisplacementMap
in="colormatrix"
in2="turbulence"
scale="20"
xChannelSelector="R"
yChannelSelector="B"
result="displacementMap"
/>
</filter>
</svg>
</body>
</html>

View file

@ -185,6 +185,11 @@
user-select: none;
contain: layout;
}
@media (prefers-color-scheme: dark) {
.status .content-container.has-spoiler .spoiler ~ * {
filter: url(#spoiler-dark);
}
}
.status .content-container.has-spoiler .spoiler ~ .content ~ * {
opacity: 0.5;
}
@ -192,7 +197,7 @@
border-style: dotted;
}
.status .content-container.show-spoiler .spoiler ~ * {
filter: none;
filter: none !important;
transform: none;
pointer-events: auto;
user-select: auto;