header: unify dropdown menus, nav text colors, minor fixes

Rework UserHeader and LanguageSelector dropdowns to use wrapper + triangle pattern with theme-aware backgrounds. Use solid grey for inactive nav text instead of semi-transparent. Reduce instruction info box shadow. Add emoji font to CompactCard favorites.
2026-03-01 21:00:07 +01:00
parent d9ab4ee151
commit 96fe5e96be
4 changed files with 112 additions and 127 deletions
--- a/src/lib/components/LanguageSelector.svelte
+++ b/src/lib/components/LanguageSelector.svelte
@@ -183,43 +183,43 @@
 		border-color: var(--nav-btn-border-hover, rgba(255,255,255,0.4));
 		background: var(--nav-hover-bg, rgba(255,255,255,0.1));
 	}
-	.language-options{
+	.options-wrap {
 		--bg_color: rgba(46, 52, 64, 0.95);
 		--opt-text: rgba(255,255,255,0.7);
 		--opt-text-hover: white;
 		--opt-hover-bg: rgba(255,255,255,0.1);
 		--opt-active-bg: rgba(136, 192, 208, 0.25);
 		--opt-border: rgba(255,255,255,0.08);
-		box-sizing: border-box;
-		border-radius: 8px;
 		position: absolute;
 		right: 0;
-		top: calc(100% + 10px);
-		background-color: var(--bg_color);
-		backdrop-filter: blur(16px);
-		-webkit-backdrop-filter: blur(16px);
-		width: 8ch;
-		padding: 0.35rem;
+		top: calc(100% + 2px);
 		z-index: 1000;
 		display: none;
-		border: 1px solid var(--opt-border);
-		box-shadow: 0 4px 16px rgba(0,0,0,0.3);
 	}
-	.language-options::after {
-		content: "";
+	.options-wrap::before {
+		content: '';
+		position: absolute;
+		top: 0;
+		right: 0.8rem;
 		border: 8px solid transparent;
 		border-bottom-color: var(--bg_color);
 		border-top: 0;
-		position: absolute;
-		top: -8px;
-		right: 0.8rem;
+	}
+	.language-options {
+		box-sizing: border-box;
+		border-radius: 8px;
+		margin-top: 8px;
+		background-color: var(--bg_color);
+		width: 8ch;
+		padding: 0.35rem;
+		box-shadow: 0 4px 16px rgba(0,0,0,0.3);
 	}
 	/* Show via JS toggle */
-	.language-options.open {
+	.options-wrap.open {
 		display: block;
 	}
 	/* Show via CSS focus-within (no-JS fallback) */
-	.language-selector:focus-within .language-options {
+	.language-selector:focus-within .options-wrap {
 		display: block;
 	}
 	.language-options a{
@@ -248,16 +248,16 @@
 		font-weight: 700;
 	}
 	@media (prefers-color-scheme: dark) {
-		.language-options {
+		.options-wrap {
 			--bg_color: rgba(20, 20, 20, 0.92);
 		}
 	}
-	:global(:root[data-theme="dark"]) .language-options {
+	:global(:root[data-theme="dark"]) .options-wrap {
 		--bg_color: rgba(20, 20, 20, 0.92);
 	}
 	/* Light mode dropdown */
 	@media (prefers-color-scheme: light) {
-		:global(:root:not([data-theme])) .language-options {
+		:global(:root:not([data-theme])) .options-wrap {
 			--bg_color: rgba(255, 255, 255, 0.95);
 			--opt-text: rgba(0,0,0,0.6);
 			--opt-text-hover: var(--nord0);
@@ -266,7 +266,7 @@
 			--opt-border: rgba(0,0,0,0.08);
 		}
 	}
-	:global(:root[data-theme="light"]) .language-options {
+	:global(:root[data-theme="light"]) .options-wrap {
 		--bg_color: rgba(255, 255, 255, 0.95);
 		--opt-text: rgba(0,0,0,0.6);
 		--opt-text-hover: var(--nord0);
@@ -280,7 +280,8 @@
 	<button bind:this={langButton} onclick={toggle_language_options} class="language-button">
 		{displayLang.toUpperCase()}
 	</button>
-	<div class="language-options" class:open={isOpen}>
+	<div class="options-wrap" class:open={isOpen}>
+		<div class="language-options">
 			<a
 				href={dePath}
 				class:active={displayLang === 'de'}
@@ -296,4 +297,5 @@
 				EN
 			</a>
 		</div>
+	</div>
 </div>
--- a/src/lib/components/UserHeader.svelte
+++ b/src/lib/components/UserHeader.svelte
@@ -5,7 +5,7 @@
 	let { user, recipeLang = 'rezepte', lang = 'de' } = $props();

 	function toggle_options(){
-		const el = document.querySelector("#options")
+		const el = document.querySelector("#options-wrap")
 		el.hidden = !el.hidden
 	}

@@ -14,8 +14,8 @@
 			const userButton = document.querySelector("#button")

 			if(userButton && !userButton.contains(e.target)){
-				const options = document.querySelector("#options");
-				if (options) options.hidden = true;
+				const wrap = document.querySelector("#options-wrap");
+				if (wrap) wrap.hidden = true;
 			}
 		})
 	})
@@ -44,123 +44,104 @@
 	}
 </script>
 <style>
-	/* (A) SPEECH BOX */
-.speech {
-  /* (A1) FONT */
-   font-size: 1.1em;
-
-  /* (A2) COLORS */
-  color: #fff;
-  background: var(--bg_color);
-
-  /* (A3) DIMENSIONS + POSITION */
-  position: relative;
-  border-radius: 10px;
-}
-
-/* (B) ADD SPEECH "CALLOUT TAIL" */
-/* (B1) USE ::AFTER TO CREATE THE "TAIL" */
-.speech::after {
-  /* (B1-1) ATTACH TRANSPARENT BORDERS */
-  content: "";
-  border: 20px solid transparent;
-
-  /* (B1-2) NECESSARY TO POSITION THE "TAIL" */
-  position: absolute;
-}
-
-/* (C) DIFFERENT TAIL POSITIONS */
-/* (C1) TOP */
-.top.speech::after {
-  /* (C1-1) UP TRIANGLE */
-  border-bottom-color: var(--bg_color);
-  border-top: 0;
-
-  /* (C1-2) POSITION AT TOP */
-  top: -10px; left:84.5%;
-  margin-left: -20px;
-}
-
-
-	button{
-		--margin-right: 0;
+	button {
 		position: relative;
 		background-color: transparent;
 		border: none;
 		width: 1.8rem;
 		height: 1.8rem;
 		border-radius: 50%;
-		margin-right: var(--margin-right);
 		background-color: var(--nord4);
 		background-position: center;
 		background-size: contain;
+		cursor: pointer;
 	}
-	#options{
-		--bg_color: var(--nord3);
-		box-sizing: border-box;
-		border-radius: 5px;
+	.options-wrap {
+		--menu-bg: rgba(46, 52, 64, 0.95);
+		--menu-border: rgba(255,255,255,0.08);
+		--menu-text: rgba(255,255,255,0.9);
+		--menu-text-hover: var(--nord11);
 		position: absolute;
-		right: calc( -1*var(--margin-right) + 0.25rem);
-		top: calc(100% + 10px);
-		background-color: var(--bg_color);
+		right: 0;
+		top: calc(100% + 2px);
+		z-index: 10;
+	}
+	.options-wrap::before {
+		content: '';
+		position: absolute;
+		top: 0;
+		right: 0.35rem;
+		border: 8px solid transparent;
+		border-bottom-color: var(--menu-bg);
+		border-top: 0;
+	}
+	#options {
+		box-sizing: border-box;
+		margin-top: 8px;
+		background-color: var(--menu-bg);
+		color: var(--menu-text);
+		border-radius: 8px;
 		width: 30ch;
 		padding: 1rem;
-		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
+		box-shadow: 0 4px 16px rgba(0,0,0,0.3);
 	}
-	#options ul{
-		color: white;
-		font-size: 1.2rem;
+	@media (prefers-color-scheme: dark) {
+		.options-wrap {
+			--menu-bg: rgba(20, 20, 20, 0.92);
+		}
+	}
+	:global(:root[data-theme="dark"]) .options-wrap {
+		--menu-bg: rgba(20, 20, 20, 0.92);
+	}
+	@media (prefers-color-scheme: light) {
+		:global(:root:not([data-theme])) .options-wrap {
+			--menu-bg: rgba(255, 255, 255, 0.95);
+			--menu-border: rgba(0,0,0,0.08);
+			--menu-text: var(--color-text-primary);
+			--menu-text-hover: var(--nord11);
+		}
+	}
+	:global(:root[data-theme="light"]) .options-wrap {
+		--menu-bg: rgba(255, 255, 255, 0.95);
+		--menu-border: rgba(0,0,0,0.08);
+		--menu-text: var(--color-text-primary);
+		--menu-text-hover: var(--nord11);
+	}
+	#options ul {
+		font-size: 1rem;
 		width: 100%;
 		list-style-type: none;
 		padding: 0;
+		margin: 0;
 	}
-	#options li{
-		margin-block: 0.5rem;
+	#options li {
+		margin-block: 0.4rem;
 		text-align: left;
 	}
-	#options li a{
+	#options li a {
 		text-decoration: none;
-		color: white;
+		color: var(--menu-text);
 		text-align: left;
 		transition: var(--transition-fast);
 	}
-	#options li:hover a{
-		color: var(--red);
+	#options li:hover a {
+		color: var(--menu-text-hover);
 	}
