feat: add color presets + fix badge hover effect

- Add global color presets: save/apply/delete sets of {bg, border, text}
  colors as reusable presets, shown as mini badges in their own colors.
- Popover: preset badges under preview with + to save, click to apply,
  × on hover to delete.
- Popup: dedicated Color Presets section with same functionality,
  applying to light subreddit badge colors.
- Storage: colorPresets array added to settings defaults.
- Fix badge hover: change brightness(0.9) to brightness(1.1) so hover
  brightens (activates) instead of dimming.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
2026-08-26 18:00:54 -04:00
parent fb0c03d46a
commit 48db2fc70e
9 changed files with 2053 additions and 23 deletions

View File

@@ -210,6 +210,80 @@ fieldset input[type="text"] {
cursor: pointer;
}
/* --- Preset badges --- */
.rt-preset-bar {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
margin-top: 4px;
}
.rt-preset-list {
display: flex;
gap: 4px;
flex-wrap: wrap;
}
.rt-preset-badge {
display: inline-block;
position: relative;
border: 1px solid;
border-radius: 3px;
padding: 2px 6px;
font-size: 10px;
font-weight: bold;
cursor: pointer;
line-height: 1.4;
user-select: none;
}
.rt-preset-badge:hover {
filter: brightness(1.1);
}
.rt-preset-delete {
display: none;
position: absolute;
top: -6px;
right: -6px;
width: 14px;
height: 14px;
background: #d9534f;
color: white;
border-radius: 50%;
font-size: 10px;
line-height: 14px;
text-align: center;
cursor: pointer;
}
.rt-preset-badge:hover .rt-preset-delete {
display: block;
}
.rt-preset-add {
width: 22px;
height: 22px;
border: 1px dashed #ccc;
border-radius: 3px;
background: none;
color: #999;
font-size: 14px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
padding: 0;
}
.rt-preset-add:hover {
border-color: #999;
color: #666;
background: #f5f5f5;
}
/* --- Color Picker Widget --- */
.rt-color-picker {
margin: 8px 0;