From 6ced26a78f2fb686cf9a3fb575fb0cbe551260f4 Mon Sep 17 00:00:00 2001
From: intergrav <devin@devins.page>
Date: Thu, 6 Aug 2026 15:55:17 -0400
Subject: [PATCH] refactor: clean up and modernize styling

---
 package.json                                |  3 +-
 src/app.css                                 | 60 +++++++++--------
 src/lib/Controls.svelte                     | 39 ++++++-----
 src/lib/Library.svelte                      |  6 +-
 src/lib/LibraryTreeItem.svelte              | 43 ++++++------
 src/lib/NowPlaying.svelte                   | 74 +++++++++++----------
 src/lib/Queue.svelte                        | 19 ++----
 src/lib/Sidebar.svelte                      |  5 +-
 src/lib/Visualizer.svelte                   |  3 +-
 src/lib/components/ContextMenu.svelte       |  6 +-
 src/lib/components/ProgressBar.svelte       | 10 +--
 src/lib/dialogs/AuthModal.svelte            |  2 -
 src/lib/dialogs/InfoModal.svelte            |  1 -
 src/lib/dialogs/Modal.svelte                | 22 +++++-
 src/lib/dialogs/PlaylistModals.svelte       | 15 -----
 src/lib/dialogs/RadioModals.svelte          | 15 -----
 src/lib/dialogs/SettingsModal.svelte        | 20 +++---
 src/lib/dialogs/ShortcutsModal.svelte       | 10 +--
 src/lib/dialogs/UnsyncedChangesModal.svelte | 13 ++--
 src/lib/dialogs/UpdateModal.svelte          |  4 --
 src/lib/icons/Icon.svelte                   | 10 +--
 21 files changed, 175 insertions(+), 205 deletions(-)

diff --git a/package.json b/package.json
index 2e77aec..43edcb8 100644
--- a/package.json
+++ b/package.json
@@ -7,8 +7,7 @@
 		"dev": "vite",
 		"build": "vite build",
 		"preview": "vite preview",
-		"check:svelte": "svelte-check --tsconfig ./tsconfig.app.json",
-		"check:tsc": "tsc --noEmit",
+		"check:svelte": "svelte-check",
 		"check:biome": "biome check",
 		"check:knip": "knip",
 		"check": "svelte-check && biome check && knip",
diff --git a/src/app.css b/src/app.css
index 4076360..85209d1 100644
--- a/src/app.css
+++ b/src/app.css
@@ -2,7 +2,6 @@
 	color-scheme: light dark;
 
 	--bg-layer: light-dark(hsl(0 0% 0% / 0.05), hsl(0 0% 100% / 0.05));
-	--bg-playing: hsl(200 90% 50% / 0.3);
 	--bg-highlight: Highlight;
 	--bg: Canvas;
 
@@ -14,6 +13,10 @@
 	--text-highlight: HighlightText;
 	--text: CanvasText;
 
+	--accent-red: red;
+	--accent-orange: orange;
+	--accent-green: lime;
+
 	--font-family:
 		system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
 		"Apple Color Emoji", "Segoe UI Emoji";
@@ -23,7 +26,8 @@
 	--radius-sm: 2px;
 	--radius-md: 4px;
 
-	--button-hover-scale: 1.125;
+	--ease-out-cubic: cubic-bezier(0.33, 1, 0.68, 1);
+
 	--button-press-scale-x: 1.25;
 	--button-press-scale-y: 0.75;
 	--button-hover-duration: 350ms;
@@ -36,6 +40,20 @@
 	--viewport-inset-left: env(safe-area-inset-left, 0px);
 }
 
