From eb8bcdb4265e8f1db5145f94d1fd8cf1af95dd82 Mon Sep 17 00:00:00 2001 From: Marcel Date: Tue, 24 Mar 2026 08:49:52 +0100 Subject: [PATCH] fix(frontend): make annotation delete button fully opaque MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Replace opacity: 0.3 on the annotation container with an rgba background so child elements (the × button) are not affected by the parent's opacity and render at full opacity. Refs #40 Co-Authored-By: Claude Sonnet 4.6 --- frontend/src/lib/components/AnnotationLayer.svelte | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/frontend/src/lib/components/AnnotationLayer.svelte b/frontend/src/lib/components/AnnotationLayer.svelte index aa9831cb..3a8cfae6 100644 --- a/frontend/src/lib/components/AnnotationLayer.svelte +++ b/frontend/src/lib/components/AnnotationLayer.svelte @@ -35,6 +35,13 @@ let { let drawStart = $state<{ x: number; y: number } | null>(null); let drawRect = $state(null); +function hexToRgba(hex: string, alpha: number): string { + const r = parseInt(hex.slice(1, 3), 16); + const g = parseInt(hex.slice(3, 5), 16); + const b = parseInt(hex.slice(5, 7), 16); + return `rgba(${r}, ${g}, ${b}, ${alpha})`; +} + function getNormalizedCoords(event: PointerEvent, element: HTMLElement): { x: number; y: number } { const rect = element.getBoundingClientRect(); return { @@ -111,8 +118,7 @@ const containerStyle = $derived( top: {annotation.y * 100}%; width: {annotation.width * 100}%; height: {annotation.height * 100}%; - background-color: {annotation.color}; - opacity: 0.3; + background-color: {hexToRgba(annotation.color, 0.3)}; pointer-events: {canAnnotate ? 'auto' : 'none'}; " >