From a13f453c110b014133c98b566fb9d29b2b87ba8a Mon Sep 17 00:00:00 2001
From: intergrav <devin@devins.page>
Date: Tue, 18 Aug 2026 22:57:06 -0400
Subject: [PATCH] feat: transparency setting

prefers-reduced-transparency is only available on chromium as of right
now, so this setting (consistent with the animations setting) force
disables if prefers-reduce-transparency is detected as "reduce".
otherwise it's up to the user

also added a blur setting for the cover art background, does not apply
if transparency is off

also adjusted the cutoff for the mask
---
 src/App.svelte                        |  3 +-
 src/app.css                           | 40 +++++++++++++--------------
 src/lib/CoverBackground.svelte        |  9 +++---
 src/lib/Library.svelte                | 13 +++++----
 src/lib/NowPlaying.svelte             |  2 +-
 src/lib/Queue.svelte                  |  5 +++-
 src/lib/animations.ts                 | 12 +++++++-
 src/lib/components/ContextMenu.svelte |  8 ++----
 src/lib/dialogs/InfoModal.svelte      |  9 +++---
 src/lib/dialogs/SettingsModal.svelte  | 38 +++++++++++++++++++++++--
 src/lib/languages/locales/ar.ts       |  2 ++
 src/lib/languages/locales/bn.ts       |  2 ++
 src/lib/languages/locales/cs.ts       |  2 ++
 src/lib/languages/locales/da.ts       |  2 ++
 src/lib/languages/locales/de.ts       |  2 ++
 src/lib/languages/locales/el.ts       |  2 ++
 src/lib/languages/locales/en.ts       |  2 ++
 src/lib/languages/locales/es.ts       |  2 ++
 src/lib/languages/locales/fi.ts       |  2 ++
 src/lib/languages/locales/fr.ts       |  2 ++
 src/lib/languages/locales/he.ts       |  2 ++
 src/lib/languages/locales/hi.ts       |  2 ++
 src/lib/languages/locales/id.ts       |  2 ++
 src/lib/languages/locales/it.ts       |  2 ++
 src/lib/languages/locales/ja.ts       |  2 ++
 src/lib/languages/locales/ko.ts       |  2 ++
 src/lib/languages/locales/nl.ts       |  2 ++
 src/lib/languages/locales/no.ts       |  2 ++
 src/lib/languages/locales/pl.ts       |  2 ++
 src/lib/languages/locales/pt.ts       |  2 ++
 src/lib/languages/locales/ro.ts       |  2 ++
 src/lib/languages/locales/ru.ts       |  2 ++
 src/lib/languages/locales/sv.ts       |  2 ++
 src/lib/languages/locales/th.ts       |  2 ++
 src/lib/languages/locales/tl.ts       |  2 ++
 src/lib/languages/locales/tr.ts       |  2 ++
 src/lib/languages/locales/uk.ts       |  2 ++
 src/lib/languages/locales/vi.ts       |  2 ++
 src/lib/languages/locales/zhcn.ts     |  2 ++
 src/lib/languages/locales/zhtw.ts     |  2 ++
 src/lib/settings.svelte.ts            |  2 ++
 41 files changed, 154 insertions(+), 47 deletions(-)

