Styling and usability fixes

svelte/src/filesystem/DetailsWindow.svelte

@@ -193,7 +193,7 @@ run(() => {
 					<td>{formatThousands(total_downloads)} (unique, counted once per IP)</td>
 				</tr>
 				<tr>
-					<td>Egress bandwidth</td>
+					<td>Egress traffic</td>
 					<td>
 						{formatDataVolume(total_egress, 4)}
 						( {formatThousands(total_egress)} B ),

svelte/src/filesystem/edit_window/Branding.ts

@@ -4,7 +4,7 @@ import hsl2rgb from "pure-color/convert/hsl2rgb";
 import rgb2hex from "pure-color/convert/rgb2hex";
 import type { FSNode, FSNodeProperties } from "lib/FilesystemAPI.svelte";
 
-const text_contrast = 75
+const text_contrast = 80
 const body_alpha = 0.9
 
 type Style = {
@@ -116,9 +116,9 @@ const add_styles = (style: Style, properties: FSNodeProperties) => {
 
 const add_contrast = (color: string, amt: number) => {
 	let hsl = rgb2hsl(parse(color)) // Convert hex to hsl
-	// If the lightness is less than 30 it is considered a dark colour. This
-	// threshold is 30 instead of 50 because overall dark text is more legible
-	if (hsl[2] < 30) {
+	// If the lightness is less than 40 it is considered a dark colour. This
+	// threshold is 40 instead of 50 because overall dark text is more legible
+	if (hsl[2] < 40) {
 		hsl[2] = hsl[2] + amt // Dark color, add lightness
 	} else {
 		hsl[2] = hsl[2] - amt // Light color, remove lightness

svelte/src/filesystem/edit_window/EditWindow.svelte

@@ -163,7 +163,7 @@ const save = async (e: SubmitEvent) => {
 
 <style>
 .tab_bar {
-	border-bottom: 2px solid var(--separator);
+	border-bottom: 1px solid var(--separator);
 }
 .tab_content {
 	padding: 8px;

svelte/src/filesystem/edit_window/ThemePresets.svelte

@@ -86,6 +86,30 @@ const themes = [
 		brand_background_color: "#1e1e2e",
 		brand_body_color: "#181825",
 		brand_card_color: "#313244",
+	}, {
+		name: "Nova",
+		brand_input_color: "#170025",
+		brand_highlight_color: "#57e389",
+		brand_danger_color: "#ed333b",
+		brand_background_color: "#0d0015",
+		brand_body_color: "#130020",
+		brand_card_color: "#1a002b",
+	}, {
+		name: "Green Phosphor",
+		brand_input_color: "#001e09",
+		brand_highlight_color: "#57e389",
+		brand_danger_color: "#ed333b",
+		brand_background_color: "#000502",
+		brand_body_color: "#000903",
+		brand_card_color: "#001707",
+	}, {
+		name: "Amber",
+		brand_input_color: "#3c2b00",
+		brand_highlight_color: "#f5c211",
+		brand_danger_color: "#c01c28",
+		brand_background_color: "#171100",
+		brand_body_color: "#201700",
+		brand_card_color: "#281d00",
 	}
 ]
 </script>

svelte/src/filesystem/viewers/Audio.svelte

@@ -92,7 +92,7 @@ onMount(() => {
 
 		<h2>Tracklist</h2>
 		{#each siblings as sibling (sibling.path)}
-			<a href={"/d"+fs_encode_path(sibling.path)} class="node">
+			<a href={"/d"+fs_encode_path(sibling.path)} class="node" class:playing={sibling.path === $nav.base.path}>
 				{#if sibling.path === $nav.base.path}
 					<i class="play_arrow icon">play_arrow</i>
 				{:else}
@@ -131,4 +131,7 @@ onMount(() => {
 .play_arrow {
 	margin: 4px;
 }
+.playing {
+	color: var(--highlight_color);
+}
 </style>