+/* squircles! only chromium supports this right now */
+/* snippet from https://til.jakelazaroff.com/css/make-all-rounded-corners-squircles */
+
+@supports (corner-shape: squircle) {
+	:root {
+		--radius-sm: 4px;
+		--radius-md: 8px;
+	}
+	:where(html.rounded-corners)
+		:where(:not(button, input, select, textarea, option, optgroup)) {
+		corner-shape: squircle;
+	}
+}
+
 html.window-controls-overlay {
 	--viewport-inset-top: max(
 		env(safe-area-inset-top, 0px),
@@ -51,11 +69,11 @@ html.window-controls-overlay {
 	display: block;
 	inline-size: 100%;
 	block-size: 100%;
+	object-fit: cover;
 }
 
 .rounded-corners :is(.artwork, .artwork-image) {
 	border-radius: var(--radius-sm);
-	corner-shape: squircle;
 }
 
 button.pressable--gentle {
@@ -67,7 +85,7 @@ button.pressable--gentle {
 
 html.animations {
 	&.dynamic-colors {
-		transition: background-color 300ms cubic-bezier(0.33, 1, 0.68, 1);
+		transition: background-color 300ms var(--ease-out-cubic);
 	}
 
 	img.image-loading {
@@ -85,7 +103,7 @@ html.animations {
 			:where(.pressable--gentle)
 		):hover,
 	button.pressable.focused:not(:disabled, :active, .pressable--gentle) {
-		transform: scale(var(--button-hover-scale));
+		transform: scale(1.125);
 	}
 
 	button:where(.pressable, :has(> .icon)):not(:disabled):active {
@@ -157,7 +175,6 @@ html {
 	font-size: calc(var(--font-size) * env(preferred-text-scale, 1));
 	font-family: var(--font-family);
 	user-select: none;
-	-webkit-user-select: none;
 	-webkit-tap-highlight-color: transparent;
 	overscroll-behavior: none;
 }
@@ -174,25 +191,18 @@ html.transparent-borders {
 body {
 	background: transparent;
 	color: var(--text);
-	block-size: 100vh;
-	inline-size: 100vw;
+	block-size: 100dvh;
+	inline-size: 100dvw;
 	padding: env(safe-area-inset-top) env(safe-area-inset-right)
 		env(safe-area-inset-bottom) env(safe-area-inset-left);
 }
 
-@supports (block-size: 100dvh) {
-	body {
-		block-size: 100dvh;
-		inline-size: 100dvw;
-	}
-}
-
 #app {
 	display: grid;
 	grid-template-areas:
 		"sidebar queue"
 		"sidebar controls";
-	grid-template-columns: auto 1fr;
+	grid-template-columns: auto minmax(0, 1fr);
 	grid-template-rows: 1fr auto;
 	block-size: 100%;
 	inline-size: 100%;
@@ -214,13 +224,13 @@ body {
 	border-inline-end: var(--border);
 }
 
-@media (max-width: 32rem) {
+@media (width <= 32rem) {
 	html:not(.miniplayer) body {
 		background: var(--bg);
 	}
 
 	html.animations.dynamic-colors body {
-		transition: background-color 300ms cubic-bezier(0.33, 1, 0.68, 1);
+		transition: background-color 300ms var(--ease-out-cubic);
 	}
 	#sidebar {
 		display: contents;
@@ -263,6 +273,10 @@ html.miniplayer #app {
 	grid-template-rows: 1fr auto;
 }
 
+html.miniplayer #now-playing {
+	grid-area: nowplaying;
+}
+
 html.miniplayer #library,
 html.miniplayer #queue {
 	display: none;
@@ -289,13 +303,3 @@ html.miniplayer.window-controls-overlay #now-playing {
 	app-region: drag;
 	z-index: 20;
 }
-
-/* squircles! only chromium supports this right now */
-/* snippet from https://til.jakelazaroff.com/css/make-all-rounded-corners-squircles */
-
-@supports (corner-shape: squircle) {
-	:root {
-		--radius-sm: 4px;
-		--radius-md: 8px;
-	}
-}
diff --git a/src/lib/Controls.svelte b/src/lib/Controls.svelte
index c10096d..f2d4270 100644
--- a/src/lib/Controls.svelte
+++ b/src/lib/Controls.svelte
@@ -30,7 +30,6 @@ let menu = $state<{
 
 <section
 	id="controls"
-	class="controls"
 	aria-label={t("common.controls")}
 	class:time-disabled={!settings.controlTime}
 	class:volume-disabled={!settings.controlVolume}
@@ -250,7 +249,7 @@ let menu = $state<{
 {/if}
 
 <style>
-	.controls {
+	#controls {
 		container-type: inline-size;
 	}
 	#playback {
@@ -286,7 +285,7 @@ let menu = $state<{
 			order: 2;
 		}
 
-		@container (max-width: 36rem) {
+		@container (width <= 36rem) {
 			display: grid;
 			grid-template-columns: minmax(0, 1fr);
 
@@ -300,13 +299,13 @@ let menu = $state<{
 			}
 		}
 
-		@container (max-width: 26rem) {
+		@container (width <= 26rem) {
 			.time {
 				display: none;
 			}
 		}
 
-		@container (max-width: 20rem) {
+		@container (width <= 20rem) {
 			.volume {
 				display: none;
 			}
@@ -325,6 +324,12 @@ let menu = $state<{
 	#playback-next {
 		--button-transform-origin: 25%;
 	}
+	:global(:dir(rtl)) #playback-prev {
+		--button-transform-origin: 25%;
+	}
+	:global(:dir(rtl)) #playback-next {
+		--button-transform-origin: 75%;
+	}
 
 	button {
 		background: none;
@@ -352,8 +357,8 @@ let menu = $state<{
 		gap: 1rem;
 	}
 	.stats {
-		@container (max-width: 20rem) {
-			@media (max-width: 32rem) {
+		@container (width <= 20rem) {
+			@media (width <= 32rem) {
 				display: none;
 			}
 		}
@@ -365,7 +370,7 @@ let menu = $state<{
 			opacity: 0.5;
 		}
 
-		@container (max-width: 32rem) {
+		@container (width <= 32rem) {
 			--button-press-scale-x: 1.25;
 			--button-press-scale-y: 0.75;
 			--button-hover-duration: 400ms;
@@ -380,7 +385,7 @@ let menu = $state<{
 	.library-toggle {
 		display: none;
 
-		@media (max-width: 32rem) {
+		@media (width <= 32rem) {
 			display: flex;
 		}
 	}
@@ -401,8 +406,8 @@ let menu = $state<{
 		border-block-start: var(--border-subtle);
 	}
 
-	@container (max-width: 36rem) {
-		:global(html.miniplayer) .controls.time-disabled.volume-disabled {
+	@container (width <= 36rem) {
+		:global(html.miniplayer) #controls.time-disabled.volume-disabled {
 			#ratings,
 			#playback .playback-main {
 				justify-content: center;
@@ -412,8 +417,8 @@ let menu = $state<{
 			}
 		}
 	}
-	@container (max-width: 26rem) {
-		:global(html.miniplayer) .controls.volume-disabled {
+	@container (width <= 26rem) {
+		:global(html.miniplayer) #controls.volume-disabled {
 			#ratings,
 			#playback .playback-main {
 				justify-content: center;
@@ -423,8 +428,8 @@ let menu = $state<{
 			}
 		}
 	}
-	@container (max-width: 20rem) {
-		:global(html.miniplayer) .controls {
+	@container (width <= 20rem) {
+		:global(html.miniplayer) #controls {
 			#ratings,
 			#playback .playback-main {
 				justify-content: center;
@@ -443,12 +448,12 @@ let menu = $state<{
 	}
 	.btn-rating.active {
 		:global(html:not(.dynamic-colors)) & {
-			color: hsl(45, 100%, 60%);
+			color: var(--accent-orange);
 		}
 	}
 	.btn-favorite.active {
 		:global(html:not(.dynamic-colors)) & {
-			color: hsl(0, 100%, 60%);
+			color: var(--accent-red);
 		}
 	}
 	.rating-stars {
diff --git a/src/lib/Library.svelte b/src/lib/Library.svelte
index ef50cdd..15d7f54 100644
--- a/src/lib/Library.svelte
+++ b/src/lib/Library.svelte
@@ -904,7 +904,7 @@ function onKey(event: KeyboardEvent) {
 	.library-header {
 		padding-block-start: 0.5rem;
 	}
-	#search {
+	input {
 		inline-size: 100%;
 	}
 	:global(#library > ul) {
@@ -939,14 +939,14 @@ function onKey(event: KeyboardEvent) {
 	button {
 		color: inherit;
 	}
-	:global(.dynamic-colors) #search {
+	:global(.dynamic-colors) input {
 		background: var(--bg-layer);
 		color: var(--text);
 		border: var(--border);
 		border-radius: var(--radius-md);
 		corner-shape: squircle;
 	}
-	:global(.dynamic-colors) #search::placeholder {
+	:global(.dynamic-colors) input::placeholder {
 		color: var(--text);
 		opacity: 0.5;
 	}
diff --git a/src/lib/LibraryTreeItem.svelte b/src/lib/LibraryTreeItem.svelte
index a4204cb..633fc01 100644
--- a/src/lib/LibraryTreeItem.svelte
+++ b/src/lib/LibraryTreeItem.svelte
@@ -331,7 +331,7 @@ function onDragStart(event: DragEvent) {
 		type="button"
 		tabindex="-1"
 		class:focused={lib.focusedId === rowKey}
-		class="btn main pressable pressable--gentle"
+		class="main pressable pressable--gentle"
 		data-id={rowKey}
 		draggable={canDrag}
 		disabled={busy}
@@ -396,10 +396,7 @@ function onDragStart(event: DragEvent) {
 			</div>
 		{/if}
 		<div class="label-stack">
-			<span
-				class="label"
-				title={label}
-				style:font-style={isNewItem ? "italic" : undefined}
+			<span title={label} style:font-style={isNewItem ? "italic" : undefined}
 				>{label}</span
 			>
 			{#if owner && !isOwner}
@@ -411,7 +408,7 @@ function onDragStart(event: DragEvent) {
 		<button
 			type="button"
 			tabindex="-1"
-			class="btn action pressable"
+			class="action pressable"
 			disabled={busy}
 			onclick={(e) => (e.stopPropagation(), doUpdate())}
 			title={isRadio ? t("common.update") : t("action.update_playlist")}
@@ -423,7 +420,7 @@ function onDragStart(event: DragEvent) {
 		<button
 			type="button"
 			tabindex="-1"
-			class="btn action pressable"
+			class="action pressable"
 			disabled={busy}
 			onclick={(e) => (e.stopPropagation(), doDelete())}
 			title={isShare
@@ -439,7 +436,7 @@ function onDragStart(event: DragEvent) {
 		<button
 			type="button"
 			tabindex="-1"
-			class="btn action pressable"
+			class="action pressable"
 			disabled={busy}
 			onclick={(e) => (e.stopPropagation(), doCopyShareLink())}
 			title={t("action.copy_link")}
@@ -451,7 +448,7 @@ function onDragStart(event: DragEvent) {
 		<button
 			type="button"
 			tabindex="-1"
-			class="btn action pressable"
+			class="action pressable"
 			disabled={busy}
 			onclick={(e) => (e.stopPropagation(), onPrimaryAction())}
 			title={type === "new-playlist"
@@ -465,7 +462,7 @@ function onDragStart(event: DragEvent) {
 		<button
 			type="button"
 			tabindex="-1"
-			class="btn action pressable"
+			class="action pressable"
 			disabled={busy}
 			onclick={(e) => (e.stopPropagation(), onAdd(false))}
 			title={t("action.add_to_queue")}
@@ -477,7 +474,7 @@ function onDragStart(event: DragEvent) {
 		<button
 			type="button"
 			tabindex="-1"
-			class="btn touch pressable"
+			class="touch pressable"
 			disabled={busy}
 			onclick={(e) => {
 				e.stopPropagation();
@@ -502,15 +499,15 @@ function onDragStart(event: DragEvent) {
 		margin-block-start: 0.5rem;
 	}
 
-	.btn.main.focused {
+	.main.focused {
 		background: var(--bg-highlight);
 		color: var(--text-highlight);
 	}
-	:global(#library:not(:focus-within)) .btn.main.focused {
+	:global(#library:not(:focus-within)) .main.focused {
 		background: GrayText;
 		color: HighlightText;
 	}
-	.btn {
+	button {
 		background: none;
 		border: none;
 		padding: 0;
@@ -518,7 +515,7 @@ function onDragStart(event: DragEvent) {
 		display: flex;
 		align-items: center;
 	}
-	.btn:disabled {
+	button:disabled {
 		opacity: 0.5;
 	}
 	.main {
@@ -532,9 +529,10 @@ function onDragStart(event: DragEvent) {
 	}
 	.artwork {
 		position: relative;
-	}
-	.artwork-image {
-		object-fit: cover;
+
+		.artwork-image {
+			object-fit: cover;
+		}
 	}
 	.touch {
 		display: none;
@@ -549,8 +547,7 @@ function onDragStart(event: DragEvent) {
 			margin: -0.5rem;
 		}
 	}
-	.label,
-	.owner {
+	span {
 		overflow: hidden;
 		text-overflow: ellipsis;
 		white-space: nowrap;
@@ -573,11 +570,11 @@ function onDragStart(event: DragEvent) {
 	}
 	:global(.badge.public) {
 		inset-inline-end: 0;
-		color: hsl(120, 100%, 60%);
+		color: var(--accent-green);
 	}
 	:global(.badge.favorite) {
 		inset-inline-end: 0;
-		color: hsl(0, 100%, 60%);
+		color: var(--accent-red);
 
 		& :global(svg) {
 			fill: currentColor;
@@ -585,6 +582,6 @@ function onDragStart(event: DragEvent) {
 	}
 	:global(.badge.downloaded) {
 		inset-inline-start: 0;
-		color: hsl(120, 100%, 60%);
+		color: var(--accent-green);
 	}
 </style>
diff --git a/src/lib/NowPlaying.svelte b/src/lib/NowPlaying.svelte
index 0f85076..6342db3 100644
--- a/src/lib/NowPlaying.svelte
+++ b/src/lib/NowPlaying.svelte
@@ -326,8 +326,8 @@ $effect(() => {
 		overflow: clip;
 
 		:global(html:not(.miniplayer)) & {
-			@media (max-width: 32rem) {
-				text-align: left;
+			@media (width <= 32rem) {
+				text-align: start;
 				padding-block: 0.5rem;
 
 				.track-content {
@@ -348,13 +348,13 @@ $effect(() => {
 				}
 			}
 
-			@media (max-width: 16rem) {
+			@media (width <= 16rem) {
 				.track-artwork {
 					inline-size: 48px;
 				}
 			}
 
-			@media (max-height: 24rem) {
+			@media (height <= 24rem) {
 				.track-artwork {
 					display: none;
 				}
@@ -387,10 +387,10 @@ $effect(() => {
 				inline-size: min(100cqi, 100cqb);
 			}
 
-			@media (max-height: 12rem) {
+			@media (height <= 12rem) {
 				align-items: center;
 				justify-content: flex-start;
-				text-align: left;
+				text-align: start;
 
 				.track-content {
 					flex-direction: row;
@@ -449,8 +449,6 @@ $effect(() => {
 
 		.track-artwork {
 			position: relative;
-			border: none;
-			padding: 0;
 			inline-size: var(--art-size);
 			max-inline-size: 100%;
 			aspect-ratio: 1;
@@ -459,8 +457,12 @@ $effect(() => {
 			.lyrics {
 				position: absolute;
 				inset: 0;
+				display: flex;
+				flex-direction: column;
+				gap: 0.5rem;
 				padding: 1rem;
 				white-space: pre-wrap;
+				text-wrap: pretty;
 				overflow-wrap: anywhere;
 				overflow-y: auto;
 				color: var(--text);
@@ -475,10 +477,6 @@ $effect(() => {
 					}
 				}
 
-				display: flex;
-				flex-direction: column;
-				gap: 0.5rem;
-
 				&.synced > :not(.current-line) {
 					opacity: 0.5;
 				}
@@ -502,39 +500,38 @@ $effect(() => {
 		.track-info {
 			inline-size: 100%;
 			min-inline-size: 0;
-			border: none;
-			padding: 0;
 			background: none;
 			color: inherit;
 			font: inherit;
 			text-align: inherit;
-		}
 
-		:is(.title, .artist) {
-			white-space: nowrap;
-			overflow-x: clip;
-			text-overflow: ellipsis;
-		}
+			:is(.title, .artist) {
+				white-space: nowrap;
+				overflow-x: clip;
+				text-overflow: ellipsis;
+			}
 
-		.title {
-			font-weight: bold;
-		}
+			.title {
+				font-weight: bold;
+			}
 
-		.artist {
-			font-size: 0.8rem;
-			opacity: 0.75;
-		}
+			:is(.artist, .scrobbling, .synced-lyrics) {
+				font-size: 0.8rem;
+			}
 
-		.scrobbling {
-			font-size: 0.8rem;
-			opacity: 0.5;
-		}
+			.artist {
+				opacity: 0.75;
+			}
 
-		.synced-lyrics {
-			font-size: 0.8rem;
-			opacity: 0.75;
-			font-style: italic;
-			overflow: clip;
+			.scrobbling {
+				opacity: 0.5;
+			}
+
+			.synced-lyrics {
+				opacity: 0.75;
+				font-style: italic;
+				overflow: clip;
+			}
 		}
 	}
 
@@ -542,4 +539,9 @@ $effect(() => {
 		border-radius: var(--radius-md);
 		corner-shape: squircle;
 	}
+
+	button {
+		border: none;
+		padding: 0;
+	}
 </style>
diff --git a/src/lib/Queue.svelte b/src/lib/Queue.svelte
index 35fcbf7..1a26543 100644
--- a/src/lib/Queue.svelte
+++ b/src/lib/Queue.svelte
@@ -993,7 +993,7 @@ function showMenu(index: number, x?: number, y?: number) {
 		border-block-end: var(--border-subtle);
 
 		:global(html.animations.dynamic-colors) & {
-			transition: background-color 300ms cubic-bezier(0.33, 1, 0.68, 1);
+			transition: background-color 300ms var(--ease-out-cubic);
 		}
 
 		&.selection {
@@ -1052,7 +1052,7 @@ function showMenu(index: number, x?: number, y?: number) {
 			background: var(--bg-layer);
 		}
 		&.playing {
-			background: var(--bg-playing);
+			background: hsl(200 90% 50% / 0.3);
 		}
 		&.selected {
 			background: var(--bg-highlight);
@@ -1065,14 +1065,11 @@ function showMenu(index: number, x?: number, y?: number) {
 			box-shadow: inset 0 -2px 0 var(--text);
 		}
 	}
-	.btn-head,
-	.btn-favorite,
-	.btn-rating,
-	.btn-touch,
-	.btn-download {
+	button {
 		background: none;
 		border: none;
 		padding: 0;
+		color: inherit;
 	}
 
 	.btn-favorite,
@@ -1095,13 +1092,13 @@ function showMenu(index: number, x?: number, y?: number) {
 	.btn-rating.active {
 		opacity: 1;
 		:global(html:not(.dynamic-colors)) & {
-			color: hsl(45, 100%, 60%);
+			color: var(--accent-orange);
 		}
 	}
 	.btn-favorite.active {
 		opacity: 1;
 		:global(html:not(.dynamic-colors)) & {
-			color: hsl(0, 100%, 60%);
+			color: var(--accent-red);
 		}
 	}
 	.btn-download {
@@ -1120,9 +1117,5 @@ function showMenu(index: number, x?: number, y?: number) {
 	}
 	:global(.rounded-corners) #queue .row {
 		border-radius: var(--radius-sm);
-		corner-shape: squircle;
-	}
-	button {
-		color: inherit;
 	}
 </style>
diff --git a/src/lib/Sidebar.svelte b/src/lib/Sidebar.svelte
index 2d55c6d..b580fa0 100644
--- a/src/lib/Sidebar.svelte
+++ b/src/lib/Sidebar.svelte
@@ -34,7 +34,6 @@ $effect(() => {
 	<Library />
 	<NowPlaying />
 	<div
-		class="resizer"
 		role="slider"
 		tabindex="-1"
 		aria-controls="sidebar"
@@ -77,7 +76,7 @@ $effect(() => {
 		}
 	}
 
-	.resizer {
+	div[role="slider"] {
 		position: absolute;
 		inset-block: 0;
 		inset-inline-end: -2px;
@@ -90,7 +89,7 @@ $effect(() => {
 			display: none;
 		}
 
-		@media screen and (max-width: 32rem) {
+		@media (width <= 32rem) {
 			display: none;
 		}
 	}
diff --git a/src/lib/Visualizer.svelte b/src/lib/Visualizer.svelte
index dfc0a7b..0838f41 100644
--- a/src/lib/Visualizer.svelte
+++ b/src/lib/Visualizer.svelte
@@ -350,14 +350,13 @@ $effect(() => {
 	bind:clientHeight
 	{width}
 	{height}
-	class="visualizer"
 	style:opacity={player.paused ? 0 : settings.visualizerOpacity}
 	style:z-index={settings.visualizerOverlay ? 10 : 0}
 	style:mix-blend-mode={settings.visualizerBlendMode}
 ></canvas>
 
 <style>
-	.visualizer {
+	canvas {
 		position: absolute;
 		inset: 0;
 		inline-size: 100%;
diff --git a/src/lib/components/ContextMenu.svelte b/src/lib/components/ContextMenu.svelte
index 1a53dba..930e6b3 100644
--- a/src/lib/components/ContextMenu.svelte
+++ b/src/lib/components/ContextMenu.svelte
@@ -337,7 +337,6 @@ function onKey(event: KeyboardEvent) {
 		z-index: 1000;
 	}
 	.menu {
-		box-sizing: border-box;
 		position: fixed;
 		top: clamp(
 			var(--viewport-inset-top),
@@ -357,7 +356,7 @@ function onKey(event: KeyboardEvent) {
 		background: Canvas;
 		color: CanvasText;
 		border: var(--border);
-		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+		box-shadow: 0 2px 10px rgb(0 0 0 / 0.2);
 		min-inline-size: min(160px, var(--viewport-inline-size));
 		max-inline-size: var(--viewport-inline-size);
 		max-block-size: var(--viewport-block-size);
@@ -367,7 +366,6 @@ function onKey(event: KeyboardEvent) {
 
 		:global(.rounded-corners) & {
 			border-radius: var(--radius-md);
-			corner-shape: squircle;
 			overflow-x: hidden;
 		}
 
@@ -397,7 +395,7 @@ function onKey(event: KeyboardEvent) {
 	button {
 		background: none;
 		border: none;
-		text-align: left;
+		text-align: start;
 		padding: 0.375rem 0.75rem;
 		inline-size: 100%;
 		display: flex;
diff --git a/src/lib/components/ProgressBar.svelte b/src/lib/components/ProgressBar.svelte
index 2d7b4a3..4dd5f47 100644
--- a/src/lib/components/ProgressBar.svelte
+++ b/src/lib/components/ProgressBar.svelte
@@ -61,13 +61,14 @@ const percentage = $derived(
 </div>
 
 <style>
-	.progress-bar,
-	input {
-		inline-size: 100%;
-	}
 	.progress-bar {
 		display: flex;
 		align-items: center;
+		inline-size: 100%;
+
+		input {
+			inline-size: 100%;
+		}
 	}
 	:global(html.dynamic-colors) input:not(.custom) {
 		accent-color: var(--text);
@@ -184,7 +185,6 @@ const percentage = $derived(
 	}
 	@media (pointer: coarse) {
 		.custom {
-			--thumb-block-size: 1rem;
 			--thumb-inline-size: 1.5rem;
 		}
 	}
diff --git a/src/lib/dialogs/AuthModal.svelte b/src/lib/dialogs/AuthModal.svelte
index 1e37468..15dc097 100644
--- a/src/lib/dialogs/AuthModal.svelte
+++ b/src/lib/dialogs/AuthModal.svelte
@@ -106,7 +106,6 @@ $effect(() => {
 				<a
 					target="_blank"
 					href="https://tangled.org/devins.page/tinysub#i-cant-log-in"
-					class="auth-notice"
 					>{t("auth.login_notice")}
 				</a>
 			</div>
@@ -155,7 +154,6 @@ $effect(() => {
 	form {
 		display: flex;
 		flex-direction: column;
-		box-sizing: border-box;
 		gap: 0.5rem;
 		inline-size: 22rem;
 		max-inline-size: 100%;
diff --git a/src/lib/dialogs/InfoModal.svelte b/src/lib/dialogs/InfoModal.svelte
index db00c2a..848a4bc 100644
--- a/src/lib/dialogs/InfoModal.svelte
+++ b/src/lib/dialogs/InfoModal.svelte
@@ -49,7 +49,6 @@ $effect(() => {
 
 <style>
 	section {
-		box-sizing: border-box;
 		max-inline-size: min(80dvw, 56rem, var(--viewport-inline-size));
 		max-block-size: min(70dvh, var(--viewport-block-size));
 		overflow: auto;
diff --git a/src/lib/dialogs/Modal.svelte b/src/lib/dialogs/Modal.svelte
index 01cbaf3..857bd65 100644
--- a/src/lib/dialogs/Modal.svelte
+++ b/src/lib/dialogs/Modal.svelte
@@ -58,7 +58,6 @@ $effect(() => {
 
 <style>
 	dialog {
-		box-sizing: border-box;
 		position: fixed;
 		inset: var(--viewport-inset-top) var(--viewport-inset-right)
 			var(--viewport-inset-bottom) var(--viewport-inset-left);
@@ -67,11 +66,10 @@ $effect(() => {
 		max-block-size: var(--viewport-block-size);
 		border: var(--border);
 		padding: 0;
-		box-shadow: 0 16px 32px rgba(0, 0, 0, 0.2);
+		box-shadow: 0 16px 32px rgb(0 0 0 / 0.2);
 
 		:global(.rounded-corners) & {
 			border-radius: var(--radius-md);
-			corner-shape: squircle;
 		}
 	}
 	:global(html.animations) dialog[open] {
@@ -90,6 +88,24 @@ $effect(() => {
 		flex-direction: column;
 		flex: 1;
 		overflow: hidden;
+
+		:global(.field) {
+			display: flex;
+			flex-direction: column;
+			gap: 0.5rem;
+			margin-block-end: 0.5rem;
+		}
+
+		:global(.warn) {
+			color: red;
+			font-weight: bold;
+		}
+
+		:global(.actions) {
+			display: flex;
+			justify-content: flex-end;
+			gap: 0.5rem;
+		}
 	}
 	button {
 		background: none;
diff --git a/src/lib/dialogs/PlaylistModals.svelte b/src/lib/dialogs/PlaylistModals.svelte
index 58fb60a..ff87493 100644
--- a/src/lib/dialogs/PlaylistModals.svelte
+++ b/src/lib/dialogs/PlaylistModals.svelte
@@ -195,19 +195,4 @@ async function doDelete() {
 	section {
 		padding: 0.5rem 1rem;
 	}
-	.field {
-		display: flex;
-		flex-direction: column;
-		gap: 0.5rem;
-		margin-block-end: 0.5rem;
-	}
-	.warn {
-		color: red;
-		font-weight: bold;
-	}
-	.actions {
-		display: flex;
-		justify-content: flex-end;
-		gap: 0.5rem;
-	}
 </style>
diff --git a/src/lib/dialogs/RadioModals.svelte b/src/lib/dialogs/RadioModals.svelte
index a260664..af77b95 100644
--- a/src/lib/dialogs/RadioModals.svelte
+++ b/src/lib/dialogs/RadioModals.svelte
@@ -139,19 +139,4 @@ async function doDelete() {
 	section {
 		padding: 0.5rem 1rem;
 	}
-	.field {
-		display: flex;
-		flex-direction: column;
-		gap: 0.5rem;
-		margin-block-end: 0.5rem;
-	}
-	.warn {
-		color: red;
-		font-weight: bold;
-	}
-	.actions {
-		display: flex;
-		justify-content: flex-end;
-		gap: 0.5rem;
-	}
 </style>
diff --git a/src/lib/dialogs/SettingsModal.svelte b/src/lib/dialogs/SettingsModal.svelte
index 924003f..b283fdc 100644
--- a/src/lib/dialogs/SettingsModal.svelte
+++ b/src/lib/dialogs/SettingsModal.svelte
@@ -126,7 +126,7 @@ const columnSettings = [
 	class="settings-modal"
 >
 	<div class="body">
-		<header class="tabs">
+		<header>
 			{#each tabs as tab}
 				<button
 					class="tab pressable pressable--gentle"
@@ -138,7 +138,7 @@ const columnSettings = [
 			{/each}
 		</header>
 
-		<main class="content">
+		<main>
 			{#if activeTab === "general"}
 				<div class="row">
 					<span>{t("common.language")}</span>
@@ -772,23 +772,21 @@ const columnSettings = [
 		flex: 1;
 		overflow: auto;
 
-		@media (min-width: 32rem) {
+		@media (width >= 32rem) {
 			flex-direction: row;
 		}
 	}
-	.tabs {
+	header {
 		display: flex;
 		gap: 0.25rem;
-		overflow-x: auto;
-		overflow-y: hidden;
+		overflow: auto hidden;
 		border-block-end: var(--border-subtle);
 		padding: 0.5rem 1rem 0;
 
-		@media (min-width: 32rem) {
+		@media (width >= 32rem) {
 			gap: 0;
 			flex-direction: column;
-			overflow-x: hidden;
-			overflow-y: auto;
+			overflow: hidden auto;
 			border-block-end: none;
 			border-inline-end: var(--border-subtle);
 			padding: 0;
@@ -814,7 +812,7 @@ const columnSettings = [
 			color: var(--text-highlight);
 		}
 
-		@media (min-width: 32rem) {
+		@media (width >= 32rem) {
 			--button-transform-origin: left center;
 			background: none;
 			text-align: start;
@@ -835,7 +833,7 @@ const columnSettings = [
 		inline-size: 48rem;
 		block-size: 36rem;
 	}
-	.content {
+	main {
 		flex: 1;
 		overflow-y: auto;
 		padding: 0.5rem 1rem;
diff --git a/src/lib/dialogs/ShortcutsModal.svelte b/src/lib/dialogs/ShortcutsModal.svelte
index 6288aad..fa70cae 100644
--- a/src/lib/dialogs/ShortcutsModal.svelte
+++ b/src/lib/dialogs/ShortcutsModal.svelte
@@ -52,9 +52,9 @@ let sections = $derived([
 </script>
 
 <Modal bind:open={ui.showKeys} title={t("common.shortcuts")}>
-	<section class="container">
+	<section>
 		{#each sections as section}
-			<div class="section">
+			<div class="group">
 				<h3>{section.title}</h3>
 				{#each section.items as { k: key, d: desc }}
 					<div class="row"><kbd>{key}</kbd><span>{desc}</span></div>
@@ -70,17 +70,17 @@ let sections = $derived([
 		padding-block-end: 0.25rem;
 		margin-block: 0 0.5rem;
 	}
-	.container {
+	section {
 		padding: 0.5rem 1rem;
 		display: grid;
 		grid-template-columns: repeat(2, 1fr);
 		gap: 1.5rem;
 
-		@media (max-width: 32rem) {
+		@media (width <= 32rem) {
 			grid-template-columns: 1fr;
 		}
 	}
-	.section {
+	.group {
 		display: flex;
 		flex-direction: column;
 		gap: 0.5rem;
diff --git a/src/lib/dialogs/UnsyncedChangesModal.svelte b/src/lib/dialogs/UnsyncedChangesModal.svelte
index 9d73240..b5157db 100644
--- a/src/lib/dialogs/UnsyncedChangesModal.svelte
+++ b/src/lib/dialogs/UnsyncedChangesModal.svelte
@@ -154,7 +154,7 @@ async function handleDiscard() {
 				{#each offlineManager.queuedRequests as req}
 					{#if req.id !== undefined}
 						{@const id = req.id}
-						<label class="item">
+						<label>
 							<input
 								type="checkbox"
 								checked={selectedIds.has(id)}
@@ -163,7 +163,7 @@ async function handleDiscard() {
 										? selectedIds.add(id)
 										: selectedIds.delete(id)}
 							/>
-							<span class="text">{requestLabels.get(id) || "..."}</span>
+							<span>{requestLabels.get(id) || "..."}</span>
 						</label>
 					{/if}
 				{/each}
@@ -187,7 +187,6 @@ async function handleDiscard() {
 
 <style>
 	.container {
-		box-sizing: border-box;
 		padding: 1rem;
 		display: flex;
 		flex-direction: column;
@@ -208,22 +207,18 @@ async function handleDiscard() {
 
 		:global(.rounded-corners) & {
 			border-radius: var(--radius-sm);
-			corner-shape: squircle;
 		}
 	}
-	.item {
+	label {
 		display: flex;
 		align-items: center;
 		gap: 0.5rem;
 	}
-	.text {
+	span {
 		min-inline-size: 0;
 		overflow-wrap: anywhere;
 	}
 	.actions {
-		display: flex;
 		flex-wrap: wrap;
-		justify-content: flex-end;
-		gap: 0.5rem;
 	}
 </style>
diff --git a/src/lib/dialogs/UpdateModal.svelte b/src/lib/dialogs/UpdateModal.svelte
index a73ac7b..3d85697 100644
--- a/src/lib/dialogs/UpdateModal.svelte
+++ b/src/lib/dialogs/UpdateModal.svelte
@@ -30,8 +30,4 @@ const { needRefresh, updateServiceWorker } = useRegisterSW({
 	section {
 		padding: 0.5rem 1rem;
 	}
-	.actions {
-		display: flex;
-		justify-content: flex-end;
-	}
 </style>
diff --git a/src/lib/icons/Icon.svelte b/src/lib/icons/Icon.svelte
index dc5c104..9110858 100644
--- a/src/lib/icons/Icon.svelte
+++ b/src/lib/icons/Icon.svelte
@@ -52,9 +52,11 @@ let style = $derived(
 		block-size: var(--icon-size, 16px);
 	}
 
-	span :global(svg) {
-		inline-size: 100%;
-		block-size: 100%;
-		stroke-width: 2px;
+	span {
+		:global(svg) {
+			inline-size: 100%;
+			block-size: 100%;
+			stroke-width: 2px;
+		}
 	}
 </style>
-- 
2.51.2