zqlit/blog
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

评论徽章DOM/尺寸统一(拆badge-wrap+单一类名)、修复main.css!important劫持徽章尺寸、友链卡片挂到comment级与输入框对齐、卡片动效+打字机、申请弹窗按钮错位与滚动条修复
Deploy to Production / pre-check (push) Successful in 58s
Details
Deploy to Production / build (push) Successful in 3m56s
Details
Deploy to Production / deploy-edgeone (push) Canceled after 1m23s
Details
Deploy to Production / finalize (push) Canceled after 0s
Details
Deploy to Production / notify-failure (push) Canceled after 0s
Details

Browse Source
This commit is contained in:
zqlit committed 2026-10-03 16:59:34 +08:00
1 parent 87c47d13c9
commit 98126cafe6
4 files changed
+161 -73
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

themes/Ying/layouts/partials/artalk.html
+79 -41
View File
@@ -15,24 +15,30 @@
border-color: var(--frame-dark-color);
background: transparent;
}
/* ================= 评论徽章规格 =================
几何完全沿用原设计：inline-block + margin-left:4px + padding 0 6px
+ 12px/500 字重 + line-height:18px + 1px 描边 + 3px 圆角。
注意：不要覆盖 Artalk 自带的 margin-right:6px，否则徽章会挤在一起。 */
.atk-comment>.atk-main>.atk-header .atk-badge,
.atk-comment>.atk-main>.atk-header .atk-pinned-badge,
.atk-comment>.atk-main>.atk-header .atk-title-badge,
.atk-comment>.atk-main>.atk-header .atk-link-badge,
.atk-comment>.atk-main>.atk-header .atk-feed-badge,
.atk-comment>.atk-main>.atk-header .atk-rank-badge {
display: inline-block;
margin-left: 4px;
padding: 0 6px;
font-size: 12px;
font-weight: 500;
border-radius: 3px;
line-height: 18px;
vertical-align: middle;
/* ================= 评论徽章统一规格（单一来源） =================
几何沿用原设计：inline-block + margin-left:4px + padding 0 6px + 12px/500
+ line-height:18px + 1px 描边 + 3px 圆角。
artalk.js 会把所有徽章（博主/置顶/头衔/友链/友圈/官职）都挂上 .atk-cmt-badge
并拆掉 Artalk 的 .atk-badge-wrap 包装层，所以几何只在这里定义一次，
不会再出现两种 DOM / 两种尺寸。各类型只保留配色差异。
注：margin-right 清零是为了不叠加 Artalk 给"非最后一个徽章"的 6px 右间距
（否则 徽章→徽章 间距一宽一窄，看起来不齐）。 */
.atk-comment .atk-cmt-badge,
.atk-comment .atk-badge,
.atk-comment .atk-pinned-badge,
.atk-comment .atk-title-badge,
.atk-comment .atk-link-badge,
.atk-comment .atk-feed-badge,
.atk-comment .atk-rank-badge {
display: inline-block !important;
margin-left: 4px !important;
margin-right: 0 !important;
padding: 0 6px !important;
font-size: 12px !important;
font-weight: 600 !important;
border-radius: 3px !important;
line-height: 18px !important;
vertical-align: middle !important;
pointer-events: none;
white-space: nowrap;
}
@@ -50,37 +56,24 @@
color: #6b7280;
background: rgba(107,114,128,0.08);
border: 1px solid rgba(107,114,128,0.15);
font-weight: 600;
}
.atk-title-badge {
font-weight: 600;
color: #b8860b;
background: rgba(184,134,11,0.08);
border: 1px solid rgba(184,134,11,0.22);
}
/* 博主(.atk-badge)：浅底描边（与友链/友圈/官职同风格）
/* 博主(.atk-badge)：实底 —— 白字 + 浅黑底
（!important 是为了盖掉 Artalk 写在元素上的内联背景色） */
.atk-comment>.atk-main>.atk-header .atk-badge {
border: 1px solid rgba(55,65,81,0.18);
font-weight: 600;
color: #374151 !important;
background: rgba(55,65,81,0.06) !important;
.atk-comment .atk-badge {
border: 1px solid #333333;
color: #ffffff !important;
background: #333333 !important;
}
[data-theme="dark"] .atk-comment>.atk-main>.atk-header .atk-badge {
border-color: rgba(229,231,235,0.2);
color: #e5e7eb !important;
background: rgba(229,231,235,0.08) !important;
}
/* 置顶徽章：浅底红字描边（与友链/友圈同风格，比实底红更协调、不刺眼） */
.atk-comment>.atk-main>.atk-header .atk-pinned-badge {
border: 1px solid rgba(217,83,79,0.18);
color: #d9534f !important;
background: rgba(217,83,79,0.08) !important;
}
[data-theme="dark"] .atk-comment>.atk-main>.atk-header .atk-pinned-badge {
border-color: rgba(217,83,79,0.28);
color: #f0918d !important;
background: rgba(217,83,79,0.14) !important;
/* 置顶徽章：实底 —— 白字 + 浅红底（比 #d9534f / #ff6262 更浅，不刺眼） */
.atk-comment .atk-pinned-badge {
border: 1px solid #e05a5a;
color: #ffffff !important;
background: #e05a5a !important;
}
/* ---- 暗色模式配色 ---- */
[data-theme="dark"] .atk-link-badge {
@@ -103,6 +96,51 @@
background: rgba(251,191,36,0.12);
border-color: rgba(251,191,36,0.2);
}
/* ================= 友链申请入口卡片 =================
PJAX 下每次切页评论区都会重建卡片 → 入场动画与打字机自然重播；
打字机定时器在 artalk.js 里会检测卡片是否还在文档中（切页后自动停）。 */
.atk-fl-card {
animation: flApplyIn .5s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes flApplyIn {
from { opacity: 0; transform: translateY(12px) scale(.98); }
to { opacity: 1; transform: none; }
}
.atk-fl-card:hover {
border-color: var(--theme-main-30, rgba(7,193,96,.3)) !important;
}
/* 打字机光标 */
.atk-fl-card .atk-fl-caret {
display: inline-block;
width: 1px;
height: 1em;
margin-left: 2px;
vertical-align: -2px;
background: currentColor;
animation: flCaret .9s steps(1, end) infinite;
}
@keyframes flCaret {
0%, 49% { opacity: 1; }
50%, 100% { opacity: 0; }
}
/* 申请友链按钮：轻微上浮 + 主题色投影 */
.atk-fl-card .atk-fl-btn {
transition: transform .2s ease, box-shadow .2s ease;
}
.atk-fl-card:hover .atk-fl-btn {
transform: translateY(-1px);
box-shadow: 0 4px 12px var(--theme-main-20, rgba(7,193,96,.2));
}
.atk-fl-card .atk-fl-btn:active {
transform: translateY(0);
}
/* 尊重系统"减弱动态效果"：只关掉入场动画和按钮位移，
打字机与光标保留（打字机是文字渐显，不属于会造成不适的位移类动效） */
@media (prefers-reduced-motion: reduce) {
.atk-fl-card { animation: none; }
.atk-fl-card .atk-fl-btn { transition: none; }
.atk-fl-card:hover .atk-fl-btn { transform: none; box-shadow: none; }
}
.atk-main {
backface-visibility: hidden;
will-change: transform;