feat: blur style

This commit is contained in:
FairyEver 2021-12-15 21:59:36 +08:00
parent 3892525a08
commit 5473d98568
2 changed files with 4 additions and 4 deletions

View File

@ -142,7 +142,7 @@ html, body, #app {
.body__blur { .body__blur {
background-color: --var('body-main-bg-color-rgba-blur'); background-color: --var('body-main-bg-color-rgba-blur');
backdrop-filter: blur(8px); backdrop-filter: blur(4px);
} }
@-moz-document url-prefix() { @-moz-document url-prefix() {
.body__blur { .body__blur {
@ -152,7 +152,7 @@ html, body, #app {
.app__blur { .app__blur {
background-color: --var('color-bg-app-rgba-blur'); background-color: --var('color-bg-app-rgba-blur');
backdrop-filter: blur(8px); backdrop-filter: blur(4px);
} }
@-moz-document url-prefix() { @-moz-document url-prefix() {
.app__blur { .app__blur {

View File

@ -20,7 +20,7 @@ $color-bg-container: #FFFFFF;
:root { :root {
// color // color
#{--key('color-bg-app')}: $color-bg-app; #{--key('color-bg-app')}: $color-bg-app;
#{--key('color-bg-app-rgba-blur')}: rgba($color-bg-app, 0.5); #{--key('color-bg-app-rgba-blur')}: rgba($color-bg-app, 0.8);
#{--key('color-bg-app-rgba-blur-moz')}: rgba($color-bg-app, 0.98); #{--key('color-bg-app-rgba-blur-moz')}: rgba($color-bg-app, 0.98);
#{--key('color-bg-container')}: $color-bg-container; #{--key('color-bg-container')}: $color-bg-container;
@ -55,7 +55,7 @@ $color-bg-container: #FFFFFF;
#{--key('body-main-padding-x')}: --var('body-main-padding'); #{--key('body-main-padding-x')}: --var('body-main-padding');
#{--key('body-main-padding-y')}: --var('body-main-padding'); #{--key('body-main-padding-y')}: --var('body-main-padding');
#{--key('body-main-bg-color')}: --var('color-bg-container'); #{--key('body-main-bg-color')}: --var('color-bg-container');
#{--key('body-main-bg-color-rgba-blur')}: rgba($color-bg-container, 0.5); #{--key('body-main-bg-color-rgba-blur')}: rgba($color-bg-container, 0.8);
#{--key('body-main-bg-color-rgba-blur-moz')}: rgba($color-bg-container, 0.98); #{--key('body-main-bg-color-rgba-blur-moz')}: rgba($color-bg-container, 0.98);
// body header // body header
#{--key('body-header-padding')}: --var('body-padding'); #{--key('body-header-padding')}: --var('body-padding');