diff --git a/src/App.svelte b/src/App.svelte
index 375f70f..bd33e4d 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 import { type Component, onMount } from "svelte";
-import { animationsEnabled } from "./lib/animations.js";
+import { animationsEnabled, transparencyEnabled } from "./lib/animations.js";
 import { init, onGlobalKey } from "./lib/app.svelte.js";
 import {
 	auth,
@@ -138,6 +138,7 @@ $effect(() => {
 
 	const classList = document.documentElement.classList;
 	classList.toggle("animations", animationsEnabled());
+	classList.toggle("transparency", transparencyEnabled());
 	classList.toggle("dynamic-colors", settings.dynamicColors);
 	classList.toggle("rounded-corners", settings.roundedCorners);
 	classList.toggle("transparent-borders", settings.transparentOutlines);
diff --git a/src/app.css b/src/app.css
index 8dd76cf..b77650d 100644
--- a/src/app.css
+++ b/src/app.css
@@ -192,26 +192,24 @@ html.transparent-borders {
 	--bg-surface: transparent;
 }
 
-@media (prefers-reduced-transparency: no-preference) {
-	.scroll-fade {
-		--scroll-fade-size: 1.5rem;
-		--scroll-fade-top-offset: 0px;
-		--scroll-fade-top: 0px;
-		--scroll-fade-bottom: 0px;
-		mask-image: linear-gradient(
-			to bottom,
-			black 0,
-			black var(--scroll-fade-top-offset),
-			transparent var(--scroll-fade-top-offset),
-			black
-				calc(
-					var(--scroll-fade-top-offset) +
-					min(var(--scroll-fade-size), var(--scroll-fade-top))
-				),
-			black calc(100% - min(var(--scroll-fade-size), var(--scroll-fade-bottom))),
-			transparent
-		);
-	}
+html.transparency .scroll-fade {
+	--scroll-fade-size: 1.5rem;
+	--scroll-fade-top-offset: 0px;
+	--scroll-fade-top: 0px;
+	--scroll-fade-bottom: 0px;
+	mask-image: linear-gradient(
+		to bottom,
+		black 0,
+		black var(--scroll-fade-top-offset),
+		transparent var(--scroll-fade-top-offset),
+		black
+			calc(
+				var(--scroll-fade-top-offset) +
+				min(var(--scroll-fade-size), var(--scroll-fade-top))
+			),
+		black calc(100% - min(var(--scroll-fade-size), var(--scroll-fade-bottom))),
+		transparent
+	);
 }
 
 body {
@@ -241,7 +239,7 @@ body {
 	z-index: -1;
 	inline-size: 100dvw;
 	block-size: 100dvh;
-	mask-image: linear-gradient(to top, black, transparent 75%);
+	mask-image: linear-gradient(to top, black, transparent 90%);
 }
 
 .app-background > img {
diff --git a/src/lib/CoverBackground.svelte b/src/lib/CoverBackground.svelte
index fd9c158..5d73af7 100644
--- a/src/lib/CoverBackground.svelte
+++ b/src/lib/CoverBackground.svelte
@@ -38,6 +38,7 @@ onMount(() => {
 	<div
 		class={className}
 		style:opacity={settings.coverBackgroundOpacity}
+		style:--cover-background-blur="{settings.coverBackgroundBlur}px"
 	>
 		{#key src}
 			<img
@@ -63,11 +64,9 @@ onMount(() => {
 			object-fit: cover;
 		}
 
-		@media (prefers-reduced-transparency: no-preference) {
-			> img {
-				filter: blur(16px);
-			}
-		}
+	}
 
+	:global(html.transparency) div > img {
+		filter: blur(var(--cover-background-blur));
 	}
 </style>
diff --git a/src/lib/Library.svelte b/src/lib/Library.svelte
index ab6e4ab..632e1ba 100644
--- a/src/lib/Library.svelte
+++ b/src/lib/Library.svelte
@@ -13,6 +13,7 @@ import {
 	animateActivation,
 	animateButtonRejection,
 	animationsEnabled,
+	transparencyEnabled,
 } from "./animations.js";
 import { auth, isOwner } from "./auth.svelte.js";
 import {
@@ -118,7 +119,9 @@ let menu = $state<{
 let libraryElement = $state<HTMLElement>();
 let virtualizer = $state<VirtualizerHandle>();
 let headerHeight = $state(0);
-const scrollFadeEnabled = $derived(settings.transparentOutlines);
+const scrollFadeEnabled = $derived(
+	settings.transparentOutlines && transparencyEnabled(),
+);
 
 const albumTypeAliases: Record<string, AlbumListType> = {
 	random: "random",
@@ -941,11 +944,9 @@ function onKey(event: KeyboardEvent) {
 			overflow-x: hidden;
 		}
 	}
-	@media (prefers-reduced-transparency: no-preference) {
-		.search-help {
-			background: color-mix(Canvas 80%, transparent);
-			backdrop-filter: blur(16px);
-		}
+	:global(html.transparency) .search-help {
+		background: color-mix(Canvas 80%, transparent);
+		backdrop-filter: blur(16px);
 	}
 	input {
 		inline-size: 100%;
diff --git a/src/lib/NowPlaying.svelte b/src/lib/NowPlaying.svelte
index 354c21a..7ba1f39 100644
--- a/src/lib/NowPlaying.svelte
+++ b/src/lib/NowPlaying.svelte
@@ -480,7 +480,7 @@ $effect(() => {
 				opacity: 0.125;
 			}
 
-			@media (prefers-reduced-transparency: no-preference) {
+			:global(html.transparency) & {
 				.artwork-image.hidden {
 					opacity: 0.25;
 					filter: blur(16px);
diff --git a/src/lib/Queue.svelte b/src/lib/Queue.svelte
index 726a829..d6bfcce 100644
--- a/src/lib/Queue.svelte
+++ b/src/lib/Queue.svelte
@@ -7,6 +7,7 @@ import {
 	entryAnimation,
 	fadeImage,
 	subtleMoveAnimation,
+	transparencyEnabled,
 } from "./animations.js";
 import {
 	api,
@@ -227,7 +228,9 @@ const columnTemplate = $derived.by(() => {
 	}
 	return template.join(" ");
 });
-const scrollFadeEnabled = $derived(settings.transparentOutlines);
+const scrollFadeEnabled = $derived(
+	settings.transparentOutlines && transparencyEnabled(),
+);
 
 $effect(() => {
 	if (!ui.selectionMode) {
diff --git a/src/lib/animations.ts b/src/lib/animations.ts
index 1392e02..b779082 100644
--- a/src/lib/animations.ts
+++ b/src/lib/animations.ts
@@ -1,9 +1,16 @@
-import { prefersReducedMotion } from "svelte/motion";
+import { MediaQuery } from "svelte/reactivity";
 import { settings } from "./settings.svelte.js";
 
 const activationTimers = new WeakMap<HTMLElement, number>();
 const imageFadeAnimations = new WeakMap<HTMLImageElement, Animation>();
 
+export const prefersReducedMotion = new MediaQuery(
+	"(prefers-reduced-motion: reduce)",
+);
+export const prefersReducedTransparency = new MediaQuery(
+	"(prefers-reduced-transparency: reduce)",
+);
+
 export const entryAnimation = {
 	duration: 150,
 	stagger: 20,
@@ -52,6 +59,9 @@ export function animateEntryRows(
 export const animationsEnabled = () =>
 	settings.animations && !prefersReducedMotion.current;
 
+export const transparencyEnabled = () =>
+	settings.transparency && !prefersReducedTransparency.current;
+
 export function fadeImage(image: HTMLImageElement, fadeComplete = false) {
 	if (!animationsEnabled()) return;
 
diff --git a/src/lib/components/ContextMenu.svelte b/src/lib/components/ContextMenu.svelte
index d90a67c..4257370 100644
--- a/src/lib/components/ContextMenu.svelte
+++ b/src/lib/components/ContextMenu.svelte
@@ -435,11 +435,9 @@ function onKey(event: KeyboardEvent) {
 	:global(html.animations) .submenu.ready {
 		animation-name: pop-from-side;
 	}
-	@media (prefers-reduced-transparency: no-preference) {
-		.menu {
-			background: color-mix(Canvas 80%, transparent);
-			backdrop-filter: blur(16px);
-		}
+	:global(html.transparency) .menu {
+		background: color-mix(Canvas 80%, transparent);
+		backdrop-filter: blur(16px);
 	}
 	@keyframes pop-from-side {
 		from {
diff --git a/src/lib/dialogs/InfoModal.svelte b/src/lib/dialogs/InfoModal.svelte
index a40a039..f4c2b9d 100644
--- a/src/lib/dialogs/InfoModal.svelte
+++ b/src/lib/dialogs/InfoModal.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-import { fadeImage } from "../animations.js";
+import { fadeImage, transparencyEnabled } from "../animations.js";
 import CoverBackground from "../CoverBackground.svelte";
 import {
 	type Album,
@@ -43,6 +43,7 @@ let albumItem = $state<Album | null>(null);
 let artistItem = $state<Artist | null>(null);
 let artistInfo = $state<ArtistInfo | null>(null);
 let songItem = $state<Song | null>(null);
+const scrollFadeEnabled = $derived(transparencyEnabled());
 let artistAlbums = $state<Album[]>([]);
 let artistId = $state("");
 let artistLabel = $state("");
@@ -649,9 +650,9 @@ $effect(() => {
 					{#if ui.infoItem?.type === "artist" || albumItem || artistAlbums.length || artistInfo?.similarArtist?.length || (songItem && extensions.has("sonicsimilarity"))}
 						<aside
 							bind:this={miniLibrary}
-							class="scroll-fade"
+							class:scroll-fade={scrollFadeEnabled}
 							aria-label={t("common.library")}
-							use:scrollFade
+							use:scrollFade={scrollFadeEnabled}
 						>
 							{#if songItem && extensions.has("sonicsimilarity")}
 								{@const song = songItem}
@@ -994,7 +995,7 @@ $effect(() => {
 		inline-size: 100%;
 		block-size: 100%;
 		transform-origin: center top;
-		mask-image: linear-gradient(to bottom, black, transparent 75%);
+		mask-image: linear-gradient(to bottom, black, transparent 90%);
 	}
 	:global(.info-background > img) {
 		object-position: center top;
diff --git a/src/lib/dialogs/SettingsModal.svelte b/src/lib/dialogs/SettingsModal.svelte
index 1cffc44..21e953f 100644
--- a/src/lib/dialogs/SettingsModal.svelte
+++ b/src/lib/dialogs/SettingsModal.svelte
@@ -1,5 +1,10 @@
 <script lang="ts">
-import { prefersReducedMotion } from "svelte/motion";
+import {
+	animationsEnabled,
+	prefersReducedMotion,
+	prefersReducedTransparency,
+	transparencyEnabled,
+} from "../animations.js";
 import { logout } from "../auth.svelte.js";
 import CommitRange from "../components/CommitRange.svelte";
 import { deploymentConfig } from "../deploymentConfig.js";
@@ -223,10 +228,22 @@ const columnSettings = [
 					<span>{t("settings.animations")}</span>
 					<input
 						type="checkbox"
-						bind:checked={settings.animations}
+						checked={animationsEnabled()}
+						onchange={(event) =>
+							(settings.animations = event.currentTarget.checked)}
 						disabled={prefersReducedMotion.current}
 					/>
 				</div>
+				<div class="row">
+					<span>{t("settings.transparency")}</span>
+					<input
+						type="checkbox"
+						checked={transparencyEnabled()}
+						onchange={(event) =>
+							(settings.transparency = event.currentTarget.checked)}
+						disabled={prefersReducedTransparency.current}
+					/>
+				</div>
 				<div class="row">
 					<span>{t("settings.rounded_corners")}</span>
 					<input type="checkbox" bind:checked={settings.roundedCorners} />
@@ -259,6 +276,23 @@ const columnSettings = [
 								/>
 							</div>
 						</div>
+						<div class="row">
+							<span
+								>{t("settings.blur")} (<span class="num"
+									>{settings.coverBackgroundBlur}px</span
+								>)</span
+							>
+							<div class="control">
+								<input
+									type="range"
+									min="0"
+									max="32"
+									step="1"
+									disabled={!transparencyEnabled()}
+									bind:value={settings.coverBackgroundBlur}
+								/>
+							</div>
+						</div>
 					</div>
 				{/if}
 				<div class="row">
diff --git a/src/lib/languages/locales/ar.ts b/src/lib/languages/locales/ar.ts
index 2ae4a48..694eb21 100644
--- a/src/lib/languages/locales/ar.ts
+++ b/src/lib/languages/locales/ar.ts
@@ -172,6 +172,8 @@ const ar: BaseDict = {
 	settings: {
 		appearance: "المظهر",
 		animations: "الرسوم المتحركة",
+		transparency: "الشفافية",
+		blur: "التمويه",
 		cover_background: "خلفية الغلاف",
 		artwork_sizes: "أحجام الأغلفة",
 		auto_sync: "المزامنة التلقائية",
diff --git a/src/lib/languages/locales/bn.ts b/src/lib/languages/locales/bn.ts
index 1dc5bfb..19dff37 100644
--- a/src/lib/languages/locales/bn.ts
+++ b/src/lib/languages/locales/bn.ts
@@ -172,6 +172,8 @@ const bn: BaseDict = {
 	settings: {
 		appearance: "বাহ্যিক রূপ",
 		animations: "অ্যানিমেশন",
+		transparency: "স্বচ্ছতা",
+		blur: "ঝাপসা",
 		cover_background: "কভার ব্যাকগ্রাউন্ড",
 		artwork_sizes: "আর্টওয়ার্কের আকার",
 		auto_sync: "স্বয়ংক্রিয় সিঙ্ক",
diff --git a/src/lib/languages/locales/cs.ts b/src/lib/languages/locales/cs.ts
index 3561f1b..a7b4820 100644
--- a/src/lib/languages/locales/cs.ts
+++ b/src/lib/languages/locales/cs.ts
@@ -172,6 +172,8 @@ const cs: BaseDict = {
 	settings: {
 		appearance: "Vzhled",
 		animations: "Animace",
+		transparency: "Průhlednost",
+		blur: "Rozmazání",
 		cover_background: "Pozadí obalu",
 		artwork_sizes: "Velikosti obalů",
 		auto_sync: "Automatická synchronizace",
diff --git a/src/lib/languages/locales/da.ts b/src/lib/languages/locales/da.ts
index 32ca00f..a1b7040 100644
--- a/src/lib/languages/locales/da.ts
+++ b/src/lib/languages/locales/da.ts
@@ -172,6 +172,8 @@ const da: BaseDict = {
 	settings: {
 		appearance: "Udseende",
 		animations: "Animationer",
+		transparency: "Gennemsigtighed",
+		blur: "Sløring",
 		cover_background: "Coverbaggrund",
 		artwork_sizes: "Omslagsstørrelser",
 		auto_sync: "Automatisk synkronisering",
diff --git a/src/lib/languages/locales/de.ts b/src/lib/languages/locales/de.ts
index 3de5268..4d94f30 100644
--- a/src/lib/languages/locales/de.ts
+++ b/src/lib/languages/locales/de.ts
@@ -172,6 +172,8 @@ const de: BaseDict = {
 	settings: {
 		appearance: "Erscheinungsbild",
 		animations: "Animationen",
+		transparency: "Transparenz",
+		blur: "Unschärfe",
 		cover_background: "Cover-Hintergrund",
 		artwork_sizes: "Cover-Größen",
 		auto_sync: "Automatische Synchronisierung",
diff --git a/src/lib/languages/locales/el.ts b/src/lib/languages/locales/el.ts
index acecf1f..c6998c5 100644
--- a/src/lib/languages/locales/el.ts
+++ b/src/lib/languages/locales/el.ts
@@ -173,6 +173,8 @@ const el: BaseDict = {
 	settings: {
 		appearance: "Εμφάνιση",
 		animations: "Κινήσεις",
+		transparency: "Διαφάνεια",
+		blur: "Θόλωση",
 		cover_background: "Φόντο εξωφύλλου",
 		artwork_sizes: "Μεγέθη εξωφύλλων",
 		auto_sync: "Αυτόματος συγχρονισμός",
diff --git a/src/lib/languages/locales/en.ts b/src/lib/languages/locales/en.ts
index 525bae2..d8a99e2 100644
--- a/src/lib/languages/locales/en.ts
+++ b/src/lib/languages/locales/en.ts
@@ -170,6 +170,8 @@ const en = {
 	settings: {
 		appearance: "Appearance",
 		animations: "Animations",
+		transparency: "Transparency",
+		blur: "Blur",
 		cover_background: "Cover Background",
 
 		artwork_sizes: "Artwork Sizes",
diff --git a/src/lib/languages/locales/es.ts b/src/lib/languages/locales/es.ts
index a1e2ba5..31480e2 100644
--- a/src/lib/languages/locales/es.ts
+++ b/src/lib/languages/locales/es.ts
@@ -172,6 +172,8 @@ const es: BaseDict = {
 	settings: {
 		appearance: "Apariencia",
 		animations: "Animaciones",
+		transparency: "Transparencia",
+		blur: "Desenfoque",
 		cover_background: "Fondo de portada",
 		artwork_sizes: "Tamaño de carátulas",
 		auto_sync: "Sincronización automática",
diff --git a/src/lib/languages/locales/fi.ts b/src/lib/languages/locales/fi.ts
index eba663d..42f41dd 100644
--- a/src/lib/languages/locales/fi.ts
+++ b/src/lib/languages/locales/fi.ts
@@ -173,6 +173,8 @@ const fi: BaseDict = {
 	settings: {
 		appearance: "Ulkoasu",
 		animations: "Animaatiot",
+		transparency: "Läpinäkyvyys",
+		blur: "Sumennus",
 		cover_background: "Kansitausta",
 		artwork_sizes: "Kansikuvan koot",
 		auto_sync: "Automaattinen synkronointi",
diff --git a/src/lib/languages/locales/fr.ts b/src/lib/languages/locales/fr.ts
index 250aca6..341beb2 100644
--- a/src/lib/languages/locales/fr.ts
+++ b/src/lib/languages/locales/fr.ts
@@ -172,6 +172,8 @@ const fr: BaseDict = {
 	settings: {
 		appearance: "Apparence",
 		animations: "Animations",
+		transparency: "Transparence",
+		blur: "Flou",
 		cover_background: "Arrière-plan de la pochette",
 		artwork_sizes: "Taille des pochettes",
 		auto_sync: "Synchronisation automatique",
diff --git a/src/lib/languages/locales/he.ts b/src/lib/languages/locales/he.ts
index f480eba..5cebc65 100644
--- a/src/lib/languages/locales/he.ts
+++ b/src/lib/languages/locales/he.ts
@@ -172,6 +172,8 @@ const he: BaseDict = {
 	settings: {
 		appearance: "מראה",
 		animations: "הנפשות",
+		transparency: "שקיפות",
+		blur: "טשטוש",
 		cover_background: "רקע עטיפה",
 		artwork_sizes: "גודל עטיפות",
 		auto_sync: "סנכרון אוטומטי",
diff --git a/src/lib/languages/locales/hi.ts b/src/lib/languages/locales/hi.ts
index a97e5f9..f7f8b84 100644
--- a/src/lib/languages/locales/hi.ts
+++ b/src/lib/languages/locales/hi.ts
@@ -171,6 +171,8 @@ const hi: BaseDict = {
 	settings: {
 		appearance: "रूप-रंग",
 		animations: "एनीमेशन",
+		transparency: "पारदर्शिता",
+		blur: "धुंधलापन",
 		cover_background: "कवर पृष्ठभूमि",
 		artwork_sizes: "आर्टवर्क का आकार",
 		auto_sync: "स्वतः सिंक",
diff --git a/src/lib/languages/locales/id.ts b/src/lib/languages/locales/id.ts
index 7639c93..076b8b4 100644
--- a/src/lib/languages/locales/id.ts
+++ b/src/lib/languages/locales/id.ts
@@ -172,6 +172,8 @@ const id: BaseDict = {
 	settings: {
 		appearance: "Tampilan",
 		animations: "Animasi",
+		transparency: "Transparansi",
+		blur: "Buram",
 		cover_background: "Latar belakang sampul",
 		artwork_sizes: "Ukuran gambar",
 		auto_sync: "Sinkronisasi Otomatis",
diff --git a/src/lib/languages/locales/it.ts b/src/lib/languages/locales/it.ts
index d284451..8ab8bed 100644
--- a/src/lib/languages/locales/it.ts
+++ b/src/lib/languages/locales/it.ts
@@ -172,6 +172,8 @@ const it: BaseDict = {
 	settings: {
 		appearance: "Aspetto",
 		animations: "Animazioni",
+		transparency: "Trasparenza",
+		blur: "Sfocatura",
 		cover_background: "Sfondo copertina",
 		artwork_sizes: "Dimensioni copertine",
 		auto_sync: "Sincronizzazione automatica",
diff --git a/src/lib/languages/locales/ja.ts b/src/lib/languages/locales/ja.ts
index d963bac..61c5f06 100644
--- a/src/lib/languages/locales/ja.ts
+++ b/src/lib/languages/locales/ja.ts
@@ -172,6 +172,8 @@ const ja: BaseDict = {
 	settings: {
 		appearance: "外観",
 		animations: "アニメーション",
+		transparency: "透明度",
+		blur: "ぼかし",
 		cover_background: "カバー背景",
 		artwork_sizes: "アートワークのサイズ",
 		auto_sync: "自動同期",
diff --git a/src/lib/languages/locales/ko.ts b/src/lib/languages/locales/ko.ts
index 0f580aa..b3ee21d 100644
--- a/src/lib/languages/locales/ko.ts
+++ b/src/lib/languages/locales/ko.ts
@@ -171,6 +171,8 @@ const ko: BaseDict = {
 	settings: {
 		appearance: "외관",
 		animations: "애니메이션",
+		transparency: "투명도",
+		blur: "흐림",
 		cover_background: "커버 배경",
 		artwork_sizes: "앨범 아트 크기",
 		auto_sync: "자동 동기화",
diff --git a/src/lib/languages/locales/nl.ts b/src/lib/languages/locales/nl.ts
index 318ccae..c47053c 100644
--- a/src/lib/languages/locales/nl.ts
+++ b/src/lib/languages/locales/nl.ts
@@ -173,6 +173,8 @@ const nl: BaseDict = {
 	settings: {
 		appearance: "Uiterlijk",
 		animations: "Animaties",
+		transparency: "Transparantie",
+		blur: "Vervaging",
 		cover_background: "Coverachtergrond",
 		artwork_sizes: "Grootte albumhoezen",
 		auto_sync: "Automatisch synchroniseren",
diff --git a/src/lib/languages/locales/no.ts b/src/lib/languages/locales/no.ts
index 69021fc..5f12297 100644
--- a/src/lib/languages/locales/no.ts
+++ b/src/lib/languages/locales/no.ts
@@ -172,6 +172,8 @@ const no: BaseDict = {
 	settings: {
 		appearance: "Utseende",
 		animations: "Animasjoner",
+		transparency: "Gjennomsiktighet",
+		blur: "Uskarphet",
 		cover_background: "Coverbakgrunn",
 		artwork_sizes: "Størrelse på omslag",
 		auto_sync: "Automatisk synkronisering",
diff --git a/src/lib/languages/locales/pl.ts b/src/lib/languages/locales/pl.ts
index bfaf253..8351306 100644
--- a/src/lib/languages/locales/pl.ts
+++ b/src/lib/languages/locales/pl.ts
@@ -172,6 +172,8 @@ const pl: BaseDict = {
 	settings: {
 		appearance: "Wygląd",
 		animations: "Animacje",
+		transparency: "Przezroczystość",
+		blur: "Rozmycie",
 		cover_background: "Tło okładki",
 		artwork_sizes: "Rozmiary okładek",
 		auto_sync: "Automatyczna synchronizacja",
diff --git a/src/lib/languages/locales/pt.ts b/src/lib/languages/locales/pt.ts
index f20b9a4..e6fe041 100644
--- a/src/lib/languages/locales/pt.ts
+++ b/src/lib/languages/locales/pt.ts
@@ -172,6 +172,8 @@ const pt: BaseDict = {
 	settings: {
 		appearance: "Aparência",
 		animations: "Animações",
+		transparency: "Transparência",
+		blur: "Desfoque",
 		cover_background: "Fundo da capa",
 		artwork_sizes: "Tamanho das capas",
 		auto_sync: "Sincronização automática",
diff --git a/src/lib/languages/locales/ro.ts b/src/lib/languages/locales/ro.ts
index fbae2c2..576500a 100644
--- a/src/lib/languages/locales/ro.ts
+++ b/src/lib/languages/locales/ro.ts
@@ -172,6 +172,8 @@ const ro: BaseDict = {
 	settings: {
 		appearance: "Aspect",
 		animations: "Animații",
+		transparency: "Transparență",
+		blur: "Estompare",
 		cover_background: "Fundal copertă",
 		artwork_sizes: "Dimensiuni coperți",
 		auto_sync: "Sincronizare automată",
diff --git a/src/lib/languages/locales/ru.ts b/src/lib/languages/locales/ru.ts
index 1090b29..c31d620 100644
--- a/src/lib/languages/locales/ru.ts
+++ b/src/lib/languages/locales/ru.ts
@@ -172,6 +172,8 @@ const ru: BaseDict = {
 	settings: {
 		appearance: "Внешний вид",
 		animations: "Анимации",
+		transparency: "Прозрачность",
+		blur: "Размытие",
 		cover_background: "Фон обложки",
 		artwork_sizes: "Размер обложек",
 		auto_sync: "Автосинхронизация",
diff --git a/src/lib/languages/locales/sv.ts b/src/lib/languages/locales/sv.ts
index 6caf4f3..6e3ca68 100644
--- a/src/lib/languages/locales/sv.ts
+++ b/src/lib/languages/locales/sv.ts
@@ -172,6 +172,8 @@ const sv: BaseDict = {
 	settings: {
 		appearance: "Utseende",
 		animations: "Animationer",
+		transparency: "Transparens",
+		blur: "Oskärpa",
 		cover_background: "Omslagsbakgrund",
 		artwork_sizes: "Storlek på omslag",
 		auto_sync: "Automatisk synkronisering",
diff --git a/src/lib/languages/locales/th.ts b/src/lib/languages/locales/th.ts
index d7674cc..5fbe7cd 100644
--- a/src/lib/languages/locales/th.ts
+++ b/src/lib/languages/locales/th.ts
@@ -171,6 +171,8 @@ const th: BaseDict = {
 	settings: {
 		appearance: "รูปลักษณ์",
 		animations: "ภาพเคลื่อนไหว",
+		transparency: "ความโปร่งใส",
+		blur: "เบลอ",
 		cover_background: "พื้นหลังปกอัลบั้ม",
 		artwork_sizes: "ขนาดรูปหน้าปก",
 		auto_sync: "ซิงก์อัตโนมัติ",
diff --git a/src/lib/languages/locales/tl.ts b/src/lib/languages/locales/tl.ts
index 3d75a28..69f1917 100644
--- a/src/lib/languages/locales/tl.ts
+++ b/src/lib/languages/locales/tl.ts
@@ -172,6 +172,8 @@ const tl: BaseDict = {
 	settings: {
 		appearance: "Itsura",
 		animations: "Mga animasyon",
+		transparency: "Aninaw",
+		blur: "Paglabo",
 		cover_background: "Background ng cover",
 		artwork_sizes: "Mga sukat ng artwork",
 		auto_sync: "Awtomatikong pag-sync",
diff --git a/src/lib/languages/locales/tr.ts b/src/lib/languages/locales/tr.ts
index b1ac98e..252af15 100644
--- a/src/lib/languages/locales/tr.ts
+++ b/src/lib/languages/locales/tr.ts
@@ -172,6 +172,8 @@ const tr: BaseDict = {
 	settings: {
 		appearance: "Görünüm",
 		animations: "Animasyonlar",
+		transparency: "Şeffaflık",
+		blur: "Bulanıklık",
 		cover_background: "Kapak arka planı",
 		artwork_sizes: "Kapak boyutları",
 		auto_sync: "Otomatik Senkronizasyon",
diff --git a/src/lib/languages/locales/uk.ts b/src/lib/languages/locales/uk.ts
index ad5e9b3..f12e358 100644
--- a/src/lib/languages/locales/uk.ts
+++ b/src/lib/languages/locales/uk.ts
@@ -172,6 +172,8 @@ const uk: BaseDict = {
 	settings: {
 		appearance: "Зовнішній вигляд",
 		animations: "Анімації",
+		transparency: "Прозорість",
+		blur: "Розмиття",
 		cover_background: "Фон обкладинки",
 		artwork_sizes: "Розміри обкладинок",
 		auto_sync: "Автосинхронізація",
diff --git a/src/lib/languages/locales/vi.ts b/src/lib/languages/locales/vi.ts
index a6ca2ab..b2e59d1 100644
--- a/src/lib/languages/locales/vi.ts
+++ b/src/lib/languages/locales/vi.ts
@@ -172,6 +172,8 @@ const vi: BaseDict = {
 	settings: {
 		appearance: "Diện mạo",
 		animations: "Hoạt ảnh",
+		transparency: "Độ trong suốt",
+		blur: "Độ nhòe",
 		cover_background: "Nền ảnh bìa",
 		artwork_sizes: "Kích thước ảnh bìa",
 		auto_sync: "Tự động đồng bộ",
diff --git a/src/lib/languages/locales/zhcn.ts b/src/lib/languages/locales/zhcn.ts
index 98a7cee..aec14db 100644
--- a/src/lib/languages/locales/zhcn.ts
+++ b/src/lib/languages/locales/zhcn.ts
@@ -167,6 +167,8 @@ const zhcn: BaseDict = {
 	settings: {
 		appearance: "外观",
 		animations: "动画",
+		transparency: "透明度",
+		blur: "模糊",
 		cover_background: "封面背景",
 		artwork_sizes: "封面尺寸",
 		auto_sync: "自动同步",
diff --git a/src/lib/languages/locales/zhtw.ts b/src/lib/languages/locales/zhtw.ts
index 44242c8..12dc517 100644
--- a/src/lib/languages/locales/zhtw.ts
+++ b/src/lib/languages/locales/zhtw.ts
@@ -167,6 +167,8 @@ const zhtw: BaseDict = {
 	settings: {
 		appearance: "外觀",
 		animations: "動畫",
+		transparency: "透明度",
+		blur: "模糊",
 		cover_background: "封面背景",
 		artwork_sizes: "封面尺寸",
 		auto_sync: "自動同步",
diff --git a/src/lib/settings.svelte.ts b/src/lib/settings.svelte.ts
index 55e482e..ab5330e 100644
--- a/src/lib/settings.svelte.ts
+++ b/src/lib/settings.svelte.ts
@@ -31,11 +31,13 @@ const settingDefs = {
 	artSong: { default: 16 },
 	artNow: { default: 128 },
 	animations: { default: true },
+	transparency: { default: true },
 	coverBackground: {
 		default: "off" as CoverBackgroundMode,
 		validate: oneOf("off", "album", "artist"),
 	},
 	coverBackgroundOpacity: { default: 0.25 },
+	coverBackgroundBlur: { default: 16 },
 	dynamicColors: { default: false },
 	dynamicFavicon: { default: false },
 	downloads: { default: false },
-- 
2.51.2