update 2026-10-23 00:28:40

luci-theme-footstrap/styles/theme/15-wallpaper.css

@@ -0,0 +1,43 @@
+@layer theme {
+	/* .fs-pattern: the masked wallpaper element. Why a dedicated element, why z-index: -1 needs a
+	 * transparent body — design-system.md, "Wallpaper rendering: why the canvas moves to :root". */
+	.fs-pattern { display: none; }
+
+	:root[data-wallpaper="pattern"] { background-color: var(--fs-bg); }
+	/* transparent for both wallpapers: an opaque --fs-bg here would cover the shell's one background layer
+	 * (the photo on the file wallpaper, the .fs-pattern element on the pattern one). */
+	:root[data-wallpaper="pattern"] body,
+	:root:is([data-wallpaper="pattern"], [data-wallpaper="file"]) .fs-main { background-color: transparent; }
+	:root:is([data-wallpaper="pattern"], [data-wallpaper="file"]) footer.fs-footer { background: transparent; }
+
+	/* --fs-pattern-url is `none` until an upload exists (head.ut/fs-prefs.js) — the axis picked
+	 * with no file is a bare canvas, not a broken tile. */
+	:root[data-wallpaper="pattern"] .fs-pattern {
+		display: block;
+		position: fixed;
+		inset: 0;
+		z-index: -1;
+		pointer-events: none;
+		opacity: var(--fs-pattern-strength);
+	}
+	/* Theme ink (default): file's own colours discarded, only alpha used through the mask —
+	 * design-system.md, "Pattern colours". */
+	:root[data-wallpaper="pattern"]:not([data-pattern-ink="original"]) .fs-pattern {
+		background-color: var(--fs-text);
+		-webkit-mask-image: var(--fs-pattern-url);
+		mask-image: var(--fs-pattern-url);
+		-webkit-mask-repeat: repeat;
+		mask-repeat: repeat;
+		-webkit-mask-size: var(--fs-pattern-size) auto;
+		mask-size: var(--fs-pattern-size) auto;
+	}
+	/* original: the file's own palette, plain tiled background, no mask. */
+	:root[data-wallpaper="pattern"][data-pattern-ink="original"] .fs-pattern {
+		background-image: var(--fs-pattern-url);
+		background-repeat: repeat;
+		background-size: var(--fs-pattern-size) auto;
+	}
+
+	/* No wash layer behind #view: cards paint their own opaque --fs-panel, so nothing needs
+	 * dimming globally. */
+}