From a34f07d08211c10171e9cd234b7ee78ec42d852f Mon Sep 17 00:00:00 2001
From: intergrav <devin@devins.page>
Date: Thu, 27 Aug 2026 17:37:45 -0400
Subject: [PATCH] refactor: css improvements

---
 src/lib/Controls.svelte               |  4 +-
 src/lib/Library.svelte                |  5 +--
 src/lib/LibraryLabel.svelte           |  4 +-
 src/lib/LibraryTreeItem.svelte        | 64 ++++++++++++---------------
 src/lib/NowPlaying.svelte             |  5 +--
 src/lib/components/ProgressBar.svelte |  2 +-
 src/lib/dialogs/InfoModal.svelte      | 21 ++++-----
 src/lib/dialogs/SettingsModal.svelte  |  4 +-
 src/lib/icons/Icon.svelte             | 13 +++---
 9 files changed, 54 insertions(+), 68 deletions(-)

diff --git a/src/lib/Controls.svelte b/src/lib/Controls.svelte
index cdada2b..07ed14f 100644
--- a/src/lib/Controls.svelte
+++ b/src/lib/Controls.svelte
@@ -323,10 +323,10 @@ let menu = $state<{
 		}
 	}
 }
-.progress :global(.progress-bar) {
+.progress > :global(.progress-bar) {
 	flex: 1;
 }
-.volume :global(.progress-bar) {
+.volume > :global(.progress-bar) {
 	--progress-press-scale: 0.875;
 	inline-size: 5rem;
 }
diff --git a/src/lib/Library.svelte b/src/lib/Library.svelte
index e503bb1..108788f 100644
--- a/src/lib/Library.svelte
+++ b/src/lib/Library.svelte
@@ -869,7 +869,6 @@ function onKey(event: KeyboardEvent) {
 					</span>
 					<button
 						type="button"
-						class="btn"
 						onclick={() => offlineManager.cancelDownloads()}
 						aria-label={t("offline.cancel_downloads")}
 						title={t("offline.cancel_downloads")}
@@ -957,7 +956,7 @@ function onKey(event: KeyboardEvent) {
 input {
 	inline-size: 100%;
 }
-:global(#library > ul) {
+#library > :global(ul) {
 	padding: 0;
 	margin: 0;
 	list-style: none;
@@ -982,7 +981,7 @@ input {
 	justify-content: space-between;
 	gap: 0.5rem;
 }
-.btn {
+.status > button {
 	background: none;
 	border: none;
 	padding: 0;
diff --git a/src/lib/LibraryLabel.svelte b/src/lib/LibraryLabel.svelte
index 70500bc..2b91803 100644
--- a/src/lib/LibraryLabel.svelte
+++ b/src/lib/LibraryLabel.svelte
@@ -38,7 +38,7 @@ let {
 		<button
 			type="button"
 			tabindex="-1"
-			class="action pressable"
+			class="pressable"
 			aria-label={t("action.add_to_queue")}
 			onclick={(event) => {
 				event.stopPropagation();
@@ -74,7 +74,7 @@ let {
 		color: var(--text-highlight);
 	}
 }
-.action {
+.label-row > button + button {
 	flex: none;
 	display: flex;
 	align-items: center;
diff --git a/src/lib/LibraryTreeItem.svelte b/src/lib/LibraryTreeItem.svelte
index 39bfb6c..5c169de 100644
--- a/src/lib/LibraryTreeItem.svelte
+++ b/src/lib/LibraryTreeItem.svelte
@@ -420,7 +420,7 @@ function onDragStart(event: DragEvent) {
 		<button
 			type="button"
 			tabindex="-1"
-			class="action pressable"
+			class="pressable"
 			disabled={busy}
 			onclick={(e) => {
 				e.stopPropagation();
@@ -435,7 +435,7 @@ function onDragStart(event: DragEvent) {
 		<button
 			type="button"
 			tabindex="-1"
-			class="action pressable"
+			class="pressable"
 			disabled={busy}
 			onclick={(e) => {
 				e.stopPropagation();
@@ -448,37 +448,39 @@ function onDragStart(event: DragEvent) {
 			<Icon name="create" />
 		</button>
 	{/if}
-	{#if !isShare && !isSpecialItem}
+	{#if !isSpecialItem}
 		<button
 			type="button"
 			tabindex="-1"
-			class="action add-action pressable"
+			class="pressable"
+			aria-haspopup="menu"
+			style:--action-size="{settings.iconSize}px"
 			disabled={busy}
 			onclick={(e) => {
 				e.stopPropagation();
-				onAdd?.(false);
+				const bounds = (
+					e.currentTarget as HTMLButtonElement
+				).getBoundingClientRect();
+				onMenu?.({ x: bounds.right, y: bounds.bottom, items: menuItems });
 			}}
-			title={t("action.add_to_queue")}
+			title={t("shortcut.context_menu")}
 		>
-			<Icon name="add" />
+			⋮
 		</button>
 	{/if}
-	{#if !isSpecialItem}
+	{#if !isShare && !isSpecialItem}
 		<button
 			type="button"
 			tabindex="-1"
-			class="touch pressable"
+			class="pressable"
 			disabled={busy}
 			onclick={(e) => {
 				e.stopPropagation();
-				const bounds = (
-					e.currentTarget as HTMLButtonElement
-				).getBoundingClientRect();
-				onMenu?.({ x: bounds.right, y: bounds.bottom, items: menuItems });
+				onAdd?.(false);
 			}}
-			title={t("shortcut.context_menu")}
+			title={t("action.add_to_queue")}
 		>
-			⋮
+			<Icon name="add" />
 		</button>
 	{/if}
 </div>
@@ -522,26 +524,17 @@ button:disabled {
 }
 .artwork {
 	position: relative;
-
-	.artwork-image {
-		object-fit: cover;
-	}
 }
-.touch {
+button[aria-haspopup="menu"] {
 	display: none;
+	inline-size: var(--action-size);
+	block-size: var(--action-size);
+	justify-content: center;
 }
 @media (pointer: coarse) {
-	.action {
-		display: none;
-	}
-	.add-action {
+	button[aria-haspopup="menu"] {
 		display: flex;
 	}
-	.touch {
-		display: block;
-		padding: 0.5rem;
-		margin: -0.5rem;
-	}
 }
 span {
 	overflow: hidden;
@@ -559,24 +552,25 @@ span {
 	font-size: 0.8rem;
 	opacity: 0.75;
 }
-:global(.badge) {
+.artwork > :global(.badge) {
 	position: absolute;
 	inset-block-end: 0;
 	line-height: 0;
 }
-:global(.badge.public) {
+.artwork > :global(.badge:is(.public, .favorite)) {
 	inset-inline-end: 0;
+}
+.artwork > :global(.badge.public) {
 	color: var(--accent-green);
 }
-:global(.badge.favorite) {
-	inset-inline-end: 0;
+.artwork > :global(.badge.favorite) {
 	color: var(--accent-red);
 
-	& :global(svg) {
+	& > :global(svg) {
 		fill: currentColor;
 	}
 }
-:global(.badge.downloaded) {
+.artwork > :global(.badge.downloaded) {
 	inset-inline-start: 0;
 	color: var(--accent-green);
 }
diff --git a/src/lib/NowPlaying.svelte b/src/lib/NowPlaying.svelte
index 7679058..7ac630b 100644
--- a/src/lib/NowPlaying.svelte
+++ b/src/lib/NowPlaying.svelte
@@ -248,7 +248,6 @@ $effect(() => {
 											src={api.getCoverArt(artId, 512)}
 											class="artwork-image"
 											{@attach fadeImage}
-											class:hidden={showLyrics}
 										>
 									{/if}
 									{#if settings.visualizerLocation === "artwork"}
@@ -388,12 +387,12 @@ $effect(() => {
 			}
 		}
 
-		.artwork-image.hidden {
+		&[aria-pressed="true"] > .artwork-image {
 			opacity: 0.125;
 		}
 
 		:global(html.transparency) & {
-			.artwork-image.hidden {
+			&[aria-pressed="true"] > .artwork-image {
 				opacity: 0.25;
 				filter: blur(16px);
 			}
diff --git a/src/lib/components/ProgressBar.svelte b/src/lib/components/ProgressBar.svelte
index 2d7c300..8333607 100644
--- a/src/lib/components/ProgressBar.svelte
+++ b/src/lib/components/ProgressBar.svelte
@@ -66,7 +66,7 @@ const percentage = $derived(
 	align-items: center;
 	inline-size: 100%;
 
-	input {
+	> input {
 		inline-size: 100%;
 	}
 }
diff --git a/src/lib/dialogs/InfoModal.svelte b/src/lib/dialogs/InfoModal.svelte
index c7e8922..7ae5113 100644
--- a/src/lib/dialogs/InfoModal.svelte
+++ b/src/lib/dialogs/InfoModal.svelte
@@ -558,7 +558,6 @@ $effect(() => {
 												{#if albumId}
 													<button
 														type="button"
-														class="pressable--gentle"
 														onclick={() =>
 															(ui.infoItem = {
 																type: "album",
@@ -577,7 +576,6 @@ $effect(() => {
 												{#if artistId}
 													<button
 														type="button"
-														class="pressable--gentle"
 														onclick={() =>
 															(ui.infoItem = {
 																type: "artist",
@@ -620,7 +618,6 @@ $effect(() => {
 												{#if artistId}
 													<button
 														type="button"
-														class="pressable--gentle"
 														onclick={() =>
 															(ui.infoItem = {
 																type: "artist",
@@ -832,17 +829,17 @@ $effect(() => {
 </Modal>
 
 <style>
-:global(.info-modal),
-:global(.info-modal > header) {
+:global(dialog.info-modal),
+:global(dialog.info-modal > header) {
 	background: var(--info-bg, Canvas);
 	color: var(--info-text, CanvasText);
 }
-:global(.info-modal) {
+:global(dialog.info-modal) {
 	display: flex;
 	flex-direction: column;
 	min-block-size: 16rem;
 }
-:global(.info-modal a) {
+:global(dialog.info-modal a) {
 	color: inherit;
 }
 section {
@@ -876,11 +873,11 @@ section {
 	min-inline-size: 0;
 }
 @container (width > 40rem) {
-	.info-layout:has(aside) {
+	.info-layout:has(> aside) {
 		position: relative;
 		padding-inline-end: calc(var(--info-sidebar-width) + 1rem);
 	}
-	aside {
+	.info-layout > aside {
 		position: absolute;
 		inset-block: 0;
 		inset-inline-end: 0;
@@ -889,7 +886,7 @@ section {
 	}
 }
 @media (width <= 32rem) {
-	:global(.info-modal) {
+	:global(dialog.info-modal) {
 		inline-size: var(--viewport-inline-size);
 		block-size: var(--viewport-block-size);
 		min-block-size: 0;
@@ -1017,7 +1014,7 @@ article > header > img {
 	inline-size: 48px;
 	border-radius: var(--radius-sm);
 }
-:global(.info-background) {
+section > :global(.info-background) {
 	position: absolute;
 	inset-inline: 0;
 	inset-block-start: 0;
@@ -1027,7 +1024,7 @@ article > header > img {
 	transform-origin: center top;
 	mask-image: linear-gradient(to bottom, black, transparent 90%);
 }
-:global(.info-background > img) {
+section > :global(.info-background) > :global(img) {
 	object-position: center top;
 }
 </style>
diff --git a/src/lib/dialogs/SettingsModal.svelte b/src/lib/dialogs/SettingsModal.svelte
index 2ad9e9a..8551478 100644
--- a/src/lib/dialogs/SettingsModal.svelte
+++ b/src/lib/dialogs/SettingsModal.svelte
@@ -888,7 +888,7 @@ header {
 		}
 	}
 }
-:global(.settings-modal) {
+:global(dialog.settings-modal) {
 	display: flex;
 	flex-direction: column;
 	inline-size: 48rem;
@@ -938,7 +938,7 @@ h3 {
 }
 input,
 select,
-.control :global(input) {
+.control > :global(input) {
 	max-inline-size: min(10rem, 40cqw);
 }
 </style>
diff --git a/src/lib/icons/Icon.svelte b/src/lib/icons/Icon.svelte
index 426dd29..33afc0a 100644
--- a/src/lib/icons/Icon.svelte
+++ b/src/lib/icons/Icon.svelte
@@ -44,17 +44,14 @@ let style = $derived(
 {/if}
 
 <style>
-img,
-span {
+.icon {
 	inline-size: var(--icon-size, 16px);
 	block-size: var(--icon-size, 16px);
 }
 
-span {
-	:global(svg) {
-		inline-size: 100%;
-		block-size: 100%;
-		stroke-width: 2px;
-	}
+.icon > :global(svg) {
+	inline-size: 100%;
+	block-size: 100%;
+	stroke-width: 2px;
 }
 </style>
-- 
2.51.2