From d6ebbf57211c802f4a80aaf3e8145c94140b98a6 Mon Sep 17 00:00:00 2001
From: Insert5StarName <anime@shourai.de>
Date: Thu, 19 Oct 2023 14:48:31 +0200
Subject: [PATCH] fix: performance issues & respect blur option
---
packages/frontend/src/components/MkContainer.vue | 2 --
packages/frontend/src/components/MkNotes.vue | 2 --
packages/frontend/src/pages/user/home.vue | 5 ++---
packages/frontend/src/style.scss | 1 -
4 files changed, 2 insertions(+), 8 deletions(-)
diff --git a/packages/frontend/src/components/MkContainer.vue b/packages/frontend/src/components/MkContainer.vue
index 4928806aad..3195377d60 100644
--- a/packages/frontend/src/components/MkContainer.vue
+++ b/packages/frontend/src/components/MkContainer.vue
@@ -139,7 +139,6 @@ onUnmounted(() => {
overflow: clip;
contain: content;
background: color-mix(in srgb, var(--panel) 65%, transparent);
- backdrop-filter: blur(16px);
&.naked {
background: transparent !important;
box-shadow: none !important;
@@ -173,7 +172,6 @@ onUnmounted(() => {
z-index: 2;
line-height: 1.4em;
background: color-mix(in srgb, var(--panelHeaderBg) 35%, transparent);
- backdrop-filter: blur(16px);
}
.title {
diff --git a/packages/frontend/src/components/MkNotes.vue b/packages/frontend/src/components/MkNotes.vue
index 2fc50f4d47..024599767e 100644
--- a/packages/frontend/src/components/MkNotes.vue
+++ b/packages/frontend/src/components/MkNotes.vue
@@ -57,7 +57,6 @@ defineExpose({
&.noGap {
> .notes {
background: color-mix(in srgb, var(--panel) 65%, transparent);
- backdrop-filter: blur(16px);
}
}
@@ -67,7 +66,6 @@ defineExpose({
.note {
background: color-mix(in srgb, var(--panel) 65%, transparent);
- backdrop-filter: blur(16px);
border-radius: var(--radius);
}
}
diff --git a/packages/frontend/src/pages/user/home.vue b/packages/frontend/src/pages/user/home.vue
index d1e57db0e1..f65cf07e08 100644
--- a/packages/frontend/src/pages/user/home.vue
+++ b/packages/frontend/src/pages/user/home.vue
@@ -367,7 +367,7 @@ onUnmounted(() => {
background-size: cover;
background-position: center;
pointer-events: none;
- filter: blur(8px) opacity(0.6);
+ filter: var(--blur, blur(10px)) opacity(0.6);
// Funny CSS schenanigans to make background escape container
left: -100%;
top: -5%;
@@ -391,7 +391,6 @@ onUnmounted(() => {
position: relative;
overflow: clip;
background: color-mix(in srgb, var(--panel) 65%, transparent);
- backdrop-filter: blur(16px);
> .banner-container {
position: relative;
@@ -755,7 +754,7 @@ onUnmounted(() => {
margin: calc(var(--margin) / 2) 0;
padding: calc(var(--margin) / 2) 0;
background: color-mix(in srgb, var(--bg) 65%, transparent);
- backdrop-filter: blur(16px);
+ backdrop-filter: var(--blur, blur(15px));
border-radius: 5px;
> button {
border-radius: 5px;
diff --git a/packages/frontend/src/style.scss b/packages/frontend/src/style.scss
index e155fd1ba0..aba205d003 100644
--- a/packages/frontend/src/style.scss
+++ b/packages/frontend/src/style.scss
@@ -268,7 +268,6 @@ hr {
._panel {
background: color-mix(in srgb, var(--panel) 65%, transparent);
- backdrop-filter: blur(16px);
border-radius: var(--radius);
overflow: clip;
}