mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2025-02-18 00:01:55 +03:00
Code Issues Projects Releases Packages 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 {