nki/phanpy
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Switch back to blur effect for spoilers

Browse source 
The SVG filter is too heavy for mobile browsers
This commit is contained in:
Lim Chee Aun 2023-01-05 13:30:19 +08:00
parent a429da37f4
commit a4b452e177
1 changed files with 34 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
src/components/status.css
View file

@ -182,30 +182,56 @@
gap: 8px;
align-items: center;
}
.status .content-container.has-spoiler .spoiler ~ * {
/* filter: blur(6px) invert(0.5); */
filter: url(#spoiler);
.status
.content-container.has-spoiler
.spoiler
~ *:not(.media-container, .card),
.status .content-container.has-spoiler .spoiler ~ .card .meta-container {
filter: blur(6px) invert(0.5);
/* filter: url(#spoiler); */
text-rendering: optimizeSpeed;
image-rendering: crisp-edges;
image-rendering: pixelated;
transform: translate3d(-5px, -5px, 0);
/* transform: translate3d(-5px, -5px, 0); */
pointer-events: none;
user-select: none;
contain: layout;
}
@media (prefers-color-scheme: dark) {
.status .content-container.has-spoiler .spoiler ~ * {
.status .content-container.has-spoiler .spoiler ~ .media-container .media > *,
.status .content-container.has-spoiler .spoiler ~ .card > img {
filter: blur(32px);
image-rendering: crisp-edges;
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;
}
.status .content-container.show-spoiler .spoiler ~ * {
.status
.content-container.show-spoiler
.spoiler
~ *:not(.media-container, .card),
.status .content-container.show-spoiler .spoiler ~ .card .meta-container {
filter: none !important;
transform: none;
pointer-events: auto;
user-select: auto;
text-rendering: auto;
image-rendering: auto;
}
.status .content-container.show-spoiler .spoiler ~ .media-container .media > *,
.status .content-container.show-spoiler .spoiler ~ .card > img {
filter: none;
image-rendering: auto;
}
.timeline-deck .status .content {