🎨

1 files changed, 21 insertions, 4 deletions

diff --git a/packages/frontend/src/ui/deck/column.vue b/packages/frontend/src/ui/deck/column.vue
index 49db34c48f..06163c7dbd 100644
--- a/packages/frontend/src/ui/deck/column.vue
+++ b/packages/frontend/src/ui/deck/column.vue
@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <div
-	:class="[$style.root, { [$style.paged]: isMainColumn, [$style.naked]: naked, [$style.active]: active, [$style.draghover]: draghover, [$style.dragging]: dragging, [$style.dropready]: dropready }]"
+	:class="[$style.root, { [$style.paged]: isMainColumn, [$style.naked]: naked, [$style.active]: active, [$style.draghover]: draghover, [$style.dragging]: dragging, [$style.dropready]: dropready, [$style.withWallpaper]: withWallpaper }]"
 	@dragover.prevent.stop="onDragover"
 	@dragleave="onDragleave"
 	@drop.prevent.stop="onDrop"
@@ -48,11 +48,14 @@ import type { MenuItem } from '@/types/menu.js';
 import { updateColumn, swapLeftColumn, swapRightColumn, swapUpColumn, swapDownColumn, stackLeftColumn, popRightColumn, removeColumn, swapColumn } from '@/deck.js';
 import * as os from '@/os.js';
 import { i18n } from '@/i18n.js';
+import { miLocalStorage } from '@/local-storage.js';
 
 provide('shouldHeaderThin', true);
 provide('shouldOmitHeaderTitle', true);
 provide('forceSpacerMin', true);
 
+const withWallpaper = miLocalStorage.getItem('wallpaper') != null;
+
 const props = withDefaults(defineProps<{
 	column: Column;
 	isStacked?: boolean;
@@ -352,9 +355,7 @@ function onDrop(ev) {
 	}
 
 	&.naked {
-		background: var(--MI_THEME-acrylicBg) !important;
-		-webkit-backdrop-filter: var(--MI-blur, blur(10px));
-		backdrop-filter: var(--MI-blur, blur(10px));
+		background: color(from var(--MI_THEME-bg) srgb r g b / 0.5) !important;
 
 		> .header {
 			background: transparent;
@@ -372,6 +373,22 @@ function onDrop(ev) {
 		}
 	}
 
+	&.withWallpaper {
+		&.naked {
+			background: color(from var(--MI_THEME-bg) srgb r g b / 0.75) !important;
+			-webkit-backdrop-filter: var(--MI-blur, blur(10px));
+			backdrop-filter: var(--MI-blur, blur(10px));
+
+			> .header {
+				color: light-dark(#000000bf, #ffffffbf);
+			}
+		}
+
+		.tabShape {
+			display: none;
+		}
+	}
+
 	&.paged {
 		background: var(--MI_THEME-bg) !important;