cloud/project-manager
3
0
Fork 0
Code Issues Pull Requests Actions Packages Releases Activity

Give the add-icon buttons a border matching the compact field

Browse Source 
A borderless icon next to a bordered input looked adrift. Same
1px solid var(--border) as .field, turning var(--accent) on hover
(alongside the icon itself, as before).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
aneurin
2026-09-05 00:22:00 +01:00
co-authored by Claude Sonnet 5
parent f5cc82a2f4
commit ca3be38f0c
1 changed files with 10 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/style.css
+10 -9
View File
@@ -1039,20 +1039,20 @@ button[type="submit"]:disabled:not(.btn-icon),
cursor: progress;
}
/* A small square, transparent icon button -- every "add to X" form (a
kanban column, the inbox, the status list, the "all tasks" new-card form)
used a full "Add" label until there were enough of them on screen at once
to feel cluttered. Ghost styling and the hover colour change match
.title-back. Excluded (":not(.btn-icon)" above and on the
.field-row/.kanban__new overrides) rather than out-specificity'd, so it
isn't at the mercy of source order -- the same reasoning as .field's low
specificity against input:focus. */
/* A small square icon button, bordered like the compact field it sits
beside -- every "add to X" form (a kanban column, the inbox, the status
list, the "all tasks" new-card form) used a full "Add" label until there
were enough of them on screen at once to feel cluttered, then a borderless
ghost icon on its own looked adrift next to that field. Excluded
(":not(.btn-icon)" above and on the .field-row/.kanban__new overrides)
rather than out-specificity'd, so it isn't at the mercy of source order --
the same reasoning as .field's low specificity against input:focus. */
.btn-icon {
flex: none;
width: 2rem;
height: 2rem;
padding: 0;
border: none;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: transparent;
color: var(--muted);
@@ -1065,6 +1065,7 @@ button[type="submit"]:disabled:not(.btn-icon),
}
.btn-icon:hover:not(:disabled) {
border-color: var(--accent);
color: var(--accent);
}