-	/* (B2) BOTTOM "CALLOUT TAIL" */
-h2{
+	h2 {
 		margin-block: 0;
-	font-size: 1.2rem;
-}
-h2 + p{
+		font-size: 1.1rem;
+	}
+	h2 + p {
 		padding-top: 0;
 		margin-top: 0;
-	font-size: 1.2rem;
-}
-@media screen and (max-width: 800px){
-	#options{
-		top: unset;
-		bottom: calc(100% + 15px);
-		left: 50%;
-		right: unset;
-		transform: translateX(-50%);
-		z-index: 10;
+		font-size: 1rem;
 	}
-	.top.speech::after {
-	  border: 20px solid transparent;
-	  border-top-color: var(--bg_color);
-	  border-bottom-width: 0;
-	  top: unset;
-	  bottom: -20px;
-	  left: 50%;
-	  margin-left: -20px;
-	}
-}
 </style>

 {#if user}
 	<button onclick={toggle_options} style="background-image: url(https://bocken.org/static/user/thumb/{user.nickname}.webp)" id=button>
-	<div id=options class="speech top" hidden>
+	<div class="options-wrap" hidden id=options-wrap>
+		<div id=options>
 			<h2>{user.name}</h2>
 			<p>({user.nickname})</p>
 			<ul>
@@ -171,6 +152,7 @@ h2 + p{
 				<li><a href="/logout?callbackUrl={encodeURIComponent(getLogoutCallbackUrl($page.url.pathname))}">Log Out</a></li>
 			</ul>
 		</div>
+	</div>
 	</button>
 {:else}
 	<a class=entry href="/login?callbackUrl={encodeURIComponent($page.url.pathname + $page.url.search)}">Login</a>
--- a/src/lib/components/recipes/CompactCard.svelte
+++ b/src/lib/components/recipes/CompactCard.svelte
@@ -144,6 +144,7 @@
 	top: 0.5em;
 	left: 0.5em;
 	font-size: 1.1rem;
+	font-family: "Noto Color Emoji", "Noto Color Emoji Subset", emoji, sans-serif;
 	filter: drop-shadow(0 0 3px rgba(0,0,0,0.8));
 	z-index: 2;
 	pointer-events: none;
--- a/src/lib/components/recipes/InstructionsPage.svelte
+++ b/src/lib/components/recipes/InstructionsPage.svelte
@@ -130,7 +130,7 @@ ol li::marker{
 	flex-grow: 0;
 	padding: 1em;
 	background-color: var(--color-bg-tertiary);
-	box-shadow: var(--shadow-md);
+	box-shadow: var(--shadow-sm);
 	max-width: 30%
 }
@media screen and (max-width: 500px){