/* * twikoo 评论区的主题适配（朱墨留白 / VermilionVoid） * * twikoo 的样式是脚本运行时注入到 的，会排在本文件之后， * 所以这里的选择器统一加 #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); }