Jason Zimdars
61 lines
1.0 KiB
CSS
61 lines
1.0 KiB
CSS
.comments {
|
|
--avatar-size: 2.33em;
|
|
|
|
max-inline-size: 90ch;
|
|
}
|
|
|
|
.comment__avatar {
|
|
margin-block-start: var(--block-space-half);
|
|
margin-inline: auto calc(var(--block-space) * -0.5);
|
|
position: relative;
|
|
z-index: 1;
|
|
|
|
.comment--mine & {
|
|
margin-inline: calc(var(--block-space) * -0.5) auto;
|
|
}
|
|
}
|
|
|
|
.comment__body {
|
|
p {
|
|
&:first-child {
|
|
margin-block-start: 0;
|
|
}
|
|
|
|
&:last-child {
|
|
margin-block-end: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.comment__content {
|
|
margin-inline: 0 var(--avatar-size);
|
|
padding: var(--block-space);
|
|
|
|
.comment--mine & {
|
|
background-color: var(--color-selected);
|
|
margin-inline: var(--avatar-size) 0;
|
|
}
|
|
|
|
.comment:has(+ .comment--upvotes) & {
|
|
padding-block-end: calc(var(--block-space) * 1.33);
|
|
}
|
|
}
|
|
|
|
.comment--mine {
|
|
flex-direction: row-reverse;
|
|
|
|
.comment__author {
|
|
flex-direction: row-reverse;
|
|
}
|
|
}
|
|
|
|
.comment__timestamp {
|
|
color: var(--color-ink);
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.comment--upvotes{
|
|
margin-block: calc(var(--block-space) * -1.33);
|
|
padding: var(--block-space-half) var(--inline-space-double);
|
|
}
|