use filter blur instead backdrop filter

This commit is contained in:
srgooglo 2022-10-17 03:30:17 +02:00
parent b31d772d09
commit 75764f2a2d
2 changed files with 15 additions and 3 deletions

View File

@ -1,6 +1,7 @@
import React from "react" import React from "react"
import * as antd from "antd" import * as antd from "antd"
import Plyr from "plyr-react" import Plyr from "plyr-react"
import classnames from "classnames"
import { processString } from "utils" import { processString } from "utils"
@ -110,7 +111,7 @@ export default React.memo((props) => {
} }
return <div return <div
className="post_content" className={classnames("post_content", { ["nsfw"]: isNSFW && !nsfwAccepted })}
> >
{isNSFW && !nsfwAccepted && {isNSFW && !nsfwAccepted &&
<div className="nsfw_alert"> <div className="nsfw_alert">

View File

@ -26,6 +26,16 @@
color: var(--text-color); color: var(--text-color);
} }
&.nsfw {
.message {
filter: blur(10px);
}
.post_attachments {
filter: blur(25px);
}
}
.nsfw_alert { .nsfw_alert {
position: absolute; position: absolute;
@ -40,8 +50,9 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
backdrop-filter: blur(25px); // -webkit-backdrop-filter: blur(25px);
background-color: rgba(0, 0, 0, 0.5); // backdrop-filter: blur(25px);
//background-color: rgba(0, 0, 0, 0.5);
border-radius: 8px; border-radius: 8px;