270 lines
11 KiB
Markdown
270 lines
11 KiB
Markdown
# Button Behavior Standardization Plan
|
||
|
||
## Desired Standard Behavior
|
||
|
||
```
|
||
Default: border: primary-color, background: secondary-color, text: primary-color
|
||
Hover: border: accent-color, background: secondary-color, text: primary-color
|
||
Click: border: primary-color, background: accent-color, text: secondary-color
|
||
```
|
||
|
||
In summary:
|
||
- **Hover** → border turns accent-color (everything else stays)
|
||
- **Click/Active** → fill turns accent-color, border returns to primary-color, text inverts to secondary-color
|
||
|
||
---
|
||
|
||
## Current client.css Button Variables (lines 122–129)
|
||
|
||
```css
|
||
--button-color: var(--primary-color);
|
||
--button-background-color: var(--secondary-color);
|
||
--button-hover-color: var(--accent-color);
|
||
--button-click-color: var(--muted-color); /* WRONG — should be accent-color */
|
||
--button-border-color: var(--primary-color);
|
||
--button-border-radius: var(--border-radius);
|
||
--button-border-width: var(--border-width);
|
||
```
|
||
|
||
### Problems in client.css
|
||
|
||
1. **`--button-click-color` is `var(--muted-color)`** — should be `var(--accent-color)` for the fill on click
|
||
2. **No global button rule** — there is no `button { ... }` or `.btn { ... }` base class in client.css that applies the standard hover/active behavior. Each page defines its own button styles independently.
|
||
3. **No `:active` pseudo-class** defined globally — the click state is never standardized.
|
||
4. **Hover behavior varies** — some pages change `background-color` on hover (wrong), some change `border-color` (correct), some change `color` (text color — inconsistent).
|
||
|
||
### What client.css SHOULD add
|
||
|
||
A base button class (e.g., `.btn`) with:
|
||
```css
|
||
.btn {
|
||
font-family: var(--font-family);
|
||
color: var(--button-color);
|
||
background-color: var(--button-background-color);
|
||
border: var(--button-border-width) solid var(--button-border-color);
|
||
border-radius: var(--button-border-radius);
|
||
cursor: pointer;
|
||
transition: border-color 0.2s, background-color 0.2s, color 0.2s;
|
||
padding: 8px 16px;
|
||
}
|
||
|
||
.btn:hover {
|
||
border-color: var(--accent-color);
|
||
}
|
||
|
||
.btn:active {
|
||
background-color: var(--accent-color);
|
||
color: var(--secondary-color);
|
||
border-color: var(--primary-color);
|
||
}
|
||
|
||
.btn:disabled {
|
||
opacity: 0.5;
|
||
cursor: not-allowed;
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## Per-Page Audit
|
||
|
||
### index.html
|
||
| Class/ID | Hover | Active/Click | Issue |
|
||
|---|---|---|---|
|
||
| `.divAppButtons` | `background-color: var(--button-hover-color)` | none | Hover fills background instead of changing border |
|
||
| `.inpKeyButton` | `background-color: var(--button-hover-color)` | `background-color: var(--button-click-color)` | Hover fills bg; click uses muted-color |
|
||
| `.inpCheckBox` | `background-color: var(--button-hover-color)` | none | Hover fills bg |
|
||
| `.svgBtn` | cursor only | none | No visual feedback |
|
||
|
||
**Fix needed:** `.divAppButtons` hover should change border only. `.inpKeyButton` active should use accent fill.
|
||
|
||
### ai.html
|
||
| Class/ID | Hover | Active/Click | Issue |
|
||
|---|---|---|---|
|
||
| `#btnAiNewChat` | `background: var(--accent-color); color: var(--secondary-color)` | none | Hover does fill+text change — should be border only |
|
||
| `#btnAiSend` | `background: var(--accent-color); color: var(--secondary-color)` | none | Same — hover does fill |
|
||
| `.aiButton` | `background: var(--accent-color); color: var(--secondary-color)` | none | Same |
|
||
| `.aiDeleteConvBtn` | `color: var(--accent-color); border-color: var(--accent-color)` | none | Hover changes border+icon color — close to correct but no active state |
|
||
| `.aiConversationItem` | `border-color: var(--accent-color)` | none | Correct hover behavior |
|
||
|
||
**Fix needed:** `#btnAiNewChat`, `#btnAiSend`, `.aiButton` hover should only change border. Add `:active` with accent fill.
|
||
|
||
### cashu.html
|
||
| Class/ID | Hover | Active/Click | Issue |
|
||
|---|---|---|---|
|
||
| `.cashuBtn` | `background: var(--accent-color); color: var(--secondary-color)` | none | Hover fills — should be border only |
|
||
| `.cashuBtn.active` | `background: var(--primary-color); color: var(--secondary-color)` | — | Toggle state, not click — acceptable for tab buttons |
|
||
| `.mintDiscoveryAdd:hover` | `background: var(--accent-color)` | none | Hover fills |
|
||
|
||
**Fix needed:** `.cashuBtn` hover should change border only. Add `:active` with accent fill. The `.active` toggle class for tabs is a separate concern and can stay.
|
||
|
||
### tools.html
|
||
| Class/ID | Hover | Active/Click | Issue |
|
||
|---|---|---|---|
|
||
| `.divButton` | `background-color: var(--accent-color)` | `background-color: var(--muted-color)` | Hover fills bg; active uses muted |
|
||
| `.clsClipboard` | `opacity: 0.8` | `background-color: var(--muted-color)` | Hover dims; active uses muted |
|
||
|
||
**Fix needed:** `.divButton` hover should change border. Active should use accent fill. `.clsClipboard` active should use accent.
|
||
|
||
### event.html
|
||
| Class/ID | Hover | Active/Click | Issue |
|
||
|---|---|---|---|
|
||
| `.btnKind` | `background-color: var(--accent-color)` | none | Hover fills |
|
||
| `.btnKindActive` | `background-color: var(--primary-color); color: var(--secondary-color)` | — | Toggle state — acceptable |
|
||
| `.btnAction` | `background-color: var(--accent-color)` | none | Hover fills |
|
||
|
||
**Fix needed:** `.btnKind` and `.btnAction` hover should change border only. Add `:active`.
|
||
|
||
### blobs.html
|
||
| Class/ID | Hover | Active/Click | Issue |
|
||
|---|---|---|---|
|
||
| `.btnServer` | `background-color: var(--button-hover-color)` | none | Hover fills bg |
|
||
| `.btnAction` | `background-color: var(--accent-color)` | none | Hover fills |
|
||
| `.btnDelete` | `background-color: var(--accent-color)` | none | Hover fills |
|
||
| `.btnDeleteBlob` | `border-color: var(--accent-color)` | none | Correct hover |
|
||
|
||
**Fix needed:** `.btnServer`, `.btnAction`, `.btnDelete` hover should change border only.
|
||
|
||
### post.html
|
||
| Class/ID | Hover | Active/Click | Issue |
|
||
|---|---|---|---|
|
||
| `#btnSeeMore` | `color: var(--button-hover-color)` | none | Changes text color on hover — should change border |
|
||
| `#btnMarkRead` | `color: var(--button-hover-color)` | none | Same |
|
||
| `.viewed-sidenav-control` | `color: var(--button-hover-color)` | none | Same |
|
||
|
||
**Fix needed:** All should change border-color on hover, not text color.
|
||
|
||
### msg.html
|
||
| Class/ID | Hover | Active/Click | Issue |
|
||
|---|---|---|---|
|
||
| `#btnSendMessage` | `color: var(--button-hover-color)` | none | Changes text color |
|
||
| `.msgConversationItem` | `border-color: var(--accent-color)` | none | Correct |
|
||
|
||
**Fix needed:** `#btnSendMessage` hover should change border.
|
||
|
||
### note.html
|
||
| Class/ID | Hover | Active/Click | Issue |
|
||
|---|---|---|---|
|
||
| `.divNoteTitle` | `background-color: var(--button-hover-color)` | none | Hover fills bg |
|
||
| `.divNewNote` | `background-color: var(--button-hover-color)` | none | Same |
|
||
| `#tblNotes tr` | `background: var(--button-hover-color)` | none | Table row — acceptable |
|
||
| `#btnSaveNote` | inline style `background-color: var(--button-hover-color)` | none | Inline style — needs refactor |
|
||
|
||
**Fix needed:** Button hovers should change border. Table row hover is acceptable.
|
||
|
||
### todo.html
|
||
| Class/ID | Hover | Active/Click | Issue |
|
||
|---|---|---|---|
|
||
| `.divTodo` | `border-color: var(--accent-color)` | none | Correct |
|
||
| `.btnReorder` | `border-color: var(--accent-color)` on hover | `background-color: var(--muted-color)` on active | Hover correct; active uses muted instead of accent |
|
||
|
||
**Fix needed:** `.btnReorder:active` should use accent fill.
|
||
|
||
### db.html
|
||
| Class/ID | Hover | Active/Click | Issue |
|
||
|---|---|---|---|
|
||
| `.btnRefresh` | `background: var(--accent-color)` | none | Hover fills |
|
||
| `#tblDB th` | `background: var(--accent-color)` | none | Table header — acceptable |
|
||
|
||
**Fix needed:** `.btnRefresh` hover should change border only.
|
||
|
||
### didactyl.html
|
||
| Class/ID | Hover | Active/Click | Issue |
|
||
|---|---|---|---|
|
||
| `.btn` | `background-color: var(--accent-color); color: var(--secondary-color)` | none | Hover fills |
|
||
|
||
**Fix needed:** Hover should change border only. Add `:active`.
|
||
|
||
### profile.html
|
||
| Class/ID | Hover | Active/Click | Issue |
|
||
|---|---|---|---|
|
||
| `.divButton` | `cursor: pointer` only | none | No visual hover feedback at all |
|
||
|
||
**Fix needed:** Add border-color change on hover and accent fill on active.
|
||
|
||
### relays.html
|
||
| Class/ID | Hover | Active/Click | Issue |
|
||
|---|---|---|---|
|
||
| `.divSvg` | `stroke: var(--button-hover-color)` | none | SVG icon — acceptable |
|
||
| `.tblRelayRow` | `cursor: pointer` | none | Table row — minimal |
|
||
|
||
**Fix needed:** Minor — relay rows could use border highlight.
|
||
|
||
### cal.html
|
||
| Class/ID | Hover | Active/Click | Issue |
|
||
|---|---|---|---|
|
||
| `.divQuickButton` | `background-color: red` | none | Hardcoded red — should use var |
|
||
| `.divFood` | `background-color: var(--button-hover-color)` | none | Hover fills |
|
||
| `.divServingButton` | `background-color: red` | none | Hardcoded red |
|
||
| `.divButton` | `background-color: var(--button-hover-color)` | none | Hover fills |
|
||
| `.AddFood, .EditFood` | `background-color: green` | none | Hardcoded green |
|
||
| `.DelFood` | `background-color: red` | none | Hardcoded red |
|
||
|
||
**Fix needed:** Replace hardcoded colors with CSS variables. Change hover to border-only.
|
||
|
||
### links.html
|
||
| Class/ID | Hover | Active/Click | Issue |
|
||
|---|---|---|---|
|
||
| `#btnAddLink` | inline style, no hover | none | No visual feedback |
|
||
| `#btnDownloadBookmarks` | inline style, no hover | none | No visual feedback |
|
||
|
||
**Fix needed:** Add proper button classes.
|
||
|
||
### npub.html
|
||
| Class/ID | Hover | Active/Click | Issue |
|
||
|---|---|---|---|
|
||
| `#divQRContainer` | none | `background-color: var(--button-hover-color)` | Active uses hover color for bg |
|
||
|
||
**Fix needed:** Active should use accent-color.
|
||
|
||
### test42.html
|
||
| Class/ID | Hover | Active/Click | Issue |
|
||
|---|---|---|---|
|
||
| `.button` | `background: #ff6b6b` | none | Hardcoded colors — test page, low priority |
|
||
|
||
### tab.html
|
||
| Class/ID | Hover | Active/Click | Issue |
|
||
|---|---|---|---|
|
||
| `button` | `background: #5568d3` | none | Hardcoded colors — test page, low priority |
|
||
|
||
---
|
||
|
||
## Implementation Plan
|
||
|
||
### Step 1: Fix client.css button variables
|
||
- Change `--button-click-color` from `var(--muted-color)` to `var(--accent-color)`
|
||
- Add `--button-click-text-color: var(--secondary-color)` variable
|
||
|
||
### Step 2: Add global `.btn` base class to client.css
|
||
- Standard default/hover/active/disabled states
|
||
- All pages can opt in by adding `class="btn"` to their buttons
|
||
|
||
### Step 3: Fix pages in priority order
|
||
|
||
**High priority — main user-facing pages:**
|
||
1. `ai.html` — `#btnAiNewChat`, `#btnAiSend`, `.aiButton`
|
||
2. `cashu.html` — `.cashuBtn`
|
||
3. `index.html` — `.divAppButtons`
|
||
4. `post.html` — `#btnSeeMore`, `#btnMarkRead`
|
||
5. `msg.html` — `#btnSendMessage`
|
||
|
||
**Medium priority:**
|
||
6. `tools.html` — `.divButton`, `.clsClipboard`
|
||
7. `event.html` — `.btnKind`, `.btnAction`
|
||
8. `blobs.html` — `.btnServer`, `.btnAction`, `.btnDelete`
|
||
9. `todo.html` — `.btnReorder` active state
|
||
10. `db.html` — `.btnRefresh`
|
||
11. `didactyl.html` — `.btn`
|
||
12. `note.html` — `.divNoteTitle`, `.divNewNote`, `#btnSaveNote`
|
||
|
||
**Low priority:**
|
||
13. `cal.html` — replace hardcoded colors
|
||
14. `links.html` — add button classes
|
||
15. `profile.html` — add hover/active
|
||
16. `relays.html` — minor row highlights
|
||
17. `npub.html` — fix active color
|
||
18. `test42.html`, `tab.html` — test pages, optional
|
||
|
||
### Step 4: Verify dark mode
|
||
- Ensure all changes work in both light and dark mode since CSS variables auto-adapt.
|