mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2024-11-23 09:45:46 +03:00
Code Issues Projects Releases Packages Wiki Activity

Remove old spoiler effect

Browse source 
This was fun but sadly perf is really bad
This commit is contained in:
Lim Chee Aun 2023-01-24 22:21:04 +08:00
parent 5f89c0673a
commit 0ea65b2cfd
2 changed files with 0 additions and 68 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

57
index.html
View file

@ -45,62 +45,5 @@
<div id="app"></div>
<div id="modal-container"></div>
<script type="module" src="/src/main.jsx"></script>
<svg
xmlns="http://www.w3.org/2000/svg"
style="position: absolute; width: 0; height: 0"
>
<filter id="spoiler" x="-20%" y="-20%" width="140%" height="140%">
<feColorMatrix
type="matrix"
values="0.01 0 0 0 0
0.01 0 0 0 0
0.01 0 0 0 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>
<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>

11
src/components/status.css
View file

@ -188,11 +188,9 @@
~ *:not(.media-container, .card),
.status .content-container.has-spoiler .spoiler ~ .card .meta-container {
filter: blur(5px) invert(0.5);
/* filter: url(#spoiler); */
text-rendering: optimizeSpeed;
image-rendering: crisp-edges;
image-rendering: pixelated;
/* transform: translate3d(-5px, -5px, 0); */
pointer-events: none;
user-select: none;
contain: layout;
@ -206,15 +204,6 @@
image-rendering: pixelated;
animation: none !important;
}
/* @media (prefers-color-scheme: dark) {
.status
.content-container.has-spoiler
.spoiler
~ *:not(.media-container, .card),
.status .content-container.has-spoiler .spoiler ~ .card .meta-container {
filter: url(#spoiler-dark);
}
} */
.status .content-container.show-spoiler .spoiler {
border-style: dotted;
}