From 6537650757b9e8027373a3ea9ff79335cf12e1a7 Mon Sep 17 00:00:00 2001 From: Gigi Date: Tue, 14 Oct 2025 10:32:31 +0200 Subject: [PATCH] feat(ui): apply highlight marker style to active Highlights tab - Use actual highlight visual treatment (marker style) on tab - Text remains in semantic color (--color-text) for readability - Background uses 35% highlight color blend with glow effect - Hover state intensifies to 50% for better interaction feedback - Creates consistent visual language between tabs and content highlights --- src/styles/components/me.css | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/src/styles/components/me.css b/src/styles/components/me.css index c5b12175..47c67378 100644 --- a/src/styles/components/me.css +++ b/src/styles/components/me.css @@ -37,12 +37,17 @@ border-bottom-color: var(--color-primary); } -/* Highlights tab uses the user's custom "my highlights" color */ -/* With a darker background for better contrast in light mode */ +/* Highlights tab uses the actual highlight style when active */ .me-tab[data-tab="highlights"].active { - color: var(--highlight-color-mine, rgb(253 224 71)); /* yellow-300 */ + color: var(--color-text); border-bottom-color: var(--highlight-color-mine, rgb(253 224 71)); /* yellow-300 */ - background: var(--color-bg-elevated); + background: color-mix(in srgb, var(--highlight-color-mine, rgb(253 224 71)) 35%, transparent); + box-shadow: 0 0 8px color-mix(in srgb, var(--highlight-color-mine, rgb(253 224 71)) 20%, transparent); +} + +.me-tab[data-tab="highlights"].active:hover { + background: color-mix(in srgb, var(--highlight-color-mine, rgb(253 224 71)) 50%, transparent); + box-shadow: 0 0 12px color-mix(in srgb, var(--highlight-color-mine, rgb(253 224 71)) 30%, transparent); } /* Reading List tab uses blue color to match bookmarks icon */