From c2b23795146e5c2e516a9d4fa0451de6aab201f6 Mon Sep 17 00:00:00 2001
From: Alex Perathoner <alex.perathoner@gmail.com>
Date: Mon, 2 Jun 2025 17:52:15 +0200
Subject: [PATCH] ExtraDetails: Add backup background color

---
 src/lib/nav/DetailedMenu.svelte    |  6 ++-
 src/lib/poster/ExtraDetails.svelte | 19 +++++++--
 src/routes/(app)/+layout.svelte    |  2 +-
 src/vars.scss                      | 65 ++++++++++++++++++++++++++++++
 4 files changed, 86 insertions(+), 6 deletions(-)
 create mode 100644 src/vars.scss

diff --git a/src/lib/nav/DetailedMenu.svelte b/src/lib/nav/DetailedMenu.svelte
index f4f9373b..1b6b0ad3 100644
--- a/src/lib/nav/DetailedMenu.svelte
+++ b/src/lib/nav/DetailedMenu.svelte
@@ -17,7 +17,11 @@
 <Menu
 	conf={{
 		width: "200px",
-		right: "92px",
+		right:
+			page.url?.pathname.startsWith("/person") ||
+			page.url?.pathname.startsWith("/discover")
+				? "12px"
+				: "92px",
 		arrowLeft: page.url?.pathname.startsWith("/search") ? "84px" : "3px",
 	}}
 >
diff --git a/src/lib/poster/ExtraDetails.svelte b/src/lib/poster/ExtraDetails.svelte
index 65bde343..0e4f3698 100644
--- a/src/lib/poster/ExtraDetails.svelte
+++ b/src/lib/poster/ExtraDetails.svelte
@@ -25,6 +25,16 @@
 			store.userSettings.ratingSystem === RatingSystem.Thumbs,
 	);
 
+	let statusColorMap = {
+		FINISHED: "var(--status-finished-color)",
+		PLANNED: "var(--status-planned-color)",
+		WATCHING: "var(--status-watching-color)",
+		HOLD: "var(--status-hold-color)",
+		DROPPED: "var(--status-dropped-color)",
+	};
+
+	let backgroundColor = status !== undefined ? statusColorMap[status] : "";
+
 	function formatDate(e: number) {
 		if (!e) {
 			return "Unknown";
@@ -36,8 +46,8 @@
 	}
 </script>
 
-{#if (page.url?.pathname === "/" || page.url?.pathname.startsWith("/search")) && store.wlDetailedView && store.wlDetailedView.length > 0}
-	<div class="extra-details">
+{#if (page.url?.pathname === "/" || page.url?.pathname.startsWith("/search") || page.url?.pathname.startsWith("/person") || page.url?.pathname.startsWith("/discover")) && details && store.wlDetailedView && store.wlDetailedView.length > 0}
+	<div class="extra-details" style="background-color: {backgroundColor}">
 		<!--
       The `if` statements can't be on their own line to look pretty
       because that will cause whitespace in the generated markup,
@@ -99,8 +109,9 @@
 
 <style lang="scss">
 	.extra-details {
+		$bot: 6px;
+		bottom: $bot;
 		position: absolute;
-		bottom: 5px;
 		left: 50%;
 		transform: translateX(-50%);
 		display: flex;
@@ -108,7 +119,7 @@
 		justify-content: center;
 		align-items: center;
 		font-size: 14px;
-		width: 160px;
+		width: calc(100% - $bot * 2);
 		color: white;
 		background-color: $poster-extra-detail-bg-color;
 		border-radius: 10px;
diff --git a/src/routes/(app)/+layout.svelte b/src/routes/(app)/+layout.svelte
index 518f444e..38e2a62f 100644
--- a/src/routes/(app)/+layout.svelte
+++ b/src/routes/(app)/+layout.svelte
@@ -244,7 +244,7 @@
 		</div>
 		<div class="btns">
 			<!-- Detailed posters only supported on own watched list currently -->
-			{#if page.url?.pathname === "/" || page.url?.pathname.startsWith("/search")}
+			{#if page.url?.pathname === "/" || page.url?.pathname.startsWith("/search") || page.url?.pathname.startsWith("/person") || page.url?.pathname.startsWith("/discover")}
 				<button
 					class="plain other detailedView"
 					onclick={() => {
diff --git a/src/vars.scss b/src/vars.scss
new file mode 100644
index 00000000..43096ab1
--- /dev/null
+++ b/src/vars.scss
@@ -0,0 +1,65 @@
+:root {
+	--bg-color: white;
+	--bg-color-accent: rgb(180, 180, 180);
+	--nav-color: rgba(255, 255, 255, 0.8);
+	--text-color: black;
+	--text-color-accent: rgb(90, 90, 90);
+	--accent-color: rgba(128, 128, 128, 0.226);
+	--accent-color-hover: rgba(46, 46, 46);
+	--backdrop-filter: blur(4px) grayscale(80%);
+	--backdrop-mix-blend-mode: multiply;
+	--rating-color: black;
+	--placeholder-color: #8e8e8e;
+	--poster-rating-color: gold;
+	--img-blend-multiply-bg-col: rgba(0, 0, 0, 0.85);
+
+	--status-finished-color: rgba(123, 213, 85, 0.8);
+	--status-planned-color: rgba(247, 154, 99, 0.8);
+	--status-watching-color: rgba(61, 100, 242, 0.8);
+	--status-hold-color: rgba(232, 93, 117, 0.8);
+	--status-dropped-color: rgba(232, 93, 117, 0.8);
+}
+
+:root.theme-dark {
+	--bg-color: rgb(15, 15, 15);
+	--bg-color-accent: rgb(70, 70, 70);
+	--nav-color: rgba(15, 15, 15, 0.438);
+	--text-color: white;
+	--text-color-accent: rgb(180, 180, 180);
+	--accent-color: rgba(46, 46, 46);
+	--accent-color-hover: rgba(255, 255, 255, 0.8);
+	--backdrop-filter: blur(0.5px) grayscale(50%);
+	--backdrop-mix-blend-mode: difference;
+	--rating-color: gold;
+	--placeholder-color: #8e8e8e;
+	--poster-rating-color: black;
+	--img-blend-multiply-bg-col: rgba(255, 255, 255, 0.03);
+}
+
+$bg-color: var(--bg-color);
+$bg-color-accent: var(--bg-color-accent);
+$text-color: var(--text-color);
+$text-color-accent: var(--text-color-accent);
+$placeholder-color: var(--placeholder-color);
+$accent-color: var(--accent-color);
+$accent-color-hover: var(--accent-color-hover);
+$backdrop-filter: var(--backdrop-filter);
+$backdrop-mix-blend-mode: var(--backdrop-mix-blend-mode);
+$backdrop-mask-image: linear-gradient(
+	to bottom,
+	rgba(0, 0, 0, 1) 80%,
+	rgba(0, 0, 0, 0)
+);
+$nav-color: var(--nav-color);
+$nav-height: 71px; // How tall the nav is naturally, usefull in some places.
+$poster-rating-color: var(--poster-rating-color);
+$poster-extra-detail-bg-color: rgba(46, 46, 46, 0.5);
+// Bg col of elements with image behind with mix-blend-mode: multiply where we want a little of image to come through.
+$img-blend-multiply-bg-col: var(--img-blend-multiply-bg-col);
+$warn: #f38755;
+$error: #f3555a;
+$success: #28a745;
+$success-hover: #1e7e34;
+
+// For ratings that are on bg-color.
+$rating-color: var(--rating-color);