/* ============================================================
Twikoo 主题适配版（qiwi-v2）精简版
============================================================ */
.twikoo {
--tk-primary: var(--v2-accent);
--tk-primary-light: var(--v2-accent-strong);
--tk-primary-bg: color-mix(in srgb, var(--v2-accent) 10%, transparent);
--tk-text: var(--v2-heading);
--tk-text-secondary: var(--v2-text);
--tk-text-muted: var(--v2-muted);
--tk-bg: var(--v2-bg);
--tk-border: var(--v2-border);
--tk-border-light: var(--v2-border-soft);
--tk-ruser: var(--v2-accent-strong);
--tk-field-bg: var(--v2-surface);
--tk-field-line: var(--v2-border-soft);
--tk-ring: 0 0 0 3px color-mix(in srgb, var(--v2-accent) 12%, transparent);
--tk-faint: var(--v2-muted);
--tk-label: var(--v2-text);
--tk-placeholder: var(--v2-muted);
--spacing-sm: 10px;
box-sizing: border-box;
margin-top: 40px;
margin-bottom: 40px;
line-height: 1.8;
position: relative;
}
:root[data-theme="dark"] .twikoo {
--tk-ruser: var(--v2-accent-strong);
}
/* 基础 */
.twikoo .tk-replies .tk-row.actions { margin-left: 0; }
.twikoo .tk-footer { display: none; }
.twikoo .tk-submit > .tk-row { align-items: flex-start; }
.twikoo .tk-comments-container { padding-top: 10px; }
.twikoo .tk-input__inner:focus {
border-color: color-mix(in srgb, var(--v2-accent) 55%, transparent) !important;
box-shadow: var(--tk-ring) !important;
outline: none;
}
.twikoo .tk-input--group { transition: background-color .2s ease; }
.twikoo .tk-input--group:focus-within { background: color-mix(in srgb, var(--v2-accent) 5%, transparent); }
.twikoo .tk-input--group .tk-input-group__prepend,
.twikoo .tk-input--group .tk-input-group__append { color: var(--tk-label) !important; line-height: 1; }
.twikoo .tk-input__count { right: 12px; bottom: 7px; color: var(--tk-faint) !important; background: transparent !important; line-height: 1; }
/* 元信息输入区 */
.twikoo .tk-meta-input:hover { border-color: var(--v2-border); }
.twikoo .tk-meta-input:focus-within {
border-color: color-mix(in srgb, var(--v2-accent) 55%, transparent);
box-shadow: var(--tk-ring);
}
.twikoo .tk-meta-input .tk-input + .tk-input { margin: 0; }
/* 文本域 */
.twikoo .tk-meta-input .tk-input + .tk-input { margin-left: .5rem; }
/* 提交区 */
.twikoo .tk-submit-action-icon {
color: var(--tk-faint) !important; margin-right: 12px; cursor: pointer;
transition: color .2s ease;
}
.twikoo .tk-submit-action-icon:hover,
.twikoo .tk-submit-action-icon.__markdown { color: var(--v2-accent) !important; }
/* 按钮 */
.twikoo .tk-button {
padding: 3px 12px; border-radius: 4px; box-shadow: none;
font-family: inherit; line-height: 1.4;
transition: color .2s ease, background-color .2s ease, border-color .2s ease;
}
.twikoo .tk-button--primary {
color: var(--v2-bg) !important; background: var(--tk-primary) !important;
border: 1px solid var(--tk-primary) !important;
}
.twikoo .tk-button--primary:not(.is-disabled):hover,
.twikoo .tk-button--primary:not(.is-disabled):focus,
.twikoo .tk-button--primary:not(.is-disabled):active {
color: var(--v2-bg) !important; background: var(--tk-primary-light) !important;
border-color: var(--tk-primary-light) !important;
}
.twikoo .tk-button--primary.is-disabled {
color: var(--v2-bg) !important;
background: color-mix(in srgb, var(--tk-primary) 40%, transparent) !important;
border-color: transparent !important;
}
.twikoo .tk-button:not(.tk-button--primary):not(.tk-button--text) {
color: var(--tk-text-secondary) !important;
border: 1px solid var(--tk-border) !important;
}
.twikoo .tk-button:not(.tk-button--primary):not(.tk-button--text):hover,
.twikoo .tk-button:not(.tk-button--primary):not(.tk-button--text):focus {
color: var(--tk-primary-light) !important; background: var(--tk-primary-bg) !important;
border-color: var(--tk-primary-light) !important;
}
/* 预览与标题 */
.twikoo .tk-preview-container {
margin: 0 0 var(--spacing-sm); padding: 10px 14px;
background: var(--tk-field-bg); border: 1px solid var(--tk-border);
border-radius: 10px;
}
.twikoo .tk-comments-title {
margin-bottom: 15px; padding-bottom: var(--spacing-sm);
border-bottom: 1px solid var(--v2-border-soft);
font-size: 1.5rem; font-weight: 600; line-height: 1.4;
}
.twikoo .tk-comments-count { color: var(--tk-text-secondary); font-size: 1rem; font-weight: 400; }
.twikoo .tk-comments-actions { gap: .55em; }
.twikoo .tk-comments-sort { gap: .9em; margin-right: .6em; }
.twikoo .tk-sort-item { color: var(--tk-faint) !important; font-size: 1.3rem; transition: color .2s ease; }
.twikoo .tk-sort-item:hover,
.twikoo .tk-sort-item:focus,
.twikoo .tk-sort-item.__active { color: var(--v2-accent) !important; }
.twikoo .tk-icon.__comments { color: var(--tk-faint) !important; transition: color .2s ease; }
.twikoo .tk-icon.__comments:hover { color: var(--v2-accent) !important; }
.twikoo .tk-icon.__comments.__active {
color: var(--v2-bg) !important; background: var(--v2-accent);
box-shadow: 0 0 0 2px var(--v2-accent);
}
/* 评论条目 */
.twikoo .tk-comment {
padding-bottom: 15px;
border-bottom: 1px dashed var(--v2-border-soft);
text-align: justify;
}
.twikoo .tk-comment:last-child { padding-bottom: 0; border-bottom: none; }
.twikoo .tk-comments-container > .tk-comment:first-child { padding-top: 2px; }
/* 布局完全交还 Twikoo 原生结构：
.tk-row（昵称 / 日期 / 管理员操作）→ .tk-content → .tk-row.actions（点赞 / 回复）
不做 display:contents、不做 order 重排、不做绝对定位 */
.twikoo .tk-main { min-width: 0; }
.twikoo .tk-comment .tk-meta { line-height: 1.4; }
.twikoo .tk-comment .tk-content { margin-bottom: .3rem; }
.twikoo .tk-comment .tk-action { gap: .85em; }
/* 文字排版 */
.twikoo .tk-meta { flex-wrap: wrap; align-items: baseline; gap: 0; min-width: 0; }
.twikoo .tk-nick,
.twikoo .tk-nick-link {color: var(--v2-text);}
.twikoo .tk-replies .tk-nick-link {font-size: 1rem;}
.twikoo .tk-nick-link:hover { color: var(--v2-accent) !important; }
.twikoo .tk-time { color: #999; padding-left: .5rem; }
.twikoo .tk-tag {
align-self: center; margin-left: .35em; padding: 1px 6px;
border: none !important; border-radius: 4px;
font-size: 1rem; line-height: 1.7;
}
.twikoo .tk-tag-red {
color: #e5484d !important;
background: color-mix(in srgb, #e5484d 14%, transparent) !important;
}
.twikoo .tk-tag-yellow {
color: #c99700 !important;
background: color-mix(in srgb, #c99700 16%, transparent) !important;
}
/* tk-actions（隐藏 / 置顶 / 删除）
位置：仍在日期右侧的原位；但改为「占位常驻 + visibility 切换」，
显示/隐藏不改变宽高，绝不挤动下面的内容（原生 display:none→inline 会让行高与换行变化） */
.twikoo .tk-comment .tk-actions {
display: inline-flex !important;
align-items: center;
margin-left: .9em;
font-size: .85rem; line-height: 1.4;
visibility: hidden; opacity: 0; pointer-events: none;
transition: opacity .15s ease, visibility .15s;
}
.twikoo .tk-comment:hover .tk-actions,
.twikoo .tk-comment:focus-within .tk-actions {
visibility: visible; opacity: 1; pointer-events: auto;
}
.twikoo .tk-actions button {
margin: 0; color: var(--tk-faint) !important; font-size: inherit;
transition: color .2s ease;
}
.twikoo .tk-actions button + button { margin-left: .85em; }
.twikoo .tk-actions button:hover { color: var(--v2-accent) !important; }
/* 触屏没有 hover，常显 */
@media (hover: none) {
.twikoo .tk-comment .tk-actions { visibility: visible; opacity: 1; pointer-events: auto; }
}
/* 正文 */
.twikoo .tk-content > span:first-child:has(> .tk-ruser) {
display: inline !important; margin-bottom: 0 !important;
color: var(--tk-faint); font-size: 1rem; line-height: 1.6;
}
.twikoo .tk-content > span:has(> .tk-ruser) + span,
.twikoo .tk-content > span:has(> .tk-ruser) + .tk-content { display: inline !important; }
.twikoo .tk-content > span:has(> .tk-ruser) + span > p,
.twikoo .tk-content > span:has(> .tk-ruser) + .tk-content > p {
display: inline !important; margin: 0 !important; padding: 0 !important; font-size: 1rem;
}
.twikoo .tk-content .tk-ruser {
color: var(--v2-accent) !important; font-weight: 500; text-decoration: none;
}
.twikoo .tk-content .tk-ruser:hover { text-decoration: underline; }
.twikoo .tk-content a { color: var(--v2-accent); text-decoration: none; }
.twikoo .tk-content a:hover { text-decoration: underline; }
.twikoo .tk-content blockquote {
margin: var(--spacing-sm) 0; padding: 6px 12px;
color: var(--tk-text-secondary);
background: color-mix(in srgb, var(--v2-accent) 6%, transparent);
border-left: 3px solid var(--v2-accent); border-radius: 0 6px 6px 0;
}
.twikoo .tk-content img { max-width: 100% !important; border-radius: 8px; }
.twikoo .tk-content code {
padding: 2px 5px; background: var(--v2-surface);
border-radius: 4px; font-family: monospace; font-size: .9em;
}
.twikoo .tk-content pre {
padding: 12px 14px; background: var(--v2-surface);
border-radius: 8px; overflow-x: auto;
}
/* 操作链接 */
.twikoo .tk-action-link {
margin: 0; color: var(--tk-faint) !important; font-size: .85rem;
line-height: 1; transition: color .2s ease;
}
.twikoo .tk-action-icon { color: inherit !important; }
.twikoo .tk-action-link:hover { color: var(--v2-accent) !important; }
.twikoo .tk-action-link.tk-liked,
.twikoo .tk-action-link.tk-disliked { color: var(--v2-accent) !important; }
.twikoo .tk-action-link:hover .tk-action-icon,
.twikoo .tk-action-link:hover .tk-action-icon-solid,
.twikoo .tk-action-link.tk-liked .tk-action-icon,
.twikoo .tk-action-link.tk-liked .tk-action-icon-solid,
.twikoo .tk-action-link.tk-disliked .tk-action-icon,
.twikoo .tk-action-link.tk-disliked .tk-action-icon-solid { color: var(--v2-accent) !important; }
.twikoo .tk-action-count { height: auto; line-height: 1; }
/* 楼中楼 */
.twikoo .tk-replies .tk-comment {border-bottom: none; }
.twikoo .tk-replies .tk-comment + .tk-comment { padding-top: 12px; }
.twikoo .tk-replies .tk-comment:last-child { padding-bottom: 0; }
/* 头像 */
.twikoo .tk-avatar {
flex-shrink: 0; margin-right: 12px; border-radius: 50%; box-shadow: none;
}
.twikoo .tk-avatar img,
.twikoo .tk-avatar .tk-avatar-img {
display: block; width: 100% !important; height: 100% !important;
line-height: 1 !important; object-fit: cover; border-radius: 50%;
}
.twikoo .tk-avatar .tk-avatar-img { color: var(--tk-faint); }
.twikoo .tk-comment .tk-submit .tk-avatar {
width: 32px; height: 32px; margin-right: 10px;
}
/* 展开 / 额外 / 空态 */
.twikoo .tk-expand {
margin-top: .5rem; padding: 7px 0;
color: var(--tk-text-secondary); border-radius: 8px; font-size: .85rem; transition: color .2s ease, background-color .2s ease;
}
.twikoo .tk-expand:hover {
color: var(--v2-accent);
background: color-mix(in srgb, var(--v2-accent) 6%, transparent) !important;
}
.twikoo .tk-extra {
margin: 0;
display: inline-flex !important;
align-items: center !important;
gap: 1px !important;
}
.twikoo .tk-extra-text {
line-height: normal !important;
display: inline-flex;
align-items: center;
}
.twikoo .tk-extras svg,
.twikoo .tk-extra svg {
display: block !important;
width: 14px;
height: 14px;
}
.twikoo .tk-comments-no { padding: 2rem 0; color: var(--tk-faint); font-size: 1.4rem; }
.twikoo .tk-comments-search .tk-input__inner { height: 36px; line-height: 36px; }
.twikoo .tk-pagination .tk-input__inner { height: 28px; padding: 0; text-align: center; line-height: 28px; }
/* OwO */
.twikoo .OwO .OwO-body,
.OwO .OwO-body {
color: var(--v2-text) !important; background: var(--v2-surface) !important;
border: 1px solid var(--tk-border) !important; border-radius: 10px;
box-shadow: 0 4px 12px rgba(0, 0, 0, .1) !important;
}
/* 移动端 */
@media screen and (max-width: 767px) {
.twikoo .tk-comments-title { font-size: 1rem; }
.twikoo .tk-comments-actions { gap: .4em; }
.twikoo .tk-comments-sort { gap: .75em; margin-right: .4em; }
.twikoo .tk-meta-input { flex-direction: column; gap: 0; }
.twikoo .tk-meta-input .tk-input { height: 40px; }
.twikoo .tk-avatar { width: 36px; height: 36px; margin-right: 10px; }
.twikoo .tk-meta-input .tk-input + .tk-input { margin-left: 0; margin-top: 10px; }
}
/* 博主标签 SVG */
.twikoo .tk-tag-green {
position: relative;
background-color: transparent !important; border: none !important;
padding: 0 !important; font-size: 0 !important; color: transparent !important;
width: 16px !important; height: 16px !important;
display: inline-flex !important; align-items: center !important;
justify-content: center !important; margin: 0 3px !important;
}
.twikoo .tk-tag-green::before {
content: ""; display: block; width: 100%; height: 100%;
background-color: var(--tk-ruser, #d19a66);
-webkit-mask-image: url('data:image/svg+xml,');
mask-image: url('data:image/svg+xml,');
-webkit-mask-size: contain; mask-size: contain;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-position: center; mask-position: center;
}
.twikoo .tk-tag-green::after {
content: "博主";
position: absolute;
left: 50%;
bottom: calc(100% + 6px);
transform: translateX(-50%) translateY(2px);
padding: 2px 8px;
font-size: 12px;
line-height: 1.6;
white-space: nowrap;
color: var(--v2-bg);
background: var(--v2-accent);
border-radius: 4px;
pointer-events: none;
opacity: 0;
visibility: hidden;
transition: opacity .15s ease, transform .15s ease, visibility .15s;
z-index: 10;
}
.twikoo .tk-tag-green:hover::after {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
/* 精准修复回复框样式 */
.twikoo .tk-comment .tk-submit {
width: 100% !important;
}
.twikoo .tk-comment .tk-replies {
width: 100% !important;
}