mai
/
posimai-atlas
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(atlas): list view cards — replace left border with hover top-glow line 

Removed the "AI-generated" left color border. Cards now show a subtle
top glow line only on hover, using CSS custom property --card-color.
Clean, 2026-style minimal card with shadow lift on hover.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
posimai 2026-03-31 12:08:06 +09:00
parent 2bad7274a6
commit 670b4ea3d3
1 changed files with 19 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
index.html
View File

@ -483,17 +483,33 @@
.list-card { .list-card {
background: var(--surface); background: var(--surface);
border: 1px solid var(--border); border: 1px solid var(--border);
border-left: 3px solid transparent;
border-radius: 10px; border-radius: 10px;
padding: 12px 14px; padding: 12px 14px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 6px; gap: 6px;
cursor: pointer; cursor: pointer;
transition: border-color 0.15s, background 0.15s; transition: background 0.15s, box-shadow 0.15s, border-color 0.15s;
position: relative;
overflow: hidden;
}
/* top glow line — color set inline via --card-color */
.list-card::after {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: var(--card-color, transparent);
opacity: 0;
transition: opacity 0.2s;
} }
.list-card:hover { .list-card:hover {
background: var(--surface2); background: var(--surface2);
border-color: rgba(255,255,255,0.12);
box-shadow: 0 4px 24px rgba(0,0,0,0.25);
}
.list-card:hover::after {
opacity: 0.7;
} }
.list-card-top { .list-card-top {
display: flex; display: flex;
@ -2452,7 +2468,7 @@ function renderListView() {
? node.url.replace(/^https?:\/\//, '').replace(/\/$/, '') ? node.url.replace(/^https?:\/\//, '').replace(/\/$/, '')
: ''; : '';
return ` return `
<div class="list-card" style="border-left-color:${color}" <div class="list-card" style="--card-color:${color}"
onclick="switchToGraph('${node.id}')"> onclick="switchToGraph('${node.id}')">
<div class="list-card-top"> <div class="list-card-top">
<div class="list-card-status ${statusCls}"></div> <div class="list-card-status ${statusCls}"></div>