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;
 }