dsh
0b99eabfbe
- 前端脚本从 jsDelivr 改为自托管 public/assets/js/twikoo.min.js， 版本与后端对齐（1.7.20）。国内访问 jsDelivr 实测 3 秒以上且常被墙， 是评论区空白的根因 - 新增 public/assets/css/twikoo-custom.css 主题适配层：选择器加 #twikoo 前缀以覆盖运行时注入的样式，颜色引用主题变量，自动跟随亮/暗色 - 修复首屏重复初始化：astro:page-load 在首屏也会触发，用 dataset.mounted 去重 - 评论配置移除已无用的 version 字段；README 与操作指南同步更新
179 lines
3.7 KiB
CSS
179 lines
3.7 KiB
CSS
/*
|
||
* twikoo 评论区的主题适配（朱墨留白 / VermilionVoid）
|
||
*
|
||
* twikoo 的样式是脚本运行时注入到 <head> 的，会排在本文件之后，
|
||
* 所以这里的选择器统一加 #twikoo 前缀提高优先级，保证能覆盖它。
|
||
*
|
||
* 颜色全部引用主题 CSS 变量，因此会自动跟随亮色/暗色，
|
||
* 以及 src/data/site.ts 里的 themeHue 主题色。
|
||
*/
|
||
|
||
/* ---------- 容器 ---------- */
|
||
#twikoo {
|
||
color: var(--foreground);
|
||
font-size: 0.9375rem;
|
||
line-height: 1.75;
|
||
}
|
||
|
||
#twikoo .tk-comments-title,
|
||
#twikoo .tk-comments-title h4 {
|
||
color: var(--foreground);
|
||
}
|
||
|
||
/* 评论条数等次要文字 */
|
||
#twikoo .tk-comments-count,
|
||
#twikoo .tk-comments-count span {
|
||
color: var(--muted-foreground);
|
||
}
|
||
|
||
/* ---------- 单条评论 ---------- */
|
||
#twikoo .tk-comment {
|
||
border-radius: var(--radius);
|
||
padding: 0.75rem 0;
|
||
}
|
||
|
||
#twikoo .tk-comment .tk-content {
|
||
color: var(--content-secondary);
|
||
line-height: 1.8;
|
||
}
|
||
|
||
#twikoo .tk-comment .tk-content a,
|
||
#twikoo .tk-content a {
|
||
color: var(--primary);
|
||
text-decoration: none;
|
||
}
|
||
|
||
#twikoo .tk-comment .tk-content a:hover {
|
||
text-decoration: underline;
|
||
}
|
||
|
||
/* 昵称 */
|
||
#twikoo .tk-nick,
|
||
#twikoo .tk-nick-link {
|
||
color: var(--foreground);
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* 时间、设备等元信息 */
|
||
#twikoo .tk-time,
|
||
#twikoo .tk-meta,
|
||
#twikoo .tk-tag {
|
||
color: var(--muted-foreground);
|
||
}
|
||
|
||
/* 头像圆角跟随主题 */
|
||
#twikoo .tk-avatar,
|
||
#twikoo .tk-avatar-img {
|
||
border-radius: 9999px;
|
||
}
|
||
|
||
/* 展开/回复等操作 */
|
||
#twikoo .tk-action-link,
|
||
#twikoo .tk-action-icon {
|
||
color: var(--muted-foreground);
|
||
transition: color 0.2s ease;
|
||
}
|
||
|
||
#twikoo .tk-action-link:hover,
|
||
#twikoo .tk-action-icon:hover,
|
||
#twikoo .tk-action-icon.tk-is-active {
|
||
color: var(--primary);
|
||
}
|
||
|
||
/* 子评论缩进区域 */
|
||
#twikoo .tk-replies {
|
||
border-left: 2px solid var(--border);
|
||
margin-left: 0.5rem;
|
||
padding-left: 1rem;
|
||
}
|
||
|
||
/* 分隔线 */
|
||
#twikoo hr,
|
||
#twikoo .tk-comment + .tk-comment {
|
||
border-color: var(--border);
|
||
}
|
||
|
||
/* ---------- 输入区 ---------- */
|
||
#twikoo .tk-submit {
|
||
color: var(--foreground);
|
||
}
|
||
|
||
#twikoo .tk-input .el-textarea__inner,
|
||
#twikoo .el-textarea__inner,
|
||
#twikoo .el-input__inner {
|
||
background-color: var(--card);
|
||
border-color: var(--border);
|
||
border-radius: var(--radius);
|
||
color: var(--foreground);
|
||
box-shadow: none;
|
||
}
|
||
|
||
#twikoo .el-textarea__inner::placeholder,
|
||
#twikoo .el-input__inner::placeholder {
|
||
color: var(--muted-foreground);
|
||
}
|
||
|
||
#twikoo .el-textarea__inner:focus,
|
||
#twikoo .el-input__inner:focus {
|
||
border-color: var(--primary);
|
||
}
|
||
|
||
/* 发送按钮 */
|
||
#twikoo .el-button--primary {
|
||
background-color: var(--primary);
|
||
border-color: var(--primary);
|
||
color: var(--primary-foreground);
|
||
border-radius: var(--radius);
|
||
}
|
||
|
||
#twikoo .el-button--primary:hover,
|
||
#twikoo .el-button--primary:focus {
|
||
background-color: var(--primary);
|
||
border-color: var(--primary);
|
||
opacity: 0.88;
|
||
}
|
||
|
||
#twikoo .el-button {
|
||
border-radius: var(--radius);
|
||
}
|
||
|
||
/* 登录方式 / 提示文字 */
|
||
#twikoo .tk-login-msg,
|
||
#twikoo .tk-login-msg a,
|
||
#twikoo .tk-admin-warn {
|
||
color: var(--muted-foreground);
|
||
}
|
||
|
||
#twikoo .tk-login-msg a:hover {
|
||
color: var(--primary);
|
||
}
|
||
|
||
/* 表情面板 */
|
||
#twikoo .tk-panel {
|
||
background-color: var(--card);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius);
|
||
}
|
||
|
||
/* ---------- 分页 ---------- */
|
||
#twikoo .tk-pagination .el-pager li,
|
||
#twikoo .tk-pagination button {
|
||
background-color: transparent;
|
||
color: var(--muted-foreground);
|
||
}
|
||
|
||
#twikoo .tk-pagination .el-pager li.is-active {
|
||
color: var(--primary);
|
||
}
|
||
|
||
/* ---------- 暗色模式微调 ---------- */
|
||
.dark #twikoo .tk-comment .tk-content {
|
||
color: var(--foreground);
|
||
}
|
||
|
||
.dark #twikoo .el-textarea__inner,
|
||
.dark #twikoo .el-input__inner {
|
||
background-color: var(--surface-subtle);
|
||
color: var(--foreground);
|
||
}
|