徽章样式定稿:博主浅底灰黑描边(回线上版)、置顶浅底红字描边;恢复Artalk默认徽章右间距与CN地域徽标原样
Deploy to Production / pre-check (push) Successful in 44s
Deploy to Production / build (push) Successful in 4m40s
Deploy to Production / deploy-edgeone (push) Successful in 3m48s
Deploy to Production / finalize (push) Successful in 24s
Deploy to Production / notify-failure (push) Skipped

This commit is contained in:
zqlit committed 2026-10-03 16:12:23 +08:00
1 parent 36e74d46f4
commit 87c47d13c9
1 file changed
+35 -51
+35 -51
View File
@@ -15,20 +15,16 @@
border-color: var(--frame-dark-color); border-color: var(--frame-dark-color);
background: transparent; background: transparent;
} }
/*对artalk评论暗夜模式进行微调*/ /* ================= 评论徽章规格 =================
@media (prefers-color-scheme: dark) { 几何完全沿用原设计:inline-block + margin-left:4px + padding 0 6px
.atk-pinned-badge { + 12px/500 字重 + line-height:18px + 1px 描边 + 3px 圆角。
color: #ffffff !important; 注意:不要覆盖 Artalk 自带的 margin-right:6px,否则徽章会挤在一起。 */
background: #ff6262 !important; .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,
[data-theme="dark"] .atk-pinned-badge { .atk-comment>.atk-main>.atk-header .atk-link-badge,
color: #ffffff !important; .atk-comment>.atk-main>.atk-header .atk-feed-badge,
background: #ff6262 !important; .atk-comment>.atk-main>.atk-header .atk-rank-badge {
}
.atk-link-badge,
.atk-feed-badge,
.atk-rank-badge {
display: inline-block; display: inline-block;
margin-left: 4px; margin-left: 4px;
padding: 0 6px; padding: 0 6px;
@@ -56,22 +52,37 @@
border: 1px solid rgba(107,114,128,0.15); border: 1px solid rgba(107,114,128,0.15);
font-weight: 600; font-weight: 600;
} }
/* 头衔徽章(金色)——与友链/友圈/官职同风格:浅底彩字描边 */
.atk-title-badge { .atk-title-badge {
display: inline-block;
margin-left: 4px;
padding: 0 6px;
font-size: 12px;
font-weight: 600; font-weight: 600;
border-radius: 3px;
line-height: 18px;
vertical-align: middle;
pointer-events: none;
white-space: nowrap;
color: #b8860b; color: #b8860b;
background: rgba(184,134,11,0.08); background: rgba(184,134,11,0.08);
border: 1px solid rgba(184,134,11,0.22); border: 1px solid rgba(184,134,11,0.22);
} }
/* 博主(.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;
}
[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;
}
/* ---- 暗色模式配色 ---- */
[data-theme="dark"] .atk-link-badge { [data-theme="dark"] .atk-link-badge {
color: #34d399; color: #34d399;
background: rgba(52,211,153,0.12); background: rgba(52,211,153,0.12);
@@ -92,33 +103,6 @@
background: rgba(251,191,36,0.12); background: rgba(251,191,36,0.12);
border-color: rgba(251,191,36,0.2); border-color: rgba(251,191,36,0.2);
} }
/* 覆盖 Artalk 原版 .atk-badge(博主)尺寸/配色 —— 改成与友链/友圈/官职
同风格的浅底描边款(原版黑底白字过于突兀),黑字保留博主辨识度 */
.atk-comment>.atk-main>.atk-header .atk-badge {
font-size: 12px;
padding: 0 6px;
font-weight: 600;
line-height: 18px;
border-radius: 3px;
vertical-align: middle;
color: #374151 !important;
background: rgba(55,65,81,0.06) !important;
border: 1px solid rgba(55,65,81,0.18);
}
[data-theme="dark"] .atk-comment>.atk-main>.atk-header .atk-badge {
color: #e5e7eb !important;
background: rgba(229,231,235,0.08) !important;
border-color: rgba(229,231,235,0.2);
}
.atk-comment>.atk-main>.atk-header .atk-pinned-badge {
font-size: 12px;
padding: 0 6px;
font-weight: 500;
line-height: 18px;
border-radius: 3px;
vertical-align: middle;
}
.atk-main { .atk-main {
backface-visibility: hidden; backface-visibility: hidden;
will-change: transform; will-change: transform;