vivid 时间线加操作行(回复/赞/查看),长文文字边距对齐短文 8px

- 卡片/纸条本体保持整块链接,操作行是链接外的兄弟节点(<a> 里不嵌交互元素)
- 回复 → 文章页 #comments 锚点;查看 → 文章页;赞是本机赞
  (无登录体系,状态存 localStorage,后续要做全局计数再加表和端点)
- Phosphor 图标:对话气泡 / 心形 / 眼睛,按下有缩放反馈,liked 态 accent 高亮
- .card .body 横向边距 26px→8px,与纸条文字同一条竖线
This commit is contained in:
Sakurasan committed 2026-10-01 17:28:24 +08:00
1 parent 17b1143183
commit 00e85bf667
2 files changed
+99 -45

No files matched your search

+15 -1
View File
@@ -85,7 +85,7 @@ html[data-ui='vivid'] .card .cov img {width:100%;height:100%;object-fit:cover;tr
@media (hover: hover) and (pointer: fine) {
html[data-ui='vivid'] .card:hover .cov img {transform:scale(1.04)}
}
html[data-ui='vivid'] .card .body {padding:22px 26px 24px}
html[data-ui='vivid'] .card .body {padding:22px 8px 24px}
/* 元信息挪到摘要之后(原来在标题上方):和标签一起收在卡片尾部 */
html[data-ui='vivid'] .card .meta {display:flex;gap:10px;align-items:center;flex-wrap:wrap;
font-size:12px;color:var(--muted);font-weight:600;margin-top:16px;}
@@ -184,6 +184,20 @@ html[data-ui='vivid'] .note .imgs.n3 img:first-child {grid-row:span 2;}
html[data-ui='vivid'] .note.split .tags {grid-column:1 / -1;margin-top:0;}
}
html[data-ui='vivid'] .note .tags {display:flex;gap:14px;flex-wrap:wrap;margin-top:8px}
/* 操作行:回复 / 赞 / 查看。挂在链接外面(兄弟节点),左边距 8px 与
纸条文字、卡片正文同一条竖线。赞目前是本机赞(localStorage),不传服务端。 */
html[data-ui='vivid'] .acts {display:flex;gap:2px;padding:0 8px;margin-top:4px}
html[data-ui='vivid'] .acts button {display:inline-flex;align-items:center;gap:6px;
padding:7px 10px;border:0;border-radius:999px;background:transparent;
font-family:inherit;font-size:12.5px;font-weight:600;color:var(--muted);
cursor:pointer;touch-action:manipulation;
transition:color .2s var(--ease),background-color .2s var(--ease),transform 120ms ease-out;}
html[data-ui='vivid'] .acts button .ic {width:17px;height:17px}
@media (hover: hover) and (pointer: fine) {
html[data-ui='vivid'] .acts button:hover {color:var(--accent);background:var(--accent-soft)}
}
html[data-ui='vivid'] .acts button:active {transform:scale(.94)}
html[data-ui='vivid'] .acts button.liked {color:var(--accent)}
html[data-ui='vivid'] .pager {display:flex;gap:8px;align-items:center;justify-content:center;
margin-top:36px;flex-wrap:wrap;}
html[data-ui='vivid'] .pager button {font-size:13px;font-weight:700;padding:9px 16px;border-radius:999px;