aljaz/boris
1
1
Fork 0
mirror of https://github.com/dergigi/boris.git synced 2026-01-01 14:04:19 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): apply highlight marker style to active Highlights tab

Browse Source 
- 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
This commit is contained in:
Gigi
2025-10-14 10:32:31 +02:00
parent a95f9b522b
commit 6537650757
1 changed files with 9 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/styles/components/me.css
View File

@@ -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 */