diff --git a/themes/Ying/layouts/partials/artalk.html b/themes/Ying/layouts/partials/artalk.html index 43aefb13..5c919c23 100644 --- a/themes/Ying/layouts/partials/artalk.html +++ b/themes/Ying/layouts/partials/artalk.html @@ -15,20 +15,16 @@ border-color: var(--frame-dark-color); background: transparent; } - /*对artalk评论暗夜模式进行微调*/ - @media (prefers-color-scheme: dark) { - .atk-pinned-badge { - color: #ffffff !important; - background: #ff6262 !important; - } - } - [data-theme="dark"] .atk-pinned-badge { - color: #ffffff !important; - background: #ff6262 !important; - } - .atk-link-badge, - .atk-feed-badge, - .atk-rank-badge { + /* ================= 评论徽章规格 ================= + 几何完全沿用原设计: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; @@ -56,22 +52,37 @@ border: 1px solid rgba(107,114,128,0.15); font-weight: 600; } - /* 头衔徽章(金色)——与友链/友圈/官职同风格:浅底彩字描边 */ .atk-title-badge { - display: inline-block; - margin-left: 4px; - padding: 0 6px; - font-size: 12px; font-weight: 600; - border-radius: 3px; - line-height: 18px; - vertical-align: middle; - pointer-events: none; - white-space: nowrap; color: #b8860b; background: rgba(184,134,11,0.08); 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 { color: #34d399; background: rgba(52,211,153,0.12); @@ -92,33 +103,6 @@ background: rgba(251,191,36,0.12); 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 { backface-visibility: hidden; will-change: transform;