diff --git a/src/components/dialogs/ModalWrapper/styles.module.scss b/src/components/dialogs/ModalWrapper/styles.module.scss index 81c512ca..6a691946 100644 --- a/src/components/dialogs/ModalWrapper/styles.module.scss +++ b/src/components/dialogs/ModalWrapper/styles.module.scss @@ -51,12 +51,8 @@ left: 0; width: 100%; height: 100%; - background: transparentize($color: $content_bg, $amount: 0.1); cursor: pointer; animation: appear 0.25s forwards; - @include can_backdrop { - backdrop-filter: blur(15px); - background: transparentize($color: $content_bg, $amount: 0.9); - } + @include blur(); } diff --git a/src/components/editors/EditorConfirmClose/styles.module.scss b/src/components/editors/EditorConfirmClose/styles.module.scss index 57be7198..90388ab2 100644 --- a/src/components/editors/EditorConfirmClose/styles.module.scss +++ b/src/components/editors/EditorConfirmClose/styles.module.scss @@ -16,15 +16,12 @@ width: 100%; height: 100%; z-index: 21; - background: transparentize($color: #000000, $amount: 0.9); display: flex; align-items: center; justify-content: center; animation: appear 0.25s forwards; - @include can_backdrop { - backdrop-filter: blur(15px); - } + @include blur(); } .title { diff --git a/src/components/main/Header/styles.module.scss b/src/components/main/Header/styles.module.scss index 4b3435ad..6ccd8b22 100644 --- a/src/components/main/Header/styles.module.scss +++ b/src/components/main/Header/styles.module.scss @@ -19,13 +19,7 @@ } &.is_scrolled { - background: transparentize($content_bg, 0.05); - - @include can_backdrop { - background: transparentize($content_bg, 0.25); - -webkit-backdrop-filter: blur(5px); - backdrop-filter: blur(5px); - } + @include blur(); } } diff --git a/src/components/node/NodePanelInner/styles.module.scss b/src/components/node/NodePanelInner/styles.module.scss index e1d3764f..e3c01fb5 100644 --- a/src/components/node/NodePanelInner/styles.module.scss +++ b/src/components/node/NodePanelInner/styles.module.scss @@ -59,7 +59,6 @@ border-radius: $radius $radius 0 0; box-sizing: border-box; padding: $gap $gap; - background: $node_bg; height: 64px; min-width: 0; @@ -69,11 +68,6 @@ border-radius: 0; height: auto; } - - @include can_backdrop { - backdrop-filter: blur(15px); - background: transparentize($node_bg, 0.2); - } } .title { diff --git a/src/components/profile/ProfileAccountsError/styles.module.scss b/src/components/profile/ProfileAccountsError/styles.module.scss index 1fb48718..d184cec8 100644 --- a/src/components/profile/ProfileAccountsError/styles.module.scss +++ b/src/components/profile/ProfileAccountsError/styles.module.scss @@ -7,7 +7,6 @@ width: 100%; height: 100%; z-index: 2; - background-color: transparentize($red, 0.5); display: flex; align-items: center; justify-content: flex-end; @@ -16,10 +15,7 @@ box-sizing: border-box; border-radius: $radius; - @include can_backdrop { - background-color: transparentize($red, 0.5); - backdrop-filter: blur(10px); - } + @include blur($red); } .title { diff --git a/src/styles/variables.scss b/src/styles/variables.scss index 9c1ec76a..7a8e4bc9 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -160,6 +160,16 @@ $sidebar_border: transparentize(white, 0.95); } } +@mixin blur($color: $content_bg, $radius: 15px) { + background: transparentize($color, 0.1); + + @include can_backdrop { + backdrop-filter: blur($radius); + -webkit-backdrop-filter: blur($radius); + background: transparentize($color, 0.5); + } +} + @mixin title_with_line { font: $font_14_semibold; text-transform: uppercase; @@ -190,13 +200,7 @@ $sidebar_border: transparentize(white, 0.95); } @mixin sidebar { - background: transparentize($content_bg, 0.15); - - @include can_backdrop { - background: transparentize($content_bg, 0.3); - -webkit-backdrop-filter: blur(15px); - backdrop-filter: blur(15px); - } + @include blur(); } @mixin sidebar_content(