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

fix(ui): improve Highlights tab readability in light mode

Browse Source 
- Use semantic text color (--color-text) for tab label in active state
- Keep highlight color for icon and bottom border as visual accent
- Ensures text is always readable regardless of theme
- Fixes contrast issues on /me page Highlights tab
This commit is contained in:
Gigi
2025-10-14 10:29:11 +02:00
parent 5c7b413a8d
commit 168095e133
1 changed files with 8 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -37,12 +37,18 @@
border-bottom-color: var(--color-primary);
}
/* Highlights tab uses the user's custom "my highlights" color */
/* Highlights tab uses the user's custom "my highlights" color for the border */
/* But uses semantic text color for better readability */
.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 */
}
/* Icon gets the highlight color for visual identity */
.me-tab[data-tab="highlights"].active svg {
color: var(--highlight-color-mine, rgb(253 224 71)); /* yellow-300 */
}
/* Reading List tab uses blue color to match bookmarks icon */
.me-tab[data-tab="reading-list"].active {
color: var(--color-primary);