diff --git a/src/components/sidebar/SidebarStack/styles.module.scss b/src/components/sidebar/SidebarStack/styles.module.scss index bb0fad01..c32d572d 100644 --- a/src/components/sidebar/SidebarStack/styles.module.scss +++ b/src/components/sidebar/SidebarStack/styles.module.scss @@ -1,12 +1,11 @@ @import 'src/styles/variables'; .stack { - @include blur; - display: flex; flex-direction: row-reverse; width: auto; border-radius: $radius 0 0 $radius; + background: $content_bg_backdrop; @include sidebar_stack_limit { & > *:not(:last-child) { diff --git a/src/components/sidebar/SidebarWrapper/styles.module.scss b/src/components/sidebar/SidebarWrapper/styles.module.scss index 403da8e8..5bcb755c 100644 --- a/src/components/sidebar/SidebarWrapper/styles.module.scss +++ b/src/components/sidebar/SidebarWrapper/styles.module.scss @@ -1,12 +1,18 @@ -@import "src/styles/variables"; +@import 'src/styles/variables'; @keyframes appear { - 0% { opacity: 0; } - 100% { opacity: 1; } + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } } @keyframes slideIn { - 100% { transform: translate(0, 0); } + 100% { + transform: translate(0, 0); + } } .wrapper { @@ -17,7 +23,7 @@ z-index: 26; justify-content: flex-end; overflow: hidden; - animation: appear 0.25s forwards; + // animation: appear 0.25s forwards; & > * { z-index: 4; diff --git a/src/containers/sidebars/ProfileSidebar/index.tsx b/src/containers/sidebars/ProfileSidebar/index.tsx index 54c21597..2834ec0d 100644 --- a/src/containers/sidebars/ProfileSidebar/index.tsx +++ b/src/containers/sidebars/ProfileSidebar/index.tsx @@ -28,9 +28,7 @@ const SettingsSidebar: VFC = ({ openSidebar, }) => { const { isUser } = useAuth(); - const { - user: { cover }, - } = useUser(); + const cover = false; const tab = useMemo( () => (page ? Math.max(tabs.indexOf(page), 0) : undefined), diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss index ccf9a156..151445b3 100644 --- a/src/styles/_mixins.scss +++ b/src/styles/_mixins.scss @@ -112,8 +112,7 @@ @supports ((bla-bla-bla: 4px)) { @content; } - // uncomment if you like blur performance again :-) - /* + @supports ( (-webkit-backdrop-filter: blur(5px)) or (backdrop-filter: blur(5px)) ) { @@ -128,10 +127,9 @@ } } } - */ } -@mixin blur($color: $content_bg_backdrop, $radius: 15px) { +@mixin blur($color: $content_bg_backdrop, $radius: 10px) { background: $color; @include can_backdrop { diff --git a/src/styles/themes/_default.scss b/src/styles/themes/_default.scss index 88140d5d..93bad3b7 100644 --- a/src/styles/themes/_default.scss +++ b/src/styles/themes/_default.scss @@ -63,7 +63,7 @@ $_brown: #23201f; --content_bg_success: #{transparentize($_wisegreen, 0.7)}; --content_bg_info: #{transparentize($_blue, 0.5)}; --content_bg_danger: #{transparentize($_red, 0.5)}; - --content_bg_backdrop: #{transparentize($_brown, 0.05)}; + --content_bg_backdrop: #{transparentize($_brown, 0.3)}; // white shades (move to --vars) --white: white;