评论编辑器改为紧凑底栏与精简工具栏，评论操作收进更多菜单。
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
@@ -2174,10 +2174,76 @@ html.dark .j13-board-trigger.is-invalid .j13-board-trigger-hint {
|
||||
gap: 12px;
|
||||
padding: 10px 0 0;
|
||||
font-size: 12.5px;
|
||||
color: var(--ink-3);
|
||||
color: var(--ink-2);
|
||||
border-top: 1px solid var(--line);
|
||||
background: transparent;
|
||||
}
|
||||
.j13-md-foot-hint {
|
||||
min-width: 0;
|
||||
}
|
||||
.j13-md-foot-actions {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
margin-left: auto;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.j13-md-count {
|
||||
color: var(--ink-2);
|
||||
font-size: 12.5px;
|
||||
}
|
||||
.j13-md-upload,
|
||||
.j13-md-error {
|
||||
margin: 8px 0 0;
|
||||
font-size: 13px;
|
||||
line-height: 1.45;
|
||||
}
|
||||
.j13-md-upload {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: var(--ink-2);
|
||||
}
|
||||
.j13-md-upload button {
|
||||
color: var(--accent);
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
}
|
||||
.j13-md-upload button:focus-visible {
|
||||
outline: 2px solid var(--accent);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
.j13-md-error {
|
||||
color: var(--danger);
|
||||
}
|
||||
.j13-md-editor.is-comment:not(.is-fullscreen) .j13-md-textarea {
|
||||
min-height: 96px;
|
||||
max-height: 320px;
|
||||
height: 96px;
|
||||
overflow-y: auto;
|
||||
padding: 0.5rem 0 0.35rem !important;
|
||||
line-height: 1.65 !important;
|
||||
}
|
||||
.j13-md-editor.is-comment:not(.is-fullscreen) .j13-md-preview {
|
||||
min-height: 96px;
|
||||
max-height: 320px;
|
||||
height: auto;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.j13-md-editor.is-comment .j13-md-toolbar {
|
||||
flex-wrap: nowrap;
|
||||
gap: 2px;
|
||||
padding: 2px 0 8px;
|
||||
}
|
||||
.j13-md-editor.is-comment .j13-md-tool-groups {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
.j13-md-editor.is-comment .j13-md-mode button {
|
||||
height: 32px;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
/* 正文内嵌隐藏块 */
|
||||
.j13-hide-block {
|
||||
@@ -6649,6 +6715,7 @@ a.j13-mention-token:hover {
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 3px;
|
||||
font-weight: 500;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
/* 正文内嵌按钮链接：未分层的 .prose-content a 会盖掉 @layer 的 .btn-primary 字色 */
|
||||
.prose-content a.btn,
|
||||
@@ -7020,7 +7087,7 @@ html.dark .prose-content pre[data-theme] span {
|
||||
}
|
||||
|
||||
/* 评论区的 Markdown 紧凑排版：继承 prose-content 全部规则，仅收紧行距与间距 */
|
||||
.prose-comment { font-size: 14.5px; line-height: 1.7; }
|
||||
.prose-comment { font-size: 15.5px; line-height: 1.7; overflow-wrap: anywhere; }
|
||||
.prose-comment p { margin: 0.35rem 0; }
|
||||
.prose-comment blockquote { margin: 0.5rem 0; padding: 0.45rem 0.9rem; }
|
||||
.prose-comment .md-code-block { margin: 0.6rem 0; }
|
||||
@@ -7090,14 +7157,182 @@ html.dark .prose-content pre[data-theme] span {
|
||||
}
|
||||
}
|
||||
|
||||
/* 评论楼层树：抖音风格
|
||||
主评论全宽；子回复折叠在 panel-2 背景容器内，点击"展开 X 条回复"显示
|
||||
子回复之间用淡分隔线；depth≥2 时昵称后显示 ▶ 被回复者 */
|
||||
/* 评论楼层树
|
||||
主评论全宽；子回复默认折叠。视觉缩进最多两级，更深靠「回复谁」说明。 */
|
||||
|
||||
/* 子回复行：紧凑布局，头像 28px */
|
||||
.cmt-reply-row {
|
||||
padding: 8px 0;
|
||||
.cmt-item {
|
||||
padding: 16px 0;
|
||||
border-top: 1px solid var(--line);
|
||||
min-width: 0;
|
||||
}
|
||||
.cmt-item:first-child {
|
||||
border-top: none;
|
||||
padding-top: 2px;
|
||||
}
|
||||
.cmt-meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 6px 8px;
|
||||
min-width: 0;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.cmt-meta-lead {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 6px 8px;
|
||||
min-width: 0;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
.cmt-name-link {
|
||||
min-width: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
.cmt-name {
|
||||
display: block;
|
||||
max-width: 16em;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 14.5px;
|
||||
font-weight: 600;
|
||||
line-height: 1.35;
|
||||
color: var(--ink);
|
||||
}
|
||||
.cmt-time {
|
||||
font-size: 12.5px;
|
||||
line-height: 1.4;
|
||||
color: var(--ink-2);
|
||||
background: none;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
cursor: default;
|
||||
}
|
||||
.cmt-time:focus-visible {
|
||||
outline: 2px solid var(--accent);
|
||||
outline-offset: 2px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.cmt-edited {
|
||||
font-size: 12.5px;
|
||||
font-weight: 600;
|
||||
color: var(--ink-2);
|
||||
background: none;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
button.cmt-edited {
|
||||
cursor: pointer;
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 2px;
|
||||
}
|
||||
.cmt-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
height: 18px;
|
||||
padding: 0 6px;
|
||||
border-radius: 999px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
color: var(--accent);
|
||||
background: var(--accent-soft);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.cmt-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 2px 10px;
|
||||
margin-top: 8px;
|
||||
min-width: 0;
|
||||
}
|
||||
.cmt-more {
|
||||
position: relative;
|
||||
}
|
||||
.cmt-more-btn,
|
||||
.cmt-reply-btn {
|
||||
min-height: 32px;
|
||||
padding: 0 4px;
|
||||
}
|
||||
.cmt-more-btn {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--ink-2);
|
||||
background: none;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.cmt-more-btn:hover,
|
||||
.cmt-more-btn[aria-expanded="true"] {
|
||||
color: var(--accent);
|
||||
}
|
||||
.cmt-more-menu {
|
||||
position: absolute;
|
||||
z-index: 30;
|
||||
top: calc(100% + 4px);
|
||||
left: 0;
|
||||
min-width: 148px;
|
||||
padding: 4px;
|
||||
border-radius: 12px;
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--line);
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
.cmt-more-menu button {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
padding: 8px 10px;
|
||||
border: 0;
|
||||
border-radius: 8px;
|
||||
background: transparent;
|
||||
color: var(--ink);
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
}
|
||||
.cmt-more-menu button:hover,
|
||||
.cmt-more-menu button:focus-visible {
|
||||
background: var(--panel-2);
|
||||
outline: none;
|
||||
}
|
||||
.cmt-more-menu button.is-danger {
|
||||
color: var(--danger);
|
||||
}
|
||||
.cmt-more-sep {
|
||||
height: 1px;
|
||||
margin: 4px 6px;
|
||||
background: var(--line);
|
||||
}
|
||||
.cmt-posted-note {
|
||||
margin-top: 10px;
|
||||
font-size: 13px;
|
||||
color: var(--ink-2);
|
||||
}
|
||||
.cmt-posted-note a {
|
||||
color: var(--accent);
|
||||
font-weight: 600;
|
||||
}
|
||||
.cmt-submit {
|
||||
height: 38px;
|
||||
padding: 0 16px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.cmt-submit:disabled {
|
||||
background: var(--tint);
|
||||
color: var(--ink-2);
|
||||
box-shadow: none;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* 子回复行：紧凑布局，头像 32px */
|
||||
.cmt-reply-row {
|
||||
padding: 14px 0;
|
||||
border-top: 1px solid var(--line);
|
||||
min-width: 0;
|
||||
}
|
||||
.cmt-reply-row:first-child {
|
||||
border-top: none;
|
||||
@@ -7106,9 +7341,9 @@ html.dark .prose-content pre[data-theme] span {
|
||||
|
||||
/* 子回复昵称 */
|
||||
.cmt-reply-name {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: var(--ink-2);
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
/* 楼层号标签（主评论昵称旁） */
|
||||
@@ -7128,13 +7363,15 @@ html.dark .prose-content pre[data-theme] span {
|
||||
|
||||
/* 回复文字按钮：放在时间右侧，抖音风格 */
|
||||
.cmt-reply-btn {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: var(--ink-3);
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--ink-2);
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0;
|
||||
padding: 0 4px;
|
||||
min-height: 32px;
|
||||
cursor: pointer;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.cmt-reply-btn:hover {
|
||||
color: var(--accent);
|
||||
@@ -7172,6 +7409,10 @@ html.dark .prose-content pre[data-theme] span {
|
||||
padding-left: 10px;
|
||||
border-left: 1px solid var(--line);
|
||||
}
|
||||
.cmt-children .cmt-children .cmt-children {
|
||||
padding-left: 0;
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
/* 展开/收起按钮 */
|
||||
.cmt-fold-btn {
|
||||
@@ -7200,39 +7441,33 @@ html.dark .prose-content pre[data-theme] span {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
/* 评论区公共编辑器：矮于发帖画布，带边框贴近原 field */
|
||||
/* 评论区编辑器：矮输入区，底栏含提交 */
|
||||
.cmt-md-editor {
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 12px;
|
||||
padding: 0.35rem 0.85rem 0.55rem;
|
||||
padding: 0.25rem 0.75rem 0.55rem;
|
||||
background: var(--panel);
|
||||
container-type: inline-size;
|
||||
}
|
||||
.cmt-md-editor .j13-md-editor:not(.is-fullscreen) {
|
||||
min-height: 0;
|
||||
}
|
||||
.cmt-md-editor .j13-md-textarea,
|
||||
.cmt-md-editor .j13-md-preview {
|
||||
min-height: 7.5rem;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.cmt-md-editor-floor .j13-md-textarea,
|
||||
.cmt-md-editor-floor .j13-md-preview {
|
||||
min-height: 10rem;
|
||||
}
|
||||
.cmt-reply-form .cmt-md-editor {
|
||||
background: var(--panel);
|
||||
padding: 0.25rem 0.65rem 0.4rem;
|
||||
}
|
||||
.cmt-reply-form .cmt-md-editor .j13-md-textarea,
|
||||
.cmt-reply-form .cmt-md-editor .j13-md-preview {
|
||||
min-height: 6rem;
|
||||
}
|
||||
.cmt-md-editor .j13-md-toolbar {
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
.cmt-md-editor .j13-md-foot {
|
||||
font-size: 11.5px;
|
||||
font-size: 12.5px;
|
||||
padding-top: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
@container (max-width: 420px) {
|
||||
.cmt-md-editor .j13-md-editor.is-comment .j13-md-tool {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
.cmt-md-editor .j13-md-mode button {
|
||||
padding: 0 6px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 软删占位：匿名马赛克（不含真实头像/昵称） */
|
||||
@@ -7415,8 +7650,18 @@ html.dark .prose-content pre[data-theme] span {
|
||||
.cmt-replies-wrap {
|
||||
padding: 4px 8px;
|
||||
}
|
||||
.cmt-children {
|
||||
padding-left: 8px;
|
||||
.cmt-children,
|
||||
.cmt-children .cmt-children {
|
||||
padding-left: 0;
|
||||
border-left: 0;
|
||||
}
|
||||
.cmt-reply-btn,
|
||||
.cmt-more-btn,
|
||||
.cmt-more-menu button {
|
||||
min-height: 44px;
|
||||
}
|
||||
.cmt-name {
|
||||
max-width: 9.5em;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user