60 lines
1.2 KiB
CSS
60 lines
1.2 KiB
CSS
.comment {
|
|
margin-inline-end: calc(var(--block-space) * 1.5);
|
|
padding:
|
|
calc(var(--block-space) * 1.5)
|
|
calc(var(--inline-space) * 2)
|
|
calc(var(--block-space) * 2)
|
|
var(--inline-space);
|
|
|
|
&:target {
|
|
background-color: var(--color-selected);
|
|
}
|
|
|
|
.avatar {
|
|
margin-block-start: -0.5em;
|
|
margin-inline-start: calc(-2.65em + var(--inline-space));
|
|
}
|
|
|
|
&:is(.comment--mine) {
|
|
background-color: var(--color-selected);
|
|
flex-direction: row-reverse;
|
|
margin-inline: calc(var(--block-space) * 1.5) auto;
|
|
padding:
|
|
calc(var(--block-space) * 1.5)
|
|
var(--inline-space)
|
|
calc(var(--block-space) * 2)
|
|
calc(var(--inline-space) * 2);
|
|
|
|
.avatar {
|
|
margin-inline: auto calc(-2.65em + var(--inline-space));
|
|
}
|
|
|
|
.comment__author {
|
|
flex-direction: row-reverse;
|
|
}
|
|
}
|
|
}
|
|
|
|
.comment__body {
|
|
p {
|
|
&:first-child {
|
|
margin-block-start: 0;
|
|
}
|
|
|
|
&:last-child {
|
|
margin-block-end: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.boost {
|
|
margin-block: calc(var(--block-space) * -2);
|
|
padding: var(--block-space) var(--block-space-double);
|
|
z-index: 1;
|
|
|
|
+ .boost,
|
|
&:has( + .boost) {
|
|
margin-block: 0;
|
|
}
|
|
}
|