Jason Zimdars
92 lines
1.8 KiB
CSS
92 lines
1.8 KiB
CSS
.comments {
|
|
--avatar-size: 2.33em;
|
|
--comment-padding-block: 0.65lh;
|
|
--comment-padding-inline: 2ch;
|
|
|
|
max-inline-size: 120ch;
|
|
row-gap: var(--comment-padding-block);
|
|
|
|
> :first-child {
|
|
margin-block-start: var(--comment-padding-block);
|
|
}
|
|
}
|
|
|
|
.comment {
|
|
max-inline-size: 66ch;
|
|
margin-block: var(--comment-padding-block);
|
|
margin-inline: 0 auto;
|
|
|
|
textarea {
|
|
padding: var(--comment-padding-block) var(--comment-padding-inline);
|
|
}
|
|
}
|
|
|
|
.comment__avatar {
|
|
margin-block-start: calc(var(--comment-padding-block) * 0.5);
|
|
margin-inline: auto calc(var(--comment-padding-inline) * -0.75);
|
|
position: relative;
|
|
z-index: 1;
|
|
|
|
.comment--mine & {
|
|
margin-inline: calc(var(--comment-padding-inline) * -0.75) auto;
|
|
}
|
|
}
|
|
|
|
.comment__body {
|
|
p {
|
|
&:first-child {
|
|
margin-block-start: 0;
|
|
}
|
|
|
|
&:last-child {
|
|
margin-block-end: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.comment__content {
|
|
margin-inline: auto var(--avatar-size);
|
|
padding: var(--comment-padding-block) var(--comment-padding-inline);
|
|
|
|
.comment--mine & {
|
|
margin-inline: var(--avatar-size) auto;
|
|
}
|
|
|
|
.comment:has(+ .event-summary) & {
|
|
padding-block-end: calc(var(--comment-padding-block) * 1.5);
|
|
}
|
|
}
|
|
|
|
.comment--mine {
|
|
flex-direction: row-reverse;
|
|
margin-inline: auto 0;
|
|
|
|
.comment__author {
|
|
flex-direction: row-reverse;
|
|
}
|
|
|
|
.input {
|
|
&::placeholder {
|
|
color: var(--color-ink);
|
|
opacity: 0.5;
|
|
}
|
|
|
|
&::selection {
|
|
background-color: var(--color-selected-dark);
|
|
}
|
|
}
|
|
}
|
|
|
|
.comment__timestamp {
|
|
color: var(--color-ink);
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.event-summary {
|
|
color: var(--bubble-color);
|
|
font-weight: 600;
|
|
gap: 0.5ch;
|
|
/* margin-block: calc(var(--comment-padding-block) * -1); */
|
|
padding: calc(var(--comment-padding-block) * 0.5) var(--comment-padding-inline);
|
|
}
|