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

feat(highlights): update default colors to yellow, orange, purple

Browse Source
This commit is contained in:
Gigi
2025-10-05 22:17:39 +01:00
parent 9aea1f9a70
commit 6d41d95627
2 changed files with 45 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/Settings.tsx
View File

@@ -124,7 +124,7 @@ const Settings: React.FC<SettingsProps> = ({ settings, onSave, onClose }) => {
<div className="setting-group setting-inline">
<label>My Highlights</label>
<ColorPicker
selectedColor={localSettings.highlightColorMine || '#eab308'}
selectedColor={localSettings.highlightColorMine || '#ffff00'}
onColorChange={(color) => setLocalSettings({ ...localSettings, highlightColorMine: color })}
/>
</div>
@@ -132,7 +132,7 @@ const Settings: React.FC<SettingsProps> = ({ settings, onSave, onClose }) => {
<div className="setting-group setting-inline">
<label>Friends Highlights</label>
<ColorPicker
selectedColor={localSettings.highlightColorFriends || '#f97316'}
selectedColor={localSettings.highlightColorFriends || '#ff8c00'}
onColorChange={(color) => setLocalSettings({ ...localSettings, highlightColorFriends: color })}
/>
</div>
@@ -140,7 +140,7 @@ const Settings: React.FC<SettingsProps> = ({ settings, onSave, onClose }) => {
<div className="setting-group setting-inline">
<label>Nostrverse Highlights</label>
<ColorPicker
selectedColor={localSettings.highlightColorNostrverse || '#9333ea'}
selectedColor={localSettings.highlightColorNostrverse || '#800080'}
onColorChange={(color) => setLocalSettings({ ...localSettings, highlightColorNostrverse: color })}
/>
</div>

84
src/index.css
View File

@@ -1480,18 +1480,18 @@ body {
/* Level colors in sidebar items */
.highlight-item.level-mine {
border-color: color-mix(in srgb, var(--highlight-color-mine, #eab308) 60%, #333);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--highlight-color-mine, #eab308) 25%, transparent);
border-color: color-mix(in srgb, var(--highlight-color-mine, #ffff00) 60%, #333);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--highlight-color-mine, #ffff00) 25%, transparent);
}
.highlight-item.level-friends {
border-color: color-mix(in srgb, var(--highlight-color-friends, #f97316) 60%, #333);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--highlight-color-friends, #f97316) 25%, transparent);
border-color: color-mix(in srgb, var(--highlight-color-friends, #ff8c00) 60%, #333);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--highlight-color-friends, #ff8c00) 25%, transparent);
}
.highlight-item.level-nostrverse {
border-color: color-mix(in srgb, var(--highlight-color-nostrverse, #9333ea) 60%, #333);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--highlight-color-nostrverse, #9333ea) 25%, transparent);
border-color: color-mix(in srgb, var(--highlight-color-nostrverse, #800080) 60%, #333);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--highlight-color-nostrverse, #800080) 25%, transparent);
}
.highlight-quote-icon {
@@ -1503,15 +1503,15 @@ body {
/* Level-colored quote icon */
.highlight-item.level-mine .highlight-quote-icon {
color: var(--highlight-color-mine, #eab308);
color: var(--highlight-color-mine, #ffff00);
}
.highlight-item.level-friends .highlight-quote-icon {
color: var(--highlight-color-friends, #f97316);
color: var(--highlight-color-friends, #ff8c00);
}
.highlight-item.level-nostrverse .highlight-quote-icon {
color: var(--highlight-color-nostrverse, #9333ea);
color: var(--highlight-color-nostrverse, #800080);
}
.highlight-content {
@@ -1656,63 +1656,63 @@ body {
/* Three-level highlight colors */
.content-highlight-marker.level-mine,
.content-highlight.level-mine {
background: color-mix(in srgb, var(--highlight-color-mine, #eab308) 35%, transparent);
box-shadow: 0 0 8px color-mix(in srgb, var(--highlight-color-mine, #eab308) 20%, transparent);
background: color-mix(in srgb, var(--highlight-color-mine, #ffff00) 35%, transparent);
box-shadow: 0 0 8px color-mix(in srgb, var(--highlight-color-mine, #ffff00) 20%, transparent);
}
.content-highlight-marker.level-mine:hover,
.content-highlight.level-mine:hover {
background: color-mix(in srgb, var(--highlight-color-mine, #eab308) 50%, transparent);
box-shadow: 0 0 12px color-mix(in srgb, var(--highlight-color-mine, #eab308) 30%, transparent);
background: color-mix(in srgb, var(--highlight-color-mine, #ffff00) 50%, transparent);
box-shadow: 0 0 12px color-mix(in srgb, var(--highlight-color-mine, #ffff00) 30%, transparent);
}
.content-highlight-marker.level-friends,
.content-highlight.level-friends {
background: color-mix(in srgb, var(--highlight-color-friends, #f97316) 35%, transparent);
box-shadow: 0 0 8px color-mix(in srgb, var(--highlight-color-friends, #f97316) 20%, transparent);
background: color-mix(in srgb, var(--highlight-color-friends, #ff8c00) 35%, transparent);
box-shadow: 0 0 8px color-mix(in srgb, var(--highlight-color-friends, #ff8c00) 20%, transparent);
}
.content-highlight-marker.level-friends:hover,
.content-highlight.level-friends:hover {
background: color-mix(in srgb, var(--highlight-color-friends, #f97316) 50%, transparent);
box-shadow: 0 0 12px color-mix(in srgb, var(--highlight-color-friends, #f97316) 30%, transparent);
background: color-mix(in srgb, var(--highlight-color-friends, #ff8c00) 50%, transparent);
box-shadow: 0 0 12px color-mix(in srgb, var(--highlight-color-friends, #ff8c00) 30%, transparent);
}
.content-highlight-marker.level-nostrverse,
.content-highlight.level-nostrverse {
background: color-mix(in srgb, var(--highlight-color-nostrverse, #9333ea) 35%, transparent);
box-shadow: 0 0 8px color-mix(in srgb, var(--highlight-color-nostrverse, #9333ea) 20%, transparent);
background: color-mix(in srgb, var(--highlight-color-nostrverse, #800080) 35%, transparent);
box-shadow: 0 0 8px color-mix(in srgb, var(--highlight-color-nostrverse, #800080) 20%, transparent);
}
.content-highlight-marker.level-nostrverse:hover,
.content-highlight.level-nostrverse:hover {
background: color-mix(in srgb, var(--highlight-color-nostrverse, #9333ea) 50%, transparent);
box-shadow: 0 0 12px color-mix(in srgb, var(--highlight-color-nostrverse, #9333ea) 30%, transparent);
background: color-mix(in srgb, var(--highlight-color-nostrverse, #800080) 50%, transparent);
box-shadow: 0 0 12px color-mix(in srgb, var(--highlight-color-nostrverse, #800080) 30%, transparent);
}
/* Underline styles for three levels */
.content-highlight-underline.level-mine {
text-decoration-color: color-mix(in srgb, var(--highlight-color-mine, #eab308) 80%, transparent);
text-decoration-color: color-mix(in srgb, var(--highlight-color-mine, #ffff00) 80%, transparent);
}
.content-highlight-underline.level-mine:hover {
text-decoration-color: var(--highlight-color-mine, #eab308);
text-decoration-color: var(--highlight-color-mine, #ffff00);
}
.content-highlight-underline.level-friends {
text-decoration-color: color-mix(in srgb, var(--highlight-color-friends, #f97316) 80%, transparent);
text-decoration-color: color-mix(in srgb, var(--highlight-color-friends, #ff8c00) 80%, transparent);
}
.content-highlight-underline.level-friends:hover {
text-decoration-color: var(--highlight-color-friends, #f97316);
text-decoration-color: var(--highlight-color-friends, #ff8c00);
}
.content-highlight-underline.level-nostrverse {
text-decoration-color: color-mix(in srgb, var(--highlight-color-nostrverse, #9333ea) 80%, transparent);
text-decoration-color: color-mix(in srgb, var(--highlight-color-nostrverse, #800080) 80%, transparent);
}
.content-highlight-underline.level-nostrverse:hover {
text-decoration-color: var(--highlight-color-nostrverse, #9333ea);
text-decoration-color: var(--highlight-color-nostrverse, #800080);
}
/* Ensure highlights work in both light and dark mode */
@@ -1740,50 +1740,50 @@ body {
/* Three-level overrides for light mode */
.content-highlight-marker.level-mine,
.content-highlight.level-mine {
background: color-mix(in srgb, var(--highlight-color-mine, #eab308) 40%, transparent);
box-shadow: 0 0 6px color-mix(in srgb, var(--highlight-color-mine, #eab308) 15%, transparent);
background: color-mix(in srgb, var(--highlight-color-mine, #ffff00) 40%, transparent);
box-shadow: 0 0 6px color-mix(in srgb, var(--highlight-color-mine, #ffff00) 15%, transparent);
}
.content-highlight-marker.level-mine:hover,
.content-highlight.level-mine:hover {
background: color-mix(in srgb, var(--highlight-color-mine, #eab308) 55%, transparent);
box-shadow: 0 0 10px color-mix(in srgb, var(--highlight-color-mine, #eab308) 25%, transparent);
background: color-mix(in srgb, var(--highlight-color-mine, #ffff00) 55%, transparent);
box-shadow: 0 0 10px color-mix(in srgb, var(--highlight-color-mine, #ffff00) 25%, transparent);
}
.content-highlight-marker.level-friends,
.content-highlight.level-friends {
background: color-mix(in srgb, var(--highlight-color-friends, #f97316) 40%, transparent);
box-shadow: 0 0 6px color-mix(in srgb, var(--highlight-color-friends, #f97316) 15%, transparent);
background: color-mix(in srgb, var(--highlight-color-friends, #ff8c00) 40%, transparent);
box-shadow: 0 0 6px color-mix(in srgb, var(--highlight-color-friends, #ff8c00) 15%, transparent);
}
.content-highlight-marker.level-friends:hover,
.content-highlight.level-friends:hover {
background: color-mix(in srgb, var(--highlight-color-friends, #f97316) 55%, transparent);
box-shadow: 0 0 10px color-mix(in srgb, var(--highlight-color-friends, #f97316) 25%, transparent);
background: color-mix(in srgb, var(--highlight-color-friends, #ff8c00) 55%, transparent);
box-shadow: 0 0 10px color-mix(in srgb, var(--highlight-color-friends, #ff8c00) 25%, transparent);
}
.content-highlight-marker.level-nostrverse,
.content-highlight.level-nostrverse {
background: color-mix(in srgb, var(--highlight-color-nostrverse, #9333ea) 40%, transparent);
box-shadow: 0 0 6px color-mix(in srgb, var(--highlight-color-nostrverse, #9333ea) 15%, transparent);
background: color-mix(in srgb, var(--highlight-color-nostrverse, #800080) 40%, transparent);
box-shadow: 0 0 6px color-mix(in srgb, var(--highlight-color-nostrverse, #800080) 15%, transparent);
}
.content-highlight-marker.level-nostrverse:hover,
.content-highlight.level-nostrverse:hover {
background: color-mix(in srgb, var(--highlight-color-nostrverse, #9333ea) 55%, transparent);
box-shadow: 0 0 10px color-mix(in srgb, var(--highlight-color-nostrverse, #9333ea) 25%, transparent);
background: color-mix(in srgb, var(--highlight-color-nostrverse, #800080) 55%, transparent);
box-shadow: 0 0 10px color-mix(in srgb, var(--highlight-color-nostrverse, #800080) 25%, transparent);
}
.content-highlight-underline.level-mine {
text-decoration-color: color-mix(in srgb, var(--highlight-color-mine, #eab308) 90%, transparent);
text-decoration-color: color-mix(in srgb, var(--highlight-color-mine, #ffff00) 90%, transparent);
}
.content-highlight-underline.level-friends {
text-decoration-color: color-mix(in srgb, var(--highlight-color-friends, #f97316) 90%, transparent);
text-decoration-color: color-mix(in srgb, var(--highlight-color-friends, #ff8c00) 90%, transparent);
}
.content-highlight-underline.level-nostrverse {
text-decoration-color: color-mix(in srgb, var(--highlight-color-nostrverse, #9333ea) 90%, transparent);
text-decoration-color: color-mix(in srgb, var(--highlight-color-nostrverse, #800080) 90%, transparent);
}
.highlight-indicator {