danvics/docling-studio
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Redesign documents page rows as cards with accent hover

Browse source 
Replace flat border-bottom rows with rounded cards that have a subtle
border and accent-colored border on hover for better visual hierarchy.
This commit is contained in:
Pier-Jean Malandrino 2026-04-02 16:40:20 +02:00
parent 126c41a033
commit a78c9ec415
1 changed files with 11 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
frontend/src/pages/DocumentsPage.vue
View file

@ -89,19 +89,25 @@ onMounted(() => {
.doc-items { .doc-items {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 2px; gap: 6px;
padding: 12px;
} }
.doc-row { .doc-row {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 14px 20px; padding: 12px 16px;
border-bottom: 1px solid var(--border); background: var(--bg-surface);
transition: background var(--transition); border: 1px solid var(--border);
border-radius: var(--radius-sm);
transition: all 150ms ease;
} }
.doc-row:hover { background: var(--bg-hover); } .doc-row:hover {
border-color: var(--accent);
background: var(--bg-elevated);
}
.doc-row-info { .doc-row-info {
display: flex; display: flex;