/* * document-row.css — P1.3 ① 文档列表(微信式)视觉升级。 * * 不重写 .doc-item / .doc-list,只在已有规则之上叠加: * - 列表底色用 ink-100,卡片用 ink-0,做"灰底 + 白卡"的微信式纵向序列 * - 时间分组段头(今天 / 本周 / 更早) — 不抢眼,只有 caption 字号 + 弱 letter-spacing * - hover 时右侧出现"置顶 / 移到回收站"小操作组(opacity 渐变,无大动效) * - 卡片高度自适应,标题与摘要的间距更稳重 * * 该文件晚于 components/_placeholder.css 加载,但在 style.css 兜底之前;最终 * 真正生效靠 index.php 里 的排列顺序(P1.3 层在 style.css 之后)。 */ /* ========== 列表容器:微信式"灰底序列" ========== */ .doc-list { /* 微信会话列表那种纸感浅灰,但与 sidebar-bg 区分 1 级 */ background: var(--bg-tertiary); padding: 8px 8px 12px; gap: 0; } /* 时间分组段头 — 苹果备忘录式低密度 caption */ .doc-list-group-header { padding: 14px 10px 6px; font-size: 11px; font-weight: 600; color: var(--text-muted); letter-spacing: 0.04em; text-transform: none; user-select: none; } .doc-list-group-header:first-child { padding-top: 4px; } /* ========== 卡片:浅灰底上的白卡 ========== */ .doc-item { position: relative; /* 给 .doc-item-hover-actions absolute 定位锚 */ background: var(--bg-secondary); border: 1px solid transparent; box-shadow: 0 1px 0 rgba(9, 9, 11, 0.02); margin-bottom: 4px; /* padding-bottom 留 30px 给右下 hover-actions(26px 按钮 + 6px bottom 偏移) * 避免覆盖 .doc-item-date 与 .doc-favorite-btn */ padding: 12px 14px 30px; border-radius: 10px; } [data-theme="dark"] .doc-item { background: var(--bg-secondary); box-shadow: none; border: 1px solid var(--border-light); } /* hover:微信式可见底色变化 + 轻提升 */ .doc-item:hover { background: var(--fill-hover); border-color: var(--border-light); box-shadow: 0 1px 3px rgba(9, 9, 11, 0.05); } /* dark hover:亮模式的 rgba(9,9,11,0.05) 在暗背景下不可见,加深一档保证有"提起"反馈 */ [data-theme="dark"] .doc-item:hover { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); } .doc-item.active { background: var(--sidebar-active-bg); box-shadow: none; } /* ========== hover 行内操作:置顶 / 移到回收站 ========== */ .doc-item-hover-actions { position: absolute; right: 6px; bottom: 6px; display: inline-flex; gap: 2px; opacity: 0; pointer-events: none; transition: opacity var(--motion-fast); } .doc-item:hover .doc-item-hover-actions, .doc-item:focus-within .doc-item-hover-actions { opacity: 1; pointer-events: auto; } /* 选中卡片不显示 hover 动作组,避免和当前卡片高亮抢戏。 * 写两个选择器(.doc-item.active 自身 + .doc-item.active:hover)压住 :hover 那条规则 */ .doc-item.active .doc-item-hover-actions, .doc-item.active:hover .doc-item-hover-actions { opacity: 0; pointer-events: none; } .doc-item-hover-action { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border: none; background: transparent; color: var(--text-muted); border-radius: 6px; cursor: pointer; padding: 0; transition: background-color var(--motion-fast), color var(--motion-fast); } .doc-item-hover-action:hover { background: var(--fill-hover); color: var(--text-primary); } .doc-item-hover-action.danger:hover { color: var(--color-danger); background: var(--color-danger-bg); } /* ========== 移动端:hover 改成"长按出菜单",这里默认隐藏让 .doc-favorite-btn 走原行为 ========== */ @media (hover: none) and (pointer: coarse) { .doc-item-hover-actions { display: none; } } /* ========== 搜索结果模式不需要时间分组:让 group-header 在搜索时隐藏 ========== */ .doc-list[data-group="search"] .doc-list-group-header { display: none; }