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

style: change highlights to fluorescent marker style

Browse Source 
- Replace underline with semi-transparent yellow background
- Add subtle glow effect with box-shadow
- Add slight padding and border-radius for marker look
- Increase opacity on hover for better feedback
- Adjust colors for both light and dark modes
- Change cursor from 'help' to 'pointer' for clarity

Highlights now look like they were marked with a real
fluorescent highlighter marker instead of just underlined.
This commit is contained in:
Gigi
2025-10-04 22:22:11 +01:00
parent 05636046a8
commit a941449ba4
1 changed files with 12 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/index.css
View File

@@ -1312,19 +1312,20 @@ body {
font-size: 0.875rem;
}
/* Inline content highlights */
/* Inline content highlights - fluorescent marker style */
.content-highlight {
background: transparent;
border-bottom: 2px solid #ffd700;
padding: 0.125rem 0;
cursor: help;
background: rgba(255, 255, 0, 0.35);
padding: 0.125rem 0.25rem;
cursor: pointer;
transition: all 0.2s ease;
position: relative;
border-radius: 2px;
box-shadow: 0 0 8px rgba(255, 255, 0, 0.2);
}
.content-highlight:hover {
background: rgba(255, 215, 0, 0.15);
border-bottom-color: #ffed4e;
background: rgba(255, 255, 0, 0.5);
box-shadow: 0 0 12px rgba(255, 255, 0, 0.3);
}
.reader-html .content-highlight,
@@ -1336,13 +1337,13 @@ body {
/* Ensure highlights work in both light and dark mode */
@media (prefers-color-scheme: light) {
.content-highlight {
background: transparent;
border-bottom-color: #d4af37;
background: rgba(255, 255, 0, 0.4);
box-shadow: 0 0 6px rgba(255, 255, 0, 0.15);
}
.content-highlight:hover {
background: rgba(212, 175, 55, 0.15);
border-bottom-color: #ffd700;
background: rgba(255, 255, 0, 0.55);
box-shadow: 0 0 10px rgba(255, 255, 0, 0.25);
}
.highlight-indicator {