Fix wallpaper support for all views

packages/backend/src/server/web/style.css

@@ -1,4 +1,4 @@
-html, body {
+html {
 	background-color: var(--bg);
 	color: var(--fg);
 }

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;

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

packages/client/src/pages/antenna-timeline.vue

@@ -158,7 +158,7 @@ definePageMetadata(
 	}
 
 	> .tl {
-		background: var(--bg);
+		background: none;
 		border-radius: var(--radius);
 		overflow: clip;
 	}

packages/client/src/pages/timeline.vue

@@ -391,7 +391,7 @@ onMounted(() => {
 	}
 
 	> .tl {
-		background: var(--bg);
+		background: none;
 		border-radius: var(--radius);
 		overflow: clip;
 	}

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

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;

packages/client/src/ui/_common_/navbar.vue

@@ -249,7 +249,9 @@ function more(ev: MouseEvent) {
 		box-sizing: border-box;
 		overflow: auto;
 		overflow-x: clip;
+		#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;

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 {

packages/client/src/ui/deck/column.vue

@@ -323,6 +323,8 @@ function onDrop(ev) {
 	overflow: hidden;
 	contain: strict;
 
+	background: var(--bg);
+
 	&.draghover {
 		&:after {
 			content: "";

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;