forked from retoor/devplacepy
feat: add nested comment reply indicators and responsive flat-reply styling
Add `comment-reply-to` span showing parent author with ↳ indicator in comment headers, and introduce `.comment-replies-flat` dashed border style for deeply nested threads. Adjust responsive spacing: reduce comment gap and vote min-width on mobile, hide reply-to indicator on small screens, and increase reply padding for better readability.
This commit is contained in:
@@ -91,6 +91,15 @@
|
||||
border-left: 2px solid var(--border);
|
||||
}
|
||||
|
||||
.comment-replies-flat {
|
||||
border-left-style: dashed;
|
||||
}
|
||||
|
||||
.comment-reply-to {
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.comment-votes {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -137,6 +146,7 @@
|
||||
.comment-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
@@ -219,16 +229,21 @@
|
||||
}
|
||||
|
||||
.comment {
|
||||
gap: 0.5rem;
|
||||
gap: 0.375rem;
|
||||
margin-left: calc(var(--comment-depth, 0) * 0.025rem);
|
||||
}
|
||||
|
||||
.comment-votes {
|
||||
min-width: 28px;
|
||||
min-width: 24px;
|
||||
}
|
||||
|
||||
.comment-replies {
|
||||
padding-left: 0.025rem;
|
||||
margin-top: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
|
||||
.comment-reply-to {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -240,4 +255,16 @@
|
||||
.comments-section {
|
||||
padding: var(--space-md);
|
||||
}
|
||||
|
||||
.comment {
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.comment-votes {
|
||||
min-width: 20px;
|
||||
}
|
||||
|
||||
.comment-replies {
|
||||
padding-left: 0.375rem;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user