gofnnp/w-aura
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: fix blur

Browse Source
This commit is contained in:
yury 2024-06-22 04:52:46 +03:00
parent aebd1cf0e8
commit 101b451a38
2 changed files with 26 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
src/components/BlurComponent/styles.scss
View File

@ -2,6 +2,8 @@
position: relative; position: relative;
height: 100%; height: 100%;
width: 100%; width: 100%;
text-align: center;
text-align: -webkit-center;
.gradient-blur { .gradient-blur {
position: absolute; position: absolute;
@ -24,86 +26,57 @@
&::before { &::before {
content: ""; content: "";
z-index: 1; z-index: 1;
backdrop-filter: blur(2px); backdrop-filter: blur(1px);
mask: linear-gradient( -webkit-backdrop-filter: blur(1px);
to bottom, mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 12.5%, rgb(0, 0, 0) 25%, rgba(0, 0, 0, 0) 37.5%);
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 1) 12.5%,
rgba(0, 0, 0, 1) 25%,
rgba(0, 0, 0, 0) 37.5%
);
} }
& > div:nth-of-type(1) { & > div:nth-of-type(1) {
z-index: 2; z-index: 2;
backdrop-filter: blur(1px); backdrop-filter: blur(1px);
mask: linear-gradient( -webkit-backdrop-filter: blur(1px);
to bottom, mask: linear-gradient(to bottom, rgba(255, 255, 255, 0) 13%, rgb(0, 0, 0) 25%, rgb(0, 0, 0) 18%, rgba(0, 0, 0, 0) 50%);
rgba(0, 0, 0, 0) 12.5%,
rgba(0, 0, 0, 1) 25%,
rgba(0, 0, 0, 1) 37.5%,
rgba(0, 0, 0, 0) 50%
);
} }
& > div:nth-of-type(2) { & > div:nth-of-type(2) {
z-index: 3; z-index: 3;
backdrop-filter: blur(2px); backdrop-filter: blur(2px);
mask: linear-gradient( -webkit-backdrop-filter: blur(2px);
to bottom, mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 25%, rgb(0, 0, 0) 37.5%, rgb(0, 0, 0) 50%, rgba(0, 0, 0, 0) 62.5%);
rgba(0, 0, 0, 0) 25%, /* margin-top: 10px; */
rgba(0, 0, 0, 1) 37.5%,
rgba(0, 0, 0, 1) 50%,
rgba(0, 0, 0, 0) 62.5%
);
} }
& > div:nth-of-type(3) { & > div:nth-of-type(3) {
z-index: 4; z-index: -7;
backdrop-filter: blur(4px); backdrop-filter: blur(4px);
mask: linear-gradient( -webkit-backdrop-filter: blur(4px);
to bottom, mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 37.5%, rgb(0, 0, 0) 50%, rgb(0, 0, 0) 62.5%, rgba(0, 0, 0, 0) 75%);
rgba(0, 0, 0, 0) 37.5%, margin-top: 20px;
rgba(0, 0, 0, 1) 50%,
rgba(0, 0, 0, 1) 62.5%,
rgba(0, 0, 0, 0) 75%
);
} }
& > div:nth-of-type(4) { & > div:nth-of-type(4) {
z-index: 5; z-index: -14;
backdrop-filter: blur(8px); backdrop-filter: blur(8px);
mask: linear-gradient( -webkit-backdrop-filter: blur(8px);
to bottom, mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgb(0, 0, 0) 62.5%, rgb(0, 0, 0) 75%, rgba(0, 0, 0, 0) 87.5%);
rgba(0, 0, 0, 0) 50%, margin-top: 28px;
rgba(0, 0, 0, 1) 62.5%,
rgba(0, 0, 0, 1) 75%,
rgba(0, 0, 0, 0) 87.5%
);
} }
& > div:nth-of-type(5) { & > div:nth-of-type(5) {
z-index: 6; z-index: -16;
backdrop-filter: blur(16px); backdrop-filter: blur(16px);
mask: linear-gradient( -webkit-backdrop-filter: blur(16px);
to bottom, mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 62.5%, rgb(0, 0, 0) 75%, rgb(0, 0, 0) 87.5%, rgba(0, 0, 0, 0) 100%);
rgba(0, 0, 0, 0) 62.5%, margin-top: 31px;
rgba(0, 0, 0, 1) 75%,
rgba(0, 0, 0, 1) 87.5%,
rgba(0, 0, 0, 0) 100%
);
} }
& > div:nth-of-type(6) { & > div:nth-of-type(6) {
z-index: 7; z-index: -20;
backdrop-filter: blur(32px); backdrop-filter: blur(32px);
mask: linear-gradient( -webkit-backdrop-filter: blur(32px);
to bottom, mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 75%, rgb(0, 0, 0) 87.5%, rgb(0, 0, 0) 100%);
rgba(0, 0, 0, 0) 75%, margin-top: 33px;
rgba(0, 0, 0, 1) 87.5%,
rgba(0, 0, 0, 1) 100%
);
} }
&::after { &::after {

1
src/components/pages/ABDesign/v1/components/Questionnaire/CustomAnswers/MultipleAnswers/styles.module.scss
View File

@ -19,7 +19,6 @@
button { button {
z-index: 10; z-index: 10;
max-width: 100%;
} }
} }