Zaki/Password-Manager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Enhance selection visibility, add rectangle select, multi drag/drop

Browse Source 
- Brighter selection highlight with stronger box-shadow, background, and left-border accent
- Rectangle/band selection: click-drag on empty space to select multiple entries via intersection test
- Drag selected entries to a folder chip to move all, or to trash button to multi-delete
- Multi-drag reorder: dragging a selected entry reorders all selected together
- Table view selection now highlights individual td cells (box-shadow on tr was invisible)
- Escape cancels rectangle selection in progress
This commit is contained in:
Zaki
2026-05-09 14:09:48 +01:00
parent eac02ed17c
commit 5da0deaf94
2 changed files with 103 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/style.css
+14 -1
View File
@@ -138,7 +138,9 @@ input:focus, select:focus { border-color:var(--accent); }
.entry-card, .entry-row, .entry-compact, .table-row-drag { cursor:pointer; user-select:none; }
.entry-card.drag-over, .entry-row.drag-over, .entry-compact.drag-over, .table-row-drag.drag-over { border-color:var(--accent)!important; box-shadow:0 0 15px rgba(59,130,246,0.3); }
.entry-card.selected, .entry-row.selected, .entry-compact.selected, .table-row-drag.selected { border-color:var(--accent)!important; box-shadow:0 0 0 2px var(--accent); background:rgba(59,130,246,0.08); }
.entry-card.selected { border-color:var(--accent)!important; box-shadow:0 0 0 2px var(--accent),0 0 18px rgba(59,130,246,0.35); background:rgba(59,130,246,0.18); }
.entry-row.selected, .entry-compact.selected { border-color:var(--accent)!important; box-shadow:0 0 0 2px var(--accent),0 0 18px rgba(59,130,246,0.35); background:rgba(59,130,246,0.14); border-left:3px solid var(--accent); }
.table-row-drag.selected td { background:rgba(59,130,246,0.14)!important; box-shadow:inset 0 0 0 1px var(--accent); border-bottom:1px solid var(--accent); }
.entry-card { background:var(--card); border:1px solid var(--border); border-radius:0.8rem; padding:0.9rem 2.8rem 0.9rem 0.9rem; transition:0.2s; position:relative; word-break:break-word; }
.entry-card:hover { border-color:rgba(255,255,255,0.15); transform:translateY(-2px); }
.card-site { font-weight:700; font-size:0.9rem; color:var(--text); margin-bottom:0.2rem; }
@@ -284,4 +286,15 @@ input:focus, select:focus { border-color:var(--accent); }
.selected-count {
font-weight: 600;
color: var(--accent);
}
#rectSelect {
position:fixed; pointer-events:none; z-index:999;
border:1px solid var(--accent);
background:rgba(59,130,246,0.1);
display:none;
}
#trashBtn.drag-over {
border-color:var(--danger)!important;
box-shadow:0 0 15px rgba(239,68,68,0.4);
background:rgba(239,68,68,0.15);
}