diff --git a/src/components/status.css b/src/components/status.css index d194e187..07dc04c9 100644 --- a/src/components/status.css +++ b/src/components/status.css @@ -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 {