feat(评论): 最近表情改为分组 tab + 提交后面板收起 + 小编徽章配色 + 走心评论 20 条

- emoticon-recent.js: 「最近使用」从面板顶部独立栏重构为分组切换条最左侧的
  同构 tab(data-index="recent"),无记录时整个 tab 隐藏;复用 Artalk 原生
  .atk-grp[data-type=image] 网格样式,零自定义布局。
- artalk.js:
  · 新建评论成功(res.ok)后,对当前激活的插件按钮派发 click(),收起仍展开的
    表情面板(Artalk 上游只 reset 输入内容、不关面板),内部 openedPlug 状态同步复位。
  · 徽章处理末尾把徽章文字镜像到 data-badge 属性,供 CSS 按名字配色。
- artalk.html: 新增 .atk-badge[data-badge="小编"] 玫红实底规则(含暗色模式),
  特异性高于博主规则,两者互不覆盖。
- featured-comments.html: 走心评论 limit 8 → 20(后端上限)。
- main.css: 移除旧 .atk-recent-emoticons 相关样式。
This commit is contained in:
zqlit committed 2026-10-05 17:34:18 +08:00
1 parent 1b2e3d46f8
commit 79c9f2371c
5 files changed
+160 -114

No files matched your search

+7 -48
View File
@@ -4259,54 +4259,13 @@ input[type=submit] {
color: #8a8f98;
}
/* 表情面板「最近使用」栏:面板顶部横向一行,移动端可横滑 */
.atk-recent-emoticons {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
margin-bottom: 2px;
border-bottom: 1px dashed rgba(128, 128, 128, 0.28);
overflow-x: auto;
scrollbar-width: thin;
}
.atk-recent-emoticons .atk-recent-label {
flex: none;
font-size: 12px;
color: #9b9b9b;
white-space: nowrap;
}
.atk-recent-emoticons ul {
display: flex;
align-items: center;
gap: 2px;
margin: 0;
padding: 0;
list-style: none;
}
.atk-recent-emoticons li {
flex: none;
display: flex;
}
.atk-recent-emoticons img {
max-height: 32px;
width: auto;
vertical-align: middle;
cursor: pointer;
padding: 2px;
border-radius: 4px;
}
.atk-recent-emoticons img:hover {
background: rgba(128, 128, 128, 0.16);
}
[data-theme="dark"] .atk-recent-emoticons {
border-bottom-color: rgba(255, 255, 255, 0.12);
}
[data-theme="dark"] .atk-recent-emoticons .atk-recent-label {
color: #8a8f98;
}
[data-theme="dark"] .atk-recent-emoticons img:hover {
background: rgba(255, 255, 255, 0.12);
/* 表情面板「最近使用」:切换条里最前面的一个 tab(在「抖音」等分组左边)。
内容区与原生分组同构(.atk-grp[data-type=image],见 emoticon-recent.js),
63×63 网格、hover 底色、滚动条等排版全部继承 Artalk 原生样式,
所以这里只需要给 tab 一点点强调,不需要任何布局代码。
最近列表为空时整个 tab 不出现(由 JS 控制)。 */
.atk-editor-plug-emoticons > .atk-grp-switcher > span.atk-recent-tab {
font-weight: 600;
}
#back-to-top {