From e9fdd707af3c0b5838da940a2d15052d4adc66a1 Mon Sep 17 00:00:00 2001
From: Freeplay <Freeplay@duck.com>
Date: Thu, 11 May 2023 20:38:54 -0400
Subject: [PATCH] Fix wallpaper support for all views

---
 packages/backend/src/server/web/style.css        | 2 +-
 packages/client/src/components/MkFolder.vue      | 4 ++++
 packages/client/src/components/MkNotes.vue       | 1 -
 packages/client/src/pages/antenna-timeline.vue   | 2 +-
 packages/client/src/pages/timeline.vue           | 2 +-
 packages/client/src/pages/user-list-timeline.vue | 2 +-
 packages/client/src/style.scss                   | 1 -
 packages/client/src/ui/_common_/navbar.vue       | 9 +++------
 packages/client/src/ui/classic.vue               | 8 +++++++-
 packages/client/src/ui/deck/column.vue           | 2 ++
 packages/client/src/ui/universal.vue             | 2 --
 11 files changed, 20 insertions(+), 15 deletions(-)

diff --git a/packages/backend/src/server/web/style.css b/packages/backend/src/server/web/style.css
index ee42b9deba..5072e0ad4e 100644
--- a/packages/backend/src/server/web/style.css
+++ b/packages/backend/src/server/web/style.css
@@ -1,4 +1,4 @@
-html, body {
+html {
 	background-color: var(--bg);
 	color: var(--fg);
 }
diff --git a/packages/client/src/components/MkFolder.vue b/packages/client/src/components/MkFolder.vue
index 337873fc1c..63d47f2bf4 100644
--- a/packages/client/src/components/MkFolder.vue
+++ b/packages/client/src/components/MkFolder.vue
@@ -144,6 +144,10 @@ export default defineComponent({
 		padding: var(--x-padding);
 		-webkit-backdrop-filter: var(--blur, blur(8px));
 		backdrop-filter: var(--blur, blur(20px));
+		margin-inline: -12px;
+		padding-inline: 12px;
+		mask: linear-gradient(to right, transparent, black 12px calc(100% - 12px), transparent);
+		-webkit-mask: linear-gradient(to right, transparent, black 12px calc(100% - 12px), transparent);
 
 		> .title {
 			margin: 0;
diff --git a/packages/client/src/components/MkNotes.vue b/packages/client/src/components/MkNotes.vue
index 124ffea6a1..c62990ad28 100644
--- a/packages/client/src/components/MkNotes.vue
+++ b/packages/client/src/components/MkNotes.vue
@@ -64,7 +64,6 @@ defineExpose({
 	}
 	&:not(.noGap) {
 		> .notes {
-			background: var(--bg);
 			.qtqtichx {
 				background: var(--panel);
 				border-radius: var(--radius);
diff --git a/packages/client/src/pages/antenna-timeline.vue b/packages/client/src/pages/antenna-timeline.vue
index c33eed75f2..442d6882a8 100644
--- a/packages/client/src/pages/antenna-timeline.vue
+++ b/packages/client/src/pages/antenna-timeline.vue
@@ -158,7 +158,7 @@ definePageMetadata(
 	}
 
 	> .tl {
-		background: var(--bg);
+		background: none;
 		border-radius: var(--radius);
 		overflow: clip;
 	}
diff --git a/packages/client/src/pages/timeline.vue b/packages/client/src/pages/timeline.vue
index e3f8a0083a..6ab0fdda46 100644
--- a/packages/client/src/pages/timeline.vue
+++ b/packages/client/src/pages/timeline.vue
@@ -391,7 +391,7 @@ onMounted(() => {
 	}
 
 	> .tl {
-		background: var(--bg);
+		background: none;
 		border-radius: var(--radius);
 		overflow: clip;
 	}
diff --git a/packages/client/src/pages/user-list-timeline.vue b/packages/client/src/pages/user-list-timeline.vue
index 2fd82500e4..352e5d6838 100644
--- a/packages/client/src/pages/user-list-timeline.vue
+++ b/packages/client/src/pages/user-list-timeline.vue
@@ -125,7 +125,7 @@ definePageMetadata(
 	}
 
 	> .tl {
-		background: var(--bg);
+		background: none;
 		border-radius: var(--radius);
 		overflow: clip;
 	}
diff --git a/packages/client/src/style.scss b/packages/client/src/style.scss
index 52c7b62f4a..37cb76f020 100644
--- a/packages/client/src/style.scss
+++ b/packages/client/src/style.scss
@@ -40,7 +40,6 @@
 
 html {
 	touch-action: manipulation;
-	background-color: var(--bg);
 	background-attachment: fixed;
 	background-size: cover;
 	background-position: center;
diff --git a/packages/client/src/ui/_common_/navbar.vue b/packages/client/src/ui/_common_/navbar.vue
index 31c4a40c31..eb73099adf 100644
--- a/packages/client/src/ui/_common_/navbar.vue
+++ b/packages/client/src/ui/_common_/navbar.vue
@@ -249,7 +249,9 @@ function more(ev: MouseEvent) {
 		box-sizing: border-box;
 		overflow: auto;
 		overflow-x: clip;
-		background: var(--navBg);
+		#calckey_app > :not(.wallpaper) & {
+			background: var(--navBg);
+		}
 		contain: strict;
 		display: flex;
 		flex-direction: column;
@@ -293,12 +295,7 @@ function more(ev: MouseEvent) {
 			}
 
 			> .bottom {
-				position: sticky;
-				bottom: 0;
 				padding: 20px 0;
-				background: var(--X14);
-				-webkit-backdrop-filter: var(--blur, blur(8px));
-				backdrop-filter: var(--blur, blur(8px));
 
 				> .post {
 					position: relative;
diff --git a/packages/client/src/ui/classic.vue b/packages/client/src/ui/classic.vue
index b40632196c..5785cb1beb 100644
--- a/packages/client/src/ui/classic.vue
+++ b/packages/client/src/ui/classic.vue
@@ -239,7 +239,13 @@ onMounted(() => {
 
 	&.wallpaper {
 		background: var(--wallpaperOverlay);
-		//backdrop-filter: var(--blur, blur(4px));
+		:deep(main) {
+			background: var(--acrylicBg) !important;
+			backdrop-filter: blur(12px);
+		}
+		:deep(.tl), :deep(.notes) {
+			background: none !important;
+		}
 	}
 
 	> .columns {
diff --git a/packages/client/src/ui/deck/column.vue b/packages/client/src/ui/deck/column.vue
index 425f00293c..03859abc0a 100644
--- a/packages/client/src/ui/deck/column.vue
+++ b/packages/client/src/ui/deck/column.vue
@@ -323,6 +323,8 @@ function onDrop(ev) {
 	overflow: hidden;
 	contain: strict;
 
+	background: var(--bg);
+
 	&.draghover {
 		&:after {
 			content: "";
diff --git a/packages/client/src/ui/universal.vue b/packages/client/src/ui/universal.vue
index 2fb0adb3a7..f6b57c081f 100644
--- a/packages/client/src/ui/universal.vue
+++ b/packages/client/src/ui/universal.vue
@@ -464,13 +464,11 @@ console.log(mainRouter.currentRoute.value.name);
 	> .contents {
 		width: 100%;
 		min-width: 0;
-		background: var(--bg);
 	}
 
 	> .widgets {
 		padding: 0 var(--margin);
 		border-left: solid 0.5px var(--divider);
-		background: var(--bg);
 
 		@media (max-width: $widgets-hide-threshold) {
 			display: none;