From 670b4ea3d3a9d33bbdcbc65cfd02a7e2dfa3303d Mon Sep 17 00:00:00 2001
From: posimai <posimai.project@gmail.com>
Date: Tue, 31 Mar 2026 12:08:06 +0900
Subject: [PATCH] =?UTF-8?q?fix(atlas):=20list=20view=20cards=20=E2=80=94?=
 =?UTF-8?q?=20replace=20left=20border=20with=20hover=20top-glow=20line?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 index.html | 22 +++++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index fe7bfc1..7852b5b 100644
--- a/index.html
+++ b/index.html
@@ -483,17 +483,33 @@
         .list-card {
             background: var(--surface);
             border: 1px solid var(--border);
-            border-left: 3px solid transparent;
             border-radius: 10px;
             padding: 12px 14px;
             display: flex;
             flex-direction: column;
             gap: 6px;
             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 {
             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 {
             display: flex;
@@ -2452,7 +2468,7 @@ function renderListView() {
                     ? node.url.replace(/^https?:\/\//, '').replace(/\/$/, '')
                     : '';
                 return `
-                <div class="list-card" style="border-left-color:${color}"
+                <div class="list-card" style="--card-color:${color}"
                      onclick="switchToGraph('${node.id}')">
                     <div class="list-card-top">
                         <div class="list-card-status ${statusCls}"></div>